/* WEAVRA app. One idea per screen, a lot of air. Square corners, Helvetica Neue, black/white, one acid green touch. Tokens live in tokens.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;border-radius:0}
[hidden]{display:none !important}
svg{display:block}

/* type */
.label{font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);line-height:1.4}
.label.ink{color:var(--ink)}
.h1{font-size:var(--h1);line-height:.96;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase;margin-top:10px}
.h2{font-size:24px;line-height:1.05;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase;overflow-wrap:anywhere}
.giant{font-size:var(--giant);line-height:.92;font-weight:700;letter-spacing:-.03em;text-transform:uppercase;margin-top:14px}
.lead{font-size:17px;line-height:1.4;margin-top:14px;max-width:30ch;overflow-wrap:anywhere}
.sub{font-size:13px;color:var(--mute);overflow-wrap:anywhere;line-height:1.5}
.mute{color:var(--mute)}
.small{font-size:12px}
.help{font-size:13px;color:var(--mute);line-height:1.5}

/* layout */
.wrap{padding-inline:var(--gutter);max-width:var(--maxw);margin-inline:auto;width:100%}
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.wm{display:inline-flex;align-items:center;color:var(--ink);height:12px;text-decoration:none;flex:none}
.wm svg{height:100%;width:auto}
.top-r{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--ink);background:transparent;flex:none}
.icon-btn:hover{border-color:var(--acc)}
.icon-btn svg{width:16px;height:16px}
.icon-btn .moon{display:none}
:root[data-theme="light"] .icon-btn .sun{display:none}
:root[data-theme="light"] .icon-btn .moon{display:block}
.menubtn{height:40px;padding:0 14px;border:1px solid var(--ink);font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--ink);display:inline-flex;align-items:center}
.menubtn:hover{border-color:var(--acc)}
main{padding-block:0 96px}
main.hasbar{padding-bottom:180px}
.view{display:block}
.hero{padding-block:30px 26px}
.hero.small{padding-block:24px 20px}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);margin-block:20px 14px}
.back:hover{color:var(--ink)}
.block{padding-block:18px;border-top:1px solid var(--line)}
.block.first{border-top:0;padding-top:0}
.block > .label{margin-bottom:12px;display:block}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}

/* progress: SEARCH > SELECT > PRESENT */
.progress{border-top:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr)}
.steps a{height:40px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);white-space:nowrap;position:relative}
.steps a i{width:5px;height:5px;background:transparent;flex:none;display:none}
.steps a.done{color:var(--ink)}
.steps a.done i{display:block;background:var(--acc)}
.steps a.on{color:var(--ink)}
.steps a.on::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;background:var(--ink)}

/* buttons: one vocabulary */
.btn{height:var(--btn-h);display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;width:100%;border:1px solid var(--btn);background:var(--btn);color:var(--btnink);font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
/* Sarah, 2026-09-20: acid green only on an active selection or a precise point, never on a button. Hover inverts, and only on devices that hover (a tap on iPhone left the button green). */
@media (hover:hover){.btn:hover{background:transparent;border-color:var(--btn);color:var(--ink)}}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--line)}
@media (hover:hover){.btn.outline:hover{background:var(--btn);border-color:var(--btn);color:var(--btnink)}}
.btn.small{height:40px;font-size:10px;padding:0 14px}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--btn-off-bg,var(--card));border-color:var(--btn-off-line,var(--line));color:var(--btn-off-ink,var(--mute));pointer-events:none} /* a readable face, never an opacity (audit 2026-09-20: 2.46:1) */
.btn svg{width:14px;height:14px}
.btn.on{background:var(--acc);border-color:var(--acc);color:var(--accink)}
.btn.primary{margin-top:12px}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-size:12px;color:var(--mute);cursor:pointer}
.linkbtn:hover{color:var(--ink)}

/* status, toast */
.status{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:10px;min-height:20px;flex-wrap:wrap;margin-top:12px}
.status:empty{display:none}
.status.loading::before{content:"";width:8px;height:8px;background:var(--acc);flex:none;animation:blink 1s infinite}
.status.error{color:var(--ink)}
.status .linkbtn,.status a{color:var(--ink);font-size:13px}
@keyframes blink{50%{opacity:.2}}
.toast{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--ink);color:var(--bg);padding:14px 16px;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:none}

/* menu: full screen, black */
.menu{position:fixed;inset:0;z-index:50;background:#000;color:#fff;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
.menu .wm{color:#fff}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:56px;flex:none}
.menu .menubtn{color:#fff;border-color:#fff}
.menu-list{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.menu-list a{display:block;text-decoration:none;font-size:34px;line-height:1.1;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase;padding-block:10px;color:#fff}
.menu-list a:hover,.menu-list a.on{color:var(--acc)}
.menu-foot{padding-block:18px calc(24px + env(safe-area-inset-bottom,0px));flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* the language segment: a flex item in the footer row, so it needs a width of its own (200 px, the same as the Studio view), and each button a tap target of its own */
.menu-foot .lang-seg{flex:1 1 200px;max-width:200px}
.menu-foot .lang-seg button{min-width:56px;padding:0 12px}
.menu .seg{border-color:#262626}
.menu .seg button{color:#8c8c8c;border-color:#262626}
.menu .seg button.on{background:#fff;color:#000}

/* onboarding: three screens */
.onb{position:fixed;inset:0;z-index:45;background:var(--bg);color:var(--ink);display:flex;flex-direction:column}
.onb-top{display:flex;align-items:center;justify-content:space-between;height:56px;flex:none}
.onb-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.onb-screen .lead{font-size:20px;max-width:22ch}
.onb-foot{padding-block:18px calc(24px + env(safe-area-inset-bottom,0px));flex:none;display:flex;flex-direction:column;gap:18px}
.dots{display:flex;gap:8px}
.dots i{width:8px;height:8px;background:var(--line);display:block}
.dots i.on{background:var(--acc)}

/* tabs, chips, swatches, fields */
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px}
.tab{flex:1;height:44px;font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab:hover{color:var(--ink)}
.panel{margin-bottom:18px}
.panel > .sub{margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:38px;padding:0 14px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.swatch{aspect-ratio:1;border:1px solid var(--line);position:relative;padding:0}
.swatch.on{outline:2px solid var(--acc);outline-offset:2px}
.swatch:hover{border-color:var(--acc)}
.swatch-name{margin-top:10px;font-size:13px;min-height:18px}
/* the colour wheel: one row per hue group in wheel order, light to deep inside the row (lib/colournames.js) */
.wheel{display:flex;flex-direction:column;gap:14px}
.wgroup{display:flex;flex-direction:column;gap:8px}
.wgroup .glabel{font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);height:24px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:0;border-bottom:1px solid transparent}
.wgroup .glabel:hover{color:var(--ink)}
.wgroup .glabel.on{color:var(--ink);border-bottom-color:var(--acc)}
.wrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.wname{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0;text-align:center;color:var(--mute);-webkit-tap-highlight-color:transparent}
.wname .sw{aspect-ratio:1;width:100%;border:1px solid var(--line);position:relative}
.wname .sw::after{content:"";position:absolute;inset:0;pointer-events:none}
.wname.on{color:var(--ink)}
.wname.on .sw{outline:2px solid var(--acc);outline-offset:2px}
.wname:hover .sw{border-color:var(--acc)}
.wname .nm{font-size:11px;letter-spacing:0;font-weight:500;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
/* the material chips, grouped by what the word describes */
.mgroup{padding-block:12px;border-top:1px solid var(--line)}
.mgroup:first-child{border-top:0;padding-top:0}
.mgroup > .label{margin-bottom:10px;display:block}
.colour-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;min-width:0}
.field:last-child{margin-bottom:0}
.input{height:48px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:0 14px;font-size:16px;border-radius:0;outline:none;width:100%;min-width:0;text-align:start;-webkit-appearance:none;appearance:none}
.input:focus{border-color:var(--ink)}
.input::placeholder{color:var(--mute);opacity:1}
textarea.input{height:auto;min-height:88px;padding:12px 14px;resize:vertical;line-height:1.4}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:36px}
[dir="rtl"] select.input{background-position:15px 21px,20px 21px} /* the two halves of the chevron in their order (20/15 drew it upside down, study C); the logical padding of select.input already leaves the left side free */
select.input option{color:#000;background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inline{display:flex;align-items:center;gap:12px}
.inline .input{flex:1}
.range{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent}
.range::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--ink);margin-top:-8px;border:0;border-radius:0}
.range::-moz-range-track{height:2px;background:var(--line)}
.range::-moz-range-thumb{width:18px;height:18px;background:var(--ink);border:0;border-radius:0}
/* the hue axis of the colour picker: pure hues, not a brand colour */
.hue-track{height:8px;background:linear-gradient(90deg,hsl(0 100% 50%),hsl(60 100% 50%),hsl(120 100% 50%),hsl(180 100% 50%),hsl(240 100% 50%),hsl(300 100% 50%),hsl(360 100% 50%));margin-bottom:-14px}
.seg{display:flex;border:1px solid var(--line)}
.seg button{flex:1;height:40px;padding:0 10px;font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--mute);border-inline-start:1px solid var(--line)}
.seg button:first-child{border-inline-start:0}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg button:hover:not(.on){color:var(--ink)}
.lang-seg{max-width:200px}

/* refine: folded filters */
.refine{margin-top:26px;border-top:1px solid var(--line)}
.refine summary{list-style:none;display:flex;align-items:center;justify-content:space-between;height:52px;cursor:pointer;font-size:11px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;color:var(--ink)}
.refine summary::-webkit-details-marker{display:none}
.refine summary i{width:10px;height:10px;border-inline-end:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);margin-top:-5px;transition:transform .15s}
.refine[open] summary i{transform:rotate(-135deg);margin-top:5px}
.refine-body .block:first-child{border-top:0;padding-top:0}
.refine-body .block .btn.small{margin-top:10px}

/* colour chip */
.colourchip{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);background:var(--card);margin-top:14px}
.colourchip .sw{width:48px;height:48px;flex:none;border:1px solid var(--line)}
.colourchip .txt{flex:1;min-width:0;font-size:13px;line-height:1.5}
.colourchip .txt b{font-weight:500;letter-spacing:.06em}
.colourchip .clear{flex:none}

/* photo */
.photo{display:flex;flex-direction:column;gap:12px}
.canvaswrap{position:relative;border:1px solid var(--line);background:var(--card);display:none}
.canvaswrap.has{display:block}
.canvaswrap canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.dot{position:absolute;width:18px;height:18px;border:2px solid var(--acc);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.5);display:none}
.dot.on{display:block}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* dictate */
.dictate{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.dictate .status{margin-top:0}
.transcript{font-size:15px;min-height:20px;line-height:1.5}
.transcript:empty{display:none}
.understood{display:flex;flex-direction:column;gap:6px}
.understood:empty{display:none}
.understood .criteria{margin-top:0}
.neith-reply{font-size:15px;line-height:1.45;margin:10px 0 4px;color:var(--ink)} .neith-reply b{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-inline-end:8px}
.understood .uchips{display:flex;flex-wrap:wrap;gap:6px}
.understood .uchips span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border:1px solid var(--line);padding:5px 8px}
.lastpdf{margin-top:12px;display:flex;align-items:center;gap:10px}
.lastpdf a{color:var(--ink)}
#note-btn{user-select:none;-webkit-user-select:none;touch-action:none}
#note-btn.rec{border-color:var(--acc)}
#note-btn.rec svg{color:var(--acc)}
.status.note{color:var(--ink)}
#brief-audio:empty{display:none}
#brief-audio audio{width:100%;height:36px}

/* results */
.resline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.summary{font-size:13px;color:var(--mute);line-height:1.5;margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card:hover{border-color:var(--acc)}
.card .imgw{position:relative}
.card .img{aspect-ratio:1;width:100%;object-fit:cover;background:var(--card)}
.card .body{padding:10px 10px 12px}
.card .name{font-size:12px;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase;line-height:1.25;word-break:break-word}
.card .meta{font-size:11px;color:var(--mute);margin-top:4px;line-height:1.4}
.card .mill{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-top:6px}
/* the measured colour of the cloth beside its photograph: the swatch is the Lab of the record, the name its table name */
.card .cname{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--mute);margin-top:6px;min-width:0}
.card .cname i{width:10px;height:10px;border:1px solid var(--line);flex:none}
.card .cname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* no floating percentage on a thumbnail (Sarah, 2026-09-20): the match lives in the fabric sheet, with the observation, never alone */
.card .chk{position:absolute;top:8px;inset-inline-start:8px;width:24px;height:24px;background:var(--acc);color:var(--accink);display:none;align-items:center;justify-content:center;pointer-events:none}
.card .chk svg{width:14px;height:14px}
.card.on{outline:2px solid var(--acc);outline-offset:-2px;border-color:var(--acc)}
.card.on .chk{display:flex}
.card .added{position:absolute;bottom:8px;inset-inline-end:8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--accink);background:var(--acc);padding:3px 6px;display:none;pointer-events:none}
.card.added .added{display:block}
.card .info{position:absolute;inset-inline-end:8px;top:auto;bottom:auto;width:28px;height:28px;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;text-decoration:none;font-family:var(--font);margin-top:-14px}
.card .body{padding-inline-end:44px;position:relative}
.card .info{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);margin:0}
.card .info:hover{border-color:var(--acc)}
.card.plain{cursor:default}
.empty{padding:26px 0;font-size:14px;color:var(--mute);line-height:1.5}
.empty a{color:var(--ink)}
/* sponsored (2026-10-01): first, above the ranking, set apart by a 1 px rule, labelled; no acid green (it marks a choice
   of the studio, never a paid place); a grid of at most four, never a horizontal strip */
.sponsored{margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.sponsored .label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0}
.sponsored .tag{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border:1px solid var(--ink);color:var(--ink)}
.sponsored .who{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.sponsored .spnote{font-size:12px;color:var(--mute);line-height:1.5;margin-top:8px}
.sponsored .grid{margin-top:12px}
.strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .card{flex:0 0 150px;scroll-snap-align:start}
.more{margin-top:22px}

/* sticky selection bar */
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);padding-block:12px calc(12px + env(safe-area-inset-bottom,0px))}
.selbar .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.selbar .links{display:flex;gap:16px}
.selbar .btn.primary{margin-top:0}

/* fabric */
.hero-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--card);border:1px solid var(--line)}
.fab-head{margin-top:16px}
.fab-head .h2{font-size:24px}
.fab-head .sub{margin-top:6px}
.specs{list-style:none;margin:0;padding:0}
.spec{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec:last-child{border-bottom:0}
.spec .k{color:var(--mute);font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;flex:none;padding-top:3px}
.spec .v{text-align:end;min-width:0;overflow-wrap:anywhere}
.study{display:flex;flex-direction:column;gap:14px}
.study .colourchip{margin-top:0}
.study .desc{font-size:14px;line-height:1.55}
.study .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.study .facts div{border:1px solid var(--line);padding:10px}
.study .facts .label{display:block;margin-bottom:4px}
.study .facts .v{font-size:14px}
.voice{display:flex;flex-direction:column;gap:10px}
.voice audio{width:100%;height:36px}
.voice .row{display:flex;gap:10px}
.disclaimers{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.disclaimer{font-size:11px;color:var(--mute);line-height:1.5}
.tel{text-decoration:none}

/* selection grid with reorder */
.selgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{position:relative;background:var(--card);border:1px solid var(--line)}
.tile img{aspect-ratio:1;width:100%;object-fit:cover}
.tile .n{font-size:10px;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase;line-height:1.25;padding:8px 8px 6px;min-height:34px;word-break:break-word}
.tile .ctl{display:flex;border-top:1px solid var(--line)}
.tile .ctl button{flex:1;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border-inline-start:1px solid var(--line)}
.tile .ctl button:first-child{border-inline-start:0}
.tile .ctl button:disabled{color:var(--mute)} /* readable, never an opacity */
.tile .ctl button:hover:not(:disabled){color:var(--acc)}
.tile .ctl svg{width:12px;height:12px}
.tile .i{position:absolute;top:6px;inset-inline-start:6px;font-size:10px;font-weight:700;background:var(--bg);color:var(--ink);padding:3px 5px;line-height:1}
.details{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.details > .label{display:block;margin-bottom:14px}
.details .help{margin-top:4px}

/* presentation: the A4 pages of lib/pdf_v2.js, 1 pt = var(--u) (container units, a px fallback for old engines) */
.sheethead{padding:22px 0 8px;border-top:1px solid var(--line)}
.sheethead > .label{display:block;margin-bottom:10px}
.sheethead .h2{font-size:28px}
.sheethead .sub{margin-top:8px}
.pres-project{font-size:17px;font-weight:500;margin-top:12px;overflow-wrap:anywhere}
.studioline{display:flex;align-items:center;gap:12px;font-size:14px;margin-top:12px;min-height:20px}
.studioline img{height:32px;width:auto;max-width:120px;background:#fff;padding:4px;border:1px solid var(--line)}
.studioline a{color:var(--ink)}
.studioline:empty{display:none}
.pv{margin-top:14px}
.pages{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.pagewrap{container-type:inline-size;min-width:0}
.pagewrap > .label{display:block;margin-bottom:8px}
.page{--u:.6px;background:#fff;color:#000;aspect-ratio:210/297;padding:calc(44*var(--u));display:flex;flex-direction:column;border:1px solid var(--line);direction:ltr;text-align:left;overflow:hidden;font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;line-height:1.15;letter-spacing:0;text-transform:none}
@supports (width:1cqw){.page{--u:calc(100cqw / 595.28)}}
.page .pwm{display:inline-block;color:#000;height:calc(12*var(--u));flex:none}
.page .pwm svg{height:100%;width:auto}
.page .ph{flex:none;border-bottom:calc(.5*var(--u)) solid #e6e6e6;padding-bottom:calc(8*var(--u));margin-bottom:calc(18*var(--u))}
.page .ph.first .t{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(12*var(--u))}
.page .ph .ttl{font-size:calc(22*var(--u));font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap}
.page .ph .sub{display:flex;justify-content:space-between;gap:calc(24*var(--u));font-size:calc(8*var(--u));color:#8c8c8c;margin-top:calc(7*var(--u));white-space:nowrap;overflow:hidden;min-width:0}
.page .ph .sub span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.page .ph .sub .st{flex:none;max-width:45%}
.page .ph:not(.first){display:flex;justify-content:space-between;align-items:center;gap:calc(24*var(--u))}
.page .ph:not(.first) .sub{margin-top:0;display:block;text-overflow:ellipsis}
/* header v4: the mark at left 14 pt, the grey line under it, the small tracked label at right, the studio under it */
.page .ph.v4{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(24*var(--u));padding-bottom:calc(19*var(--u))}
.page .ph.v4 .l,.page .ph.v4 .r{display:flex;flex-direction:column;min-width:0}
.page .ph.v4 .r{align-items:flex-end;flex:none;max-width:45%}
.page .ph.v4 .pwm{height:calc(14*var(--u))}
.page .ph.v4 .sub{display:block;margin-top:calc(9*var(--u));font-size:calc(8*var(--u));color:#8c8c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page .ph.v4 .lbl{font-size:calc(8*var(--u));letter-spacing:.18em;text-transform:uppercase;color:#000;line-height:1;margin-top:calc(4*var(--u))}
.page .ph.v4 .st{font-size:calc(8*var(--u));color:#8c8c8c;margin-top:calc(9*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.page .pg{flex:1;min-height:0;overflow:hidden}
.page .prow{display:grid;grid-template-columns:repeat(3,calc(160*var(--u)));column-gap:calc(13.64*var(--u));align-items:start}
.page .prow + .prow{margin-top:calc(30*var(--u))}
.page .psec{padding-bottom:calc(4*var(--u));margin-bottom:calc(6*var(--u));border-bottom:calc(.5*var(--u)) solid #e6e6e6}
.page .prow + .psec{margin-top:calc(14*var(--u))}
.page .psec .k{display:block;font-size:calc(7*var(--u));letter-spacing:.2em;color:#8c8c8c;text-transform:uppercase;margin-bottom:calc(3*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page .psec b{display:block;font-size:calc(11*var(--u));font-weight:700}
.page .pf{min-width:0}
.page .pimg{width:calc(160*var(--u));height:calc(160*var(--u));border:calc(.5*var(--u)) solid #e6e6e6;padding:calc(6*var(--u));background:#fff}
.page .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.page .pimg .noimg{width:100%;height:100%;background:#f2f2f2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(10*var(--u));color:#8c8c8c}
.page .pimg .noimg b{font-size:calc(7.5*var(--u));letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.page .pimg .noimg span{font-size:calc(6.5*var(--u));margin-top:calc(4*var(--u))}
.page .pt{margin-top:calc(7*var(--u));max-height:calc(118*var(--u));overflow:hidden;font-size:calc(7.5*var(--u));line-height:calc(8.5*var(--u));color:#8c8c8c;overflow-wrap:anywhere}
.page .pt > b{display:block;color:#000;font-size:calc(9.5*var(--u));line-height:calc(11*var(--u));letter-spacing:-.02em;text-transform:uppercase}
.page .pt .r{margin-top:calc(1*var(--u))}
.page .pt .c{margin-top:calc(3*var(--u))}
.page .pt .c + .s{margin-top:calc(3*var(--u))}
.page .pt .sp{display:inline}
.page .pt .sp i{font-style:normal;font-weight:700}
.page .pt .sp em{display:inline-block;width:calc(3*var(--u));height:calc(3*var(--u));background:#87E64B;margin:0 calc(3*var(--u)) calc(1*var(--u)) calc(4*var(--u));vertical-align:middle}
.page .tk{display:flex;align-items:center;gap:calc(5*var(--u));margin-top:calc(7*var(--u));color:#000;font-size:calc(7*var(--u));line-height:1}
.page .tk i{width:calc(10*var(--u));height:calc(10*var(--u));border:calc(.75*var(--u)) solid #000;background:#fff;flex:none;display:block}
.page .pft{flex:none;border-top:calc(.5*var(--u)) solid #e6e6e6;padding-top:calc(6*var(--u));color:#8c8c8c;font-size:calc(6*var(--u));line-height:calc(7.5*var(--u))}
.page .pft .r1{display:flex;justify-content:space-between;align-items:center;font-size:calc(8*var(--u));margin-bottom:calc(6*var(--u))}
.page .pft .r1 svg{height:calc(10*var(--u));width:auto;color:#000}
.page .pft .cl{color:#000;font-size:calc(7.5*var(--u));margin-bottom:calc(6*var(--u))}
.page .pft .d + .d{margin-top:calc(2*var(--u))}
.next{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.next .actions{margin-top:12px}
.next .help{margin-top:12px}
.notes{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.notes p{font-size:11px;color:var(--mute);line-height:1.5}
.refchip{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-size:13px}
.refchip i{width:22px;height:22px;border:1px solid var(--line);display:inline-block;flex:none}

/* studio */
.account{display:flex;flex-direction:column;gap:12px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv div{border:1px solid var(--line);padding:10px;min-width:0}
.kv .label{display:block;margin-bottom:4px}
.kv .v{font-size:14px;overflow-wrap:anywhere}
.authforms{display:flex;flex-direction:column;gap:18px}
.authform{border:1px solid var(--line);padding:16px}
.authform .h3{font-size:12px;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:500;margin-bottom:14px}
.authform .btn{margin-top:4px}
.projects{display:flex;flex-direction:column;gap:10px}
.project{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line);padding:12px;background:var(--card)}
.project .t{min-width:0}
.project .name{font-size:12px;font-weight:700;letter-spacing:var(--title-track);text-transform:uppercase;line-height:1.25;overflow-wrap:anywhere}
.project .meta{font-size:11px;color:var(--mute);margin-top:3px;line-height:1.4}
.project .ctl{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
/* the iOS app sells nothing (Apple guideline 3.1.1, 2026-10-01): what is marked data-web-only (plans, prices, /pricing,
   the site home) is never drawn in it; app.js also removes those nodes */
[data-native] [data-web-only]{display:none !important}
/* account deletion (Apple guideline 5.1.1(v), 2026-10-01): a quiet link, then the confirmation inline, with the password */
.delacct{margin-top:16px}
.delacct > .linkbtn{font-size:12px}
.delform{border:1px solid var(--ink);padding:14px 16px}
.delform p{font-size:14px;line-height:1.45;margin-bottom:14px}
.delform .actions{margin-top:12px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px}
.delform .actions .btn{width:auto;min-width:0}
.acct-note{font-size:14px;line-height:1.45;color:var(--ink);border:1px solid var(--ink);padding:12px 14px;margin-bottom:12px}
.logo-preview{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);background:#fff;color:#000;min-height:72px}
.logo-preview img{height:44px;width:auto;max-width:180px;object-fit:contain}
.logo-preview .none{font-size:13px;color:var(--mute)}
.help + .logo-preview{margin-top:12px}

/* mills */
.millslist{display:flex;flex-direction:column;gap:12px}
.millcard{border:1px solid var(--line);padding:16px;background:var(--card)}
.millcard .h2{font-size:20px;display:flex;align-items:center;gap:10px}
.millcard .h2 i{width:6px;height:6px;background:var(--acc);display:inline-block;flex:none}
.millcard .sub{margin-top:8px}
.millcard .actions{margin-top:14px}

/* rtl */
[dir="rtl"] .card .name,[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .giant,[dir="rtl"] .menu-list a{letter-spacing:0}
[dir="rtl"] .back span[aria-hidden]{transform:scaleX(-1);display:inline-block}

/* tablet */
@media (min-width:820px){
  :root{--gutter:32px;--h1:64px;--giant:112px}
  main{padding-bottom:80px}
  .btn{width:auto;min-width:240px}
  .actions{flex-direction:row;flex-wrap:wrap}
  .grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .strip .card{flex-basis:180px}
  .swatches{grid-template-columns:repeat(14,1fr)}
  .wrow{grid-template-columns:repeat(auto-fill,minmax(84px,96px))}
  .fab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .fab > *{min-width:0}
  .fab .hero-img{position:sticky;top:calc(112px + var(--sat,0px))}
  .fab-head{margin-top:0}
  .fab-head .h2{font-size:30px}
  .pages{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .refine-body{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
  .refine-body .block{border-top:1px solid var(--line)}
  .toast{left:auto;right:var(--gutter);bottom:24px;min-width:280px}
  .selgrid{grid-template-columns:repeat(6,1fr)}
  .selbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .selbar .row{margin-bottom:0}
  .menu-list a{font-size:64px}
  .lead{font-size:19px}
  .kv{grid-template-columns:repeat(4,1fr)}
  .authforms{flex-direction:row}
  .authform{flex:1}
  .steps a{height:44px}
  .colour-tools{max-width:520px}
}
/* desktop */
@media (min-width:1440px){
  .wrow{grid-template-columns:repeat(auto-fill,minmax(88px,100px))}
  :root{--gutter:48px;--h1:88px;--giant:160px}
  .grid{grid-template-columns:repeat(6,1fr);gap:20px}
  .strip .card{flex-basis:200px}
  .fab{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
  .pages{grid-template-columns:repeat(3,1fr)}
  .refine-body{grid-template-columns:1fr 1fr 1fr}
  .selgrid{grid-template-columns:repeat(8,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* the white label switch on the presentation (Pro and Business) */
.check{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 14px;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--acc);margin:0}
.check small{flex-basis:100%;font-size:12px;color:var(--mute);line-height:1.4}

/* the brief first: the conversation before the tools */
.brief-first{margin:0 0 22px}
.brief-first .brief{width:100%;min-height:92px;max-height:46vh;resize:vertical;overflow-y:auto;font-size:17px;line-height:1.4;padding:14px 16px}
.brief-hint{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--mute)}
.brief-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-top:10px}
.brief-actions .btn{width:auto;min-width:0;flex:none}
.brief-actions .linkbtn{white-space:nowrap}
.brief-actions .voice,.brief-actions .send{display:flex;flex-direction:row;align-items:center;gap:8px}
.brief-actions .send{gap:16px;margin-inline-start:auto}
/* the microphone and the language she speaks (2026-10-01): while it listens, the accent touch and a slow pulse */
#dictate-btn svg{width:14px;height:14px;flex:none}
#dictate-btn.rec{border-color:var(--acc)}
#dictate-btn.rec svg{color:var(--acc);animation:blink 1.2s infinite}
.voice-lang{min-width:40px;height:34px;padding:0 10px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.14em;font-weight:700;cursor:pointer}
.voice-lang[lang=ar]{font-size:15px;letter-spacing:0}
.voice-lang:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#dictate{margin:0}
#dictate:has(.status:not(:empty),.understood:not(:empty),.transcript:not(:empty)){margin-bottom:18px}

/* the criteria NEITH read (Sarah's brief of 2026-09-23: the interpretation must be visible and editable before the results):
   one small tracked label per group, one chip per criterion with its own x, her reply under the panel, her name once */
.criteria{margin-top:14px;padding:14px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.criteria .chead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.criteria .chead .label{color:var(--ink)}
.cgroup{display:flex;flex-direction:column;gap:6px;padding:6px 0 10px}
.cgroup .label{display:block}
.cchips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{display:inline-flex;align-items:stretch;border:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ink);max-width:100%}
.cchip span{padding:7px 4px 7px 10px;line-height:1.3;overflow-wrap:anywhere}
.cchip .x{display:inline-flex;align-items:center;justify-content:center;width:30px;flex:none;color:var(--mute);border-inline-start:1px solid transparent}
.cchip .x svg{width:10px;height:10px}
.cchip .x:hover{color:var(--ink);border-inline-start-color:var(--line)}
.cchip.busy{color:var(--mute)}
.lightnote{font-size:13px;color:var(--mute);line-height:1.5;margin-top:10px}
/* a question from NEITH: the sentence, then one button per option */
.nq{margin-top:14px;padding:14px;border:1px solid var(--ink)}
.nq .label{display:block;margin-bottom:8px}
.nq .q{font-size:15px;line-height:1.45}
.nq .q + .q{margin-top:12px}
.nq .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* her suggestions when nothing passes: one edit per button */
.nsug{margin-top:16px}
.nsug .label{display:block;margin-bottom:10px}
.nsug .opts{display:flex;flex-wrap:wrap;gap:8px}
/* why this fabric is here: two lines under the name, never a percentage */
.card .why{font-size:11px;color:var(--mute);line-height:1.4;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* what the export needs, said on the presentation before the tap */
.notice{border:1px solid var(--ink);padding:14px 16px;margin-top:4px}
.notice p{font-size:14px;line-height:1.45}
.notice .actions{margin-top:12px;flex-direction:row;flex-wrap:wrap}
.notice .actions .btn{width:auto;min-width:0}
.help.ret{margin-top:10px;color:var(--ink)}
/* the automatic colour sentence of the sheet is a catalogue colour profile, and says so */
.page .pt .pl{display:block;margin-top:calc(3*var(--u));font-size:calc(5.5*var(--u));letter-spacing:.16em;text-transform:uppercase;color:#8c8c8c;line-height:1}
.page .pt .pl + .c{margin-top:calc(1*var(--u))}
[dir="rtl"] .cchip{letter-spacing:0}
@media (min-width:820px){.cgroup{flex-direction:row;align-items:flex-start;gap:16px}.cgroup .label{flex:0 0 150px;padding-top:9px}}

/* the floating search bar (search view, once something is chosen) */
.searchbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px}
.searchbar .sbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.searchbar .btn{width:auto;flex:none;padding:0 22px}

/* the PDF inside the native shell, with a way back */
.pdfview{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.pdfview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter);border-bottom:1px solid var(--line);flex:none}
.pdfview-r{display:flex;gap:16px}
.pdfview iframe{flex:1;width:100%;border:0;background:#fff}
/* rtl, voyant 2026-09-24: Arabic letters are never letter-spaced (ligatures break), and an English sentence inside an
   Arabic page keeps its own direction so its full stop and its ellipsis stay at the right end */
[dir="rtl"] .menubtn,[dir="rtl"] .steps a,[dir="rtl"] .steps a span,[dir="rtl"] #brief-apply,[dir="rtl"] .btn,[dir="rtl"] .tabs .tab,[dir="rtl"] .label,[dir="rtl"] .lab,[dir="rtl"] .chip,[dir="rtl"] #results-total,[dir="rtl"] .criteria .label,[dir="rtl"] .criteria .chip,[dir="rtl"] .selbar,[dir="rtl"] .selbar .label,[dir="rtl"] .seg button,[dir="rtl"] .toast,[dir="rtl"] .neith-reply b,[dir="rtl"] .question .lab,[dir="rtl"] .sponsored .label{letter-spacing:0}
[dir="rtl"] .card .why,[dir="rtl"] .neith-reply,[dir="rtl"] .question p,[dir="rtl"] .suggestions button,[dir="rtl"] .criteria .chip span,[dir="rtl"] .card .name,[dir="rtl"] .card .spec{unicode-bidi:plaintext}

/* privacy, support and legal inside the app (Apple 5.1.1(i), 2026-10-01): three quiet links under the studio */
.studio-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:34px;font-size:12px;letter-spacing:.04em}
.studio-links a{color:var(--mute);text-decoration:underline;text-underline-offset:3px}

/* failure study C, 2026-10-01 */
/* Arabic is never letter-spaced: Safari and the iOS app (WebKit) draw tracked Arabic with its letters pulled apart. These
   styles were still tracked in Arabic: the spec labels of the fabric sheet, the colour groups, Refine, Back, the sign in and
   new studio titles, the studio links, the colour names and the "added" mark of the cards, the reading Neith shows under
   the brief, the floating search bar, the project names, the labels of the A4 preview */
[dir="rtl"] .back,[dir="rtl"] .wgroup .glabel,[dir="rtl"] .refine summary,[dir="rtl"] .understood .uchips span,[dir="rtl"] .card .cname,[dir="rtl"] .card .added,[dir="rtl"] .spec .k,[dir="rtl"] .tile .n,[dir="rtl"] .page .psec .k,[dir="rtl"] .page .pt .pl,[dir="rtl"] .authform .h3,[dir="rtl"] .project .name,[dir="rtl"] .searchbar .sbl,[dir="rtl"] .studio-links{letter-spacing:0}
/* a telephone number reads left to right inside an Arabic line, never "3237 323 4 971+" (the site's mill page does the same
   with dir="ltr"); the lines of a mill card each take the direction of their own words */
.tel{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .millcard .sub{unicode-bidi:plaintext;text-align:right}
/* in Arabic the English paragraphs (the mill disclaimers, the colour profile) keep their full stop at the end, and a hex
   code its # first (the reference of a fabric stays whole through the left to right mark that ends "المرجع" in app.ar.json) */
[dir="rtl"] .disclaimer,[dir="rtl"] .study .desc,[dir="rtl"] .notes p,[dir="rtl"] .colourchip .txt{unicode-bidi:plaintext;text-align:right}
/* the order arrows of the selection follow the reading: in Arabic the earlier place is on the right (the arrow that pointed
   right moved the fabric to the left) */
[dir="rtl"] .tile .ctl svg{transform:scaleX(-1)}
/* French: CHERCHER and PRESENTER, 393 and 417 px wide at 72 px, overflowed the 358 px column of a phone; an accented capital
   on a second title line touched the line above at .96 (0.2 px of air, the project name is the presentation title) */
:lang(fr) .giant{font-size:min(var(--giant),15vw);line-height:1.04}
:lang(fr) .h1,#view-presentation .h1{line-height:1.04}
/* the similar fabrics: a grid, never a horizontal carousel (WEAVRA law, as the sponsored block); a card without the i keeps
   its full width for the name */
.strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none;padding-bottom:0}
.strip .card{scroll-snap-align:none}
.card.plain .body{padding-inline-end:10px}
/* acid green never on the hover of a button (Sarah, 2026-09-20), and a hover only on devices that hover: a tap on iPhone left
   the arrow of a tile, a chip, the theme button or a card green after the finger lifted */
.icon-btn:hover,.chip:not(.on):hover,.card .info:hover,.swatch:hover,.wname:hover .sw,.card:not(.on):hover{border-color:var(--line)}
.menubtn:hover{border-color:var(--ink)}
.menu .menubtn:hover{border-color:#fff}
.tile .ctl button:hover:not(:disabled){color:var(--ink)}
@media (hover:hover){
  .icon-btn:hover,.chip:not(.on):hover,.card .info:hover{border-color:var(--ink)}
  .menubtn:hover{background:var(--ink);color:var(--bg)}
  .menu .menubtn:hover{background:#fff;color:#000}
  .swatch:hover,.wname:hover .sw,.card:not(.on):hover{border-color:var(--acc)}
}