/* Practice Desk — Assurance & Compliance additions. Uses only the tokens defined in app.css
   (Practice Desk design system v3); nothing here redefines colours, fonts or spacing. */

:root{--t-th:12px;--t-td:14px;--t-meta:12px;--lh-meta:16px;--lh-td:20px}

/* status pills mapped to the design tokens */
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.err{background:var(--err-bg);color:var(--err)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.accent{background:var(--brand-tint);color:var(--brand)}
.pill.neu{background:var(--neu-bg);color:var(--ink-2)}

/* top bar additions */
.periodsel{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--muted)}
.periodsel select{min-height:36px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);padding:0 8px;color:var(--ink)}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r);color:var(--ink-2)}
.bell:hover{background:var(--surface-2)}
.bell svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.bell .n{position:absolute;top:3px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--err);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 3px}
.x-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;border-radius:var(--r);color:var(--muted);cursor:pointer}
.x-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
/* Sidebar: Practice Desk's auto-collapsing rail (laravel.css) is used as is. Only the
   menu scrolls, with an even thinner scrollbar that appears while the menu is pointed at. */
.side .brand-t span{font-size:12px;line-height:15px;color:var(--muted)}
.side-nav{scrollbar-width:thin;scrollbar-color:transparent transparent}
.side-nav:hover,.side-nav:focus-within{scrollbar-color:color-mix(in srgb,var(--ink) 18%,transparent) transparent}
.side-nav::-webkit-scrollbar{width:3px}
.side-nav::-webkit-scrollbar-thumb{border-radius:3px}
.av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:11px;font-weight:600}

/* tables in cards: they fit the card instead of scrolling sideways. Headers and cells wrap,
   long words or file names break when they must, and narrow columns (dates, counts, pills) stay
   on one line. Only on phones does a very wide table scroll inside its card. */
.tw{overflow:visible}
.tw table{width:100%;min-width:0}
.tw th,.tw th.sortable button{white-space:normal}
.tw td{overflow-wrap:anywhere}
.tw td.num,.tw td.nw,.tw td .pill,.tw td .due,.tw td .ref,.tw td.ref{overflow-wrap:normal}
.tw td .pill{white-space:nowrap}
.tw .prog{min-width:56px}
@media (max-width:760px){.tw{overflow-x:auto;scrollbar-width:thin}}
td.wrap{white-space:pre-line;overflow-wrap:anywhere}
td .src{font-size:12px;color:var(--faint)}
.ref{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;color:var(--ink)}
.empty-row td{color:var(--muted);text-align:center;padding:var(--s6)}

/* metric tiles: separate measures, never one score */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.mcard2{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:inherit}
a.mcard2:hover{border-color:var(--line-strong)}
.mcard2 .l{font-size:13px;color:var(--muted)}
.mcard2 .v{font-family:var(--f-head);font-size:26px;line-height:32px;font-weight:700}
.mcard2 .m{font-size:12px;color:var(--muted)}
.bar{height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .b-ok{background:var(--ok)}.bar .b-warn{background:#C98A00}.bar .b-err{background:var(--err)}.bar .b-info{background:var(--info)}.bar .b-neu{background:var(--faint)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* checklist execution */
.qsec{scroll-margin-top:80px}
.qsec>h2{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.q{border-top:1px solid var(--line-soft);padding:var(--s4) var(--s5);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:var(--s5);scroll-margin-top:80px}
.q:first-child{border-top:none}
.q.done{background:color-mix(in srgb,var(--ok-bg) 25%,var(--surface))}
.q.exc{background:color-mix(in srgb,var(--err-bg) 35%,var(--surface))}
.q.pend{background:color-mix(in srgb,var(--warn-bg) 40%,var(--surface))}
.q-text{white-space:pre-line;overflow-wrap:anywhere;font-size:14px;line-height:21px}
.q-ref{font-weight:600;margin-right:6px}
.q-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.q-guid{margin-top:var(--s2);font-size:12px;color:var(--muted);white-space:pre-line}
.q form{display:flex;flex-direction:column;gap:var(--s2)}
.rgroup{display:flex;flex-wrap:wrap;gap:4px}
.rgroup label{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:12px;cursor:pointer;background:var(--surface)}
.rgroup input{position:absolute;opacity:0;pointer-events:none}
.rgroup label:has(input:checked){border-color:var(--brand);background:var(--brand-tint);color:var(--brand);font-weight:600}
.rgroup label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.q textarea{min-height:56px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r);font-size:13px;resize:vertical;background:var(--surface);width:100%}
.q select{min-height:32px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font-size:13px;padding:0 6px;width:100%}
.q .lbl{font-size:12px;color:var(--muted);font-weight:500}
.q .ro{font-size:13px;white-space:pre-line}
.secnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto}
.secnav a{display:flex;justify-content:space-between;gap:var(--s2);padding:6px var(--s3);border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-size:13px}
.secnav a:hover{background:var(--surface-2)}
.secnav a[aria-current="true"]{background:var(--brand-tint);color:var(--brand);font-weight:500}
.secnav .c{font-size:12px;color:var(--faint);white-space:nowrap}
.layout-2{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s5);align-items:start}
@media (max-width:1100px){.layout-2{grid-template-columns:1fr}.secnav{position:static;max-height:none}.q{grid-template-columns:1fr}}

/* key-value and forms */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.formgrid .full{grid-column:1/-1}
.field input[type=file]{padding:6px}
.check{display:inline-flex;align-items:center;gap:var(--s2);font-size:14px}
.check input{accent-color:var(--brand);width:16px;height:16px}
.err-msg{color:var(--err);font-size:12px}
.inline-form{display:inline-flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
details.more>summary{cursor:pointer;color:var(--brand);font-size:13px;font-weight:500;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{margin-bottom:var(--s3)}
.one-time{border:1px solid var(--warn);background:var(--warn-bg);color:var(--ink);padding:var(--s3) var(--s4);border-radius:var(--r);font-size:14px}
.one-time code{font-size:15px;user-select:all;background:var(--surface);padding:2px 6px;border-radius:4px}

/* document library */
.lib-folder,.lib-name,.lib-up{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.lib-folder svg,.lib-name svg,.lib-up svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lib-folder svg{color:#C98A00}
.lib-name svg{color:var(--muted)}
.lib-folder:hover span,.lib-name:hover span{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.lib-folder span{font-weight:500}
.lib-up{color:var(--muted);font-size:13px}
.lib-up svg{transform:rotate(90deg)}
tr.lib-file:hover td{background:color-mix(in srgb,var(--surface-2) 70%,var(--surface))}
.lib-peek{position:fixed;z-index:80;width:min(520px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 24px));display:flex;flex-direction:column;gap:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:var(--s3) var(--s4);overflow:hidden}
.lib-peek-h{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line-soft);padding-bottom:var(--s2)}
.lib-peek-h b{font-size:13px;overflow-wrap:anywhere}
.lib-peek-h span,.lib-peek-f{font-size:12px;color:var(--muted)}
.lib-peek-frame{width:100%;height:400px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.lib-peek-img{max-width:100%;max-height:400px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r);align-self:flex-start}
.lib-peek-text{margin:0;max-height:400px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/18px var(--f-ui);color:var(--ink-2);background:var(--surface-2);border-radius:var(--r);padding:var(--s2) var(--s3)}
.lib-peek-table{max-height:400px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.lib-peek-table table{width:100%;font-size:12px}
.lib-peek-table td{padding:3px 6px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:12px;line-height:16px}
.lib-peek-table td:first-child{padding-left:6px}
.lib-peek-loading{font-size:12px;color:var(--muted)}
.lib-view-frame{width:100%;height:72vh;border:1px solid var(--line);border-radius:var(--r);background:#fff}

/* confirmation dialog (replaces native confirm) */
.cdlg{position:fixed;inset:0;background:rgba(30,14,21,.38);display:flex;align-items:center;justify-content:center;z-index:95;padding:var(--s4)}
.cdlg>div{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);width:min(460px,100%);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.cdlg h2{font-family:var(--f-head);font-size:18px}

/* print and PDF */
@media print{
  .side,.top,.no-print,.btns,.toasts,form.inline-form{display:none!important}
  .app,.app.collapsed{display:block}
  .canvas{padding:0;max-width:none}
  .card{border:none}
  body{background:#fff}
  a{color:inherit;text-decoration:none}
  table{font-size:11px}
  th{position:static}
}

/* content added by the developer (standard wording, defaults) and document drafts */
.pill.dev{background:#FDECEC;color:#B42318}
.pill.dev::before{border-radius:2px}
.doc-sec{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2);background:var(--surface)}
.doc-sec.developer{border-left:3px solid #B42318}
.doc-sec.edited{border-left:3px solid #C98A00}
.doc-sec.practice{border-left:3px solid var(--ok)}
.doc-sec .doc-sec-h{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.doc-sec .doc-sec-h input{flex:1 1 280px}
.doc-sec textarea{min-height:140px;font-family:inherit}
.doc-ph{background:#FFF2A8;color:#4A3B00;border-radius:3px;padding:0 2px;font-weight:600}
.doc-read{white-space:pre-line;line-height:1.55}
.doc-ph-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill.dev{background:#4A1B1B;color:#F6B4AE}}
:root[data-theme="dark"] .pill.dev{background:#4A1B1B;color:#F6B4AE}
/* report hover preview */
.rep-peek{display:flex;flex-direction:column;gap:var(--s3);overflow:auto;min-height:0}
.rep-peek-sec{display:flex;flex-direction:column;gap:6px}
.rep-peek-sh{display:flex;gap:var(--s2);align-items:center;justify-content:space-between;font-size:13px}
.rep-peek-note{margin:0;font-size:12px;line-height:17px;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r);padding:6px 8px}
.rep-peek .lib-peek-table{max-height:none}.rep-peek-kv{display:grid;grid-template-columns:auto 1fr;gap:3px var(--s3);font-size:12px;line-height:17px}
.rep-peek-kv span{color:var(--muted)}.rep-peek-kv b{font-weight:500;overflow-wrap:anywhere}
.rep-peek-fields{display:flex;flex-wrap:wrap;gap:4px}
.rep-peek-fields span{font-size:12px;line-height:18px;padding:0 7px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.rep-peek-fields span.req{border-color:var(--line-strong);color:var(--ink)}
.rep-peek-fields i{font-style:normal;color:var(--err);margin-left:1px}
.rep-peek .lib-peek-table td.num{text-align:right;white-space:nowrap;color:var(--muted)}
/* dashboard: five equal measure cards, chart grid, horizontal bars, scoring table */
.dgrid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s2)}
@media (max-width:1280px){.dgrid5{grid-template-columns:repeat(6,minmax(0,1fr))}.dgrid5>*{grid-column:span 2}.dgrid5>*:nth-child(n+4){grid-column:span 3}}
@media (max-width:860px){.dgrid5{grid-template-columns:repeat(2,minmax(0,1fr))}.dgrid5>*,.dgrid5>*:nth-child(n+4){grid-column:span 1}.dgrid5>*:last-child{grid-column:1/-1}}
@media (max-width:520px){.dgrid5{grid-template-columns:1fr}.dgrid5>*,.dgrid5>*:last-child{grid-column:auto}}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);display:grid;grid-template-rows:auto auto auto 1fr;gap:var(--s2);text-decoration:none;color:inherit;min-width:0}
a.dcard:hover{border-color:var(--line-strong);box-shadow:0 6px 16px -12px rgba(0,0,0,.35)}
.dcard .l{font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--muted)}
.dcard .v{font-family:var(--f-head);font-size:28px;line-height:34px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dcard .v small{font-family:var(--f-ui);font-size:12px;font-weight:400;color:var(--muted)}
.dcard .m{font-size:12px;line-height:17px;color:var(--muted);align-self:end}
.dnote{margin:0 0 var(--s5);font-size:12px;color:var(--muted)}
.dcharts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-bottom:var(--s5)}
@media (max-width:980px){.dcharts{grid-template-columns:1fr}}
.dsplit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:620px){.dsplit{grid-template-columns:1fr}}
.dmini{margin:0 0 var(--s2);font-size:12px;font-weight:600;color:var(--muted);text-transform:none}
.hb-track{height:8px;border-radius:4px;background:var(--line-soft);display:flex;gap:2px;overflow:hidden;min-width:40px}
.hb-track.lg{height:12px}
.hb-track i{display:block;height:100%;min-width:3px}
.hb-track i:last-child{border-radius:0 4px 4px 0}
.hb-row{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr) 52px;gap:var(--s3);align-items:center;padding:6px 0}
.hb-row.sm{grid-template-columns:minmax(90px,42%) minmax(0,1fr) 28px;padding:4px 0}
.hb-label{font-size:13px;line-height:17px;color:var(--ink-2);overflow-wrap:anywhere}
a.hb-label{text-decoration:none}a.hb-label:hover{text-decoration:underline}
.hb-val{font-size:12px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:4px var(--s3);margin-bottom:var(--s2);font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.s-yes{background:var(--ok)}.s-na{background:#B9B3BC}.s-partial{background:#C98A00}.s-pending{background:var(--info)}.s-no{background:var(--err)}
.s-nt{background:repeating-linear-gradient(135deg,#7D7781 0 2px,#B9B3BC 2px 5px)}.s-blank{background:var(--line-soft);border:1px solid var(--line)}
.s-brand{background:var(--brand)}
.score-t td{vertical-align:middle}
.score-t td .hb-track{max-width:160px}
.score-t .pill b{font-weight:700}
.score-how{margin:var(--s2) 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}.hb-track i[style^="width:0%"]{display:none}

/* measure cards: one calm accent each (navy, teal, plum, bronze, burgundy); tint + top rule, text stays in ink tokens */
.dcard{--tc:var(--brand);--tb:var(--surface);position:relative;overflow:hidden;background:var(--tb);border-color:color-mix(in srgb,var(--tc) 18%,var(--line))}
.dcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tc)}
.dcard .l{color:var(--tc)}
.dcard .hb-track{background:color-mix(in srgb,var(--tc) 12%,transparent)}
.dcard:not(.t1) .hb-track i.s-yes{background:var(--tc)}
a.dcard:hover{border-color:color-mix(in srgb,var(--tc) 45%,var(--line));box-shadow:0 8px 18px -12px color-mix(in srgb,var(--tc) 60%,transparent)}
.dcard.t1{--tc:#1F4E79;--tb:#F3F7FB}
.dcard.t2{--tc:#0E6B66;--tb:#F1F8F7}
.dcard.t3{--tc:#5A3F8C;--tb:#F6F3FA}
.dcard.t4{--tc:#8A5A12;--tb:#FBF7EF}
.dcard.t5{--tc:#790D32;--tb:#FBF2F5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dcard.t1{--tc:#8DB6E0;--tb:#18212B}:root:not([data-theme="light"]) .dcard.t2{--tc:#74C7BF;--tb:#162422}:root:not([data-theme="light"]) .dcard.t3{--tc:#B9A3E3;--tb:#1F1A29}:root:not([data-theme="light"]) .dcard.t4{--tc:#E0B566;--tb:#251F15}:root:not([data-theme="light"]) .dcard.t5{--tc:#E58BA8;--tb:#2A1820}}
:root[data-theme="dark"] .dcard.t1{--tc:#8DB6E0;--tb:#18212B}:root[data-theme="dark"] .dcard.t2{--tc:#74C7BF;--tb:#162422}:root[data-theme="dark"] .dcard.t3{--tc:#B9A3E3;--tb:#1F1A29}:root[data-theme="dark"] .dcard.t4{--tc:#E0B566;--tb:#251F15}:root[data-theme="dark"] .dcard.t5{--tc:#E58BA8;--tb:#2A1820}
/* dashboard chart cards: accent rule + tinted header; bars coloured by meaning (each row is labelled, so colour is never the only cue) */
.dchart{--tc:var(--brand);position:relative;overflow:hidden}
.dchart::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tc)}
.dchart>.card-h{background:color-mix(in srgb,var(--tc) 6%,var(--surface))}
.dchart>.card-h h2{display:flex;align-items:center;gap:8px}
.dchart>.card-h h2::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--tc);flex:none}
.dchart.c1{--tc:#1F4E79}.dchart.c2{--tc:#9F1D35}.dchart.c3{--tc:#5A3F8C}.dchart.c4{--tc:#0E6B66}
.dchart .hb-track{background:color-mix(in srgb,var(--tc) 9%,var(--line-soft))}
.dchart .hb-track i{border-radius:0 4px 4px 0}
.dchart .hb-row .hb-val{font-weight:600;color:var(--ink)}
/* severity: ordinal warm ramp */
.sev-low{background:#4F8A6E}.sev-medium{background:#C98A00}.sev-high{background:#D9622B}.sev-critical{background:#B42318}
/* finding type */
.ft-non_compliance{background:#9F1D35}.ft-control_weakness{background:#C27C0E}.ft-improvement{background:#1F6F8B}.ft-observation{background:#6B7A8F}
/* review workflow */
.rs-draft{background:#9AA3AE}.rs-in_progress{background:#2F6DB5}.rs-submitted{background:#6A4FB3}.rs-returned{background:#C98A00}.rs-approved{background:#2E7D4F}
/* evidence status */
.es-draft{background:#9AA3AE}.es-received{background:#2F6DB5}.es-reviewed{background:#0E8A83}.es-approved{background:#2E7D4F}.es-rejected{background:#B42318}.es-superseded{background:#7A6E8A}.es-archived{background:#B7B0A8}
/* row label carries a matching swatch */
.dchart .hb-row .hb-label{display:flex;align-items:center;gap:8px}
.dchart .hb-row .hb-label .sw{width:8px;height:8px;border-radius:2px;flex:none}.score-t .hb-track i.s-yes{background:#2E7D4F}
.dchart .score-t td .hb-track{background:color-mix(in srgb,var(--tc) 9%,var(--line-soft))}

/* personal appearance: tinted cards follow the chosen background (light and dark) */
:root[data-cards="tinted"]{--surface:color-mix(in srgb,var(--bg) 45%,#FFFFFF);--surface-2:color-mix(in srgb,var(--bg) 70%,#FFFFFF)}
@media (prefers-color-scheme:dark){:root[data-cards="tinted"]:not([data-theme="light"]){--surface:color-mix(in srgb,var(--bg) 35%,#201D22);--surface-2:color-mix(in srgb,var(--bg) 25%,#27242A)}}
:root[data-cards="tinted"][data-theme="dark"]{--surface:color-mix(in srgb,var(--bg) 35%,#201D22);--surface-2:color-mix(in srgb,var(--bg) 25%,#27242A)}
.look-h{font-size:13px;font-weight:600;color:var(--ink-2)}
.look-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s3)}
.look-sw{display:flex;flex-direction:column;gap:6px;cursor:pointer;position:relative}
.look-sw>input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.look-chip{position:relative;height:56px;border-radius:var(--r);border:1px solid var(--line-strong);overflow:hidden;display:block}
.look-chip i{position:absolute;right:0;bottom:0;width:34%;height:42%;border-top-left-radius:var(--r);border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong)}
.look-sw input[type=radio]:checked+.look-chip{outline:2px solid var(--brand);outline-offset:2px}
.look-sw input[type=radio]:focus-visible+.look-chip{outline:2px solid var(--focus);outline-offset:3px}
.look-name{font-size:12px;color:var(--ink-2)}
.look-custom{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--surface-2) 0 6px,var(--surface) 6px 12px)}
.look-custom input[type=color]{width:70%;height:34px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0;background:none;cursor:pointer}
/* sign-in greeting (dashboard) — a soft time-of-day band */
.greet{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--r-lg);margin-bottom:var(--s5);border:1px solid transparent;position:relative;animation:greetIn .5s ease-out both}
.greet-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.65)}
.greet-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.greet-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.greet-t b{font-family:var(--f-head);font-size:20px;line-height:26px;font-weight:700}
.greet-t span{font-size:14px;line-height:20px}
.greet-x{margin-left:auto;align-self:flex-start;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.55;padding:2px 6px;border-radius:var(--r-sm)}
.greet-x:hover,.greet-x:focus-visible{opacity:1;background:rgba(255,255,255,.4)}
.greet-morning{background:linear-gradient(110deg,#FFF3DC 0%,#FDE6D3 55%,#FBE3E6 100%);border-color:#F3D7B4;color:#6B3F06}
.greet-morning .greet-ic{color:#D98A0B}
.greet-afternoon{background:linear-gradient(110deg,#E6F1FB 0%,#E9F5F1 100%);border-color:#CFE0EE;color:#1E3F5E}
.greet-afternoon .greet-ic{color:#2F6DB5}
.greet-evening{background:linear-gradient(110deg,#FCE8DF 0%,#F6E1EA 55%,#ECE2F5 100%);border-color:#EBCFD6;color:#5A2140}
.greet-evening .greet-ic{color:#C2502E}
.greet-night{background:linear-gradient(110deg,#1F2445 0%,#2C2552 60%,#3A2550 100%);border-color:#2E2A55;color:#ECE8FA}
.greet-night .greet-ic{background:rgba(255,255,255,.1);color:#F6D47A}
.greet-night .greet-x:hover{background:rgba(255,255,255,.12)}
@keyframes greetIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.greet{animation:none}}
.greet[hidden]{display:none}
/* numbered "how it works" steps */
.steps{list-style:none;counter-reset:st;margin:0;padding:var(--s3) var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.steps li{counter-increment:st;display:grid;grid-template-columns:26px 1fr;column-gap:var(--s3);row-gap:2px}
.steps li::before{content:counter(st);grid-row:1 / span 2;width:24px;height:24px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-weight:700;font-size:12px;display:grid;place-items:center}
.steps b{font-size:13px;color:var(--ink)}
.steps span{font-size:12px;line-height:17px;color:var(--muted)}
#add-action:target{outline:2px solid var(--brand);outline-offset:-2px;border-radius:0 0 var(--r-lg) var(--r-lg)}