/* THE DECOR HUB — OPS · additions on top of css/styles.css (the website's stylesheet, untouched).
   Only what a tool needs and the site never had: inputs inside rows, a toast, the quote preview,
   an inverted mode, and a Vietnamese-capable serif for the editorial line. */

/* Instrument Serif has no Vietnamese. Newsreader Italic at opsz 72 is the same cut with every diacritic. */
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Newsreader-Italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Newsreader-Italic-vietnamese.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
:root{--f-edit:"Newsreader","Instrument Serif",Georgia,serif}
.phead h1 em,.ital{font-variation-settings:"opsz" 72}
/* Vietnamese capitals carry stacked marks: the site's .82 leading collides, .94 clears; the serif line at .62em reads as a sentence */
.phead h1{line-height:.94}
.phead h1 em{font-size:.62em;line-height:1.05;display:inline-block;margin-top:.1em}

/* inverted mode = the site's own inversion, applied to the whole page */
body.inv{--paper:#000;--ink:#fff;--hair:rgba(255,255,255,.2);--hair-i:rgba(0,0,0,.2);--ink-08:rgba(255,255,255,.08);--ink-45:rgba(255,255,255,.45);--ink-70:rgba(255,255,255,.7);--paper-45:rgba(0,0,0,.45);--paper-70:rgba(0,0,0,.7);--ph:#1b1b1b;background:#000;color:#fff}
body.inv .nav,body.inv .nav__face{background:var(--paper);color:var(--ink)}
body.inv .light{--bg:var(--paper);--fg:var(--ink);--rule:var(--hair);--dim:var(--ink-45);background:var(--paper);color:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* one line, always: ops-ui measures the first line and sets --fit (the site's HeadFit clears inline font-size, so a property) */
.phead h1[style*="--fit"]{font-size:var(--fit)!important}
/* content pages: the mega head at a size that survives a 60-character task title */
body[data-page="task"] .phead h1,body[data-page="project"] .phead h1,body[data-page="member"] .phead h1,body[data-page="chat"] .phead h1,body[data-page="quote"] .phead h1{font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:.9}
.phead__cta{display:flex;flex-wrap:wrap;gap:10px;padding:26px var(--pad) 0}
.phead>p{padding:0 var(--pad)}
.btn--ghost{border-color:var(--rule)}
.btn b{font-family:var(--f-mono);font-weight:400;font-size:1.15em;line-height:0}
.btn{cursor:pointer;background:none;color:inherit}
.nav__cnt{font-family:var(--f-mono);letter-spacing:0}
.nav a.nav__l{white-space:nowrap}
.nav__links{gap:clamp(10px,1.5vw,24px)}
@media (max-width:700px){ .nav__u{display:none} }

/* rows that hold controls */
.rows .row{color:inherit;text-decoration:none}
.row--form{cursor:default}
.row--form:hover{color:inherit}.row--form:hover::before{transform:scaleY(0)}
.row--form .row__n{font-family:var(--f-mono);font-size:var(--s-micro);letter-spacing:var(--tr-mono);color:var(--grey)}
.row--empty .row__t{font-family:var(--f-edit);font-style:italic;font-weight:400;font-variation-settings:"opsz" 72;letter-spacing:-.02em;font-size:var(--s-lg)}
.row--me .row__t::after{content:" ·";color:var(--grey)}
.row--branch .row__t{font-weight:700}
.row--leaf{padding-left:0}.row--leaf .row__t{font-weight:400;font-size:var(--s-bd)}
.rows--tight .row{padding:9px 0}
.inp{width:100%;background:none;border:0;border-bottom:1px solid var(--rule);padding:6px 0;font-family:var(--f-disp);font-size:var(--s-sm);letter-spacing:-.01em;color:inherit}
.inp:focus{outline:0;border-bottom-color:currentColor}
.inp--n{width:110px;text-align:right;font-family:var(--f-mono)}
.row .btn{padding:9px 14px}
.row__m .chip span,.row__t .chip span{padding:6px 10px}
.row__t .chip{display:inline-block}
.row__d a{position:relative}
.row__d a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:currentColor;opacity:.4}
.dim{color:var(--dim)}

/* forms: the site's fieldset, with an action row */
.fs__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.fld input[type="date"],.fld input[type="datetime-local"],.fld input[type="number"]{font-family:var(--f-mono);font-size:var(--s-sm)}
.fld input[type="datetime-local"]~span,.fld input[type="date"]~span{transform:translateY(-17px) scale(.85);opacity:.55}
.cols form{display:contents}
.msg{color:var(--grey)}
.gbtn{min-height:44px;margin-top:8px}

/* stats with a footnote */
.stats small{display:block;margin-top:10px}
.stats>div{min-width:0}
.stats dd{overflow-wrap:anywhere}

/* the inverted statement section */
.blast__a{color:inherit;text-decoration:none;position:relative}
.blast__a::after{content:"";position:absolute;left:0;bottom:-.04em;height:.06em;width:0;background:currentColor;transition:width var(--t-2) var(--e-snap)}
.blast__a:hover::after{width:100%}
.sec.light .sec__h{padding-top:0}
.sec.light{padding-bottom:clamp(28px,5vh,56px)}

/* quote: form left, the A4 on the right */
.cols--quote{align-items:start}
.q-prev{position:sticky;top:calc(var(--nav) + 20px)}
.q-prev canvas{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#fff}
@media (max-width:899px){ .q-prev{position:static} }

/* toast: one mono strip, inverted */
.toast{position:fixed;left:var(--pad);bottom:22px;z-index:950;background:var(--ink);color:var(--paper);padding:12px 16px;font-family:var(--f-disp);font-size:var(--s-sm);letter-spacing:-.01em;max-width:min(92vw,420px);transform:translateY(120%);opacity:0;transition:transform .5s var(--e-expo),opacity .2s linear;pointer-events:none}
.toast.on{transform:none;opacity:1}

/* stocks with long values */
.stocks dd{min-width:0;overflow-wrap:anywhere}

/* chips used as toggles inside rows keep the site look */
.chip{position:relative}