/* Law office desk: a well-kept paper file. Calm grey desk, white paper,
   ink, one navy accent, red only when overdue, green once handled.
   Serif for what is a document, sans for what is a control.

     shelf of folders | the open page (cover, register, paper) | margin: clock, deadlines */

:root{--desk:#e9ebee;--shelf:#dcdfe4;--paper:#fff;--ink:#16181c;--ink-2:#33373e;--mute:#4c5159;--faint:#6b7078;--line:#d3d6db;--edge:#b9bec7;--hair:#eceef1;
  --navy:#1d2b4f;--navy-soft:#e3e8f2;--red:#b3261e;--green:#1f6b45;--rec:#e04a3f;--serif:"Source Serif",Georgia,serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--ink);background:var(--desk);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
small{display:block;font-size:12.5px;font-weight:400;color:var(--mute)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.end{text-align:right}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ok{color:var(--green);font-weight:600}
.bad{color:var(--red);font-weight:600}
.warn{color:var(--navy);font-weight:600}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
h1:focus{outline:0}

/* DESK: three columns, each scrolls on its own. */
.cab{display:grid;grid-template-columns:268px minmax(0,1fr) 300px;height:100vh}
.page{min-width:0;overflow-y:auto;padding:24px 28px 40px}
.page noscript p{font-family:var(--serif);font-size:18px}

/* SHELF: the firm, four desk pages, then one folder per open file. */
.shelf{display:flex;flex-direction:column;min-height:0;overflow-y:auto;background:var(--shelf);border-right:1px solid var(--edge)}
.firm{display:block;padding:20px 20px 14px;text-decoration:none}
.firm b{display:block;font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.firm span{font-size:12.5px;color:var(--mute)}
.desk-nav{display:grid;gap:1px;padding:0 12px 14px;border-bottom:1px solid var(--edge)}
.desk-nav a{padding:7px 8px;border-radius:3px;font-size:14px;color:var(--ink-2);text-decoration:none}
.desk-nav a:hover{background:#cfd3da}
.desk-nav a[aria-current]{background:var(--ink);color:#fff;font-weight:600}
.shelf-k{padding:14px 20px 8px;font-size:12.5px;font-weight:600;color:var(--mute)}
.folders{list-style:none;display:grid;gap:4px;padding-left:12px}
.folder{display:grid;gap:1px;padding:7px 10px 8px 11px;background:#f1f2f5;border:1px solid var(--edge);border-right:0;border-left:6px solid #8d95a8;border-radius:4px 0 0 4px;text-decoration:none}
.folder:hover{background:#fff}
.folder b{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.2}
.folder i{font-style:normal;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder .next{display:flex;align-items:center;gap:6px;min-width:0;margin-top:4px;font-size:12px;color:var(--ink-2)}
.folder .next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder .jn{flex:none;min-width:38px;padding:1px 5px;font-size:11.5px}
.folder.on{position:relative;margin-right:-1px;background:var(--paper);border-left-color:var(--navy);border-left-width:10px;padding-left:7px}
.demo{margin-top:auto;padding:14px 20px;font-size:12px;color:var(--mute)}

/* COUNTDOWN SQUARE */
.jn{display:inline-block;min-width:46px;padding:3px 7px;border-radius:3px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}
.jn.soon{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.jn.late{background:var(--red)}
.jn.done{background:var(--green)}

/* CONTROLS */
.btn{display:inline-block;padding:5px 10px;border:1px solid var(--navy);border-radius:3px;background:var(--paper);color:var(--navy);font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--navy-soft)}
.btn-fill{background:var(--navy);color:#fff}
.btn-fill:hover{background:#2a3c6b}
.btn+.btn{margin-left:6px}
.more{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:4px;overflow:hidden;background:var(--paper)}
.seg a{padding:6px 12px;font-size:13px;text-decoration:none;white-space:nowrap}
.seg a+a{border-left:1px solid var(--edge)}
.seg a[aria-current]{background:var(--ink);color:#fff;font-weight:600}
.find input{width:330px;max-width:100%;height:36px;padding:0 12px;border:1px solid var(--edge);border-radius:4px;background:var(--paper)}

/* PAGE HEAD AND FIGURES */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.head>div{flex:1;min-width:0}
.head h1{font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.lede{max-width:66ch;margin-top:6px;font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--ink-2)}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px;background:var(--paper);border:1px solid var(--line);border-top:1px solid var(--ink);border-radius:0 0 4px 4px}
.fig{padding:11px 16px 12px}
.fig+.fig{border-left:1px solid var(--line)}
.fig dt{font-size:12.5px;font-weight:600;color:var(--mute)}
.fig .num{font-family:var(--serif);font-size:28px;font-weight:600;line-height:1.2;white-space:nowrap}
.fig dd+dd{font-size:12.5px;color:var(--mute)}
.fig.bad .num{color:var(--red)}
.fig.good .num{color:var(--green)}

/* REGISTER: a ruled table on white paper. */
.sheet{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:4px}
.sheet>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 16px 9px;border-bottom:1px solid var(--ink)}
.sheet h2{font-size:15px;font-weight:600}
.reg{width:100%;border-collapse:collapse}
.reg th{padding:8px 10px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mute);text-align:left;white-space:nowrap}
.reg th.end{text-align:right}
.reg td{padding:8px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
.reg tr:last-child td{border-bottom:0}
.reg th:first-child,.reg td:first-child{padding-left:16px}
.reg th:last-child,.reg td:last-child{padding-right:16px}
.reg td a{text-underline-offset:2px}
.reg .name{font-family:var(--serif);font-size:16.5px;font-weight:600;text-decoration:none}
.reg .name i{margin-right:.1em;font-weight:400;color:var(--mute)}
.reg td.end{white-space:nowrap}
#files th:nth-child(1){width:36%}
#files th:nth-child(2){width:19%}
#files th:nth-child(3){width:25%}
.reg .c-jn{width:76px}
.reg .c-date{white-space:nowrap}
.reg .c-act{text-align:right;white-space:nowrap}
.reg .grp th{padding:7px 16px;background:#f1f2f5;border-top:1px solid var(--line);color:var(--ink);font-size:13px}
.reg tr.off td{color:var(--faint)}
.reg tr[hidden]{display:none}
.nx{display:flex;align-items:flex-start;gap:8px}
.reg.loose td:first-child{width:52%}
.reg.inner{margin-top:20px}
.reg.inner caption{padding-bottom:6px;border-bottom:1px solid var(--ink);font-size:13px;font-weight:600;color:var(--mute);text-align:left}
.reg.inner td:first-child{padding-left:0}
.reg.inner td:last-child{padding-right:0}

/* COVER: the folder itself, ear on top, serif title, the state in labelled lines. */
.cover{position:relative;margin-top:24px;background:var(--paper);border-left:10px solid var(--navy);border-radius:2px 6px 6px 6px;box-shadow:0 1px 0 #c3c7cd,0 0 0 1px var(--line)}
.tab-ear{position:absolute;top:-24px;left:-10px;height:24px;padding:4px 16px 0;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;border-radius:5px 5px 0 0}
.cv{padding:20px 30px 12px}
.jur,.who{font-size:13px;color:var(--mute)}
.cv h1{margin-top:4px;font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.cv h1 i{margin-right:.1em;font-weight:400;color:var(--mute)}
.obj{margin-top:4px;font-family:var(--serif);font-size:18px;color:var(--ink-2)}
.who{margin-top:6px}
.state{margin-top:14px;padding-top:11px;border-top:1px solid var(--ink)}
.ask-q{font-size:14px;font-weight:600;color:var(--navy)}
.ask-q::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--navy);vertical-align:1px}
.state dl{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;margin-top:4px}
.state dl div{display:grid;grid-template-columns:88px 1fr;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--hair)}
.state dt{font-size:12.5px;font-weight:600;color:var(--faint)}
.state dd{font-family:var(--serif);font-size:16.5px;line-height:1.3}
.state dd .btn{margin-left:6px;padding:1px 6px;font-family:var(--sans);font-size:12px;vertical-align:2px}
.state .stop{grid-column:1/-1;border-bottom:0}
.state .stop dt,.state .stop dd{color:var(--red);font-weight:600}
.state .stop.clear dt,.state .stop.clear dd{color:var(--green)}
.src{margin-top:2px;font-size:12px;color:var(--faint)}
.tabs{display:flex;gap:2px;padding:0 30px;border-bottom:1px solid var(--line)}
.tabs a{margin-bottom:-1px;padding:9px 14px;border-bottom:2px solid transparent;color:var(--mute);white-space:nowrap;text-decoration:none}
.tabs a[aria-current]{border-color:var(--navy);color:var(--ink);font-weight:600}
.tabs i{margin-left:3px;font-style:normal;font-size:12px;font-weight:400;color:var(--faint)}
.panel{padding:4px 30px 22px}
.panel-k{padding:9px 0 3px;font-size:13px;color:var(--mute)}
.panel-k a{margin-left:4px;font-weight:600;color:var(--navy)}

/* Lists of a file: pieces, steps, letters, time. */
.pieces{list-style:none;font-family:var(--serif);font-size:15.5px}
.pieces li{display:grid;grid-template-columns:44px 1fr;padding:6px 0;border-bottom:1px solid var(--hair)}
.pieces b{padding-top:2px;font-family:var(--sans);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--mute)}
.pieces .new b,.pieces .in b{color:var(--navy);font-weight:800}
.pieces small{font-family:var(--sans);font-size:12px;color:var(--faint)}
.pieces .in small{display:inline;margin-left:6px}
.pieces em{margin-left:8px;padding:1px 6px;border:1px solid var(--edge);border-radius:3px;font-family:var(--sans);font-style:normal;font-size:12px;color:var(--mute)}
.pieces .btn{margin-left:8px;padding:1px 6px;font-size:12px;vertical-align:1px}
.pieces .ok{margin-left:8px;font-family:var(--sans);font-size:12px}
.pieces .more{border-bottom:0;color:var(--mute)}
.pieces.dated li{grid-template-columns:104px 1fr}
.pieces.times li{grid-template-columns:104px 1fr auto}
.pieces u{font-family:var(--sans);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none}
.sum{display:flex;justify-content:space-between;padding:10px 0;border-top:2px solid var(--ink);font-weight:600}
.sum b{font-size:16px;font-variant-numeric:tabular-nums}
.fees div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:14.5px}
.fees dt{color:var(--mute)}
.fees dd{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fees .ttc{border-top:2px solid var(--ink);border-bottom:0;font-size:16px}
.fees .ttc dt{color:var(--ink);font-weight:600}
.fees .ttc dd{font-size:20px;font-weight:800}
.fees .note{align-items:center;border-bottom:0}
.fees .note .btn{padding:9px 16px;font-size:15px}

/* PAPER: the fee note and the numbered list of pieces, as they leave the office. */
.paper{max-width:700px;margin-top:16px;padding:26px 34px 22px;background:var(--paper);border:1px solid var(--edge);box-shadow:3px 3px 0 var(--line);font-family:var(--serif);font-size:15.5px}
.paper header p+p{font-family:var(--sans);font-size:13px;color:var(--mute)}
.paper-k{font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.paper-to{margin-top:12px;padding:10px 0;border-block:1px solid var(--ink);line-height:1.5}
.paper-end{margin-top:12px;font-family:var(--sans);font-size:13px;color:var(--mute)}
.bord{list-style:none;margin-top:6px}
.bord li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--hair)}
.bord b{font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.bord small{font-family:var(--sans);font-size:12px;color:var(--faint);white-space:nowrap}
.bord .new small{padding:1px 6px;border:1px solid var(--navy);border-radius:3px;color:var(--navy);font-weight:600}
.paper.note{max-width:none;padding:20px 24px 18px}
.paper table{width:100%;margin-top:10px;border-collapse:collapse}
.paper th{padding-bottom:4px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--mute);text-align:left}
.paper th.end{text-align:right}
.paper td{padding:5px 0;border-bottom:1px solid var(--hair)}
.paper td+td{padding-left:12px}
.paper td.num{font-family:var(--sans);font-size:13.5px;white-space:nowrap}
.totals{width:300px;margin:10px 0 0 auto;font-family:var(--sans);font-size:14px}
.totals div{display:flex;justify-content:space-between;padding:3px 0}
.totals dt{color:var(--mute)}
.totals .due{margin-top:4px;padding-top:6px;border-top:2px solid var(--ink);font-size:16px;font-weight:800}
.totals .due dt{color:var(--ink)}
.paper-act{display:flex;align-items:center;gap:14px;margin-top:14px;font-family:var(--sans)}
.paper-act .btn{padding:9px 16px;font-size:15px}
.paper-act span{font-size:12.5px;color:var(--mute)}
.list-acts{display:grid;gap:8px;max-width:700px;margin-top:16px}
.todo-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:3px}
.todo-line b{display:block;font-weight:600}

/* MARGIN: the clock, always there, then the deadlines of the page. */
.margin{min-height:0;overflow-y:auto;padding:20px 18px 24px;background:var(--paper);border-left:1px solid var(--line)}
.clock{display:grid;gap:4px;padding:14px 16px 16px;background:var(--ink);color:#fff;border-radius:4px}
.clock h2{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.rec{width:9px;height:9px;border-radius:50%;background:var(--rec)}
.clock-file{margin-top:4px;font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.25}
.clock-file a{text-decoration:none}
.clock-what{font-size:12.5px;color:#c6cad2}
.clock-digits{margin:2px 0 8px;font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.clock .btn{padding:9px 12px;border-color:#fff;background:#fff;color:var(--ink);font-size:14px;text-align:center}
.clock.idle{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.clock.idle .rec{background:var(--faint)}
.clock.idle .btn{border-color:var(--navy);background:var(--navy);color:#fff}
.clock-last{padding:6px 8px;background:var(--navy-soft);border-radius:3px;font-size:13px;color:var(--navy)}
.clock-last a{font-weight:600}
.clock-task{display:grid;gap:3px;margin:4px 0 8px;font-size:12.5px;color:var(--mute)}
.clock-task select{height:36px;padding:0 8px;border:1px solid var(--edge);border-radius:3px;background:var(--paper);font-size:14px;color:var(--ink)}
.todo h2{margin:22px 0 8px;font-size:14px;font-weight:600}
.todo ol{list-style:none}
.dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:10px 0;border-top:1px solid var(--hair)}
.dl>span{font-size:14.5px;font-weight:600;line-height:1.3}
.dl small{margin-top:1px}
.dl.late>span{color:var(--red)}
.dl.late small{color:var(--red)}
.dl.done>span{color:var(--mute);text-decoration:line-through}
.dl.done small{text-decoration:none}
.dl .btn{grid-column:2;justify-self:start;padding:3px 9px}
.none{font-size:13px;color:var(--mute)}

/* Smaller desks: tighter columns. */
@media (max-width:1280px){
  .cab{grid-template-columns:228px minmax(0,1fr) 262px}
  .page{padding-inline:20px}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig:nth-child(3){border-left:0}
  .fig:nth-child(n+3){border-top:1px solid var(--line)}
}

/* Phone at court: one column, the folders slide sideways, tables scroll inside their sheet. */
@media (max-width:900px){
  html,body{height:auto}
  .cab{display:block;height:auto}
  .shelf{overflow:visible;border-right:0;border-bottom:1px solid var(--edge)}
  .firm{padding:14px 12px 10px}
  .desk-nav{grid-template-columns:1fr 1fr;padding:0 8px 10px}
  .shelf-k{padding:10px 12px 6px}
  .folders{display:flex;gap:6px;overflow-x:auto;padding:0 12px 12px}
  .folders li{flex:0 0 190px}
  .folder,.folder.on{margin:0;border-right:1px solid var(--edge);border-radius:4px}
  .demo{display:none}
  .page{overflow:visible;padding:16px 12px 24px}
  .head{display:block}
  .head h1{font-size:28px}
  .head>:last-child:not(:first-child){display:inline-flex;margin-top:10px}
  .find{width:100%}
  .find input{width:100%}
  /* A register row becomes a small card: what it is on the first line, its action under it. */
  .reg,.reg tbody{display:block}
  .reg thead{display:none}
  .reg tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;padding:10px 12px;border-bottom:1px solid var(--hair)}
  .reg tr:last-child{border-bottom:0}
  .reg td,.reg td:first-child,.reg td:last-child{display:block;padding:0;border:0}
  .reg:not(.dues) td:first-child,.reg.loose td:first-child{flex:0 0 100%;width:auto}
  .reg .c-jn{width:auto}
  .dues td:nth-child(3){flex:1 1 50%}
  .dues td:nth-child(4){flex:1 1 60%}
  .reg .c-act{flex:0 0 100%;margin-top:4px;text-align:left}
  .reg .c-act:empty{display:none}
  .reg tr.grp{padding:0}
  .reg .grp th{flex:1;padding:7px 12px}
  .reg.inner tr{padding-inline:0}
  .reg.inner caption{display:block}
  .cv{padding:16px 16px 10px}
  .cv h1{font-size:30px}
  .state dl{grid-template-columns:1fr}
  .tabs{overflow-x:auto;padding:0 8px}
  .tabs a{padding-inline:10px}
  .panel{padding:4px 16px 18px;overflow-x:auto}
  .pieces.dated li{grid-template-columns:88px 1fr}
  .pieces.times li{grid-template-columns:88px 1fr auto}
  .fees div{flex-wrap:wrap;gap:2px 12px}
  .paper,.paper.note{padding:18px 16px}
  .bord li{grid-template-columns:28px 1fr}
  .bord small{grid-column:2;justify-self:start}
  .totals{width:100%}
  .paper-act,.todo-line{flex-direction:column;align-items:flex-start;gap:8px}
  .margin{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:16px 12px 24px}
}