/* ---------------------------------------------------------------------------
   app.css - the tool's chrome, and the drawing styles shared by the editor, the
   sheet preview and the printed output.

   Follows the shop site's rules: square corners, no gradients, no accent
   colour, and no transitions on anything interactive - every state change lands
   at once, so each state has to read as deliberate on arrival. Hierarchy is
   typeface, size and grey value.

   The drawing follows drafting convention instead of colour coding, because a
   template's job is to survive a black-and-white laser printer:

     continuous, heavy     the line you cut to
     dashed                grind references - bevel, shinogi, plunge
     chain-dash            datums and centrelines
     continuous, hairline  dimensions and the millimetre grid

   Line WEIGHTS live in render.js (they are millimetres of ink, part of the
   drawing). This file only assigns their ink value.
   --------------------------------------------------------------------------- */

@import url('tokens.css');
@import url('fonts.css');

.site-footer{display:flex;justify-content:flex-end;gap:14px;padding:8px 16px;font-size:12px}.site-footer a{color:var(--muted,#706b62)}
.account-dialog label { display:grid; gap:var(--s-1); margin:var(--s-4) 0; color:var(--dim); font-size:var(--text-sm); letter-spacing:.04em; }
.account-dialog input { width:100%; min-width:0; }
.account-dialog input:focus { border-color:var(--text); outline:1px solid var(--text); outline-offset:1px; }
.account-dialog form { position:relative; }
.account-close { position:absolute; top:var(--s-3); right:var(--s-3); }
.account-status { margin-top:var(--s-4)!important; padding:var(--s-3); border:1px solid var(--line); background:var(--surface); }
.account-status[data-kind='error'] { border-color:var(--error); color:var(--error-ink); }
.account-status[data-kind='success'] { border-color:var(--line-strong); color:var(--text); }
.account-actions { flex-wrap:wrap; }
.danger { color:#8b1e16; }
.profile-view { min-height:100%; overflow:auto; }
.profile-page { width:min(44rem,calc(100% - 2rem)); margin:0 auto; padding:clamp(2rem,6vw,5rem) 0; }
.profile-page h1 { margin:.3rem 0 var(--s-6); font-family:var(--font-display); font-size:clamp(2.5rem,7vw,4.5rem); font-weight:400; line-height:1; }
.profile-page section { padding:var(--s-5) 0; border-top:1px solid var(--line-strong); }
.profile-page h2 { margin:0 0 var(--s-2); font-family:var(--font-display); font-size:1.55rem; font-weight:400; }
.profile-page section p { margin:0 0 var(--s-4); color:var(--muted); }
.profile-page dl { display:grid; grid-template-columns:8rem minmax(0,1fr); margin:0 0 var(--s-4); }
.profile-page dt { color:var(--dim); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.12em; }
.profile-page dd { margin:0; overflow-wrap:anywhere; }
.profile-danger { border-color:#8b1e16!important; }
.profile-page .account-status { margin-top:var(--s-5)!important; }
.legal-page { min-height:100%; }
.legal { width:min(44rem,calc(100% - 3rem)); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) 0 clamp(3rem,8vw,6rem); }
.legal-brand { display:inline-block; margin-bottom:clamp(3rem,9vw,6rem); color:var(--muted); font-size:var(--text-sm); font-weight:600; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.legal-brand:hover { color:var(--text); }
.legal-heading { position:relative; margin-bottom:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--line-strong); }
.legal-heading::before { content:''; position:absolute; top:-1px; left:0; width:6.25rem; border-top:3px solid var(--text); }
.legal h1 { max-width:10ch; margin:0 0 var(--s-3); font-family:var(--font-display); font-size:clamp(3.25rem,10vw,6rem); font-weight:400; letter-spacing:-.035em; line-height:.9; }
.legal-date { margin:0 0 var(--s-7); color:var(--dim); font-size:var(--text-sm); font-variant-numeric:tabular-nums; letter-spacing:.08em; text-transform:uppercase; }
.legal-intro { max-width:39rem; margin:0; color:var(--text); font-size:clamp(1.15rem,2.5vw,1.4rem); line-height:1.55; }
.legal h2 { margin:var(--s-7) 0 var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--line); font-family:var(--font-display); font-size:clamp(1.65rem,4vw,2.15rem); font-weight:400; letter-spacing:-.015em; line-height:1.1; }
.legal h2 + p { margin-top:0; }
.legal p { margin:0 0 var(--s-4); color:var(--muted); line-height:1.75; }
.legal p a, .legal-nav a { color:var(--text); text-decoration-color:var(--line-strong); text-decoration-thickness:1px; text-underline-offset:.25em; }
.legal p a:hover, .legal-nav a:hover { text-decoration-color:currentColor; }
.legal-nav { display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--line-strong); font-size:var(--text-sm); font-weight:600; }

@media (max-width:520px) {
  .legal { width:min(100% - 2rem,44rem); padding-top:var(--s-6); }
  .legal-brand { margin-bottom:var(--s-8); }
  .legal-heading { margin-bottom:var(--s-7); }
  .legal-date { margin-bottom:var(--s-6); }
  .legal h2 { margin-top:var(--s-6); }
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

header {
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  flex-wrap: wrap;
}

.bar + .bar {
  border-top: 1px solid var(--line);
}

.design-identity { display:grid; gap:.15rem; }
.design-identity label { color:var(--dim); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; }
.design-identity input[type='text'] { min-width:13rem; }
.workflow, .design-actions { display:flex; align-items:center; gap:var(--s-2); }
.workflow { margin-right:var(--s-5); }
.header-actions { display:flex; align-items:stretch; gap:var(--s-3); margin-left:auto; }
.new-design-action { display:inline-flex; align-items:center; justify-content:center; min-height:3.75rem; padding-inline:var(--s-4); background:var(--text); color:var(--bg); border-color:var(--text); font-weight:700; }
.new-design-action:hover { background:var(--muted); color:var(--bg); }
.new-design-action span { display:inline-flex; align-items:center; margin-right:var(--s-2); font-size:1.2rem; line-height:1; }

.nav-separator { align-self:stretch; width:1px; margin:0 var(--s-2); background:var(--line-strong); }
.nest-tab { display:grid; grid-template-columns:auto; gap:0; text-align:left; }
.nest-tab b { font-size:inherit; }
.nest-tab i { color:var(--dim); font-size:.625rem; font-style:normal; font-weight:400; letter-spacing:.1em; text-transform:uppercase; }
.nest-tab.on i { color:var(--muted); }
.utility-menu, .advanced-tools { position:relative; }
.utility-menu > summary, .advanced-tools > summary { box-sizing:border-box; list-style:none; cursor:pointer; padding:var(--s-2) var(--s-3); border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font-size:var(--text-sm); font-weight:600; }
.bar:first-child .utility-menu > summary { display:flex; align-items:center; min-height:3.75rem; }
.utility-menu > summary::-webkit-details-marker, .advanced-tools > summary::-webkit-details-marker { display:none; }
.utility-popover, .advanced-tools > div { z-index:20; box-sizing:border-box; display:grid; gap:var(--s-2); position:absolute; top:calc(100% + var(--s-2)); right:0; width:max-content; min-width:15rem; max-width:calc(100vw - 2 * var(--s-3)); padding:var(--s-3); border:1px solid var(--line-strong); background:var(--bg); box-shadow:0 .75rem 2rem rgba(0,0,0,.45); }
.advanced-tools > div { left:auto; right:0; width:19rem; min-width:0; }
.advanced-tools .inline-field { justify-content:space-between; }
body[data-tab='sheets'] .design-actions,
body[data-tab='nest'] .design-actions,
body[data-tab='profile'] .design-actions,
body[data-tab='sheets'] .advanced-tools,
body[data-tab='nest'] .advanced-tools,
body[data-tab='profile'] .advanced-tools,
body[data-tab='profile'] #header-print,
body[data-tab='sheets'] #panel details[data-knife-group='true'] { display:none !important; }
body[data-tab='design'][data-mode='blank'] #panel { display:none !important; }
body[data-tab='design'][data-mode='blank'] .main { grid-template-columns:minmax(0,1fr); }
body[data-tab='profile'] .main { grid-template-columns:minmax(0,1fr); }

.spacer {
  flex: 1 1 auto;
}

/* ---------- the maker's stamp and wordmark ----------
   The site's lockup: the mark punched into a ruled box, beside the name set one
   line per word so the type column stands as tall as the stamp. Ratios are the
   site's - width = height/2, rule = height/28, mark = height*5/7 - so this is
   the same lockup at a third placement, not a lookalike. */

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  margin-right: var(--s-2);
}

.stamp {
  --frame-h: 3.75rem;
  flex: none;
  display: grid;
  place-items: center;
  block-size: var(--frame-h);
  inline-size: calc(var(--frame-h) / 2);
  border: calc(var(--frame-h) / 28) solid var(--muted);
  color: var(--text);
}

.stamp svg {
  height: calc(var(--frame-h) * 5 / 7);
  width: auto;
}

.wordmark:hover .stamp {
  border-color: var(--text);
}

.wordmark-name {
  display: grid;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.14;
  white-space: nowrap;
}

/* ---------- controls ----------
   One button, three states, no transitions. The plane the label sits on moves:
   resting on --surface, lifted a step on hover with the edge coming up to full
   bone, recessed below the page on press. */

button,
select,
input[type='number'],
input[type='text'],
input[type='email'],
input[type='password'],
.filebtn {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
}

button,
.filebtn {
  border-color: var(--line-strong);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

button:hover,
.filebtn:hover {
  background: var(--surface-strong);
  border-color: var(--text);
}

button:active,
.filebtn:active {
  background: var(--bg);
  border-color: var(--line-strong);
}

button:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--dim);
  cursor: not-allowed;
}

/* The one thing on the page you are here to press. There is no accent colour in
   this system, so primacy is the same inversion the site gives ::selection and
   the skip link: bone plane, near-black label. */
button.primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

button.primary:hover {
  background: #fff;
  border-color: #fff;
}

button.primary:active {
  background: var(--muted);
  border-color: var(--muted);
}

input[type='text'] {
  min-width: 15rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  padding-block: var(--s-1);
}

select {
  max-width: 13rem;
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--s-3) + 1rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23a89f8d' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 0.625rem 0.375rem;
}

select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23f2ede3' stroke-width='1.4' stroke-linecap='square'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

.filebtn input {
  display: none;
}

/* Tabs. The current one is marked with a rule, not a colour - the site's
   .nav-link.current. */
.tab {
  border: 0;
  background: none;
  padding: var(--s-2) 0;
  margin-right: var(--s-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.tab span { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; margin-right:var(--s-1); border:1px solid var(--line); font-size:.625rem; line-height:1; letter-spacing:0; vertical-align:middle; }
.tab.on span { border-color:var(--text); }

.tab:hover {
  background: none;
  color: var(--text);
}

.tab.on {
  color: var(--text);
  border-bottom: 1px solid var(--text);
}

.inline-field {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--dim);
  letter-spacing: 0.04em;
}

.inline-field input[type='number'] {
  width: 4.5rem;
  text-align: right;
}

/* ---------- the spec strip ----------
   The status readout is the site's SpecTable turned on its side: a label above a
   figure, pairs divided by hairlines. Not pills - nothing in this system has a
   rounded corner. */

.specstrip {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}

.specstrip .cell {
  display: grid;
  gap: 1px;
  padding: var(--s-4);
  border-left: 1px solid var(--line);
}

.specstrip .cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.specstrip .cell:last-child {
  border-right: 1px solid var(--line);
}

.specstrip dt {
  font-size: 0.6875rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.specstrip dd {
  font-size: var(--text-sm);
  color: var(--muted);
}

.plan {
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* The sheet count going red means the print will not be 1:1. That is the only
   thing on this bar allowed to use the error token. */
.plan.warn {
  color: var(--error);
  font-weight: 600;
}

/* ---------- panel ---------- */

.main {
  display: grid;
  grid-template-columns: 21rem 1fr;
  min-height: 0;
}

#panel {
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding-bottom: var(--s-7);
  scrollbar-color: var(--steel-light) var(--surface);
  scrollbar-width: thin;
}

#panel::-webkit-scrollbar {
  width: 6px;
}

#panel::-webkit-scrollbar-track {
  background: var(--surface);
}

#panel::-webkit-scrollbar-thumb {
  background: var(--steel-light);
}

details.grp {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

details.grp > summary {
  width: 100%;
  cursor: pointer;
  padding: var(--s-3) var(--s-5);
  font-size: var(--text-sm);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

details.grp > summary:hover {
  color: var(--text);
}

details.grp[open] > summary {
  color: var(--text);
  margin-bottom: var(--s-3);
}

p.hint {
  border-top: 1px solid var(--line);
  margin: var(--s-5) var(--s-5) var(--s-3);
  color: var(--dim);
  font-size: var(--text-sm);
  max-width: 34ch;
  padding-top: var(--s-3);
}

.row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-5);
}

.row .lab {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: var(--text-sm);
}

.help {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  min-height: 1rem;
  padding: 0;
  flex: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--dim);
  font-size: 0.65rem;
  cursor: help;
}

.help:hover,
.help[aria-expanded="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.field-help {
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: var(--s-1) 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.field-help[hidden] { display: none; }

.drawing-tools { display: inline-flex; gap: var(--s-2); }
.drawing-tools button.on { border-color: var(--text); color: var(--text); }

.row .numwrap {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  flex: none;
}

.row .numwrap input {
  width: 4.75rem;
  text-align: right;
}

.row .numwrap i {
  color: var(--dim);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  min-width: 2.75rem;
}

/* Dense geometry values are most useful as a quick, compact scan. Long domain
   labels may wrap within their column, but never push the field beneath it. */
details.grp:is([data-group='tang'], [data-group='profile-curves']) > .row-num {
  flex-wrap: wrap;
}

details.grp:is([data-group='tang'], [data-group='profile-curves']) > .row-num > .lab {
  flex: 1 1 0;
  min-width: 0;
}

details.grp:is([data-group='tang'], [data-group='profile-curves']) > .row-num > .numwrap {
  margin-left: auto;
}

details.grp[data-group='tang'] > .field-section-divider {
  height: 0;
  margin: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.row select {
  max-width: 11rem;
  flex: none;
}

.row.is-check .lab {
  color: var(--text);
}

.row.is-check input,
.canvas-toggle input {
  accent-color: var(--text);
  width: 0.875rem;
  height: 0.875rem;
}

details.grp > .row.is-last-visible {
  padding-bottom: var(--s-4);
}

/* holes */

.holes {
  padding: var(--s-2) var(--s-5) var(--s-4);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
}

.holes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
  font-size: var(--text-sm);
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.holes-head b {
  font-weight: 400;
}

.hole-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.hole-row select {
  max-width: 5.5rem;
  padding: var(--s-1) var(--s-2);
  padding-right: calc(var(--s-2) + 1rem);
  background-position: right var(--s-2) center;
}

.mini-num {
  display: inline-grid;
  gap: 1px;
}

.mini-num i {
  color: var(--dim);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mini-num input {
  width: 3.75rem;
  text-align: right;
  padding: var(--s-1) var(--s-2);
}

button.mini {
  padding: var(--s-1) var(--s-2);
  font-size: var(--text-sm);
}

button.mini.wide {
  width: 100%;
  margin-top: var(--s-2);
}

button.mini.danger {
  border-color: transparent;
  background: none;
  color: var(--dim);
}

button.mini.danger:hover {
  background: none;
  border-color: var(--error);
  color: var(--error);
}

/* ---------- viewport ---------- */

.viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#view-design {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

/* The route is resolved in the head so only its destination participates in
 * the first layout. setTab removes this bootstrap state after wiring the app. */
html[data-initial-tab] #view-design,
html[data-initial-tab] #view-sheets,
html[data-initial-tab] #view-nest,
html[data-initial-tab] #view-profile { display: none !important; }
html[data-initial-tab='design'] #view-design,
html[data-initial-tab='nest'] #view-nest { display: flex !important; }
html[data-initial-tab='sheets'] #view-sheets,
html[data-initial-tab='profile'] #view-profile { display: block !important; }

.editor-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: var(--paper);
}

#canvas {
  flex: 1 1 auto;
  width: 100%;
  background: var(--paper);
  touch-action: none;
  cursor: grab;
}

#canvas.panning {
  cursor: grabbing;
}

#canvas.is-drawing {
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l4.2-1 10.9-10.9-3.2-3.2L5 15.8 4 20z' fill='%231b1916' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M14.8 6l3.2 3.2' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 3 21, default;
}
#canvas.is-erasing { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 6h8M6 2v8' fill='none' stroke='%231b1916' stroke-width='1.5'/%3E%3Cg transform='rotate(-38 19 19)'%3E%3Cpath d='M13 9h12v18H13z' fill='%23f4eee4' stroke='%231b1916' stroke-width='1.8'/%3E%3Cpath d='M13 20h12v7H13z' fill='%23b33a32' stroke='%231b1916' stroke-width='1.8'/%3E%3Cpath d='M16 12h6' stroke='%23fff' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 6 6, crosshair; }
#canvas.is-moving { cursor:move; }
#canvas.is-measuring { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 20L20 5' stroke='%231b1916' stroke-width='3'/%3E%3Cpath d='M3 17l8 8M17 3l8 8M8 17l3 3M12 13l3 3M16 9l3 3' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 5 20, default; }
#canvas.is-drawing #handles *, #canvas.is-erasing #handles *, #canvas.is-measuring #handles * { cursor:inherit; }

.reset-template {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 2;
  border-color: var(--line-strong);
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .18);
}

.vbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.keys {
  color: var(--dim);
  font-size: var(--text-sm);
}

.keys b {
  color: var(--muted);
  font-weight: 400;
}

.keys kbd {
  border: 1px solid var(--line);
  padding: 0 var(--s-1);
  font-family: inherit;
  font-size: 0.6875rem;
  color: var(--muted);
}

/* ---------- sheets ---------- */

#view-sheets {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--s-6) var(--s-5);
}

.checklist {
  margin: 0 0 var(--s-6);
  padding-left: var(--s-5);
  max-width: 70ch;
  color: var(--muted);
  font-size: var(--text-sm);
}

.checklist li {
  margin-bottom: var(--s-2);
}

.checklist b {
  color: var(--text);
  font-weight: 600;
}

.checklist em {
  color: var(--error);
  font-style: normal;
}

.sheets-note {
  color: var(--dim);
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
  max-width: 70ch;
}

.sheets-scale {
  transform-origin: top left;
}

#view-sheets .sheet {
  background: var(--paper);
  margin-bottom: var(--s-5);
  position: relative;
  outline: 1px solid var(--line);
}

/* ---------- the drawing ----------
   Ink values only. Weights are millimetres and belong to render.js. */

.cut {
  stroke: var(--ink);
  fill: none;
}
.guide {
  stroke: var(--ink-2);
  fill: none;
}
.dim,
.xhair {
  stroke: var(--ink-2);
  fill: none;
}
.datum,
.centre,
.witness {
  stroke: var(--ink-3);
  fill: none;
}
.stock {
  stroke: var(--ink-3);
  fill: none;
}
.grid {
  stroke: var(--ink-5);
  fill: none;
}
.grid-major {
  stroke: var(--ink-4);
}
.seam {
  stroke: var(--ink-2);
  fill: none;
}
.crop,
.ruler {
  stroke: var(--ink);
  fill: none;
}
.reg circle,
.reg line {
  stroke: var(--ink);
  fill: none;
}

.txt {
  font-family: var(--font);
  fill: var(--ink-2);
  stroke: none;
}
.title {
  font-family: var(--font-display);
  fill: var(--ink);
  letter-spacing: 0.01em;
}
.spec {
  fill: var(--ink-2);
}
.note {
  fill: var(--ink-3);
}
.lbl-dim,
.reg .txt,
.lbl-hole {
  fill: var(--ink-2);
}
.lbl-datum,
.lbl-stock,
.seam-lbl {
  fill: var(--ink-3);
}
.lbl-guide {
  fill: var(--ink-2);
}
.lbl-piece {
  fill: var(--ink);
  font-weight: 600;
}
.sheet-id {
  fill: var(--ink);
  font-weight: 600;
}
.sheet-join,
.hint {
  fill: var(--ink-3);
}

/* The two things that can ruin a template. Nothing else on paper is red. */
.warn,
.calib {
  fill: var(--error-ink);
  font-weight: 600;
}

.watermark {
  fill: color-mix(in srgb, var(--error-ink) 22%, transparent);
  font-family: var(--font-display);
}

/* On screen the drawing zooms, so hairlines must not vanish. In print the
   widths are already true millimetres and are left alone. */
#canvas .cut {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.7px;
}
#canvas .guide,
#canvas .seam {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.2px;
}
#canvas .datum,
#canvas .centre,
#canvas .stock {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}
#canvas .dim,
#canvas .witness,
#canvas .xhair,
#canvas .reg circle,
#canvas .reg line {
  vector-effect: non-scaling-stroke;
  stroke-width: 0.9px;
}
#canvas .grid {
  vector-effect: non-scaling-stroke;
  stroke-width: 0.6px;
}

/* ---------- handles ----------
   Square, because nothing in this system has a rounded corner - and because it
   makes shape meaningful: a square is a control you drag, a circle is a hole you
   drill. Roles are separated by fill value, on the same warm ramp as the ink. */

#handles g {
  cursor: move;
}

#handles .curve-target {
  fill: none;
  stroke: transparent;
  stroke-width: 16px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  pointer-events: stroke;
}

#handles .curve-selection {
  fill:none;
  stroke:color-mix(in srgb, var(--error-ink) 55%, transparent);
  stroke-width:4px;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}

#handles .curve-selection.sel {
  stroke:var(--error-ink);
}

#handles .curve-arm {
  fill: none;
  stroke: var(--ink-3);
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

#handles .h-curve .h-dot {
  fill: var(--paper);
  stroke: var(--error-ink);
}

#handles .h-hit {
  fill: transparent;
  stroke: none;
}

#handles .h-dot {
  fill: var(--paper);
  stroke: var(--ink-2);
}

#handles .h-prime .h-dot {
  fill: var(--ink);
  stroke: var(--ink);
}

#handles .h-tang .h-dot {
  fill: var(--ink-4);
  stroke: var(--ink-2);
}

#handles .h-guide .h-dot {
  fill: var(--paper);
  stroke: var(--ink-3);
}

#handles .h-hole .h-dot {
  fill: var(--paper);
  stroke: var(--ink);
}

#handles g:hover .h-dot,
#handles .hov .h-dot {
  stroke: var(--ink);
  stroke-width: 2;
}

/* Selected is the one place the drawing borrows the error token, because it is
   the same job: say "this one, right now", instantly, with no motion. */
#handles .sel .h-dot {
  fill: var(--error-ink);
  stroke: var(--error-ink);
}

/* Shown only while a straight snap is actually engaged mid-drag. Quiet enough
   to ignore, definite enough to trust. */
#handles .snap-guide {
  stroke: var(--ink-3);
  fill: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Annotation, never a target. The readout is painted last so it sits over
   everything, and it starts 6px up-and-right of the handle it describes -
   which is inside that handle's own hit circle. Left hit-testable it swallows
   the pointerdown that was aimed at the handle, `closest('g[data-h]')` comes
   back null, and the drag falls through to a canvas pan: the control reads as
   dead exactly when you have hovered it long enough to aim. */
#handles .h-readout {
  fill: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  pointer-events: none;
}

/* The one hint that a snap took hold. Same reasoning as the error token
   elsewhere: it is a state you must be able to see instantly, with no motion to
   announce it. */
#handles .h-readout.snapped {
  fill: var(--error-ink);
}

#handles .hole-guide {
  stroke: var(--error-ink);
  stroke-width: 1.2px;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

#handles .hole-guide-label {
  fill: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

#handles .hole-preview {
  fill: color-mix(in srgb, var(--paper) 70%, transparent);
  stroke: var(--ink-2);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

#handles .hole-preview.snapped {
  stroke: var(--error-ink);
}

/* ---------- stock nesting ---------- */

#nest-panel { width:auto; min-width:0; overflow:auto; border-right:1px solid var(--line); background:var(--bg); color:var(--text); }
.nest-intro { padding:var(--s-5); border-bottom:1px solid var(--line); }
.nest-intro p { margin-top:var(--s-2); max-width:32ch; color:var(--muted); font-size:var(--text-sm); }
.wide { display:block; width:calc(100% - 2 * var(--s-5)); margin:var(--s-2) var(--s-5) var(--s-3); }
.nest-profile { display:grid; grid-template-columns:minmax(0,1fr) 3.5rem auto; gap:.45rem; align-items:center; padding:.6rem var(--s-5); border-bottom:1px solid var(--line); }
.nest-profile span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.nest-profile input { min-width:0; }
.nest-source { align-items:stretch; flex-direction:column; gap:var(--s-2); padding-top:var(--s-3); }
.row.nest-source select { width:100%; max-width:none; }
.nest-status { position:absolute; z-index:4; top:var(--s-5); left:var(--s-5); display:flex; align-items:center; gap:var(--s-3); min-width:min(24rem,calc(100% - 3rem)); padding:var(--s-3) var(--s-4); border:1px solid var(--line-strong); background:rgba(13,12,10,.94); box-shadow:0 .5rem 1.5rem rgba(13,12,10,.2); }
.nest-status.is-running { border-color:var(--text); }
#nest-progress { margin-top:2px; color:var(--muted); font-size:var(--text-sm); }
.nest-activity { display:flex; align-items:center; color:var(--text); }
.nest-activity i { display:block; width:.6rem; height:.6rem; background:var(--text); animation:nest-pulse .8s steps(2,end) infinite; }
@keyframes nest-pulse { 50% { opacity:.2; } }
@media (prefers-reduced-motion: reduce) { .nest-activity i { animation:none; } }
#view-nest { flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }
.nest-stage { position:relative; flex:1 1 auto; min-height:240px; padding:1rem; background:var(--surface); overflow:hidden; }
#nest-canvas { width:100%; height:100%; min-height:240px; background:var(--bg); box-shadow:0 0 0 1px var(--line); }
#nest-canvas .cut { fill:rgba(242,237,227,.06); stroke:var(--text); stroke-width:.3; vector-effect:non-scaling-stroke; }
#nest-canvas .stock { fill:none; stroke:var(--dim); stroke-width:1; vector-effect:non-scaling-stroke; }
#nest-canvas .remainder { fill:rgba(242,237,227,.045); stroke:var(--dim); stroke-width:.5; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }
#nest-canvas .remainder-label { fill:var(--muted); font-family:var(--font); letter-spacing:.04em; }
#nest-canvas.is-updating { opacity:.58; }
.nest-warning { margin:.75rem .9rem 0; padding:.65rem .8rem; color:var(--error-ink); border:1px solid var(--error-ink); font-weight:600; }
#nest-metrics { min-height:3.8rem; padding-inline:var(--s-4); }
.nest-export { flex-wrap:wrap; }

@media (max-width: 800px) {
  html, body { height:auto; min-height:100%; }
  body { overflow-x:hidden; }
  .app { min-height:100vh; height:auto; }
  header, .bar { min-width:0; max-width:100vw; }
  .bar { padding:var(--s-3); }
  .bar > .spacer { display:none; }
  .wordmark-name { display:none; }
  .design-identity { flex:1 1 10rem; }
  .design-identity input[type='text'] { min-width:0; width:100%; }
  .workflow { width:100%; margin:0; justify-content:flex-start; overflow-x:auto; }
  .tab { flex:none; margin:0 var(--s-3) 0 0; letter-spacing:.08em; }
  .design-actions { width:100%; flex-wrap:wrap; overflow:visible; padding-bottom:2px; }
  .design-actions .inline-field, .design-actions > button { flex:none; }
  .main { width:100vw; min-width:0; grid-template-columns:minmax(0,1fr); min-height:calc(100vh - 12rem); }
  #panel, #nest-panel { width:100%; min-width:0; max-height:42vh; overflow-x:hidden; border-right:0; border-bottom:1px solid var(--line); }
  .viewport { min-width:0; overflow:hidden; min-height:55vh; }
  .nest-export > span:first-child { flex-basis:100%; }
  .nest-status { top:var(--s-3); left:var(--s-3); min-width:calc(100% - 2 * var(--s-3)); }
}

/* Canvas-first workshop layout. The floating plates read like measuring tools
   resting on the drawing surface; this is the one expressive gesture, while
   the surrounding controls stay quiet and square. */
.canvas-toolbar,
.tool-rail {
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:1px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  box-shadow:0 .5rem 1.5rem rgba(13,12,10,.2);
}
.canvas-toolbar { top:var(--s-3); left:var(--s-3); max-width:calc(100% - 2 * var(--s-3)); overflow-x:auto; }
.canvas-toolbar label { display:flex; align-items:center; gap:var(--s-2); padding-left:var(--s-3); color:var(--text); font-size:var(--text-sm); }
.canvas-toolbar .canvas-toggle { align-self:stretch; padding-right:var(--s-3); white-space:nowrap; cursor:pointer; }
.canvas-toolbar button, .canvas-toolbar select, .tool-rail button { min-height:44px; border:0; border-left:1px solid var(--line); }
.canvas-toolbar > :first-child, .tool-rail > :first-child { border-left:0; }
.tool-rail {
  top:calc(46px + var(--s-3) + var(--s-3));
  left:var(--s-3);
  max-height:calc(100% - 46px - var(--s-3) - var(--s-3) - var(--s-3));
  gap:0;
  flex-direction:column;
  align-items:stretch;
  overflow-y:auto;
}
.tool-rail button { min-width:5.5rem; border-top:1px solid var(--line); border-left:0; text-align:left; }
.tool-rail > button:first-child { border-top:0; }
.tool-rail button.on { background:var(--text); color:var(--bg); }
.tool-rail .hole-size { box-sizing:border-box; align-self:stretch; display:flex; align-items:center; gap:.3rem; margin:0; padding:var(--s-2) var(--s-3); border-top:1px solid var(--line); background:var(--surface); color:var(--text); font-size:var(--text-sm); white-space:nowrap; }
.tool-rail .hole-size input { width:3.5rem; min-height:36px; padding:.25rem; }
.tool-rail .tool-options { display:grid; gap:var(--s-2); padding:var(--s-3); border-top:1px solid var(--line); color:var(--text); font-size:var(--text-sm); }
.tool-rail .tool-options[hidden] { display:none; }
.tool-rail .tool-options label { display:grid; grid-template-columns:1fr 3.5rem auto; align-items:center; gap:.3rem; }
.tool-rail .tool-options input, .tool-rail .tool-options select { box-sizing:border-box; min-width:0; min-height:36px; padding:.25rem; }
.tool-rail .tool-options input { width:3.5rem; }
.tool-rail .tool-options select { grid-column:2 / 4; width:100%; }
#handles .segment-target { fill:none; stroke:transparent; stroke-width:12px; vector-effect:non-scaling-stroke; pointer-events:stroke; }
#handles .segment-highlight { fill:none; stroke:var(--error-ink); stroke-width:4px; opacity:.9; vector-effect:non-scaling-stroke; pointer-events:none; }
#handles .join-preview {
  fill:var(--error-ink);
  stroke:var(--paper);
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
#handles .measure-line { stroke:var(--error-ink); stroke-width:1.5px; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
#handles .measure-label { fill:var(--text); paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
#handles .measure-point { fill:var(--error-ink); stroke:var(--paper); vector-effect:non-scaling-stroke; pointer-events:none; }
#handles .serration-preview { fill:none; stroke:var(--error-ink); stroke-width:1.5px; vector-effect:non-scaling-stroke; }
.print-workspace-head { display:block; max-width:70rem; margin:0 0 var(--s-6); }
.print-workspace-head h1 { margin:.15rem 0; font-family:var(--font-display); font-weight:400; font-size:2rem; }
.print-workspace-head p { margin:0; color:var(--muted); }
.print-dock { position:sticky; bottom:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) var(--s-5); border:1px solid var(--line-strong); background:var(--bg); }
.print-dock span { color:var(--muted); font-size:var(--text-sm); }
input[aria-invalid='true'] { border-color:var(--error); outline:1px solid var(--error); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.app-dialog { width:min(30rem,calc(100vw - 2rem)); margin:auto; padding:0; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); box-shadow:0 1rem 4rem rgba(0,0,0,.55); }
.app-dialog::backdrop { background:rgba(13,12,10,.72); }
.app-dialog form { padding:var(--s-6); }
.app-dialog h2 { margin:.3rem 0 var(--s-3); font-family:var(--font-display); font-size:2rem; font-weight:400; line-height:1.05; }
.app-dialog p { margin:0; color:var(--muted); }
.app-dialog-actions { display:flex; justify-content:flex-end; gap:var(--s-2); margin-top:var(--s-6); }
.app-dialog[data-kind='notice'] #app-dialog-cancel { display:none; }
.new-design-dialog { width:min(48rem,calc(100vw - 2rem)); }
.new-design-choices { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-top:var(--s-5); }
.new-design-choices section { display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-4); border:1px solid var(--line-strong); }
.new-design-choices h3 { margin:0; font-family:var(--font-display); font-size:1.35rem; font-weight:400; }
.new-design-choices p { flex:1 1 auto; font-size:var(--text-sm); }
.new-design-choices select, .new-design-choices button { width:100%; }

@media (max-width: 800px) {
  header .bar:first-child { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2); }
  header .bar:first-child .wordmark { display:none; }
  header .bar:first-child .header-actions { width:100%; margin:0; flex-wrap:wrap; }
  header .bar:first-child .design-identity { min-width:0; width:100%; }
  header .bar:first-child .new-design-action { flex:1 1 auto; min-height:44px; }
  header .bar:first-child .utility-menu { flex:0 0 auto; }
  header .bar:nth-child(2) { flex-wrap:nowrap; }
  header .bar:nth-child(2) .design-actions, header .bar:nth-child(2) .advanced-tools { display:none; }
  header .bar:nth-child(2) .workflow { flex:1 1 auto; gap:var(--s-1); }
  header .bar:nth-child(2) .tab { margin-right:0; font-size:.75rem; letter-spacing:.05em; }
  header .bar:nth-child(2) .nav-separator { margin-inline:var(--s-1); }
  .main { display:flex; flex-direction:column; }
  .viewport { order:1; min-height:62vh; }
  #panel, #nest-panel { order:2; max-height:none; }
  .editor-stage { min-height:58vh; }
  .tool-rail { position:absolute; top:auto; left:0; right:0; bottom:0; max-height:none; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding-bottom:env(safe-area-inset-bottom); }
  .tool-rail button { flex:0 0 auto; min-width:auto; min-height:44px; border-top:0; border-left:1px solid var(--line); }
  .tool-rail > button:first-child { border-left:0; }
  .tool-rail .hole-size { border-top:0; border-left:1px solid var(--line); }
  .vbar { padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .vbar .keys { display:none; }
  .print-workspace-head { display:block; }
  .new-design-choices { grid-template-columns:1fr; }
  .print-dock { margin-inline:calc(-1 * var(--s-5)); bottom:0; padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .print-dock span { display:none; }
  .print-dock button { width:100%; min-height:44px; }
}

/* ---------- print ---------- */

#print-root {
  display: none;
}

@media print {
  :root {
    /* The printer supplies the white. Laying down a warm tint over a whole
       sheet would waste toner and shift every ink value on top of it. */
    --paper: #fff;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    height: auto;
    background: #fff;
  }

  .app {
    display: none !important;
  }

  #print-root {
    display: block !important;
  }

  .sheet {
    position: relative;
    overflow: hidden;
    background: #fff;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }

  .sheet.last {
    break-after: auto;
    page-break-after: auto;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --------------------------------------------------------------------------
   Kaji workshop skin

   A contemporary smith's drafting bench rather than a themed costume: blackened
   steel, brushed metal and aged bone. The diagonal edge
   on active controls borrows the geometry of a blade tip without interfering
   with the tool's canvas-first layout.
   -------------------------------------------------------------------------- */

@media screen {
  html,
  body {
    background-color: var(--bg);
    background-image:
      linear-gradient(115deg, transparent 0 72%, rgba(255,255,255,.018) 72% 72.15%, transparent 72.15%),
      radial-gradient(circle at 18% -10%, rgba(211,205,189,.07), transparent 34rem);
  }

  header {
    position: relative;
    z-index: 12;
    background: rgba(11,11,10,.94);
    border-bottom-color: var(--steel-light);
    box-shadow: 0 .8rem 2.5rem rgba(0,0,0,.34);
  }

  header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: min(34vw, 32rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--edge));
  }

  .bar:first-child { min-height: 5rem; }
  .bar + .bar { background: rgba(21,21,19,.78); }

  .stamp {
    border-color: var(--edge);
    color: var(--text);
    background: rgba(211,205,189,.06);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  }

  .wordmark-name {
    gap: .1rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1;
  }

  .wordmark-name small {
    margin-top: .22rem;
    color: var(--dim);
    font-family: var(--font-display);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .3em;
  }

  .design-identity label,
  .eyebrow,
  details.grp > summary,
  .tab,
  .specstrip dt {
    font-family: var(--font);
    font-weight: 600;
  }

  input[type='text'] {
    font-family: var(--font-display);
    background: transparent;
    border-width: 0 0 1px;
    border-color: var(--line-strong);
  }

  button,
  select,
  input[type='number'],
  input[type='email'],
  input[type='password'],
  .filebtn,
  .utility-menu > summary,
  .advanced-tools > summary {
    background-color: #121719;
  }

  button:hover,
  .filebtn:hover { background-color: var(--steel); }

  button.primary,
  .new-design-action {
    background: var(--edge);
    border-color: var(--edge-bright);
    color: var(--bg);
    clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% 50%, calc(100% - .8rem) 100%, 0 100%);
    padding-right: calc(var(--s-4) + .6rem);
  }

  button.primary:hover,
  .new-design-action:hover {
    background: var(--edge-bright);
    border-color: var(--edge-bright);
    color: var(--bg);
  }

  .workflow { gap: 0; }
  .tab { position: relative; padding: .8rem 1.1rem; margin-right: .15rem; border: 0; }
  .tab span { border-color: var(--steel-light); }
  .tab.on {
    background: var(--steel);
    border: 0;
    clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% 50%, calc(100% - .9rem) 100%, 0 100%);
    padding-right: 1.8rem;
  }
  .tab.on::after {
    content: '';
    position: absolute;
    left: 1.1rem;
    right: 1.8rem;
    bottom: .35rem;
    height: 1px;
    background: var(--edge);
  }
  .tab.on span { border-color: var(--edge-bright); color: var(--edge-bright); }
  .nest-tab { padding-block: .58rem; }

  .main { background: rgba(11,11,10,.62); }
  #panel,
  #nest-panel { background: rgba(14,14,13,.96); border-right-color: var(--steel-light); }
  details.grp > summary { position: relative; padding-block: 1rem; }
  details.grp > summary:hover,
  details.grp[open] > summary { background: var(--steel); }
  details.grp[open] > summary::before {
    content: '';
    position: absolute;
    left: 0;
    top: .8rem;
    bottom: .8rem;
    width: 3px;
    background: var(--edge);
  }

  .viewport { background: #0e0e0d; }
  .editor-stage { padding: 1.1rem; background: var(--steel); }
  #canvas {
    border: 1px solid rgba(238,233,220,.22);
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.1);
  }

  .canvas-toolbar,
  .tool-rail,
  .nest-status {
    background: rgba(11,11,10,.94);
    border-color: var(--steel-light);
    box-shadow: 0 .8rem 2rem rgba(0,0,0,.4);
  }
  .tool-rail button.on {
    position: relative;
    background: var(--edge);
    color: var(--bg);
    clip-path: polygon(0 0, calc(100% - .65rem) 0, 100% 50%, calc(100% - .65rem) 100%, 0 100%);
  }
  .vbar { background: #0e0e0d; border-top-color: var(--steel-light); }
  kbd { border-color: var(--steel-light); background: var(--surface); }

  .app-dialog {
    border-color: var(--steel-light);
    background: #10100f;
    box-shadow: 0 2rem 6rem rgba(0,0,0,.75);
  }
  .app-dialog::backdrop { background: rgba(3,5,6,.82); backdrop-filter: blur(3px); }
  .app-dialog h2,
  .profile-page h1,
  .print-workspace-head h1 { letter-spacing: -.025em; }
  .new-design-choices section { background: rgba(40,42,40,.34); border-color: var(--steel-light); }
  .new-design-choices section:hover { border-color: var(--edge); }

  .site-footer { padding: .3rem .55rem; background: rgba(11,11,10,.82); }
  .site-footer a:hover { color: var(--edge-bright); }

  #nest-canvas { background: #0a0a09; border-color: var(--steel-light); }
  #nest-canvas .cut { fill: rgba(214,219,210,.07); }
  .nest-activity i { background: var(--edge); }

  :focus-visible { outline-color: var(--edge-bright); }
  ::selection { background: var(--edge); color: var(--bg); }
}

@media screen and (max-width: 800px) {
  .bar:first-child { min-height: 0; }
  .tab { padding-inline: .65rem; }
  .tab.on { padding-right: 1.25rem; }
  .tab.on::after { left: .65rem; right: 1.25rem; }
  .editor-stage { padding: .65rem; }
  .wordmark-name small { display: none; }
}