/* The drafting language of design 10 (forum-session-008), restored on every sheet page as KIT pieces (B-DESIGN-RESTORE, founder 10.10): the static drafting details of a sheet (grid ticks, a dimension line,
   section markers, an inner border, the dense grid of a hero), the lines that DRAW ON (as a sheet enters the view, or when the page loads), and the AutoCAD crosshair (draft.js). Tokens only (no colour literals,
   SP-14.09); no inline CSS anywhere (CSP style-src 'self'). The DEFAULT state of everything is the FINISHED drawing: no JS, an old browser or prefers-reduced-motion read as a complete sheet. Every animation
   lives inside @media (prefers-reduced-motion: no-preference) and moves only transform, opacity or stroke-dashoffset (no layout). */

/* ── a sheet frame: static details (components/kit/SheetFrame.astro) ── */
.sheetframe { overflow: visible; }
.sf-details { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sheetframe-body, .sheetframe .titleblock { position: relative; z-index: 1; }
.sheetframe-body { padding-block-end: calc(var(--vit-space-5) + 36px); }
/* the inner border: a second, lighter line 5px inside the first (the plotted sheet's double border) */
.sf-inner { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); overflow: visible; }
.sf-inner rect { fill: none; stroke: var(--vit-ink); stroke-width: .75; opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 0; x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); }
/* grid ticks along the top and the inline-start edge, every 16px, a taller one every 80px */
.sf-ticks { position: absolute; opacity: .5; }
.sf-ticks.t-x { inset-inline: 0; inset-block-start: 0; height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--vit-ink) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, var(--vit-ink) 0 1px, transparent 1px 80px);
  background-size: 100% 4px, 100% 8px; background-repeat: no-repeat; }
.sf-ticks.t-y { inset-block: 0; inset-inline-start: 0; width: 8px;
  background-image: repeating-linear-gradient(180deg, var(--vit-ink) 0 1px, transparent 1px 16px), repeating-linear-gradient(180deg, var(--vit-ink) 0 1px, transparent 1px 80px);
  background-size: 4px 100%, 8px 100%; background-repeat: no-repeat; }
/* a dimension line above the title block: arrowed ends, the scale at its middle */
.sf-dim { position: absolute; inset-inline: 22px; inset-block-end: 6px; display: flex; align-items: center; gap: 8px; direction: ltr; color: var(--vit-ink-2); }
.sf-dim i { flex: 1; height: 1px; background: var(--vit-ink); opacity: .55; transform-origin: left center; }
.sf-dim i:last-of-type { transform-origin: right center; }
.sf-dim::before, .sf-dim::after { content: ""; flex: none; width: 0; height: 0; border-block: 4px solid transparent; }
.sf-dim::before { order: -1; border-inline-end: 8px solid var(--vit-ink); opacity: .55; margin-inline-end: -8px; }
.sf-dim::after { border-inline-start: 8px solid var(--vit-ink); opacity: .55; margin-inline-start: -8px; }
.sf-dim b { flex: none; font-family: var(--vit-f-mono); font-weight: 500; font-size: 10px; letter-spacing: .14em; padding: 0 6px; background: var(--vit-paper); }
/* section markers: a bubble with a letter and the cutting arrow */
.sf-sec { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border: 1.25px solid var(--vit-ink); border-radius: 50%; background: var(--vit-paper); color: var(--vit-ink); font-family: var(--vit-f-mono); font-size: 10.5px; font-weight: 500; line-height: 1; }
.sf-sec::after { content: ""; position: absolute; width: 0; height: 0; border-block: 4px solid transparent; }
.sf-sec.s1 { inset-block-start: 10px; inset-inline-end: 12px; }
.sf-sec.s1::after { inset-block-start: 50%; margin-block-start: -4px; inset-inline-start: calc(100% + 1px); border-inline-start: 7px solid var(--vit-ink); }
.sf-sec.s2 { inset-block-end: 22px; inset-inline-end: 12px; }
.sf-sec.s2::after { inset-block-start: 50%; margin-block-start: -4px; inset-inline-end: calc(100% + 1px); border-inline-end: 7px solid var(--vit-ink); }
/* a callout: a leader and a numbered bubble beside the title block's sheet cell (kept off the content) */
.sf-call { position: absolute; inset-block-end: 22px; inset-inline-start: 22px; display: flex; align-items: center; direction: ltr; color: var(--vit-ink-2); }
.sf-call i { width: 26px; height: 1px; background: var(--vit-ink); opacity: .55; transform-origin: left center; }
.sf-call b { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--vit-ink); border-radius: 50%; font-family: var(--vit-f-mono); font-size: 9px; font-weight: 500; background: var(--vit-paper); }
/* the axes (1-4, A-B) sit on the sheet's border like grid bubbles */
.sheetframe .axes li { display: grid; place-items: center; min-width: 16px; height: 16px; border: 1px solid var(--vit-ink-3); border-radius: 50%; background: var(--vit-paper); font-size: 9px; }
@media (max-width: 640px) { .sheetframe .axes-y { display: none; } }   /* the side bubbles would sit on the text of a phone-width sheet */

/* a hero sheet: the dense graph paper, and a finer grid that opens under the pointer (draft.js sets --mx / --my) */
#hero > .sheetframe { background-image: linear-gradient(var(--vit-line-faint) 1px, transparent 1px), linear-gradient(90deg, var(--vit-line-faint) 1px, transparent 1px); background-size: 32px 32px; }
.sf-spot { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(var(--vit-line-default) 1px, transparent 1px), linear-gradient(90deg, var(--vit-line-default) 1px, transparent 1px); background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(150px circle at var(--mx, -999px) var(--my, -999px), var(--vit-ink) 0, transparent 100%); mask-image: radial-gradient(150px circle at var(--mx, -999px) var(--my, -999px), var(--vit-ink) 0, transparent 100%); }
#hero > .sheetframe.hov .sf-spot { opacity: .55; }
.sheetframe:not(#x) .sheetframe-body .hero-sheet { position: relative; }

/* ── a section sheet: a dimension mark at the end of the title strip, and a ruling that is laid on as the sheet enters ── */
.ss-strip { position: relative; }
.ss-dim { flex: 1; align-self: center; min-width: 24px; height: 9px; margin-inline-start: var(--vit-space-3); display: block; direction: ltr;
  background: linear-gradient(var(--vit-ink), var(--vit-ink)) center / 100% 1px no-repeat, linear-gradient(var(--vit-ink), var(--vit-ink)) left center / 1px 100% no-repeat, linear-gradient(var(--vit-ink), var(--vit-ink)) right center / 1px 100% no-repeat; opacity: .35; transform-origin: left center; }
.ss-strip::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--vit-clay); opacity: 0; transform-origin: left center; pointer-events: none; }

/* ── the AutoCAD crosshair (draft.js): the whole viewport, a pick box at the pointer, the coordinates; a NORMAL cursor on anything you can use ── */
.cad-x { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .15s; contain: strict; }
.cad-x.on { opacity: 1; }
.cad-x.ui { opacity: 0; }
.cad-x .h, .cad-x .v { position: absolute; left: 0; top: 0; background: var(--vit-ink); opacity: .32; will-change: transform; }
.cad-x .h { width: 100%; height: 1px; transform: translate3d(0, var(--my, -9px), 0); }
.cad-x .v { width: 1px; height: 100%; transform: translate3d(var(--mx, -9px), 0, 0); }
.cad-x .pick { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border: 1.5px solid var(--vit-ink); transform: translate3d(var(--mx, -99px), var(--my, -99px), 0); will-change: transform; }
.cad-x .coord { position: absolute; left: 0; top: 0; padding: 0 5px; font-family: var(--vit-f-mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--vit-ink-2); background: var(--vit-paper); border: 1px solid var(--vit-line-default); direction: ltr; white-space: nowrap; transform: translate3d(calc(var(--mx, -99px) + 14px), calc(var(--my, -99px) + 12px), 0); will-change: transform; }
html.cad-on body { cursor: crosshair; }
html.cad-on a, html.cad-on a *, html.cad-on button, html.cad-on button *, html.cad-on summary, html.cad-on label, html.cad-on select, html.cad-on [role="button"], html.cad-on [data-cta], html.cad-on .cart-btn { cursor: pointer; }
html.cad-on input, html.cad-on textarea, html.cad-on [contenteditable="true"] { cursor: text; }
html.cad-on button:disabled, html.cad-on [aria-disabled="true"], html.cad-on input:disabled { cursor: not-allowed; }
html.cad-on dialog, html.cad-on dialog * { cursor: auto; }
@media print { .cad-x { display: none; } }

/* ── motion: only when allowed. The lines are drawn once on load, and (where the browser has scroll-driven animations) a sheet that enters later is drawn as it enters. ── */
@media (prefers-reduced-motion: no-preference) {
  .sf-inner rect { stroke-dashoffset: 1; animation: draft-draw 1.6s cubic-bezier(.2, .7, .2, 1) .15s forwards; }
  .sf-dim i, .sf-call i { transform: scaleX(0); animation: draft-grow .9s cubic-bezier(.2, .7, .2, 1) .5s forwards; }
  .sf-dim::before, .sf-dim::after, .sf-dim b, .sf-sec, .sf-call b { opacity: 0; animation: draft-pop .4s ease-out .9s forwards; }
  .sf-dim::before, .sf-dim::after { animation-name: draft-pop-line; }
  .sf-ticks { opacity: 0; animation: draft-pop-line .6s linear .3s forwards; }
  .sheetframe .axes li { opacity: 0; animation: draft-pop .4s ease-out .5s forwards; }
  .sheetframe .axes li:nth-child(2) { animation-delay: .6s; } .sheetframe .axes li:nth-child(3) { animation-delay: .7s; } .sheetframe .axes li:nth-child(4) { animation-delay: .8s; }
  .ss-dim { transform: scaleX(0); animation: draft-grow-dim .8s cubic-bezier(.2, .7, .2, 1) .2s forwards; }
  .ss-strip::after { animation: draft-rule 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .sf-spot { transition: opacity .15s; }
  @supports (animation-timeline: view()) {
    /* a sheet that is not on screen at load is drawn as it scrolls in */
    .sheetsec .ss-dim { animation: draft-grow-dim linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .sheetsec .ss-strip::after { animation: draft-rule linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .sheetframe:not(#hero > .sheetframe) .sf-inner rect { animation: draft-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .sheetframe:not(#hero > .sheetframe) .sf-dim i, .sheetframe:not(#hero > .sheetframe) .sf-call i { animation: draft-grow linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
  }
  @keyframes draft-draw { to { stroke-dashoffset: 0; } }
  @keyframes draft-grow { to { transform: scaleX(1); } }
  @keyframes draft-grow-dim { to { transform: scaleX(1); } }
  @keyframes draft-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  @keyframes draft-pop-line { to { opacity: .55; } }
  @keyframes draft-rule { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
}

/* the per-tool hero drawings (R2): the last stroke of each is clay */
.draft path.c { stroke: var(--vit-clay-ink); }