/* ===== Advokacy v2 — shared design system =====
   Modern, software-first. No serif, no gold/brass.
   Workhorse grotesk + mono for legal identifiers. */

:root{
  /* type */
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,monospace;

  /* warm-neutral surfaces */
  --bg:oklch(0.984 0.004 95);
  --surface:#ffffff;
  --surface-2:oklch(0.972 0.004 95);
  --surface-3:oklch(0.958 0.005 95);
  --ink:oklch(0.16 0.018 270);
  --ink-2:oklch(0.33 0.017 270);
  --ink-3:oklch(0.46 0.015 270);
  --border:oklch(0.912 0.005 270);
  --border-2:oklch(0.862 0.007 270);

  /* brand — authoritative indigo (tweakable hue) */
  --brand-h:264;
  --brand:oklch(0.485 0.135 var(--brand-h));
  --brand-ink:oklch(0.40 0.14 var(--brand-h));
  --brand-soft:oklch(0.955 0.028 var(--brand-h));
  --brand-line:oklch(0.86 0.05 var(--brand-h));

  /* functional / trust signals */
  --ok:oklch(0.535 0.11 158);
  --ok-soft:oklch(0.955 0.04 158);
  --ok-line:oklch(0.84 0.07 158);
  --warn:oklch(0.62 0.12 66);
  --warn-soft:oklch(0.957 0.05 75);
  --warn-line:oklch(0.85 0.09 75);
  --bad:oklch(0.545 0.17 26);
  --bad-soft:oklch(0.957 0.035 26);
  --bad-line:oklch(0.86 0.08 26);

  /* shape + depth */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(30,28,40,.05),0 1px 1px rgba(30,28,40,.04);
  --sh-2:0 2px 6px rgba(30,28,40,.06),0 6px 16px rgba(30,28,40,.05);
  --sh-3:0 12px 30px rgba(30,28,40,.10),0 4px 10px rgba(30,28,40,.06);
  --sh-pop:0 18px 48px rgba(28,26,40,.18),0 6px 16px rgba(28,26,40,.10);

  /* density */
  --gap:20px; --pad:22px; --rail-w:248px; --topbar-h:60px;
  --tr:.18s cubic-bezier(.4,0,.2,1);
}
[data-density="compact"]{--gap:13px;--pad:15px;--topbar-h:54px;--rail-w:228px;}
[data-density="comfy"]{--gap:26px;--pad:30px;--topbar-h:66px;}

[data-theme="dark"]{
  --bg:oklch(0.205 0.012 280);
  --surface:oklch(0.243 0.013 280);
  --surface-2:oklch(0.272 0.014 280);
  --surface-3:oklch(0.305 0.015 280);
  --ink:oklch(0.955 0.006 280);
  --ink-2:oklch(0.74 0.012 280);
  --ink-3:oklch(0.60 0.012 280);
  --border:oklch(0.345 0.014 280);
  --border-2:oklch(0.40 0.016 280);
  --brand:oklch(0.70 0.13 var(--brand-h));
  --brand-ink:oklch(0.80 0.12 var(--brand-h));
  --brand-soft:oklch(0.32 0.06 var(--brand-h));
  --brand-line:oklch(0.45 0.09 var(--brand-h));
  --ok:oklch(0.74 0.13 158);--ok-soft:oklch(0.32 0.06 158);--ok-line:oklch(0.45 0.08 158);
  --warn:oklch(0.80 0.13 80);--warn-soft:oklch(0.34 0.06 75);--warn-line:oklch(0.50 0.09 75);
  --bad:oklch(0.70 0.16 28);--bad-soft:oklch(0.33 0.07 26);--bad-line:oklch(0.48 0.10 26);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35);
  --sh-3:0 12px 30px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.4);
  --sh-pop:0 18px 48px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-variant-ligatures:none;
}
::selection{background:var(--brand-soft);color:var(--brand-ink)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea{font-family:inherit;color:inherit}
.mono{font-family:var(--mono);font-feature-settings:"ss01"}

/* ============ APP SHELL ============ */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr;height:100vh;height:100dvh;max-width:100vw;overflow:hidden;transition:grid-template-columns .2s cubic-bezier(.4,0,.2,1)}
@media(max-width:880px){.app{grid-template-columns:0 1fr}}
/* collapsible sidebar */
[data-rail="collapsed"] .app{grid-template-columns:0 1fr}
[data-rail="collapsed"] .rail{border-right-color:transparent}

.rail{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;white-space:nowrap;
}
.rail-top{padding:18px 16px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:opacity var(--tr)}
.rail-top:hover{opacity:.82}
.brand-mark{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(150deg,var(--brand),var(--brand-ink));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:18px;letter-spacing:-.04em;
  box-shadow:0 2px 8px color-mix(in oklch,var(--brand),transparent 60%);
}
.brand-name{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.brand-name b{color:var(--brand)}
.brand-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-top:1px}

.ask-btn{
  margin:6px 16px 14px;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:var(--brand);color:#fff;font-weight:600;font-size:13.5px;
  padding:10px 14px;border-radius:var(--r-md);transition:var(--tr);
  box-shadow:0 1px 2px color-mix(in oklch,var(--brand),transparent 50%);
}
.ask-btn:hover{background:var(--brand-ink);transform:translateY(-1px)}

.nav{padding:0 10px;display:flex;flex-direction:column;gap:2px}
.nav-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:14px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13.5px;font-weight:500;transition:var(--tr);position:relative;
}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav-item.on .ni-ico{color:var(--brand)}
.ni-ico{width:18px;height:18px;flex-shrink:0;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.ni-ico svg{width:18px;height:18px;stroke-width:1.7}
.nav-item .badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--surface-3);color:var(--ink-2);padding:1px 7px;border-radius:99px}

.rail-recents{flex:1;min-height:0;overflow-y:auto;padding:6px 10px 10px;margin-top:6px}
.rail-recents-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rail-clear{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:2px 6px;border-radius:var(--r-xs);transition:var(--tr)}
.rail-clear:hover{background:var(--surface-2);color:var(--ink-2)}
.recent{display:block;padding:8px 12px;border-radius:var(--r-sm);transition:var(--tr);cursor:pointer}
.recent:hover{background:var(--surface-2)}
.recent .rc-t{font-size:12.5px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent .rc-m{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:2px;display:flex;gap:7px}

.rail-user{border-top:1px solid var(--border);padding:12px 14px;display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink-2);flex-shrink:0}
.ru-name{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2}
.ru-mail{font-size:11px;color:var(--ink-3)}

/* ============ MAIN ============ */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.topbar{
  height:var(--topbar-h);flex-shrink:0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 22px;background:color-mix(in oklch,var(--surface),transparent 12%);
  backdrop-filter:blur(8px);position:relative;z-index:5;
}
.tb-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--ink-2);flex-shrink:0;margin-left:-6px;transition:var(--tr)}
.tb-toggle:hover{background:var(--surface-2);color:var(--ink)}
.tb-toggle svg{width:18px;height:18px}
.tb-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.tb-crumb b{color:var(--ink);font-weight:600}
.tb-crumb .sep{color:var(--border-2)}
.tb-spacer{flex:1}
.tb-chip{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);padding:6px 11px;border-radius:99px;transition:var(--tr)}
.tb-chip:hover{border-color:var(--border-2);color:var(--ink)}
.tb-chip svg{width:14px;height:14px}
.tb-chip.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}

/* deployed-branch badge — mono, subtle, truncates long branch names */
.tb-branch{font-size:11px;font-weight:500;color:var(--ink-3);max-width:200px;min-width:0}
.tb-branch .tb-branch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tb-branch svg{flex-shrink:0}

/* topbar account control */
.tb-login{white-space:nowrap}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;max-width:200px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:4px 10px 4px 4px;color:var(--ink-2);font-size:12.5px;font-weight:500;transition:var(--tr)}
.acct-btn:hover{border-color:var(--border-2);color:var(--ink)}
.acct-av{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.acct-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:210px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:6px;animation:pop .14s both}
.acct-id{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
.acct-id-n{font-size:13.5px;font-weight:600;color:var(--ink)}
.acct-id-e{font-size:11px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.acct-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-xs);font-size:13px;color:var(--ink-2);transition:var(--tr)}
.acct-item:hover{background:var(--surface-2);color:var(--ink)}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior:contain}

/* ============ shared bits ============ */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;padding:3px 9px;border-radius:99px;border:1px solid var(--border-2);color:var(--ink-2);background:var(--surface)}
.pill.brand{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}
.pill.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.pill.warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.pill.bad{color:var(--bad);background:var(--bad-soft);border-color:var(--bad-line)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-size:13px;font-weight:600;padding:9px 15px;border-radius:var(--r-sm);transition:var(--tr);border:1px solid transparent}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--border-2);color:var(--ink);background:var(--surface-2)}

.tier-badge{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:5px;border:1px solid var(--border-2);color:var(--ink-2);background:var(--surface-2)}
.tier-SC{color:var(--brand-ink);background:var(--brand-soft);border-color:var(--brand-line)}

/* scrollbars */
.scroll::-webkit-scrollbar,.rail-recents::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb,.rail-recents::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;border:2px solid var(--bg)}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

@keyframes fadeUp{from{transform:translateY(12px)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.empty-mobile{display:none}
@media(max-width:880px){.empty-mobile{display:block}}

/* ============ PRODUCT SETTINGS MENU ============
   (Replaces the prototype Tweaks authoring panel. Maps the three authoring
   controls — accent, density, dark mode — to a real product setting.) */
.set{position:relative}
.set-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);color:var(--ink-2);border:1px solid var(--border);background:var(--surface);transition:var(--tr)}
.set-btn:hover{border-color:var(--border-2);color:var(--ink);background:var(--surface-2)}
.set-btn svg{width:17px;height:17px}
.set-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:236px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:14px;animation:pop .14s both}
.set-row{margin-bottom:14px}
.set-row:last-child{margin-bottom:0}
.set-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.set-swatches{display:flex;gap:8px}
.set-sw{width:26px;height:26px;border-radius:8px;border:2px solid transparent;transition:var(--tr);position:relative}
.set-sw.on{border-color:var(--ink)}
.set-seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px}
.set-seg button{flex:1;font-size:11.5px;font-weight:500;color:var(--ink-2);padding:5px 0;border-radius:6px;transition:var(--tr);text-transform:capitalize}
.set-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:600}
.set-toggle{display:flex;align-items:center;justify-content:space-between}
.set-toggle span{font-size:13px;font-weight:500;color:var(--ink)}
.sw{width:38px;height:22px;border-radius:99px;background:var(--border-2);position:relative;flex-shrink:0;transition:var(--tr)}
.sw.on{background:var(--brand)}
.sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:var(--tr);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on i{left:18px}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;padding:10px 18px;border-radius:99px;box-shadow:var(--sh-3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .spin,.mini-spin{animation:rot 1.2s linear infinite!important}
}

/* ============ RESPONSIVE HARDENING ============
   Goals: never overflow horizontally, panels never overlap, each scrollable
   panel is independent (scrolling one does not chain to another), and the
   shell fits any width/height. */

/* min-width:0 lets flex/grid children shrink instead of forcing overflow */
.main,.tb-crumb,.rail-top>div{min-width:0}
.tb-crumb b,.tb-crumb span{min-width:0}

/* isolate every independently-scrollable panel */
.rail-recents{overscroll-behavior:contain}

/* popovers must never run off the viewport edge */
.set-menu,.lang-menu{max-width:calc(100vw - 24px)}

/* topbar: keep it on one line and shed non-essentials as width shrinks */
.topbar{flex-wrap:nowrap}
.tb-crumb{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:760px){
  .tb-chip.ok{display:none}              /* trust is still stated in the result footer */
  .tb-branch{display:none}               /* shed the branch badge on small topbars */
}
@media(max-width:560px){
  .topbar{padding:0 12px;gap:8px}
  .tb-toggle{margin-left:0}
}

/* desktop: a collapsed rail is removed from the layout (width 0) */
[data-rail="collapsed"] .rail{visibility:hidden}

/* phones/tablets: the rail becomes an overlay drawer the topbar toggle opens,
   so navigation stays reachable on small screens without stealing content
   width. Closes on toggle again, on tapping the scrim, or on navigating. */
@media(max-width:880px){
  .app{grid-template-columns:0 1fr}                 /* content takes the full width */
  .rail{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:min(280px,82vw);
        z-index:60;visibility:visible;box-shadow:var(--sh-pop);
        transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
  [data-rail="open"] .rail{transform:none}
  .rail-scrim{position:fixed;top:var(--topbar-h);right:0;bottom:0;left:0;background:rgba(20,18,30,.4);
              z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  [data-rail="open"] .rail-scrim{opacity:1;pointer-events:auto}
}
@media(min-width:881px){ .rail-scrim{display:none} }