/* ==========================================================================
   skin.css - one skin for every tool interface of Gil Soffer Engineering
   v1 - 28.09.2026 - spec: SKIN.md (same folder)

   Opt-in: <html class="sk" dir="rtl" lang="he"> + <link rel="stylesheet" href="skin.css">
   Every component class starts with "sk-". Element defaults apply only under html.sk,
   so a page can load the file and migrate one block at a time.

   Colours are derived from the letterhead (STRAP print header in the 228 report,
   p.210): logo/rule red #e32631, type black #040404, white paper -> softened in
   OKLCH by tools/derive_tokens.py. Do not type new hex values in pages; add a token.
   ========================================================================== */

/* ---------- 1. Tokens: light (default) ---------- */
:root {
  color-scheme: light;
  /* paper and ink: warm drawing paper, softened graphite black (letterhead black) */
  --sk-paper: #f8f5f2;        /* page background */
  --sk-sheet: #fefcfa;        /* panels, controls, canvas */
  --sk-sunk: #f1eeea;         /* wells, table head, tracks */
  --sk-line: #dbd7d2;         /* hairline */
  --sk-line-strong: #b5b0aa;  /* button border */
  --sk-field-line: #938e89;   /* input border, >= 3:1 on sheet */
  --sk-ink-3: #706b66;        /* captions (4.9:1) */
  --sk-ink-2: #514c47;        /* secondary text (7.8:1) */
  --sk-ink: #24211e;          /* text, primary fill (14.7:1) */
  --sk-on-ink: #fefcfa;
  /* the one accent: letterhead red softened (#e32631 -> oklch .54/.125) */
  --sk-accent: #ab4e42;
  --sk-accent-weak: #fce5e3;
  /* functional colours (not brand) */
  --sk-select: #345fb2;       /* selection + keyboard focus, as in Revit */
  --sk-select-weak: #dfeafe;
  --sk-ok: #27713d;   --sk-ok-weak: #ddf4e1;
  --sk-warn: #8f6213; --sk-warn-weak: #fdecd1;
  --sk-fail: #b31124; --sk-fail-weak: #ffe0dd;
  /* utilisation scale (Gil 28.09): green U<=1.025, light red <=1.05, red above. No amber. */
  --sk-u-ok: var(--sk-ok);
  --sk-u-near: #e3918e;
  --sk-u-fail: var(--sk-fail);
  /* overlays */
  --sk-hover: rgb(36 33 30 / .06);
  --sk-press: rgb(36 33 30 / .12);
  --sk-grid-minor: rgb(36 33 30 / .045);
  --sk-grid-major: rgb(36 33 30 / .085);
  --sk-hatch: rgb(36 33 30 / .16);
  --sk-cut: #e9e5e0;          /* cut elements in drawings (walls, cores) */
  --sk-rule: var(--sk-ink);   /* title-block frame line */
  --sk-shadow: 0 1px 2px rgb(20 16 12 / .08), 0 8px 24px rgb(20 16 12 / .12);
  --sk-scrim: rgb(20 16 12 / .28);

  /* type: Heebo = the face of the office report body; fallbacks all carry Hebrew */
  --sk-font: "Heebo", "Assistant", "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif;
  --sk-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --sk-fs-xs: 11px;
  --sk-fs-sm: 12px;
  --sk-fs-ctl: 13px;
  --sk-fs: 14px;
  --sk-fs-lg: 16px;
  --sk-fs-xl: 20px;
  --sk-lh: 1.45;

  /* size: compact on a mouse, 40 px on touch (section 12) */
  --sk-ctl: 30px;
  --sk-ctl-sm: 24px;
  --sk-ctl-lg: 36px;
  --sk-pad-x: 10px;
  --sk-gap: 6px;
  --sk-icon: 16px;
  --sk-r: 4px;
  --sk-r-lg: 6px;
  --sk-bar: 40px;             /* toolbar / tab bar */
  --sk-head: 44px;            /* title block */
  --sk-status-h: 24px;
  --sk-side: 300px;
  --sk-peek: 48px;            /* phone bottom sheet, closed */
  --sk-sheet-open: 42dvh;     /* phone bottom sheet, open */

  /* motion: <= 150 ms, opacity/transform/colour only, off on request */
  --sk-dur: 120ms;
  --sk-ease: cubic-bezier(.2, 0, 0, 1);
}

/* ---------- 2. Tokens: dark (system, or data-theme="dark") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sk-paper: #181614; --sk-sheet: #211f1c; --sk-sunk: #13110f;
    --sk-line: #383531; --sk-line-strong: #56524d; --sk-field-line: #736e69;
    --sk-ink-3: #96918c; --sk-ink-2: #bbb7b2; --sk-ink: #eae7e4; --sk-on-ink: #181614;
    --sk-accent: #dc8c80; --sk-accent-weak: #3e2725;
    --sk-select: #7ba4f0; --sk-select-weak: #22304a;
    --sk-ok: #6fc082; --sk-ok-weak: #1c3121;
    --sk-warn: #e5b562; --sk-warn-weak: #3b2e18;
    --sk-fail: #f06b68; --sk-fail-weak: #4a2321;
    --sk-u-near: #b06a68;
    --sk-hover: rgb(234 231 228 / .07); --sk-press: rgb(234 231 228 / .13);
    --sk-grid-minor: rgb(234 231 228 / .04); --sk-grid-major: rgb(234 231 228 / .075);
    --sk-hatch: rgb(234 231 228 / .16);
    --sk-cut: #2e2b28; --sk-rule: #6f6a65;
    --sk-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);
    --sk-scrim: rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sk-paper: #181614; --sk-sheet: #211f1c; --sk-sunk: #13110f;
  --sk-line: #383531; --sk-line-strong: #56524d; --sk-field-line: #736e69;
  --sk-ink-3: #96918c; --sk-ink-2: #bbb7b2; --sk-ink: #eae7e4; --sk-on-ink: #181614;
  --sk-accent: #dc8c80; --sk-accent-weak: #3e2725;
  --sk-select: #7ba4f0; --sk-select-weak: #22304a;
  --sk-ok: #6fc082; --sk-ok-weak: #1c3121;
  --sk-warn: #e5b562; --sk-warn-weak: #3b2e18;
  --sk-fail: #f06b68; --sk-fail-weak: #4a2321;
  --sk-u-near: #b06a68;
  --sk-hover: rgb(234 231 228 / .07); --sk-press: rgb(234 231 228 / .13);
  --sk-grid-minor: rgb(234 231 228 / .04); --sk-grid-major: rgb(234 231 228 / .075);
  --sk-hatch: rgb(234 231 228 / .16);
  --sk-cut: #2e2b28; --sk-rule: #6f6a65;
  --sk-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);
  --sk-scrim: rgb(0 0 0 / .45);
}

/* ---------- 3. Touch: bigger targets only where fingers are ---------- */
@media (pointer: coarse) {
  :root {
    --sk-ctl: 40px;
    --sk-ctl-sm: 40px;
    --sk-ctl-lg: 44px;
    --sk-fs-ctl: 14px;
    --sk-icon: 18px;
    --sk-bar: 46px;
    --sk-head: 48px;
    --sk-pad-x: 12px;
  }
}

/* ---------- 4. Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --sk-dur: 0ms; }
}
:root[data-motion="off"] { --sk-dur: 0ms; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}

/* ---------- 5. Base (only under html.sk) ---------- */
html.sk { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.sk *, html.sk *::before, html.sk *::after { box-sizing: border-box; }
html.sk body {
  margin: 0;
  background: var(--sk-paper);
  color: var(--sk-ink);
  font: 400 var(--sk-fs)/var(--sk-lh) var(--sk-font);
  -webkit-font-smoothing: antialiased;
}
html.sk :focus-visible { outline: 2px solid var(--sk-select); outline-offset: 1px; }
html.sk :focus:not(:focus-visible) { outline: none; }
html.sk ::selection { background: var(--sk-select-weak); color: var(--sk-ink); }
/* text links only: a link styled as a button (.sk-btn) or the title-block mark keeps its own look
   (found while applying the skin to the review station, 28.09: the mark lost its red, a button link its label) */
html.sk a:not(.sk-btn, .sk-head__mark) { color: inherit; text-decoration: underline; text-decoration-color: var(--sk-accent);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.sk a:not(.sk-btn, .sk-head__mark):hover { color: var(--sk-accent); }
html.sk h1, html.sk h2, html.sk h3 { margin: 0; line-height: 1.25; }
html.sk * { scrollbar-width: thin; scrollbar-color: var(--sk-line-strong) transparent; }
html.sk [hidden] { display: none !important; }

.sk-h1 { font-size: var(--sk-fs-xl); font-weight: 700; }
.sk-h2 { font-size: var(--sk-fs-lg); font-weight: 600; }
.sk-muted { color: var(--sk-ink-2); }
.sk-small { font-size: var(--sk-fs-sm); }
/* numbers: tabular, left-to-right inside Hebrew text */
.sk-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.sk-mono { font-family: var(--sk-mono); font-size: .92em; }
.sk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* drawing label: small caption followed by a hairline, like a section title on a sheet */
.sk-caption {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: var(--sk-fs-sm); font-weight: 600; color: var(--sk-ink-2);
}
.sk-caption::after { content: ""; flex: 1; border-top: 1px solid var(--sk-line); }
.sk-caption__aside { order: 3; font-weight: 400; color: var(--sk-ink-3); }

/* ---------- 6. Icons (sprite injected by skin.js) ---------- */
.sk-i {
  width: var(--sk-icon); height: var(--sk-icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .sk-i--mirror { transform: scaleX(-1); }

/* ---------- 7. Buttons ---------- */
.sk-btn {
  --_h: var(--sk-ctl);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-gap);
  flex: none;
  height: var(--_h); min-width: var(--_h);
  padding: 0 var(--sk-pad-x);
  border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r);
  background-color: var(--sk-sheet); background-image: none;
  color: var(--sk-ink);
  font: 500 var(--sk-fs-ctl)/1 var(--sk-font);
  white-space: nowrap; text-decoration: none; vertical-align: middle;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease),
              color var(--sk-dur) var(--sk-ease);
}
@media (hover: hover) {
  .sk-btn:hover { background-image: linear-gradient(var(--sk-hover), var(--sk-hover)); }
}
.sk-btn:active { background-image: linear-gradient(var(--sk-press), var(--sk-press)); }

.sk-btn--sm { --_h: var(--sk-ctl-sm); padding: 0 8px; font-size: var(--sk-fs-sm); }
.sk-btn--lg { --_h: var(--sk-ctl-lg); padding: 0 14px; }
/* the one main action of a view: ink fill (the letterhead black) */
.sk-btn--primary { background-color: var(--sk-ink); border-color: var(--sk-ink); color: var(--sk-on-ink); }
/* tool-like button: no frame until hover (toolbars make every plain button quiet) */
.sk-btn--quiet { border-color: transparent; background-color: transparent; }
.sk-btn--danger { color: var(--sk-fail); }
.sk-btn--danger.sk-btn--primary { background-color: var(--sk-fail); border-color: var(--sk-fail); color: #fff; }
/* square icon button: only for the universal set (undo, redo, zoom, close, more, prev/next, help) */
.sk-btn--icon { padding: 0; width: var(--_h); }
.sk-btn--block { display: flex; width: 100%; }

/* pressed tool / mode (aria-pressed): Revit-like active tool highlight */
.sk-btn[aria-pressed="true"] {
  background-color: var(--sk-select-weak); border-color: var(--sk-select); color: var(--sk-select);
}
/* disabled: keep it visible, explain why in data-why (skin.js shows it as the tip) */
.sk-btn:disabled, .sk-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; background-image: none !important;
}
/* busy: label stays, a small ring spins at the start, clicks are ignored */
.sk-btn[aria-busy="true"] { cursor: progress; pointer-events: none; padding-inline-start: calc(var(--sk-pad-x) + 16px); }
.sk-btn[aria-busy="true"]::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: sk-spin 700ms linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sk-btn[aria-busy="true"]::before { animation: none; border-style: dotted; } }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* keyboard hint inside a button or tip */
.sk-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--sk-line-strong); border-bottom-width: 2px; border-radius: 3px;
  background: var(--sk-sunk); color: var(--sk-ink-2);
  font: 500 var(--sk-fs-xs)/1 var(--sk-mono); direction: ltr;
}
.sk-btn .sk-kbd { margin-inline-start: 2px; }
@media (pointer: coarse) { .sk-btn .sk-kbd { display: none; } }

/* ---------- 8. Toolbar, groups, tabs ---------- */
.sk-toolbar {
  display: flex; align-items: center; gap: 2px;
  min-height: var(--sk-bar); padding: 0 8px;
  background: var(--sk-sheet); border-bottom: 1px solid var(--sk-line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.sk-toolbar::-webkit-scrollbar { display: none; }
/* long toolbars: the tools scroll sideways, the main action + "more" stay pinned at the end */
.sk-toolbar:has(> .sk-toolbar__scroll) { overflow: visible; padding: 0; gap: 0; }
.sk-toolbar__scroll {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; align-self: stretch;
  padding: 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.sk-toolbar__scroll::-webkit-scrollbar { display: none; }
/* more tools off-screen: the edge fades (skin.js sets data-more = start | end | both) */
[dir="rtl"] .sk-toolbar__scroll[data-more="end"], [dir="ltr"] .sk-toolbar__scroll[data-more="start"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px); mask-image: linear-gradient(to right, transparent 0, #000 36px); }
[dir="rtl"] .sk-toolbar__scroll[data-more="start"], [dir="ltr"] .sk-toolbar__scroll[data-more="end"] {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px); mask-image: linear-gradient(to left, transparent 0, #000 36px); }
.sk-toolbar__scroll[data-more="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.sk-toolbar__end {
  display: flex; align-items: center; gap: 4px; flex: none; align-self: stretch;
  padding: 0 8px; border-inline-start: 1px solid var(--sk-line); background: var(--sk-sheet);
}
.sk-toolbar__end .sk-btn:not(.sk-btn--primary) { border-color: transparent; background-color: transparent; }
.sk-toolbar .sk-btn:not(.sk-btn--primary):not(.sk-btn--outline):not([aria-pressed="true"]) {
  border-color: transparent; background-color: transparent;
}
.sk-group { display: flex; align-items: center; gap: 2px; flex: none; }
.sk-group__label { font-size: var(--sk-fs-xs); color: var(--sk-ink-3); margin-inline: 4px 2px; white-space: nowrap; }
.sk-sep { flex: none; width: 1px; align-self: stretch; margin: 9px 6px; background: var(--sk-line); }
.sk-spacer { flex: 1 1 auto; min-width: 8px; }

.sk-tabs {
  display: flex; align-items: stretch; gap: 0;
  height: var(--sk-bar); padding: 0 8px;
  background: var(--sk-sheet); border-bottom: 1px solid var(--sk-line);
  overflow-x: auto; scrollbar-width: none;
}
.sk-tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; border: 0; background: none; color: var(--sk-ink-2);
  font: 500 var(--sk-fs-ctl)/1 var(--sk-font); cursor: pointer; white-space: nowrap;
  transition: color var(--sk-dur) var(--sk-ease);
}
.sk-tab:hover { color: var(--sk-ink); }
.sk-tab[aria-selected="true"] { color: var(--sk-ink); font-weight: 600; }
/* current tab = the letterhead rule: a short red line under the name */
.sk-tab[aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; background: var(--sk-accent);
}
.sk-tab .sk-badge { margin-inline-start: 2px; }

/* segmented control: one choice out of a few (modes, result type, axis) */
.sk-seg {
  display: inline-flex; flex: none; padding: 2px; gap: 2px;
  background: var(--sk-sunk); border: 1px solid var(--sk-line); border-radius: calc(var(--sk-r) + 2px);
}
.sk-seg > button, .sk-seg > label {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: calc(var(--sk-ctl) - 6px); min-width: calc(var(--sk-ctl) - 6px); padding: 0 9px;
  border: 0; border-radius: var(--sk-r); background: transparent; color: var(--sk-ink-2);
  font: 500 var(--sk-fs-ctl)/1 var(--sk-font); white-space: nowrap; cursor: pointer;
  transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}
.sk-seg > label > input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) { .sk-seg > button:hover, .sk-seg > label:hover { color: var(--sk-ink); background: var(--sk-hover); } }
.sk-seg > button[aria-pressed="true"], .sk-seg > button[aria-checked="true"], .sk-seg > label:has(input:checked) {
  background: var(--sk-ink); color: var(--sk-on-ink);
}
.sk-seg > label:has(input:focus-visible) { outline: 2px solid var(--sk-select); outline-offset: 1px; }
/* phone: a collapsing segmented control shows the label of the chosen item only (icons carry aria-label) */
@media (max-width: 700px) {
  .sk-seg--collapse > button:not([aria-checked="true"]) > span { display: none; }
  .sk-seg--collapse > button:not([aria-checked="true"]) { padding: 0; }
}
@media (pointer: coarse) {
  .sk-seg { padding: 0; gap: 0; }
  .sk-seg > button, .sk-seg > label { height: var(--sk-ctl); min-width: var(--sk-ctl); padding: 0 12px; }
}

/* ---------- 9. Switch, checkbox, radio (one control per on/off, never a button pair) ---------- */
.sk-switch, .sk-check {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: var(--sk-ctl); padding: 0 4px;
  font: 400 var(--sk-fs-ctl)/1.2 var(--sk-font); color: var(--sk-ink);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.sk-switch input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 28px; height: 16px; border-radius: 8px; background: var(--sk-line-strong); cursor: pointer;
  transition: background-color var(--sk-dur) var(--sk-ease);
}
.sk-switch input::before {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--sk-sheet);
  box-shadow: 0 1px 1px rgb(0 0 0 / .2);
  transition: inset-inline-start var(--sk-dur) var(--sk-ease);
}
.sk-switch input:checked { background: var(--sk-ink); }
.sk-switch input:checked::before { inset-inline-start: 14px; }
@media (pointer: coarse) {
  .sk-switch input { width: 36px; height: 20px; border-radius: 10px; }
  .sk-switch input::before { width: 16px; height: 16px; }
  .sk-switch input:checked::before { inset-inline-start: 18px; }
}
.sk-check input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 16px; height: 16px; border: 1px solid var(--sk-field-line); border-radius: 3px;
  background: var(--sk-sheet); cursor: pointer;
}
.sk-check input[type="radio"] { border-radius: 50%; }
.sk-check input:checked { background: var(--sk-ink); border-color: var(--sk-ink); }
.sk-check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--sk-on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sk-check input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--sk-on-ink);
}
@media (pointer: coarse) {
  .sk-check input { width: 20px; height: 20px; }
  .sk-check input[type="checkbox"]:checked::after { left: 6px; top: 2.5px; width: 6px; height: 11px; }
  .sk-check input[type="radio"]:checked::after { inset: 5px; }
}
.sk-switch input:focus-visible, .sk-check input:focus-visible { outline: 2px solid var(--sk-select); outline-offset: 2px; }
.sk-switch:has(input:disabled), .sk-check:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* ---------- 10. Fields ---------- */
.sk-input, .sk-select, .sk-textarea {
  height: var(--sk-ctl); min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--sk-field-line); border-radius: var(--sk-r);
  background: var(--sk-sheet); color: var(--sk-ink);
  font: 400 var(--sk-fs-ctl)/1 var(--sk-font);
  transition: border-color var(--sk-dur) var(--sk-ease);
}
.sk-textarea { height: auto; min-height: calc(var(--sk-ctl) * 2); padding: 6px 8px; line-height: 1.4; resize: vertical; }
.sk-input:hover, .sk-select:hover, .sk-textarea:hover { border-color: var(--sk-ink-3); }
.sk-input:focus-visible, .sk-select:focus-visible, .sk-textarea:focus-visible {
  outline: 2px solid var(--sk-select); outline-offset: -1px; border-color: var(--sk-select);
}
.sk-input::placeholder, .sk-textarea::placeholder { color: var(--sk-ink-3); }
.sk-input[aria-invalid="true"] { border-color: var(--sk-fail); background: var(--sk-fail-weak); }
/* numbers: LTR digits, tabular, width set by --w in characters */
.sk-input--num { --w: 7; width: calc(var(--w) * 1ch + 18px); direction: ltr; text-align: end;
  font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .sk-input, .sk-select, .sk-textarea { font-size: 16px; } } /* no iOS zoom-on-focus */
.sk-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-inline-end: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858079' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
[dir="rtl"] .sk-select { background-position: left 9px center; }

/* label + control + unit on one row */
.sk-field { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--sk-fs-ctl); }
.sk-field__label { color: var(--sk-ink-2); white-space: nowrap; }
.sk-field__unit { color: var(--sk-ink-3); font-size: var(--sk-fs-sm); white-space: nowrap; }
.sk-field__msg { display: block; font-size: var(--sk-fs-sm); color: var(--sk-fail); margin-top: 2px; }
/* stacked form row inside a panel */
.sk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: var(--sk-ctl); }
.sk-row + .sk-row { margin-top: 6px; }
.sk-row__label { flex: 0 0 88px; color: var(--sk-ink-2); font-size: var(--sk-fs-ctl); }

/* stepper: - value + */
.sk-stepper { display: inline-flex; align-items: stretch; flex: none; }
.sk-stepper .sk-btn { border-radius: 0; }
.sk-stepper .sk-btn:first-child { border-start-start-radius: var(--sk-r); border-end-start-radius: var(--sk-r); }
.sk-stepper .sk-btn:last-child { border-start-end-radius: var(--sk-r); border-end-end-radius: var(--sk-r); }
.sk-stepper .sk-input { border-radius: 0; margin-inline: -1px; position: relative; z-index: 1; }

/* nudge pad: 3x3, arrows are physical plan directions (never mirrored) */
.sk-pad {
  display: grid; grid-template-columns: repeat(3, var(--sk-ctl)); grid-template-rows: repeat(3, var(--sk-ctl));
  gap: 2px; direction: ltr; flex: none;
}
.sk-pad .sk-btn { padding: 0; }
.sk-pad__n { grid-area: 1 / 2; } .sk-pad__w { grid-area: 2 / 1; } .sk-pad__c { grid-area: 2 / 2; }
.sk-pad__e { grid-area: 2 / 3; } .sk-pad__s { grid-area: 3 / 2; }
.sk-pad__c { display: flex; align-items: center; justify-content: center; font-size: var(--sk-fs-xs);
  color: var(--sk-ink-3); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.1; }

/* ---------- 11. Chips, badges, dots, status ---------- */
.sk-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 22px; padding: 0 7px; border-radius: 3px;
  border: 1px solid var(--sk-line); background: var(--sk-sunk); color: var(--sk-ink-2);
  font: 500 var(--sk-fs-sm)/1 var(--sk-font); white-space: nowrap;
}
.sk-chip::before { font-weight: 700; }
.sk-chip--ok   { background: var(--sk-ok-weak);   border-color: transparent; color: var(--sk-ok); }
.sk-chip--warn { background: var(--sk-warn-weak); border-color: transparent; color: var(--sk-warn); }
.sk-chip--fail { background: var(--sk-fail-weak); border-color: transparent; color: var(--sk-fail); }
.sk-chip--info { background: var(--sk-select-weak); border-color: transparent; color: var(--sk-select); }
.sk-chip--ok::before { content: "\2713"; }
.sk-chip--warn::before { content: "!"; }
.sk-chip--fail::before { content: "\2715"; }
/* utilisation value in the office scale: the colour never replaces the number */
.sk-u {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 20px; padding: 0 5px;
  border-radius: 3px; font: 600 var(--sk-fs-sm)/1 var(--sk-font); font-variant-numeric: tabular-nums; direction: ltr;
}
.sk-u--ok { background: var(--sk-u-ok); color: #fff; }
.sk-u--near { background: var(--sk-u-near); color: #24211e; }
.sk-u--fail { background: var(--sk-u-fail); color: #fff; }
.sk-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--sk-sunk); color: var(--sk-ink-2);
  font: 600 var(--sk-fs-xs)/1 var(--sk-font); font-variant-numeric: tabular-nums;
}
.sk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sk-ink-3); flex: none; }
.sk-dot--ok { background: var(--sk-ok); } .sk-dot--warn { background: var(--sk-warn); } .sk-dot--fail { background: var(--sk-fail); }
.sk-dot--live { background: var(--sk-ok); box-shadow: 0 0 0 3px var(--sk-ok-weak); }

/* inline notice (instead of a banner that pushes the tool down) */
.sk-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: var(--sk-r); border-inline-start: 3px solid var(--sk-ink-3);
  background: var(--sk-sunk); font-size: var(--sk-fs-ctl); color: var(--sk-ink);
}
.sk-note--warn { border-color: var(--sk-warn); background: var(--sk-warn-weak); }
.sk-note--fail { border-color: var(--sk-fail); background: var(--sk-fail-weak); }
.sk-note--ok { border-color: var(--sk-ok); background: var(--sk-ok-weak); }

/* ---------- 12. Title block (app header) ---------- */
.sk-head {
  display: flex; align-items: stretch;
  height: var(--sk-head);
  background: var(--sk-sheet); border-bottom: 1px solid var(--sk-rule);
}
.sk-head__mark {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: calc(var(--sk-head) + 8px); border-inline-end: 1px solid var(--sk-line); color: var(--sk-accent);
  text-decoration: none;
}
.sk-head__mark svg { width: 30px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.1; }
.sk-head__title {
  position: relative; display: flex; flex-direction: column; justify-content: center; flex: 0 1 auto; min-width: 110px;
  padding: 0 12px; border-inline-end: 1px solid var(--sk-line);
}
.sk-head__title b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-head__title span { font-size: var(--sk-fs-sm); color: var(--sk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the letterhead rule: red under the name */
.sk-head__title::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 2px; background: var(--sk-accent); }
.sk-head__cells { display: flex; align-items: stretch; min-width: 0; overflow: hidden; }
.sk-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: none;
  padding: 0 12px; border-inline-end: 1px solid var(--sk-line); min-width: 0;
}
.sk-cell__k { font-size: var(--sk-fs-xs); color: var(--sk-ink-3); line-height: 1.1; }
.sk-cell__v { display: flex; align-items: center; gap: 6px; font-size: var(--sk-fs-ctl); font-weight: 500; white-space: nowrap; line-height: 1.2; }
.sk-head__actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; padding: 0 8px; flex: none; }
.sk-head__actions .sk-btn { border-color: transparent; background-color: transparent; }
/* views of one tool live in the title block (no extra row); on a phone they wrap to their own row */
.sk-head .sk-tabs { height: auto; border-bottom: 0; background: transparent; padding: 0 4px; flex: 0 0 auto; }
.sk-head .sk-tab[aria-selected="true"]::after { bottom: 0; }

/* ---------- 13. App shell: the tool fills the screen, controls on top ---------- */
.sk-app {
  display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  height: 100vh; height: 100dvh; overflow: hidden;
}
.sk-main { display: grid; grid-template-columns: var(--sk-side) minmax(0, 1fr); min-height: 0; }
.sk-app[data-side="closed"] .sk-main { grid-template-columns: 0 minmax(0, 1fr); }
.sk-app[data-side="closed"] .sk-side { visibility: hidden; }
.sk-side {
  min-height: 0; overflow: auto; background: var(--sk-sheet); border-inline-end: 1px solid var(--sk-line);
}
.sk-side__body { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.sk-sheet__handle { display: none; }
.sk-work { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.sk-status {
  display: flex; align-items: center; gap: 14px; height: var(--sk-status-h); padding: 0 10px;
  background: var(--sk-sheet); border-top: 1px solid var(--sk-line);
  font-size: var(--sk-fs-sm); color: var(--sk-ink-2); white-space: nowrap; overflow: hidden;
}
.sk-status > * { flex: none; }
.sk-status .sk-spacer { flex: 1; }

/* floating controls over the drawing (zoom, fit): a small stack at the bottom-end corner */
.sk-float {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 0;
  background: var(--sk-sheet); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r-lg);
  box-shadow: var(--sk-shadow); overflow: hidden;
}
.sk-float .sk-btn { border: 0; border-radius: 0; background-color: transparent; }
.sk-float .sk-btn + .sk-btn { border-top: 1px solid var(--sk-line); }

/* iPad portrait: narrower side panel, only the key title-block cells */
@media (max-width: 1100px) {
  :root { --sk-side: 272px; }
  .sk-head__cells .sk-cell:not(.sk-cell--keep) { display: none; }
}

/* phone: the side panel becomes a bottom sheet that peeks (48 px) and opens to 42% */
@media (max-width: 700px) {
  .sk-main { grid-template-columns: minmax(0, 1fr) !important; }
  .sk-work { padding-bottom: var(--sk-peek); }
  .sk-side {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40; visibility: visible !important;
    height: var(--sk-sheet-open); max-height: var(--sk-sheet-open);
    border: 1px solid var(--sk-line-strong); border-bottom: 0; border-radius: 12px 12px 0 0;
    box-shadow: var(--sk-shadow); overflow: hidden; display: flex; flex-direction: column;
    transform: translateY(calc(100% - var(--sk-peek)));
    transition: transform var(--sk-dur) var(--sk-ease);
  }
  .sk-app[data-sheet="open"] .sk-side { transform: none; }
  .sk-side__body { overflow: auto; flex: 1; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .sk-sheet__handle {
    display: flex; align-items: center; gap: 10px; flex: none;
    height: var(--sk-peek); padding: 0 14px; width: 100%;
    border: 0; border-bottom: 1px solid var(--sk-line); background: var(--sk-sheet); color: var(--sk-ink);
    font: 600 var(--sk-fs-ctl)/1 var(--sk-font); cursor: pointer; text-align: start;
  }
  .sk-sheet__handle::before {
    content: ""; position: absolute; top: 5px; left: 50%; width: 32px; height: 4px; margin-left: -16px;
    border-radius: 2px; background: var(--sk-line-strong);
  }
  .sk-sheet__sum { margin-inline-start: auto; font-weight: 400; color: var(--sk-ink-2); font-size: var(--sk-fs-sm); }
  .sk-head__cells .sk-cell:not(.sk-cell--keep) { display: none; }
  .sk-head { flex-wrap: wrap; height: auto; }
  .sk-head > * { height: var(--sk-head); }
  .sk-head .sk-tabs { order: 9; flex: 0 0 100%; height: var(--sk-bar); border-top: 1px solid var(--sk-line); }
  .sk-head__title { flex: 1; border-inline-end: 0; }
  .sk-head__title span { display: none; }
  .sk-head__mark { width: var(--sk-head); }
  .sk-status { display: none; }
  .sk-float { inset-block-end: calc(var(--sk-peek) + 10px); }
  .sk-hide-phone { display: none !important; }
}
@media (min-width: 701px) { .sk-only-phone { display: none !important; } }

/* ---------- 14. Panels, tables, lists, log ---------- */
.sk-panel { background: var(--sk-sheet); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); }
.sk-panel__head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-bottom: 1px solid var(--sk-line); }
.sk-panel__body { padding: 10px; }
.sk-kv { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; margin: 0; font-size: var(--sk-fs-ctl); }
.sk-kv dt { color: var(--sk-ink-2); }
.sk-kv dd { margin: 0; font-weight: 500; }

.sk-table { width: 100%; border-collapse: collapse; font-size: var(--sk-fs-ctl); }
.sk-table th, .sk-table td { height: 28px; padding: 0 8px; border-bottom: 1px solid var(--sk-line); text-align: start; white-space: nowrap; }
.sk-table th { background: var(--sk-sunk); color: var(--sk-ink-2); font-weight: 600; font-size: var(--sk-fs-sm); position: sticky; top: 0; }
.sk-table td.n, .sk-table th.n { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
.sk-table tbody tr:hover { background: var(--sk-hover); }
.sk-table tr[aria-current="true"] { box-shadow: inset -2px 0 0 var(--sk-accent); background: var(--sk-accent-weak); }
[dir="ltr"] .sk-table tr[aria-current="true"] { box-shadow: inset 2px 0 0 var(--sk-accent); }

/* long logs: bounded box, newest first, only the last N rendered (skin.js Skin.log) */
.sk-log {
  max-height: 220px; overflow: auto; margin: 0; padding: 4px 0;
  border: 1px solid var(--sk-line); border-radius: var(--sk-r); background: var(--sk-sunk);
  font: 400 var(--sk-fs-sm)/1.6 var(--sk-font); font-variant-numeric: tabular-nums; list-style: none;
}
.sk-log li { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-log li time { color: var(--sk-ink-3); margin-inline-end: 6px; }
.sk-log__more { display: flex; justify-content: center; padding: 4px; }

/* ---------- 15. Drawing surface ---------- */
/* grid paper, very faint: 8 px minor, 40 px major. Only behind drawings, never behind text. */
.sk-gridpaper {
  background-color: var(--sk-sheet);
  background-image:
    linear-gradient(var(--sk-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--sk-grid-major) 1px, transparent 1px),
    linear-gradient(var(--sk-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--sk-grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
/* section-cut hatch (drawing convention) for "off / not available" areas */
.sk-hatch { background-image: repeating-linear-gradient(45deg, var(--sk-hatch) 0 1px, transparent 1px 7px); }
/* SVG drawing classes (plans, sections) */
/* a drawing is physical space: never mirrored by RTL; Hebrew labels still shape right-to-left */
.sk-draw { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; direction: ltr; }
.sk-draw text { unicode-bidi: plaintext; }
.sk-draw .ln { fill: none; stroke: var(--sk-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-draw .ln-thin { fill: none; stroke: var(--sk-ink-3); stroke-width: .75; vector-effect: non-scaling-stroke; }
.sk-draw .ln-axis { fill: none; stroke: var(--sk-accent); stroke-width: .75; stroke-dasharray: 8 3 2 3; vector-effect: non-scaling-stroke; }
.sk-draw .cut { fill: var(--sk-cut); stroke: var(--sk-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* text size stays an SVG attribute (user units), so the page sets font-size = px / scale */
.sk-draw .txt { fill: var(--sk-ink-2); font-family: var(--sk-font); font-weight: 500; }
.sk-draw .sel { fill: none; stroke: var(--sk-select); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sk-draw .sel-halo { fill: var(--sk-select-weak); opacity: .7; }
.sk-draw .u-ok { fill: var(--sk-u-ok); } .sk-draw .u-near { fill: var(--sk-u-near); } .sk-draw .u-fail { fill: var(--sk-u-fail); }
/* anything tappable on a drawing gets an invisible hit area >= 24 px (mouse) / 40 px (touch), set in px by the page */
.sk-draw .hit { fill: transparent; stroke: none; cursor: pointer; }

/* ---------- 16. Live screens (Revit / STRAP on the office desks) ---------- */
.sk-screen { margin: 0; background: var(--sk-sheet); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r-lg); padding: 5px 5px 0; }
.sk-screen__view { position: relative; aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: #101214; }
.sk-screen__view > img, .sk-screen__view > svg, .sk-screen__view > canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk-screen__cap { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px; font-size: var(--sk-fs-sm); color: var(--sk-ink-2); white-space: nowrap; }
.sk-screen__cap b { color: var(--sk-ink); font-weight: 600; }
.sk-screen__cap .sk-spacer { flex: 1; }
.sk-screen[data-state="stale"] .sk-screen__view > * { filter: grayscale(.85); opacity: .55; }
.sk-screen[data-state="stale"] .sk-screen__age { color: var(--sk-warn); font-weight: 600; }
.sk-screen[data-state="off"] .sk-screen__view { background-color: var(--sk-sunk); }
.sk-screen[data-state="off"] .sk-screen__view > * { display: none; }
.sk-screen[data-state="off"] .sk-screen__view::after {
  content: attr(data-off); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--sk-ink-2); font-size: var(--sk-fs-ctl);
  background-image: repeating-linear-gradient(45deg, var(--sk-hatch) 0 1px, transparent 1px 7px);
}

/* ---------- 17. Floating layers: menu, tip, toast, dialog ---------- */
.sk-menu { position: relative; display: inline-block; flex: none; }
.sk-menu > summary { list-style: none; }
.sk-menu > summary::-webkit-details-marker { display: none; }
.sk-menu__pop {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 60; min-width: 200px; padding: 4px;
  background: var(--sk-sheet); border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r-lg); box-shadow: var(--sk-shadow);
}
.sk-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--sk-ctl); padding: 0 8px;
  border: 0; border-radius: var(--sk-r); background: none; color: var(--sk-ink);
  font: 400 var(--sk-fs-ctl)/1 var(--sk-font); text-align: start; cursor: pointer; white-space: nowrap;
}
.sk-menu__item:hover, .sk-menu__item:focus-visible { background: var(--sk-hover); outline: none; }
.sk-menu__item .sk-kbd { margin-inline-start: auto; }
.sk-menu__sep { height: 1px; margin: 4px 0; background: var(--sk-line); }

.sk-tip {
  position: fixed; z-index: 1100; max-width: 260px; padding: 5px 8px; pointer-events: none;
  background: var(--sk-ink); color: var(--sk-on-ink); border-radius: var(--sk-r);
  font: 400 var(--sk-fs-sm)/1.35 var(--sk-font); box-shadow: var(--sk-shadow);
  opacity: 0; transition: opacity var(--sk-dur) var(--sk-ease);
}
.sk-tip[data-show] { opacity: 1; }
.sk-tip .sk-kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .8; margin-inline-start: 6px; }
.sk-tip__why { display: block; opacity: .8; margin-top: 2px; }
@media (pointer: coarse) { .sk-tip .sk-kbd { display: none; } }

.sk-toasts {
  position: fixed; z-index: 1000; inset-block-end: calc(var(--sk-status-h) + 10px); inset-inline-start: 12px;
  display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none;
  width: min(400px, calc(100vw - 24px));
}
.sk-toast {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px 6px 12px;
  background: var(--sk-ink); color: var(--sk-on-ink); border-radius: var(--sk-r-lg); box-shadow: var(--sk-shadow);
  border-inline-start: 3px solid var(--sk-ink-3);
  font: 400 var(--sk-fs-ctl)/1.35 var(--sk-font); pointer-events: auto;
  animation: sk-toast-in var(--sk-dur) var(--sk-ease);
}
[dir="rtl"] .sk-toast { padding: 6px 12px 6px 8px; }
.sk-toast--ok { border-inline-start-color: var(--sk-ok); }
.sk-toast--warn { border-inline-start-color: var(--sk-warn); }
.sk-toast--fail { border-inline-start-color: var(--sk-fail); }
.sk-toast__msg { flex: 1; }
.sk-toast .sk-btn { --_h: 28px; background: transparent; color: inherit; border-color: rgb(128 128 128 / .5); }
.sk-toast .sk-btn--icon { border-color: transparent; }
.sk-toast[data-leaving] { opacity: 0; transform: translateY(4px); transition: opacity var(--sk-dur), transform var(--sk-dur); }
@keyframes sk-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .sk-toasts { inset-inline: 12px; width: auto; inset-block-end: calc(var(--sk-peek) + 10px + env(safe-area-inset-bottom)); }
}

.sk-dialog {
  width: min(520px, calc(100vw - 32px)); max-height: min(80dvh, 640px); padding: 0;
  border: 1px solid var(--sk-line-strong); border-radius: var(--sk-r-lg);
  background: var(--sk-sheet); color: var(--sk-ink); box-shadow: var(--sk-shadow);
}
.sk-dialog::backdrop { background: var(--sk-scrim); }
.sk-dialog__head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--sk-rule); }
[dir="rtl"] .sk-dialog__head { padding: 0 14px 0 8px; }
.sk-dialog__head h2 { font-size: var(--sk-fs-lg); flex: 1; }
.sk-dialog__body { padding: 12px 14px 16px; overflow: auto; }
.sk-keys { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: var(--sk-fs-ctl); }
.sk-keys dt { color: var(--sk-ink); }
.sk-keys dd { margin: 0; display: flex; gap: 3px; }

/* ---------- 18. Print: drawings and tables only ---------- */
@media print {
  .sk-toolbar, .sk-tabs, .sk-status, .sk-float, .sk-toasts, .sk-head__actions, .sk-sheet__handle { display: none !important; }
  html.sk body { background: #fff; }
  .sk-app { height: auto; overflow: visible; }
}