/* Tangible Communications client portal — same tokens as the marketing site.
   Order: tokens, reset, type, controls, surfaces, layout (mast, rail, pane, band), sections, media. */

/* ===== tokens ===== */
:root{
  --lime:#9BEB58; --live:#3FBB63; --deep:#1E7F5C; --forest:#0E5040;
  --ink:#201E1D; --paper:#F8F7F7; --ground:#F3F2F2; --white:#FFFFFF;
  --text:#201E1D; --text-2:#615C58; --text-3:#67615D; --line:#DEDCD9; --line-2:#C8C4C0; --line-3:#948E89;
  --warn:#B8692E; --warn-ink:#8F4E1E; --warn-bg:#F7EADF;
  --sh-md:0 2px 4px rgba(32,30,29,.05),0 18px 44px rgba(32,30,29,.10);
  --sh-lg:0 4px 10px rgba(32,30,29,.06),0 30px 70px rgba(32,30,29,.13);
  --arch:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,5vw,64px); --maxw:1400px;
}

/* ===== reset ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--arch);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
input,textarea,select,button{font:inherit;color:inherit}
/* focus: the deep green holds 3:1 or better on every portal surface; live green does not */
:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);position:relative;width:100%}
body.admin .wrap{max-width:1640px}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}
body:has(#actbar) main{z-index:2}
main{flex:1;padding:120px 0 80px}
/* visually hidden, still focusable (file inputs inside their label) */
.vh,.vh.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tb:has(.vh:focus-visible){outline:2px solid var(--live);outline-offset:3px}
/* small utilities used instead of inline styles */
.m0{margin:0}
.mt-s{margin-top:4px}
.push{margin-left:auto}
.span-all{grid-column:1/-1}
.w-md{width:min(640px,100%)}
.w-lg{width:min(760px,100%)}
.warn{color:var(--warn-ink)}

/* ===== type scale: label 11 · meta 13 · ui 14 · body 15.5 · title 16/18 · display clamp(28,3.4vw,40) ===== */
h1{font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance}
h2{font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
h3{font-weight:600;font-size:18px;letter-spacing:-.015em;margin:0}
.sub{font-size:16px;color:var(--text-2);max-width:58ch;margin:0}
.muted{color:var(--text-3)}
.small{font-size:13px}
.note{font-size:13px;color:var(--text-3)}
.note.err{color:var(--warn-ink)}
.lbl{font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lbl.grp{display:block;margin:0 0 12px;color:var(--text-3)}
.eyebrow{color:var(--text-3);margin:0 0 16px;display:inline-flex;align-items:center;gap:12px}
.eyebrow a{text-decoration:none}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--deep);cursor:pointer}
.lnk:hover{text-decoration:underline}

/* ===== buttons: one family, two heights ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:500;font-size:13px;letter-spacing:.01em;line-height:1.2;min-height:36px;padding:0 16px;border-radius:6px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:default}
.btn-a{background:var(--forest);border-color:var(--forest);color:#fff}
.btn-a:hover{background:var(--deep);border-color:var(--deep)}
.btn-b{border-color:var(--line-2);color:var(--text);background:transparent}
.btn-b:hover{border-color:var(--deep);color:var(--deep)}
.btn-b.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.btn-c{border-color:rgba(143,78,30,.4);color:var(--warn-ink);background:transparent}
.btn-c:hover{border-color:var(--warn-ink);background:var(--warn-bg)}
.btn-t{border-color:transparent;background:transparent;color:var(--deep);padding-inline:6px}
.btn-t:hover{color:var(--forest)}
.btn-sm{min-height:28px;padding:0 12px;font-size:13px}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
label.btn{cursor:pointer}
.prov{width:100%;gap:10px}
.prov svg{width:18px;height:18px;stroke:none}
.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acts.end{justify-content:flex-end}
/* glyph buttons (×) */
.x{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:18px;line-height:1;padding:0}
.x:hover{color:var(--warn-ink)}

/* ===== controls: one standard size, one compact size, one focus ===== */
.f{display:flex;flex-direction:column;gap:8px}
.f.form{gap:12px}
.f .lbl{color:var(--text-3)}
/* input borders are --line-3 (3:1 on white); hairlines stay --line */
.f input,.f textarea,.f select,.ibx-send textarea,.ibx-send input,.mb-compose input,.invite input,.cpc textarea,.pinpop textarea,.cedit textarea{font-size:15px;line-height:1.4;padding:9px 12px;border:1px solid var(--line-3);border-radius:6px;background:var(--white);width:100%;transition:border-color .15s,box-shadow .15s}
.f textarea,.ibx-send textarea,.cpc textarea,.pinpop textarea,.cedit textarea{resize:vertical}
.zin,.fd-add input,.fd-add select,.tbl select,.arow .aact select{font-size:13px;padding:6px 9px;border:1px solid var(--line-3);border-radius:6px;background:var(--white);transition:border-color .15s,box-shadow .15s}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus-visible{outline:none;border-color:var(--live);box-shadow:0 0 0 2px rgba(63,187,99,.22)}
.f input.bad,.f textarea.bad{border-color:var(--warn)}
h1[tabindex]:focus{outline:none}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-2);cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--forest);width:18px;height:18px;flex:none}
.chk.bad span{color:var(--warn-ink)}
.chk-inline{display:flex;gap:6px;align-items:center;cursor:pointer}
.alert{padding:10px 14px;border-radius:6px;background:rgba(63,187,99,.10);color:var(--forest);font-size:14px}
.alert.err{background:var(--warn-bg);color:var(--warn-ink)}
.alert.toast{position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:80;box-shadow:var(--sh-md);max-width:min(560px,calc(100% - 32px));animation:fade .25s ease}
.login .alert{margin-top:16px}

/* ===== surfaces ===== */
.card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:24px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.grid:has(> a.icard){grid-template-columns:1fr;gap:12px}
.ichip{width:40px;height:40px;border-radius:10px;flex:none;background:linear-gradient(135deg,rgba(30,127,92,.10),rgba(155,235,88,.16));box-shadow:inset 0 0 0 1px rgba(30,127,92,.15);display:grid;place-items:center;color:var(--forest)}
.ichip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rowchip{width:36px;height:36px;border-radius:10px;flex:none;background:linear-gradient(135deg,rgba(30,127,92,.08),rgba(155,235,88,.14));display:grid;place-items:center;color:var(--forest)}
.rowchip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* one empty state */
.empty,.fin-empty{display:grid;justify-items:center;gap:12px;padding:52px 24px 56px;text-align:center;color:var(--text-2);font-size:15.5px;margin:0}
.empty p,.fin-empty p{margin:0;max-width:40ch}
.fin-empty .ichip{margin:0 0 4px}
.fin-empty .small{color:var(--text-3)}
.ibx-list .empty{padding:24px 16px}

/* ===== pills and chips: one component ===== */
.pill,.chip{display:inline-flex;align-items:center;font-weight:500;font-size:11px;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap}
.pill{gap:6px}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.in_review{background:rgba(63,187,99,.14);color:var(--forest)}
.pill.approved{background:rgba(14,80,64,.10);color:var(--forest)}
.pill.delivered{background:rgba(32,30,29,.08);color:var(--ink)}
.pill.changes_requested{background:var(--warn-bg);color:var(--warn-ink)}
.pill.draft,.pill.replaced{background:rgba(32,30,29,.05);color:var(--text-3)}
.chip{color:var(--text-2);background:rgba(32,30,29,.05)}
/* file tokens are not status: sentence case, bordered */
.ibx-files .chip,.ibx-atts .chip,.matts .chip{text-transform:none;letter-spacing:0;font-size:13px;padding:4px 9px;cursor:default;border:1px solid var(--line-2);background:var(--white);color:var(--text)}
.ibx-atts .chip{cursor:pointer}
.ibx-files .chip .x{font-size:15px;padding:0 0 0 4px}
.ibx-files,.ibx-atts,.matts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ===== mast ===== */
.lock{display:flex;align-items:center;gap:13px;text-decoration:none}
.lock svg{display:block;flex:none}
.wm{display:flex;flex-direction:column;line-height:1}
.wm .t1{font-weight:700;font-size:14.5px;letter-spacing:.02em}
.wm .t2{font-weight:500;font-size:9.4px;letter-spacing:.22em;color:var(--text-3);margin-top:4px}
.mast{position:fixed;inset:0 0 auto;z-index:60;background:rgba(243,242,242,.85);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .25s}
.mast.stuck{border-bottom-color:var(--line)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;min-width:0}
.clogo{display:block;text-decoration:none}
.clogo img{display:block;height:40px;width:auto;max-width:220px;object-fit:contain}
.clogo.cname{font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--text)}
/* header, top right: utility icon, thin divider, round mark, name, caret. No pill. */
.user{position:relative;display:flex;align-items:center;gap:2px}
.hbtn{position:relative;width:34px;height:34px;border:0;background:none;border-radius:6px;display:grid;place-items:center;color:var(--text-2);cursor:pointer;padding:0;transition:background .15s,color .15s}
.hbtn:hover,.hbtn[aria-expanded="true"]{background:var(--ground);color:var(--text)}
.hbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--forest);border:2px solid var(--white);box-sizing:content-box}
.hsep{width:1px;height:22px;background:var(--line-2);margin:0 10px 0 8px}
.user .who{display:inline-flex;align-items:center;gap:9px;border:0;background:none;padding:4px 6px 4px 4px;border-radius:999px;cursor:pointer;color:var(--text);transition:background .15s}
.user .who:hover,.user .who[aria-expanded="true"]{background:var(--ground)}
.user .who img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:left center;background:var(--white);border:1px solid var(--line);padding:2px;display:block}
.user .who .ini{width:28px;height:28px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:500;font-size:13px}
.user .who .nm{font-weight:500;font-size:14px;line-height:1}
.user .who svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--text-3)}
.menu{position:absolute;right:0;top:44px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-md);min-width:230px;padding:6px;display:none;z-index:70}
.menu.open{display:block}
.menu .em{font-size:13px;color:var(--text-3);padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;word-break:break-all}
.menu .em b{color:var(--text);font-weight:500}
.menu .em .ws{color:var(--text-3)}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:6px;font-weight:500;font-size:14px;color:var(--text);background:none;border:0;text-decoration:none;cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--ground)}
.nmenu{min-width:280px}
.nmenu a b{display:block;font-weight:500}
.nmenu a span{display:block;font-weight:400;font-size:13px;color:var(--text-3);margin-top:2px}

/* ===== workspace: rail + pane ===== */
.portal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
body.admin .portal{grid-template-columns:200px minmax(0,1fr);gap:32px}
.rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px}
.rail-h{padding:4px 12px 12px;font-size:13px;font-weight:500;color:var(--text-3)}
.rail-g{padding:16px 12px 8px;color:var(--text-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.rail-g:first-of-type{padding-top:4px}
.rail a{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--text-2);font-weight:500;font-size:14px;transition:background .15s,color .15s}
.rail a:hover{color:var(--text)}
.rail a.on{background:var(--white);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.rail .n{font-size:11px;line-height:1;color:var(--text-3);background:rgba(32,30,29,.05);border-radius:4px;padding:4px 6px;font-variant-numeric:tabular-nums;font-weight:500}
.rail .n.live,.rail a.on .n{background:rgba(63,187,99,.14);color:var(--forest)}
.pane{min-width:0;display:flex;flex-direction:column;gap:24px;padding-bottom:40px;container-type:inline-size}
body:has(.asbar) .pane{padding-bottom:120px}
@media(max-width:820px){body:has(.asbar) .pane{padding-bottom:64px}}
/* page header: grey kicker, noun heading, one quiet line */
.band{padding:8px 0 4px;position:relative}
.band-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.band-row>div{min-width:0}
.band-k{color:var(--text-3);margin:0 0 12px;display:inline-flex;align-items:center;gap:12px}
.band-k::before{content:"";width:26px;height:2px;background:linear-gradient(45deg,var(--live),var(--lime));display:block}
.band-k a{text-decoration:none}.band-k a:hover{color:var(--deep)}
/* the breadcrumb is the way back from a review: a 44px target without moving the line */
.band-k a{display:inline-flex;align-items:center;min-height:44px;margin-block:-13px}
.band-h{margin:0;color:var(--text)}
.band-sub{margin:12px 0 0;color:var(--text-2);font-size:15.5px}
.band .cp-head i,.on .cp-head i{background:linear-gradient(90deg,var(--lime),rgba(155,235,88,0))}
.sect{margin:24px 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sect h3{margin:0}
.set,.sect,#addD,#addI,#addC,#addM{scroll-margin-top:100px}

/* ===== deliverable cards: icon tile, title, meta line, progress with stage and status, court line ===== */
.dcard{text-decoration:none;color:inherit;transition:border-color .15s}
.dcard:hover{border-color:var(--line-2)}

.dic{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:linear-gradient(135deg,rgba(30,127,92,.10),rgba(155,235,88,.16));box-shadow:inset 0 0 0 1px rgba(30,127,92,.15);color:var(--forest)}
.dic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dic-report{background:linear-gradient(135deg,rgba(32,30,29,.05),rgba(32,30,29,.09));box-shadow:inset 0 0 0 1px rgba(32,30,29,.10);color:var(--text-2)}
.dic-sitemap{background:linear-gradient(135deg,rgba(30,127,92,.12),rgba(30,127,92,.06));box-shadow:inset 0 0 0 1px rgba(30,127,92,.18)}
.dic-proposal{background:linear-gradient(135deg,rgba(14,80,64,.12),rgba(155,235,88,.10));box-shadow:inset 0 0 0 1px rgba(14,80,64,.16)}
.ilist{display:grid;gap:12px;margin-bottom:16px}
.icard{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-areas:"i main" "act act";gap:12px 16px;align-items:start}
.icard .ichip,.icard .dic{grid-area:i}
.icard .imain{grid-area:main;min-width:0}
.icard .imain .t{font-weight:600;font-size:18px;letter-spacing:-.015em;line-height:1.25}
.icard .imain>.small{margin-top:4px}
.icard .imain .sum{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.iprog{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.iprog .bar{flex:1;min-width:120px;height:4px;background:var(--line);border-radius:999px;overflow:hidden}
.iprog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--forest),var(--live));transition:width .25s}
.iprog .pill{margin-left:auto}
.icard .iact{grid-area:act;display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:760px){.icard{grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"i main act"}.icard .iact{justify-content:flex-end;align-self:center}}
a.icard.dcard{grid-template-columns:46px minmax(0,1fr);grid-template-areas:"i main";padding:24px}
.line{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.line a{color:var(--deep)}
.court{font-weight:600;color:var(--text);margin-right:2px}.court-you,.court-client{color:var(--deep)}.court-tangible{color:var(--text-2)}
.stage-changes_requested .iprog .bar i{background:var(--warn)}
.stage-replaced .iprog .bar i{background:var(--line-2)}
.stage-delivered .iprog .bar i,.stage-approved .iprog .bar i{background:var(--forest)}
/* the viewer's stage block is the same bar and line, stacked */
.stage{display:grid;gap:8px}
.stage .iprog{margin-top:0}
.stage .line{margin:0}
.vhead .stage{max-width:520px;margin-top:12px}
.irow{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.irow:first-of-type{border-top:0;padding-top:0}
.irow .ival{font-size:15.5px;line-height:1.5}
.irow .small.muted{font-size:14px;color:var(--text-2)}
/* form answers: one card, the groups on hairlines */
.igrp+.igrp{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
@media(min-width:760px){.irow{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}}

/* ===== billing rows (quotes, invoices) ===== */
.zlist{display:grid;gap:12px}
.zrow{display:grid;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:"i main amt" "i meta meta" "i act act";gap:8px 16px;align-items:center;padding:16px 24px}
.zrow .ichip{grid-area:i;align-self:start}
.zrow .zmain{grid-area:main;min-width:0}
.zrow .zmain .t{font-weight:600;font-size:18px;letter-spacing:-.015em;line-height:1.25}
.zrow .zmain .meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--text-3);font-size:13px;margin-top:4px}
.zrow .zamt{grid-area:amt;text-align:right;font-variant-numeric:tabular-nums;font-size:18px;white-space:nowrap}
.zrow .zstat{grid-area:meta}
.zrow .zact{grid-area:act;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(min-width:760px){.zrow{grid-template-columns:46px minmax(0,1fr) auto auto auto;grid-template-areas:"i main stat amt act"}.zrow .zstat{grid-area:stat}}
.locked{display:inline-flex;align-items:center;gap:8px;color:var(--text-3);font-size:13px}
.locked svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== viewer ===== */
.vhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.vhead h1{margin-bottom:12px}
.vhead .sub{margin-top:12px}
.vmeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vactions{display:flex;gap:8px;flex-wrap:wrap}
.pnote{margin:16px 0 0;padding:12px 16px;border-left:3px solid var(--live);background:var(--white);border-radius:0 8px 8px 0;color:var(--text-2);font-size:15.5px;line-height:1.55;white-space:pre-wrap;max-width:64ch}
.pnote .lbl{display:block;color:var(--text-3);margin-bottom:6px}
body.admin .pnote,body.admin .fin-line{max-width:none}
.frame{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.frame .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--text-3)}
.frame .bar>span:nth-child(2){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame .bar a{color:var(--deep);text-decoration:none}
.frame .bar .dots{display:flex;gap:6px}.frame .bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.barx{display:flex;gap:12px;align-items:center;margin-left:auto}
.frame iframe{width:100%;height:min(78vh,900px);border:0;display:block;background:#fff}
.frame img{display:block;max-width:100%;margin:0 auto}
.frame .linkcard{padding:60px 24px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.frame .linkcard .thinking.center{padding:56px 20px}
.frame #preview{position:relative}
/* feedback: rows on hairlines inside the one card */
.thread{display:grid;gap:0}
.cmt{padding:16px 0;border-top:1px solid var(--line)}
.cmt:first-child{border-top:0;padding-top:0}
.cmt .who{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-3);margin-bottom:4px}
.cmt .who b{color:var(--text);font-weight:600;font-size:14px}
.cmt p{margin:0;white-space:pre-wrap;font-size:15.5px;line-height:1.55}
.cmt .pill{margin-bottom:8px}
.cmt .cp{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.cmt.flash{outline:2px solid var(--live);outline-offset:4px;border-radius:6px}
#cmtForm textarea{min-height:88px}
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(243,242,242,.88);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.actbar .wrap-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--gut);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
body:has(.actbar) .pane{padding-bottom:96px}
/* pins: point at a spot on the comp; the layer clips so marks never paint over the frame bar */
.pinlayer{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.pinlayer .pin,.pinlayer .pinpop{pointer-events:auto}
.pin{position:absolute;transform:translate(-50%,-100%);width:26px;height:26px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--forest);color:#fff;border:2px solid #fff;box-shadow:0 4px 12px rgba(14,80,64,.35);font:700 11px var(--arch);display:grid;place-items:center;cursor:pointer;padding:0}
.pin>*{rotate:45deg}
.pin.inline,.pin.ghost{position:static;transform:none;rotate:0;width:20px;height:20px;border-radius:50%;border:0;box-shadow:none;font-size:11px;margin-right:8px;display:inline-grid;vertical-align:middle;flex:none}
.pin.ghost{margin:0 0 8px}
/* a general note's number: the same circle, unfilled */
.pin.plain{background:none;color:var(--text-3);border:1px solid var(--line-2);cursor:default}
.pinpop{position:absolute;width:min(290px,calc(100% - 16px));background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-md);padding:12px;display:grid;gap:8px;z-index:4}
.pinpop-a{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.pinpop-a [data-micnote]{order:9;flex-basis:100%;margin:0}
.pinpop-a [data-micnote]:empty{display:none}

/* ===== dialogs (floating: shadow allowed) ===== */
.sign{position:fixed;inset:0;z-index:60;background:rgba(32,30,29,.42);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fade .25s ease;overflow:auto;overscroll-behavior:contain}
.sign-card{background:var(--white);border-radius:10px;padding:32px 32px 24px;width:min(560px,100%);box-shadow:var(--sh-lg);display:grid;gap:16px;animation:rise .35s ease;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;align-content:start;margin:0}
.sign-card.w-md{width:min(640px,100%)}.sign-card.w-lg{width:min(760px,100%)}
.sign-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sign-h .eyebrow{margin:0;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.sign-h .x{font-size:26px;padding:0 4px}
.sign-t{font-size:24px;letter-spacing:-.02em;margin:0}
.sign .f span{display:block;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.sig{height:64px;border-bottom:1px solid var(--line-2);display:flex;align-items:flex-end;padding:0 8px 8px;overflow:hidden}
.sig span{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-size:38px;color:var(--ink);white-space:nowrap;line-height:1}
.sign-a{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:4px}
.sign-a>.small{margin-right:auto}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
@media(max-width:600px){.sign-card{padding:24px 20px 20px}}
/* email preview inside the publish dialog */
.mailprev{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:8px}
.mp-sub{font-size:13px;color:var(--text-3)}
.mp-h{font-weight:700;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.mp-h em{font-style:normal;color:var(--forest)}
.mp-p{margin:0;font-size:15.5px;color:var(--text-2);line-height:1.55}
.mp-note{padding:10px 14px;border-left:3px solid var(--live);background:var(--white);color:var(--text-2);font-size:14px;white-space:pre-wrap;border-radius:0 6px 6px 0}
.mp-btns{display:flex;gap:8px;margin-top:4px}
.mp-btn{display:inline-block;font:500 13px/1.2 var(--arch);letter-spacing:.01em;padding:7px 13px;border-radius:6px;border:1px solid var(--forest)}
.mp-btn.a{background:var(--forest);color:#fff}.mp-btn.b{color:var(--forest)}
/* preview of a reply, in the portal and in the email */
.pv-tabs{display:flex;gap:6px;margin-bottom:12px}
.pv-tabs button{font-size:13px;font-weight:500;min-height:28px;padding:0 12px;border-radius:6px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);cursor:pointer}
.pv-tabs button.on{background:var(--white);border-color:var(--forest);color:var(--forest)}
.pv-portal{background:var(--paper);border-radius:10px;padding:16px}
.pv-portal .cmt{background:var(--white);border:0;border-radius:10px;padding:16px}
.pv-portal .who{display:flex;gap:10px;align-items:baseline;margin-bottom:6px;font-size:14px}.pv-portal .who b{font-weight:500}.pv-portal .who span{color:var(--text-3);font-size:13px}
.pv-portal p{margin:0;white-space:pre-wrap;font-size:15.5px;line-height:1.55}
.pv-portal .cp-form input,.pv-portal .cp-form button{pointer-events:none;opacity:.7}
.pv-hdr{display:grid;gap:4px;padding:12px 16px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--paper);font-size:13px;color:var(--text)}
.pv-hdr span{display:inline-block;width:62px;color:var(--text-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.pv-email{width:100%;height:60vh;border:1px solid var(--line);border-radius:10px;background:#fff}
#pvMail .pv-email{border-radius:0 0 10px 10px;height:56vh}

/* ===== login ===== */
.login{max-width:540px;margin:4vh auto 0}
.login .card{padding:40px}
.login h1{margin-bottom:12px}
.login .sub+form,.login .sub+.btn{margin-top:24px}
.login .f input{padding:12px 14px;font-size:16px}
.providers{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.or{display:flex;align-items:center;gap:12px;color:var(--text-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:16px 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:600px){.login .card{padding:24px}}

/* ===== inbox (shared by the client's Messages and the admin's Inbox) ===== */
.ibx{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.ibx{grid-template-columns:260px minmax(0,1fr);align-items:start}}
@media(min-width:1280px){.ibx{grid-template-columns:380px minmax(0,1fr)}}
.ibx-tabs{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ibx-tab{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 10px 12px;border:0;background:transparent;color:var(--text-3);text-decoration:none;font-size:14px;font-weight:500;line-height:1.2;margin-bottom:-1px;transition:color .15s;white-space:nowrap}
.ibx-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:linear-gradient(90deg,var(--live),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ibx-tab:hover,.ibx-tab.on{color:var(--text)}
.ibx-tab.on::after{transform:scaleX(1)}
.ibx-tab .n{font-size:11px;font-weight:500;line-height:1;padding:3px 5px;border-radius:4px;background:rgba(32,30,29,.06);color:var(--text-2);font-variant-numeric:tabular-nums}
.ibx-tab .n.live{background:rgba(63,187,99,.16);color:var(--forest)}
.ibx-tabs .sep{width:1px;height:16px;background:var(--line);margin:0 8px 2px}
.ibx-tabs .sep.push{margin-left:auto}
.mb-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mb-bar .small{margin-left:auto}
.mb-bar .zin{width:auto;color:var(--text-2)}
.mb-bar .chk-inline{font-size:13px}
/* conversation list: plain rows on hairlines; the open one sits on paper */
.ibx-list{display:grid;gap:0;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:6px;align-content:start}
.mb-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px;border-radius:6px;text-decoration:none;color:inherit;background:transparent;border:0;position:relative;transition:background .15s}
.mb-item+.mb-item::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--line)}
.mb-item:hover{background:rgba(32,30,29,.04)}
.mb-item.on{background:var(--paper)}
.mb-item.on::before,.mb-item.on+.mb-item::before{opacity:0}
.mb-item .dot{width:7px;height:7px;border-radius:50%;background:transparent;margin-top:7px}
.mb-item.unread .dot{background:var(--live);box-shadow:0 0 0 3px rgba(63,187,99,.16)}
.mb-item .t{min-width:0;display:grid;gap:2px}
.mb-item .t b{font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-item.unread .t b{font-weight:600;color:var(--text)}
.mb-item .t>span{font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-item .t .subj{color:var(--text-2);font-weight:500}
.mb-item .t .pill{font-size:11px;padding:2px 7px;vertical-align:middle}
.ibx-when{font-size:13px;color:var(--text-3);white-space:nowrap}
.dlist{display:grid;gap:8px}
/* reading pane */
.ibx-main{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:24px;min-width:0}
.ibx-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ibx-head>div{min-width:0}
.ibx-head b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-head .acts{margin-left:auto}
.ibx-back{display:none}
.ibx-ctx{font-size:13px;color:var(--text-3);margin-bottom:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ibx-ctx a{color:var(--deep)}
.ibx-thread{display:block;padding:0}
/* conversation rows: Tangible is marked and tinted; the client is plain. */
.cmsg{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.cmsg:first-child{border-top:0;padding-top:4px}
.cav{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:14px;margin-top:2px;flex:none}
.cav.cav-t{background:var(--white);border:1px solid var(--line)}
.cav svg{width:22px;height:22px;display:block}
.cav.cav-c{background:var(--white);border:1px solid var(--line);overflow:hidden}
.cav.cav-c img{width:100%;height:100%;object-fit:cover;object-position:left center;padding:3px;display:block}
.cbody{min-width:0}
.cfrom{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cfrom b{font-weight:600;font-size:15px}
.cfrom span{font-size:13px;color:var(--text-3)}
.cmsg.tang .cfrom b{color:var(--forest)}
.cpanel p{margin:0;white-space:pre-wrap;font-size:15.5px;line-height:1.55;word-break:break-word}
.cmsg.tang .cpanel{background:rgba(63,187,99,.07);border-left:3px solid var(--forest);border-radius:0 10px 10px 0;padding:16px}
.cpanel .ibx-atts{margin-top:12px}
.mb-earlier{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
.mb-earlier summary{cursor:pointer;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500;padding:6px 0;list-style:none}
.mb-earlier summary::-webkit-details-marker{display:none}
.mb-earlier summary::before{content:"+ ";color:var(--live)}
.mb-earlier[open] summary::before{content:"– "}
.mb-earlier .cpanel p,.mb-earlier .mb-body{font-size:14px}
.ro-note{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
/* composer: the field, files, a strip of identical tools, then the send line */
.ibx-send{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
body.wide .ibx-send{margin-top:24px;padding-top:24px}
body.wide .ibx-send.flush,.ibx-send.flush{margin-top:0;padding-top:0;border-top:0}
.ibx-send textarea{min-height:96px}
body.admin .ibx-send textarea{min-height:140px}
.ibx-send-a{display:grid;gap:12px}
.ibx-tools{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--paper);border-radius:6px;padding:4px}
.ibx-tools.one{grid-auto-columns:auto;justify-content:start}
.tb{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;border:0;border-radius:6px;background:transparent;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;padding:0 6px;white-space:nowrap;transition:background .15s,color .15s}
.tb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tb .cp-mk{width:auto;height:18px;stroke:none;fill:none}
.tb:hover{background:var(--white);color:var(--forest)}
.tb.busy{opacity:.5;cursor:progress}
.ibx-send-b{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.ibx-send-b .small{margin:0}
/* the client's reply field is pinned to the bottom of the screen */
body.wide .ibx-send.pinned{position:sticky;bottom:0;z-index:3;background:var(--white);margin:24px -24px -24px;padding:16px 24px;border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(32,30,29,.25)}
body.wide .ibx-send.pinned textarea{resize:none;overflow:auto}
body.wide:has(.asbar) .ibx-send.pinned{padding-bottom:72px}
/* mailbox thread (Microsoft 365): rows on hairlines, compose below */
.mb-stack{padding:0}
.mb-msg{padding:16px 0;border-top:1px solid var(--line)}
.mb-msg:first-child{border-top:0;padding-top:0}
.mb-msg .mb-from{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:14px}
.mb-msg .mb-from b{font-size:15px;font-weight:600}
.mb-msg .mb-from .small{margin-left:auto}
.mb-msg .mb-to{font-size:13px;color:var(--text-3);margin-top:2px}
.mb-body{margin-top:8px;font-size:15.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.mb-frame{width:100%;border:0;margin-top:8px;min-height:60px;background:#fff;border-radius:6px}
.mb-compose{display:grid;gap:12px}
.mb-compose .row{display:grid;gap:12px}
@media(min-width:720px){.mb-compose .row{grid-template-columns:1fr 1fr}}
.mb-setup{background:var(--paper);border-radius:10px;padding:16px;margin-bottom:16px}
.mb-setup ol{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.55}
.mb-setup p{margin:8px 0 0}
.mb-setup code{font-size:13px;background:var(--white);padding:1px 6px;border-radius:4px;border:1px solid var(--line)}

/* ===== admin: generic responsive rows (deliverables, clients, people, activity) ===== */
.alist{display:grid}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main side" "meta meta" "act act";gap:8px 16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.arow:first-child{border-top:0;padding-top:4px}
.arow .amain{grid-area:main;min-width:0;display:flex;gap:12px;align-items:center}
.arow .amain>div{min-width:0}
.arow .amain .t{font-weight:600;font-size:16px;letter-spacing:-.015em;line-height:1.3}
.arow .amain .t a{color:inherit;text-decoration:none}
.arow .amain .t a:hover{color:var(--deep)}
.arow .amain .s{color:var(--text-3);font-size:13px;margin-top:2px}
.arow .abody{margin:8px 0 0;color:var(--text-2);white-space:pre-wrap}
.arow .aside{grid-area:side;text-align:right;white-space:nowrap;font-size:13px;color:var(--text-3)}
.arow .ameta{grid-area:meta;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.arow .aact{grid-area:act;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.arow .aact select{color:var(--text-2)}
.arow .zin{width:170px;max-width:100%}
.replybox{grid-column:1/-1;gap:8px}
@media(min-width:760px){.arow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main meta" "act act";gap:8px 20px}.arow .aside{display:none}.arow .ameta{justify-content:flex-end;flex-wrap:nowrap}.arow .aact{justify-content:flex-start;padding-left:70px}}
@container (min-width:1180px){.arow{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;grid-template-areas:"main meta act"}.arow .ameta{justify-content:flex-start}.arow .aact{padding-left:0;justify-content:flex-end}}
.logo{width:56px;height:36px;display:grid;place-items:center;flex:none}
.logo img{max-width:56px;max-height:36px;object-fit:contain;display:block}
.ini{width:40px;height:40px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:600;color:var(--deep);flex:none;font-size:14px}
.logo .ini{width:36px;height:36px}
/* list grouped by client: a header row with the logo, then plain rows */
.cgroup{display:flex;align-items:center;gap:12px;padding:6px 0 12px;margin-top:8px}
.cgroup:first-child{margin-top:0}
.cgroup+.alist .arow:first-child{border-top:1px solid var(--line);padding-top:16px}
.cgroup .logo{width:40px;height:28px}.cgroup .logo img{max-width:40px;max-height:28px}
.cgroup .ini{width:28px;height:28px;font-size:12px}
.cgroup h3{font-size:16px;min-width:0}
.cgroup{flex-wrap:wrap}
.arow .amain .s{overflow-wrap:anywhere}
.cgroup .n{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.cgroup .btn-t{margin-left:auto}
.alist+.cgroup{margin-top:24px}
/* logo picker */
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:11px;color:var(--text-3);letter-spacing:.16em;text-transform:uppercase;min-width:110px}
.pick:hover{border-color:var(--deep)}
.pick img{height:40px;width:auto;max-width:140px;object-fit:contain;display:block}
#logoPick>div,#logoPick>p{margin:16px 0 0}
#logoPick .picks{margin-top:12px}

/* ===== tables and financials (admin) ===== */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.fin-line{margin:0 0 12px;font-size:14px;color:var(--text-3);max-width:70ch}.fin-line b{color:var(--text);font-variant-numeric:tabular-nums}
/* key figures: a quiet row of numerals, hairlines between, no boxes */
.kpis{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:2px 0 0}
.kpi{display:grid;gap:4px;padding:4px 24px 8px 0;margin-right:24px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0;margin-right:0;padding-right:0}
.kpi b{font-weight:600;font-size:24px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.kpi b small{font-weight:400;font-size:13px;letter-spacing:0;color:var(--text-3);margin-left:2px}
.kpi span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.kpi.floor b{color:var(--forest)}
.fin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.fin-head .fin-line{margin:0}
.fin-card{padding:4px 0 0}
.fin-scroll{overflow-x:auto}
.fin-tbl{width:100%;table-layout:auto}
.fin-tbl th{padding:12px 14px;white-space:nowrap}.fin-tbl th:first-child,.fin-tbl td:first-child{padding-left:24px}.fin-tbl th:last-child,.fin-tbl td:last-child{padding-right:24px}
.fin-tbl th:first-child{width:38%;min-width:220px}
.fin-tbl td{padding:14px;vertical-align:middle;font-size:14px}
.fin-tbl th.n,.fin-tbl td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-tbl td.n small{display:block;font-size:11px;color:var(--text-3);letter-spacing:.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.fin-tbl td.n i{font-style:normal;color:var(--text-3)}
.fin-tbl td.pos{color:var(--forest);font-weight:600}.fin-tbl td.neg{color:var(--warn-ink);font-weight:600}.fin-tbl td.muted{color:var(--text-3)}
.fin-tbl td.pt{min-width:0}
.fin-tbl td.pt b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}.fin-tbl td.pt span{display:block;font-size:13px;color:var(--text-3);margin-top:3px}
.fin-tbl td.pt .pwrap{display:flex;align-items:center;gap:10px;min-width:0}
.fin-tbl td.pt .pwrap>div{min-width:0}
.fin-car{width:16px;height:16px;flex:none;color:var(--text-3);display:grid;place-items:center;transition:transform .25s,color .15s}
.fin-car svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fin-tbl tr.prow.open .fin-car{transform:rotate(90deg);color:var(--forest)}
.fin-tbl td.act{text-align:right;white-space:nowrap}.fin-tbl td.act .btn{margin-left:6px}
.fin-tbl tr.prow{cursor:pointer;transition:background .15s}.fin-tbl tr.prow:hover td{background:rgba(32,30,29,.02)}.fin-tbl tr.prow.open td{background:var(--white);border-bottom-color:transparent}
.fin-tbl tr.prow:focus-visible{outline:2px solid var(--live);outline-offset:-2px}
.fin-tbl tr.pdetail td{padding:0 24px 24px;border-bottom:1px solid var(--line)}
.fin-tbl tfoot td{border-top:1px solid var(--text-3);border-bottom:0;padding-top:16px;padding-bottom:16px;font-weight:600}
.fin-tbl tfoot td.pt b{font-size:14px}.fin-tbl tfoot td.pt span{font-weight:400}
.fin-tbl tfoot td.n small{font-weight:400}
/* the open project: a detail panel inside the table, light on light */
.fd{display:grid;gap:24px;background:var(--paper);border-radius:10px;padding:24px}
.fd>div{min-width:0}
@media(min-width:960px){.fd{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"time costs" "time quote";gap:16px 32px}.fd .fd-time{grid-area:time}.fd .fd-costs{grid-area:costs}.fd .fd-quote{grid-area:quote;padding-top:16px;border-top:1px solid var(--line)}}
.fd .lbl{margin:0 0 8px;color:var(--text-3);display:flex;justify-content:space-between;align-items:baseline}
.fd .lbl b{font-weight:500;letter-spacing:0;text-transform:none;font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums}
.fd-row{display:grid;grid-template-columns:76px auto minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.fd-row:first-of-type{border-top:0}
.fd-row b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.fd-row b small{font-weight:500;color:var(--text-3);margin-left:2px}
.fd-row .muted{font-size:13px;white-space:nowrap}
.fd-row .x,.oh-row .x{opacity:0;transition:opacity .15s}.fd-row:hover .x,.fd-row .x:focus-visible,.oh-row:hover .x,.oh-row .x:focus-visible{opacity:1}
.fd-add{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.fd-add input,.fd-add select{min-width:0;color:var(--text)}
.fd-add input[type=number]{width:96px}.fd-add input[type=text]{flex:1;min-width:140px}
.fd .small{line-height:1.5}
.fin-new{margin-top:16px}.fin-new input[type=text]{min-width:220px}
.fin-set{display:grid;gap:16px}
.fin-set .frow{gap:12px}
.fin-oh{display:grid;margin-bottom:4px}
.fin-oh p{margin:0 0 4px}
.fin-k{display:flex;justify-content:space-between;align-items:baseline;color:var(--text-3);margin:0 0 12px}
.fin-k b{font-weight:600;letter-spacing:-.02em;text-transform:none;font-size:18px;color:var(--text);font-variant-numeric:tabular-nums}
.fin-k b small{font-size:13px;font-weight:400;color:var(--text-3);letter-spacing:0}
.fin-set-a{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fin-set-a b{color:var(--forest);font-weight:600}
.oh-row{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;gap:12px;align-items:center;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.oh-row:first-child{border-top:0;padding-top:2px}
.oh-row b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.oh-row b small{font-weight:400;color:var(--text-3);margin-left:1px}
.grid2{display:grid;gap:24px}@media(min-width:1000px){.grid2{grid-template-columns:1fr 1fr}}

/* ===== account and settings: one column of sections, label on the left, controls on the right ===== */
.settings{display:grid;gap:16px;max-width:920px}
.set{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:24px}
.set-k h3{font-size:16px;margin:0 0 4px}
.set-k p{margin:0}
.set-b{min-width:0}
.set-b .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.set-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:2px}
.set-b input:disabled{background:var(--ground);color:var(--text-2)}
.radios{display:grid;gap:0}
.radio{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.radio:first-child{border-top:0;padding-top:0}
.radio input{margin:3px 0 0;accent-color:var(--forest);width:18px;height:18px}
.radio b{display:block;font-weight:500;font-size:14px}
.radio small{display:block;color:var(--text-3);font-size:13px;margin-top:2px}
.people{list-style:none;margin:0 0 16px;padding:0;display:grid}
.person{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.pav{width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:500}
.pwho{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pwho b{font-weight:500;font-size:14px}
.pwho b i{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-left:8px}
.pwho span{font-size:13px;color:var(--text-3);overflow-wrap:anywhere}
.pwhen{font-size:13px;color:var(--text-3);text-align:right;white-space:nowrap}
.invite{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.invite .lbl{margin:0}
.bill{display:grid}
.brow{display:grid;gap:3px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.brow:last-child{border-bottom:0}
.brow b{font-weight:600;font-size:16px;letter-spacing:-.015em;color:var(--deep)}
a.brow:hover b{color:var(--deep)}
.brow span{font-size:13px;color:var(--text-3)}
@media(max-width:760px){.set{grid-template-columns:1fr;gap:16px;padding:20px}.set-b .pair{grid-template-columns:1fr}.person{grid-template-columns:34px minmax(0,1fr)}.pwhen{grid-column:2;text-align:left;white-space:normal}}

/* ===== staff viewing a client workspace: the one switch between staff view and the client's exact view ===== */
.asbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:65;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-md);font-size:13px;color:var(--text-2);max-width:calc(100% - 32px)}
.asbar b{font-weight:500;color:var(--text)}
.asbar.on{border-color:var(--live);background:rgba(238,248,241,.95)}
body:has(.actbar) .asbar{bottom:76px}
/* phones: one row, the bold half only */
@media(max-width:820px){
  .asbar{flex-direction:row;text-align:left;left:16px;right:16px;transform:none;max-width:none;justify-content:space-between}
  .asbar .asx{display:none}
  body.wide:has(.asbar) .ibx-send.pinned{padding-bottom:64px}
}

/* ===== Tangible Copilot block under a note (content rendered by portal.js; spacing and sizes only) ===== */
.cp{margin-top:16px;padding-top:4px}
.cp-head{display:flex;align-items:flex-end;margin-bottom:16px}
.cp-head svg{display:block;flex:none}
.cp-head i{flex:1;height:1px;background:linear-gradient(90deg,var(--live),rgba(63,187,99,0));display:block}
.cp-k{margin:16px 0 4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep);font-weight:500}
.cp-p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.cp-list{margin:0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--text-2)}.cp-list li{margin:2px 0}
.cp-needs{margin:0;padding-left:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;font-size:15px;line-height:1.55;color:var(--text-2)}
.cp-needs li{padding:2px 0;min-width:0}
.cp-needs li::marker{color:var(--text-3);font-variant-numeric:tabular-nums}
.cp-q{color:var(--text)}.cp-def{color:var(--text-3);font-size:13px}
.cp-ans{margin-top:8px;padding:6px 0 6px 12px;border-left:2px solid var(--live);font-size:14px;color:var(--text)}.cp-ans b{font-weight:500;color:var(--deep);margin-right:4px}
.cp-edit{border:0;background:none;color:var(--text-3);font:400 13px var(--arch);cursor:pointer;padding:0 0 0 6px;text-decoration:underline}
/* answer fields: lighter, underline style, the Save a quiet action */
.cp-form{display:flex;gap:10px;margin-top:8px;align-items:center}
.cp-form input{flex:1;min-width:0;width:0;font-size:15px;padding:8px 2px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;color:var(--text);transition:border-color .15s}
.cp-form input:focus-visible{outline:none;border-bottom-color:var(--live);box-shadow:0 1px 0 var(--live)}
.cp-gist{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--text-3)}
/* composer: your note above, the Copilot section below */
.cpc{margin-top:8px;display:grid;gap:8px}
.cpc .cp-head{margin-bottom:4px}
.cpc label{display:grid;gap:4px}.cpc label span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep);font-weight:500}
.cpc textarea{min-height:52px}
.cpc .cp{margin-top:4px}
.cpc #cpEdit{display:grid;gap:8px;margin-top:8px}
.cp-wait .cp-head i{background:linear-gradient(90deg,var(--live),var(--lime),rgba(63,187,99,0));background-size:200% 100%;animation:thsweep 1.8s linear infinite}
.cp-wait-p{text-align:center;max-width:52ch;margin:-28px auto 8px}
/* the wait ("Settle"): the brackets of the mark ease together, hold, ease apart. Appears after 200ms. */
.thinking{display:inline-flex;align-items:center;gap:8px;color:var(--text-3);font-size:13px;font-weight:500;line-height:1;letter-spacing:.005em;vertical-align:middle;white-space:nowrap;animation:tw-in 240ms cubic-bezier(.37,0,.63,1) 200ms both}
.thinking.center{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:40px 20px 48px;width:100%;text-align:center;white-space:normal;color:var(--text-2);font-weight:400;font-size:14px;line-height:20px}
.thinking.center .th-lbl{max-width:46ch}
.thinking.dark{color:rgba(248,247,247,.78)}
.thinking .th-lbl{display:block;transition:opacity .22s}
.thinking .th-lbl.swap{opacity:0}
.thinking .tw{display:block;flex:none;overflow:visible}
.thinking .tw .b,.thinking .tw .gd{animation-duration:3200ms;animation-timing-function:cubic-bezier(.37,0,.63,1);animation-iteration-count:infinite;animation-fill-mode:both;will-change:transform,opacity}
.thinking .tw .bb{animation-name:tw-back}
.thinking .tw .bf{animation-name:tw-front}
.thinking .tw .gd{animation-name:tw-glass}
.btn .thinking{color:inherit;font-size:inherit;gap:8px}
.btn .thinking .tw{width:16px;height:16px}
.tb .thinking{font-size:13px}
.cp-wait .thinking.center{padding:28px 20px 24px}
@keyframes tw-in{from{opacity:0}to{opacity:1}}
@keyframes tw-back{0%{transform:translate(-9px,-9px);opacity:.42;animation-timing-function:cubic-bezier(.37,0,.63,1)}40%,60%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1)}100%{transform:translate(-9px,-9px);opacity:.42}}
@keyframes tw-front{0%{transform:translate(9px,9px);opacity:.42;animation-timing-function:cubic-bezier(.37,0,.63,1)}40%,60%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1)}100%{transform:translate(9px,9px);opacity:.42}}
@keyframes tw-glass{0%{opacity:.25;animation-timing-function:cubic-bezier(.37,0,.63,1)}40%,60%{opacity:1;animation-timing-function:cubic-bezier(.37,0,.63,1)}100%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.thinking{animation:none;opacity:1}.thinking .tw .b,.thinking .tw .gd{animation:none;transform:none;opacity:.7;will-change:auto}}

/* ===== footer, reveal ===== */
footer{background:var(--ground);border-top:1px solid var(--line)}
.fbar{border-top:0;padding-block:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.fbar a{color:inherit;text-decoration:none;text-transform:none;letter-spacing:.02em;padding-block:12px}
.fbar span{display:inline-flex;gap:12px;flex-wrap:wrap}
.rise{opacity:0;transform:translateY(14px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ===== media: one page scroll, master/detail on phones, touch targets ===== */
@media(max-width:1279px){
  .mb-item{grid-template-columns:10px minmax(0,1fr)}
  .mb-item .ibx-when{grid-column:2;text-align:left}
}
@media(max-width:900px){
  /* admin too: the 200px rail column would leave a phone a 118px pane */
  .portal,body.admin .portal{grid-template-columns:minmax(0,1fr);gap:20px}
  .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:2px 4px;overflow:visible;padding-bottom:4px;min-width:0}
  .rail-h,.rail-g{display:none}
  .rail a{white-space:nowrap;padding:10px 12px}
  .rail a.on{background:none;box-shadow:inset 0 -2px 0 var(--live)}
  .clogo img{height:32px;max-width:160px}
  .fin-tbl{min-width:640px}
  .kpi{padding-right:16px;margin-right:16px}
}
@media(max-width:860px){
  .ibx-main{padding:20px}
  body.wide .ibx-send.pinned{margin:16px -20px -20px;padding:12px 20px 16px}
}
/* master/detail on phones, client Messages and admin Inbox alike */
@media(max-width:859px){
  .ibx.has-open .ibx-list{display:none}
  .ibx:not(.has-open) .ibx-main{display:none}
  .ibx-back{display:inline-flex}
  .ibx-head{flex-wrap:wrap}
  .ibx-head .acts{margin-left:0;flex-basis:100%}
  .ibx-back{order:-1;flex-basis:100%;justify-content:flex-start;padding-left:0;min-height:44px}
  .ibx-head b{white-space:normal}
  .mb-item{grid-template-columns:10px minmax(0,1fr) auto}
  .mb-item .ibx-when{grid-column:auto}
}
@media(max-width:640px){
  main{padding-top:96px}
  .f input,.f textarea,.f select,.invite input,.cp-form input,.pinpop textarea,.cedit textarea,.mb-compose input,.cpc textarea,.ibx-send textarea,.ibx-send input,.zin,.fd-add input,.fd-add select,.tbl select,.arow .aact select{font-size:16px}
  /* the action bar: opaque, a short label on its own line, the buttons sharing the width */
  .actbar{background:var(--ground)}
  .actbar #actLabel{display:block;font-size:13px;flex-basis:100%}
  .actbar .wrap-in{padding:10px var(--gut);row-gap:8px}
  .actbar .vactions{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
  .actbar .vactions .pill{justify-self:start}
  body.wide .ibx-send.pinned textarea{min-height:56px}
  .ibx-send-b .small{display:none}
  .ibx-send-a{display:flex;align-items:center;justify-content:space-between}
  .ibx-tools.one{background:none;padding:0}
  .user .who .nm{display:none}.user .who{padding:3px}.hsep{margin:0 6px}
  .cmsg{grid-template-columns:28px minmax(0,1fr);gap:10px}
  .cav{width:28px;height:28px}
  .cmsg.tang .cpanel{padding:12px 12px 12px 14px}
  .cp-needs{padding-left:18px}
  .ibx-tabs .sep{display:none}
  .fin-tbl{min-width:0}
  .fin-tbl th:nth-child(n+2):not(:last-child),.fin-tbl td:nth-child(n+2):not(:last-child){display:none}
  .fin-tbl th:first-child{width:auto;min-width:0}
  .kpis{display:grid;grid-template-columns:1fr 1fr}
  .kpi{border-right:0;margin-right:0;border-top:1px solid var(--line);padding-top:8px}
  #field{opacity:.45}
  .mast{background:rgba(243,242,242,.96)}
}
@media(max-width:560px){.ibx-tools:not(.one) .tb>span:not(.thinking){display:none}}
@media(pointer:coarse){
  .hbtn,.user .who{min-width:44px;min-height:44px}
  .btn{min-height:44px}
  .btn-sm{padding:9px 14px;min-height:40px}
  .rail a,.ibx-tab{min-height:44px}
  /* tablets: 16px fields so iOS does not zoom */
  .f input,.f textarea,.f select,.invite input,.cp-form input,.pinpop textarea,.cedit textarea,.mb-compose input,.cpc textarea,.ibx-send textarea,.ibx-send input,.zin,.fd-add input,.fd-add select,.tbl select,.arow .aact select{font-size:16px}
  .keys{display:none}
  .x,.tbl .x,.ibx-files .chip .x{min-width:32px;min-height:32px}
  .fd-row .x,.oh-row .x{opacity:1}
}
.user .who .ini.tang{background:var(--white);border:1px solid var(--line);color:inherit}
.user .who .ini.tang svg{width:18px;height:18px;display:block}
/* deliverable cards: head (icon, title, meta, status) / shaded summary / foot (progress control left, actions right) */
.dc{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px 24px;display:grid;gap:16px;transition:border-color .15s}
.dc:hover{border-color:var(--line-2)}
.dc-h{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:start}
.dc-i{display:block;line-height:0}
.dc-t{min-width:0}
.dc-t>a{display:block;font-weight:600;font-size:17px;letter-spacing:-.015em;line-height:1.3;color:var(--text);text-decoration:none;text-wrap:balance}
.dc-t>a:hover{color:var(--forest)}
.dc-meta{font-size:13px;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums}
.dc-h .pill{white-space:nowrap;margin-top:3px}
.dc-sum{margin:0;background:var(--paper);border-radius:8px;padding:12px 16px;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.dc-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.dc-prog{display:grid;gap:8px;max-width:320px;min-width:0}
.dc-lbl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums;line-height:1.3}
.dc-court{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-weight:500}
.dc-court::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live)}
.dc-bar{height:4px;background:var(--line);border-radius:999px;overflow:hidden}
.dc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--forest),var(--live))}
.dc-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dc.dr-changes_requested .dc-bar i{background:var(--warn)}
.dc.dr-replaced .dic{filter:grayscale(1)}.dc.dr-replaced .dc-bar i{background:var(--line-2)}.dc.dr-replaced .dc-court::before{background:var(--line-2)}
.dc.dr-delivered .dc-bar i{background:var(--forest)}
.dc.dr-draft .dc-court::before{background:var(--text-3)}
.dlist{gap:10px}
.sect .small{font-variant-numeric:tabular-nums}
@media(max-width:760px){.dc{padding:16px}.dc-h{grid-template-columns:36px minmax(0,1fr)}.dc-h .pill{grid-column:2;justify-self:start;margin-top:0}.dc-f{grid-template-columns:1fr}.dc-prog{max-width:none}.dc-act{justify-content:flex-start}}

/* the review studio: preview with room, notes beside it, full screen when asked */
.studio{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.studio .frame{position:sticky;top:96px}
.studio .frame iframe{height:max(560px,calc(100vh - 220px))}
.studio .frame img{max-height:calc(100vh - 220px);object-fit:contain}
.frame .bar .barx{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.frame .bar .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rrail{min-width:0}
.review-card{display:grid;gap:14px}
.review-card .card-h{margin-bottom:0}
/* the composer sits under the Notes heading, the thread below it */
.composer2{display:grid;gap:10px;padding-top:0;border-top:0;padding-bottom:14px;border-bottom:1px solid var(--line)}
.composer2 textarea{min-height:110px}
.ctools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctools .note{margin:0;flex:1;min-width:0}
.thread-empty{display:grid;gap:6px}
.btn.mic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn.mic.on{border-color:var(--forest);color:var(--forest);background:rgba(63,187,99,.08)}
.btn.mic.on svg{animation:micpulse 1.4s ease-in-out infinite}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.35}}
.pinpop-a .push{flex:1}
.pinpop{width:min(340px,calc(100% - 16px))}
/* the review screen takes the whole width; the breadcrumb is the way back */
.portal.viewer{grid-template-columns:minmax(0,1fr)}
.portal.viewer .rail{display:none}
body.wide .studio{grid-template-columns:minmax(0,1fr) 400px}
@media(max-width:1100px){.studio,body.wide .studio{grid-template-columns:1fr}.studio .frame{position:static}.studio .frame iframe{height:70vh}#notesBtn{display:none}}
@media(prefers-reduced-motion:reduce){.btn.mic.on svg{animation:none}}
.studio{padding-bottom:0}
/* narrow screens: the Copilot block follows the preview; the jump link only shows there */
.studio+#dcp{margin-top:24px}
#dcp{scroll-margin-top:96px}
@media(min-width:1101px){.dcp-jump{display:none}}
/* Hide notes gives the preview the width */
.studio.nonotes,body.wide .studio.nonotes{grid-template-columns:minmax(0,1fr)}
.studio.nonotes .rrail{display:none}
/* full screen is the whole studio, notes included */
.studio:fullscreen,body.wide .studio:fullscreen{background:var(--ground);padding:12px;grid-template-columns:minmax(0,1fr) 360px;gap:12px;height:100vh;align-items:stretch}
.studio.nonotes:fullscreen,body.wide .studio.nonotes:fullscreen{grid-template-columns:minmax(0,1fr)}
.studio:fullscreen .frame{position:static;display:flex;flex-direction:column;height:100%;min-height:0}
.studio:fullscreen #preview{flex:1;min-height:0}
.studio:fullscreen .frame iframe{height:100%}
.studio:fullscreen .frame img{max-height:100%;height:100%;object-fit:contain}
.studio:fullscreen .rrail{overflow:auto}
.studio:fullscreen #notesBtn{display:inline-flex}
@media(max-width:700px){.studio:fullscreen,body.wide .studio:fullscreen{grid-template-columns:minmax(0,1fr)}.studio:fullscreen .rrail{display:none}}
/* iPhone has no Fullscreen API for pages: the studio pins itself over everything instead */
body.focusmode{overflow:hidden}
body.focusmode main{z-index:70}
body.focusmode .pane{container-type:normal}
body.focusmode .studio,body.focusmode.wide .studio{position:fixed;inset:0;z-index:60;background:var(--ground);padding:8px;grid-template-columns:minmax(0,1fr);height:100dvh;align-items:stretch}
body.focusmode .studio .frame{position:static;display:flex;flex-direction:column;height:100%;min-height:0}
body.focusmode .studio #preview{flex:1;min-height:0}
body.focusmode .studio .frame iframe{height:100%}
body.focusmode .rrail{display:none}

/* marks on the preview: pin, area, highlight, pen */
.frame .bar .tools{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.frame .bar .tools .tool{padding:0 10px}
.frame .bar .tools .tool.on{border-color:var(--forest);color:var(--forest);background:rgba(63,187,99,.08)}
.frame .bar .toolhint{margin-left:6px}
/* phones: the hint floats over the top of the preview */
#preview>.toolhint{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;margin:0;padding:4px 10px;background:var(--white);border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh-md);font-size:12px;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#preview>.toolhint:empty{display:none}
.tool-pin .pinlayer,.tool-box .pinlayer,.tool-hl .pinlayer,.tool-pen .pinlayer{pointer-events:auto;background:rgba(14,80,64,.03);touch-action:none}
.tool-pin .pinlayer{cursor:crosshair}.tool-box .pinlayer,.tool-hl .pinlayer{cursor:crosshair}.tool-pen .pinlayer{cursor:cell}
.pinlayer .marksvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pinlayer .marksvg .pen{fill:none;stroke:var(--forest);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.pinlayer .marksvg .pen.temp{stroke:var(--live)}
.pinlayer .marksvg .pen.hot{stroke:var(--live);stroke-width:4}
/* a mark never blocks the comp; only its number takes a click */
.pinlayer .mark{position:absolute;pointer-events:none;border-radius:3px}
.pinlayer .mark .tag{pointer-events:auto}
.pinlayer .mark-box{border:2px solid var(--forest);background:rgba(14,80,64,.04)}
.pinlayer .mark-hl{background:rgba(155,235,88,.38);border:0;mix-blend-mode:multiply}
.pinlayer .mark.temp{border-style:dashed;opacity:.8}
.pinlayer .mark .tag{position:absolute;left:0;top:0;transform:translate(-50%,-50%);rotate:0;border-radius:50%;width:22px;height:22px;font-size:11px}
.pinlayer .mark .tag>*{rotate:0}
.pinlayer .pin.tag{transform:translate(-50%,-50%);rotate:0;border-radius:50%;width:22px;height:22px;font-size:11px}
.pinlayer .pin.tag>*{rotate:0}
.pinlayer .flash{outline:3px solid var(--live);outline-offset:3px}
/* hover a note, its mark lights; hover a mark, its note lights */
.pinlayer .hot{outline:2px solid var(--live);outline-offset:2px}
.pinlayer .mark .hot{outline:0}
.cmt.hot{background:rgba(63,187,99,.05)}
.pinpop .pophead{display:flex;align-items:center;gap:8px}
.pinpop .pophead .pin.ghost{margin:0}
.cmt .who b{display:inline-flex;align-items:center;gap:8px}
.cmt .mtype{display:inline-flex;align-items:center;gap:4px;font-weight:400;font-size:12px;color:var(--text-3)}
.cmt .mtype svg,.rq-list .mtype svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmt .rmnote{font-size:12px;margin-left:8px;color:var(--text-3)}
.cmt .rmnote:hover{color:var(--warn-ink)}
.cedit{display:grid;gap:8px;margin-top:4px}
.pin.inline{cursor:pointer}
.pin.inline.plain{cursor:default}
.tool svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* the request dialog lists the notes that go */
.rq-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rq-list li{display:flex;gap:8px;font-size:14px;align-items:flex-start}
.rq-list .pin.inline{margin:0;cursor:default}
.rq-list .mtype{display:inline-flex;color:var(--text-3);padding-top:3px}
@media(max-width:640px){
  .frame .bar>span:nth-child(2){display:none}
  .studio .frame iframe{height:56svh}
  .frame .bar .tools .tool span{display:none}.frame .bar .tools .tool{padding:0 9px}
}

/* revisions: the gate between client notes and the next version */
.rvlist{display:grid;gap:12px;margin-bottom:8px}
.rv{display:grid;gap:14px;padding:20px 24px}
.rv-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.rv-t a{font-weight:600;font-size:16px;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.rv-t a:hover{color:var(--forest)}
.rv-notes-wrap summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--text-2)}
.rv-notes,.rv-changes{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.rv-notes li,.rv-changes li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.rv-notes p,.rv-changes p{margin:0;font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.rv-n{width:22px;height:22px;border-radius:50%;background:var(--forest);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;margin-top:1px}
.rv-sum{margin:0;background:var(--paper);border-radius:8px;padding:12px 16px;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.rv-qs{display:grid;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.rv-qs .lbl{margin:0;color:var(--text-3)}
.rv-q{display:grid;gap:6px}
.rv-q p{margin:0;font-size:14.5px;font-weight:500}
.rv-q .zin{width:100%}
.rv-opts{display:flex;gap:6px;flex-wrap:wrap}
.rv-opts .btn.on{border-color:var(--forest);color:var(--forest);background:rgba(63,187,99,.08)}
.rv-run,.rv-next{display:grid;gap:10px}
.rv-wait{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rv-step{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.rv-err .lnk{margin-left:6px}
/* Ready: each client note paired with what was done */
.rv-pairs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rv-pairs li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px}
.rv-ask{margin:0;font-size:14.5px;white-space:pre-wrap}
.rv-did{margin:6px 0 0;padding-left:10px;border-left:2px solid var(--live);font-size:14.5px;color:var(--text-2)}
.rv-did b{font-weight:600;color:var(--forest);margin-right:4px}
.rv-did.miss{border-left-color:var(--warn-ink);color:var(--warn-ink)}
.rv-pairs a{color:var(--deep)}
.rv-later,.rv-also{display:grid;gap:6px}
.rv-later .lbl,.rv-also .lbl{margin:0;color:var(--text-3)}
.rv-later .rv-notes,.rv-also .rv-changes{margin-top:0}
.rv-qh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.rv-def{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-left:2px}
.rv-confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.rv-confirm-slot:empty{display:none}
@media(max-width:640px){.rv{padding:16px}.rv-h{grid-template-columns:auto minmax(0,1fr)}.rv-h .pill{grid-column:2;justify-self:start}}
.chk-inline{display:inline-flex;gap:6px;align-items:center}
.ctools .chk-inline{color:var(--text-2)}
.ibx-send.preview-off textarea,.ibx-send.preview-off input{background:var(--paper)}
.ibx-send.preview-off .btn{opacity:.55;cursor:not-allowed}
/* files: the workspace library */
.fl{display:grid;gap:16px}
.fl-up{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center;background:var(--white);border:1px dashed var(--line-3,var(--line-2));border-radius:10px;padding:18px 20px;transition:border-color .15s,background .15s}
.fl.over .fl-up{border-color:var(--forest);background:rgba(63,187,99,.06)}
.fl-up-l{display:flex;gap:14px;align-items:center;min-width:0}
.fl-up-l>svg{width:28px;height:28px;flex:none;fill:none;stroke:var(--forest);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fl-up-l b{display:block;font-weight:600;font-size:15px}
.fl-up-l .small{display:block}
.fl-up-r{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}
.fl-to{display:grid;gap:4px;min-width:180px}
.fl-to .zin{width:100%}
.fl-status{grid-column:1/-1;margin:0}
.fl-status:empty{display:none}
.fl-status.err{color:var(--warn-ink)}
.fl-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.fl-nav{display:grid;gap:2px;position:sticky;top:96px}
.fl-f{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:0;border-radius:6px;background:none;text-align:left;font:inherit;font-size:14px;color:var(--text-2);cursor:pointer}
.fl-f svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fl-f span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-f b{font-weight:500;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.fl-f:hover{background:rgba(32,30,29,.04)}
.fl-f.on{background:var(--white);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.fl-pane{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px 20px;min-width:0}
.fl-tools{display:flex;gap:8px;margin-bottom:8px}
.fl-tools input{flex:1;min-width:0}
.fl-list{list-style:none;margin:0;padding:0}
.fl-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.fl-row:first-child{border-top:0}
.fl-ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:rgba(32,30,29,.05);color:var(--text-2)}
.fl-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fl-img{background:rgba(63,187,99,.10);color:var(--forest)}.fl-pdf{background:rgba(184,105,46,.10);color:var(--warn-ink)}.fl-sheet{background:rgba(30,127,92,.10);color:var(--deep)}
.fl-main{min-width:0}
.fl-name{display:block;max-width:100%;padding:0;border:0;background:none;font:inherit;font-weight:500;font-size:15px;color:var(--text);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-name:hover{color:var(--forest)}
.fl-v{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:rgba(63,187,99,.12);color:var(--forest);font-size:11px;font-weight:600;vertical-align:1px}
.fl-meta{font-size:13px;color:var(--text-3);margin-top:2px;overflow-wrap:anywhere}
.fl-folder{color:var(--text-2)}
.fl-note{margin:4px 0 0;font-size:13.5px;color:var(--text-2)}
.fl-vers{margin-top:6px}
.fl-vers summary{cursor:pointer;font-size:12.5px;color:var(--deep)}
.fl-vers ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.fl-vers li{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--text-3)}
.fl-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fl-menu{min-width:200px;z-index:90}
.fl-pv-body{min-height:200px;max-height:72vh;overflow:auto;background:var(--paper);border-radius:8px;display:grid;place-items:center}
.fl-pv-body img{max-width:100%;max-height:70vh;display:block}
.fl-pv-body iframe{width:100%;height:70vh;border:0;background:#fff}
.fl-pv-body pre{margin:0;padding:16px;width:100%;white-space:pre-wrap;font-size:13px}
.fl-client{display:grid;gap:4px;min-width:220px}
#flPick.busy{opacity:.6;pointer-events:none}
@media(max-width:900px){.fl-body{grid-template-columns:1fr}.fl-nav{position:static;display:flex;gap:6px;overflow:visible;flex-wrap:wrap}.fl-f{grid-template-columns:auto auto;padding:8px 12px;border:1px solid var(--line)}.fl-f svg{display:none}}
@media(max-width:640px){.fl-up{grid-template-columns:1fr}.fl-up-r{justify-content:stretch}.fl-to{flex:1}.fl-row{grid-template-columns:32px minmax(0,1fr)}.fl-act{grid-column:2;justify-content:flex-start}.fl-pane{padding:12px 14px}}

/* ---------- review studio: marks on other pages of a hosted site comp ---------- */
.cmt .onpage{margin:6px 0 0;font-size:13px;color:var(--text-3);white-space:normal}
.cmt .onpage[hidden]{display:none}
.cmt .onpage .lnk{font-weight:600}

/* ---------- admin: site review ---------- */
.sr-back{margin:0 0 4px;font-size:14px}
.sr-back .lnk{text-decoration:none;font-weight:600}
.sr-back .lnk::before{content:"\2190\00a0"}
.sr-tabs{margin-top:4px}
.sr-page{margin-top:20px}
.sr-page:first-child{margin-top:0}
.sr-page .n{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sr-page .btn-t{margin-left:auto}
.sr-row .amain .t{font-size:15px;font-weight:600;line-height:1.4}
.sr-ans{margin-top:10px;padding-left:12px;border-left:2px solid var(--line)}
.sr-ans p{margin:0 0 2px;white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--text)}
.sr-more{margin-top:6px;font-size:13px}
.sr-more summary{cursor:pointer;color:var(--deep);font-weight:600;min-height:28px;display:inline-flex;align-items:center}
.sr-hist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.sr-hist p{margin:4px 0 0;white-space:pre-wrap;font-size:14px;line-height:1.5}
.sr-hist .sr-file{margin-top:4px;font-size:13px;font-weight:600}
.sr-row .ameta{gap:10px}
@media(max-width:640px){.sr-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sr-tabs::-webkit-scrollbar{display:none}.sr-more summary{min-height:44px}}

/* every row list lines up as one table (portal.js alignList sets the shared columns and each piece's column) */
@container (min-width:1180px){
  .alist.aligned{grid-template-columns:var(--acols);column-gap:10px}
  .alist.aligned > .arow{grid-column:1/-1;grid-template-columns:subgrid;grid-template-areas:none;column-gap:10px}
  .alist.aligned > .arow > .ameta,.alist.aligned > .arow > .aact{display:contents}
  .alist.aligned > .arow > *,.alist.aligned .ameta > *,.alist.aligned .aact > *{grid-row:1;justify-self:start}
  .alist.aligned .amain{grid-column:main;padding-right:14px}
  .alist.aligned .aact select{width:100%}
}

/* conversations open on the newest: the older messages fold behind one line; unread ones carry New */
.ibx-earlier{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:10px 14px;margin:0 0 4px;border-radius:8px;background:rgba(32,30,29,.04);font-size:13px;color:var(--text-2);transition:background .15s}
.ibx-earlier b{color:var(--deep);font-weight:600}
.ibx-earlier:hover{background:rgba(32,30,29,.07)}
.ibx-earlier:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.ibx-thread .cmsg:focus{outline:none}
.ibx-thread .cmsg:focus-visible{outline:2px solid var(--deep);outline-offset:4px;border-radius:8px}
.cfrom .cnew{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 6px;border-radius:5px;background:linear-gradient(90deg,rgba(63,187,99,.16),rgba(155,235,88,.12));box-shadow:inset 0 0 0 1px rgba(63,187,99,.28);color:var(--forest);font:600 10.5px/1.3 var(--arch);letter-spacing:.14em;text-transform:uppercase}
.cnew svg{display:block;overflow:visible}
.cnew .nb,.cnew .nf{animation:cnew-in 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
.cnew .nb{--cx:-26px}.cnew .nf{--cx:26px}
@keyframes cnew-in{from{transform:translate(var(--cx),var(--cx));opacity:.35}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.cnew .nb,.cnew .nf{animation:none}}

/* a revision opens under its deliverable row */
.alist > .rv-inline{grid-column:1/-1;padding:2px 0 18px}
.rv-inline .rv.card{margin:0;box-shadow:none}

/* a deliverable update in Messages opens the deliverable */
.cmsg-go{margin:12px 0 0}

/* ===== project scope: stage line, quote meters, items beyond the quote (strip, Project page, staff card, retainer) ===== */
.sc{--sc-sky:#2F6FB0;--sc-sky-bg:rgba(47,111,176,.10);--sc-edge:rgba(32,30,29,.08)}
/* section heads inside the card: the band's lime dash, a micro-label, one quiet line on the right */
.sc-h{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:0 0 20px}
.sc-h .lbl{display:inline-flex;align-items:center;gap:12px;color:var(--text-3)}
.sc-h .lbl::before{content:"";width:18px;height:2px;background:linear-gradient(45deg,var(--live),var(--lime));display:block}
.sc-h .note{font-variant-numeric:tabular-nums}
.sc-sec+.sc-sec{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
.sc-card{padding:28px 32px}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap;margin:0 0 28px}
.sc-top .t{font-weight:600;font-size:18px;letter-spacing:-.015em;line-height:1.25;margin:0}
.sc-top .s{font-size:13px;color:var(--text-3);margin:4px 0 0;font-variant-numeric:tabular-nums}

/* stage line: numbered nodes joined by a rule; done = gradient check, current = forest, next = grey ring.
   Same language as the Studio stage line. */
.sc-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.sc-stages>li{min-width:0;position:relative}
.sc-trk{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.sc-trk::after{content:"";flex:1;height:2px;border-radius:1px;background:var(--line);margin-right:10px}
.sc-stages>li:last-child .sc-trk::after{visibility:hidden}
.sc-stages>li.done .sc-trk::after{background:linear-gradient(45deg,var(--live),var(--lime))}
.sc-node{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);font:700 12px/1 var(--arch);color:var(--text-3);font-variant-numeric:tabular-nums}
.sc-node svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done>.sc-trk .sc-node{background:linear-gradient(135deg,var(--deep),var(--live));box-shadow:none}
.on>.sc-trk .sc-node{background:var(--forest);color:#fff;box-shadow:0 0 0 4px rgba(63,187,99,.18)}
.sc-st{padding-right:24px;min-width:0}
.sc-st b{display:block;font-weight:600;font-size:16px;letter-spacing:-.015em;line-height:1.3;text-wrap:balance}
.sc-st span{display:block;font-size:13px;line-height:1.45;color:var(--text-3);margin-top:4px;font-variant-numeric:tabular-nums}
.sc-st .now{color:var(--forest);font-weight:500}
.sc-stages>li:not(.done):not(.on) .sc-st b{color:var(--text-2)}

/* quote meters: one cell per unit (page, round, hour); brackets above name the quote and what lies past it */
.sc-meters{display:grid;gap:30px}
.sc-m{display:grid;grid-template-columns:200px minmax(0,1fr) 112px;gap:0 32px;align-items:end}
.sc-m-k .lbl{display:block;color:var(--text-3);margin:0 0 6px}
.sc-m-k p{margin:0;font-size:14px;line-height:1.45;color:var(--text-2)}
.sc-m-k .lk{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--text-3);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.sc-m-k .lk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-fig{text-align:right;line-height:1}
.sc-fig b{display:block;font-weight:700;font-size:34px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--text)}
.sc-fig span{display:block;font-size:13px;color:var(--text-3);margin-top:6px}
.sc-cells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:30px auto;column-gap:3px;min-width:0}
.sc-c{grid-row:2;height:24px;border-radius:3px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);min-width:0}
/* in the quote = the back arm of the Fold; built beyond it = the front arm, as a tint */
.sc-c.q{background:linear-gradient(135deg,var(--deep),var(--forest));box-shadow:none}
.sc-c.w{background:linear-gradient(45deg,rgba(63,187,99,.20),rgba(155,235,88,.34));box-shadow:none}
.sc-c.nx{background:var(--sc-sky-bg);box-shadow:inset 0 0 0 1px rgba(47,111,176,.45)}
.sc-c.dz{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(184,105,46,.5)}
.sc-c.u{background:linear-gradient(135deg,var(--deep),var(--forest));box-shadow:none}
.sc-c.half{background:linear-gradient(90deg,rgba(63,187,99,.28) 50%,transparent 50%);box-shadow:inset 0 0 0 1px rgba(63,187,99,.3)}
.sc-c.now{box-shadow:inset 0 0 0 1.5px var(--forest)}
/* labelled cells, for units with names (rounds, deliverables) */
.sc-cells.lab .sc-c{height:36px;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:500;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-cells.lab .sc-c.q{color:#fff}
.sc-cells.lab .sc-c.now::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(63,187,99,.2);flex:none;margin-left:auto}
.sc-br{grid-row:1;align-self:end;position:relative;height:7px;margin-bottom:7px;border:1px solid var(--forest);border-bottom:0;border-radius:2px 2px 0 0;min-width:0}
.sc-br>span{position:absolute;left:-1px;bottom:12px;white-space:nowrap;font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);font-variant-numeric:tabular-nums}
.sc-br.x{border-color:var(--line-3)}
.sc-br.x>span{color:var(--text-3)}
.sc-br:not(:first-child)>span{left:auto;right:-1px}
.sc-br.dz{border-color:var(--warn)}.sc-br.dz>span{color:var(--warn-ink)}
.sc-h a{color:var(--deep);text-decoration:none;font-size:13px;font-weight:500}
.sc-h a:hover{text-decoration:underline}
.sc-br.nx{border-color:var(--sc-sky)}.sc-br.nx>span{color:var(--sc-sky)}
/* a short mark on the track: 80% of a retainer bank, staff only */
.sc-mk{grid-row:2;justify-self:end;width:2px;height:32px;align-self:center;margin-right:-2.5px;background:var(--text-3);border-radius:1px;position:relative;z-index:1}

/* items beyond the quote: rows on hairlines, a swatch that matches the cells, one state each */
.sc-items{display:grid}
.sc-it{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.sc-it:first-child{border-top:0;padding-top:0}
.sc-it>i{width:12px;height:12px;border-radius:3px;align-self:start;margin-top:5px}
.sc-it>i.q{background:linear-gradient(135deg,var(--deep),var(--forest))}
.sc-it>i.w{background:linear-gradient(45deg,rgba(63,187,99,.28),rgba(155,235,88,.45))}
.sc-it>i.nx{background:var(--sc-sky-bg);box-shadow:inset 0 0 0 1px rgba(47,111,176,.5)}
.sc-it>i.dz{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(184,105,46,.55)}
.sc-it>i.un{background:transparent;box-shadow:inset 0 0 0 1px var(--line-3)}
.sc-it b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.35}
.sc-it .s{display:block;font-size:13px;line-height:1.45;color:var(--text-3);margin-top:2px}
.sc-it .r{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.sc-it .zin{min-width:216px;color:var(--text)}
/* item states: the portal pill, with status colours that are not brand green */
.pill.sc-inc{background:rgba(14,80,64,.08);color:var(--forest)}
.pill.sc-free{background:rgba(32,30,29,.05);color:var(--text-2)}
.pill.sc-next{background:var(--sc-sky-bg);color:var(--sc-sky)}
.pill.sc-talk{background:var(--warn-bg);color:var(--warn-ink)}
.pill.sc-un{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line-2)}
/* waived work: one quiet foot under the list, the value in plain figures */
.sc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:16px;padding:12px 16px;background:var(--paper);border-radius:8px;font-size:14px;color:var(--text-2)}
.sc-foot b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sc-foot .zin{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.sc-foot label{display:inline-flex;align-items:center;gap:10px;color:var(--text-3);font-size:13px}

/* the one quiet scope line: a swatch, the count, a small link. Never a banner. */
.sc-line{display:block;font-size:13px;line-height:1.45;color:var(--text-2)}
.sc-line>i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:8px}
.sc-line>i~i{margin-left:10px}
.sc-line>i.w{background:linear-gradient(45deg,rgba(63,187,99,.3),rgba(155,235,88,.5))}
.sc-line>i.nx{background:var(--sc-sky-bg);box-shadow:inset 0 0 0 1px rgba(47,111,176,.5)}
.sc-line>i.dz{background:var(--warn-bg);box-shadow:inset 0 0 0 1px rgba(184,105,46,.55)}
.sc-line>i.q{background:linear-gradient(135deg,var(--deep),var(--forest))}
.sc-line a{color:var(--deep);text-decoration:none;font-weight:500;margin-left:8px;white-space:nowrap}
.sc-line a:hover{text-decoration:underline}

/* the strip on Deliverables: project, compact stage line, the scope line, a link to Project */
.sc-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 32px;padding:16px 24px 18px}
.sc-strip .t{font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.3}
.sc-strip .t span{font-weight:400;font-size:13px;letter-spacing:0;color:var(--text-3);margin-left:8px;font-variant-numeric:tabular-nums}
.sc-strip>.sc-line{text-align:right}
.sc-strip .go{justify-self:end}
.sc-strip .s{font-size:13px;color:var(--text-3);margin-top:2px;font-variant-numeric:tabular-nums}
.sc-strip .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--deep);text-decoration:none;white-space:nowrap}
.sc-strip .go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-strip .go:hover{color:var(--forest)}
.sc-mini li{flex:none}
.sc-mini{list-style:none;margin:0;padding:0;display:flex;align-items:center;min-width:0}
.sc-mini li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3);white-space:nowrap;min-width:0}
.sc-mini li+li::before{content:"";width:clamp(16px,3vw,40px);height:2px;border-radius:1px;background:var(--line);margin:0 10px;flex:none}
.sc-mini li.done+li::before{background:linear-gradient(45deg,var(--live),var(--lime))}
.sc-mini .sc-node{width:22px;height:22px;font-size:11px}
.sc-mini .sc-node svg{width:11px;height:11px}
.sc-mini li.done .sc-node{background:linear-gradient(135deg,var(--deep),var(--live));box-shadow:none}
.sc-mini li.on{color:var(--forest);font-weight:600}
.sc-mini li.on .sc-node{background:var(--forest);color:#fff;box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.sc-mini .sl{overflow:hidden;text-overflow:ellipsis}

/* staff only: hours, cost and margin. The kpi row from Financials, with a lock label */
.sc-staff{margin-top:28px;padding:20px 24px;background:var(--paper);border-radius:10px;display:grid;gap:20px}
.sc-staff .sc-h{margin:0}
.sc-staff .kpi b.neg{color:var(--warn-ink)}
.sc-lock{display:inline-flex;align-items:flex-start;gap:8px;color:var(--text-3);font-size:13px;line-height:1.45}
.sc-lock svg{margin-top:2px;flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* quotes and invoices on the Project page */
.sc-bill{display:grid}
.sc-b{display:grid;grid-template-columns:minmax(0,1fr) 112px 88px 72px;gap:4px 20px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.sc-b:first-child{border-top:0;padding-top:0}
.sc-b b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em}
.sc-b .s{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.sc-b .pill{justify-self:start}
.sc-b .btn{justify-self:end}
.sc-b .amt{text-align:right;font-variant-numeric:tabular-nums;font-size:16px}
.sc-b.inv b{font-weight:500;color:var(--text-2)}

/* retainer: the month's bank, earlier months as short bars */
.sc-months{display:grid;gap:8px;margin-top:20px}
.sc-mo{display:grid;grid-template-columns:200px minmax(0,1fr) 112px;gap:0 32px;align-items:center;font-size:13px;color:var(--text-3)}
.sc-mo .bar{height:4px;background:var(--line);border-radius:999px;overflow:hidden}
.sc-mo .bar i{display:block;height:100%;background:var(--line-3);border-radius:999px}
.sc-mo b{font-weight:500;color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}

/* portal additions: the staff head, the show-to-client switch, the hidden note, the add row and the editor */
.sc-vis{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;justify-content:flex-end}
.sc-vis>a{color:var(--deep);text-decoration:none;font-size:13px;font-weight:500}
.sc-vis>a:hover{text-decoration:underline}
.sc-tog{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer}
.sc-tog input{width:16px;height:16px;accent-color:var(--forest);margin:0}
.sc-hid{display:flex;align-items:flex-start;gap:8px;margin:0 0 24px;padding:10px 14px;border-radius:8px;background:var(--paper);font-size:13px;color:var(--text-2)}
.sc-hid svg{width:14px;height:14px;margin-top:2px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-add{margin-top:16px}
.sc-it .r .x{flex:none}
.sc-ed{margin:24px 0 0;padding:20px 24px;background:var(--paper);border-radius:10px;display:grid;gap:16px}
.sc-ed .lbl{color:var(--text-3)}
.sc-ed-rows{display:grid;gap:8px}
.sc-ed-row{display:grid;gap:8px;align-items:center}
.sc-ed-row.st{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 120px 28px}
.sc-ed-row.mt{grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) 72px 72px minmax(0,1.6fr) 130px 28px}
.sc-ed-row input,.sc-ed-row select{min-width:0;width:100%}
.sc-ed-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.sc-ed-a{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@container (max-width:760px){
  .sc-card{padding:20px}
  .sc-m,.sc-mo{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
  .sc-m .sc-m-k{grid-column:1;grid-row:1;align-self:start}
  .sc-m .sc-fig{grid-column:2;grid-row:1;align-self:start}
  .sc-m .sc-cells{grid-column:1/-1;grid-row:2;margin-top:8px}
  .sc-mo .bar{grid-column:1/-1;grid-row:2}
  .sc-fig b{font-size:28px}
  .sc-cells{column-gap:2px}
  .sc-cells.lab .sc-c{height:auto;min-height:40px;padding:6px 8px;font-size:12px;line-height:1.2;white-space:normal}
  .sc-cells.lab .sc-c.now::after{display:none}
  .sc-stages{grid-template-columns:minmax(0,1fr);gap:0}
  .sc-stages>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px;padding-bottom:18px}
  .sc-stages>li:last-child{padding-bottom:0}
  .sc-trk{margin:0;flex-direction:column;align-self:stretch;gap:6px}
  .sc-trk::after{width:2px;height:auto;flex:1;margin:0}
  .sc-stages>li .sc-trk::after{margin-bottom:-12px}
  .sc-st{padding:3px 0 0}
  .sc-it{grid-template-columns:12px minmax(0,1fr)}
  .sc-it .r{grid-column:2;justify-content:flex-start;margin-top:8px}
  .sc-it .zin{min-width:0;width:100%}
  .sc-strip{grid-template-columns:minmax(0,1fr) auto;padding:16px 20px;gap:10px 16px}
  .sc-strip>.sc-line{grid-column:1/-1;grid-row:2;text-align:left}
  .sc-strip .sc-mini{grid-column:1/-1;grid-row:3;padding-top:12px;border-top:1px solid var(--line)}
  .sc-strip .go{grid-column:2;grid-row:1}
  .sc-mini li.on{flex:0 1 auto}
  .sc-mini li:not(.on) .sl{display:none}
  .sc-b{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .sc-b .pill{grid-column:1;grid-row:2;justify-self:start}
  .sc-b .amt{grid-column:2;grid-row:1}
  .sc-b .btn{grid-column:2;grid-row:2}
  .sc-staff{padding:16px}
  .sc-ed{padding:16px}
  .sc-ed-row.st,.sc-ed-row.mt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sc-vis{justify-content:flex-start}
}
@media(prefers-reduced-motion:no-preference){
  .sc-c{transition:background .25s}
}
/* ===== end project scope ===== */

/* ===== projects: the list, filter chips, project tags, the strip with several projects, billing with a project column ===== */
.portal{--pj-sky:#2F6FB0;--pj-sky-bg:rgba(47,111,176,.10);--pj-plum:#6A4C93;--pj-plum-bg:rgba(106,76,147,.10)}
/* status pills for a project: in progress = blue, proposal = plum, on hold and done = grey */
.pill.pj-on{background:var(--pj-sky-bg);color:var(--pj-sky)}
.pill.pj-prop{background:var(--pj-plum-bg);color:var(--pj-plum)}
.pill.pj-hold,.pill.pj-done{background:rgba(32,30,29,.06);color:var(--text-3)}

/* projects list: one row per project, the whole row opens the project */
.pj-rows{display:grid;gap:10px}
.pj-row{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.7fr) 128px 32px 14px;gap:8px 24px;align-items:center;padding:18px 22px;background:var(--white);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;position:relative;transition:border-color .15s}
.pj-row:hover,.pj-row.hov{border-color:var(--line-2)}
.pj-th{width:56px;height:42px;border-radius:6px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:grid;align-content:start;gap:3px;padding:6px}
.pj-th i{display:block;height:4px;border-radius:2px;background:var(--line)}
.pj-th i:first-child{height:12px;background:linear-gradient(45deg,rgba(30,127,92,.30),rgba(155,235,88,.30))}
.pj-th i:nth-child(3){width:60%}
.pj-th.blank{place-items:center;align-content:center;color:var(--line-3)}
.pj-th.blank svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.pj-t b{display:block;font-weight:600;font-size:16px;letter-spacing:-.012em;line-height:1.3}
.pj-t .s{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:5px;font-size:13px;color:var(--text-3)}
.pj-where{min-width:0}
.pj-where .sc-mini{margin:0 0 6px}
.pj-where .sc-mini .sl{display:none}
.pj-where p{margin:0;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pj-where p b{color:var(--text-2);font-weight:500}
.nw{white-space:nowrap}
.pj-you{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pj-you .court{font-weight:500}
.pj-own{width:30px;height:30px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;font-weight:600;font-size:11.5px;color:var(--text-2);letter-spacing:.02em}
.pj-chev{width:12px;height:12px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* hover thumbnail: the latest deliverable, larger, above the row */
.pj-pop{position:absolute;left:14px;top:calc(100% - 8px);z-index:3;width:220px;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh-md);padding:8px}
.pj-pop .pj-th{width:100%;height:120px;gap:6px;padding:10px}
.pj-pop .pj-th i{height:7px}.pj-pop .pj-th i:first-child{height:44px}
.pj-pop span{display:block;font-size:12px;color:var(--text-3);margin:7px 2px 1px}
.pj-done-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pj-row.quiet{background:transparent;border-style:dashed}
.pj-row.quiet .pj-t b{font-weight:500;color:var(--text-2)}

/* filter chips: show one project's items, the groups stay the same */
.pj-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pj-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);background:var(--white);font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;flex:none}
.pj-chip .c{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pj-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pj-chip.on .c{color:rgba(255,255,255,.7)}

/* project tag inside a card's meta line */
.pj-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-2);padding:1px 8px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line);background:var(--paper);margin-right:2px;white-space:nowrap}
.pj-tag::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--line-3)}

/* strip with several projects: one line each inside one card */
.pj-strips{padding:6px 24px}
.pj-sr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 28px;align-items:center;padding:14px 0}
.pj-sr+.pj-sr{border-top:1px solid var(--line)}
.pj-sr .t{font-weight:600;font-size:15px;letter-spacing:-.01em}
.pj-sr .t span{font-weight:400;font-size:13px;color:var(--text-3);margin-left:8px;font-variant-numeric:tabular-nums}
.pj-sr .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--deep);text-decoration:none;white-space:nowrap}
.pj-sr .go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pj-more{display:block;padding:12px 0 10px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}
.pj-more a{color:var(--deep);font-weight:500;text-decoration:none}

/* billing rows with a project column */
.pj-bill .sc-b{grid-template-columns:minmax(0,1fr) 170px 150px 96px 72px}
.pj-bill .sc-b:first-child{border-top:0;padding-top:4px}
.pj-bill .pc{min-width:0}
.pj-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0}
.pj-sum>div{padding:18px 24px}
.pj-sum>div+div{border-left:1px solid var(--line)}
.pj-sum b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pj-sum span{font-size:13px;color:var(--text-3)}

/* breadcrumb in the band kicker */
.band-k .crumb{color:var(--text-3);text-decoration:none}
.band-k .sep{color:var(--line-3)}

/* compact deliverable list inside a project */
.pj-dl{padding:4px 24px}
.pj-d{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:4px 16px;align-items:center;padding:14px 0}
.pj-d+.pj-d{border-top:1px solid var(--line)}
.pj-d .dic{width:36px;height:36px}
.pj-d b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em}
.pj-d .s{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.pj-d .pill{justify-self:end}

.pj-pop{display:none}
.pj-row:hover .pj-pop,.pj-row:focus-visible .pj-pop{display:block}
.pj-row:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.pj-note{margin:10px 2px 0}
.pj-empty{padding:22px 24px}
.sect a.sect-a{color:var(--deep);text-decoration:none;font-weight:500;font-size:13px}
.sect a.sect-a:hover{text-decoration:underline}
.zrow .meta .pj-tag{margin-right:0}
@container (max-width:760px){
  .pj-row{grid-template-columns:44px minmax(0,1fr) 30px;gap:12px 14px;padding:16px}
  .pj-th{width:44px;height:34px;padding:5px;gap:2px}.pj-th i:first-child{height:9px}
  .pj-where{grid-column:1/-1;grid-row:2;padding-top:12px;border-top:1px solid var(--line)}
  
  .pj-you{grid-column:1/-1;grid-row:3}
  .pj-own{grid-column:3;grid-row:1}
  .pj-chev{display:none}
  .pj-pop{display:none}
  .pj-sr{grid-template-columns:minmax(0,1fr) auto}
  .pj-sr .sc-line{grid-column:1/-1;grid-row:2}
  .pj-strips{padding:4px 18px}
  .pj-bill .sc-b{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .pj-bill .pc{grid-column:1;grid-row:2}
  .pj-bill .sc-b .pill{grid-column:1;grid-row:3}
  .pj-bill .sc-b .amt{grid-column:2;grid-row:1}
  .pj-bill .sc-b .btn{grid-column:2;grid-row:2/span 2;align-self:center}
  .pj-sum{grid-template-columns:1fr}
  .pj-sum>div{padding:14px 18px}
  .pj-sum>div+div{border-left:0;border-top:1px solid var(--line)}
  .pj-dl{padding:2px 16px}
  .pj-d{grid-template-columns:36px minmax(0,1fr)}
  .pj-d .pill{grid-column:2;justify-self:start}
  .pj-d .btn{grid-column:2;justify-self:start}
  .pj-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
}
/* ===== end projects ===== */
/* Financials: what belongs to a project (deliverables, quotes and invoices, who it is for) */
.fd.fd-links{grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:none;margin:16px 0}
.fd-links .fd-row{grid-template-columns:76px minmax(0,auto) minmax(0,1fr) auto}
.fd-links .fd-row b{white-space:normal}
.fd-links .pl-b{grid-template-columns:18px auto minmax(0,1fr);cursor:pointer}
.fd-links .pl-b input{margin:0;width:16px;height:16px;accent-color:var(--forest)}
.fd-links .fd-add select{min-width:0;flex:1}
.fd-links .fd-add input{min-width:0;flex:1}
.fd-links .small{margin:8px 0 0}
@container (max-width:760px){ .fd.fd-links{grid-template-columns:minmax(0,1fr)} }
/* chips are links: no underline, room below them */
.pj-chips{margin:0 0 16px}
a.pj-chip{text-decoration:none}
a.pj-chip:hover{border-color:var(--line-3);color:var(--text)}
a.pj-chip.on:hover{color:#fff}
/* ===== invoices: status pills, the client's invoice view and pay panel, the admin send dialog ===== */
.pill.iv-paid{background:rgba(32,30,29,.07);color:var(--text)}
.pill.iv-void{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.pill.iv-sched{background:rgba(47,111,176,.10);color:#2F6FB0}
.iv-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.iv-doc{padding:28px 32px}
.iv-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.iv-meta .lbl{color:var(--text-3);margin:0 0 6px}
.iv-meta p{margin:0;font-size:14px;line-height:1.5}
.iv-scroll{overflow-x:auto}
.iv-lines{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:14px}
.iv-lines th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:500;text-align:left;padding:12px 0;border-bottom:1px solid var(--line)}
.iv-lines td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.iv-lines td b{display:block;font-weight:600}
.iv-lines td span{display:block;font-size:13px;color:var(--text-3);margin-top:3px;white-space:pre-line}
.iv-lines .n{text-align:right;padding-left:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.iv-tot{display:grid;gap:8px;margin:16px 0 0 auto;max-width:280px;font-size:14px;font-variant-numeric:tabular-nums}
.iv-tot div{display:flex;justify-content:space-between;gap:16px;color:var(--text-2)}
.iv-tot .due{border-top:1px solid var(--line-2);padding-top:10px;font-size:17px;color:var(--text)}
.iv-tot .due b{font-weight:700}
.iv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.iv-pay{padding:24px;display:grid;gap:14px}
.iv-pay .lbl{color:var(--text-3);margin:0}
.iv-amt{margin:0;font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.iv-h{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.iv-ways{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.iv-ways li{padding:12px 14px;border:1px solid var(--line);border-radius:8px;display:grid;gap:3px}
.iv-ways li:first-child{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}
.iv-ways b{font-size:14px;font-weight:600}
.iv-ways span{font-size:13px;color:var(--text-3);line-height:1.45}
.iv-go{justify-content:center;width:100%}
.iv-safe{margin:0;padding-top:12px;border-top:1px solid var(--line)}
.iv-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.iv-kv span{color:var(--text-3)}
.sign-card.iv-dlg{width:min(940px,100%)}
.iv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.iv-cols>div{display:grid;gap:12px;align-content:start;min-width:0}
.iv-cols .lbl{margin:0;color:var(--text-3)}
.iv-rec{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px}
.iv-rec .chk span .muted{font-size:12.5px}
.iv-mail{padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--paper);display:grid;gap:10px;font-size:14px}
.iv-mail p{margin:0;color:var(--text-2);line-height:1.5}
.iv-note{padding:10px 12px;border-left:3px solid var(--live);background:var(--white);white-space:pre-wrap}
.iv-btn{justify-self:start;background:var(--forest);color:#fff;font-size:13px;font-weight:500;padding:8px 14px;border-radius:6px}
@container (max-width:860px){ .iv-grid{grid-template-columns:minmax(0,1fr)} #ivPanel{order:-1} }
@container (max-width:600px){ .iv-doc{padding:20px} .iv-meta{grid-template-columns:minmax(0,1fr)} }
@media(max-width:760px){ .iv-cols{grid-template-columns:minmax(0,1fr)} }
/* ===== end invoices ===== */
/* new invoice dialog */
.fin-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.in-src{display:flex;gap:8px 18px;flex-wrap:wrap}
.in-n{width:64px}
.in-lines{display:grid;gap:8px}
.in-l{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 80px 100px 96px 24px;gap:8px;align-items:center}
.in-l input{min-width:0;width:100%;font-size:13px;padding:7px 9px;border:1px solid var(--line-3);border-radius:6px;background:var(--white)}
.in-l b{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.in-la{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.in-tot{font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:760px){ .in-l{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .in-l b{text-align:left} }

/* staff only: an invoice past its due date */
.pill.iv-due{background:var(--warn-bg);color:var(--warn-ink)}

/* one status palette: amber is the client's move, sky is Tangible's, grey is done. Brand green stays on buttons and the mark. */
.pill.in_review{background:rgba(201,128,30,.13);color:#9A5A08}
.pill.changes_requested,.pill.approved{background:rgba(47,111,176,.10);color:#2F6FB0}
.pill.delivered,.pill.replaced{background:rgba(32,30,29,.06);color:var(--text-2)}
.pill.st-open{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.rail .n.live,.rail a.on .n{background:rgba(32,30,29,.08);color:var(--ink)}
.dc.dr-changes_requested .dc-bar i,.stage-changes_requested .iprog .bar i{background:#2F6FB0}
/* earlier versions: one line each */
.card.ev{padding:4px 22px}
.ev-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-2);text-decoration:none}
.ev-r:first-child{border-top:0}
.ev-r:hover span:first-child{color:var(--text)}
.ev-o{color:var(--deep);font-weight:500}
/* Scope and billing: one closed row at the foot of a project page */
.sb{background:var(--white);border:1px solid var(--line);border-radius:10px}
.sb>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:16px 22px}
.sb>summary::-webkit-details-marker{display:none}
.sb>summary b{font-weight:600;font-size:15px}
.sb>summary .s{grid-column:1;font-size:13px;color:var(--text-3)}
.sb>summary .tog{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--deep)}
.sb>summary .tog svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.sb[open]>summary .tog svg{transform:rotate(90deg)}
.sb>summary:focus-visible{outline:2px solid var(--deep);outline-offset:-2px;border-radius:10px}
.sb .in{padding:4px 22px 22px;border-top:1px solid var(--line)}
.sb .in>.sc>.sc-sec:first-child,.sb .in>.sb-bill:first-child{padding-top:22px}
.sb .in .sc+.sb-bill{border-top:1px solid var(--line);margin-top:28px;padding-top:28px}
@media(max-width:640px){.sb>summary{padding:14px 16px}.sb .in{padding:4px 16px 18px}.card.ev{padding:2px 16px}}
/* client project filter: the admin tab line; on a phone it scrolls sideways instead of wrapping */
.ibx-tabs.pj-tabs{margin:0 0 20px}
@media(max-width:640px){.ibx-tabs.pj-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ibx-tabs.pj-tabs::-webkit-scrollbar{display:none}}

/* Billing: a project dropdown at the end of the tab line */
.bl-pf{margin-left:auto;padding:0 0 6px}
.bl-pf select{font:inherit;font-size:13px;color:var(--text-2);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:6px 28px 6px 10px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23716A64' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:12px;cursor:pointer}
.bl-pf select:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button.ibx-tab{cursor:pointer;font-family:inherit}
@media(max-width:640px){.bl-pf{margin-left:8px}}
/* projects list: the latest deliverable's icon in place of a placeholder thumbnail */
.pj-ic{display:grid;place-items:center;width:56px;height:42px}
.pj-pop{display:none!important}

/* Deliverables tabs; a project dropdown at the end of the line */
.bl-pf{margin-left:auto}
.sc-intro{margin:-4px 0 12px}
/* project billing row: the pill sizes to its label so it never runs into the amount */
@container (min-width:761px){.sc-b{grid-template-columns:minmax(0,1fr) auto 104px 72px}}
.sc-b .pill{white-space:nowrap}

/* a section count sits beside its heading, in the tab-count style */
.sect-n{display:inline-block;vertical-align:2px;margin-left:6px;font-size:11px;font-weight:500;line-height:1;padding:4px 6px;border-radius:4px;background:rgba(32,30,29,.06);color:var(--text-2);font-variant-numeric:tabular-nums;letter-spacing:0}
/* project rows: no owner badge on the client side */
.pj-row{grid-template-columns:56px minmax(0,1fr) minmax(0,1.7fr) 128px 14px}
@container (max-width:760px){.pj-row{grid-template-columns:44px minmax(0,1fr) 14px}.pj-chev{display:block;grid-column:3;grid-row:1}.pj-ic{width:44px;height:34px}}
/* finished states read green: Delivered and Paid (Brad, 18 Oct) */
.pill.delivered,.pill.iv-paid{background:rgba(63,187,99,.14);color:var(--forest)}

/* ---------- Home ---------- */
.rail .rail-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);border-radius:0 0 6px 6px}
@media(max-width:820px){.rail .rail-foot{margin-top:0;padding-top:8px;border-top:0;border-radius:6px}}
.hm{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
@container (max-width:900px){.hm{grid-template-columns:minmax(0,1fr);gap:32px}}
.hm-main{min-width:0;max-width:720px}
.hm-hi{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.hm-hi p{margin:0;font-size:15px;color:var(--text-2)}
.hm-hi a{font-size:13px;color:var(--deep);text-decoration:none;font-weight:500}
.hm-hi a:hover{text-decoration:underline}
.hm-h1{margin:0 0 32px;font-weight:400;font-size:38px;line-height:1.15;letter-spacing:-.025em;text-wrap:balance}
@container (max-width:560px){.hm-h1{font-size:28px;margin-bottom:24px}}
.hm-k{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hm-k::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--live),var(--lime))}
.hm-acts{display:grid;gap:10px;margin:0 0 40px}
/* every row: icon, text, a 120px button column. Buttons fill the column, so they line up down the page */
.hm-act{display:grid;grid-template-columns:36px minmax(0,1fr) 120px;gap:4px 16px;align-items:center;padding:16px 18px;border:1px solid #CFE3D7;background:var(--white);border-radius:10px}
.hm-ic{width:36px;height:36px;border-radius:9px;background:#F1F8F4;display:grid;place-items:center;color:var(--deep)}
.hm-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hm-tx{min-width:0}
.hm-tx b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.hm-tx .s{display:block;margin-top:3px;font-size:13px;color:var(--text-2);line-height:1.45}
.hm-tx .p{color:var(--text-3)}
.hm-go{display:flex;justify-content:stretch}
.hm-go .btn{width:100%;justify-content:center;white-space:nowrap}
.hm-bar{display:block;height:4px;border-radius:2px;background:#E2EEE6;overflow:hidden;margin-top:10px;max-width:320px}
.hm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--deep),var(--live))}
.hm-none{margin:-24px 0 32px}
.hm-done{display:grid;border-top:1px solid var(--line)}
.hm-done>div{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--text-2)}
.hm-done svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--live);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hm-done a{margin-left:auto;color:var(--deep);text-decoration:none;font-weight:500;white-space:nowrap}
@container (max-width:560px){.hm-act{grid-template-columns:36px minmax(0,1fr);padding:14px}.hm-go{grid-column:2;justify-content:flex-start;margin-top:8px}.hm-go .btn{width:auto;min-width:120px}.hm-done>div{flex-wrap:wrap}.hm-done a{margin-left:26px}}
/* at a glance */
.hm-side{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:22px 20px 10px;position:sticky;top:100px}
@container (max-width:900px){.hm-side{position:static}}
.hm-side h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.hm-side .dt{margin:4px 0 14px;font-size:12.5px;color:var(--text-3)}
.hm-tabs{margin-bottom:4px}
.hm-tabs .ibx-tab{font-size:13.5px;padding:8px 8px 11px}
.hm-tabs .ibx-tab::after{left:8px;right:8px}
.gl{display:grid}
.gl[hidden]{display:none}
.gl-r{display:grid;gap:4px;padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.gl-r:last-child{border-bottom:0}
a.gl-a:hover b{color:var(--deep)}
.gl-r .l{font-size:12px;color:var(--text-3)}
.gl-r b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.gl-r .s{font-size:13px;color:var(--text-2)}
.gl-r .sc-mini{margin:6px 0 2px}
.gl-l{display:grid;gap:2px;text-decoration:none;color:inherit;padding:4px 0}
.gl-l:hover b{color:var(--deep)}
.gl-r .lk{font-size:13px;color:var(--deep);text-decoration:none;font-weight:500;margin-right:14px}
.gl-who{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500}
.gl-who::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.gl-who.you{color:#9A5A08}.gl-who.tang{color:#2F6FB0}
/* the admin header's app name and the rail's icons and credit only show with the shared shell (system.css) */
.brand .ctx,.rail .ri,.rail .rail-by{display:none}
.gl-msg{display:grid;gap:8px;padding:14px 2px;border-bottom:1px solid var(--line)}
.gl-msg textarea{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--white);color:var(--text)}
.gl-msg textarea:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.gl-msg .row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--text-3)}
/* the stage line in At a glance: nodes only, the stage name is on the line below */
.gl-r .sc-mini .sl{display:none}
.gl-r .sc-mini{max-width:100%;overflow:hidden}
/* Home, as the approved comp: one white work surface, At a glance as a full-height column on its right, tinted step rows */
body.home .pane{gap:0}
.hm{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;gap:0;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100vh - 170px)}
.hm-main{max-width:none;padding:44px 52px 56px}
.hm-main>*{max-width:700px}
.hm-act{background:#F6FBF8;border-color:#CFE3D7}
.hm-ic{background:var(--white);box-shadow:inset 0 0 0 1px #CFE3D7}
.hm-side{position:static;border:0;border-left:1px solid var(--line);border-radius:0;padding:36px 26px 24px;background:var(--white)}
@container (max-width:900px){.hm{grid-template-columns:minmax(0,1fr);min-height:0}.hm-side{border-left:0;border-top:1px solid var(--line)}}
@container (max-width:560px){.hm-main{padding:28px 18px 32px}.hm-side{padding:24px 18px}}
/* rail: the current page is a light fill with a 2px green edge, not a white box */
.rail a.on{background:rgba(32,30,29,.045);box-shadow:none;position:relative;font-weight:600}
.rail a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--live),var(--lime))}
@media(max-width:820px){.rail a.on{background:none;box-shadow:inset 0 -2px 0 var(--live)}.rail a.on::before{display:none}}
.rail .n.live,.rail a.on .n.live{background:rgba(201,128,30,.14);color:#8A5208}
/* Home runs edge to edge like the comp: rail on the ground, then one white surface to the right edge with At a glance as its last column */
body.home main{padding:76px 0 0}
body.home #app{max-width:none;padding-inline:0}
body.home .portal{grid-template-columns:232px minmax(0,1fr);gap:0;align-items:stretch;min-height:calc(100vh - 76px)}
body.home .rail{padding:28px 16px;top:76px;align-self:start}
body.home .rail .rail-h{display:none}
body.home .pane{padding-bottom:0}
body.home .hm{border:0;border-left:1px solid var(--line);border-radius:0;min-height:calc(100vh - 76px)}
body.home .hm-side{padding-top:44px}
@media(max-width:820px){body.home .portal{grid-template-columns:minmax(0,1fr)}body.home .rail{padding:12px 16px}body.home .hm{border-left:0;border-top:1px solid var(--line)}}
/* the branded blocks: Studio over the comps to review, Copilot over its questions. One white card, lines on hairlines, buttons in the same column as the rows */
.hm-blk{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px 18px 4px}
.hm-brand{display:flex;align-items:flex-end;margin:0 0 12px}
.hm-brand>i{flex:1;height:1px;margin:0 0 5px 10px;background:linear-gradient(90deg,var(--live),transparent)}
.hm-brand-cp .cp-head{flex:1;margin:0}
.hm-st{display:flex;align-items:center;gap:10px}
.hm-smk{display:block;overflow:visible}
.hm-st-t{display:inline-flex;flex-direction:column;line-height:1}
.hm-st-t .k{font:500 9px/1 Archivo,system-ui,sans-serif;letter-spacing:.22em;color:#918B86}
.hm-st-t .n{font:300 21px/1 Archivo,system-ui,sans-serif;color:var(--forest);transform:skewX(-7deg);transform-origin:left bottom;margin-top:3px}
.hm-bk{margin:0 0 4px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hm-ln{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:4px 16px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
@container (max-width:560px){.hm-ln{grid-template-columns:minmax(0,1fr)}.hm-ln .hm-go{justify-content:flex-start;margin-top:6px}.hm-ln .hm-go .btn{width:auto;min-width:120px}.hm-blk{padding:14px 14px 4px}}
/* At a glance runs the full height of the page, as in the comp */
body.home .hm{align-items:stretch}
body.home .hm-main{align-self:start}

/* the phone menu bar only exists with the shared shell (system.css) */
.rail .rail-bar{display:none}