/* ============================================================
   Lawfare DMS — document management

   A dense enterprise application skin: NetDocuments-style chrome
   (dark command bar, fixed left rail, column folder browser,
   compact document grid) drawn in the firm palette.
   ============================================================ */

:root{
  --navy:      #1C2A44;
  --navy-2:    #253654;
  --navy-3:    #2F4265;
  --slate:     #34486D;
  --ink:       #131D30;

  --brass:     #C6A15B;
  --brass-lo:  #A8853F;
  --brass-hi:  #E8D3A2;

  --bg:        #F4F5F7;
  --surface:   #FFFFFF;
  --surface-2: #FAFAFB;
  --surface-3: #F0F2F5;

  --line:      #DFE3E9;
  --line-2:    #EBEEF2;

  --fg:        #18222F;
  --fg-mute:   #5D6879;
  --fg-faint:  #737E8C;

  --link:      #2C5C9E;
  --danger:    #B3261E;
  --danger-bg: #FDECEA;
  --ok:        #1F7A4D;
  --warn:      #8A5A00;
  --warn-bg:   #FEF5E3;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bar-h: 52px;
  --rail-w: 236px;
  --radius: 3px;
  --shadow-1: 0 1px 2px rgba(19,29,48,.08), 0 1px 3px rgba(19,29,48,.06);
  --shadow-2: 0 6px 24px rgba(19,29,48,.14), 0 2px 6px rgba(19,29,48,.10);
  --shadow-3: 0 24px 64px rgba(19,29,48,.28);

  /* Tints — named so the grey and dark themes can redefine them. */
  --line-strong:  #C7CFDA;
  --link-hover:   #1B4680;
  --select:       #E9EFF9;
  --select-hover: #E0E9F6;
  --row-active:   #EEF2F8;
  --info-bg:      #EEF3FA;
  --info-line:    #CDDCF0;
  --info-fg:      #1F3E68;
  --hot-bg:       #FFFBF2;
  --ok-bg:        #E8F3EC;
  --ok-line:      #C3E0CE;
  --warn-line:    #EBD7A8;
  --danger-line:  #E7C4C0;
  --danger-fg:    #7C1D17;
  --input-bad:    #FFFBFA;
  --save-bg:      #EAF4EF;
  --save-line:    #9CC8B5;
  --save-hover:   #E2F0E9;
  --save-ico:     #D3E9DF;
  --save-ico-fg:  #1E5C47;
  --bench-bg:     #F1ECFA;
  --bench-line:   #C4B5E0;
  --bench-hover:  #EBE4F8;
  --bench-ico:    #E0D5F3;
  --bench-ico-fg: #4B3A78;
  --out-bg:       #FCFAF5;
  --out-line:     #E4D8BE;

  /* Display settings (Display settings… in the account menu). */
  --text-scale: 1;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:calc(13px * var(--text-scale));
  line-height:1.45;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }

/* Inline icons carry no intrinsic size, so give every one a sane
   default. Anything that needs a different size (the brand mark, the
   drop-zone glyph, empty-state art) overrides this with a more
   specific rule or an inline style. */
svg{ width:16px; height:16px; flex:0 0 auto; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--brass-lo); outline-offset:1px; }
::selection{ background:rgba(198,161,91,.35); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   1. Command bar
   ============================================================ */
.bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar-h); z-index:60;
  display:flex; align-items:center; gap:16px;
  padding:0 14px;
  background:linear-gradient(180deg,var(--navy-2),var(--navy));
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.brand svg{ width:26px; height:26px; display:block; }
.brand__name{
  font-family:var(--serif); font-size:calc(19px * var(--text-scale)); letter-spacing:.02em;
  color:#F5F3ED; line-height:1; white-space:nowrap;
}
.brand__name b{ font-weight:500; color:var(--brass-hi); }
.brand__sub{
  font-size:calc(9.5px * var(--text-scale)); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(188,198,214,.75); margin-top:2px; white-space:nowrap;
}

/* ---- global search (centred between the brand and the lookups) ---- */
.omni{ position:relative; flex:1 1 auto; max-width:540px; margin:0 auto; }
.omni__field{
  display:flex; align-items:center; gap:8px;
  height:32px; padding:0 10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  transition:background .15s, border-color .15s;
}
.omni__field:focus-within{ background:var(--surface); border-color:var(--brass); }
.omni__field > svg{ width:15px; height:15px; flex:0 0 auto; color:rgba(226,232,240,.8); }
.omni__field:focus-within > svg{ color:var(--fg-mute); }
.omni input{
  flex:1 1 auto; min-width:0; height:100%;
  background:transparent; border:0; outline:0;
  color:#F5F3ED; font-size:calc(13px * var(--text-scale));
}
.omni__field:focus-within input{ color:var(--fg); }
.omni input::placeholder{ color:rgba(203,213,225,.8); }
.omni__field:focus-within input::placeholder{ color:var(--fg-faint); }
/* The chip that says where the search is looking. */
.omni__scope{
  display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; max-width:45%;
  height:20px; padding:0 2px 0 7px; border-radius:10px;
  background:var(--brass); color:var(--ink); font-size:calc(11px * var(--text-scale)); font-weight:600;
}
.omni__scope-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.omni__scope-x{
  width:16px; height:16px; border:0; padding:0; border-radius:50%;
  background:transparent; color:var(--ink); font-size:calc(13px * var(--text-scale)); line-height:1; cursor:pointer;
}
.omni__scope-x:hover{ background:rgba(19,29,48,.15); }
.hit--wide{ border-top:1px solid var(--line-2); }

.omni kbd{
  font-family:var(--sans); font-size:calc(10px * var(--text-scale)); padding:1px 5px;
  border:1px solid rgba(255,255,255,.25); border-radius:2px;
  color:rgba(203,213,225,.9);
}
.omni__field:focus-within kbd{ display:none; }

.omni__menu{
  position:absolute; top:calc(100% + 5px); left:0; right:0;
  max-height:min(70vh,560px); overflow:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
  padding:4px 0; display:none;
}
.omni__menu[data-open="1"]{ display:block; }
.omni__group{
  padding:7px 12px 4px; font-size:calc(10px * var(--text-scale)); letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-faint); font-weight:600;
}
.omni__group + .omni__group{ border-top:1px solid var(--line-2); margin-top:3px; }
.hit{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:6px 12px; background:none; border:0; text-align:left;
}
.hit[aria-selected="true"], .hit:hover{ background:var(--surface-3); }
.hit__ico{
  flex:0 0 auto; width:24px; height:24px; border-radius:2px;
  display:grid; place-items:center; background:var(--surface-3); color:var(--fg-mute);
}
.hit__ico svg{ width:14px; height:14px; }
.hit__main{ min-width:0; flex:1 1 auto; }
.hit__t{ display:block; font-size:calc(12.5px * var(--text-scale)); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hit__s{ display:block; font-size:calc(11px * var(--text-scale)); color:var(--fg-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hit mark{ background:rgba(198,161,91,.38); color:inherit; border-radius:1px; }
.omni__empty{ padding:14px 12px; color:var(--fg-mute); font-size:calc(12px * var(--text-scale)); }

/* ---- matter and client quick lookups ---------------------------- */
.quick{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.qs{ position:relative; width:184px; }
.qs__field{
  display:flex; align-items:center; gap:6px;
  height:32px; padding:0 2px 0 8px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  transition:background .15s, border-color .15s;
}
.qs__field:focus-within{ background:var(--surface); border-color:var(--brass); }
.qs__field > svg{ width:14px; height:14px; color:rgba(226,232,240,.75); }
.qs__field:focus-within > svg{ color:var(--fg-mute); }
.qs input{
  flex:1 1 auto; min-width:0; height:100%;
  background:transparent; border:0; outline:0;
  color:#F5F3ED; font-size:calc(12.5px * var(--text-scale));
}
.qs__field:focus-within input{ color:var(--fg); }
.qs input::placeholder{ color:rgba(203,213,225,.85); font-weight:500; letter-spacing:.02em; }
.qs__field:focus-within input::placeholder{ color:var(--fg-faint); }
.qs__dots{
  flex:0 0 auto; width:24px; height:26px; display:grid; place-items:center;
  background:none; border:0; border-radius:2px; color:rgba(203,213,225,.85);
}
.qs__dots:hover{ background:rgba(255,255,255,.14); color:#fff; }
.qs__field:focus-within .qs__dots{ color:var(--fg-mute); }
.qs__field:focus-within .qs__dots:hover{ background:var(--surface-3); color:var(--fg); }
.qs__dots svg{ width:15px; height:15px; }
.qs__menu{
  position:absolute; top:calc(100% + 5px); right:0; width:360px; max-width:78vw;
  max-height:min(70vh,480px); overflow:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
  padding:4px 0; display:none; z-index:70;
}
.qs__menu[data-open="1"]{ display:block; }

/* Below this the two lookups crowd the global search out; the global
   search finds clients and matters as well, so they step aside. */
@media (max-width:1180px){ .quick{ display:none; } }

/* ---- bar right side ---- */
.bar__right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.who{
  display:flex; align-items:center; gap:8px; padding:3px 6px 3px 3px;
  border-radius:var(--radius); border:1px solid transparent; background:none;
}
.who:hover{ background:rgba(255,255,255,.10); }
.who__av{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:calc(10.5px * var(--text-scale)); font-weight:600;
  background:var(--brass); color:var(--ink); letter-spacing:.03em;
}
.who__n{ font-size:calc(11.5px * var(--text-scale)); color:#E2E8F0; line-height:1.2; text-align:left; }
.who__n b{ display:block; font-weight:500; color:#F5F3ED; font-size:calc(12px * var(--text-scale)); }

/* ============================================================
   2. Buttons and chrome bits
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 12px; white-space:nowrap;
  background:var(--surface); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:calc(12.5px * var(--text-scale)); font-weight:500;
  transition:background .12s, border-color .12s, color .12s;
}
.btn:hover{ background:var(--surface-3); border-color:var(--line-strong); }
.btn svg{ width:14px; height:14px; }
.btn--primary{
  background:var(--navy); border-color:var(--navy); color:#F5F3ED;
}
.btn--primary:hover{ background:var(--navy-3); border-color:var(--navy-3); }
.btn--brass{ background:var(--brass); border-color:var(--brass-lo); color:var(--ink); }
.btn--brass:hover{ background:var(--brass-hi); border-color:var(--brass-lo); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--fg-mute); }
.btn--ghost:hover{ background:var(--surface-3); color:var(--fg); }
.btn--onbar{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:#F5F3ED;
}
.btn--onbar:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); }
.btn--sm{ height:26px; padding:0 9px; font-size:calc(11.5px * var(--text-scale)); }
.btn--danger{ color:var(--danger); border-color:var(--danger-line); background:var(--surface); }
.btn--danger:hover{ background:var(--danger-bg); border-color:var(--danger-line); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--surface); border-color:var(--line); }
.btn--primary:disabled:hover{ background:var(--navy); }

.icobtn{
  width:28px; height:28px; display:grid; place-items:center;
  background:none; border:1px solid transparent; border-radius:var(--radius);
  color:var(--fg-mute);
}
.icobtn:hover{ background:var(--surface-3); color:var(--fg); }
.icobtn svg{ width:15px; height:15px; }
.icobtn--star[data-on="1"]{ color:var(--brass-lo); }

.tag{
  display:inline-block; padding:1px 6px; border-radius:2px;
  font-size:calc(10px * var(--text-scale)); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--surface-3); color:var(--fg-mute); border:1px solid var(--line);
  white-space:nowrap;
}
.tag--open{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.tag--closed{ background:var(--surface-3); color:var(--fg-faint); }
.tag--out{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.tag--ver{ font-family:var(--mono); letter-spacing:0; text-transform:none; }

/* ============================================================
   3. Shell: rail + work area
   ============================================================ */
.shell{ display:flex; min-height:100vh; padding-top:var(--bar-h); }

.rail{
  position:fixed; top:var(--bar-h); bottom:0; left:0; width:var(--rail-w);
  background:var(--surface); border-right:1px solid var(--line);
  overflow-y:auto; padding:10px 0 24px; z-index:40;
}
.rail__new{ padding:0 12px 10px; }
.rail__new .btn{ width:100%; height:32px; }
.rail__sec{ padding:10px 12px 3px; font-size:calc(10px * var(--text-scale)); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); font-weight:600; }
.rail a.nav, .rail button.nav{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:6px 12px; border:0; background:none; text-align:left;
  color:var(--fg); font-size:calc(12.5px * var(--text-scale)); text-decoration:none;
  border-left:2px solid transparent;
}
.rail .nav:hover{ background:var(--surface-3); text-decoration:none; }
.rail .nav[aria-current="page"]{
  background:var(--surface-3); border-left-color:var(--brass); font-weight:500;
}
.rail .nav svg{ width:15px; height:15px; flex:0 0 auto; color:var(--fg-mute); }
.rail .nav[aria-current="page"] svg{ color:var(--brass-lo); }
.rail .nav__n{
  margin-left:auto; font-size:calc(10.5px * var(--text-scale)); color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.rail__fav{ padding:2px 0 6px; }
.rail__fav .nav{ font-size:calc(12px * var(--text-scale)); }
.rail__fav .nav svg{ color:var(--brass-lo); }
.rail__empty{ padding:2px 12px 8px; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-faint); }

.work{ flex:1 1 auto; min-width:0; margin-left:var(--rail-w); display:flex; flex-direction:column; }

/* ============================================================
   4. Page furniture
   ============================================================ */
.crumbs{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:9px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); min-height:35px;
}
.crumbs a{ color:var(--fg-mute); }
.crumbs a:hover{ color:var(--link); }
.crumbs__back{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  height:24px; padding:0 9px 0 6px; margin-right:4px;
  background:var(--surface); color:var(--fg);
  border:1px solid var(--line); border-radius:12px;
  font-size:calc(11.5px * var(--text-scale)); font-weight:500;
}
.crumbs__back:hover{ background:var(--surface-3); border-color:var(--line-strong); }
.crumbs__back svg{ width:13px; height:13px; color:var(--fg-mute); }
.crumbs__back:hover svg{ color:var(--fg); }
.crumbs .sep{ color:var(--fg-faint); }
.crumbs b{ color:var(--fg); font-weight:500; }

.page{ padding:18px 20px 56px; }

.phead{ display:flex; align-items:flex-end; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.phead h1{
  font-family:var(--serif); font-size:calc(26px * var(--text-scale)); font-weight:400; letter-spacing:.01em;
  margin:0; line-height:1.15;
}
.phead p{ margin:3px 0 0; color:var(--fg-mute); font-size:calc(12.5px * var(--text-scale)); }
.phead__act{ margin-left:auto; display:flex; gap:8px; align-items:center; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.card__h{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--line-2);
}
.card__h h2{
  font-size:calc(12px * var(--text-scale)); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  margin:0; color:var(--fg-mute);
}
.card__h .btn{ margin-left:auto; }

/* A card headed by a name — a client, not a section — reads as a
   heading: full size, full contrast, and clickable. */
.card__h--client{ padding:11px 14px; }
.card__title{
  font-size:calc(15px * var(--text-scale)); font-weight:600; color:var(--link); letter-spacing:-.005em;
  text-decoration:none;
}
.card__title:hover{ color:var(--link-hover); text-decoration:underline; }
.card__no{
  font-family:var(--mono); font-size:calc(11px * var(--text-scale)); color:var(--fg-mute);
  padding-left:2px;
}
.card + .card{ margin-top:16px; }

.grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:1100px){ .grid2{ grid-template-columns:minmax(0,1fr); } }

.empty{ padding:34px 18px; text-align:center; color:var(--fg-mute); }
.empty svg{ width:30px; height:30px; color:var(--line); margin-bottom:8px; }
.empty p{ margin:0 0 3px; font-size:calc(13px * var(--text-scale)); }
.empty small{ color:var(--fg-faint); }

/* ============================================================
   5. Drop zone
   ============================================================ */
.drop{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:14px 18px; margin-bottom:16px;
  background:var(--surface);
  border:1.5px dashed var(--line-strong); border-radius:var(--radius);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.drop:hover{ border-color:var(--brass); }

/* The box that saves documents into the repository is shaded green, so
   it stands out from the page and cannot be mistaken for the Organize
   box, which is blue. Under a drag it lights up brass like every other
   drop target. */
.drop--save{ background:var(--save-bg); border-color:var(--save-line); }
.drop--save:hover{ background:var(--save-hover); }
.drop--save .drop__ico{ background:var(--save-ico); color:var(--save-ico-fg); }
.drop[data-hot="1"]{
  border-color:var(--brass-lo); background:var(--hot-bg);
  box-shadow:0 0 0 3px rgba(198,161,91,.18);
}
.drop__ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface-3); color:var(--slate);
}
.drop[data-hot="1"] .drop__ico{ background:var(--brass); color:var(--ink); }
.drop__ico svg{ width:19px; height:19px; }
.drop__txt{ min-width:0; }
.drop__txt b{ display:block; font-size:calc(13.5px * var(--text-scale)); font-weight:600; }
.drop__txt span{ font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
.drop__act{ margin-left:auto; display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.drop--slim{ padding:10px 14px; margin:0; }
.drop--slim .drop__ico{ width:30px; height:30px; }
.drop--slim .drop__ico svg{ width:15px; height:15px; }
.drop--slim .drop__txt b{ font-size:calc(12.5px * var(--text-scale)); }

/* ============================================================
   6. Matter workspace
   ============================================================ */
.mhead{
  padding:15px 20px 0;
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:#F5F3ED;
}
.mhead__top{ display:flex; align-items:flex-start; gap:14px; }
.mhead__id{
  font-family:var(--mono); font-size:calc(11.5px * var(--text-scale)); letter-spacing:.04em;
  color:var(--brass-hi); margin-bottom:3px;
}
.mhead h1{
  font-family:var(--serif); font-size:calc(25px * var(--text-scale)); font-weight:400; margin:0; line-height:1.15;
  color:#FFF;
}
.mhead__client{ font-size:calc(12.5px * var(--text-scale)); color:#C5CEDC; margin-top:4px; }
.mhead__client a{ color:var(--brass-hi); }
.mhead__meta{ display:flex; gap:18px; flex-wrap:wrap; margin:12px 0 0; }
.mhead__meta div{ font-size:calc(11px * var(--text-scale)); }
.mhead__meta dt{ color:rgba(188,198,214,.78); letter-spacing:.1em; text-transform:uppercase; font-size:calc(9.5px * var(--text-scale)); margin-bottom:2px; }
.mhead__meta dd{ margin:0; color:#EDF1F6; font-size:calc(12px * var(--text-scale)); }
.mhead__act{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.mhead__act .icobtn{ color:#C5CEDC; }
.mhead__act .icobtn:hover{ background:rgba(255,255,255,.12); color:#fff; }
.mhead__act .icobtn[data-on="1"]{ color:var(--brass-hi); }
.tabs{ display:flex; gap:2px; margin-top:14px; }
.tabs button{
  padding:7px 14px; background:none; border:0; border-bottom:2px solid transparent;
  color:#BCC6D6; font-size:calc(12.5px * var(--text-scale)); font-weight:500;
}
.tabs button:hover{ color:#fff; }
.tabs button[aria-selected="true"]{ color:#fff; border-bottom-color:var(--brass); }

.ws{ padding:14px 20px 56px; }
.ws__drop{ margin-bottom:14px; }

/* two folder columns + document grid */
.browser{
  display:grid; grid-template-columns:230px 230px minmax(0,1fr);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  min-height:460px;
}
@media (max-width:1160px){
  .browser{ grid-template-columns:190px 190px minmax(0,1fr); }
}
@media (max-width:900px){
  .browser{ grid-template-columns:1fr; }
  .browser .col{ max-height:230px; }
}
.col{
  display:flex; flex-direction:column; min-width:0;
  border-right:1px solid var(--line);
}
.col--docs{ border-right:0; }
.col__h{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
  font-size:calc(10px * var(--text-scale)); letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-faint); font-weight:600; min-height:33px;
}
.col__h .icobtn{ margin-left:auto; width:22px; height:22px; }
.col__h .icobtn svg{ width:13px; height:13px; }
.col__body{ overflow-y:auto; flex:1 1 auto; padding:3px 0; }
.col--docs .col__body{ padding:0; }

.fold{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:5px 8px 5px 10px; background:none; border:0; text-align:left;
  font-size:calc(12.5px * var(--text-scale)); color:var(--fg); border-left:2px solid transparent;
}
.fold:hover{ background:var(--surface-3); }
.fold[aria-current="true"]{
  background:var(--row-active); border-left-color:var(--brass); font-weight:500;
}
.fold[data-hot="1"]{ background:var(--hot-bg); box-shadow:inset 0 0 0 1px var(--brass); }
.fold > svg{ width:15px; height:15px; flex:0 0 auto; color:var(--brass-lo); }
.fold__n{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fold__c{ font-size:calc(10.5px * var(--text-scale)); color:var(--fg-faint); font-variant-numeric:tabular-nums; }
.fold__chev{ width:12px; height:12px; color:var(--fg-faint); flex:0 0 auto; }
.col__hint{ padding:16px 12px; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-faint); text-align:center; }

/* ---- folders, two columns ---------------------------------------- */
.fgrid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1px; background:var(--line-2);
}
@media (max-width:860px){ .fgrid{ grid-template-columns:minmax(0,1fr); } }
.fcard{ background:var(--surface); min-width:0; }
.fcard[data-hot="1"]{ background:var(--hot-bg); box-shadow:inset 0 0 0 2px var(--brass); }
.fcard__h{ display:flex; align-items:center; gap:8px; padding:11px 13px; }
.fcard__h > svg{ color:var(--brass-lo); }
.fcard__chev{
  width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center;
  background:none; border:1px solid transparent; border-radius:2px; color:var(--fg-faint);
}
.fcard__chev:hover{ background:var(--surface-3); color:var(--fg); }
.fcard__chev svg{ width:14px; height:14px; transition:transform .15s; }
.fcard__chev[aria-expanded="true"] svg{ transform:rotate(180deg); }
.fcard__name{
  flex:1 1 auto; min-width:0; font-size:calc(14.5px * var(--text-scale)); font-weight:600; color:var(--link);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fcard__name:hover{ color:var(--link-hover); }
.fcard__n{
  flex:0 0 auto; display:inline-grid; place-items:center; min-width:24px; height:20px; padding:0 6px;
  border-radius:10px; background:var(--surface-3); color:var(--fg-mute);
  font-size:calc(11px * var(--text-scale)); font-variant-numeric:tabular-nums;
}
.fcard__panel{ padding:0 13px 10px 43px; }
.fdoc{
  display:flex; align-items:center; gap:8px; padding:4px 2px;
  border-radius:2px; cursor:grab;
}
.fdoc:hover{ background:var(--surface-2); }
.fdoc:active{ cursor:grabbing; }
.fdoc__name{
  flex:1 1 auto; min-width:0; background:none; border:0; padding:0; text-align:left;
}
.fdoc__name b{
  display:block; font-size:calc(12.5px * var(--text-scale)); font-weight:500; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fdoc__name:hover b{ color:var(--link); text-decoration:underline; }
.fdoc__name span{
  display:block; font-size:calc(11px * var(--text-scale)); color:var(--fg-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fdoc .dn__ico{ width:18px; height:22px; font-size:calc(6.5px * var(--text-scale)); }
.fdoc .chk{ flex:0 0 auto; }
.fdoc[data-picked]{ background:var(--select); }
.fcard__panel{ padding-left:34px; }
.fdoc__all{ display:inline-block; margin-top:6px; font-size:calc(11.5px * var(--text-scale)); }
.fdoc__none{ font-size:calc(11.5px * var(--text-scale)); color:var(--fg-faint); padding:2px 0 4px; }

/* subfolder chips on a folder screen */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  font-size:calc(12px * var(--text-scale)); color:var(--fg); text-decoration:none;
}
.chip:hover{ border-color:var(--brass); text-decoration:none; }
.chip svg{ width:13px; height:13px; color:var(--brass-lo); }
.chip__n{ color:var(--fg-faint); font-variant-numeric:tabular-nums; }

/* ============================================================
   7. Document grid
   ============================================================ */
.dtools{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-bottom:1px solid var(--line); background:var(--surface-2);
  min-height:33px;
}
.dtools__c{ font-size:calc(11px * var(--text-scale)); color:var(--fg-mute); margin-right:auto; }
.filter{
  height:26px; padding:0 8px; font-size:calc(12px * var(--text-scale));
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  min-width:0;
}
/* Fixed layout: every column but Name has an explicit width, so Name
   takes the remainder and long document names ellipsis instead of
   forcing the grid to scroll sideways. */
table.docs{ width:100%; border-collapse:collapse; table-layout:fixed; }
table.docs th{
  position:sticky; top:0; z-index:1;
  text-align:left; padding:6px 10px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:calc(10px * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-faint); font-weight:600; white-space:nowrap;
}
table.docs th button{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  letter-spacing:inherit; text-transform:inherit; display:inline-flex; gap:3px; align-items:center;
}
table.docs th button:hover{ color:var(--fg); }
table.docs th svg{ width:11px; height:11px; }
table.docs td{
  padding:6px 9px; border-bottom:1px solid var(--line-2);
  vertical-align:middle; font-size:calc(12.5px * var(--text-scale));
}
table.docs td.trunc{
  max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.col--docs .col__body{ overflow-x:auto; }
table.docs tbody tr{ cursor:default; }
table.docs tbody tr:hover{ background:var(--surface-2); }
table.docs tbody tr[aria-selected="true"]{ background:var(--row-active); }
table.docs tbody tr[data-picked]{ background:var(--select); }
table.docs tbody tr[data-picked]:hover{ background:var(--select-hover); }

/* ---- picking several documents at once ----------------------------
   A tick box on every row, and a bar of the things worth doing to a
   set of them. The bar only exists while something is ticked. */
.docs__wrap{ min-width:0; }
.docs__scroll{ min-width:0; overflow-x:auto; }
/* Below this the document name has no room left, so the grid scrolls
   inside its own box instead of crushing it. */
table.docs{ min-width:860px; }
table.docs th.cell-chk, table.docs td.cell-chk{ width:30px; padding-right:0; }
.chk{
  width:14px; height:14px; margin:0; accent-color:var(--slate); cursor:pointer;
  vertical-align:middle;
}
.selbar{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:7px 10px; background:var(--select);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:2; font-size:calc(12.5px * var(--text-scale));
}
.selbar b{ font-weight:600; color:var(--fg); }
.selbar .spacer{ flex:1 1 auto; }
.dn{ display:flex; align-items:center; gap:8px; min-width:0; }
.dn__ico{
  flex:0 0 auto; width:22px; height:26px; border-radius:2px;
  display:grid; place-items:center; font-size:calc(7.5px * var(--text-scale)); font-weight:700;
  letter-spacing:.02em; color:#fff; background:var(--slate);
  text-transform:uppercase;
}
.dn__ico[data-x="pdf"]{ background:#B3261E; }
.dn__ico[data-x="doc"]{ background:#2B579A; }
.dn__ico[data-x="xls"]{ background:#1F7A4D; }
.dn__ico[data-x="ppt"]{ background:#C04B22; }
.dn__ico[data-x="img"]{ background:#6B4FA8; }
.dn__ico[data-x="eml"]{ background:#0F7391; }
.dn__ico[data-x="txt"]{ background:#5D6879; }
.dn__t{ min-width:0; }
.dn__t b{ display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dn__t span{ font-size:calc(10.5px * var(--text-scale)); color:var(--fg-faint); font-family:var(--mono); }
.num{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg-mute); }
.rowact{ display:flex; gap:1px; justify-content:flex-end; opacity:0; }
tr:hover .rowact, tr[aria-selected="true"] .rowact{ opacity:1; }
.cell-path{ font-size:calc(11px * var(--text-scale)); color:var(--fg-mute); }

/* On a narrower window the "Filed in" and "Document date" columns
   take the room the document name needs. Both are still in the
   details drawer. */
@media (max-width:1280px){
  table.docs th.cell-path, table.docs td.cell-path{ display:none; }
}
/* Document date and Date saved are the first to go when the window is
   not wide enough for all nine columns. */
@media (max-width:1400px){
  table.docs th.cell-opt, table.docs td.cell-opt{ display:none; }
}

/* ============================================================
   8. Details drawer
   ============================================================ */
.det{
  position:fixed; top:var(--bar-h); right:0; bottom:0; width:392px; z-index:55;
  background:var(--surface); border-left:1px solid var(--line);
  box-shadow:var(--shadow-2); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.16,.84,.44,1);
}
.det[data-open="1"]{ transform:none; }
.det__h{ display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-bottom:1px solid var(--line); }
.det__h h2{ font-size:calc(14px * var(--text-scale)); font-weight:600; margin:0; line-height:1.3; word-break:break-word; }
.det__h .hint{ font-size:calc(11px * var(--text-scale)); color:var(--fg-faint); font-family:var(--mono); margin-top:3px; }
.det__body{ overflow-y:auto; flex:1 1 auto; padding:12px 14px 30px; }
.det__foot{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid var(--line); background:var(--surface-2); }
dl.fields{ margin:0; display:grid; grid-template-columns:96px 1fr; gap:7px 12px; align-items:baseline; }
dl.fields dt{ font-size:calc(10px * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); font-weight:600; }
dl.fields dd{ margin:0; font-size:calc(12.5px * var(--text-scale)); word-break:break-word; }
.det h3{
  font-size:calc(10px * var(--text-scale)); letter-spacing:.13em; text-transform:uppercase; color:var(--fg-faint);
  font-weight:600; margin:20px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line-2);
}
.vers{ list-style:none; margin:0; padding:0; }
.vers li{ display:flex; gap:9px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line-2); }
.vers li:last-child{ border-bottom:0; }
.vers__v{
  flex:0 0 auto; min-width:30px; height:20px; padding:0 5px; border-radius:2px;
  display:grid; place-items:center; font-family:var(--mono); font-size:calc(10.5px * var(--text-scale));
  background:var(--surface-3); color:var(--fg-mute); border:1px solid var(--line);
}
.vers li[data-cur="1"] .vers__v{ background:var(--brass); border-color:var(--brass-lo); color:var(--ink); font-weight:600; }
.vers__m{ flex:1 1 auto; min-width:0; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
.vers__m b{ display:block; color:var(--fg); font-weight:500; font-size:calc(12px * var(--text-scale)); }

/* ============================================================
   9. Modal and wizard
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:80; display:none;
  background:rgba(19,29,48,.55);
  padding:34px 16px; overflow-y:auto;
}
.scrim[data-open="1"]{ display:grid; place-items:start center; }
.modal{
  width:100%; max-width:880px; background:var(--surface);
  border-radius:4px; box-shadow:var(--shadow-3); overflow:hidden;
  display:flex; flex-direction:column; max-height:calc(100vh - 68px);
}
.modal--sm{ max-width:470px; }
.modal--preview{ max-width:min(1100px, 96vw); }
.pview__bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
.pview__frame{
  display:block; width:100%; height:calc(100vh - 300px); min-height:320px;
  border:1px solid var(--line); border-radius:var(--radius); background:#525659;
}
.modal__h{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:linear-gradient(180deg,var(--navy-2),var(--navy)); color:#F5F3ED;
}
.modal__h h2{ font-family:var(--serif); font-size:calc(18px * var(--text-scale)); font-weight:400; margin:0; }
.modal__h .icobtn{ margin-left:auto; color:#C5CEDC; }
.modal__h .icobtn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.modal__body{ padding:16px; overflow-y:auto; flex:1 1 auto; }
.modal__foot{
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  border-top:1px solid var(--line); background:var(--surface-2);
}
.modal__foot .spacer{ margin-left:auto; }
.modal__note{ font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
.modal__note b{ color:var(--danger); }

/* step rail */
ol.steps{ display:flex; align-items:center; gap:0; padding:0 16px; margin:0; background:var(--navy); }
ol.steps li{ list-style:none; display:flex; align-items:center; gap:8px; padding:9px 14px 9px 0; }
ol.steps li + li{ padding-left:14px; }
.steps__n{
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  font-size:calc(10.5px * var(--text-scale)); font-weight:600; flex:0 0 auto;
  background:rgba(255,255,255,.14); color:#C5CEDC;
}
ol.steps li[data-state="done"] .steps__n{ background:var(--ok); color:#fff; }
ol.steps li[data-state="now"] .steps__n{ background:var(--brass); color:var(--ink); }
.steps__l{ font-size:calc(11px * var(--text-scale)); letter-spacing:.09em; text-transform:uppercase; color:rgba(188,198,214,.85); }
ol.steps li[data-state="now"] .steps__l{ color:#fff; font-weight:600; }
.steps__arrow{ width:13px; height:13px; color:rgba(255,255,255,.25); }

/* form bits */
.fset{ border:0; margin:0 0 16px; padding:0; }
.fset:last-child{ margin-bottom:0; }
.fset > legend{
  font-size:calc(10px * var(--text-scale)); letter-spacing:.13em; text-transform:uppercase; color:var(--fg-faint);
  font-weight:600; padding:0 0 7px;
}
.f{ margin-bottom:13px; }
.f > label, .f__lab{
  display:block; font-size:calc(11px * var(--text-scale)); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fg-mute); margin-bottom:4px;
}
.f .req{ color:var(--danger); margin-left:2px; }
.inp{
  width:100%; height:32px; padding:0 9px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  font-size:calc(13px * var(--text-scale)); outline:0; color:var(--fg);
}
select.inp{ height:32px; padding:0 6px; }
textarea.inp{ height:auto; min-height:62px; padding:7px 9px; resize:vertical; line-height:1.45; }
.inp:focus{ border-color:var(--brass-lo); box-shadow:0 0 0 3px rgba(198,161,91,.18); }
.inp[aria-invalid="true"]{ border-color:var(--danger); background:var(--input-bad); }
.f__err{ display:none; margin-top:4px; font-size:calc(11.5px * var(--text-scale)); color:var(--danger); }
.f[data-err="1"] .f__err{ display:block; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media (max-width:640px){ .frow{ grid-template-columns:1fr; } }

.alert{
  display:flex; gap:9px; align-items:flex-start;
  padding:9px 11px; border-radius:var(--radius); font-size:calc(12px * var(--text-scale)); margin-bottom:14px;
  background:var(--danger-bg); border:1px solid var(--danger-line); color:var(--danger-fg);
}
.alert svg{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; }
.alert--info{ background:var(--info-bg); border-color:var(--info-line); color:var(--info-fg); }

/* ---- the info dot ---------------------------------------------------
   An explanation worth having but not worth a panel. The popover
   escapes the header it sits in, so it resets the header's own
   uppercase and letter spacing. */
.idot__w{ position:relative; display:inline-flex; vertical-align:middle; }
.idot{
  width:16px; height:16px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:var(--surface-3); color:var(--fg-mute);
  font-family:var(--serif); font-size:calc(11px * var(--text-scale)); font-weight:700; line-height:1;
  display:grid; place-items:center; cursor:pointer; letter-spacing:0;
}
.idot:hover, .idot__w[data-open] .idot{
  background:var(--navy); border-color:var(--navy); color:#fff;
}
.idot__pop{
  display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  width:min(360px,78vw); padding:10px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(19,29,48,.16);
  font-family:var(--sans); font-size:calc(12px * var(--text-scale)); font-weight:400; line-height:1.55;
  color:var(--fg); text-align:left; text-transform:none; letter-spacing:0; white-space:normal;
}
.idot__w[data-align="left"] .idot__pop{ right:auto; left:0; }
.idot__w[data-open] .idot__pop{ display:block; }

/* A single line of context, with the detail behind the dot. */
.bnote{
  display:flex; align-items:center; gap:6px;
  font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); padding:2px 0 0;
}
.bnote svg{ width:14px; height:14px; flex:0 0 auto; }

/* ---- a document out on the desk -------------------------------------
   Open in Word on this computer: where the working copy is, and the
   four things worth doing to it. It turns amber the moment Word has
   written something the repository has not seen. */
.desk{
  border:1px solid var(--info-line); border-radius:var(--radius); background:var(--info-bg);
  padding:9px 11px; display:grid; gap:8px; margin:0 0 12px;
}
.desk--dirty{ background:var(--warn-bg); border-color:var(--warn-line); }
.desk__m{ display:flex; gap:8px; align-items:flex-start; font-size:calc(12.5px * var(--text-scale)); line-height:1.5; color:var(--info-fg); }
.desk--dirty .desk__m{ color:var(--warn); }
.desk__m svg{ width:15px; height:15px; flex:0 0 auto; margin-top:2px; }
.desk__f{ font-family:var(--mono); font-size:calc(11.5px * var(--text-scale)); }
.desk__a{ display:flex; flex-wrap:wrap; gap:6px; }
.desk__wait{ font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
.desk__wait svg{ width:13px; height:13px; }

/* A button that reads as a sentence rather than a control. */
.linkbtn{
  background:none; border:0; padding:0; font:inherit; color:var(--link);
  text-decoration:underline; cursor:pointer;
}
.linkbtn:hover{ color:var(--navy); }

/* The rail counts edits waiting to be filed. */
.rail .nav[data-alert] .nav__n{ background:var(--warn-bg); color:var(--warn); font-weight:700; }

/* A toast that is asking for something carries the answer. */
.toast__go{ flex:0 0 auto; align-self:center; margin-left:4px; }

/* typeahead pickers in the wizard: click in and type, or use the
   three dots for what was opened most recently */
.pick{ position:relative; }
.pick__field{
  display:flex; align-items:center; gap:7px;
  height:32px; padding:0 3px 0 9px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
}
.pick__field:focus-within{ border-color:var(--brass-lo); box-shadow:0 0 0 3px rgba(198,161,91,.18); }
.pick__field > svg{ width:14px; height:14px; color:var(--fg-faint); }
.pick__field input{
  flex:1 1 auto; min-width:0; height:100%;
  border:0; outline:0; background:transparent; font-size:calc(13px * var(--text-scale));
}
.pick__dots{
  flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center;
  background:none; border:0; border-radius:2px; color:var(--fg-mute);
}
.pick__dots:hover{ background:var(--surface-3); color:var(--fg); }
.pick__dots svg{ width:15px; height:15px; }
.pick__list{
  position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:5;
  max-height:230px; overflow-y:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-2);
  display:none; padding:3px 0;
}
.pick__list[data-open="1"]{ display:block; }
.pick__list .hit{ padding:6px 10px; }
.chosen{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border:1px solid var(--ok-line); background:var(--ok-bg);
  border-radius:var(--radius);
}
.chosen > svg{ width:15px; height:15px; color:var(--ok); flex:0 0 auto; }
.chosen__m{ min-width:0; flex:1 1 auto; }
.chosen__m b{ display:block; font-size:calc(13px * var(--text-scale)); font-weight:600; }
.chosen__m span{ font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }

/* file queue */
.queue{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); }
.queue li{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line-2); }
.queue li:last-child{ border-bottom:0; }
.queue__m{ min-width:0; flex:1 1 auto; }
.queue__m b{ display:block; font-size:calc(12.5px * var(--text-scale)); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue__m span{ font-size:calc(11px * var(--text-scale)); color:var(--fg-faint); }

.fileform{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; }
.fileform__h{
  display:flex; align-items:center; gap:9px; padding:8px 11px;
  background:var(--surface-2); border-bottom:1px solid var(--line-2);
}
.fileform__h b{ font-size:calc(12px * var(--text-scale)); font-weight:600; }
.fileform__h .meta{ font-size:calc(11px * var(--text-scale)); color:var(--fg-faint); margin-left:auto; }
.fileform__b{ padding:12px 11px 1px; }

.dest{
  display:flex; align-items:center; gap:8px; padding:8px 11px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  font-size:calc(12px * var(--text-scale)); margin-bottom:13px; flex-wrap:wrap;
}
.dest > svg{ width:15px; height:15px; color:var(--brass-lo); flex:0 0 auto; }
.dest b{ font-weight:600; }
.dest .sep{ color:var(--fg-faint); }
.dest .btn{ margin-left:auto; }

.picker{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); height:300px;
  overflow:hidden;
}
@media (max-width:640px){ .picker{ grid-template-columns:1fr; height:auto; } .picker .col{ max-height:180px; } }

/* toasts */
.toasts{ position:fixed; right:16px; bottom:16px; z-index:95; display:flex; flex-direction:column; gap:8px; max-width:360px; }
.toast{
  display:flex; gap:9px; align-items:flex-start;
  padding:10px 12px; border-radius:var(--radius); font-size:calc(12.5px * var(--text-scale));
  background:var(--navy); color:#F5F3ED; box-shadow:var(--shadow-2);
  animation:toast-in .2s cubic-bezier(.16,.84,.44,1);
}
.toast svg{ width:15px; height:15px; flex:0 0 auto; color:var(--brass-hi); margin-top:1px; }
.toast b{ font-weight:600; }
.toast--bad{ background:#7C1D17; }
.toast--bad svg{ color:#FFD7D2; }
.toast__x{ background:none; border:0; color:inherit; opacity:.6; margin-left:4px; padding:0 2px; }
.toast__x:hover{ opacity:1; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } }

/* context menu */
.ctx{
  position:fixed; z-index:90; min-width:210px; padding:4px 0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-2); display:none;
}
.ctx[data-open="1"]{ display:block; }
.ctx button{
  display:flex; align-items:center; gap:9px; width:100%; padding:6px 12px;
  background:none; border:0; text-align:left; font-size:calc(12.5px * var(--text-scale)); color:var(--fg);
}
.ctx button:hover{ background:var(--surface-3); }
.ctx button svg{ width:14px; height:14px; color:var(--fg-mute); }
.ctx button[data-danger="1"]{ color:var(--danger); }
.ctx button[data-danger="1"] svg{ color:var(--danger); }
.ctx button[data-on="1"]{ font-weight:600; }
.ctx button[data-on="1"] svg{ color:var(--brass-lo); }
.ctx hr{ border:0; border-top:1px solid var(--line-2); margin:4px 0; }
.ctx__h{
  padding:8px 12px 4px; font-size:calc(10px * var(--text-scale)); letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-faint); font-weight:600;
}

/* ============================================================
   10. Home: recent matters and favourite matters
   ============================================================ */
/* minmax(0,1fr), not 1fr: grid items floor at min-content by default,
   and a long matter name would push the column past its track.
   align-items:stretch plus a flexing card in each column makes the two
   sides finish at exactly the same height whichever holds more. */
.home{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px; align-items:stretch; min-height:470px;
}
@media (max-width:1040px){ .home{ grid-template-columns:minmax(0,1fr); min-height:0; } }

.home__col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.card--flex{ display:flex; flex-direction:column; min-height:0; }
/* One card per column takes up the slack: Recent on the left, the
   whole of My Matters on the right. */
.home__col > .card--flex:first-child{ flex:1 1 auto; }
.home__col--right > .card--flex{ flex:1 1 auto; }
.mlist--fill{ flex:1 1 auto; overflow-y:auto; }
.empty--fill{ flex:1 1 auto; display:grid; place-content:center; }
@media (max-width:1040px){
  .mlist--fill{ overflow-y:visible; }
  .home__col > .card--flex:first-child{ flex:0 0 auto; }
}

/* My Matters while a matter is being dragged over it */
.card--drop[data-dropping="1"]{
  outline:2px dashed var(--brass); outline-offset:-2px; background:var(--hot-bg);
}
.card--drop[data-dropping="1"] .empty--fill{ color:var(--brass-lo); }

.mrow{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; border:0; border-bottom:1px solid var(--line-2);
  background:var(--surface); color:inherit; text-decoration:none; text-align:left;
  transition:background .12s, box-shadow .12s;
}
.mrow:last-child{ border-bottom:0; }
/* The brass edge and lift are what make a row feel like an object you
   can pick up and drag, rather than a line of text. */
.mrow:hover{
  background:var(--surface-2); text-decoration:none;
  box-shadow:inset 3px 0 0 var(--brass), 0 1px 2px rgba(19,29,48,.06);
}
.mrow__grip{
  flex:0 0 auto; width:18px; height:24px; display:grid; place-items:center;
  color:var(--line); cursor:grab;
}
.mrow:hover .mrow__grip{ color:var(--fg-faint); }
.mrow__grip:active{ cursor:grabbing; }
.mrow__m{ min-width:0; flex:1 1 auto; }
.mrow__no{
  font-family:var(--mono); font-size:calc(10.5px * var(--text-scale)); letter-spacing:.02em;
  color:var(--brass-lo); display:block;
}
/* The matter name is what people scan for, so it is the one blue,
   heavier line in the row. */
.mrow__m > b{
  display:block; margin:1px 0 2px;
  font-size:calc(14.5px * var(--text-scale)); font-weight:600; letter-spacing:-.005em; line-height:1.25;
  color:var(--link);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mrow:hover .mrow__m > b{ color:var(--link-hover); text-decoration:underline; }
.mrow__sub{
  display:block; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mrow__sub b{ font-weight:500; color:var(--fg-mute); }
.mrow__sub .sep{ color:var(--line); }
.mrow__side{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  font-size:calc(11px * var(--text-scale)); color:var(--fg-faint); white-space:nowrap;
}
.mrow__n{
  display:inline-grid; place-items:center; min-width:22px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--surface-3); color:var(--fg-mute);
  font-size:calc(10.5px * var(--text-scale)); font-variant-numeric:tabular-nums;
}
.mrow[data-dragging="1"]{ opacity:.4; }
.mlist[data-dropping="1"]{ background:var(--hot-bg); }
.mlist{ position:relative; }

/* misc small bits */
/* ============================================================
   11. The filing builder
   ============================================================ */
.builder{ margin-bottom:14px; }

/* The bench's own drop area carries a tint: it is the target of a drag
   that may have started several screens away, so it has to be findable
   at a glance rather than read for. It still lights up brass under a
   drag like every other drop zone. */
.builder .drop{
  background:var(--bench-bg); border-color:var(--bench-line);
}
.builder .drop:hover{ border-color:var(--brass); background:var(--bench-hover); }
.builder .drop[data-hot="1"]{ background:var(--hot-bg); border-color:var(--brass-lo); }
.builder .drop .drop__ico{ background:var(--bench-ico); color:var(--bench-ico-fg); }
.builder .drop[data-hot="1"] .drop__ico{ background:var(--brass); color:var(--ink); }
.builder__body{ padding:14px; }

.bset{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 12px; margin-bottom:12px; background:var(--surface-2);
}
.bset:last-child{ margin-bottom:0; }
.bset__t{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.bset__t b{ font-size:calc(12px * var(--text-scale)); font-weight:600; letter-spacing:.03em; }
.bset__t > svg{ color:var(--fg-mute); }
.bset--out{ background:var(--out-bg); border-color:var(--out-line); }

.bgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-top:9px;
}
.bcheck{ display:inline-flex; align-items:flex-start; gap:7px; font-size:calc(12.5px * var(--text-scale)); cursor:pointer; }
.bcheck input{ accent-color:var(--brass-lo); }

/* the order of the filing: main documents, then exhibits */
.bgroup{ margin-bottom:10px; }
.bgroup:last-child{ margin-bottom:0; }
.bgroup__h{ display:flex; align-items:center; gap:7px; padding:0 2px 5px; }
.bgroup__h b{ font-size:calc(11px * var(--text-scale)); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); }
.bgroup__h > svg{ width:14px; height:14px; color:var(--fg-faint); }
.bgroup__h .modal__note{ margin-left:auto; font-size:calc(11px * var(--text-scale)); }
.blist{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); min-height:42px; }
.blist__hint{ padding:11px 12px; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-faint); }
.tag--main{ background:var(--navy); border-color:var(--navy); color:#F5F3ED; }
.brow__role{ flex:0 0 auto; }
.brow{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-bottom:1px solid var(--line-2);
}
.brow:last-child{ border-bottom:0; }
.brow[data-dragging="1"]{ opacity:.4; }
.brow[data-bad="1"]{ background:var(--danger-bg); }
.brow__grip{ flex:0 0 auto; color:var(--line); cursor:grab; display:grid; place-items:center; }
.brow:hover .brow__grip{ color:var(--fg-faint); }
.brow__lab{ flex:0 0 auto; width:96px; font-size:calc(12px * var(--text-scale)); }
.brow__lab b{ color:var(--brass-lo); font-weight:700; letter-spacing:.02em; }
.brow__m{ flex:1 1 auto; min-width:0; }
.brow__m b{
  display:block; font-size:calc(12.5px * var(--text-scale)); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.brow__m span{
  display:block; font-size:calc(11px * var(--text-scale)); color:var(--fg-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.brow__pages{ flex:0 0 auto; width:134px; }
.brow__pages .modal__note{ display:block; font-size:calc(10.5px * var(--text-scale)); margin-top:2px; }
.bpages{ height:26px; font-size:calc(12px * var(--text-scale)); }
.inp--bad{ border-color:var(--danger); background:var(--input-bad); }
.brow__cover{ flex:0 0 auto; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
@media (max-width:1080px){
  .brow{ flex-wrap:wrap; }
  .brow__m{ flex:1 1 100%; order:5; }
}

/* what comes out */
.bmodes{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
@media (max-width:760px){ .bmodes{ grid-template-columns:minmax(0,1fr); } }
.bmode{
  display:flex; gap:9px; align-items:flex-start; padding:10px 11px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  font-size:calc(12.5px * var(--text-scale)); cursor:pointer;
}
.bmode--on{ border-color:var(--brass); box-shadow:0 0 0 2px rgba(198,161,91,.2); }
.bmode b{ display:block; font-weight:600; }
.bmode span span{ display:block; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); margin-top:2px; }
.bmode input{ accent-color:var(--brass-lo); }
.brun{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.brun .spacer{ margin-left:auto; }

table.list{ width:100%; border-collapse:collapse; }
table.list th{
  text-align:left; padding:7px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:calc(10px * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); font-weight:600;
}
table.list td{ padding:7px 14px; border-bottom:1px solid var(--line-2); font-size:calc(12.5px * var(--text-scale)); }
table.list tbody tr:hover{ background:var(--surface-2); }
table.list tbody tr.clickable{ cursor:pointer; }
.mattername b{ display:block; font-size:calc(13.5px * var(--text-scale)); font-weight:600; color:var(--link); letter-spacing:-.005em; }
table.list tbody tr:hover .mattername b{ color:var(--link-hover); text-decoration:underline; }
.mattername span{ display:block; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
.mattername__no{
  font-family:var(--mono); font-size:calc(10.5px * var(--text-scale)); letter-spacing:.02em;
  color:var(--brass-lo);
}

/* ---- search results: the panel that narrows them ---------------------- */
.srch{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:16px; align-items:start; }
.srch__main{ min-width:0; }
.srch__side{ position:sticky; top:calc(var(--bar-h) + 12px); max-height:calc(100vh - var(--bar-h) - 24px); overflow-y:auto; }
.srch > .card + .card{ margin-top:0; }
@media (max-width:900px){
  .srch{ grid-template-columns:minmax(0,1fr); }
  .srch__side{ position:static; max-height:none; }
}
.facet{ padding:10px 14px 9px; border-bottom:1px solid var(--line-2); }
.facet:last-child{ border-bottom:0; }
.facet__h{
  font-size:calc(10px * var(--text-scale)); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:600; margin:0 0 5px;
}
.facet__row{ display:flex; align-items:center; gap:7px; padding:3px 0; font-size:calc(12.5px * var(--text-scale)); cursor:pointer; }
.facet__row:hover .facet__t{ color:var(--link); }
.facet__t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.facet__n{ flex:0 0 auto; font-size:calc(11px * var(--text-scale)); color:var(--fg-faint); font-variant-numeric:tabular-nums; }
.facet__more{ background:none; border:0; padding:3px 0 0; color:var(--link); font-size:calc(11.5px * var(--text-scale)); cursor:pointer; }
.facet__more:hover{ text-decoration:underline; }
.facet__dates{ display:grid; gap:6px; }
.facet__date{ display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:6px; font-size:calc(11.5px * var(--text-scale)); color:var(--fg-mute); }
.facet__date .inp{ height:28px; font-size:calc(12px * var(--text-scale)); padding:0 6px; }

.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px; }
.chip{
  display:inline-flex; align-items:center; gap:3px; max-width:100%;
  height:24px; padding:0 3px 0 10px; border-radius:12px;
  background:var(--select); border:1px solid var(--info-line); color:var(--info-fg); font-size:calc(12px * var(--text-scale));
}
.chip > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip button{
  flex:0 0 auto; width:18px; height:18px; padding:0; border:0; border-radius:50%;
  background:transparent; color:inherit; font-size:calc(14px * var(--text-scale)); line-height:1; cursor:pointer;
}
.chip button:hover{ background:rgba(31,62,104,.14); }


/* ============================================================
   Display settings — theme, text size and row spacing

   Chosen from "Display settings…" in the account menu and kept in
   this browser. The choice is written onto <html> before the page
   paints (see the script at the top of index.html), so there is no
   flash of the wrong theme.
   ============================================================ */
:root[data-theme="dark"]{
  --bg:        #0F141B;
  --surface:   #171E28;
  --surface-2: #1B2330;
  --surface-3: #232C3A;
  --line:      #2E3848;
  --line-2:    #252E3C;
  --fg:        #E6EAF0;
  --fg-mute:   #A9B2BF;
  --fg-faint:  #8D97A5;
  --link:      #86B4F0;
  --danger:    #F28B82;
  --danger-bg: #3A1D1B;
  --ok:        #74CF9D;
  --warn:      #E6B45C;
  --warn-bg:   #33290F;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-2: 0 6px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3: 0 24px 64px rgba(0,0,0,.6);
  --line-strong:  #3A4658;
  --link-hover:   #B0CDF6;
  --select:       #1F2E45;
  --select-hover: #263853;
  --row-active:   #1C2A3F;
  --info-bg:      #16243A;
  --info-line:    #2A4466;
  --info-fg:      #C2D6F2;
  --hot-bg:       #3A2F17;
  --ok-bg:        #15291F;
  --ok-line:      #2E5A42;
  --warn-line:    #5C4A1E;
  --danger-line:  #6B2C27;
  --danger-fg:    #F5B7B1;
  --input-bad:    #2A1716;
  --save-bg:      #14271F;
  --save-line:    #2F6B52;
  --save-hover:   #193026;
  --save-ico:     #1F3D30;
  --save-ico-fg:  #95D6B8;
  --bench-bg:     #221B33;
  --bench-line:   #52437D;
  --bench-hover:  #2A2140;
  --bench-ico:    #33294D;
  --bench-ico-fg: #CBBBF3;
  --out-bg:       #262117;
  --out-line:     #4D4330;
  color-scheme: dark;
}
:root[data-theme="grey"]{
  --bg:        #CFD3D9;
  --surface:   #E3E6EA;
  --surface-2: #DDE0E5;
  --surface-3: #D2D6DC;
  --line:      #BCC2CA;
  --line-2:    #C9CED5;
  --fg:        #1B222C;
  --fg-mute:   #4A5462;
  --fg-faint:  #5A6472;
  --link:      #244F8C;
  --line-strong:  #AEB5BF;
  --link-hover:   #173A6B;
  --select:       #CBD5E3;
  --select-hover: #C1CCDC;
  --row-active:   #D0D8E4;
  --info-bg:      #D3DBE6;
  --info-line:    #B3C1D4;
  --hot-bg:       #EDE3CF;
  --ok-bg:        #D2E2D8;
  --ok-line:      #A9C9B5;
  --warn-bg:      #EADFC6;
  --warn-line:    #CDB98D;
  --danger-bg:    #EBD3D0;
  --input-bad:    #EFE0DE;
  --save-bg:      #D0E0D6;
  --save-line:    #8FB9A5;
  --save-hover:   #C7D9CE;
  --save-ico:     #BCD6C8;
  --bench-bg:     #DAD3E6;
  --bench-line:   #AE9FCF;
  --bench-hover:  #D2C9E1;
  --bench-ico:    #CABDE2;
  --out-bg:       #E4DFD3;
  --out-line:     #CDBFA3;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="system"]{
    --bg:        #0F141B;
    --surface:   #171E28;
    --surface-2: #1B2330;
    --surface-3: #232C3A;
    --line:      #2E3848;
    --line-2:    #252E3C;
    --fg:        #E6EAF0;
    --fg-mute:   #A9B2BF;
    --fg-faint:  #8D97A5;
    --link:      #86B4F0;
    --danger:    #F28B82;
    --danger-bg: #3A1D1B;
    --ok:        #74CF9D;
    --warn:      #E6B45C;
    --warn-bg:   #33290F;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow-2: 0 6px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    --shadow-3: 0 24px 64px rgba(0,0,0,.6);
    --line-strong:  #3A4658;
    --link-hover:   #B0CDF6;
    --select:       #1F2E45;
    --select-hover: #263853;
    --row-active:   #1C2A3F;
    --info-bg:      #16243A;
    --info-line:    #2A4466;
    --info-fg:      #C2D6F2;
    --hot-bg:       #3A2F17;
    --ok-bg:        #15291F;
    --ok-line:      #2E5A42;
    --warn-line:    #5C4A1E;
    --danger-line:  #6B2C27;
    --danger-fg:    #F5B7B1;
    --input-bad:    #2A1716;
    --save-bg:      #14271F;
    --save-line:    #2F6B52;
    --save-hover:   #193026;
    --save-ico:     #1F3D30;
    --save-ico-fg:  #95D6B8;
    --bench-bg:     #221B33;
    --bench-line:   #52437D;
    --bench-hover:  #2A2140;
    --bench-ico:    #33294D;
    --bench-ico-fg: #CBBBF3;
    --out-bg:       #262117;
    --out-line:     #4D4330;
    color-scheme: dark;
  }
}

/* In the dark theme the page's few pure-white panels need softening. */
:root[data-theme="dark"] .pview__frame,
:root[data-theme="system"] .pview__frame{ border-color:var(--line); }

/* Text size: every size in this sheet is multiplied by --text-scale. */
:root[data-text="smaller"]{ --text-scale: .92; }
:root[data-text="larger"]{  --text-scale: 1.12; }
:root[data-text="largest"]{ --text-scale: 1.25; }

/* Compact rows: more documents on the screen at once. */
:root[data-density="compact"] table.docs td{ padding-top:2px; padding-bottom:2px; }
:root[data-density="compact"] table.list td{ padding-top:4px; padding-bottom:4px; }
:root[data-density="compact"] .fold{ padding-top:3px; padding-bottom:3px; }
:root[data-density="compact"] .fdoc{ padding-top:2px; padding-bottom:2px; }
:root[data-density="compact"] .mrow{ padding-top:6px; padding-bottom:6px; }
:root[data-density="compact"] .dn__ico{ height:22px; }

/* ---- the settings dialog ---- */
.set__sec{ margin:0 0 18px; }
.set__sec:last-child{ margin-bottom:0; }
.set__h{
  font-size:calc(10px * var(--text-scale)); letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-mute); font-weight:600; margin:0 0 8px;
}
.set__themes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; }
.set__theme{
  display:grid; gap:7px; padding:8px; text-align:left; cursor:pointer;
  background:var(--surface); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius);
}
.set__theme:hover{ border-color:var(--line-strong); }
.set__theme[aria-checked="true"]{ border-color:var(--brass); box-shadow:0 0 0 2px var(--brass); }
.set__theme b{ font-size:calc(12.5px * var(--text-scale)); font-weight:600; }
.set__sw{ height:54px; border-radius:2px; overflow:hidden; display:grid; grid-template-rows:12px 1fr; border:1px solid rgba(0,0,0,.12); }
.set__sw i{ display:block; }
.set__sw span{ display:grid; grid-template-columns:22px 1fr; }
.set__seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; flex-wrap:wrap; }
.set__seg button{
  display:inline-flex; align-items:baseline; gap:6px; padding:7px 14px; cursor:pointer;
  background:var(--surface); color:var(--fg); border:0; border-right:1px solid var(--line);
  font-size:calc(12.5px * var(--text-scale));
}
.set__seg button:last-child{ border-right:0; }
.set__seg button[aria-checked="true"]{ background:var(--navy); color:#F5F3ED; }
.set__seg .set__a{ font-family:var(--serif); font-weight:600; line-height:1; }
.set__sample{
  margin:10px 0 0; padding:10px 12px; border:1px dashed var(--line-strong); border-radius:var(--radius);
  font-size:calc(13px * var(--text-scale)); color:var(--fg);
}
.set__note{ font-size:calc(11.5px * var(--text-scale)); color:var(--fg-faint); margin:6px 0 0; }