/* L’Anatomie du Parfum — components. Ruled 2026-09-28: CP-1…9 in two rounds, with round 2's six notes (docs/arcs/brand/DECISIONS.md).
   The signs (Icons, two rounds, ruled 2026-09-28) are in signs.svg beside this file; the page carries the same symbols.
   Written by scripts/brand/make_design_system.py: edit that file, not this one. Load assets/brand/tokens/tokens.css first.
   Every colour, typeface, size, space and frame is a token (--adp-*); tests/test_design_system.py fails when one isn't.
   The drawn reference, every part in every state: design-system.html, beside this file. */

/* ============================================================ the ground every part stands on */
.adp-page{container-type:inline-size;background:var(--adp-paper);color:var(--adp-ink);font:400 var(--adp-size-reading)/var(--adp-line-reading) var(--adp-font-reading);text-align:left}
.adp-page *,.adp-page *::before,.adp-page *::after{box-sizing:border-box}
:where(.adp-page) :where(p,h1,h2,h3,figure,dl,dd,ul,ol){margin:0}
:where(.adp-page) :where(ul,ol){padding:0;list-style:none}
:where(.adp-page) :where(h1,h2,h3){font:inherit}
:where(.adp-page) :where(b,strong){font-weight:600}
.adp-app{display:flex;flex-direction:column;flex:1 0 auto}
.adp-app-main{flex:1 0 auto}
.adp-body{padding:var(--adp-space-5)}
@container (max-width:560px){.adp-body{padding:var(--adp-space-4)}}
.adp-label{color:var(--adp-ink-quiet);font:500 var(--adp-size-label)/1.35 var(--adp-font-controls);letter-spacing:.12em;text-transform:uppercase}
.adp-text{max-width:var(--adp-measure-reading);font:400 var(--adp-size-reading)/var(--adp-line-reading) var(--adp-font-reading)}
@container (min-width:900px){.adp-text{font-size:var(--adp-size-reading-wide)}}
.adp-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============================================================ links, signs and marks */
.adp-link{color:var(--adp-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.adp-link:hover,.adp-link.is-hover{text-decoration-thickness:2px}
.adp-link:focus-visible,.adp-link.is-focus{outline:2px solid var(--adp-accent);outline-offset:3px}
.adp-arrow{display:inline-block;width:.85em;height:.85em;margin-left:.3em;vertical-align:-.06em;fill:none;stroke:currentColor;stroke-width:1.7}
.adp-icon{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.adp-mark{position:relative;top:.12em;display:inline-block;flex:none;width:14px;height:14px}
.adp-mark-notyet rect{fill:none;stroke:currentColor;stroke-width:1.3;stroke-dasharray:2.4 1.8}
.adp-mark-problem rect{fill:var(--adp-ink)}
.adp-mark-problem path{fill:none;stroke:var(--adp-paper);stroke-width:1.9}
.adp-mark-done path{fill:none;stroke:currentColor;stroke-width:1.9}

/* ============================================================ drawings: frameless on the paper by day, on a paper card at night (FD-1, FD-5) */
/* the card decides a drawing's size, never the picture: the picture fills its card, and the card's night margin (padding).
   Drawings can't be dragged out, selected, or saved with a long press on a phone (the site also blocks the right-click menu on them). */
.adp-art{position:relative;display:block;background:var(--adp-drawing-card)}
.adp-art img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;padding:inherit;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* a small picture inside something you press is cut out of its ground and has no card by day, so the chip or row shows
   through at rest, under the pointer and while its card is open: no paper box (Josue's note, 2026-09-28) */
.adp-chip-pic,.adp-row-pic{background:transparent}
.adp-fade img{-webkit-mask-image:linear-gradient(to right,transparent,var(--adp-ink) 4%,var(--adp-ink) 96%,transparent),linear-gradient(to bottom,transparent,var(--adp-ink) 3%,var(--adp-ink) 97%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,var(--adp-ink) 4%,var(--adp-ink) 96%,transparent),linear-gradient(to bottom,transparent,var(--adp-ink) 3%,var(--adp-ink) 97%,transparent);mask-composite:intersect}

/* ============================================================ CP-1 · the header: the running head, its tabs cut into the page */
.adp-head{display:flex;align-items:flex-end;gap:var(--adp-space-5);padding:var(--adp-space-3) var(--adp-space-5) 0;border-bottom:var(--adp-outline)}
.adp-head-name{position:relative;display:flex;align-items:center;align-self:center;min-height:var(--adp-touch);color:var(--adp-ink);text-decoration:none}
.adp-head-name:focus-visible,.adp-head-name.is-focus{outline:2px solid var(--adp-accent);outline-offset:4px}
.adp-wordmark{display:block;flex:none;width:auto;height:13px}
.adp-wordmark-small{display:none;flex:none;width:auto;height:11px}
.adp-tabs{display:flex;align-items:flex-end;margin-bottom:-1px}
.adp-tabs a{position:relative;display:grid;place-items:center;min-height:var(--adp-touch);padding:0 var(--adp-space-4);margin-right:-1px;background:var(--adp-well);border:var(--adp-outline);color:var(--adp-ink-quiet);font:500 var(--adp-size-control)/1 var(--adp-font-controls);text-decoration:none;white-space:nowrap}
.adp-tabs a:hover,.adp-tabs a.is-hover{color:var(--adp-ink)}
.adp-tabs a[aria-current="page"]{z-index:1;background:var(--adp-paper);border-bottom-color:var(--adp-paper);color:var(--adp-accent)}
.adp-tabs a:focus-visible,.adp-tabs a.is-focus{z-index:2;outline:2px solid var(--adp-accent);outline-offset:2px}
/* the search box stands on the header's line beside the tabs, their height exactly (Josue, 2026-09-29) */
.adp-head .adp-search{flex:0 1 380px;align-self:flex-end;margin-bottom:-1px;margin-left:auto}
/* below 1040 pixels the "/" key's hint gives its room to the search hint's words */
@container (max-width:1040px){.adp-head .adp-key{display:none}}
@container (max-width:760px){
  .adp-tabs{display:none}
  .adp-head{align-items:center;padding-bottom:var(--adp-space-3);border-bottom:var(--adp-rule)}
  .adp-head .adp-search{flex:1;align-self:center;margin-bottom:0}
}
/* on a phone the name sits centred above the search box (round 2, note 1) */
@container (max-width:520px){
  .adp-head{flex-direction:column;align-items:stretch;gap:var(--adp-space-1);padding:0 var(--adp-space-3) var(--adp-space-3)}
  .adp-head-name{align-self:center}
  .adp-head .adp-search{flex:none;align-self:stretch;margin-left:0}
  .adp-head .adp-wordmark{display:none}
  .adp-head .adp-wordmark-small{display:block}
}
/* the phone's tab bar: the thumb index's tabs hanging from the page, kept above the phone's own
   bottom controls (the home indicator, Android's navigation bar or gesture handle) by the
   system's safe area (round 2, note 1; the page needs viewport-fit=cover) */
.adp-tabbar{position:sticky;bottom:0;z-index:2;display:none;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;padding:0 var(--adp-space-2) env(safe-area-inset-bottom,0px);background:var(--adp-paper);border-top:var(--adp-outline)}
@container (max-width:760px){.adp-tabbar{display:grid}}
.adp-tabbar a{position:relative;display:grid;place-items:center;min-width:0;min-height:var(--adp-touch);padding:0 var(--adp-space-1);margin:-1px -1px 0 0;background:var(--adp-well);border:var(--adp-outline);color:var(--adp-ink-quiet);font:500 var(--adp-size-label)/1.2 var(--adp-font-controls);text-align:center;text-decoration:none}
.adp-tabbar a:hover,.adp-tabbar a.is-hover{color:var(--adp-ink)}
.adp-tabbar a[aria-current="page"]{z-index:1;background:var(--adp-paper);border-top-color:var(--adp-paper);color:var(--adp-accent)}
.adp-tabbar a:focus-visible,.adp-tabbar a.is-focus{z-index:2;outline:2px solid var(--adp-accent);outline-offset:-3px}

/* ============================================================ CP-2 · search: the index, with pictures */
.adp-search{position:relative;display:flex;align-items:center;gap:var(--adp-space-2);min-width:0;min-height:var(--adp-touch);padding:0 var(--adp-space-3);background:var(--adp-field);border:var(--adp-outline);color:var(--adp-ink-quiet);cursor:text}
.adp-search:focus-within,.adp-search.is-focus{outline:2px solid var(--adp-accent);outline-offset:2px}
.adp-search input{flex:1;align-self:stretch;min-width:0;height:auto;margin:0;padding:0;background:transparent;border:0;border-radius:0;color:var(--adp-ink);font:500 var(--adp-size-control)/1.2 var(--adp-font-controls);text-overflow:ellipsis;outline:0;-webkit-appearance:none;appearance:none}
.adp-search input::placeholder{color:var(--adp-ink-quiet);font-weight:400;opacity:1}
.adp-search input::-webkit-search-cancel-button,.adp-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.adp-key{padding:0 var(--adp-space-1);border:var(--adp-rule);color:var(--adp-ink-quiet);font:500 var(--adp-size-label)/1.5 var(--adp-font-controls)}
@container (max-width:520px){.adp-key{display:none}}
.adp-search-panel{display:grid;align-content:start}
.adp-suggest{padding:var(--adp-space-1) 0 var(--adp-space-2);background:var(--adp-paper);border:var(--adp-outline);border-top:0}
.adp-listbox{display:block}
.adp-suggest-group{padding:var(--adp-space-4) var(--adp-space-3) var(--adp-space-2)}
.adp-listbox>:first-child>.adp-suggest-group{padding-top:var(--adp-space-3)}
/* a row: its picture, then the name and the house as one unit; rows apart, a hairline between (round 2, note 2) */
.adp-row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:var(--adp-space-3);min-height:var(--adp-touch);padding:var(--adp-space-2) var(--adp-space-3);color:var(--adp-ink);text-decoration:none;cursor:pointer}
.adp-row+.adp-row{border-top:var(--adp-rule)}
.adp-row:hover,.adp-row.is-hover{background:var(--adp-well)}
.adp-row[aria-selected="true"],.adp-row:focus-visible,.adp-row.is-focus{outline:2px solid var(--adp-accent);outline-offset:-2px}
.adp-row-pic{display:block;width:32px;height:40px}
.adp-row-text{display:grid;gap:0;min-width:0}
.adp-row-name{overflow:hidden;font:400 var(--adp-size-reading)/1.2 var(--adp-font-reading);white-space:nowrap;text-overflow:ellipsis}
.adp-row-name b{font-weight:700}
.adp-row-fact{color:var(--adp-ink-quiet);font:400 var(--adp-size-control)/1.3 var(--adp-font-controls)}
.adp-row-fact b{color:var(--adp-ink);font-weight:600}
.adp-row.is-loading{cursor:progress}
.adp-row.is-loading .adp-row-pic{background:var(--adp-well)}
.adp-row.is-loading .adp-row-text{gap:var(--adp-space-2)}
.adp-skel{display:block;height:10px;background:var(--adp-well)}
.adp-skel+.adp-skel{width:60%}
.adp-suggest-more{display:flex;align-items:center;min-height:var(--adp-touch);margin-top:var(--adp-space-1);padding:0 var(--adp-space-3);border-top:var(--adp-rule);font:500 var(--adp-size-control)/1 var(--adp-font-controls)}
.adp-suggest .adp-problem{padding:var(--adp-space-3)}
/* the catalogue card: when nothing is found, and after you ask */
.adp-cards{display:grid;gap:var(--adp-space-2);padding-top:var(--adp-space-2)}
.adp-card{display:grid;align-content:start;gap:var(--adp-space-1);min-height:var(--adp-touch);padding:var(--adp-space-3);background:var(--adp-paper);border:var(--adp-outline);color:var(--adp-ink);text-decoration:none}
a.adp-card:hover,.adp-card.is-hover{background:var(--adp-well)}
a.adp-card:focus-visible,.adp-card.is-focus{outline:2px solid var(--adp-accent);outline-offset:2px}
.adp-card.is-none{border:1px dashed var(--adp-ink-quiet)}
.adp-card-name{font:400 var(--adp-size-heading)/1.15 var(--adp-font-display)}
.adp-card-fact{color:var(--adp-ink-quiet);font:400 var(--adp-size-control)/1.35 var(--adp-font-controls)}
.adp-card-fact .adp-link{font-weight:500}
.adp-ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--adp-space-2) var(--adp-space-3);padding-top:var(--adp-space-2)}
.adp-ask-note{color:var(--adp-ink-quiet);font:400 var(--adp-size-small)/1.4 var(--adp-font-reading)}
.adp-done{display:inline-flex;align-items:center;gap:var(--adp-space-2);min-height:var(--adp-touch);color:var(--adp-ink);font:500 var(--adp-size-control)/1.15 var(--adp-font-controls)}

/* ============================================================ CP-3 · the top of a fragrance page: the band */
.adp-band{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--adp-space-6);padding:var(--adp-space-6) var(--adp-space-6) var(--adp-space-5)}
.adp-band.no-bottle{grid-template-columns:minmax(0,1fr)}
.adp-band-card{display:flex;flex-direction:column;min-width:0}
.adp-band-card>.adp-label{margin-bottom:var(--adp-space-2)}
.adp-band-name{margin-bottom:var(--adp-space-4);font:400 var(--adp-size-display-1)/var(--adp-line-display) var(--adp-font-display);text-wrap:balance}
/* the version tabs (PT-1, 2026-09-29): each as wide as its words, never narrower than the shared minimum, on a line that runs on
   to the edge; a row longer than the screen slides sideways on the same line */
.adp-versions{display:flex;align-items:flex-end;margin:0 0 var(--adp-space-5);border-bottom:var(--adp-outline);overflow-x:auto;scrollbar-width:none}
.adp-versions::-webkit-scrollbar{display:none}
.adp-versions a{position:relative;display:grid;flex:0 0 auto;align-content:center;min-width:calc(var(--adp-space-8) + var(--adp-space-7));min-height:calc(var(--adp-touch) + var(--adp-space-3));padding:var(--adp-space-2) var(--adp-space-4) var(--adp-space-2) var(--adp-space-3);margin-left:-1px;border:var(--adp-outline);border-bottom:0;color:var(--adp-ink);font:500 var(--adp-size-control)/1.2 var(--adp-font-controls);white-space:nowrap;text-decoration:none}
.adp-versions a:first-child{margin-left:0}
.adp-versions b{font-weight:500}
.adp-versions small{color:var(--adp-ink-quiet);font:400 var(--adp-size-label)/1.3 var(--adp-font-controls)}
.adp-versions a:hover,.adp-versions a.is-hover{background:var(--adp-well)}
.adp-versions a[aria-current="page"]{background:var(--adp-well);color:var(--adp-accent)}
.adp-versions a[aria-current="page"]::after{position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--adp-accent);content:""}
.adp-versions a:focus-visible,.adp-versions a.is-focus{z-index:1;outline:2px solid var(--adp-accent);outline-offset:-2px}
.adp-version-one{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--adp-space-1) var(--adp-space-3);margin-bottom:var(--adp-space-4);padding:var(--adp-space-2) 0;border-top:var(--adp-rule);border-bottom:var(--adp-rule);font:500 var(--adp-size-control)/1.3 var(--adp-font-controls)}
.adp-band-wear{font:400 var(--adp-size-reading-wide)/1.45 var(--adp-font-reading)}
.adp-band-also{margin-top:var(--adp-space-2);color:var(--adp-ink-quiet);font:400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
/* the bottle is no taller than the card beside it (CP-3): the card sets the row, the bottle fills its third */
.adp-band-bottle{position:relative;min-height:200px}
.adp-band-bottle .adp-art{position:absolute;top:0;right:0;bottom:0;left:0}
.adp-band-bottle img{object-position:center bottom}
.adp-scent{padding:0 var(--adp-space-6) var(--adp-space-6)}
.adp-scent-in{padding-top:var(--adp-space-5);border-top:var(--adp-rule)}
.adp-scent-heads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:var(--adp-space-1);padding:0 2.2%}
.adp-scent-heads p{font:400 var(--adp-size-reading)/1.2 var(--adp-font-display);text-align:center}
.adp-scent-heads small{display:block;color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.3 var(--adp-font-reading)}
.adp-scent-pic{aspect-ratio:1400/669}
@container (max-width:620px){
  .adp-band{grid-template-columns:minmax(0,1fr);gap:var(--adp-space-4);padding:var(--adp-space-4)}
  .adp-band-bottle{order:-1;height:180px;min-height:0}
  .adp-band-bottle .adp-art{right:auto;left:calc(50% - 60px);width:120px}
  .adp-band-name{font:400 var(--adp-size-display-2)/var(--adp-line-display) var(--adp-font-display)}
  .adp-band-wear{font-size:var(--adp-size-reading)}
  .adp-scent{padding:0 var(--adp-space-4) var(--adp-space-4)}
  .adp-scent-heads p{font:400 var(--adp-size-small)/1.2 var(--adp-font-display)}
  .adp-scent-heads small{font:italic 400 var(--adp-size-label)/1.3 var(--adp-font-reading)}
}

/* ============================================================ CP-4 · the label list: chips in family rows, a small picture at the start */
.adp-list-sum{color:var(--adp-ink-quiet);font:400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.adp-list-sum+.adp-toggle{margin-top:var(--adp-space-4)}
.adp-list-sum+.adp-chips,.adp-chips+.adp-list-sum{margin-top:var(--adp-space-2)}
.adp-toggle+.adp-list-view{margin-top:var(--adp-space-3)}
/* the toggle: joined boxes, the pressed one sunk into the page with a red rule under it; it carries no outer margin */
.adp-toggle{display:flex;flex-wrap:wrap;padding:1px 0 0 1px}
.adp-toggle button{position:relative;min-height:var(--adp-touch);padding:0 var(--adp-space-4);margin:-1px 0 0 -1px;background:transparent;border:var(--adp-outline);border-radius:0;color:var(--adp-ink-quiet);font:500 var(--adp-size-control)/1 var(--adp-font-controls);cursor:pointer}
.adp-toggle button:hover{color:var(--adp-ink)}
.adp-toggle button[aria-pressed="true"]{background:var(--adp-well);border-bottom:2px solid var(--adp-accent);color:var(--adp-accent)}
.adp-toggle button:focus-visible{z-index:1;outline:2px solid var(--adp-accent);outline-offset:2px}
.adp-list-view[hidden]{display:none}
.adp-fam{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--adp-space-3);padding:var(--adp-space-3) 0;border-top:var(--adp-rule)}
.adp-fam-name{padding-top:var(--adp-space-2);font:400 var(--adp-size-reading)/1.3 var(--adp-font-display)}
.adp-fam-name small{margin-left:var(--adp-space-2);color:var(--adp-ink-quiet);font:400 var(--adp-size-label)/1 var(--adp-font-controls)}
.adp-chips{display:flex;flex-wrap:wrap;gap:var(--adp-space-2)}
/* 36 pixels to the eye, pressable over 44 (FD-4): the hit area reaches a step above and below */
.adp-chip{position:relative;display:inline-flex;align-items:center;gap:var(--adp-space-2);min-height:36px;padding:0 var(--adp-space-3);background:transparent;border:var(--adp-outline);color:var(--adp-ink);font:400 var(--adp-size-control)/1.15 var(--adp-font-controls);text-decoration:none;white-space:nowrap}
.adp-chip::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--adp-space-1));bottom:calc(-1 * var(--adp-space-1))}
.adp-chip.has-pic{padding-left:var(--adp-space-1)}
.adp-chip-pic{flex:none;width:24px;height:24px}
.adp-chip:hover,.adp-chip.is-hover,.adp-chip[aria-expanded="true"]{background:var(--adp-well);border-color:var(--adp-ink)}
.adp-chip:focus-visible,.adp-chip.is-focus{outline:2px solid var(--adp-accent);outline-offset:2px}
/* on the label, but not in Ingredients yet: no page to open, so no outline to press (the dashed "not yet") */
.adp-chip.is-absent{border:1px dashed var(--adp-ink-quiet);color:var(--adp-ink-quiet);cursor:default}
.adp-chip.is-absent::before{content:none}
.adp-list-brand{display:grid;gap:var(--adp-space-2);margin-top:var(--adp-space-4);padding-top:var(--adp-space-3);border-top:var(--adp-rule)}
@container (max-width:560px){.adp-fam{grid-template-columns:minmax(0,1fr);gap:var(--adp-space-2)}}

/* ============================================================ CP-5 · the ink card: the piece at the card's full height */
/* the card lays itself out by its own width, wherever it is placed: it is its own container */
.adp-ink{container-type:inline-size;width:min(460px,100%);padding:var(--adp-space-2);background:var(--adp-paper);color:var(--adp-ink)}
.adp-ink-in{display:grid;grid-template-columns:132px minmax(0,1fr)}
.adp-ink.no-art .adp-ink-in{grid-template-columns:minmax(0,1fr)}
.adp-ink-art{min-height:180px}
.adp-ink-art img{top:6%;left:6%;width:88%;height:88%}
.adp-ink-body{display:flex;flex-direction:column;justify-content:space-between;gap:var(--adp-space-3);padding:var(--adp-space-2) var(--adp-space-3) var(--adp-space-2) var(--adp-space-4)}
.adp-ink.no-art .adp-ink-body{padding:var(--adp-space-2)}
.adp-ink-top,.adp-ink-foot{min-width:0}
.adp-ink-name{color:var(--adp-ink-quiet);font:500 var(--adp-size-label)/1.3 var(--adp-font-controls);letter-spacing:.12em;text-transform:uppercase}
.adp-ink-smell{margin-top:var(--adp-space-1);font:400 var(--adp-size-heading)/1.25 var(--adp-font-display)}
.adp-ink-word{margin-top:var(--adp-space-2);font:400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.adp-ink-what{padding-top:var(--adp-space-2);border-top:var(--adp-rule);color:var(--adp-ink-quiet);font:400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.adp-ink-open{margin-top:var(--adp-space-3);font:500 var(--adp-size-control)/1.2 var(--adp-font-controls)}
@container (max-width:400px){.adp-ink-in{grid-template-columns:96px minmax(0,1fr)}}
/* very narrow (a phone with its text at twice the size): the piece rises above the words, which keep the width */
@container (max-width:300px){.adp-ink-in{grid-template-columns:minmax(0,1fr)} .adp-ink-art{min-height:96px}}
.adp-float{position:absolute;z-index:3;width:min(460px,calc(100% - 2 * var(--adp-space-5)))}
.adp-float .adp-ink{width:100%}
.adp-float[hidden],.adp-sheet[hidden]{display:none}
/* on a phone there is no pointing: the card rises from the bottom edge as a sheet with a close button */
.adp-sheet{position:absolute;right:0;bottom:0;left:0;z-index:4;max-height:85%;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--adp-paper);border-top:var(--adp-double-rule);color:var(--adp-ink);transform:translateY(0);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.adp-sheet.is-off{transform:translateY(100%)}
.adp-sheet-bar{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--adp-touch)}
.adp-sheet-grip{display:block;width:36px;height:4px;background:var(--adp-ink-quiet)}
.adp-sheet-close{position:absolute;top:0;right:var(--adp-space-1);display:grid;place-items:center;width:var(--adp-touch);height:var(--adp-touch);padding:0;background:transparent;border:0;border-radius:0;color:var(--adp-ink);cursor:pointer}
.adp-sheet-close:focus-visible{outline:2px solid var(--adp-accent);outline-offset:-4px}
.adp-sheet-body{padding:0 var(--adp-space-2) var(--adp-space-6)}
.adp-sheet-body .adp-ink{width:100%;background:transparent}
@media (prefers-reduced-motion: reduce){.adp-sheet{transition:none}}

/* ============================================================ CP-6 · the ingredient page: the open book, its facts ruled */
.adp-book{display:grid;grid-template-columns:minmax(0,1fr) 7px minmax(0,1fr)}
.adp-book-verso{display:flex;flex-direction:column;padding:var(--adp-space-7) var(--adp-space-6) var(--adp-space-6)}
.adp-book-gutter{border-right:var(--adp-rule);border-left:var(--adp-rule)}
.adp-book-recto{max-width:calc(var(--adp-measure-reading) + 2 * var(--adp-space-6));padding:var(--adp-space-7) var(--adp-space-6) var(--adp-space-6)}
.adp-book-name{margin:var(--adp-space-2) 0 var(--adp-space-4);font:400 var(--adp-size-display-1)/var(--adp-line-display) var(--adp-font-display)}
.adp-book-smell{font:400 var(--adp-size-display-3)/1.25 var(--adp-font-display)}
.adp-book-word{margin-top:var(--adp-space-3);font:400 var(--adp-size-reading-wide)/1.5 var(--adp-font-reading)}
.adp-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 var(--adp-space-5);margin-top:var(--adp-space-6);border-top:var(--adp-rule)}
.adp-facts dt,.adp-facts dd{padding:var(--adp-space-3) 0;border-bottom:var(--adp-rule)}
/* each fact named in full ink at a legible size (round 2, note 5), not in quiet 11-pixel capitals */
.adp-facts dt{color:var(--adp-ink);font:500 var(--adp-size-control)/1.8 var(--adp-font-controls)}
.adp-facts dd{font:400 var(--adp-size-reading)/1.5 var(--adp-font-reading)}
.adp-found{margin-top:var(--adp-space-6)}
.adp-found>.adp-label{display:block;margin-bottom:var(--adp-space-2)}
.adp-found-rows{border-top:var(--adp-rule);border-bottom:var(--adp-rule)}
.adp-found-rows .adp-row{padding-right:0;padding-left:0}
.adp-found>.adp-link{display:inline-flex;align-items:center;min-height:var(--adp-touch);font:500 var(--adp-size-control)/1 var(--adp-font-controls)}
/* the plate: its proportions keep their place whether it is drawn, not drawn yet or didn't load (round 2, note 6) */
.adp-plate-fig{display:flex;flex-direction:column;align-items:center;width:100%}
.adp-plate{display:block;width:100%;aspect-ratio:660/880}
.adp-plate-cap{margin-top:var(--adp-space-2);font:400 var(--adp-size-small)/1.3 var(--adp-font-display);text-align:center}
.adp-plate-cap small{display:block;margin-top:var(--adp-space-1);color:var(--adp-ink-quiet);font:400 var(--adp-size-label)/1.4 var(--adp-font-controls)}
.adp-plate-cap i{font-style:italic}
.adp-noplate{display:grid;place-items:center;width:100%;aspect-ratio:660/880;padding:var(--adp-space-5);border:1px dashed var(--adp-ink-quiet)}
.adp-plate-missing{display:grid;place-items:center;align-content:center;gap:var(--adp-space-3);width:100%;aspect-ratio:660/880;padding:var(--adp-space-4);background:var(--adp-well);border:var(--adp-rule);text-align:center}
@container (max-width:680px){
  .adp-book{grid-template-columns:minmax(0,1fr)}
  .adp-book-gutter{display:none}
  .adp-book-verso{padding:var(--adp-space-5) var(--adp-space-4) var(--adp-space-4);border-bottom:var(--adp-rule)}
  .adp-book-verso .adp-plate-fig{width:min(300px,100%);margin:0 auto}
  .adp-book-recto{padding:var(--adp-space-5) var(--adp-space-4)}
  .adp-book-name{font:400 var(--adp-size-display-2)/var(--adp-line-display) var(--adp-font-display)}
  .adp-book-smell{font:400 var(--adp-size-heading)/1.3 var(--adp-font-display)}
  .adp-facts{grid-template-columns:minmax(0,1fr)}
  .adp-facts dt{padding-bottom:0;border-bottom:0}
}

/* ============================================================ CP-7 · buttons: plain print; red only while it can be pressed */
.adp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--adp-space-2);min-height:var(--adp-touch);padding:0 var(--adp-space-5);background:var(--adp-accent);border:1px solid var(--adp-accent);border-radius:var(--adp-radius);color:var(--adp-on-accent);font:500 var(--adp-size-control)/1.15 var(--adp-font-controls);text-decoration:none;white-space:nowrap;cursor:pointer}
.adp-btn:hover,.adp-btn.is-hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.adp-btn:focus-visible,.adp-btn.is-focus{outline:2px solid var(--adp-accent);outline-offset:2px}
.adp-btn-second{background:transparent;border:var(--adp-outline);color:var(--adp-ink)}
.adp-btn:disabled,.adp-btn[aria-disabled="true"]{background:var(--adp-well);border-color:var(--adp-well);color:var(--adp-ink-quiet);text-decoration:none;cursor:not-allowed}
.adp-btn[aria-busy="true"]{background:transparent;border:var(--adp-outline);color:var(--adp-ink-quiet);cursor:progress}

/* ============================================================ CP-8 · section headings: the source first */
.adp-section{padding-top:var(--adp-space-6)}
.adp-section:first-child{padding-top:0}
.adp-heading{margin-top:var(--adp-space-1);font:400 var(--adp-size-display-3)/1.15 var(--adp-font-display);text-wrap:balance}
.adp-section-body{margin-top:var(--adp-space-3)}

/* ============================================================ CP-9 · gaps and errors: the quiet line, the three marks */
.adp-quiet{display:flex;align-items:baseline;gap:var(--adp-space-2);color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.adp-problem{display:grid;align-content:start;justify-items:start;gap:var(--adp-space-2)}
.adp-problem-line{display:flex;align-items:baseline;gap:var(--adp-space-2);color:var(--adp-ink);font:400 var(--adp-size-reading)/1.4 var(--adp-font-reading)}
.adp-problem-note{color:var(--adp-ink-quiet);font:400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.adp-problem .adp-search{justify-self:stretch}

/* ============================================================ signs: small drawings beside words, one job each (Icons, two rounds, ruled 2026-09-28)
   Drawn once in scripts/brand/icon_set.py as 1.5-pixel lines (IC-10); the symbols are in signs.svg, #adp-sign-NAME. */
.adp-sign{display:inline-block;flex:none;vertical-align:-.2em;color:inherit}
.adp-sign-lead{margin-right:var(--adp-space-2)}
.adp-said{display:inline-flex;align-items:baseline;gap:var(--adp-space-2)}
.adp-said>.adp-sign{position:relative;top:.2em}
/* the label list (IC-1): the families summed up in one line; each stage's time on its own line; grouped by when you
   smell it, a family's sign in the picture's place of a chip not drawn yet */
.adp-list-fams{display:flex;flex-wrap:wrap;align-items:center;gap:var(--adp-space-2) var(--adp-space-4);margin-top:var(--adp-space-3);color:var(--adp-ink);font:400 var(--adp-size-control)/1.35 var(--adp-font-controls)}
.adp-list-fams>span{display:inline-flex;align-items:center;gap:var(--adp-space-1)}
.adp-list-fams b{font-weight:600}
.adp-list-fams+.adp-toggle{margin-top:var(--adp-space-4)}
.adp-fam-head{min-width:0}
.adp-fam-when{margin-top:var(--adp-space-1);color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.3 var(--adp-font-reading)}
.adp-chip-sign{display:grid;place-items:center;flex:none;width:24px;height:24px;color:var(--adp-ink-quiet)}
/* the scent picture's three stages (IC-2): the sun rising, the sun high, the moon */
.adp-scent-sign{display:block;margin:0 auto var(--adp-space-1)}
/* sources, one sign each, in the order of their words (IC-5) */
.adp-srcs{display:inline-flex;flex-wrap:wrap;align-items:center}
.adp-srcs>span{display:inline-flex;align-items:center}
.adp-src-sep{margin:0 var(--adp-space-2)}
/* buttons with only a sign (IC-7): 44 pixels square, named when pointed at and for screen readers */
.adp-band-top{display:flex;align-items:center;justify-content:space-between;gap:var(--adp-space-3);margin-bottom:var(--adp-space-2)}
.adp-actions{display:flex;flex:none;gap:var(--adp-space-2)}
.adp-iconbtn{position:relative;display:grid;place-items:center;width:var(--adp-touch);height:var(--adp-touch);padding:0;background:transparent;border:var(--adp-outline);border-radius:var(--adp-radius);color:var(--adp-ink);cursor:pointer}
.adp-iconbtn:hover,.adp-iconbtn.is-hover{background:var(--adp-well);border-color:var(--adp-ink)}
.adp-iconbtn:focus-visible,.adp-iconbtn.is-focus{outline:2px solid var(--adp-accent);outline-offset:2px}
.adp-tip{position:absolute;top:100%;right:0;z-index:3;display:none;align-items:center;gap:var(--adp-space-1);margin-top:var(--adp-space-2);padding:var(--adp-space-1) var(--adp-space-2);background:var(--adp-ink);color:var(--adp-paper);font:500 var(--adp-size-label)/1.3 var(--adp-font-controls);white-space:nowrap;pointer-events:none}
.adp-iconbtn:hover .adp-tip,.adp-iconbtn:focus-visible .adp-tip,.adp-iconbtn.is-hover .adp-tip,.adp-iconbtn.is-focus .adp-tip,.adp-tip.is-shown{display:inline-flex}
.adp-tip .adp-mark{top:0}
/* the printer's hand, only before "Ask for it" (IC-13) */
.adp-hand{display:inline-flex;align-items:center;color:var(--adp-ink)}
/* how it wears (IC-6): the house's claimed hours on a ruler of the day; how far it carries in three steps, all shown,
   the perfume's own underlined in ink, the other two in faint ink, the same weight */
.adp-ruler{display:grid;gap:var(--adp-space-1);max-width:300px;margin-top:var(--adp-space-3)}
.adp-ruler-bar{position:relative;display:block;height:8px;border-top:var(--adp-rule);border-bottom:var(--adp-rule)}
.adp-ruler-tick{position:absolute;top:100%;width:1px;height:4px;transform:translateX(-50%);background:var(--adp-hairline)}
.adp-ruler-fill{position:absolute;top:0;bottom:0;background:var(--adp-ink)}
.adp-ruler-marks{display:flex;justify-content:space-between;color:var(--adp-ink-quiet);font:400 var(--adp-size-label)/1.3 var(--adp-font-controls)}
.adp-perfumer{color:var(--adp-ink-quiet);font:italic 400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.adp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--adp-space-3);margin:var(--adp-space-3) 0}
.adp-step{display:grid;justify-items:start;align-content:start;gap:var(--adp-space-1);padding-bottom:var(--adp-space-2);border-bottom:2px solid transparent;color:var(--adp-ink-faint);font:400 var(--adp-size-control)/1.3 var(--adp-font-controls)}
.adp-step.is-this{border-bottom-color:var(--adp-ink);color:var(--adp-ink)}
@container (max-width:400px){.adp-steps{grid-template-columns:minmax(0,1fr)}
  .adp-step{grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:var(--adp-space-2)}}

/* At night every drawing sits on its paper card (FD-5): the large ones with a margin of paper, the small ones in chips and rows flush.
   Only a place that holds a drawing (.adp-art) gets the card: a row with nothing drawn keeps its place empty, by day and at night (CP-2). */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .adp-art:not(.adp-chip-pic):not(.adp-row-pic){padding:var(--adp-space-2)}
  :root:not([data-theme="light"]) .adp-art.adp-chip-pic,:root:not([data-theme="light"]) .adp-art.adp-row-pic{background:var(--adp-drawing-card)}}
:root[data-theme="dark"] .adp-art:not(.adp-chip-pic):not(.adp-row-pic){padding:var(--adp-space-2)}
:root[data-theme="dark"] .adp-art.adp-chip-pic,:root[data-theme="dark"] .adp-art.adp-row-pic{background:var(--adp-drawing-card)}
/* the other light: begin (written from tokens.json; the ink card is night by day and day at night, CP-5) */
.adp-inv{--adp-paper:#1E1A15;--adp-well:#28231C;--adp-field:#302A22;--adp-ink:#EFE4CC;--adp-ink-quiet:#BFB39A;--adp-ink-faint:#8C8270;--adp-hairline:#4A4135;--adp-edge:#8C7D63;--adp-accent:#E0937F;--adp-on-accent:#1E1A15;--adp-drawing-card:#F7E8CD;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .adp-inv{--adp-paper:#F7E8CD;--adp-well:#EFDFC0;--adp-field:#FEEFD4;--adp-ink:#2B2418;--adp-ink-quiet:#5F533D;--adp-ink-faint:#766649;--adp-hairline:#C9B48F;--adp-edge:#8F7B59;--adp-accent:#8C2B1C;--adp-on-accent:#F7E8CD;--adp-drawing-card:#F7E8CD;}}
:root[data-theme="dark"] .adp-inv{--adp-paper:#F7E8CD;--adp-well:#EFDFC0;--adp-field:#FEEFD4;--adp-ink:#2B2418;--adp-ink-quiet:#5F533D;--adp-ink-faint:#766649;--adp-hairline:#C9B48F;--adp-edge:#8F7B59;--adp-accent:#8C2B1C;--adp-on-accent:#F7E8CD;--adp-drawing-card:#F7E8CD;}
/* the other light: end */