/* Palette Girlies: the system map and the Palette Girlies Card (/card).
   Loaded on the pages that carry the map (tools/build.py adds it when a page has data-sm), on the quiz and test pages that save a layer
   (head_extra) and on /card. The papers are the torn-paper collage with a live watercolor wash in the corner; swatches stay flat and exact
   on plain paper. site/js/sysmap.js fills the papers she has, site/js/card-page.js builds the rows. Text never goes under 12.5px. */

/* ---------- the map: four papers under a clip, one loose paper, a pencil arrow ---------- */
.sysmap { margin: 26px 0 10px; display: grid; gap: 14px; }
.sm-base { position: relative; padding-top: 4px; }
.sm-clip { position: relative; z-index: 4; display: flex; align-items: flex-end; gap: 10px; margin: 0 0 -20px 20px; pointer-events: none; }
.sm-clip-wire { display: block; transform: rotate(-3deg); filter: drop-shadow(0 3px 3px rgba(43, 34, 48, .3)); }
.sm-clip-art { display: block; }
.sm-clip-text { padding-bottom: 6px; font: 400 clamp(28px, 7vw, 36px)/1 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.sm-stack { list-style: none; margin: 0; padding: 18px 0 0; display: grid; }

.sm-paper { position: relative; isolation: isolate; margin-top: -10px; padding: 0 6px; border-style: solid; border-width: 16px; border-image: url(/img/collage/frame-card.webp) 52 fill / 16px / 5px round; transform: rotate(var(--tilt, 0deg)); }
.sm-paper:first-child { margin-top: 0; }
.sm-paper--book { border-image-source: url(/img/collage/frame-book.webp); }
.sm-paper--news { border-image-source: url(/img/collage/frame-news.webp); }
.sm-wash { position: absolute; z-index: -1; right: -10px; top: -10px; bottom: -10px; width: 46%; height: calc(100% + 20px); pointer-events: none; mix-blend-mode: multiply; opacity: .95; }
.sm-link { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; column-gap: 14px; min-height: 80px; padding: 4px 0 6px; color: var(--ink); text-decoration: none; }
.sm-link:hover { color: var(--ink); }
.sm-link:focus-visible { outline-offset: 6px; }
.sm-text { display: grid; gap: 2px; min-width: 0; padding-right: 14%; }
.sm-name { font: 400 clamp(25px, 6.4vw, 30px)/1.05 var(--serif); letter-spacing: -.005em; }
.sm-tease { font: 400 14.5px/1.3 var(--sans); color: var(--ink); }
.sm-val { margin-top: 2px; font: 700 17.5px/1.25 var(--sans); color: var(--berry); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sm-time { font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sm-beta { display: inline-block; margin-left: 9px; padding: 3px 7px 2px; font: 700 12.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tradition); border: 1.6px solid currentColor; border-radius: 2px 6px 3px 5px; transform: rotate(-3deg); vertical-align: 4px; background: rgba(255, 253, 248, .7); }

/* filled: her result in place of the invitation */
.sm-paper[data-state="filled"] .sm-val, .sm-tile[data-state="filled"] .sm-val { text-decoration: none; }
.sm-paper[data-state="filled"] .sm-time { display: none; }
.sm-paper[data-state="filled"] .sm-val { font: 400 clamp(22px, 5.6vw, 26px)/1.1 var(--serif); letter-spacing: -.004em; color: var(--ink); }
.sm-paper[data-state="filled"] .sm-val::first-letter { text-transform: uppercase; }

/* the small flat drawing on the left of each paper: decoration, her result is the text */
.sm-art { display: flex; align-items: center; justify-content: center; width: 66px; height: 48px; gap: 2px; }
.sm-art i { display: block; background: var(--c); }
.sm-art--color i { width: 20px; height: 38px; }
.sm-art--strip i { width: 12px; height: 44px; }
.sm-art--strip i:first-child { box-shadow: inset 0 0 0 1px #DDD5CB; }
.sm-paper[data-state="filled"] .sm-art--color i { box-shadow: 0 0 0 1px rgba(43, 34, 48, .18); }
.sm-art--line, .sm-art--scale { display: block; }
.sm-art--strip i.is-hers { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); position: relative; z-index: 1; }

/* the loose paper: the eight words, and the pencil note */
.sm-chosen { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.sm-paper--word { margin-top: 0; padding: 0 8px; }
.sm-paper--word .sm-link { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 10px 0 8px; }
.sm-paper--word .sm-text { padding-right: 20%; }
.sm-tape { position: absolute; z-index: 3; top: -34px; left: 52%; width: 112px; height: 34px; background: url(/img/collage/tape-blush.webp) center / contain no-repeat; transform: translateX(-50%) rotate(2deg); pointer-events: none; }
.sm-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 6px; }
.sm-words li { padding: 7px 10px 6px; font: 700 13.5px/1 var(--sans); letter-spacing: .04em; color: var(--ink); background: rgba(255, 253, 248, .85); border: 1.6px solid var(--ink); border-radius: 2px 8px 3px 7px; }
.sm-words li:nth-child(even) { transform: rotate(.8deg); }
.sm-words li:nth-child(odd) { transform: rotate(-.7deg); }
.sm-words li.is-hers { color: #fff; background: var(--berry); border-color: var(--berry); }
.sm-arrow { order: -1; display: flex; align-items: flex-end; gap: 6px; margin: 2px 0 6px 26px; }
.sm-arrow-art { display: block; flex: none; transform: rotate(8deg); }
.sm-arrow-note { padding-bottom: 6px; font-size: 24px; line-height: 1.05; transform: rotate(-2deg); }
.sm-count { text-align: left; font: 700 13.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }

/* the paintings of her word and her shape, on /card once they exist (site/data/art.json, site/js/art.js, site/js/sysmap.js) */
.sm-paper--word.has-pic .sm-text { padding-right: 118px; min-height: 104px; align-content: center; }
.sm-paper--word > .sm-pic { position: absolute; z-index: 2; top: 12px; right: 6px; width: 100px; max-width: none; margin: 0; }
.sm-frame-pic { max-width: 460px; margin-top: 0; padding: 14px 10px 16px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: 20px; row-gap: 2px; }
.sm-frame-pic .sm-name { grid-column: 2; grid-row: 1; align-self: end; }
.sm-frame-val { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font: 400 clamp(22px, 5.6vw, 26px)/1.1 var(--serif); letter-spacing: -.004em; color: var(--ink); }
.sm-prints { grid-column: 1; grid-row: 1 / span 2; display: flex; gap: 16px; }
.sm-prints .art-slot { flex: none; width: 128px; max-width: none; margin: 0; }
.sm-frame-pic.is-two { max-width: 520px; grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.sm-frame-pic.is-two .sm-name, .sm-frame-pic.is-two .sm-frame-val { grid-column: 1; }
.sm-frame-pic.is-two .sm-prints { grid-column: 1; grid-row: 3; margin-top: 14px; }
.sm-frame-pic.is-two .sm-prints .art-slot { flex: 1 1 0; width: auto; max-width: 150px; }
.sm-prints .art-slot + .art-slot .art-pic { --tilt: 2deg; }

@media (min-width: 860px) {
  .sysmap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 56px; align-items: start; margin: 34px 0 16px; }
  .sm-count { grid-column: 1 / -1; }
  .sm-chosen { padding-top: 30px; }
  .sm-arrow { margin-left: 4px; }
  .sm-arrow-art { transform: rotate(-96deg) scaleX(-1); margin: 0 0 0 -4px; }
  .sm-link { min-height: 88px; }
  .sm-paper--word.has-pic .sm-text { padding-right: 150px; min-height: 134px; }
  .sm-paper--word > .sm-pic { top: 14px; right: 10px; width: 132px; }
  .sysmap:has(.sm-frame-pic) .sm-base { grid-column: 1; grid-row: 1 / span 2; }
  .sysmap:has(.sm-frame-pic) .sm-chosen { grid-column: 2; grid-row: 1; }
  .sysmap:has(.sm-frame-pic) .sm-frame-pic { grid-column: 2; grid-row: 2; }
  .sm-frame-pic, .sm-frame-pic.is-two { max-width: none; }
  .sm-prints .art-slot { width: 144px; }
}

/* ---------- strip: five small papers in a row, on /tests ---------- */
.sysmap--strip { display: block; margin: 22px 0 6px; padding: 8px 10px 14px; border-style: solid; border-width: 16px; border-image: url(/img/collage/frame-card.webp) 52 fill / 16px / 5px round; }
.sm-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; }
.sm-strip-head .more { display: inline-flex; align-items: center; min-height: 44px; }
.sm-strip-count { font: 400 clamp(26px, 6.6vw, 34px)/1.05 var(--serif); letter-spacing: -.005em; }
.sm-tiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.sm-tile .sm-link { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 3px; min-height: 64px; padding: 9px 10px 8px; background: rgba(255, 253, 248, .85); border: 1.8px dashed rgba(43, 34, 48, .55); border-radius: 2px 7px 3px 6px; }
.sm-tile .sm-name { font-size: 20px; line-height: 1.05; }
.sm-tile .sm-beta { margin-left: 6px; vertical-align: 3px; }
.sm-tile .sm-val { margin: 0; font-size: 15px; line-height: 1.2; }
.sm-tile[data-state="filled"] .sm-link { background: var(--card); border: 1.8px solid var(--ink); }
.sm-tile[data-state="filled"] .sm-val { color: var(--ink); font-weight: 700; }

/* ---------- the home page: the map as one row of the index ---------- */
.ed-row-sw--card i { display: block; flex: 1; height: 100%; background: transparent; border: 2px dashed rgba(43, 34, 48, .5); border-radius: 1px; box-sizing: border-box; }
.ed-row-sw--card i[data-state="filled"] { background: var(--c); border: 0; }

/* ---------- /card ---------- */
.card-app { display: grid; gap: 34px; margin-top: 28px; }
.card-lead { max-width: var(--read); font: 600 19px/1.45 var(--sans); }
.card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.card-status { flex-basis: 100%; min-height: 1.4em; font: 700 15.5px/1.4 var(--sans); color: var(--berry-dark); }
.card-missing { display: grid; gap: 10px; }
.card-missing-h { font: 700 13.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.cempty { display: grid; gap: 4px 14px; padding: 14px 16px 12px; background: rgba(255, 253, 248, .6); border: 2px dashed rgba(43, 34, 48, .5); border-radius: 3px 10px 4px 9px; }
.cempty p { font: 600 17.5px/1.35 var(--sans); }
.cempty .more { display: inline-flex; align-items: center; min-height: 44px; }
.cempty-time { font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
@media (min-width: 700px) { .card-missing { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .card-missing-h { grid-column: 1 / -1; } }

.card-rows { display: grid; gap: 28px; }
@media (min-width: 980px) { .card-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; align-items: start; } }
.crow { position: relative; isolation: isolate; padding: 0 10px 6px; border-style: solid; border-width: 18px; border-image: url(/img/collage/frame-card.webp) 52 fill / 18px / 6px round; }
.crow:nth-child(even) { border-image-source: url(/img/collage/frame-book.webp); }
.crow-sum { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; column-gap: 10px; min-height: 76px; padding: 4px 0 8px; cursor: pointer; list-style: none; }
.crow-sum::-webkit-details-marker { display: none; }
.crow-sum::after { content: "+"; grid-column: 2; grid-row: 1 / span 3; justify-self: center; font: 400 34px/1 var(--sans); color: var(--berry); transition: transform .25s var(--ease); }
.crow[open] > .crow-sum::after { transform: rotate(45deg); }
.crow-sum:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; }
.crow-no { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.crow-t { margin-top: 2px; font: 600 clamp(30px, 8vw, 42px)/1.04 var(--serif); letter-spacing: -.01em; }
.crow-peek { margin-top: 2px; font: 400 15.5px/1.35 var(--sans); color: var(--ink); }
.crow[open] .crow-peek:not(.is-move) { display: none; }
.crow-peek.is-move { font: italic 400 24px/1.2 var(--slant); color: var(--berry); }
@media (hover: hover) { .crow-sum:hover .crow-t { color: var(--berry-dark); } }
.cline-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cline { display: grid; gap: 5px; padding: 14px 0 4px; border-top: 1px dashed rgba(43, 34, 48, .35); }
.cline:first-child { border-top: 0; padding-top: 6px; }
.cline-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.cline-tag .sm-beta { margin-left: 4px; vertical-align: 0; }
.cline-do { max-width: 36em; font: 600 18.5px/1.42 var(--sans); }
.cline--fact .cline-do { font-weight: 400; }
.cline-chips { display: flex; gap: 3px; height: 20px; max-width: 240px; margin: 2px 0 2px; }
.cline-chips i { flex: 1; background: var(--c); border-radius: 1px; }
.cline-chips i.light { box-shadow: inset 0 0 0 1px #DDD5CB; }
.cline-note { font: italic 400 16px/1.35 var(--sans); color: var(--ink); }
.cline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.cline-meta .seal { margin: 0; }
.cline-why > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 2px; cursor: pointer; list-style: none; font: 700 15px/1 var(--sans); color: var(--berry); }
.cline-why > summary::-webkit-details-marker { display: none; }
.cline-why > summary::after { content: "+"; font: 400 24px/1 var(--sans); transition: transform .25s var(--ease); }
.cline-why[open] > summary::after { transform: rotate(45deg); }
.cline-why > summary:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.cline-why p { max-width: 36em; margin: 0 0 8px; font: 400 17px/1.5 var(--sans); }
.cline-why .cline-sealnote { margin-top: -2px; font-size: 15.5px; }
@media (hover: hover) { .cline-why > summary:hover { color: var(--berry-dark); } }

.card-beta { padding: 14px 14px 12px; border-style: solid; border-width: 18px; border-image: url(/img/collage/frame-blush.webp) 52 fill / 18px / 6px round; max-width: var(--read); }
.card-beta .crow-no { display: flex; align-items: center; gap: 4px; }
.card-beta p + p { margin-top: 8px; }
.card-beta p:not(.crow-no) { font: 400 18px/1.5 var(--sans); }
.card-end { display: grid; justify-items: start; gap: 12px; padding-bottom: 8px; }
.card-end .btn { justify-self: start; }
.card-end-line { max-width: var(--read); font: 400 17px/1.5 var(--sans); }
.card-fine { max-width: var(--read); font: 400 15.5px/1.5 var(--sans); color: var(--ink); }
.card-kicker { font: 700 13.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }

/* the five rows of the card as an outline, before she has anything saved */
.card-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); counter-reset: crow; }
.card-preview li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 14px 2px; border-bottom: 1px solid rgba(43, 34, 48, .3); counter-increment: crow; }
.card-preview li::before { content: counter(crow); grid-row: 1 / span 2; font: 400 40px/1 var(--serif); color: var(--berry); }
.card-preview b { font: 600 24px/1.1 var(--serif); }
.card-preview span { font-size: 16.5px; line-height: 1.4; }

/* the hidden attribute wins over every display rule of this file */
.sysmap [hidden], .remember-box [hidden], .card-app [hidden], .tp-full [hidden] { display: none !important; }

/* ---------- "Remember my result" under a quiz result ---------- */
.remember-box { display: grid; gap: 0; margin: 18px 0 4px; padding: 12px 14px 10px; background: rgba(255, 253, 248, .7); border: 1.8px dashed rgba(43, 34, 48, .5); border-radius: 3px 10px 4px 9px; }
.remember-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.remember-label { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 17px/1.3 var(--sans); cursor: pointer; }
.remember-label input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--berry); }
.remember-forget { min-height: 44px; padding: 4px 2px; font: 700 15.5px/1.2 var(--sans); color: var(--berry); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.remember-status { font: 400 15.5px/1.35 var(--sans); }
.remember-status:empty { display: none; }
.remember-card { display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--sans); }

/* ---------- the test card: "Your full card" ---------- */
.tp-full { display: grid; gap: 10px; }
.tp-full-lead { font: 400 17.5px/1.45 var(--sans); }
.tp-full-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.tp-full-list li { display: grid; grid-template-columns: 142px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 12px 9px; background: var(--card); border: 1.8px solid var(--ink); border-radius: 2px 8px 3px 7px; }
.tp-full-list li[data-state="empty"] { background: rgba(255, 253, 248, .6); border: 1.8px dashed rgba(43, 34, 48, .5); }
.tp-full-k { white-space: nowrap; font: 700 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.tp-full-v { font: 600 17.5px/1.35 var(--sans); }
.tp-full-v a { display: inline-flex; align-items: center; min-height: 44px; }
.tp-full-shape { padding: 12px 14px 10px; background: rgba(246, 220, 226, .55); border-left: 4px solid var(--berry); border-radius: 2px; }
.tp-full-shape p { font: 400 17px/1.45 var(--sans); }
.tp-full-shape p + p { margin-top: 6px; }
.tp-full-go { margin-top: 2px; }
.tp-full-go a { display: inline-flex; align-items: center; min-height: 44px; font: 700 17px/1.2 var(--sans); }

@media (prefers-reduced-motion: reduce) { .crow-sum::after, .cline-why > summary::after { transition: none; } }
@media (forced-colors: active) {
  .sm-paper, .crow, .sysmap--strip, .card-beta { border-image: none; border: 2px solid CanvasText; }
  .sm-wash { display: none; }
}
@media print { .sm-wash, .sm-tape { display: none; } .sm-paper, .crow { transform: none; } }