/* Legal Gridlock client portal.
   One stylesheet for the whole account: the rail, the cards, the tables and the message threads.
   Tokens first, then components, then the phone layout at the end. */

:root{
	--ground:#F4F2FA; --surface:#FFFFFF; --deep:#150B35; --deep2:#2A1760; --purple:#6D3FE0; --lift:#9B7BF5;
	--ink:#16122A; --muted:#6A6480; --faint:#8F89A6; --line:#F1EEF9; --edge:#E7E2F3;
	--good:#0E8A5F; --good-bg:#E4F3EC; --good-ink:#0E6B4A;
	--warn:#A8690B; --warn-bg:#FCF1DC; --warn-ink:#8A5709;
	--bad:#C2325A;  --bad-bg:#FDF1F4;  --bad-ink:#8A3354;
	--info-bg:#E7EEFC; --info-ink:#2A4FA8;
	--soft-bg:#F0ECFB; --soft-ink:#4B2BA8;
	--r-lg:22px; --r-md:14px;
	--shadow:0 1px 2px rgba(21,11,53,.04),0 14px 34px -18px rgba(21,11,53,.30);
	--rail:218px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;background:var(--ground);color:var(--ink);
	font-family:'Geist',ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:14.5px;line-height:1.55;
	font-feature-settings:'tnum' 1;letter-spacing:-0.006em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;margin:0;letter-spacing:-0.028em;text-wrap:balance}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--purple);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------------- rail */

.rail{
	position:fixed;inset:0 auto 0 0;width:var(--rail);background:var(--deep);color:#fff;
	padding:20px 14px;display:flex;flex-direction:column;gap:3px;z-index:30;
}
.rail .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:15px;letter-spacing:-0.02em;color:#fff}
.rail .logo:hover{text-decoration:none}
.rail .mk{height:28px;width:28px;border-radius:9px;background:linear-gradient(145deg,#8B6CF0,#5B2FD4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nv{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:#A79CC9;font-size:13.5px;font-weight:500}
.nv:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nv.on{background:rgba(155,123,245,.17);color:#fff;font-weight:600}
.nv .ct{margin-left:auto;font-size:11px;font-weight:600;background:rgba(255,255,255,.12);border-radius:999px;padding:1px 7px}
.me{margin-top:auto;padding:14px 11px 0;border-top:1px solid rgba(255,255,255,.09)}
.me .lb{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:#7E72A6}
.me .em{font-size:12.5px;color:#E6E1F6;margin-top:3px;word-break:break-all}
.me a{font-size:12.5px;color:#A79CC9;display:inline-block;margin-top:7px}

.burger{display:none;position:fixed;top:14px;left:14px;z-index:40;width:40px;height:40px;border-radius:12px;border:none;background:var(--deep);color:#fff;cursor:pointer;align-items:center;justify-content:center}

/* ------------------------------------------------------------------ layout */

.main{margin-left:var(--rail);padding:26px 30px 60px;max-width:1340px}
.door-main{padding:0 16px}

.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 18px;flex-wrap:wrap}
.phead h1{font-size:27px;margin:6px 0 0}
.pacts{display:flex;gap:9px;flex-wrap:wrap}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--faint);font-weight:600}
.mini{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:600}

.cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:18px}
.cols.wide{grid-template-columns:minmax(0,1fr)}
.stack>*+*{margin-top:18px}

/* ------------------------------------------------------------------- cards */

.card{background:var(--surface);border-radius:var(--r-lg);padding:21px 23px;box-shadow:var(--shadow)}
.card.flush{padding:0;overflow:hidden}
.ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ct2{font-family:'Instrument Sans',sans-serif;font-size:16px;font-weight:600}
.cs{font-size:12.8px;color:var(--muted);margin-top:4px}

/* hero, the dark panel at the top of a section */
.hero{position:relative;overflow:hidden;background:var(--deep2);color:#fff;border-radius:var(--r-lg);padding:26px 28px}
.hero h1,.hero h2{color:#fff}
.hero .eyebrow{color:#B6A8E8}
.hero p{font-size:13.2px;color:#C8BDEC;margin:9px 0 0;line-height:1.6;max-width:56ch}
.orb{position:absolute;border-radius:50%;pointer-events:none;background:rgba(155,123,245,.26)}
.o1{width:300px;height:300px;right:-70px;top:-130px}
.o2{width:190px;height:190px;right:84px;top:34px;background:rgba(155,123,245,.14)}
.heroR{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.chips{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.12);color:#EDE8FB}
.chip .d2{width:6px;height:6px;border-radius:50%;background:#FFC24A}
.chip .d2.ok{background:#5BD6A0}

.ring{position:relative;flex-shrink:0}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .big{font-family:'Instrument Sans',sans-serif;font-size:26px;font-weight:700;line-height:1;letter-spacing:-0.03em}
.ring .cap{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#B6A8E8;margin-top:4px}

/* ----------------------------------------------------------------- buttons */

.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--r-md);padding:10px 16px;font:600 13.5px 'Geist',ui-sans-serif,system-ui,sans-serif;cursor:pointer;letter-spacing:-0.006em}
.b:hover{text-decoration:none}
.b.pri{background:var(--purple);color:#fff;box-shadow:0 6px 16px -6px rgba(109,63,224,.7)}
.b.pri:hover{background:#5D31CC}
.b.soft{background:var(--soft-bg);color:var(--soft-ink)}
.b.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge)}
.b.line:hover{box-shadow:inset 0 0 0 1.5px #CFC4EE}
.b.glass{background:rgba(255,255,255,.14);color:#fff}
.b.glass:hover{background:rgba(255,255,255,.22)}
.b.wide{width:100%}
.b[disabled]{opacity:.5;cursor:default}

/* ------------------------------------------------------------- key / value */

.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv:first-of-type{border-top:none;padding-top:2px}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right}
.kv .v.quiet{font-weight:500;color:var(--muted);font-size:12px}

/* ------------------------------------------------------------------- steps */

.steps{margin-top:18px;position:relative}
.steps:before{content:"";position:absolute;left:13px;top:12px;bottom:34px;width:2px;background:#EAE5F7;border-radius:2px}
.st{position:relative;display:flex;gap:15px;padding:0 0 19px}
.st:last-child{padding-bottom:0}
.bd{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;z-index:1;border:3px solid #fff}
.bd.done{background:var(--good);color:#fff}
.bd.now{background:var(--purple);color:#fff;box-shadow:0 0 0 4px rgba(109,63,224,.16)}
.bd.todo{background:#EDEAF6;color:var(--faint)}
.st .tt{font-weight:600;font-size:14.5px;padding-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st .mm{font-size:13px;color:var(--muted);margin-top:3px;max-width:58ch}
.acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

.tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:3px 7px;white-space:nowrap}
.tag.you{background:#FDF0D8;color:var(--warn)}
.tag.us{background:var(--info-bg);color:var(--info-ink)}

/* ------------------------------------------------------------------ pills */

.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:7px;padding:3px 8px;white-space:nowrap}
.pill.open{background:var(--soft-bg);color:var(--soft-ink)}
.pill.pending{background:var(--warn-bg);color:var(--warn-ink)}
.pill.waiting_client{background:var(--info-bg);color:var(--info-ink)}
.pill.resolved{background:var(--good-bg);color:var(--good-ink)}
.pill.closed{background:#EFEEF4;color:var(--muted)}

/* ---------------------------------------------------------------- statuses */

.stt{display:inline-flex;align-items:center;gap:7px;font-size:12.8px;font-weight:500}
.stt .dt{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stt.ok{color:var(--good-ink)}   .stt.ok .dt{background:var(--good)}
.stt.wn{color:var(--warn-ink)}   .stt.wn .dt{background:#E0A528}
.stt.no{color:#9A2A4C}           .stt.no .dt{background:var(--bad)}
.stt.nu{color:var(--muted)}      .stt.nu .dt{background:#B6B0C6}

/* ------------------------------------------------------------------ notes */

.note{display:flex;align-items:center;gap:13px;border-radius:16px;padding:14px 17px;flex-wrap:wrap}
.note.warn{background:var(--warn-bg)}
.note.good{background:var(--good-bg)}
.note.bad{background:var(--bad-bg)}
.note .t{font-weight:600;font-size:13.8px}
.note .m{font-size:12.8px;margin-top:2px}
.note.warn .m{color:#7C5B16}
.note.good .m{color:#4D6B5E}
.note.bad .m{color:var(--bad-ink)}
.note .grow{flex-grow:1;min-width:220px}

/* ------------------------------------------------------------------ stats */

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.stat{background:var(--surface);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .lab{font-size:11.8px;color:var(--muted);font-weight:500}
.stat .big{font-family:'Instrument Sans',sans-serif;font-size:30px;font-weight:700;letter-spacing:-0.035em;margin-top:9px;line-height:1}
.stat .big small{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:-0.02em}
.stat .sub{font-size:12px;margin-top:7px;display:flex;align-items:center;gap:5px;font-weight:500;color:var(--muted)}
.stat .sub.up{color:var(--good-ink)}
.stat .sub.care{color:var(--warn-ink)}

/* ------------------------------------------------------------------- rows */

.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);color:inherit}
.row:first-child{border-top:none}
.row:hover{text-decoration:none}
a.row:hover .tt{color:var(--purple)}
.row .tt{font-weight:600;font-size:13.8px;line-height:1.35}
.row .mm{font-size:11.8px;color:var(--faint);margin-top:3px}
.row .grow{flex-grow:1;min-width:0}
.stripe{width:3px;height:32px;border-radius:3px;flex-shrink:0}
.stripe.open{background:var(--purple)}
.stripe.pending{background:#E0A528}
.stripe.waiting_client{background:#2A4FA8}
.stripe.resolved{background:var(--good)}
.stripe.closed{background:#C9C4D6}

/* avatars */
.ini{border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Instrument Sans',sans-serif;font-weight:700;flex-shrink:0;width:38px;height:38px;font-size:13px}
.ini.lg{width:44px;height:44px;border-radius:13px;font-size:15px}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who .n{font-weight:600;font-size:13.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .e{font-size:11.8px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------------------ table */

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:600;padding:14px 22px;background:#FAF9FD;white-space:nowrap}
.tbl td{padding:12px 22px;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tr:first-child td{border-top:none}
.tfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;background:#FAF9FD;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);flex-wrap:wrap}

/* ---------------------------------------------------------------- threads */

.twrap{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
.tlist{display:flex;flex-direction:column}
.tlist a{display:flex;gap:12px;padding:13px 20px;border-top:1px solid var(--line);color:inherit}
.tlist a:first-of-type{border-top:none}
.tlist a:hover{background:#FAF8FE;text-decoration:none}
.tlist a.sel{background:#F7F4FE;box-shadow:inset 3px 0 0 var(--purple)}
.filters{display:flex;gap:6px;padding:0 20px 13px;flex-wrap:wrap}
.f{font-size:12px;font-weight:600;border-radius:999px;padding:5px 11px;background:#F2EFFA;color:var(--muted);border:none;cursor:pointer}
.f.on{background:var(--deep2);color:#fff}
.f:hover{text-decoration:none}

.thead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:19px 23px 15px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.thead h2{font-size:18px}
.msgs{padding:18px 23px;display:flex;flex-direction:column;gap:14px}
.m{max-width:80%;border-radius:18px;padding:13px 16px;font-size:13.8px;line-height:1.6}
.m.them{background:#F3F0FB;border-bottom-left-radius:6px}
.m.us{background:var(--deep2);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.m .wh{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.62;margin-bottom:5px}
.composer{margin:0 23px 20px;border-radius:18px;background:#F7F6FC;padding:13px 15px}
.ctools{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.sla{display:inline-flex;align-items:center;gap:7px;background:var(--good-bg);color:var(--good-ink);border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600}

/* ------------------------------------------------------------------ forms */

.field{margin:0 0 16px}
.field label,.lab{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 8px}
.in,.field input,.field select,.field textarea{
	width:100%;padding:12px 14px;border-radius:var(--r-md);border:none;box-shadow:inset 0 0 0 1.5px var(--edge);
	font:inherit;color:var(--ink);background:#fff;
}
.in::placeholder,.field textarea::placeholder,.field input::placeholder{color:#A9A3BC}
.field textarea,.ta{min-height:124px;resize:vertical;line-height:1.6}
.in:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--purple)}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cat{text-align:left;background:#fff;border:none;border-radius:15px;padding:14px 15px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--edge);display:block;color:inherit}
.cat:hover{box-shadow:inset 0 0 0 1.5px #CFC4EE;text-decoration:none}
.cat input{position:absolute;opacity:0;pointer-events:none}
.cat.on,.cat:has(input:checked){box-shadow:inset 0 0 0 2px var(--purple);background:#F8F5FF}
.cat .ic{width:30px;height:30px;border-radius:10px;background:var(--soft-bg);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.cat .nm{font-weight:600;font-size:13.4px;line-height:1.3}
.cat .sb{font-size:11.8px;color:var(--faint);margin-top:4px;line-height:1.4}

.err{background:var(--bad-bg);color:var(--bad-ink);border-radius:12px;padding:11px 15px;font-size:13.2px;margin:0 0 16px}
.ok{background:var(--good-bg);color:var(--good-ink);border-radius:12px;padding:11px 15px;font-size:13.2px;margin:0 0 16px}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}

/* ------------------------------------------------------------------- door */

.door{display:flex;align-items:center;justify-content:center;background:var(--ground)}
.door .door-main{width:100%;max-width:460px;padding:40px 16px}
.doorbrand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:16px;margin:0 0 22px;color:var(--ink)}
.doorbrand .mk{height:30px;width:30px;border-radius:10px;background:linear-gradient(145deg,#8B6CF0,#5B2FD4);display:flex;align-items:center;justify-content:center}
.door .card{padding:28px}
.door h1{font-size:23px}
.doorfoot{text-align:center;color:var(--faint);font-size:12.3px;margin-top:20px}

/* ------------------------------------------------------------------ phone */

@media (max-width:900px){
	.cols,.twrap{grid-template-columns:minmax(0,1fr)}
	.burger{display:flex}
	.rail{transform:translateX(-100%);transition:transform .18s ease}
	body.navopen .rail{transform:none;box-shadow:0 0 0 100vmax rgba(21,11,53,.42)}
	.main{margin-left:0;padding:70px 16px 60px}
	.m{max-width:100%}
	.tbl thead{display:none}
	.tbl td{display:block;padding:4px 18px;border-top:none}
	.tbl tr{display:block;padding:14px 0;border-top:1px solid var(--line)}
	.tbl tr:first-child{border-top:none}
}
@media (prefers-reduced-motion:reduce){
	*{animation:none !important;transition:none !important}
}