/* The nqūb design system's components, ported from design/nqub-design-system.html.
   Every length, color and font comes from tokens.css. */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--size-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;}
:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}
::selection{background:var(--orange);color:var(--ink);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* =====================================================================
   LAYER 1 · ATOMS
   ===================================================================== */
/* text — 7 styles */
.t-display{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-3xl);line-height:1;letter-spacing:-0.025em;}
.t-page   {font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-2xl);line-height:var(--leading-tight);letter-spacing:-0.02em;}
.t-section{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-xl);line-height:var(--leading-tight);letter-spacing:-0.01em;}
.t-title  {font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-lg);line-height:var(--leading-tight);}
.t-body   {font-size:var(--size-base);color:var(--ink);}
.t-small  {font-size:var(--size-sm);color:var(--ink-2);line-height:1.45;}
.t-label  {font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);}
.t-data   {font-family:var(--font-mono);font-size:var(--size-sm);color:var(--ink-2);font-variant-numeric:tabular-nums;}

/* button — square. variant: primary | secondary | quiet */
.btn{font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);line-height:1;
  padding:var(--space-2) var(--space-4);min-height:var(--d-36);border:var(--line-1) solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;
  transition:background var(--duration),border-color var(--duration);}
.btn:hover{background:var(--paper-2);border-color:var(--ink);}
.btn[data-variant=primary]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn[data-variant=primary]:hover{background:var(--ink-2);border-color:var(--ink-2);}
.btn[data-variant=quiet]{border-color:transparent;padding-left:var(--space-2);padding-right:var(--space-2);}
.btn[data-variant=quiet]:hover{background:var(--paper-2);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* chip — round, not clickable. tone: quiet | neutral | green | yellow | red */
.chip{--c:var(--ink-2);display:inline-flex;align-items:center;gap:var(--d-6);font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);line-height:1;
  padding:var(--d-5) var(--space-3) var(--d-5) var(--d-10);border-radius:var(--round);color:var(--ink);white-space:nowrap;
  background:color-mix(in srgb,var(--c) var(--tint),var(--paper));}
.chip::before{content:"";width:var(--d-7);height:var(--d-7);border-radius:var(--round);background:var(--c);flex-shrink:0;}
.chip[data-tone=green]{--c:var(--green);} .chip[data-tone=yellow]{--c:var(--yellow);} .chip[data-tone=red]{--c:var(--red);}
.chip[data-tone=neutral]{--c:var(--ink-2);}
.chip[data-tone=quiet]{background:transparent;box-shadow:inset 0 0 0 var(--line-1) var(--line-strong);color:var(--ink-2);}
.chip[data-tone=quiet]::before{background:transparent;box-shadow:inset 0 0 0 var(--line-1) var(--line-strong);}
.chip[data-plain]::before{display:none;}
.chip[data-plain]{padding-left:var(--space-3);}

/* avatar — round. tone: orange | blue | purple  ·  data-managed = outline */
.avatar{display:inline-grid;place-items:center;width:var(--d-26);height:var(--d-26);border-radius:var(--round);flex-shrink:0;
  font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.02em;}
.avatar{--c:var(--ink-2);background:var(--c);color:var(--paper);}
.avatar[data-tone=orange]{--c:var(--orange);color:var(--ink);}
.avatar[data-tone=blue]{--c:var(--blue);}
.avatar[data-tone=purple]{--c:var(--purple);}
.avatar[data-managed]{background:transparent;color:var(--c);box-shadow:inset 0 0 0 var(--line-2) var(--c);}
.avatar[data-tone=orange][data-managed]{color:var(--ink);}
button.avatar{border:0;cursor:pointer;}
button.avatar:hover{outline:var(--line-2) solid var(--ink);outline-offset:var(--line-1);}

/* dot · diamond · progress · rule */
.dot{--c:var(--ink-2);display:inline-block;width:var(--d-8);height:var(--d-8);border-radius:var(--round);background:var(--c);flex-shrink:0;}
.dot[data-tone=green]{--c:var(--green);} .dot[data-tone=yellow]{--c:var(--yellow);} .dot[data-tone=red]{--c:var(--red);} .dot[data-tone=orange]{--c:var(--orange);}
.diamond{--c:var(--ink-2);display:inline-block;width:var(--d-11);height:var(--d-11);background:var(--c);transform:rotate(45deg);flex-shrink:0;}
.diamond[data-tone=green]{--c:var(--green);} .diamond[data-tone=yellow]{--c:var(--yellow);} .diamond[data-tone=red]{--c:var(--red);}
.diamond[data-tone=quiet]{background:var(--paper);box-shadow:inset 0 0 0 var(--line-2) var(--ink-2);}
.progress{--p:0%;height:var(--d-6);background:var(--line);position:relative;min-width:var(--d-60);border-radius:var(--round);overflow:hidden;}
.progress::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--ink);}
.rule{border:0;border-top:var(--line-1) solid var(--line);}

/* inputs — square */
.input,.select,.textarea{width:100%;font-family:var(--font-body);font-size:var(--size-base);color:var(--ink);background:var(--paper);
  border:var(--line-1) solid var(--line-strong);padding:var(--space-2) var(--space-3);min-height:var(--d-40);border-radius:0;}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink);}
/* The dropdown is a button that opens the app's own list. */
button.select{display:block;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
button.select:disabled{cursor:default;color:var(--ink-2);}
.combo-list.select-list{position:fixed;z-index:95;right:auto;margin:0;}
.select-list .combo-opt span span{font-size:var(--size-sm);color:var(--ink-2);}
.select-list .combo-opt.is-current b{font-weight:var(--weight-heavy);}
.select-list .combo-opt[aria-selected=true]{background:transparent;box-shadow:none;}
.select-list .combo-opt.is-active{background:var(--paper-2);box-shadow:inset var(--line-2) 0 0 var(--orange);}

/* Form entry styles, chosen per computer under Settings (data-fields on the page root).
   mixed: short fields are a line to type on; dropdowns, pickers and notes keep a faint box.
   underline: every field is a line to type on.
   fill: fields are a faint patch with no lines. */
[data-fields=mixed] .input,[data-fields=underline] .input,[data-fields=underline] .select,[data-fields=underline] .textarea,[data-fields=underline] .combo-control{border-color:transparent;border-bottom-color:var(--line-strong);background-color:transparent;padding-left:0;}
[data-fields=underline] .combo-control,[data-fields=underline] .textarea{padding-right:0;}
[data-fields=mixed] .input:hover,[data-fields=underline] .input:hover,[data-fields=underline] .select:hover,[data-fields=underline] .textarea:hover,[data-fields=underline] .combo-control:hover{border-color:transparent;border-bottom-color:var(--ink);}
[data-fields=mixed] .input[readonly],[data-fields=underline] .input[readonly]{border-bottom-style:dotted;border-bottom-color:var(--line);}
[data-fields=mixed] .select,[data-fields=mixed] .textarea,[data-fields=mixed] .combo-control{border-color:var(--line);}
[data-fields=mixed] .select:hover,[data-fields=mixed] .textarea:hover,[data-fields=mixed] .combo-control:hover{border-color:var(--ink-2);}
[data-fields=fill] .input,[data-fields=fill] .select,[data-fields=fill] .textarea,[data-fields=fill] .combo-control{border-color:transparent;background-color:var(--paper-2);}
[data-fields=fill] .input:hover,[data-fields=fill] .select:hover,[data-fields=fill] .textarea:hover,[data-fields=fill] .combo-control:hover{border-color:transparent;border-bottom-color:var(--ink-2);}
[data-fields=fill] .input[readonly]{background-color:transparent;}
/* While typing: an orange line under the field in place of the box around it. */
[data-fields=mixed] .input:focus-visible,[data-fields=underline] .input:focus-visible,[data-fields=underline] .select:focus-visible,[data-fields=underline] .textarea:focus-visible,[data-fields=underline] .combo-control:focus-within,
[data-fields=fill] .input:focus-visible,[data-fields=fill] .select:focus-visible,[data-fields=fill] .textarea:focus-visible,[data-fields=fill] .combo-control:focus-within{outline:0;border-bottom-color:var(--orange);box-shadow:0 var(--line-1) 0 var(--orange);}
.input[readonly]{background:var(--paper-2);border-color:var(--line);color:var(--ink-2);}
.textarea{min-height:var(--d-80);resize:vertical;}
.textarea.grow{min-height:0;resize:none;overflow:hidden;}
/* Fill-in blanks: an underline to type on, inside a line of words. */
.fillins{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-5);}
.fillin{display:inline-flex;align-items:baseline;gap:var(--space-2);font-size:var(--size-base);color:var(--ink-2);}
/* Higher contrast: the field being typed in gets a dark box as well as its orange line. */
[data-contrast=high] .input:focus-visible,[data-contrast=high] .select:focus-visible,[data-contrast=high] .textarea:focus-visible,[data-contrast=high] .combo-control:focus-within{outline:var(--line-2) solid var(--ink);outline-offset:var(--line-2);}
[data-contrast=high][data-fields=fill] .input,[data-contrast=high][data-fields=fill] .select,[data-contrast=high][data-fields=fill] .textarea,[data-contrast=high][data-fields=fill] .combo-control{border-bottom-color:var(--line-strong);}
[data-fields] .fillin .input,.fillin .input{width:var(--d-56);min-height:0;padding:var(--space-1) 0;border:0;border-bottom:var(--line-1) solid var(--line-strong);background:transparent;text-align:center;font-weight:var(--weight-semi);appearance:textfield;}
.fillin .input::-webkit-inner-spin-button,.fillin .input::-webkit-outer-spin-button{appearance:none;margin:0;}
.fillin .input:hover{border-bottom-color:var(--ink);}
.fillin .input:focus-visible{outline:0;border-bottom:var(--line-2) solid var(--orange);}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - var(--d-15)) 50%,calc(100% - var(--d-10)) 50%;background-size:var(--d-5) var(--d-5);background-repeat:no-repeat;padding-right:var(--space-6);}
.check{appearance:none;width:var(--d-18);height:var(--d-18);border:var(--line-1) solid var(--line-strong);background:var(--paper);display:inline-grid;place-items:center;cursor:pointer;flex-shrink:0;}
.check:checked{background:var(--ink);border-color:var(--ink);}
.check:checked::after{content:"";width:var(--d-8);height:var(--d-4);border:solid var(--paper);border-width:0 0 var(--d-2) var(--d-2);transform:rotate(-45deg) translate(var(--d-1),calc(var(--d-1) * -1));}

/* =====================================================================
   LAYER 2 · MOLECULES
   ===================================================================== */
.segmented{display:inline-flex;border:var(--line-1) solid var(--line-strong);}
.segmented button{font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);padding:var(--space-2) var(--space-3);min-height:var(--d-34);
  border:0;border-right:var(--line-1) solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;position:relative;}
.segmented button:last-child{border-right:0;}
.segmented button:hover{color:var(--ink);background:var(--paper-2);}
.segmented button[aria-pressed=true]{background:var(--paper-2);color:var(--ink);}
.segmented button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--line-2);background:var(--orange);}
.field{display:flex;flex-direction:column;gap:var(--space-1);}
.id-ref{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);color:var(--ink-2);letter-spacing:0.04em;}
.avatars{display:inline-flex;gap:var(--space-1);flex:none;}
.owner{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--size-sm);color:var(--ink);}
.daterange{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-2);white-space:nowrap;}
.linked{display:inline-flex;align-items:baseline;gap:var(--d-6);max-width:100%;padding:var(--d-3) var(--d-10);border-radius:var(--d-12);box-shadow:inset 0 0 0 var(--line-1) var(--line-strong);
  font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-regular);line-height:1.3;color:var(--ink);text-decoration:none;text-align:left;}
a.linked::after{content:"↗";font-size:var(--size-xs);color:var(--ink-2);flex:none;}
a.linked:hover{background:var(--paper-2);box-shadow:inset 0 0 0 var(--line-1) var(--ink-2);}
a.linked:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}
.linked .id-ref{font-weight:var(--weight-regular);white-space:nowrap;}
.linked-list{display:inline-flex;flex-wrap:wrap;gap:var(--space-1);}
.gate-ref{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);color:var(--ink);}
.stat{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border-right:var(--line-1) solid var(--line);border-bottom:var(--line-1) solid var(--line);}
.stat .t-display{font-variant-numeric:tabular-nums;}
.stat[data-tone=red] .t-display{color:var(--red);} .stat[data-tone=green] .t-display{color:var(--green);}
.checkitem{display:flex;align-items:center;gap:var(--space-2);font-size:var(--size-sm);padding:var(--space-1) 0;}
.checkitem:has(.check:checked) span{text-decoration:line-through;color:var(--ink-2);}
.comment{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2);}
.sync{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--size-sm);color:var(--ink-2);white-space:nowrap;}
button.sync{appearance:none;border:0;background:none;padding:0;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:var(--d-4);}
button.sync:hover{color:var(--ink);}
button.sync:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:var(--line-2) solid var(--ink);}
.section-toggle{all:unset;cursor:pointer;}
.section-toggle::before{content:"–\00a0";font-family:var(--font-mono);font-size:var(--size-base);font-weight:var(--weight-regular);color:var(--ink-2);}
.section-toggle[aria-expanded=false]::before{content:"+\00a0";}
.section-toggle:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}

/* =====================================================================
   LAYER 3 · ORGANISMS
   ===================================================================== */
/* top nav — centered viewport that resizes; menu content slides in from the direction of travel */
.topnav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line-1) solid var(--line);}
.topnav-inner{display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-5);min-height:var(--d-56);}
.logo{height:var(--d-18);width:auto;color:var(--ink);flex-shrink:0;}
.navgroups{display:flex;gap:var(--space-1);position:relative;}
.navtrigger{font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);color:var(--ink-2);background:transparent;border:0;
  padding:var(--space-2) var(--space-3);cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:var(--d-6);}
.navtrigger:hover,.navtrigger[aria-expanded=true]{color:var(--ink);background:var(--paper-2);}
.navtrigger[data-current]{color:var(--ink);}
.navtrigger[data-current]::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:calc(var(--d-10) * -1);height:var(--line-2);background:var(--orange);}
.navtrigger .caret{width:var(--d-6);height:var(--d-6);border-right:var(--d-1h) solid currentColor;border-bottom:var(--d-1h) solid currentColor;transform:rotate(45deg) translateY(calc(var(--d-2) * -1));transition:transform var(--duration) var(--ease);}
.navtrigger[aria-expanded=true] .caret{transform:rotate(225deg) translateY(calc(var(--d-1) * -1));}
.navviewport{position:absolute;top:calc(100% + var(--d-10));left:50%;transform:translateX(-50%) scale(.97);transform-origin:top center;
  background:var(--paper);border:var(--line-1) solid var(--ink);overflow:hidden;opacity:0;pointer-events:none;
  transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease),width var(--duration-slow) var(--ease),height var(--duration-slow) var(--ease);}
.navviewport[data-open]{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1);}
.navviewport[data-instant]{transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease);}
.navmenu{position:absolute;top:0;left:0;padding:var(--space-2);display:grid;gap:var(--d-2);width:max-content;min-width:var(--d-300);visibility:hidden;}
.navmenu[data-active]{visibility:visible;}
.navmenu[data-motion=from-end]{animation:nav-from-end var(--duration-slow) var(--ease);}
.navmenu[data-motion=from-start]{animation:nav-from-start var(--duration-slow) var(--ease);}
.navmenu[data-motion=to-end]{visibility:visible;animation:nav-to-end var(--duration-slow) var(--ease) forwards;}
.navmenu[data-motion=to-start]{visibility:visible;animation:nav-to-start var(--duration-slow) var(--ease) forwards;}
@keyframes nav-from-end{from{opacity:0;transform:translateX(var(--d-40));}to{opacity:1;transform:none;}}
@keyframes nav-from-start{from{opacity:0;transform:translateX(calc(var(--d-40) * -1));}to{opacity:1;transform:none;}}
@keyframes nav-to-end{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(var(--d-40));}}
@keyframes nav-to-start{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(calc(var(--d-40) * -1));}}
.navmenu a{display:grid;gap:var(--d-2);padding:var(--space-2) var(--space-3);color:var(--ink);text-decoration:none;border-left:var(--line-2) solid transparent;}
.navmenu a:hover{background:var(--paper-2);}
.navmenu a[aria-current]{border-left-color:var(--orange);background:var(--paper-2);}
.navmenu a b{font-size:var(--size-sm);font-weight:var(--weight-semi);}
.navmenu a span{font-size:var(--size-sm);color:var(--ink-2);}
.topnav .push{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);}

/* sidebar (alternative, for comparison) */
.sidebar{width:var(--d-220);border-right:var(--line-1) solid var(--line);padding:var(--space-4) var(--space-2);display:flex;flex-direction:column;gap:var(--space-4);background:var(--paper);}
.sidebar-group{display:flex;flex-direction:column;gap:var(--d-2);}
.sidebar-group .t-label{padding:0 var(--space-3) var(--space-1);}
.sidebar a{font-size:var(--size-sm);color:var(--ink-2);text-decoration:none;padding:var(--d-6) var(--space-3);border-left:var(--line-2) solid transparent;}
.sidebar a:hover{background:var(--paper-2);color:var(--ink);}
.sidebar a[aria-current]{border-left-color:var(--orange);background:var(--paper-2);color:var(--ink);font-weight:var(--weight-semi);}

/* kanban */
.column{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
.column-head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;
  padding-bottom:var(--space-2);border-bottom:var(--line-2) solid var(--ink);color:var(--ink);}
.column-head .n{color:var(--ink-2);font-weight:var(--weight-regular);}
.card{--c:transparent;position:relative;border:var(--line-1) solid var(--line);background:var(--paper);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);cursor:pointer;transition:border-color var(--duration);}
.card::before{content:"";position:absolute;left:calc(var(--d-1) * -1);top:calc(var(--d-1) * -1);bottom:calc(var(--d-1) * -1);width:var(--line-3);background:var(--c);}
.card:hover:not(:has(button:hover,a:hover)){border-color:var(--line-strong);}
.card[data-tone=green]{--c:var(--green);} .card[data-tone=yellow]{--c:var(--yellow);} .card[data-tone=red]{--c:var(--red);}
.card .t-title{font-size:var(--size-base);}
.card-top,.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.card-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center;}

/* panel */
.panel{border:var(--line-1) solid var(--ink);background:var(--paper);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);}
.panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);}
.panel-grid.with-number{grid-template-columns:repeat(2,minmax(0,1fr)) var(--d-84);}

/* stat grid */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--d-150),1fr));border-top:var(--line-1) solid var(--line);border-left:var(--line-1) solid var(--line);}

/* table */
.table-wrap{overflow-x:auto;border-top:var(--line-1) solid var(--line-strong);}
table.table{width:100%;border-collapse:collapse;font-size:var(--size-sm);}
.table th{text-align:left;padding:var(--space-2) var(--space-3);background:var(--paper-2);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-2);border-bottom:var(--line-1) solid var(--line-strong);white-space:nowrap;}
.table td{padding:var(--space-2) var(--space-3);color:var(--ink);border-bottom:var(--line-1) solid var(--line);vertical-align:middle;}
table.table.fixed{table-layout:fixed;min-width:var(--d-720);}
.table.fixed td{overflow-wrap:break-word;}
.table.fixed th{white-space:normal;}
.table col.col-wide{width:22%;}
.table col.col-mid{width:13%;}
.table col.col-narrow{width:11%;}
.table col.col-tight{width:6%;}
.table td.strong{font-family:var(--font-display);font-weight:var(--weight-bold);}
.table td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
/* Only a row that does something when clicked changes on hover. */
.table tbody tr[data-clickable]:hover td{background:var(--paper-2);}
/* Over a control inside a row that opens its record, only that control is lit: it is what a click would act on. */
.table tbody tr[data-clickable]:has(a:hover,button:hover,input:hover,select:hover) td{background:transparent;}
.pass{color:var(--green);font-weight:var(--weight-semi);} .fail{color:var(--red);font-weight:var(--weight-semi);}

/* gantt — read-only, day or week zoom */
.gantt-tools{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3);}
.gantt-scroll{overflow-x:auto;border-top:var(--line-1) solid var(--line-strong);border-bottom:var(--line-1) solid var(--line);}
.gantt{display:grid;grid-template-columns:var(--gantt-names) var(--tw);font-size:var(--size-sm);}
.g-label{position:sticky;left:0;z-index:2;background:var(--paper);border-right:var(--line-1) solid var(--line);border-bottom:var(--line-1) solid var(--line);
  padding:var(--d-7) var(--space-3);display:flex;gap:var(--space-2);align-items:baseline;min-height:var(--d-32);line-height:var(--gantt-leading);}
/* Names are never cut off: a long one wraps and its row grows; bars and marks sit at the row's middle. */
.g-label .g-name{all:unset;font:inherit;min-width:0;overflow-wrap:anywhere;}
/* A short ID, for rows that have one, leads in its own column, so every name starts at the same place. */
.g-label .id-ref{flex:none;min-width:var(--gantt-id);}
.g-row[data-clickable]{cursor:pointer;}
.g-row[data-clickable]:hover .g-label,.g-row[data-clickable]:hover .g-track{background-color:var(--paper-2);}
.g-label button.g-name{cursor:pointer;}
.g-label button.g-name:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:calc(var(--line-2) * -1);}
.g-head{position:sticky;left:0;z-index:3;background:var(--paper);border-right:var(--line-1) solid var(--line);border-bottom:var(--line-2) solid var(--ink);}
.g-track{position:relative;border-bottom:var(--line-1) solid var(--line);min-height:var(--d-32);}
.g-timehead{position:relative;border-bottom:var(--line-2) solid var(--ink);height:var(--d-44);}
.g-col{position:absolute;top:0;bottom:0;border-left:var(--line-1) solid var(--line);}
.g-col[data-off]{background:color-mix(in srgb,var(--ink) 6%,transparent);}
.g-col[data-holiday]{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 10%,transparent) 0 var(--d-4),transparent var(--d-4) var(--d-8));}
.g-tick{position:absolute;font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-2);white-space:nowrap;}
.g-tick[data-row=top]{top:var(--d-4);font-weight:var(--weight-semi);color:var(--ink);}
.g-tick[data-row=bottom]{bottom:var(--d-4);text-align:center;}
.g-tick[data-today]{background:var(--orange);color:var(--ink);font-weight:var(--weight-semi);}
.g-today{position:absolute;top:0;bottom:0;width:var(--line-2);background:var(--orange);z-index:1;}
.g-bar{--c:var(--ink-2);position:absolute;top:calc(50% - var(--d-7));height:var(--d-14);background:var(--c);z-index:1;}
.g-bar[data-tone=green]{--c:var(--green);} .g-bar[data-tone=red]{--c:var(--red);} .g-bar[data-tone=yellow]{--c:var(--yellow);}
.g-bar[data-tone=quiet]{background:var(--paper);box-shadow:inset 0 0 0 var(--line-1) var(--ink-2);}
.g-ms{position:absolute;top:calc(50% - var(--d-6));z-index:1;}
.g-phase{position:sticky;left:0;z-index:2;display:flex;align-items:baseline;gap:var(--space-2);min-width:0;border-right:var(--line-1) solid var(--line);padding:var(--space-2) var(--space-3) var(--space-1);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;border-bottom:var(--line-1) solid var(--line-strong);background:var(--paper);}

/* log — open on top, resolved below */
.log{display:flex;flex-direction:column;gap:var(--space-5);}
.log-entry{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:var(--line-1) solid var(--line);}
.log-entry .dot{margin-top:var(--d-8);}
.log-meta{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;}
.log-entry.log-lead{display:flex;flex-direction:column;gap:var(--space-2);}
.log-lead .log-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;}
.log-lead .log-meta{gap:var(--space-2) var(--space-4);}
.log-lead .t-body{margin:0;}
.rated{display:inline-flex;align-items:center;gap:var(--d-6);font-size:var(--size-sm);font-weight:var(--weight-semi);color:var(--ink);white-space:nowrap;}
.log-entry .rated .dot{margin-top:0;}
.fact{display:inline-flex;align-items:baseline;gap:var(--d-6);font-size:var(--size-sm);color:var(--ink);}
.fact-next::before{content:"·";color:var(--ink-2);margin-right:var(--d-6);}
.log details summary{cursor:pointer;list-style:none;}
.log details summary::-webkit-details-marker{display:none;}
.log details summary .t-small::before{content:"+ ";font-family:var(--font-mono);}
.log details[open] summary .t-small::before{content:"– ";}
.log details:not([open]) .when-open,.log details[open] .when-closed{display:none;}
.log details summary:hover .t-small{color:var(--ink);}
.log details summary:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}
.answer{position:relative;padding-left:var(--space-5);margin-top:var(--space-1);}
.answer::before{content:"";position:absolute;left:var(--space-1);top:calc(var(--d-3) * -1);width:var(--space-3);height:0.95em;border-left:var(--line-1) solid var(--ink-2);border-bottom:var(--line-1) solid var(--ink-2);}

/* tooltip (molecule) — on hover or keyboard focus */
[data-tip]{position:relative;}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + var(--d-6));left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-regular);letter-spacing:0;
  padding:var(--space-1) var(--space-2);white-space:nowrap;z-index:20;pointer-events:none;}

/* person card (organism) */
.personcard{border:var(--line-1) solid var(--ink);background:var(--paper);width:var(--d-300);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);}
.personcard-head{display:flex;gap:var(--space-3);align-items:center;}
.personcard-head .avatar{width:var(--d-40);height:var(--d-40);font-size:var(--size-sm);}
.personcard dl,.detailcard dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font-size:var(--size-sm);}
.personcard dt,.detailcard dt{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);padding-top:var(--d-2);}
.personcard dd a{color:var(--ink);}
.table td a{color:var(--ink);}
.detailcard{border:var(--line-1) solid var(--line);background:var(--paper);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);}
/* A thin rule above each detail, running the full width of the card. */
.detailcard dl{gap:0;}
.detailcard dt,.detailcard dd{margin:0;padding:var(--space-2) 0;border-top:var(--line-1) solid var(--line);}
.detailcard dd{padding-left:var(--space-3);}
.detailcard-head .section-toggle{display:flex;align-items:baseline;gap:var(--space-2);}
.detailcard-head .id-ref{white-space:nowrap;flex:none;}
.detailcard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);}
.detailcard[data-clickable]{cursor:pointer;}
.detailcard[data-clickable]:hover:not(:has(button:hover,a:hover)){border-color:var(--line-strong);}

/* modal */
.overlay-demo{background:color-mix(in srgb,var(--ink) 62%,transparent);padding:var(--space-6);display:grid;place-items:center;}
.modal{background:var(--paper);border:var(--line-1) solid var(--ink);max-width:var(--d-460);width:100%;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);}
.actions{display:flex;justify-content:flex-end;gap:var(--space-2);}

/* ===================== ADDITIONS v0.3 ===================== */
/* icons */
.icon{width:var(--d-16);height:var(--d-16);flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);}
.btn-icon{display:inline-grid;place-items:center;width:var(--d-36);height:var(--d-36);border:var(--line-1) solid transparent;background:transparent;color:var(--ink);cursor:pointer;flex-shrink:0;}
.btn-icon:hover{background:var(--paper-2);border-color:var(--line-strong);}
.btn-icon.sm{width:var(--d-24);height:var(--d-24);}
.btn[data-variant=danger]{color:var(--red);border-color:transparent;}
.btn[data-variant=danger]:hover{background:color-mix(in srgb,var(--red) var(--tint),var(--paper));border-color:var(--red);}
.btn[data-variant=danger-primary]{background:var(--red);border-color:var(--red);color:var(--paper);}
.btn[data-variant=danger-primary]:hover{background:var(--ink);border-color:var(--ink);}

/* filter chip — round, changes what you see (never data) */
.fchips{display:flex;flex-wrap:wrap;gap:var(--space-1);}
.fchip{display:inline-flex;align-items:center;gap:var(--d-6);font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);line-height:1;
  padding:var(--d-6) var(--space-3);border-radius:var(--round);border:var(--line-1) solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;}
.fchip:hover{background:var(--paper-2);}
.fchip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.fchip .n{font-family:var(--font-mono);font-size:var(--size-xs);opacity:.75;}
.filterbar{display:flex;flex-direction:column;gap:var(--space-3);}
.fgroup{display:grid;grid-template-columns:var(--d-140) 1fr;gap:var(--space-3);align-items:baseline;}

/* token — square, removable selection inside an input */
.token{display:inline-flex;align-items:center;gap:var(--d-2);font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-semi);
  background:var(--paper-2);border:var(--line-1) solid var(--line);padding:var(--d-2) var(--d-2) var(--d-2) var(--space-2);}
.token button{display:inline-grid;place-items:center;width:var(--d-18);height:var(--d-18);border:0;background:transparent;color:var(--ink-2);cursor:pointer;}
.token button:hover{background:var(--line);color:var(--ink);}
.token .icon{width:var(--d-12);height:var(--d-12);}

/* combobox */
.combo{position:relative;}
.combo-control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);min-height:var(--d-40);padding:var(--d-4) var(--space-2);border:var(--line-1) solid var(--line-strong);background:var(--paper);cursor:text;}
.combo-control:hover{border-color:var(--ink);}
.combo-control:focus-within{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}
.combo-tokens{display:contents;}
.combo-av{display:inline-flex;}
.combo-input{flex:1;min-width:var(--d-120);border:0;background:transparent;font-family:var(--font-body);font-size:var(--size-base);color:var(--ink);padding:var(--d-4);outline:none;}
.combo-list{position:absolute;z-index:30;top:calc(100% + var(--d-4));left:0;right:0;max-height:var(--d-260);overflow:auto;list-style:none;background:var(--paper);border:var(--line-1) solid var(--ink);padding:var(--space-1);}
.combo-opt{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);cursor:pointer;}
.combo-opt > span{display:grid;}
.combo-opt b{font-size:var(--size-sm);font-weight:var(--weight-semi);}
.combo-opt span span{font-size:var(--size-sm);color:var(--ink-2);}
.combo-opt[aria-selected=true]{background:var(--paper-2);box-shadow:inset var(--line-2) 0 0 var(--orange);}
.combo-create{border-top:var(--line-1) solid var(--line);}
.combo-empty{padding:var(--space-2);}

/* date field */
.datefield{display:flex;flex-direction:column;gap:var(--d-2);}
.date-control{display:flex;gap:var(--space-1);}
.date-control .input{flex:1;}
.date-preview{min-height:1.2em;color:var(--ink-2);}
.date-preview[data-error]{color:var(--red);}
.cal{position:absolute;z-index:95;width:var(--d-292);background:var(--paper);border:var(--line-1) solid var(--ink);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);}
.cal-head{display:flex;justify-content:space-between;align-items:center;}
.cal-mode{align-self:stretch;}
.cal-mode button{flex:1;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--d-2);}
.cal-dow{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-2);text-align:center;padding:var(--space-1) 0;}
.cal-day{height:var(--d-34);border:var(--line-1) solid transparent;background:transparent;font-family:var(--font-body);font-size:var(--size-sm);color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;}
.cal-day:hover{border-color:var(--ink);}
.cal-day[data-off]{color:var(--ink-2);background:color-mix(in srgb,var(--ink) 5%,transparent);}
.cal-day[data-holiday]{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 10%,transparent) 0 var(--d-3),transparent var(--d-3) var(--d-6));}
.cal-day[data-today]{border-color:var(--line-strong);font-weight:var(--weight-semi);}
/* Days inside the period the date is expected to fall in: a line along the bottom. */
.cal-day[data-period]{box-shadow:inset 0 calc(-1 * var(--line-2)) 0 var(--ink-2);}
.cal-day[data-in]{background:color-mix(in srgb,var(--orange) var(--tint),var(--paper));}
.cal-day[data-start],.cal-day[data-end]{background:var(--orange);color:var(--ink);font-weight:var(--weight-semi);}

/* scrim, drawer */
.scrim{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--ink) 45%,transparent);display:flex;justify-content:flex-end;align-items:stretch;}
.scrim:has(.modal){align-items:center;justify-content:center;padding:var(--space-5);}
.drawer{width:min(var(--d-560),100%);height:100%;background:var(--paper);border-left:var(--line-1) solid var(--ink);display:flex;flex-direction:column;transform:translateX(var(--d-24));opacity:0;transition:transform var(--duration-slow) var(--ease),opacity var(--duration) var(--ease);}
.scrim[data-open] .drawer{transform:none;opacity:1;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-5);border-bottom:var(--line-1) solid var(--line);}
.drawer-body{flex:1;overflow:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);}
.drawer-foot{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-5);border-top:var(--line-1) solid var(--line);}
.drawer-body > *{flex-shrink:0;}
.drawer:focus{outline:none;}
.title-input{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-xl);line-height:var(--leading-tight);color:var(--ink);border:var(--line-1) solid transparent;background:transparent;padding:var(--space-1);resize:none;overflow:hidden;width:100%;}
.title-input:hover{border-color:var(--line-strong);}
.dates-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--d-84);gap:var(--space-2);align-items:start;}
.flagline:empty{display:none;}
.checklist .checkitem{justify-content:flex-start;}
.checklist .checkitem span{flex:1;}
.comments{display:flex;flex-direction:column;gap:var(--space-3);}
.checklist:empty,.comments:empty{display:none;}
.empty{color:var(--ink-2);font-style:italic;}

/* toast */
.toasts{position:fixed;left:var(--space-5);bottom:var(--space-5);z-index:100;display:flex;flex-direction:column;gap:var(--space-2);}
.toast{display:flex;align-items:center;gap:var(--space-4);background:var(--ink);color:var(--paper);font-size:var(--size-sm);padding:var(--space-3) var(--space-4);animation:toast-in var(--duration-slow) var(--ease);}
.toast-action{background:transparent;border:var(--line-1) solid var(--paper);color:var(--paper);font:inherit;font-weight:var(--weight-semi);padding:var(--space-1) var(--space-2);cursor:pointer;}
@keyframes toast-in{from{opacity:0;transform:translateY(var(--d-8));}to{opacity:1;transform:none;}}

/* board */
.board-tools{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);}
.board{display:grid;gap:var(--space-4);overflow-x:auto;padding-bottom:var(--space-2);}
.column-body{display:flex;flex-direction:column;gap:var(--space-2);min-height:var(--d-40);}
.column.drop-target .column-body{outline:var(--line-2) dashed var(--line-strong);outline-offset:var(--space-1);background:var(--paper-2);}
.card.dragging{opacity:.4;}
.card:focus-visible{outline-offset:0;}
.add-card{justify-content:flex-start;color:var(--ink-2);margin-top:var(--space-1);}
.badges{display:flex;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--size-xs);color:var(--ink-2);}
.badges span{display:inline-flex;align-items:center;gap:var(--d-4);}
.badges .icon{width:var(--d-13);height:var(--d-13);}

/* table sort */
.th-sort{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;}
.th-sort:hover{color:var(--ink);}
.th-sort:focus-visible{outline:var(--line-2) solid var(--orange);}

/* chart */
.chart{width:100%;height:auto;display:block;}
.chart .grid{stroke:var(--line);stroke-width:1;}
.chart .axis{font-family:var(--font-mono);font-size:var(--size-xs);fill:var(--ink-2);}
.s-target{fill:transparent;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:3 2;}
.s-planned{fill:var(--ink-2);}
.s-done{fill:var(--green);}
.s-failed{fill:var(--red);}
.legend{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--size-sm);color:var(--ink-2);margin-top:var(--space-2);}
.legend span{display:inline-flex;align-items:center;gap:var(--space-2);}
.legend .sw{width:var(--d-14);height:var(--d-10);display:inline-block;}
.legend .sw.s-target{border:var(--d-1h) dashed var(--ink-2);}
.legend .sw.s-planned{background:var(--ink-2);} .legend .sw.s-done{background:var(--green);} .legend .sw.s-failed{background:var(--red);}

/* matrix input; a cell may carry one small action beside its input, which is marked when it holds something */
.cell-action{display:inline-flex;align-items:center;gap:var(--space-1);}
.btn-icon[data-on]{color:var(--ink);box-shadow:inset 0 0 0 var(--line-1) var(--ink);}
.matrix input{width:var(--d-64);min-height:var(--d-32);text-align:right;font-family:var(--font-mono);font-size:var(--size-sm);}
.proposed{display:inline-block;margin-left:var(--space-2);}

/* ===================== PORT NOTES =====================
   The design file sets these with inline styles or script; here they are classes and custom properties. */
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}
.row-tight{gap:var(--space-2);}
.row-wide{gap:var(--space-4);}
.gantt-tools .row-full{flex-basis:100%;}
.row-between{justify-content:space-between;}
.row-top{align-items:flex-start;}
.stack{display:flex;flex-direction:column;gap:var(--space-3);}
.stack-flush{gap:0;}
.self-start{align-self:flex-start;}
.t-strong{color:var(--ink);font-weight:var(--weight-semi);}
.t-ink{color:var(--ink);}
.t-title-sm{font-size:var(--size-base);}
a.navtrigger{text-decoration:none;}
.scrim-top{z-index:90;}
.board{grid-template-columns:repeat(var(--cols),minmax(var(--board-column),1fr));}
.cal{position:fixed;}
.logo-accent{fill:var(--orange);}
.table-status{margin:var(--space-3) 0;}
.table-more{margin-top:var(--space-3);}
.table tbody tr[data-clickable]{cursor:pointer;}
/* gantt: --gd is the width of one day at the current zoom */
/* Each row is its own two-column grid spanning the chart, so the pinned label can stay in view
   however far the timeline scrolls (a sticky cell cannot leave its own grid column). */
.gantt{grid-template-columns:1fr;width:max-content;}
.g-row{display:grid;grid-template-columns:var(--gantt-names) var(--tw);}
.g-phase .id-ref{flex:none;letter-spacing:0;text-transform:none;font-weight:var(--weight-regular);}
.g-group .g-track{border-bottom-color:var(--line-strong);}
/* A mark stands above the summary bar, ringed in the page color so it reads on any bar. */
.g-mark{position:absolute;top:calc(50% - var(--d-6));z-index:1;display:flex;}
.g-count{display:inline-flex;align-items:center;gap:var(--space-1);flex:none;letter-spacing:0;font-weight:var(--weight-regular);}
.g-mark .diamond{outline:var(--line-1) solid var(--paper);}
/* One rule for all of .gantt's custom properties: the bundler's minifier drops the earlier of two such rules. */
.gantt{--gd:var(--gantt-day);--tw:calc(var(--gd) * var(--days));--g-shade:color-mix(in srgb,var(--ink) 6%,transparent);--g-rule:linear-gradient(to right,var(--line) 0 var(--line-1),transparent var(--line-1));}
.gantt[data-zoom=week]{--gd:var(--gantt-day-week);}
/* Whole plan: the range is fitted to the width, a day being a share of it (as on paper). */
.gantt-scroll[data-zoom=fit]{overflow-x:visible;}
.gantt[data-zoom=fit]{--gd:calc(100% / var(--days));width:100%;}
.gantt[data-zoom=fit] .g-row{grid-template-columns:var(--gantt-names) 1fr;}
.gantt[data-zoom=fit] .g-tick[data-row=month]{display:block;top:var(--d-4);font-weight:var(--weight-semi);color:var(--ink);}
.gantt[data-zoom=fit] .g-timehead{height:var(--d-26);}
.gantt[data-zoom=fit] .g-track,.gantt[data-zoom=fit] .g-timehead{background-image:var(--g-rule);background-size:calc(100% * 7 / var(--days)) 100%;background-position:calc(100% * var(--mon) / (var(--days) - 7)) 0;}
.gantt[data-zoom=day] .g-timehead{height:var(--gantt-head-day);}
.gantt[data-zoom=day] .g-tick[data-row=bottom]{line-height:1.1;}
.g-col[data-holiday]{border-left:0;}
.gantt[data-zoom=day] .g-track,.gantt[data-zoom=day] .g-timehead{
  background-image:var(--g-rule),linear-gradient(to right,var(--g-shade) 0 var(--gd),transparent var(--gd) calc(var(--gd) * 6),var(--g-shade) calc(var(--gd) * 6));
  background-size:var(--gd) 100%,calc(var(--gd) * 7) 100%;
  background-position:0 0,calc(var(--gd) * var(--sun)) 0;}
.gantt[data-zoom=week] .g-track,.gantt[data-zoom=week] .g-timehead{background-image:var(--g-rule);background-size:calc(var(--gd) * 7) 100%;background-position:calc(var(--gd) * var(--mon)) 0;}
.g-baseline{--c:var(--line);top:calc(50% + var(--d-2));height:var(--d-6);z-index:0;}
.g-phase-toggle{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;}
.g-phase-toggle,.g-phase-name{min-width:0;overflow-wrap:anywhere;}
.g-phase-toggle::before{content:"– ";}
.g-phase-toggle[aria-expanded=false]::before{content:"+ ";}
.g-phase-toggle:focus-visible{outline:var(--line-2) solid var(--orange);outline-offset:var(--line-2);}

/* ===================== APP SHELL AND PAGES ===================== */
.page{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);}
.page-narrow{max-width:var(--d-1200);width:100%;margin:0 auto;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;}
.page-section{display:flex;flex-direction:column;gap:var(--space-3);}
.popover{position:fixed;z-index:95;}
.pick-list{display:flex;flex-direction:column;gap:var(--space-1);max-height:50vh;overflow:auto;}
.pick-list .btn{justify-content:flex-start;}
.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--d-460),100%),1fr));gap:var(--space-5);align-items:start;}
.list-row{display:flex;gap:var(--space-1);align-items:center;}
.list-row .input{flex:1;min-width:0;}
.list-row .select{flex:1;min-width:0;}
.hint{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;}
.btn[data-small]{min-height:0;padding:var(--space-1) var(--space-2);}
.popover:focus{outline:none;}
.topnav .push .avatar{cursor:pointer;}
.modal[data-wide]{max-width:var(--d-720);max-height:85vh;}
.modal-scroll{overflow:auto;display:flex;flex-direction:column;gap:var(--space-4);min-height:0;}
.conflict{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:var(--line-1) solid var(--line);}
.conflict-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;}

/* filter menu — a filter chip that opens a list of values to tick */
.fmenu{position:relative;display:inline-flex;}
.fchip .caret{width:var(--d-6);height:var(--d-6);border-right:var(--d-1h) solid currentColor;border-bottom:var(--d-1h) solid currentColor;transform:rotate(45deg) translateY(calc(var(--d-2) * -1));transition:transform var(--duration) var(--ease);}
.fchip[aria-expanded=true] .caret{transform:rotate(225deg) translateY(calc(var(--d-1) * -1));}
.fmenu-list{position:absolute;z-index:30;top:calc(100% + var(--d-4));left:0;min-width:var(--d-220);max-height:var(--d-340);overflow:auto;display:flex;flex-direction:column;background:var(--paper);border:var(--line-1) solid var(--ink);padding:var(--space-1);}
.fmenu-opt{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-3);border:0;background:transparent;color:var(--ink);font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);text-align:left;white-space:nowrap;cursor:pointer;}
.fmenu-opt:hover{background:var(--paper-2);}
.fchip[data-active]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.fmenu-opt[aria-pressed=true]{background:var(--paper-2);box-shadow:inset var(--line-2) 0 0 var(--orange);}
.fmenu-opt .n{font-family:var(--font-mono);font-size:var(--size-xs);font-weight:var(--weight-regular);color:var(--ink-2);}
.fmenu-empty{padding:var(--space-2) var(--space-3);}
.fchips{align-items:center;}
/* A find box in the filter row sits on the same line as the chips, at their height. */
.fchips .input{width:var(--d-260);flex:0 1 var(--d-260);font-size:var(--size-sm);padding:var(--space-1) var(--space-3);margin-left:var(--space-3);}
/* In the top bar there is no room above, and the right edge is close: tooltips open below, aligned to the right. */
.topnav [data-tip]:hover::after,.topnav [data-tip]:focus-visible::after{bottom:auto;top:calc(100% + var(--d-6));left:auto;right:0;transform:none;}

/* phase 6 */
.log-entry[data-clickable]{cursor:pointer;}
/* Over a link or button inside the entry, only that control is lit: it is what a click would act on. */
.log-entry[data-clickable]:hover:not(:has(a:hover,button:hover))::before{background:var(--paper-2);}
.block{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-3);border-top:var(--line-1) solid var(--line);}
.block-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.block details summary{cursor:pointer;font-size:var(--size-sm);color:var(--ink-2);}
.block details[open] summary{margin-bottom:var(--space-2);}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);}
/* A form in labelled groups: a thin rule and a small heading above each group. */
.form-group{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-3);border-top:var(--line-1) solid var(--line);}
.form-group:first-child{padding-top:0;border-top:0;}
.two-col{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-6);align-items:start;}
@media (max-width:68.75em){.two-col{grid-template-columns:minmax(0,1fr);}}
/* A date is wider than a number: it takes two cells, at a size that fits, and lines up with its neighbours. */
.stat[data-compact]{grid-column:span 2;}
.stat[data-compact] .t-display{font-size:var(--size-2xl);line-height:1;padding:var(--space-1) 0;white-space:nowrap;}
/* a name with its ID: the name leads, the ID is small beside it */
.named{display:flex;flex-direction:column;gap:var(--d-2);}
.named .id-ref{font-weight:var(--weight-regular);white-space:nowrap;}

/* stat grid on fixed columns: six, three or two across, so six stats always fill whole rows */
.statgrid[data-columns="6"]{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:36em){.statgrid[data-columns="6"]{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:62em){.statgrid[data-columns="6"]{grid-template-columns:repeat(6,minmax(0,1fr));}}
.statgrid[data-columns] .stat[data-compact]{grid-column:auto;}
.statgrid[data-columns] .stat[data-compact] .t-display{font-size:var(--size-xl);}
.stat .progress{margin-top:var(--space-1);}
/* stacked bar: parts of a whole */
.sbar{display:flex;flex-direction:column;gap:var(--space-3);}
.sbar-track{display:flex;gap:var(--d-2);height:var(--space-4);border-radius:var(--round);overflow:hidden;background:var(--line);}
.sbar-part{--c:var(--ink-2);background:var(--c);min-width:var(--d-4);}
.sbar-part[data-tone=green]{--c:var(--green);} .sbar-part[data-tone=yellow]{--c:var(--yellow);} .sbar-part[data-tone=red]{--c:var(--red);}
.sbar-part[data-tone=quiet]{--c:var(--line);}
.sbar-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-size:var(--size-sm);color:var(--ink-2);}
.sbar-item{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;}
.sbar-item b{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-lg);color:var(--ink);font-variant-numeric:tabular-nums;}
.sbar-item .n{font-family:var(--font-mono);font-size:var(--size-xs);}
.sbar-total{margin-left:auto;}
.dot[data-tone=quiet]{background:transparent;box-shadow:inset 0 0 0 var(--line-1) var(--line-strong);}

/* notice — something is wrong and stays wrong until dealt with (a toast is for things that pass) */
.notice{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-3) var(--space-5);font-size:var(--size-sm);
  background:var(--paper-2);border-bottom:var(--line-1) solid var(--line);border-left:var(--d-4) solid var(--red);}

/* gantt on screen: month names and the header's today line belong to the fitted (paper) layout */
.gantt:not([data-zoom=fit]) .g-tick[data-row=month]{display:none;}
.gantt[data-zoom=day] .g-timehead .g-today{display:none;}

/* paper — the page without its controls; the Gantt is fitted to the paper's width, a day being a share of it */
@media print{
  .topnav,.toasts,.notice,.fchips,.gantt-tools .segmented,.gantt-tools .btn,.page-head .btn,.page-head .segmented{display:none;}
  .page{padding:0;}
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact;}
  .gantt-scroll{overflow:visible;}
  .gantt,.gantt[data-zoom]{--gd:calc(100% / var(--days));width:100%;}
  .g-row{grid-template-columns:var(--gantt-names) 1fr;break-inside:avoid;}
  .g-group{break-after:avoid;}
  .g-label,.g-head,.g-phase{position:static;}
  .g-tick[data-row=bottom],.g-tick[data-row=top]{display:none;}
  .gantt[data-zoom] .g-tick[data-row=month]{display:block;top:var(--d-4);font-weight:var(--weight-semi);color:var(--ink);}
  .gantt[data-zoom] .g-timehead{height:var(--d-26);}
  .gantt[data-zoom=day] .g-timehead .g-today{display:block;}
  /* A share of the width cannot place a repeating background, so each Monday's rule is placed by its own sum. */
  .gantt[data-zoom] .g-track,.gantt[data-zoom] .g-timehead{background-image:var(--g-rule);background-size:calc(100% * 7 / var(--days)) 100%;background-position:calc(100% * var(--mon) / (var(--days) - 7)) 0;}
}

/* Higher contrast deepens the orange, so text on it is white rather than black. (An outlined avatar keeps dark text: its inside is the page.) */
[data-contrast=high] ::selection,[data-contrast=high] .avatar[data-tone=orange]:not([data-managed]),[data-contrast=high] .g-tick[data-today],[data-contrast=high] .cal-day[data-start],[data-contrast=high] .cal-day[data-end]{color:var(--paper);}

/* =====================================================================
   FOR ANY PAGE: hidden, chosen, sorted, reading text, and page furniture
   ===================================================================== */
/* Anything hidden stays hidden, whatever layout class it carries. */
[hidden]{display:none!important;}

/* chosen: the one row, card, or entry whose details are showing elsewhere on the page (data-chosen).
   Paper-2 with an orange bar at its left edge, as a picked option in a list has. The orange outline stays for keyboard focus alone. */
.table tbody tr[data-chosen] td{background:var(--paper-2);}
.table tbody tr[data-chosen] td:first-child{box-shadow:inset var(--line-3) 0 0 var(--orange);}
.card[data-chosen],.detailcard[data-chosen]{background:var(--paper-2);box-shadow:inset var(--line-3) 0 0 var(--orange);}

/* sorted column: an arrow after its heading */
th[aria-sort=ascending],th[aria-sort=descending]{color:var(--ink);}
th[aria-sort=ascending] .th-sort::after{content:" ↑";}
th[aria-sort=descending] .th-sort::after{content:" ↓";}

/* notice that needs attention but is not a failure */
.notice[data-tone=yellow]{border-left-color:var(--yellow);}

/* a number that needs attention keeps ink figures (yellow text fails contrast) and gets a yellow dot by its label */
.stat[data-tone=yellow] .t-label::before{content:"";display:inline-block;width:var(--d-8);height:var(--d-8);border-radius:var(--round);background:var(--yellow);margin-right:var(--d-6);}

/* the product's name, beside the logo in the top bar */
.appname{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-base);color:var(--ink);white-space:nowrap;text-decoration:none;margin-left:calc(var(--space-3) * -1);padding-left:var(--space-3);border-left:var(--line-1) solid var(--line);}

/* sections: a column of sections with room between them; section-body: what a section's title folds away */
.sections{display:flex;flex-direction:column;gap:var(--space-5);}
.section-body{display:flex;flex-direction:column;gap:var(--space-3);}

/* prose: text meant to be read through (an article, a help page, a long description) */
.prose{max-width:70ch;display:flex;flex-direction:column;gap:var(--space-3);}
.prose h2{font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--size-xl);line-height:var(--leading-tight);letter-spacing:-0.01em;margin-top:var(--space-5);}
.prose h3{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--size-lg);line-height:var(--leading-tight);margin-top:var(--space-4);}
.prose > :first-child{margin-top:0;}
.prose ul,.prose ol{padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);}
.prose li::marker{color:var(--ink-2);}
.prose blockquote{border-left:var(--line-3) solid var(--line-strong);padding-left:var(--space-4);color:var(--ink-2);}
.prose img,.prose figure{max-width:100%;}
.prose figcaption{font-size:var(--size-sm);color:var(--ink-2);margin-top:var(--space-2);}
.prose code,code.code{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:0 var(--space-1);}
.prose pre,pre.code{font-family:var(--font-mono);font-size:var(--size-sm);line-height:var(--leading-body);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--paper-2);border:var(--line-1) solid var(--line);padding:var(--space-3) var(--space-4);}
.prose pre code{background:transparent;padding:0;font-size:inherit;}
/* a link in running text: ink, underlined; the underline darkens on hover */
.prose a,a.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:var(--d-3);}
.prose a:hover,a.link:hover{text-decoration-color:var(--ink);text-decoration-thickness:var(--line-2);}

/* callout: a boxed aside in a page or an article */
.callout{border:var(--line-1) solid var(--line);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);max-width:70ch;}

/* crumbs: where this page sits, as a short trail of links above its title */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:var(--size-sm);color:var(--ink-2);list-style:none;}
.crumbs li + li::before{content:"/";margin-right:var(--space-2);color:var(--line-strong);}
.crumbs a{color:inherit;text-decoration:none;}
.crumbs a:hover{color:var(--ink);text-decoration:underline;}
.crumbs [aria-current]{color:var(--ink);}

/* A section's title may sit in a real heading (h2, h3) so a page has structure under its h1; the heading adds no look of its own. */
.section-head :is(h2,h3,h4),.detailcard-head :is(h2,h3,h4){font:inherit;letter-spacing:inherit;}

/* Nothing in a page column can push the page sideways. */
.page > *,.sections > *,.page-section > *,.section-body > *,.two-col > *{min-width:0;}

/* two-col variants: the narrower column first (a list beside what it opens), and the side column first on a narrow screen. */
.two-col[data-narrow-first]{grid-template-columns:minmax(0,2fr) minmax(0,3fr);}
@media (max-width:68.75em){
  .two-col[data-narrow-first]{grid-template-columns:minmax(0,1fr);}
  .two-col[data-side-leads] > :last-child{order:-1;}
}

/* A link to a place on the same page lands below the top bar, not under it. */
[id]{scroll-margin-top:calc(var(--d-56) + var(--space-4));}

/* A clickable or chosen entry: its fill is drawn a little wider than the entry, so the text and the line under it stay where they are. */
.log-entry[data-clickable],.log-entry[data-chosen]{position:relative;isolation:isolate;}
.log-entry[data-clickable]::before,.log-entry[data-chosen]::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--space-3) * -1);right:calc(var(--space-3) * -1);z-index:-1;}
.log-entry[data-chosen]::before{background:var(--paper-2);box-shadow:inset var(--line-3) 0 0 var(--orange);}

/* A card that opens another page is a link. */
a.detailcard{color:inherit;text-decoration:none;}
a.detailcard:hover:not(:has(button:hover,a:hover)){border-color:var(--line-strong);}

/* top bar on a narrow screen: the status line goes, and a page with a menu button (navtoggle) folds its links under it. */
.navtoggle{display:none;}
@media (max-width:51.25em){
  .topnav .push .sync{display:none;}
  .topnav-inner{gap:var(--space-3);padding:0 var(--space-4);}
  .topnav:has(.navtoggle) .navtoggle{display:inline-flex;align-items:center;margin-left:auto;font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-semi);color:var(--ink);background:transparent;border:var(--line-1) solid var(--line-strong);border-radius:var(--round);padding:var(--d-6) var(--space-3);cursor:pointer;}
  .topnav:has(.navtoggle) .navtoggle[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  .topnav:has(.navtoggle) .navgroups{display:none;}
  .topnav:has(.navtoggle) .navgroups[data-open]{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:var(--line-1) solid var(--ink);padding:var(--space-2) var(--space-4) var(--space-3);}
  .topnav:has(.navtoggle) .navtrigger[data-current]::after{left:0;right:auto;top:var(--space-2);bottom:var(--space-2);width:var(--line-2);height:auto;}
  .topnav:has(.navtoggle) .push{margin-left:0;}
}

/* =====================================================================
   FORMS
   ===================================================================== */
/* widths for a single control, and a column of fields */
.w-short{width:var(--d-140);max-width:100%;}
.w-field{width:var(--d-220);max-width:100%;}
.w-date{max-width:var(--d-300);}
.w-form{max-width:var(--d-420);}
.form{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--d-560);}
.sections[data-roomy]{gap:var(--space-7);}
fieldset{border:0;min-width:0;}
.plain-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-1);}

/* a field's label may say "optional"; help sits under the control, and an error under that */
.field .optional{font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-regular);letter-spacing:0;text-transform:none;color:var(--ink-2);margin-left:var(--space-2);}
.field-help{font-size:var(--size-sm);color:var(--ink-2);line-height:1.45;}
.field-error{font-size:var(--size-sm);font-weight:var(--weight-semi);color:var(--red);line-height:1.45;}
/* the control itself carries a red bar along its bottom edge, whichever way fields are drawn */
.input[aria-invalid=true],.select[aria-invalid=true],.textarea[aria-invalid=true],.segmented[aria-invalid=true]{box-shadow:inset 0 calc(var(--line-2) * -1) 0 var(--red);}

/* one choice from several that do not fit on a line: the segmented control, stacked */
.segmented[data-stack]{display:flex;flex-direction:column;align-items:stretch;}
.segmented[data-stack] button{border-right:0;border-bottom:var(--line-1) solid var(--line);text-align:left;justify-content:flex-start;}
.segmented[data-stack] button:last-child{border-bottom:0;}
.segmented[data-stack] button[aria-pressed=true]::after,.segmented[data-stack] button[aria-checked=true]::after{left:0;right:auto;top:0;bottom:0;width:var(--line-3);height:auto;}
.segmented button[aria-checked=true]{background:var(--paper-2);color:var(--ink);}
.segmented button[aria-checked=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--line-2);background:var(--orange);}

/* several choices: a column of tick boxes, each with its words */
.options{display:flex;flex-direction:column;gap:var(--space-2);}
.option{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--size-base);cursor:pointer;}
.option .check{margin-top:var(--d-3);}

/* a unit before or after an input: a currency sign, a percent sign, "days" */
.affix{display:flex;align-items:baseline;gap:var(--space-2);}
.affix > span{font-family:var(--font-mono);font-size:var(--size-sm);color:var(--ink-2);flex:none;}

/* steps: where someone is in a form filled in over several screens */
.steps{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;font-size:var(--size-sm);color:var(--ink-2);}
.steps li{display:inline-flex;align-items:center;gap:var(--d-6);}
.steps li::before{content:"";width:var(--d-8);height:var(--d-8);border-radius:var(--round);box-shadow:inset 0 0 0 var(--line-1) var(--line-strong);flex:none;}
.steps li[data-done]::before{background:var(--green);box-shadow:none;}
.steps li[aria-current]{color:var(--ink);font-weight:var(--weight-semi);}
.steps li[aria-current]::before{background:var(--orange);box-shadow:none;}

/* the row of buttons under a form: going back at the left, going on at the right; it wraps on a narrow screen */
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3);padding-top:var(--space-4);border-top:var(--line-1) solid var(--line);}

/* a callout with an edge: red for what must be fixed, yellow for a warning, green for done */
.callout[data-tone]{border-left:var(--d-4) solid var(--ink-2);}
.callout[data-tone=red]{border-left-color:var(--red);}
.callout[data-tone=yellow]{border-left-color:var(--yellow);}
.callout[data-tone=green]{border-left-color:var(--green);}