/* DrawVault — drawing and revision control.

   The visual language is taken from the issued drawing sheet rather than from
   a dashboard kit: the title block in the corner of every sheet is already the
   right form for this job, so the register borrows its hairline rules, boxed
   labelled fields, tabular figures and numbered revision triangle. Colours come
   from the drafting bench -- film stock, graphite, revision pencil, stamp ink --
   and the red is spent on revisions alone, never on chrome. */

:root{
  /* drafting film, not cream: grey-green, no yellow in it */
  --sheet:#f2f2ee; --panel:#ffffff; --sunk:#f7f7f4;
  /* graphite reads softer than pure black and is what the subject is drawn in */
  --ink:#15171a; --graphite:#4c514e; --faint:#777d78;
  --rule:#cbccc6; --rule-soft:#e2e3dd;
  /* revision pencil. the only loud colour in the interface */
  --redline:#b3301f; --redline-soft:#f7e8e5;
  /* approval stamp inks */
  --stamp-ok:#1f6b4a; --stamp-ok-soft:#e6f0ea;
  --stamp-hold:#8a6410; --stamp-hold-soft:#f6efdd;
  --stamp-cool:#2b4f6b; --stamp-cool-soft:#e8eef3;

  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --r:3px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--sans);background:var(--sheet);color:var(--ink);
  font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule);text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--redline);color:var(--redline)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.011em}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.muted{color:var(--faint)}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- sign in ----------
   A sheet on the bench. The frame and its corner ticks are the one piece of
   ornament in the product, and they only appear here, where there is room. */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:var(--sheet)}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-pitch{display:none}}
.auth-pitch{position:relative;padding:60px 56px;display:flex;flex-direction:column;
  justify-content:center;border-right:1px solid var(--rule)}
.auth-pitch::before{content:"";position:absolute;inset:26px;border:1px solid var(--rule);
  pointer-events:none}
/* the title block sits bottom-right on a real sheet, so the tick goes there */
.auth-pitch::after{content:"";position:absolute;right:26px;bottom:26px;width:96px;height:46px;
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);pointer-events:none}
.auth-pitch h1{font-size:clamp(28px,3.4vw,40px);line-height:1.08;margin-bottom:18px;
  font-weight:600;max-width:15ch;letter-spacing:-.025em}
.auth-pitch>p{color:var(--graphite);max-width:46ch;margin:0 0 36px;font-size:15px}
.auth-pitch ul{list-style:none;padding:0;margin:0;display:grid;gap:0;max-width:46ch;
  border-top:1px solid var(--rule)}
.auth-pitch li{display:block;color:var(--graphite);padding:13px 0;
  border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.auth-pitch li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;
  background:var(--panel)}
.auth-card{width:100%;max-width:340px}
.auth-card h2{font-size:21px;margin-bottom:3px}
.auth-card>p{margin:0 0 26px;color:var(--faint)}

/* ---------- frame ---------- */
.app{display:grid;grid-template-columns:208px 1fr;min-height:100vh}
@media(max-width:820px){.app{grid-template-columns:1fr}.side{display:none}}
.side{background:var(--ink);color:#b9beba;display:flex;flex-direction:column;padding:18px 10px 14px}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 22px;color:#fff;font-weight:600;
  font-size:15px;letter-spacing:-.02em}
/* the revision triangle, the product's own mark */
.brand .dot{width:0;height:0;flex:none;border-left:6px solid transparent;
  border-right:6px solid transparent;border-bottom:10px solid var(--redline);
  background:none;border-radius:0;box-shadow:none}
.nav{display:grid;gap:1px}
.nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
  border:0;border-left:2px solid transparent;color:#9aa09b;padding:7px 10px;cursor:pointer;
  font-size:13.5px}
.nav button:hover{color:#fff}
.nav button.on{color:#fff;font-weight:600;border-left-color:var(--redline);
  background:rgba(255,255,255,.05)}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding-top:13px;font-size:12.5px}
.side-foot .who{color:#fff;font-weight:600}
.side-foot .plan{display:inline-block;margin-top:5px;border:1px solid rgba(255,255,255,.28);
  padding:1px 6px;font-size:10.5px;letter-spacing:.06em;color:#cfd4d0;background:none;border-radius:0}
.side-foot button{margin-top:11px;background:none;border:1px solid rgba(255,255,255,.22);
  color:#b9beba;padding:5px 10px;cursor:pointer;font-size:12.5px;width:100%;border-radius:var(--r)}
.side-foot button:hover{background:rgba(255,255,255,.08);color:#fff}

.main{min-width:0;display:flex;flex-direction:column;background:var(--sheet)}
.topbar{background:var(--sheet);border-bottom:1px solid var(--rule);padding:16px 26px 14px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.topbar h2{font-size:19px;letter-spacing:-.02em}
.topbar .crumb{color:var(--faint);font-size:12px;margin-bottom:2px}
.topbar .spacer{flex:1}
.content{padding:24px 26px 72px;flex:1;min-width:0}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;
  border:1px solid var(--ink);padding:7px 14px;border-radius:var(--r);cursor:pointer;
  font-weight:500;font-size:13.5px;white-space:nowrap;transition:background .12s ease}
.btn:hover{background:#000;border-color:#000}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--sunk);border-color:var(--graphite)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.danger{background:var(--redline);border-color:var(--redline)}
.btn.danger:hover{background:#95271a;border-color:#95271a}

.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--graphite);margin-bottom:5px}
.field .hint{font-weight:400;color:var(--faint);font-size:12px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--panel);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
textarea{min-height:72px;resize:vertical}
input[type=file]{width:100%;padding:9px;border:1px dashed var(--rule);border-radius:var(--r);
  background:var(--sunk)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.row{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);box-shadow:none}
.card-h{padding:13px 16px;border-bottom:1px solid var(--rule-soft);display:flex;align-items:center;gap:10px}
.card-h h3{font-size:14.5px}
.card-b{padding:16px}

/* ---------- title block ----------
   What a stat row becomes when the subject is a drawing: the boxed, ruled,
   labelled strip that sits in the corner of every issued sheet. Same numbers,
   in the form the people reading them already know. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  margin-bottom:24px;border:1px solid var(--rule);background:var(--panel);border-radius:var(--r)}
.stat{padding:12px 16px 13px;border-right:1px solid var(--rule-soft);background:none;
  border-radius:0;border-top:0;border-bottom:0;border-left:0}
.stat:last-child{border-right:0}
@media(max-width:700px){.stat{border-bottom:1px solid var(--rule-soft)}}
.stat .k{font-size:11.5px;color:var(--faint);font-weight:500;letter-spacing:0;text-transform:none}
.stat .v{font-size:25px;font-weight:600;letter-spacing:-.03em;margin-top:2px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
/* a name is read, not counted, so it is set in the interface face at text size */
.stat .v.text{font-family:var(--sans);font-size:15px;letter-spacing:-.01em;margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- register ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:12px;color:var(--graphite);font-weight:600;padding:9px 12px;
  border-bottom:1px solid var(--rule);background:var(--sunk);white-space:nowrap;
  letter-spacing:0;text-transform:none}
td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sunk)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);background:var(--panel);
  border-radius:var(--r);box-shadow:none}
.clickable{cursor:pointer}
/* a drawing number is one token and must never break across lines */
td .mono,th .mono{font-size:12.5px;white-space:nowrap}
/* a whole column of underlined numbers is a wall of rules; the underline waits
   for the pointer, and the row is clickable regardless */
td a{text-decoration:none}
td a:hover{text-decoration:underline;text-decoration-color:var(--redline)}

/* ---------- stamps ----------
   An approval is a stamp pressed onto the sheet, so it is drawn as one: ruled
   outline, ink colour, no heavy fill. Quieter than a filled badge at register
   density, and it keeps solid colour free for the revision marker. */
.pill{display:inline-block;padding:1px 6px;border-radius:2px;font-size:11px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;border:1px solid currentColor;line-height:1.5}
.pill.wip{color:var(--faint);background:none}
.pill.ifr{color:var(--stamp-cool);background:var(--stamp-cool-soft)}
.pill.ifa{color:var(--stamp-hold);background:var(--stamp-hold-soft)}
.pill.ifc{color:var(--stamp-ok);background:var(--stamp-ok-soft)}
.pill.asbuilt{color:#4a3d7a;background:#ecebf6}
/* Also carries "missing" down the DWG column, where it repeats on most rows.
   A gap should be legible without shouting, so it is the lightest mark here. */
.pill.superseded{color:var(--faint);background:none;border-color:var(--rule-soft);font-weight:500}
.pill.hold{color:var(--stamp-hold);background:var(--stamp-hold-soft)}
/* NTPC's verdict on the sheet. Approved is settled, comments mean work is
   outstanding, resubmit means it comes back -- so only resubmit takes the red. */
.pill.approved{color:var(--stamp-ok);background:var(--stamp-ok-soft)}
.pill.approvedwithcomments{color:var(--stamp-hold);background:var(--stamp-hold-soft)}
.pill.resubmit{color:var(--redline);background:var(--redline-soft)}

/* Arrived recently. The only filled chip in the register, which is what makes
   it findable while scrolling -- every status and category stamp around it is
   outlined. It keeps clear of the red, which means a drawing is coming back. */
.tag-new{display:inline-block;background:var(--ink);color:#fff;border-radius:2px;
  padding:1px 6px;font-size:10.5px;font-weight:600;letter-spacing:.015em;
  white-space:nowrap;margin-right:6px;font-variant-numeric:tabular-nums}

/* The drafting revision marker: a numbered triangle, as drawn on the sheet.
   It is graphite by default -- a red triangle against every row would make the
   red mean nothing -- and turns red only where the drawing is coming back. */
.revmark{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);
  font-weight:600;font-size:12.5px;white-space:nowrap}
.revmark::before{content:"";width:0;height:0;border-left:5px solid transparent;
  border-right:5px solid transparent;border-bottom:9px solid var(--graphite);flex:none}
.revmark.alert::before{border-bottom-color:var(--redline)}
.revmark.none{color:var(--faint);font-weight:500}
.revmark.none::before{border-bottom-color:var(--rule-soft)}

.empty{text-align:center;padding:56px 20px;color:var(--faint);border:1px dashed var(--rule);
  background:var(--panel);border-radius:var(--r)}
.empty h3{color:var(--ink);margin-bottom:7px;font-size:15px}

.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input[type=text],.toolbar select{width:auto;min-width:150px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:20px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 15px;
  cursor:pointer;color:var(--faint);font-weight:500;font-size:13.5px;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(21,23,26,.4);display:flex;align-items:flex-start;
  justify-content:center;padding:44px 16px;overflow-y:auto;z-index:50}
.modal{background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);width:100%;
  max-width:640px;box-shadow:0 24px 60px rgba(21,23,26,.22)}
.modal.wide{max-width:880px}
.modal-h{padding:15px 20px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px}
.modal-h h3{font-size:16px;flex:1}
.modal-h button.x{background:none;border:0;font-size:21px;line-height:1;cursor:pointer;
  color:var(--faint);padding:0 4px}
.modal-h button.x:hover{color:var(--redline)}
.modal-b{padding:20px;max-height:66vh;overflow-y:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--rule);display:flex;gap:9px;
  justify-content:flex-end;background:var(--sunk);border-radius:0 0 var(--r) var(--r)}

.msg{padding:10px 13px;border-radius:var(--r);margin-bottom:15px;font-size:13px;
  border:0;border-left:3px solid currentColor}
.msg.err{background:var(--redline-soft);color:var(--redline)}
.msg.ok{background:var(--stamp-ok-soft);color:var(--stamp-ok)}
.msg.info{background:var(--stamp-cool-soft);color:var(--stamp-cool)}

/* ---------- revision history ---------- */
.rev-list{display:grid;gap:0;border-top:1px solid var(--rule-soft)}
.rev{border:0;border-bottom:1px solid var(--rule-soft);border-radius:0;padding:13px 2px;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:none}
.rev.latest{background:var(--sunk);box-shadow:inset 3px 0 0 var(--redline);padding-left:13px;
  border-color:var(--rule-soft)}
.rev .code{font-family:var(--mono);font-weight:600;font-size:15px;min-width:44px;
  letter-spacing:-.02em}
.rev .meta{flex:1;min-width:160px}
.rev .meta .fn{font-weight:500;word-break:break-all}
.rev .meta .sub{font-size:12px;color:var(--faint);margin-top:2px}

.feed{display:grid;gap:0}
.feed-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:13px}
.feed-item:last-child{border-bottom:0}
.feed-item .dot{width:5px;height:5px;border-radius:0;background:var(--graphite);margin-top:7px;flex:none}
.feed-item .t{color:var(--faint);font-size:12px;white-space:nowrap}

.inline-note{font-size:12.5px;color:var(--faint);margin-top:6px}
code.k{background:var(--sunk);border:1px solid var(--rule-soft);padding:1px 5px;border-radius:2px;
  font-family:var(--mono);font-size:12px}
ol.steps{padding-left:20px;margin:10px 0;font-size:13px;color:var(--graphite)}
ol.steps li{margin-bottom:7px}


/* ---------------------------------------------------------------- depth
   Sheets lying on a light table. Three heights, and the height says what a
   thing is: a sheet at rest, a sheet picked up, a sheet held over the rest.
   The shadow is graphite, not black, so it sits with the paper. */
:root{
  --lift-1:0 1px 0 rgba(21,23,26,.04),0 1px 2px rgba(21,23,26,.06),0 6px 16px -8px rgba(21,23,26,.14);
  --lift-2:0 1px 0 rgba(21,23,26,.05),0 3px 6px rgba(21,23,26,.07),0 16px 32px -12px rgba(21,23,26,.22);
  --lift-3:0 2px 4px rgba(21,23,26,.08),0 12px 24px -6px rgba(21,23,26,.18),0 40px 80px -20px rgba(21,23,26,.38);
  --ease:cubic-bezier(.2,.7,.2,1);
}
.card,.tbl-wrap,.stats{box-shadow:var(--lift-1)}
.card{transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s}
.card.clickable:hover,a.card:hover{box-shadow:var(--lift-2);transform:translateY(-2px);
  border-color:var(--graphite)}
.side{box-shadow:8px 0 28px -14px rgba(21,23,26,.45);position:relative;z-index:2}
.topbar{box-shadow:0 8px 18px -16px rgba(21,23,26,.35);position:relative;z-index:1}
.auth-card{background:var(--panel);padding:30px 28px;border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--lift-2);max-width:380px}
.modal{box-shadow:var(--lift-3)}
.modal-bg{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.msg{box-shadow:var(--lift-1)}

/* Buttons sit a hair above the sheet and go down when pressed. */
.btn{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 1px 2px rgba(21,23,26,.2),0 4px 10px -4px rgba(21,23,26,.3);
  transition:background .14s ease,border-color .14s ease,box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 2px 4px rgba(21,23,26,.2),0 10px 18px -6px rgba(21,23,26,.36)}
.btn:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 1px rgba(21,23,26,.2)}
.btn.ghost{box-shadow:0 1px 2px rgba(21,23,26,.06)}
.btn.ghost:hover:not(:disabled){box-shadow:0 2px 4px rgba(21,23,26,.07),0 8px 14px -8px rgba(21,23,26,.22)}
.btn.ghost:active:not(:disabled){box-shadow:inset 0 1px 2px rgba(21,23,26,.12)}

input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}

/* A row answers the pointer: it lightens and takes a redline in the margin. */
tbody tr{transition:background .12s ease}
tbody tr td:first-child{transition:box-shadow .16s var(--ease)}
tbody tr.clickable:hover td:first-child,
.clickable tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--redline)}
.nav button{transition:color .15s ease,background .15s ease,border-color .15s ease,padding-left .18s var(--ease)}
.nav button:hover:not(.on){padding-left:13px}
.tabs button{transition:color .15s ease,border-color .2s ease}
.rev{transition:background .15s ease}
.pill,.revmark{transition:background .15s ease,color .15s ease}

/* --------------------------------------------------------------- motion
   One entrance per screen: the sheets are laid down in order. It runs when
   you arrive somewhere, not every time a filter redraws the list. */
@keyframes lay-down{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pick-up{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes drop-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes stamp{0%{opacity:0;transform:scale(1.5) rotate(-6deg)}60%{opacity:1;transform:scale(.94) rotate(0)}100%{transform:none}}
@keyframes flag{0%{box-shadow:0 0 0 0 rgba(179,48,31,.45)}100%{box-shadow:0 0 0 8px rgba(179,48,31,0)}}

.content.enter>*{animation:lay-down .42s var(--ease) both}
.content.enter>*:nth-child(2){animation-delay:.05s}
.content.enter>*:nth-child(3){animation-delay:.1s}
.content.enter>*:nth-child(4){animation-delay:.15s}
.content.enter>*:nth-child(n+5){animation-delay:.2s}
.content.enter .tag-new{animation:stamp .36s var(--ease) .45s both}
.content.enter .mdl-flag{animation:flag .9s ease-out .6s 2}

.modal-bg{animation:fade-in .18s ease both}
.modal{animation:pick-up .28s var(--ease) both}
.msg{animation:drop-in .3s var(--ease) both}
.auth-card{animation:pick-up .5s var(--ease) both}

/* What the check against the MDL found, spelled out under a revision. */
.mdl-notes{margin:5px 0 4px;padding:6px 10px;border-left:2px solid var(--redline);
  background:var(--redline-soft);color:var(--redline);font-size:12.5px;border-radius:0 2px 2px 0}
.mdl-notes div+div{margin-top:2px}


/* -------------------------------------------------------- project boards */
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-bottom:6px}
.board{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 20px 16px;box-shadow:var(--lift-1);cursor:pointer;
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s}
.board:hover{box-shadow:var(--lift-2);transform:translateY(-3px);border-color:var(--graphite)}
.board header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.board h3{font-size:17px;letter-spacing:-.02em}
.board header .muted{font-size:12.5px;margin-top:2px}
.ring{width:76px;height:76px;flex:none}
.ring circle{fill:none;stroke-width:7}
.ring .track{stroke:var(--sunk)}
.ring .arc{stroke:var(--stamp-ok);stroke-linecap:butt;transform:rotate(-90deg);
  transform-origin:40px 40px;stroke-dashoffset:var(--to)}
.ring text{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:26px;
  margin:12px 0 16px}
.figures .k{font-size:11.5px;color:var(--faint)}
.figures .v{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.figures .v.text{font-family:var(--sans);font-size:14px;letter-spacing:0;margin-top:9px;font-weight:500}
.catbar{display:flex;height:14px;gap:2px;border-radius:2px;overflow:hidden;background:var(--sunk);
  transform-origin:left center}
.catbar i{display:block;flex-basis:0;min-width:3px}
.c1{background:var(--stamp-ok)} .c2{background:#c9962a} .c3{background:var(--redline)}
.c0{background:repeating-linear-gradient(135deg,var(--rule) 0 3px,transparent 3px 6px)}
.keys{display:grid;grid-template-columns:1fr;gap:6px;margin-top:13px;font-size:12.5px}
.key{display:flex;align-items:baseline;gap:7px;min-width:0}
.key i{width:9px;height:9px;flex:none;border-radius:1px;align-self:center}
.key .lbl{font-weight:600;white-space:nowrap;min-width:86px} .key b{font-size:13px;min-width:22px;text-align:right}
.key .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@keyframes sweep{from{stroke-dashoffset:var(--full)}to{stroke-dashoffset:var(--to)}}
@keyframes unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.content.enter .boards{animation:none;opacity:1}
.content.enter .board{animation:lay-down .5s var(--ease) both}
.content.enter .board:nth-child(2){animation-delay:.08s}
.content.enter .board:nth-child(3){animation-delay:.16s}
.content.enter .board:nth-child(n+4){animation-delay:.24s}
.content.enter .ring .arc{animation:sweep 1.1s var(--ease) .35s both}
.content.enter .catbar{animation:unroll 1s var(--ease) .4s both}
.content.enter .key{animation:fade-in .4s ease .9s both}


/* The register has to sit inside the page: tighter cells, the title takes the
   slack, and the Open button stays pinned to the right edge whatever happens. */
table.register th,table.register td{padding:8px 8px}
table.register td{white-space:nowrap}
table.register td.ttl{white-space:normal;min-width:170px;line-height:1.35}
table.register td.ttl .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
table.register td.ttl .sub{font-size:11.5px;margin-top:1px}
table.register .stick{position:sticky;right:0;text-align:right;background:var(--panel);
  box-shadow:-10px 0 12px -10px rgba(21,23,26,.18);padding-left:10px}
table.register thead .stick{background:var(--sunk);box-shadow:none}
table.register tbody tr:hover .stick{background:var(--sunk)}


/* The way back: out of a project to the list, out of a drawing to the register. */
.back{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);padding:4px 10px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;
  white-space:nowrap;box-shadow:0 1px 2px rgba(21,23,26,.06);
  transition:background .14s ease,border-color .14s ease,transform .18s var(--ease)}
.back:hover{background:var(--sunk);border-color:var(--graphite);transform:translateX(-2px)}
.topbar .crumb .back{margin-right:6px}
.topbar .crumb{margin-bottom:7px}
.modal-h{gap:12px}

@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}