/* Build n Bloom drawing kit. Link fonts.css, tokens.css and parts.css first.
   Object geometry is a composition choice. Materials and type come from the shared tokens. */
:root { --k-fine: var(--line-construction); --k-hair: 0.5px; --k-anatomy: 9px; --k-anatomy-fine: 8px; }

/* Page furniture. Keep ordinary reading text on the seven step scale. */
.k-specimen { margin: 0; background: var(--color-surface-page); }
.k-type *, .k-type *::before, .k-type *::after { box-sizing: border-box; }
.k-type p, .k-type h1, .k-type h2, .k-type h3, .k-type h4, .k-type figure, .k-type blockquote, .k-type dl, .k-type dd, .k-type ol, .k-type ul { margin: 0; }
.k-type ul, .k-type ol { padding: 0; list-style: none; }
.k-type { color: var(--color-text-primary); font-family: var(--p-font-family-working); font-size: var(--type-step-0); line-height: var(--type-leading-0); font-optical-sizing: auto; font-variant-numeric: tabular-nums lining-nums; }
.k-page { width: var(--grid-1440-content-max); margin-inline: auto; --k-bleed: var(--grid-1440-margin); }
.k-masthead { height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: var(--line-construction) solid var(--color-line-construction); }
.k-intro { padding-block: var(--p-space-9) var(--p-space-8); }
.k-intro h1 { margin-top: var(--p-space-3); font-family: var(--p-font-family-display); font-size: var(--type-step-4); line-height: var(--type-leading-4); font-weight: 400; }
.k-intro > p:last-child { margin-top: var(--p-space-5); font-size: var(--type-step-1); line-height: var(--type-leading-1); }
.k-smallcaps, .k-tag { font-family: var(--type-smallcaps-family); font-size: var(--type-smallcaps-size); line-height: var(--type-leading-0); font-weight: var(--type-smallcaps-weight); letter-spacing: var(--type-smallcaps-tracking); font-feature-settings: var(--type-smallcaps-features); }
.k-caption, .k-fiction { font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-tertiary); }
.k-fiction { margin-top: var(--p-space-4) !important; }
.k-region { border-top: var(--line-structure) solid var(--color-line-structure); padding-top: var(--p-space-3); margin-bottom: var(--p-space-9); }
.k-region__head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--space-gutter); margin-bottom: var(--p-space-7); }
.k-region__head h2 { grid-column: 1 / 5; }.k-region__head p { grid-column: 5 / 12; color: var(--color-text-secondary); }
.k-link { color: var(--color-accent-text); text-decoration-thickness: var(--line-construction); text-underline-offset: var(--p-space-1); }
.k-link:focus-visible { outline: var(--p-border-width-focus) solid var(--color-focus-ring); outline-offset: var(--c-focus-offset); }
.k-colophon { border-top: var(--line-construction) solid var(--color-line-construction); padding-block: var(--p-space-4) var(--p-space-7); }
.k-keep { white-space: nowrap; }

/* Three stage treatments. The light has direction; fields are ground, never a card behind every item. */
.k-scene { position: relative; isolation: isolate; }
.k-well { background: var(--light-well), var(--color-surface-well); }
.k-bleed { width: calc(100% + var(--k-bleed)); overflow: hidden; }
.k-desk { background: linear-gradient(115deg,var(--color-paper) 0%,transparent 45%),var(--light-well),var(--color-surface-well); border-radius: 24px 0 0 24px; }
.k-workbench { background: linear-gradient(150deg,transparent 38%,var(--color-paper-under) 58%,transparent 79%),var(--light-well),var(--color-surface-well-deep); }
.k-files { background: linear-gradient(26deg,var(--color-surface-well-deep) 0%,transparent 48%,var(--color-paper) 76%,transparent 96%),var(--light-well),var(--color-surface-well); border-radius: 0 0 0 48px; }
.k-field { position: absolute; z-index: 0; pointer-events: none; }
.k-field--ledger { background: repeating-linear-gradient(to bottom,transparent 0 31px,var(--color-sheet-major) 31px 32px); box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction); }
.k-field--fine { width: 100%; height: 100%; }
.k-field--fine path { fill: none; stroke: var(--color-sheet-minor); stroke-width: var(--k-fine); }
.k-field--fine .k-cross { stroke: var(--color-sheet-cross); stroke-width: var(--k-fine); }
.k-field--file { background: repeating-linear-gradient(to right,transparent 0 127px,var(--color-sheet-major) 127px 128px); box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-register-corner { position: absolute; width: 12px; height: 12px; border: 0; box-shadow: inset var(--k-hair) var(--k-hair) 0 var(--color-text-tertiary); }

/* Two document scales. Change the class, never transform a desktop document to make a phone version. */
.k-doc--object { --k-body-size: 9px; --k-body-leading: 12px; --k-title-size: 11px; --k-title-leading: 16px; --k-key-size: 11px; --k-key-leading: 16px; --k-pad: var(--p-space-4); }
.k-doc--read { --k-body-size: 11px; --k-body-leading: 16px; --k-title-size: var(--type-step-3); --k-title-leading: var(--type-leading-3); --k-key-size: var(--type-step-0); --k-key-leading: var(--type-leading-0); --k-pad: var(--p-space-5); }
[data-object-drawing] { font-size: var(--k-body-size,9px); line-height: var(--k-body-leading,12px); }
.k-doc-title { font: 400 var(--k-title-size)/var(--k-title-leading) var(--p-font-family-display); margin-top: var(--p-space-2) !important; }
.k-key { font-size: var(--k-key-size); line-height: var(--k-key-leading); color: var(--color-text-primary); }
.k-fine { font-size: var(--k-anatomy-fine); line-height: 11px; color: var(--color-text-tertiary); }
.k-figure { font-weight: 600; color: var(--color-text-primary); font-feature-settings: var(--type-figures-tabular); white-space: nowrap; }
.k-muted, .k-doc-subtitle { color: var(--color-text-secondary); }
.k-doc-subtitle { margin-top: var(--p-space-1) !important; }
[data-object-drawing] .k-smallcaps { font-size: var(--k-body-size,9px); line-height: var(--k-body-leading,12px); }

/* Paper and its stock. Ground, paper, paper being read are the only elevations. */
.k-paper { position: relative; background: var(--k-stock,var(--color-paper)); border: 0; border-radius: var(--radius-paper); box-shadow: var(--elevation-paper); }
.k-read { box-shadow: var(--elevation-paper-read); }
.k-stock-letter { --k-stock: var(--color-paper); }.k-stock-register { --k-stock: var(--color-paper-under); }.k-stock-cover { --k-stock: var(--color-surface-raised); }.k-stock-thin { --k-stock: var(--color-archive-under); }
.k-body { padding: var(--k-pad); position: relative; }
.k-letterhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--p-space-2); padding-bottom: var(--p-space-2);  font-family: var(--p-font-family-display); line-height: 12px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-doc--object .k-letterhead { font-size: 8px; line-height: 11px; }
.k-doc--object .k-letterhead > span:last-child { font-size: 7px; }
.k-letterhead > span:last-child { font-family: var(--p-font-family-working); color: var(--color-text-tertiary); font-size: var(--k-anatomy-fine); }
.k-stack { isolation: isolate; }
.k-paper.k-stack { background: transparent; box-shadow: none; }
.k-paper.k-stack > .k-body { height: 100%; background: var(--k-stock,var(--color-paper)); border-radius: var(--radius-paper); box-shadow: var(--elevation-paper); }
.k-paper.k-stack.k-read > .k-body { box-shadow: var(--elevation-paper-read); }
.k-stack::before, .k-stack::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--color-paper-under); border-radius: var(--radius-paper); box-shadow: var(--elevation-paper); }
.k-stack::before { transform: translate(-12px,-12px); }.k-stack::after { transform: translate(-6px,-6px); }
.k-cover { display: none; }.k-closed .k-detail { display: none; }.k-closed .k-cover { display: block; margin-top: var(--p-space-5); padding-top: var(--p-space-3); border-top: var(--line-structure) solid var(--color-line-structure); }
.k-cover p + p { margin-top: var(--p-space-2); }
.k-folio { position: relative; }.k-folio > .k-paper, .k-folio > .k-inbox, .k-folio > .k-receipt, .k-folio > .k-folder { height: 100%; }

/* Registers are filled records. Figures have their own column and stronger ink. Omit an unsupported column. */
.k-register { border-collapse: collapse; width: 100%; margin-top: var(--p-space-3); table-layout: fixed; font-size: inherit; line-height: inherit; }
.k-register th { font-weight: 400; text-align: left; color: var(--color-text-secondary); border-bottom: var(--line-construction) solid var(--color-line-structure); padding: 5px var(--p-space-1); }
.k-register td { padding: 7px var(--p-space-1); vertical-align: top; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-register th:first-child, .k-register td:first-child { padding-left: 0; }.k-register th:last-child, .k-register td:last-child { padding-right: 0; }
.k-register td strong { font-weight: 500; display: block; color: var(--color-text-primary); }.k-register td small { font-size: var(--k-anatomy-fine); line-height: 11px; display: block; margin-top: 3px; color: var(--color-text-secondary); }
.k-pack .k-register th:last-child { width: 28px; }
.k-backlog .k-register th:first-child { width: 22px; }
.k-statement .k-register th:last-child { width: 60px; }
.k-quote .k-register th:last-child, .k-invoice .k-register th:last-child { width: 96px; text-align: right; }
.k-quote .k-register td:last-child, .k-invoice .k-register td:last-child, .k-folder__leaf--quote .k-register td:last-child { text-align: right; }
.k-receipt .k-register th:last-child { width: 16px; }
.k-register td[colspan] { text-align: left !important; }
.k-folder__leaf--quote .k-register th:last-child { width: 62px; }
.k-doc--object .k-register th { padding-block: 3px; }
.k-doc--object .k-register td { padding-block: var(--p-space-1); }
.k-register__mark { width: 26px; text-align: right !important; }.k-register__number { width: 22px; }.k-register__amount { width: 84px; text-align: right !important; }
.k-footline { display: flex; justify-content: space-between; gap: var(--p-space-2); border-top: var(--line-structure) solid var(--color-line-structure); padding-top: var(--p-space-2); margin-top: var(--p-space-3) !important; }
.k-footline small { font-size: var(--k-anatomy-fine); font-weight: 400; }
.k-inline-person { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.k-inline-person::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--color-text-primary); }
.k-tick { display: inline-block; width: 12px; height: 12px; stroke: currentColor; stroke-width: var(--line-structure); fill: none; vertical-align: middle; }
/* A table mark uses the column's edge; a cover mark shares the first line of its words. */
.k-register td > .k-tick, .k-register th > .k-tick { display: block; margin-inline-start: auto; }
.k-test .k-register td > .k-tick { margin-inline: auto; }
.k-cover p:has(> .k-tick) { display: flex; align-items: flex-start; gap: var(--p-space-1); }
.k-open-mark { display: inline-block; width: 8px; height: 8px; border: var(--line-construction) solid var(--color-text-tertiary); border-radius: 50%; }

/* Letterhead note. Prompts and sourced findings form pairs, with an author line below. */
.k-date { display: flex; justify-content: space-between; padding-block: var(--p-space-2); box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-note .k-body { padding: var(--p-space-3); }
.k-note .k-date { padding-block: var(--p-space-1); }
.k-note__fields > div { display: grid; grid-template-columns: 80px 1fr; gap: var(--p-space-2); padding-block: 6px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-note__fields dt { font-size: 7px; line-height: 10px; font-family: var(--p-font-family-display); color: var(--color-text-tertiary); }
.k-note__fields dd { font-size: 8px; line-height: 11px; }.k-note__keep { margin-top: var(--p-space-2) !important; }
.k-signature { border-top: var(--line-structure) solid var(--color-line-structure); padding-top: var(--p-space-3); margin-top: var(--p-space-4) !important; }

/* Bound pack. A real spine, fastenings and horizontal index tabs sit outside the cover. */
.k-pack .k-body { padding-left: calc(var(--k-pad) + var(--p-space-5)); }
.k-pack__spine { position: absolute; inset: 0 auto 0 0; width: 20px; background: var(--color-text-primary); border-radius: var(--radius-paper) 0 0 var(--radius-paper); display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.k-pack__spine i { height: 24px; width: 6px;  border-radius: var(--radius-paper); box-shadow: inset 0 0 0 var(--k-hair) var(--color-paper); }
.k-tabs { position: absolute; top: 72px; right: -54px; display: grid; gap: 6px; }
.k-tabs span { background: var(--color-paper-under); color: var(--color-text-secondary); border-radius: 0 var(--radius-paper) var(--radius-paper) 0; width: 54px; padding: var(--p-space-2) 5px; font-size: 8px; line-height: 11px; box-shadow: var(--elevation-paper); }
.k-pack__job { margin-top: var(--p-space-4); padding-block: var(--p-space-3); box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-pack .k-register { margin-top: var(--p-space-2); font-size: 9px; line-height: 12px; }.k-pack .k-register th { padding-block: 3px; }.k-pack .k-register td { padding-block: var(--p-space-1); }

/* Period register and roadmap. A roadmap has staggered filled runs across phases, not weekdays. */
.k-statement { --k-body-size: 8px; --k-body-leading: 11px; --k-pad: var(--p-space-3); }
.k-statement .k-register { margin-top: var(--p-space-2); }
.k-statement .k-footline { margin-top: var(--p-space-2) !important; padding-top: 6px; }
.k-period { display: flex; justify-content: space-between;  padding-block: 3px; margin-top: var(--p-space-2); color: var(--color-text-tertiary); font-size: 8px; line-height: 10px; box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-roadmap { --k-pad: var(--p-space-3); }
.k-roadmap .k-footline { margin-top: var(--p-space-3) !important; padding-top: var(--p-space-1); }
.k-roadmap__axis { display: grid; grid-template-columns: 110px repeat(5,1fr); margin-top: var(--p-space-3); border-bottom: var(--line-construction) solid var(--color-text-tertiary); color: var(--color-text-secondary); }
.k-roadmap__axis > span { padding: 0 0 5px var(--p-space-1); box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction); }
.k-roadmap__runs { position: relative; padding-top: 6px; }
.k-roadmap__run { display: grid; grid-template-columns: 110px repeat(5,1fr); align-items: center; min-height: 30px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-roadmap__run > span:first-child { padding-right: 10px; font-size: 9px; }
.k-roadmap__bar { grid-column: var(--k-start) / span var(--k-span); height: 14px; background: var(--color-text-secondary); position: relative; }
.k-roadmap__bar::after { content: ''; position: absolute; inset: 4px 6px; box-shadow: inset 0 var(--k-hair) 0 var(--color-paper-under); }
.k-roadmap__bar--quiet { background: var(--color-line-ui); }.k-roadmap__now { position: absolute; top: -23px; bottom: -10px; left: calc(110px + (100% - 110px) / 5); width: var(--line-structure); background: var(--color-text-primary); }
.k-roadmap__now span { position: absolute; top: -15px; left: 4px; background: var(--k-stock); font-size: 8px; line-height: 12px; }

/* Clip and week. Backlogs omit estimates until sourced; a week contains work and named reviewers. */
.k-backlog { --k-pad: var(--p-space-3); }
.k-backlog .k-register { margin-top: var(--p-space-2); }
.k-backlog__clip { position: absolute; top: -8px; left: 24px; height: 12px; width: 48px; border-radius: var(--radius-paper); background: var(--color-text-secondary); }
.k-backlog__clip::after { content: ''; position: absolute; inset: 3px 8px; box-shadow: inset 0 var(--k-hair) 0 var(--color-paper); }
.k-week .k-body, .k-folder__leaf--week .k-body { padding: var(--p-space-3); }
.k-week__table { border-collapse: collapse; width: 100%; table-layout: fixed; margin-top: var(--p-space-2); font-size: 7px; line-height: 9px; }
.k-week__table th { text-align: left; font-weight: 400; padding: 3px; border-bottom: var(--line-construction) solid var(--color-text-secondary); }
.k-week__table td { vertical-align: top; padding: 3px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-week__table th + th { box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction); }
.k-week__table td + td { box-shadow: inset var(--k-hair) 0 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-week__table .k-inline-person { gap: 3px; font-size: 8px; }.k-week__table .k-inline-person::before { width: 4px; height: 4px; }

/* Test sheet. Ordinary and bad day cases retain expected, actual and pass columns. */
.k-test__case { width: 19%; }.k-test__expected { width: 34%; }.k-test__actual { width: 35%; }.k-test__pass { width: 12%; }
.k-test__group th { font-family: var(--p-font-family-display);  padding-top: 6px; color: var(--color-text-primary); box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-test .k-register td { padding: var(--p-space-1); box-shadow: inset calc(-1 * var(--k-hair)) 0 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }.k-test .k-register td:last-child { box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); text-align: center; }

/* Business papers. Select the entire price line with ink. Amounts never become a second caption. */
.k-selected { outline: var(--line-structure) solid var(--color-text-primary); outline-offset: -1px; }
.k-price-list .k-register { margin-top: var(--p-space-2); }.k-price-list .k-register th { height: 20px; padding-block: 0; }.k-price-list .k-register td { height: 22px; padding-block: var(--p-space-1); }
.k-price-list .k-register td:first-child { padding-left: 6px; }.k-price-list .k-register__amount { width: 62px; }
.k-quote .k-footline, .k-invoice .k-footline { align-items: baseline; }.k-quote .k-footline .k-figure, .k-invoice .k-footline .k-figure { font-size: var(--k-key-size); line-height: var(--k-key-leading); }
.k-clause { display: grid; grid-template-columns: 24px 1fr; gap: var(--p-space-2); margin-top: var(--p-space-4); padding-top: var(--p-space-2); border-top: var(--line-structure) solid var(--color-text-secondary); }
.k-cite-pin { transform: translateY(-50%); position: absolute; left: 0; width: 16px; border-top: var(--line-structure) solid var(--color-text-secondary); }
.k-cite-pin--right { left: auto; right: 0; }
.k-receipt { position: relative; isolation: isolate; }
.k-receipt.k-read { box-shadow: none; }.k-receipt.k-read::before { box-shadow: var(--elevation-paper-read); }
.k-receipt::before { content: ''; position: absolute; inset: 0 0 8px; background: var(--k-stock,var(--color-paper-under)); border-radius: var(--radius-paper); box-shadow: var(--elevation-paper); z-index: -1; }
.k-receipt::after { content: ''; position: absolute; height: 16px; bottom: 0; left: 0; right: 0; background: var(--k-stock,var(--color-paper-under)); clip-path: polygon(0 0,100% 0,100% 50%,95% 100%,90% 50%,85% 100%,80% 50%,75% 100%,70% 50%,65% 100%,60% 50%,55% 100%,50% 50%,45% 100%,40% 50%,35% 100%,30% 50%,25% 100%,20% 50%,15% 100%,10% 50%,5% 100%,0 50%); z-index: -1; }
.k-receipt__perforation { border-top: var(--k-fine) dashed var(--color-text-tertiary); margin: var(--p-space-1) 0 10px; }
.k-variation::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-line-ui) 55%%, transparent) 0 3px, transparent 3px 6px); }

/* Folder. Three genuine documents fan out of a shallow cardstock pocket. Text is not clipped by the shell. */
.k-folder { position: relative; isolation: isolate; }
.k-folder.k-read { box-shadow: none; }.k-folder.k-read .k-folder__back { box-shadow: var(--elevation-paper-read); }
.k-folder.k-closed .k-folder__leaf { display: none; }.k-folder.k-closed .k-folder__pocket { height: calc(100% - 40px); display: flex; flex-direction: column; justify-content: flex-end; }
.k-folder__back { position: absolute; inset: 40px 0 0; border-radius: var(--radius-paper); background: var(--color-line-hairline); box-shadow: var(--elevation-paper); }
.k-folder__tab { position: absolute; left: 18px; top: 18px; height: 28px; padding: 7px var(--p-space-4); background: var(--color-line-hairline); border-radius: 8px 16px 0 0; font-weight: 500; }
.k-folder__leaf { position: absolute; width: 198px; height: 268px; transform-origin: bottom center; }
.k-folder__leaf--quote { left: 30px; top: 52px; transform: rotate(-8deg); }
.k-folder__leaf--variation { left: 196px; top: 28px; transform: rotate(6deg); width: 208px; height: 224px; }
.k-folder__leaf--week { left: 226px; top: 120px; transform: rotate(-3deg); width: 246px; height: 202px; }
/* Rotated papers: a 0.5 px inset light breaks into dashes at 1x once rotated, so inside anything rotated the fine
   rules are a continuous 1 px rule in a quieter ink. Put k-rotated on any rotated paper; folder leaves have it built in. */
.k-folder__leaf, .k-rotated { --k-hair: var(--line-construction); --color-line-construction: var(--k-mat-shade-090); --k-ink-rule: var(--k-mat-shade-060); }
/* The fan keeps finish-5's leaves and contents; covers are placed so their edges and the pocket lip fall in row gaps. */
.k-folder__leaf--quote .k-register td, .k-folder__leaf .k-letterhead > * { white-space: nowrap; }
.k-folder__leaf--week .k-letterhead > span:last-child { margin-right: 28px; }
.k-folder__pocket { position: absolute; inset: auto 0 0; height: 144px; background: linear-gradient(112deg,transparent,var(--color-paper-under)),var(--color-surface-well-deep); border-radius: 0 var(--radius-paper) var(--radius-paper) var(--radius-paper); box-shadow: var(--elevation-paper); padding: var(--p-space-5); }
.k-folder__pocket::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--color-surface-well-deep); clip-path: polygon(0 0,35% 0,39% 100%,100% 100%,100% 100%,0 100%); transform: translateY(-11px); }
.k-folder__index { display: flex; gap: var(--p-space-4); margin-top: var(--p-space-3);  padding-top: var(--p-space-2); font-size: 8px; box-shadow: inset 0 var(--k-hair) 0 var(--color-line-ui); }
.k-folder__index span + span {  padding-left: var(--p-space-4); box-shadow: inset var(--k-hair) 0 0 var(--color-line-ui); }

/* Inbox. The selected enquiry sits among the sourced outgoing quote and its follow up. */
.k-inbox { background: var(--color-paper); border: var(--line-construction) solid var(--color-text-secondary); border-radius: var(--radius-instrument); }
.k-inbox.k-read { box-shadow: none; }
.k-inbox.k-closed .k-inbox__list, .k-inbox.k-closed .k-inbox__meta, .k-inbox.k-closed .k-inbox__ask, .k-inbox.k-closed footer { display: none; }
.k-inbox.k-closed .k-inbox__panes { display: block; }
.k-inbox__bar { padding: 7px var(--p-space-3); background: var(--color-surface-well); border-radius: 7px 7px 0 0; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-inbox__panes { display: grid; grid-template-columns: 108px 1fr; }
.k-inbox__list { background: var(--color-surface-raised); box-shadow: inset calc(-1 * var(--k-hair)) 0 0 var(--color-line-construction); }
.k-inbox__row { padding: 10px var(--p-space-2);  font-size: 8px; line-height: 11px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }.k-inbox__row strong, .k-inbox__row time { display: block; }.k-inbox__row time { color: var(--color-text-tertiary); margin-top: 3px; }
.k-inbox__selected { background: var(--color-paper-under); box-shadow: inset 2px 0 var(--color-text-primary); }
.k-inbox__message { padding: var(--p-space-2) 14px; }.k-inbox__message .k-doc-title { margin-top: 0 !important; }.k-inbox__meta { margin-top: 6px !important; font-size: 8px; line-height: 11px; color: var(--color-text-secondary); }
.k-inbox__ask { margin-top: var(--p-space-2); padding-block: var(--p-space-2); box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-inbox__message footer { font-size: 8px; line-height: 11px; margin-top: var(--p-space-2); }

/* Instrument. One dark face over paper, lit by a masked material edge rather than a perimeter rule. */
.k-instrument { background: var(--color-instrument),var(--color-paper); color: var(--p-color-neutral-50); border: 0; border-radius: var(--radius-instrument); box-shadow: var(--elevation-paper-read); padding: var(--p-space-5); }
.k-instrument::before { content: ''; position: absolute; inset: 0; padding: var(--line-construction); border-radius: inherit; background: var(--edge-instrument); mask: linear-gradient(var(--color-paper) 0 0) content-box,linear-gradient(var(--color-paper) 0 0); mask-composite: exclude; pointer-events: none; }
.k-instrument__header { display: flex; align-items: center; justify-content: space-between; height: 28px; gap: var(--p-space-3); }
.k-instrument__header h3 { font: 400 var(--type-step-1)/var(--type-leading-1) var(--p-font-family-display); }
.k-meter { display: flex; align-items: center; gap: 5px; }.k-meter i { width: 5px; height: 5px; background: var(--color-line-ui); }.k-meter i:last-child { background: var(--color-paper); outline: var(--k-fine) solid var(--color-paper-under); outline-offset: 2px; }
.k-instrument__plan { margin-top: var(--p-space-2) !important; height: 24px; font-size: 11px; line-height: var(--type-leading-minus-1); color: var(--p-color-neutral-200); }
.k-steps { margin-top: var(--p-space-3) !important; }
.k-step { display: grid; grid-template-columns: 10px 56px 1fr; align-items: start; gap: 10px; position: relative; padding-top: var(--p-space-2); font-size: 11px; line-height: 14px; border-top: var(--k-fine) solid var(--color-line-ui); height: 44px; }
.k-step--finds, .k-step--checks { height: 60px; }.k-step__state { width: 7px; height: 7px; margin-top: 3px; border: var(--k-fine) solid var(--p-color-neutral-200); }
.k-step--passed .k-step__state { background: var(--p-color-neutral-200); }.k-step--current .k-step__state { background: var(--color-paper); }
.k-step__verb { font-weight: 500; }.k-step__value { color: var(--p-color-neutral-200); }.k-step__value strong { color: var(--p-color-neutral-50); font-weight: 500; }
.k-step__port { transform: translateY(-50%); position: absolute; right: -24px; top: 22px; width: 12px; border-top: var(--line-structure) solid var(--p-color-neutral-200); }
.k-step--finds .k-step__port, .k-step--checks .k-step__port { top: 30px; }
.k-step--drafts .k-step__port { right: auto; left: -24px; }
.k-readout { border-top: var(--k-fine) solid var(--p-color-neutral-200); margin-top: var(--p-space-3) !important; padding-top: var(--p-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-3); font-size: 11px; line-height: var(--type-leading-minus-1); }
.k-readout strong { color: var(--color-paper); font-weight: 500; }.k-readout span { color: var(--p-color-neutral-200); }
.k-wires { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }
.k-wire { stroke: var(--color-text-secondary); stroke-width: var(--line-structure); fill: none; vector-effect: non-scaling-stroke; }
.k-wire-label { font-size: 8px; fill: var(--color-text-secondary); }

/* Permission cells. Source, scoped credential, approval gate and sealed stock have different anatomy. */
.k-permission { position: absolute; }
.k-permission__cells { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: var(--p-space-3); }
.k-permission__cell { position: relative; min-height: 142px; padding: var(--p-space-3); background: var(--color-surface-raised); }
.k-permission__cell h4 { font: 500 9px/12px var(--p-font-family-working); margin-bottom: var(--p-space-2); }
.k-permission__drawing { height: 40px; margin-bottom: var(--p-space-2); position: relative; }
.k-permission__drawing.k-permission__source { height: 48px; margin-bottom: var(--p-space-3); }
.k-permission__source { background: var(--color-paper); transform: rotate(-4deg); box-shadow: var(--elevation-paper); padding: var(--p-space-1) var(--p-space-2); }
.k-permission__source::before { content: ''; position: absolute; width: 6px; height: 6px; background: var(--color-route); right: 6px; top: 5px; }
.k-permission__source p {  font-size: 8px; line-height: 12px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-permission__credential {  border-radius: 4px; display: flex; align-items: center; gap: 10px; padding: 6px; box-shadow: inset 0 0 0 var(--k-hair) var(--color-text-tertiary); }
.k-permission__credential i { width: 12px; height: 22px; border: var(--line-structure) solid var(--color-text-secondary); border-radius: 6px 6px 2px 2px; }
.k-permission__gate { border-inline: var(--line-structure) solid var(--color-text-secondary); display: flex; align-items: center; justify-content: center; }
.k-permission__gate::before, .k-permission__gate::after { content: ''; position: absolute; top: 5px; bottom: 5px; width: 5px; border-block: var(--line-structure) solid var(--color-text-secondary); }.k-permission__gate::before { left: 0; }.k-permission__gate::after { right: 0; }
.k-permission__cell--sealed { background: var(--color-surface-well-deep); }.k-permission__sealed { display: flex; align-items: center; gap: var(--p-space-2); box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-text-tertiary); }
.k-permission__cell p + p { margin-top: var(--p-space-1); }
.k-permission__drawing.k-permission__source p + p { margin-top: 0; }

/* Glass. A lit upper edge and a restrained reflection reveal the field beneath, with no drawn perimeter. */
.k-glass { position: relative; background: linear-gradient(125deg,var(--color-paper) 0%,transparent 40%,var(--color-glass) 82%),var(--color-glass); border: 0; border-radius: var(--radius-instrument); padding: var(--p-space-5); color: var(--color-text-secondary); box-shadow: var(--shadow-glass-edge); }
.k-glass__edge { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg,var(--color-paper),transparent 42%,var(--color-glass-border)); mask: linear-gradient(var(--color-paper) 0 0) content-box,linear-gradient(var(--color-paper) 0 0); padding: var(--line-construction); mask-composite: exclude; }
.k-glass p + p { margin-top: var(--p-space-2); }.k-glass .k-tag {  display: inline-block; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-text-tertiary); }

/* Route, station and named stop. A label occupies a real gap in the route. Branches approach away from their words. */
.k-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.k-route__line { fill: none; stroke: var(--color-route); stroke-width: var(--line-route); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.k-station { fill: var(--color-route); stroke: var(--color-paper-under); stroke-width: var(--k-fine); }.k-station--passed { fill: var(--color-surface-page); stroke: var(--color-route); stroke-width: var(--line-construction); }
.k-route__name { position: absolute; z-index: 2; font: 400 var(--type-step-1)/var(--type-leading-1) var(--p-font-family-display); }
.k-question { fill: var(--color-surface-page); stroke: var(--color-route); stroke-width: var(--line-structure); }
.k-person { display: grid; grid-template-columns: 12px auto; column-gap: 10px; align-items: center; }
.k-person__square { width: 12px; height: 12px; background: var(--color-text-primary); }.k-person__name { font: 400 var(--type-step-1)/var(--type-leading-1) var(--p-font-family-display); }.k-person__role { grid-column: 2; font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }
.k-placement { position: absolute; z-index: 3; }
.k-route--phone, .k-wires--phone { display: none; }

/* Marks and figure. Small ink drawings carry a word; the margin figure shows an actual source and its path. */
.k-verdict { display: inline-flex; align-items: center; gap: var(--p-space-3); }.k-mark { width: var(--size-mark); height: var(--size-mark); fill: var(--color-text-primary); }.k-mark--build { fill: var(--color-route); }.k-mark__outline { fill: none; stroke: var(--color-text-primary); stroke-width: var(--line-structure); }
.k-note-mark { width: 18px; height: 22px; fill: var(--color-paper-under); stroke: var(--color-text-secondary); stroke-width: var(--line-construction); }
.k-rule-mark { display: inline-block; width: 14px; height: 14px; border: solid var(--color-route); border-width: var(--line-route) 0 var(--line-route) var(--line-route); }
.k-seal__glyph { width: 24px; height: 24px; stroke: currentColor; stroke-width: var(--line-structure); fill: none; }
.k-mark-wall { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--p-space-7) var(--p-space-5); }
.k-mark-list { grid-column: 1 / 6; }.k-mark-list li { padding-block: var(--p-space-4); border-bottom: var(--line-construction) solid var(--color-line-construction); }.k-mark-list li:first-child { padding-top: 0; }.k-mark-list p { margin: var(--p-space-2) 0 0 22px; color: var(--color-text-secondary); }
.k-review { grid-column: 6 / 12; padding-top: var(--p-space-4); }.k-review blockquote { font: 400 var(--type-step-2)/var(--type-leading-2) var(--p-font-family-display); }.k-review figcaption { margin-top: var(--p-space-5); padding-top: var(--p-space-4); border-top: var(--line-construction) solid var(--color-line-construction); }.k-review__context { font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); margin-top: var(--p-space-2) !important; color: var(--color-text-secondary); }
.k-margin-figure { grid-column: 1 / 5; max-width: 432px; border-top: var(--line-construction) solid var(--color-line-construction); padding-top: var(--p-space-3); }.k-margin-figure figcaption { font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); margin-top: var(--p-space-4); color: var(--color-text-tertiary); }
.k-figure-scene { width: 358px; max-width: 100%; height: 184px; position: relative; margin-top: var(--p-space-4); }.k-figure-source { position: absolute; left: 16px; top: 18px; width: 172px; padding: var(--p-space-3); }.k-figure-source p { margin-top: var(--p-space-2); }.k-figure-source .k-selected { padding: var(--p-space-1); }
.k-figure-stop { position: absolute; left: 222px; top: 124px; }.k-figure-stop .k-person__name { font-size: var(--type-step-0); line-height: var(--type-leading-0); }.k-figure-stop .k-person__role { font-size: var(--type-step-minus-1); white-space: nowrap; }
.k-figure-source, .k-figure-stop { z-index: 3; }
.k-figure-source .k-selected b { margin-right: var(--p-space-1); }
.k-station-key { display: flex; gap: var(--p-space-5); margin-top: var(--p-space-2); font-size: var(--type-step-minus-1); }.k-station-key span { display: inline-flex; align-items: center; gap: var(--p-space-2); }.k-station-key svg { width: 14px; height: 14px; }
.k-pulled-line { grid-column: 6 / 12; font: 400 var(--type-step-3)/var(--type-leading-3) var(--p-font-family-display); }
.k-mark-register { grid-column: 1 / 12; display: flex; flex-wrap: wrap; gap: var(--p-space-5) 40px; border-top: var(--line-construction) solid var(--color-line-construction); padding-top: var(--p-space-5); }.k-mark-register > div { display: flex; align-items: center; gap: var(--p-space-3); }

/* Proposed tokens. Owned by the token file once accepted; declared here so the kit works today.
   Grain is a rasterised SVG noise of laid fibre, painted once and cached. No grain or material carries blue.
   --k-lx is the horizontal reach of a shadow away from the stage light: 1 falls right, -1 falls left. */
:root {
 --k-grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0 0.13 0.12 0 0 0 -0.055'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url%28%23n%29'/%3E%3C/svg%3E");
 --k-grain-cover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.38 .62' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.15 0 0 0 0 0.12 0.22 0 0 0 -0.09'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url%28%23n%29'/%3E%3C/svg%3E");
 --k-grain-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.15 0 0 0 0 0.15 0.14 0 0 0 -0.06'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url%28%23n%29'/%3E%3C/svg%3E");
 --k-grain-ground: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0 0.1 0.22 0 0 0 -0.09'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url%28%23n%29'/%3E%3C/svg%3E");
 --k-grain-instrument: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.96 0 0 0 0 0.95 0.2 0 0 0 -0.08'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23n%29'/%3E%3C/svg%3E");
 --k-grain-stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3 1.05' numOctaves='2' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 7.0 0 0 0 -2.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23n%29'/%3E%3C/svg%3E");
 --k-ink-pen: var(--k-mat-pen-ink);
 --k-ink-stamp: var(--k-mat-stamp-ink);
 --k-ink-rule: var(--k-mat-shade-090);
 --k-cut-edge: var(--k-mat-shade-200);
 --k-cut-face: color-mix(in srgb, var(--color-surface-well-deep) 70%, var(--color-text-tertiary));
 --k-cut-light: var(--k-mat-light-850);
 --k-leaf: color-mix(in srgb, var(--color-paper-under) 60%, var(--color-paper));
 --k-leaf-edge: var(--k-mat-shade-170);
 --k-stock-cover: color-mix(in srgb, var(--color-paper-under) 55%, var(--color-surface-well));
 --k-lx: 0;
}
:root, .k-scene, .k-figure-scene, .k-mark-wall {
 /* Three heights, one recipe each, turned away from the stage light by --k-lx.
    base: the tight dark contact at the foot of anything lifted. contact: the short reach of paper.
    reach: the long soft reach of the sheet being read. far: the instrument's extra height. */
 --k-sh-none: 0 0 transparent;
 --k-sh-base: calc(var(--k-lx) * 0.5px) 1px 1px var(--k-mat-shade-260), calc(var(--k-lx) * 1px) 2px 3px -1px var(--k-mat-shade-200);
 --k-sh-contact: calc(var(--k-lx) * 4px) 6px 10px -4px var(--k-mat-shade-200), calc(var(--k-lx) * 10px) 14px 24px -12px var(--k-mat-shade-180);
 --k-sh-reach: calc(var(--k-lx) * 8px) 12px 18px -6px var(--k-mat-shade-200), calc(var(--k-lx) * 26px) 36px 56px -16px var(--k-mat-shade-360), calc(var(--k-lx) * 48px) 64px 90px -36px var(--k-mat-shade-200);
 --k-sh-far: calc(var(--k-lx) * 40px) 78px 110px -34px var(--k-mat-shade-400);
 --k-drop-paper: drop-shadow(calc(var(--k-lx) * 0.5px) 1px 1px var(--k-mat-shade-300)) drop-shadow(calc(var(--k-lx) * 5px) 8px 7px var(--k-mat-shade-160));
}

/* Material colours. Proposed tokens: every colour a material uses, derived from the palette (ink, paper,
   neutral 50, the archive stock) at an alpha or as a mix. Each line names the objects that use it. */
:root {
 --k-mat-deep-180: color-mix(in srgb, var(--color-text-primary) 20.2%, transparent); /* .k-step__state::after */
 --k-mat-deep-200: color-mix(in srgb, var(--color-text-primary) 22.4%, transparent); /* .k-step--passed .k-step__state::after */
 --k-mat-deep-620: color-mix(in srgb, var(--color-text-primary) 69.4%, transparent); /* .k-step, .k-readout */
 --k-mat-deep-750: color-mix(in srgb, var(--color-text-primary) 84%, transparent); /* .k-step__state, .k-meter i */
 --k-mat-grey-014: color-mix(in srgb, var(--color-text-primary) 100%, var(--color-paper)); /* .k-pack__spine */
 --k-mat-grey-018: color-mix(in srgb, var(--color-text-primary) 100%, var(--color-paper)); /* .k-pack__spine */
 --k-mat-grey-027: color-mix(in srgb, var(--color-text-primary) 100%, var(--color-paper)); /* .k-pack__spine */
 --k-mat-grey-037: color-mix(in srgb, var(--color-text-primary) 95%, var(--color-paper)); /* .k-backlog__clip */
 --k-mat-grey-043: color-mix(in srgb, var(--color-text-primary) 93%, var(--color-paper)); /* .k-step__state, .k-step--passed .k-step__state, .k-meter i */
 --k-mat-grey-044: color-mix(in srgb, var(--color-text-primary) 92%, var(--color-paper)); /* .k-pack__spine */
 --k-mat-grey-058: color-mix(in srgb, var(--color-text-primary) 86%, var(--color-paper)); /* .k-backlog__clip, .k-backlog::before */
 --k-mat-grey-108: color-mix(in srgb, var(--color-text-primary) 64%, var(--color-paper)); /* .k-backlog__clip */
 --k-mat-grey-148: color-mix(in srgb, var(--color-text-primary) 47%, var(--color-paper)); /* .k-meter i::after */
 --k-mat-grey-155: color-mix(in srgb, var(--color-text-primary) 44%, var(--color-paper)); /* .k-step--passed .k-step__state::after */
 --k-mat-grey-183: color-mix(in srgb, var(--color-text-primary) 31%, var(--color-paper)); /* .k-step__state::after */
 --k-mat-grey-187: color-mix(in srgb, var(--color-text-primary) 30%, var(--color-paper)); /* .k-meter i:last-child::after */
 --k-mat-grey-199: color-mix(in srgb, var(--color-text-primary) 24%, var(--color-paper)); /* .k-meter i::after */
 --k-mat-grey-205: color-mix(in srgb, var(--color-text-primary) 22%, var(--color-paper)); /* .k-step--passed .k-step__state::after */
 --k-mat-grey-229: color-mix(in srgb, var(--color-text-primary) 11%, var(--color-paper)); /* .k-step__state::after */
 --k-mat-grey-232: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-paper)); /* .k-meter i:last-child::after */
 --k-mat-light: var(--color-paper); /* full light on the glass edge and pips */
 --k-mat-light-000: color-mix(in srgb, var(--color-paper) 0%, transparent); /* .k-well, .k-glass .k-glass__edge */
 --k-mat-light-030: color-mix(in srgb, var(--color-paper) 3%, transparent); /* .k-glass, .k-files .k-glass */
 --k-mat-light-060: color-mix(in srgb, var(--color-paper) 6%, transparent); /* .k-pack__spine, .k-glass::before */
 --k-mat-light-070: color-mix(in srgb, var(--color-paper) 7%, transparent); /* .k-step */
 --k-mat-light-080: color-mix(in srgb, var(--color-paper) 8%, transparent); /* .k-readout, .k-step__state, .k-meter i */
 --k-mat-light-120: color-mix(in srgb, var(--color-paper) 12%, transparent); /* .k-glass, .k-files .k-glass */
 --k-mat-light-160: color-mix(in srgb, var(--color-paper) 16%, transparent); /* .k-well, .k-glass::before */
 --k-mat-light-300: color-mix(in srgb, var(--color-paper) 30%, transparent); /* .k-glass, .k-files .k-glass */
 --k-mat-light-350: color-mix(in srgb, var(--color-paper) 35%, transparent); /* .k-glass::before, .k-backlog__clip::after */
 --k-mat-light-520: color-mix(in srgb, var(--color-paper) 52%, transparent); /* .k-well */
 --k-mat-light-550: color-mix(in srgb, var(--color-paper) 55%, transparent); /* .k-title.k-stack > .k-body::after */
 --k-mat-light-700: color-mix(in srgb, var(--color-paper) 70%, transparent); /* .k-glass */
 --k-mat-light-850: color-mix(in srgb, var(--color-paper) 85%, transparent); /* :root */
 --k-mat-light-860: color-mix(in srgb, var(--color-paper) 86%, transparent); /* .k-well */
 --k-mat-light-900: color-mix(in srgb, var(--color-paper) 90%, transparent); /* .k-glass .k-glass__edge */
 --k-mat-light-950: color-mix(in srgb, var(--color-paper) 95%, transparent); /* .k-title.k-stack > .k-body::after */
 --k-mat-lit-350: color-mix(in srgb, var(--p-color-neutral-50) 35%, transparent); /* .k-step__state::after */
 --k-mat-lit-400: color-mix(in srgb, var(--p-color-neutral-50) 40%, transparent); /* .k-meter i:last-child::after */
 --k-mat-lit-500: color-mix(in srgb, var(--p-color-neutral-50) 50%, transparent); /* .k-meter i:last-child */
 --k-mat-mask: var(--color-text-primary); /* mask fill (only its alpha is used) */
 --k-mat-pen-ink: #463d33; /* pen ink on ticks and handwriting; the one material colour outside the palette */
 --k-mat-receipt: var(--color-archive-under); /* receipt stock */
 --k-mat-shade-000: color-mix(in srgb, var(--color-text-primary) 0%, transparent); /* .k-well::after */
 --k-mat-shade-015: color-mix(in srgb, var(--color-text-primary) 1.5%, transparent); /* .k-well::after, .k-title.k-stack > .k-body::after */
 --k-mat-shade-040: color-mix(in srgb, var(--color-text-primary) 4%, transparent); /* .k-well::after */
 --k-mat-shade-055: color-mix(in srgb, var(--color-text-primary) 5.5%, transparent); /* .k-well::after */
 --k-mat-shade-060: color-mix(in srgb, var(--color-text-primary) 6%, transparent); /* .k-title.k-stack > .k-body::after, .k-glass */
 --k-mat-shade-070: color-mix(in srgb, var(--color-text-primary) 7%, transparent); /* .k-files .k-glass */
 --k-mat-shade-090: color-mix(in srgb, var(--color-text-primary) 9%, transparent); /* :root */
 --k-mat-shade-100: color-mix(in srgb, var(--color-text-primary) 10%, transparent); /* .k-glass, .k-glass .k-glass__edge */
 --k-mat-shade-120: color-mix(in srgb, var(--color-text-primary) 12%, transparent); /* .k-glass */
 --k-mat-shade-160: color-mix(in srgb, var(--color-text-primary) 16%, transparent); /* :root */
 --k-mat-shade-170: color-mix(in srgb, var(--color-text-primary) 17%, transparent); /* :root */
 --k-mat-shade-180: color-mix(in srgb, var(--color-text-primary) 18%, transparent); /* :root */
 --k-mat-shade-200: color-mix(in srgb, var(--color-text-primary) 20%, transparent); /* :root, :root, .k-receipt.k-read */
 --k-mat-shade-260: color-mix(in srgb, var(--color-text-primary) 26%, transparent); /* :root */
 --k-mat-shade-300: color-mix(in srgb, var(--color-text-primary) 30%, transparent); /* :root, .k-receipt.k-read, .k-glass */
 --k-mat-shade-360: color-mix(in srgb, var(--color-text-primary) 36%, transparent); /* :root */
 --k-mat-shade-400: color-mix(in srgb, var(--color-text-primary) 40%, transparent); /* :root */
 --k-mat-stamp-ink: var(--color-text-secondary); /* the Accepted stamp */
 --k-mat-deep-000: color-mix(in srgb, var(--color-text-primary) 0%, transparent); /* .k-instrument */
 --k-mat-deep-260: color-mix(in srgb, var(--color-text-primary) 29.1%, transparent); /* .k-instrument */
 --k-mat-deep-500: color-mix(in srgb, var(--color-text-primary) 56%, transparent); /* .k-instrument */
 --k-mat-deep-600: color-mix(in srgb, var(--color-text-primary) 67.2%, transparent); /* .k-strip .s-row */
 --k-mat-grey-030: color-mix(in srgb, var(--color-text-primary) 98%, var(--color-paper)); /* .k-strip .s-dark */
 --k-mat-grey-059: color-mix(in srgb, var(--color-text-primary) 86%, var(--color-paper)); /* .k-strip .s-off */
 --k-mat-grey-139: color-mix(in srgb, var(--color-text-primary) 51%, var(--color-paper)); /* .k-strip .s-text-dark */
 --k-mat-grey-235: color-mix(in srgb, var(--color-text-primary) 9%, var(--color-paper)); /* .k-strip .s-on */
 --k-mat-light-040: color-mix(in srgb, var(--color-paper) 4%, transparent); /* .k-instrument */
 --k-mat-light-050: color-mix(in srgb, var(--color-paper) 5%, transparent); /* .k-instrument */
 --k-mat-light-100: color-mix(in srgb, var(--color-paper) 10%, transparent); /* .k-instrument */
 --k-mat-light-150: color-mix(in srgb, var(--color-paper) 15%, transparent); /* .k-instrument */
 --k-mat-light-260: color-mix(in srgb, var(--color-paper) 26%, transparent); /* .k-instrument */
 --k-mat-shade-025: color-mix(in srgb, var(--color-text-primary) 2.5%, transparent); /* .k-receipt::before */
}

/* Materials. Each surface is the material of the real object. Depth comes from light first:
   every well has one key light, a lit pool round its subject and a fall toward the far edge, and the
   fall darkens whatever lies in it, paper included, as light does. Shadows: paper = base + contact,
   read = base + reach, instrument = base + reach + far. --k-sh-fixed carries what a stock always shows. */
.k-well { --k-pool-x: calc(50% - var(--k-lx) * 30%); --k-pool-y: 30%; --k-pool-w: 62%; --k-pool-h: 82%; }
.k-well, .k-desk, .k-workbench, .k-files { background: radial-gradient(var(--k-pool-w) var(--k-pool-h) at var(--k-pool-x) var(--k-pool-y), var(--k-mat-light-860), var(--k-mat-light-520) 36%, var(--k-mat-light-160) 70%, var(--k-mat-light-000) 100%), var(--color-surface-well-deep); }
.k-well::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--k-grain-ground); pointer-events: none; }
.k-well::after { content: ''; position: absolute; inset: 0; z-index: 40; border-radius: inherit; pointer-events: none; mix-blend-mode: multiply; background: radial-gradient(calc(var(--k-pool-w) * 1.9) calc(var(--k-pool-h) * 1.5) at var(--k-pool-x) var(--k-pool-y), var(--k-mat-shade-000) 30%, var(--k-mat-shade-015) 58%, var(--k-mat-shade-040) 86%, var(--k-mat-shade-055) 100%); } /* Far-side shade capped to about a third: founder ruling DEC 106 (12 Nov, "b"), option B on the well-light pick page. */
.k-desk { --k-lx: 1; --k-pool-x: 20%; --k-pool-y: 52%; --k-pool-w: 46%; --k-pool-h: 78%; }
.k-workbench { --k-lx: 0.6; --k-pool-x: 22%; --k-pool-y: 22%; --k-pool-w: 52%; --k-pool-h: 46%; }
.k-files { --k-lx: -1; --k-pool-x: 64%; --k-pool-y: 40%; --k-pool-w: 46%; --k-pool-h: 80%; }

.k-paper { --k-sh-fixed: var(--k-sh-none); box-shadow: var(--k-sh-fixed), var(--k-sh-base), var(--k-sh-contact); }
.k-read { box-shadow: var(--k-sh-fixed), var(--k-sh-base), var(--k-sh-reach); }
.k-paper.k-stack > .k-body { box-shadow: var(--k-sh-fixed), var(--k-sh-base), var(--k-sh-contact); }
.k-paper.k-stack.k-read > .k-body { box-shadow: var(--k-sh-fixed), var(--k-sh-base), var(--k-sh-reach); }

/* Four stocks that can be told apart at arm's length.
   Letterhead bond: the brightest white, a faint laid fibre. */
.k-stock-letter, .k-stock-letter.k-stack > .k-body { --k-stock: var(--color-paper); background-image: var(--k-grain-paper); }
/* Register stock: a greyer ruled sheet. Rules are printed in a quieter ink than the type, and a double
   margin rule runs down the left, as on a ledger. */
.k-stock-register, .k-stock-register.k-stack > .k-body { --k-stock: var(--color-paper-under); background-image: var(--k-grain-paper), linear-gradient(90deg, transparent calc(var(--k-pad,16px) - 8px), var(--k-ink-rule) calc(var(--k-pad,16px) - 8px) calc(var(--k-pad,16px) - 7px), transparent calc(var(--k-pad,16px) - 7px) calc(var(--k-pad,16px) - 5px), var(--k-ink-rule) calc(var(--k-pad,16px) - 5px) calc(var(--k-pad,16px) - 4px), transparent calc(var(--k-pad,16px) - 4px)); }
.k-stock-register .k-register td { box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--k-ink-rule); }
.k-stock-register.k-test .k-register td { box-shadow: inset calc(-1 * var(--k-hair)) 0 0 var(--color-line-construction), inset 0 calc(-1 * var(--k-hair)) 0 var(--k-ink-rule); }
.k-stock-register.k-test .k-register td:last-child { box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--k-ink-rule); }
/* Cardstock: heavier and a shade darker, with a visible fibre and a cut edge whose thickness shows
   as a narrow darker face on the side away from the light. */
.k-stock-cover { --k-stock: var(--k-stock-cover); --k-sh-fixed: inset -1px -1px 0 var(--k-cut-edge), inset 1px 1px 0 var(--k-cut-light), calc(var(--k-lx) * 1px + 0.5px) 1.5px 0 0 var(--k-cut-face); }
.k-stock-cover, .k-stock-cover.k-stack > .k-body { background-image: var(--k-grain-cover); }
/* Receipt stock: thinner and cooler. A fold crease crosses it, its foot is torn, and its shadow follows the tear. */
.k-stock-thin { --k-stock: var(--color-archive-under); }
.k-receipt { filter: var(--k-drop-paper); }
.k-receipt::before { box-shadow: none; background-image: linear-gradient(transparent 46%, var(--k-mat-shade-070) 46.2%, var(--k-mat-light-900) 46.6%, var(--k-mat-shade-025) 47%, transparent 58%), var(--k-grain-thin); }
.k-receipt.k-read::before { box-shadow: none; }
.k-receipt.k-read { filter: drop-shadow(calc(var(--k-lx) * 0.5px) 1px 1px var(--k-mat-shade-300)) drop-shadow(calc(var(--k-lx) * 14px) 20px 16px var(--k-mat-shade-200)); }
.k-receipt::after { background-image: var(--k-grain-thin); clip-path: polygon(0 0,100% 0,100% 58%,97.5% 84%,95% 66%,92% 100%,89.5% 72%,86% 90%,83% 61%,80.5% 95%,77% 70%,73.5% 100%,71% 64%,68% 86%,65% 74%,62% 98%,59% 62%,56.5% 88%,53% 69%,50% 100%,47.5% 76%,44% 92%,41% 60%,38% 97%,35.5% 71%,32% 85%,29% 63%,26% 100%,23.5% 78%,20% 93%,17% 66%,14.5% 89%,11% 70%,8% 100%,5.5% 73%,3% 91%,0 64%); }
.k-receipt__perforation { border-top: 0; height: 4px; background: radial-gradient(circle at 2px 2px, var(--color-surface-well-deep) 0 1.1px, transparent 1.4px) 0 0 / 6px 4px repeat-x; }
/* A supplier's bill matched to a job: the job is written on it in pen, and the person who checked it signs. */
.k-receipt__job { margin-top: var(--p-space-3); padding-top: var(--p-space-2); box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction); }
.k-receipt__job > span:first-child { display: block; color: var(--color-text-tertiary); font-size: var(--k-anatomy-fine); line-height: 11px; }
.k-pen { color: var(--k-ink-pen); font-family: var(--p-font-family-display); font-style: italic; letter-spacing: 0.01em; }
.k-receipt__job .k-pen { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; rotate: -1.5deg; transform-origin: left center; }
.k-receipt__check { display: flex; align-items: center; justify-content: space-between; margin-top: var(--p-space-3); padding-top: var(--p-space-2); border-top: var(--line-structure) solid var(--color-line-structure); }

/* Stacks show leaves: fine edges stepping back unevenly, as a real pile does, and the lowest sheet
   carries the shadow to the ground. */
.k-stack::after { transform: none; background: var(--k-leaf); box-shadow: -2px -3px 0 0 var(--k-leaf), -2px -3px 0 1px var(--k-leaf-edge), -6px -5px 0 0 var(--k-leaf), -6px -5px 0 1px var(--k-leaf-edge), -8px -9px 0 0 var(--k-leaf), -8px -9px 0 1px var(--k-leaf-edge); }
.k-stack::before { transform: translate(-12px,-11px); background: var(--k-leaf) var(--k-grain-paper); box-shadow: 0 0 0 1px var(--k-leaf-edge), var(--k-sh-base), var(--k-sh-contact); }
/* The bound pack shows its page block at the fore edge and tail, under the cover's own read shadow. */
.k-pack.k-stack::before, .k-pack.k-stack::after { display: none; }
.k-pack { --k-sh-fixed: inset -1px -1px 0 var(--k-cut-edge), inset 1px 1px 0 var(--k-cut-light), 2px 2px 0 0 var(--k-leaf), 2px 2px 0 1px var(--k-leaf-edge), 4px 3px 0 0 var(--k-leaf), 4px 3px 0 1px var(--k-leaf-edge), 5px 5px 0 0 var(--k-leaf), 5px 5px 0 1px var(--k-leaf-edge), 7px 6px 0 0 var(--k-leaf), 7px 6px 0 1px var(--k-leaf-edge), 9px 8px 0 0 var(--k-leaf), 9px 8px 0 1px var(--k-leaf-edge), 11px 10px 0 0 var(--color-surface-well-deep), 11px 10px 0 1px var(--k-cut-edge); }
.k-pack .k-tabs { right: -72px; z-index: -1; }
.k-pack .k-tabs span { width: 84px; padding-left: 28px; white-space: nowrap; }
.k-pack__spine { background: linear-gradient(90deg, var(--k-mat-grey-018) 0, var(--k-mat-grey-044) 38%, var(--k-mat-grey-027) 62%, var(--k-mat-grey-014) 100%); box-shadow: inset -1px 0 0 var(--k-mat-light-060); }
.k-tabs span { color: var(--color-text-primary); font-weight: 500; font-size: 9px; line-height: 12px; padding-left: 10px; background: var(--k-stock-cover) var(--k-grain-cover); box-shadow: inset -1px -1px 0 var(--k-cut-edge), inset 0 1px 0 var(--k-cut-light), var(--k-sh-base), var(--k-sh-contact); }
/* A title page is stiff: its top right corner lifts off the leaves beneath, catches the light and shows a crease. */
.k-title.k-stack > .k-body::after { content: ''; position: absolute; right: 0; top: 0; width: 72px; height: 60px; border-radius: 0 var(--radius-paper) 0 0; background: linear-gradient(225deg, var(--k-mat-light-950) 0, var(--k-mat-light-550) 16%, var(--k-mat-shade-060) 30%, var(--k-mat-shade-015) 44%, transparent 58%); pointer-events: none; }
.k-title.k-stack > .k-body::before { content: ''; position: absolute; right: -1px; top: -1px; width: 30px; height: 30px; z-index: -1; border-radius: 0 var(--radius-paper) 0 0; box-shadow: 2px -2px 3px -1px var(--k-mat-shade-200); pointer-events: none; }

/* Print and pen. Type, rules and letterheads are print. A tick is pen: a warmer ink, a heavier
   round stroke and a hand-drawn shape, so it reads as written on the paper after it was printed. */
.k-tick { color: var(--k-ink-pen); stroke-width: var(--line-structure); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.k-tick path { d: path("M2.3 8.4C3.7 9.2 4.9 10.6 5.9 12.5C7.9 8.3 10.6 5.1 14.1 2.7"); }
.k-stamp { position: absolute; right: 0; top: 10px; display: inline-block; padding: 5px 10px 4px; border: var(--line-structure) solid currentColor; outline: var(--line-construction) solid currentColor; outline-offset: 2px; border-radius: 3px; color: var(--k-ink-stamp); font-family: var(--type-smallcaps-family); font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; rotate: -6deg; -webkit-mask-image: var(--k-grain-stamp), linear-gradient(98deg, var(--k-mat-mask) 0 48%, color-mix(in srgb, var(--k-mat-mask) 50%, transparent) 100%); -webkit-mask-composite: source-in; mask-image: var(--k-grain-stamp), linear-gradient(98deg, var(--k-mat-mask) 0 48%, color-mix(in srgb, var(--k-mat-mask) 50%, transparent) 100%); mask-composite: intersect; mix-blend-mode: multiply; pointer-events: none; }
.k-signature { position: relative; }

/* Cardstock folder: back, tab and pocket share one heavier stock and its cut edges. */
.k-folder__back { background: var(--color-line-hairline) var(--k-grain-cover); box-shadow: inset -1px -1px 0 var(--k-cut-edge), inset 1px 1px 0 var(--k-cut-light), calc(var(--k-lx) * 1px + 0.5px) 1.5px 0 0 var(--k-cut-face), var(--k-sh-base), var(--k-sh-contact); }
.k-folder.k-read .k-folder__back { box-shadow: inset -1px -1px 0 var(--k-cut-edge), inset 1px 1px 0 var(--k-cut-light), calc(var(--k-lx) * 1px + 0.5px) 1.5px 0 0 var(--k-cut-face), var(--k-sh-base), var(--k-sh-reach); }
.k-folder__tab { background: var(--color-line-hairline) var(--k-grain-cover); box-shadow: inset 1px 1px 0 var(--k-cut-light); }
.k-folder__pocket { background: var(--k-grain-cover), linear-gradient(112deg,transparent,var(--color-paper-under)), var(--color-surface-well-deep); box-shadow: inset 0 1px 0 var(--k-cut-light), inset -1px -1px 0 var(--k-cut-edge), 0 -1px 2px var(--k-mat-shade-100), 0 -6px 12px -6px var(--k-mat-shade-180), var(--k-sh-base), var(--k-sh-contact); }
.k-folder__leaf { box-shadow: var(--k-sh-fixed), var(--k-sh-base), calc(var(--k-lx) * 3px) 5px 9px -3px var(--k-mat-shade-200); }

/* Instrument: a dark face with depth. Light falls across it from the stage light, rows are engraved,
   pips are lit when on and recessed when off, and its fine inner edge catches the light. */
.k-instrument { background: var(--k-grain-instrument), radial-gradient(90% 80% at 4% -4%, var(--k-mat-light-150), var(--k-mat-light-050) 42%, var(--k-mat-light-000) 72%), linear-gradient(162deg, var(--k-mat-light-050) 0%, var(--k-mat-light-000) 46%), linear-gradient(330deg, var(--k-mat-deep-260), var(--k-mat-deep-000) 46%), var(--color-instrument), var(--color-paper); box-shadow: inset 0 1px 0 var(--k-mat-light-260), inset 1px 0 0 var(--k-mat-light-100), inset -1px 0 0 var(--k-mat-light-040), inset 0 -1px 0 var(--k-mat-deep-500), var(--k-sh-base), var(--k-sh-reach), var(--k-sh-far); }
.k-step { border-top: var(--line-construction) solid var(--k-mat-deep-620); box-shadow: inset 0 var(--line-construction) 0 var(--k-mat-light-070); }
.k-readout { border-top: var(--line-construction) solid var(--k-mat-deep-620); box-shadow: inset 0 var(--line-construction) 0 var(--k-mat-light-080); }
.k-step__state { position: relative; border: 0; border-radius: 1px; background: var(--k-mat-grey-043); box-shadow: inset 0 1px 1px var(--k-mat-deep-750), 0 0.5px 0 var(--k-mat-light-080); }
.k-step__state::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(circle at 38% 32%, var(--k-mat-light) 0, var(--k-mat-grey-229) 46%, var(--k-mat-grey-183) 100%); box-shadow: 0 0 2px var(--k-mat-lit-350), inset 0 -1px 0 var(--k-mat-deep-180); }
.k-step--passed .k-step__state, .k-step--current .k-step__state { background: var(--k-mat-grey-043); }
.k-step--passed .k-step__state::after { opacity: 1; background: radial-gradient(circle at 38% 32%, var(--k-mat-receipt) 0, var(--k-mat-grey-205) 52%, var(--k-mat-grey-155) 100%); box-shadow: inset 0 -1px 0 var(--k-mat-deep-200); }
.k-step--current .k-step__state::after { opacity: 1; }
.k-meter i { position: relative; border-radius: 1px; background: var(--k-mat-grey-043); box-shadow: inset 0 1px 1px var(--k-mat-deep-750), 0 0.5px 0 var(--k-mat-light-080); }
.k-meter i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 38% 32%, var(--k-mat-receipt) 0, var(--k-mat-grey-199) 55%, var(--k-mat-grey-148) 100%); }
.k-meter i:last-child { background: var(--k-mat-grey-043); outline-color: var(--k-mat-lit-500); }
.k-meter i:last-child::after { background: radial-gradient(circle at 38% 32%, var(--k-mat-light) 0, var(--k-mat-grey-232) 50%, var(--k-mat-grey-187) 100%); box-shadow: 0 0 2px var(--k-mat-lit-400); }

/* Glass: a clear slab. Almost no tint, so the field and the route read through the whole of it,
   softened by a light blur. Its thickness shows as a brighter bevel at the edges, a lit top and left
   edge, a darker lower edge, and a soft shadow beneath. Where a composition knows what lies behind,
   it may draw that slightly displaced inside the glass (see the job file), as a slab refracts. */
.k-glass { background: linear-gradient(172deg, var(--k-mat-light-160), var(--k-mat-light-030) 30%, var(--k-mat-light-000) 62%, var(--k-mat-light-060)); -webkit-backdrop-filter: blur(0.9px); backdrop-filter: blur(0.9px); box-shadow: inset 0 1px 0 var(--k-mat-light), inset 1px 0 0 var(--k-mat-light-700), inset 0 -1px 0 var(--k-mat-shade-120), inset -1px 0 0 var(--k-mat-shade-060), calc(var(--k-lx) * 1px) 1px 1px var(--k-mat-shade-100), calc(var(--k-lx) * 8px) 16px 26px -14px var(--k-mat-shade-300); }
.k-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 3px; background: linear-gradient(180deg, var(--k-mat-light-300), var(--k-mat-light-030) 50%, var(--k-mat-light-120)); mask: linear-gradient(var(--k-mat-mask) 0 0) content-box, linear-gradient(var(--k-mat-mask) 0 0); mask-composite: exclude; }
.k-glass > * { position: relative; }
.k-glass .k-glass__edge { position: absolute; background: linear-gradient(120deg, var(--k-mat-light-900), var(--k-mat-light-000) 40%, var(--k-mat-shade-100)); }
.k-glass .k-rule-mark { width: 10px; height: 10px; margin-right: var(--p-space-2); }

/* Identity and permissions: four different things on the one line they share, drawn in one hand:
   paper white, a 1.5 px ink outline, hairline detail inside, no shading and no grain.
   The price list's own corner, a key tag on its ring, a doorway with Sam in it, a closed, strapped box. */
.k-permission { --k-perm-h: 60px; --k-perm-ink: var(--color-line-structure); }
.k-permission__cells { gap: 0 10px; }
.k-permission__cell { background: none; padding: var(--p-space-3) var(--p-space-2) 0; display: flex; flex-direction: column; align-items: flex-start; }
.k-permission__cell > h4 { margin-top: 0; }
.k-permission__cell--sealed { background: none; }
.k-permission__cell::after { content: ''; position: absolute; left: -5px; right: -5px; top: calc(var(--p-space-3) + 20px + var(--k-perm-h)); border-top: var(--line-structure) solid var(--color-line-structure); }
.k-permission__cell:first-child::after { left: 0; }
.k-permission__cell:last-child::after { right: 0; }
.k-permission__drawing { height: var(--k-perm-h); margin-bottom: var(--p-space-3); }
.k-permission__drawing.k-permission__source { height: 52px; margin-top: 8px; margin-bottom: var(--p-space-3); }
.k-permission__source { background: var(--color-paper); box-shadow: none; filter: none; transform: none; width: 88%; padding: 5px var(--p-space-2) 0; border: var(--line-structure) solid var(--k-perm-ink); border-bottom: 0; border-radius: var(--radius-paper) 0 0 0; }
.k-permission__source::after { content: ''; position: absolute; right: -1.5px; top: -1.5px; width: 13.5px; height: 13.5px; z-index: auto; background: linear-gradient(45deg, var(--color-paper) 0 calc(50% - 1px), var(--k-perm-ink) calc(50% - 1px) calc(50% + 0.5px), var(--color-surface-well-deep) calc(50% + 0.5px)); border: solid var(--k-perm-ink); border-width: 0 0 var(--line-structure) var(--line-structure); clip-path: none; }
.k-permission__source::before { right: 18px; top: 6px; }
.k-permission__source p {  font-size: 8px; line-height: 12px; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-line-construction); }
.k-permission__credential { border: var(--line-structure) solid var(--k-perm-ink); border-radius: 15px 3px 3px 15px; background: var(--color-paper); padding: 0 0 0 30px; height: 30px; margin-top: 30px; margin-bottom: var(--p-space-3); width: 112px; filter: none; }
.k-permission__credential::before { content: none; }
.k-permission__credential i { position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: var(--line-structure) solid var(--k-perm-ink); border-radius: 50%; background: var(--color-paper); box-shadow: none; }
.k-permission__credential i::after { content: ''; position: absolute; left: -17px; top: -17px; width: 22px; height: 22px; border: var(--line-structure) solid var(--k-perm-ink); border-radius: 50%; transform: none; }
.k-permission__credential strong { position: relative; font-weight: 600; letter-spacing: 0.04em; }
.k-permission__gate { border: 0; width: 76px; display: block; }
.k-permission__gate::before { content: ''; position: absolute; left: 4px; top: 2px; bottom: 0; width: 44px; border: var(--line-structure) solid var(--k-perm-ink); border-bottom: 0; background: var(--color-paper); }
.k-permission__gate::after { content: ''; position: absolute; left: 48px; top: 2px; bottom: 0; right: auto; width: 20px; border: var(--line-structure) solid var(--k-perm-ink); border-left: 0; background: var(--color-paper); transform: skewY(-24deg); transform-origin: left top; }
.k-permission__gate .k-inline-person { position: absolute; left: 12px; bottom: 4px; font-size: 9px; line-height: 12px; font-weight: 500; }
.k-permission__gate .k-inline-person::before { width: 10px; height: 10px; }
.k-permission__sealed { border: var(--line-structure) solid var(--k-perm-ink); height: 42px; margin-top: 18px; margin-bottom: var(--p-space-3); padding: 0 var(--p-space-2); width: 104px; gap: 6px; background: var(--color-paper); border-radius: var(--radius-paper); box-shadow: none; }
.k-permission__sealed::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 0; border-top: var(--line-structure) solid var(--k-perm-ink); border-bottom: 0; }
.k-permission__sealed::after { content: ''; position: absolute; top: -1.5px; bottom: -1.5px; right: 16px; width: 10px; border-inline: var(--line-structure) solid var(--k-perm-ink); background: linear-gradient(transparent 15px, var(--k-perm-ink) 15px 16.5px, transparent 16.5px 23px, var(--k-perm-ink) 23px 24.5px, transparent 24.5px); }
.k-permission__sealed .k-seal__glyph { display: none; }
.k-permission__sealed strong { position: relative; z-index: 1; }

/* The key to the marks: a printed legend, as on a drawing. One ruled column: each mark at its true size
   in a narrow gutter, its meaning beside it. Not a row of tiles. */
.k-mark-register { display: block; grid-column: 1 / 6; align-self: start; padding: var(--p-space-3) var(--p-space-4) var(--p-space-2); border-top: 0; margin-top: 0; background: var(--color-paper) var(--k-grain-paper); border-radius: var(--radius-paper); box-shadow: var(--k-sh-base), var(--k-sh-contact); }
.k-mark-register > div { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: var(--p-space-3); min-height: 40px; padding: 6px 0; box-shadow: inset 0 var(--k-hair) 0 var(--color-line-construction); }
.k-mark-register > div:first-child { border-top: 0; }
.k-mark-register > div + div { border-left: 0; }
.k-mark-register > div::before { content: none; }
.k-mark-register > div > :first-child { position: static; translate: none; justify-self: center; }
.k-mark-register > div:has(> .k-tag:only-child) { grid-template-columns: 1fr; }
.k-mark-register > div > .k-tag:only-child { justify-self: start; background: none; padding-inline: 0; box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--color-text-tertiary); }
.k-question-mark { width: 18px; height: 18px; overflow: visible; }
.k-seal-box { position: relative; display: block; width: 28px; height: 20px; border: var(--line-structure) solid var(--color-line-structure); border-radius: var(--radius-paper); background: var(--color-paper); }
.k-seal-box::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; border-top: var(--line-structure) solid var(--color-line-structure); }
.k-seal-box::after { content: ''; position: absolute; top: -1.5px; bottom: -1.5px; right: 6px; width: 5px; border-inline: var(--line-structure) solid var(--color-line-structure); }
.k-mark-register > div > .k-seal-box { position: relative; }
.k-mark-register p { font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); color: var(--color-text-secondary); }

/* The backlog's clip: a binder clip, a metal jaw over the sheet's top edge and two wire handles folded back. */
.k-backlog__clip { top: -7px; left: 28px; width: 40px; height: 13px; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg, var(--k-mat-grey-108) 0, var(--k-mat-grey-058) 45%, var(--k-mat-grey-037) 100%); box-shadow: 0 1px 1px var(--k-mat-shade-300); }
.k-backlog__clip::after { content: ''; position: absolute; inset: 2px 7px auto; height: 1px; border: 0; background: var(--k-mat-light-350); }
.k-backlog::before { content: ''; position: absolute; top: -15px; left: 34px; width: 28px; height: 11px; border: var(--line-structure) solid var(--k-mat-grey-058); border-bottom: 0; border-radius: 4px 4px 0 0; pointer-events: none; }

/* Selected lines and rows: a 1.5 px ink outline with air round its figures. No tint, no rail. */
.k-price-list .k-register td.k-register__amount, .k-price-list .k-register th.k-register__amount { padding-right: 6px; }
.k-inbox__selected { background: none; box-shadow: none; outline: var(--line-structure) solid var(--color-line-structure); outline-offset: -2px; }
.k-cite-pin { width: 10px; }
.k-inbox .k-cite-pin { width: 5px; }
.k-doc-title, .k-person__role, .k-person__name { text-wrap: balance; }

/* Desk composition. One reading pack with five different miniature documents and deliberate content cover. */
.k-desk { height: 760px; }.k-desk .k-field { left: 724px; top: 64px; width: 668px; height: 632px; }
.k-desk .k-route__name { left: 72px; top: 26px; }
.k-at-note { left: 72px; top: 88px; width: 260px; height: 328px; }
.k-at-note .k-note__keep { max-width: 84px; }
.k-at-pack { left: 168px; top: 140px; width: 476px; height: 540px; z-index: 6; }
.k-at-statement { left: 720px; top: 416px; width: 240px; height: 224px; z-index: 4; }
.k-at-roadmap { left: 744px; top: 88px; width: 440px; height: 248px; }
.k-at-backlog { left: 1000px; top: 368px; width: 304px; height: 236px; z-index: 4; }
.k-at-week { left: 856px; top: 548px; width: 340px; height: 192px; z-index: 5; }
.k-desk__person { left: 1234px; top: 654px; }

/* Workbench composition. The instrument covers the quote letterhead here and the price letterhead on the phone. Wires meet cited lines. */
.k-workbench { height: 1064px; }.k-workbench .k-field { left: 32px; top: 24px; width: 1360px; height: 1016px; }
.k-workbench .k-route__name { left: 72px; top: 50px; }
.k-at-instrument { left: 80px; top: 112px; width: 560px; height: 392px; z-index: 6; }
.k-at-inbox { left: 900px; top: 40px; width: 400px; height: 216px; }
.k-at-price { left: 720px; top: 216px; width: 312px; height: 204px; z-index: 4; }
.k-at-price .k-cite-pin { top: 142.5px; }
.k-at-quote { left: 300px; top: 440px; width: 480px; height: 360px; z-index: 5; }
.k-at-quote .k-doc-title { font-size: var(--type-step-2); line-height: var(--type-leading-2); margin-top: var(--p-space-5) !important; }
.k-at-quote .k-cite-pin { top: 257.5px; left: 0; right: auto; }.k-at-quote .k-footline { position: absolute; left: 24px; right: 24px; top: 236px; height: 40px; margin: 0 !important; }.k-at-quote .k-signature { position: absolute; top: 288px; left: 24px; right: 24px; margin: 0 !important; }
.k-at-terms { left: 936px; top: 392px; width: 284px; height: 152px; }.k-at-terms .k-cite-pin { top: 75px; }
.k-at-terms .k-clause { margin-top: var(--p-space-1); padding-top: var(--p-space-1); }
.k-at-past { left: 1056px; top: 304px; width: 208px; height: 156px; }.k-at-past .k-key { margin-top: var(--p-space-3); }
.k-at-tests { left: 824px; top: 504px; width: 432px; height: 232px; z-index: 4; }
.k-at-permission { left: 64px; top: 820px; width: 640px; height: 196px; z-index: 3; }
.k-at-permission .k-permission__cell { padding-top: var(--p-space-3); }
.k-workbench__person { left: 748px; top: 952px; }.k-workbench__question { left: 1056px; top: 788px; width: 280px; }.k-workbench__question .k-caption { margin-top: var(--p-space-2); }

/* Job file composition. A broad fan, a closed cover, a reading invoice and a narrow bill. */
.k-files { height: 744px; }.k-files .k-field { left: 464px; top: 48px; width: 928px; height: 632px; }
.k-files .k-route__name { left: 72px; top: 26px; }
.k-at-folder { left: 96px; top: 96px; width: 488px; height: 412px; }
.k-at-title { left: 546px; top: 64px; width: 204px; height: 256px; z-index: 4; }
.k-at-title .k-doc-title { margin-top: var(--p-space-4) !important; }.k-at-title .k-cover { margin-top: var(--p-space-5); }
.k-at-invoice { left: 652px; top: 264px; width: 420px; height: 360px; z-index: 5; }
.k-at-invoice .k-doc-title { font-size: var(--type-step-2); line-height: var(--type-leading-2); }.k-at-invoice .k-register { margin-top: var(--p-space-3); font-size: 9px; line-height: 12px; }.k-at-invoice .k-register th { padding-block: 3px; }.k-at-invoice .k-register td { padding-block: var(--p-space-1); }
.k-at-invoice .k-signature { margin-top: var(--p-space-3) !important; padding-top: var(--p-space-2); font-size: 9px; line-height: 12px; }
.k-at-bill { left: 1144px; top: 152px; width: 160px; height: 244px; z-index: 5; }
.k-at-glass { left: 992px; top: 376px; width: 352px; height: 168px; padding: 32px 140px var(--p-space-5) 96px; z-index: 4; }
.k-files .k-glass { background: linear-gradient(90deg, transparent 113px, var(--k-mat-shade-070) 113px 115px, transparent 115px 241px, var(--k-mat-shade-070) 241px 243px, transparent 243px), linear-gradient(172deg, var(--k-mat-light-160), var(--k-mat-light-030) 30%, var(--k-mat-light-000) 62%, var(--k-mat-light-060)); }
.k-files__person { left: 1250px; top: 594px; }

/* Phone: changed silhouettes, real overlaps and varied widths. The same document type stays on its own scale. */
@media (max-width: 1439px) {
 .k-page { width: auto; max-width: 624px; margin-inline: auto; padding-inline: var(--p-space-4); --k-bleed: 16px; }
 .k-intro { padding-block: var(--p-space-8) var(--p-space-7); }.k-intro h1 { font-size: var(--type-step-3); line-height: var(--type-leading-3); }
 .k-region { margin-bottom: var(--p-space-8); }.k-region__head { display: block; margin-bottom: var(--p-space-6); }.k-region__head p { margin-top: var(--p-space-2); }
 .k-route--desktop, .k-wires--desktop { display: none; }.k-route--phone, .k-wires--phone { display: block; width: 374px; }
 .k-doc--read { --k-title-size: var(--type-step-2); --k-title-leading: var(--type-leading-2); --k-pad: 20px; --k-body-size: 10px; --k-body-leading: 14px; }
 .k-desk { height: 1600px; }.k-desk .k-field { left: 48px; top: 64px; width: 326px; height: 1464px; }
 .k-desk .k-route__name { left: 40px; top: 26px; }
 .k-at-note { left: 16px; top: 95px; width: 228px; height: 304px; }
 .k-at-pack { left: 8px; top: 312px; width: 278px; height: 492px; }.k-pack .k-body { padding-left: 36px; padding-right: var(--p-space-4); }.k-pack__spine { width: 16px; }
 .k-tabs, .k-pack .k-tabs { right: -42px; top: 48px; gap: 6px; }.k-tabs span { width: 34px; padding: 6px 3px; font-size: 7px; line-height: 10px; }
 .k-at-statement { left: 136px; top: 1016px; width: 208px; height: 224px; z-index: 5; }
 .k-at-roadmap { left: 16px; top: 820px; width: 332px; height: 260px; }
 .k-roadmap__axis, .k-roadmap__run { grid-template-columns: 96px repeat(5,1fr); }.k-roadmap__axis { font-size: 8px; }.k-roadmap__run { min-height: 34px; }.k-roadmap__run > span:first-child { font-size: 8px; padding-right: 6px; }.k-roadmap__now { left: calc(96px + (100% - 96px) / 5); }
 .k-at-backlog { left: 20px; top: 1138px; width: 286px; height: 220px; z-index: 6; }.k-at-week { left: 60px; top: 1320px; width: 278px; height: 200px; z-index: 7; }
 .k-at-statement .k-register th:last-child { width: 26px; white-space: nowrap; text-align: right; direction: rtl; }.k-at-statement .k-register td:last-child { padding-left: 2px; }.k-pack .k-tabs { right: -46px; }.k-pack .k-tabs span { width: 58px; padding: 6px 3px 6px 22px; white-space: normal; }.k-at-backlog .k-register th:first-child { width: 48px; }.k-at-backlog .k-register td:first-child { text-align: right; padding-right: 4px; }.k-folder__index span { white-space: nowrap; }.k-at-backlog .k-register td { padding-block: 7.5px; }.k-at-statement .k-footline { justify-content: flex-start; gap: 6px; }.k-at-backlog .k-register td:last-child { padding-left: 10px; }
 .k-week__table { font-size: 7px; line-height: 9px; }.k-week__table th, .k-week__table td { padding-inline: 3px; }
 .k-desk__person { left: 168px; top: 1532px; }
 .k-workbench { height: 1960px; }.k-workbench .k-field { left: 8px; top: 32px; width: 366px; height: 1896px; }
 .k-workbench .k-route__name { left: 40px; top: 22px; font-size: var(--type-step-0); line-height: var(--type-leading-0); }
 .k-at-inbox { left: 42px; top: 72px; width: 300px; height: 206px; }.k-at-inbox .k-inbox__row { padding-block: 14px; }.k-at-inbox .k-inbox__message footer { margin-top: 18px; }.k-inbox__panes { grid-template-columns: 88px 1fr; }.k-inbox__message { padding-inline: 10px; }
 .k-at-instrument { left: 20px; top: 230px; width: 310px; height: 412px; padding: 20px; }.k-instrument__header h3 { font-size: var(--type-step-1); }.k-meter { gap: 3px; }.k-meter i { width: 4px; height: 4px; }
 .k-instrument__plan { font-size: 10px; line-height: 14px; }.k-step { grid-template-columns: 8px 42px 1fr; gap: 6px; font-size: 10px; line-height: 14px; }.k-step__port { right: -20px; }.k-step--drafts .k-step__port { right: auto; left: -20px; }
 .k-readout { font-size: 10px; }.k-readout > span { text-align: right; max-width: 110px; }
 .k-at-price { left: 64px; top: 598px; width: 280px; height: 216px; }.k-at-price .k-doc-title { margin-top: var(--p-space-4) !important; }.k-at-price .k-cite-pin { top: 153px; left: auto; right: 0; }
 .k-at-quote { left: 24px; top: 774px; width: 300px; height: 360px; }.k-at-quote .k-doc-title { font-size: var(--type-step-1); line-height: var(--type-leading-1); margin-top: var(--p-space-4) !important; }.k-at-quote .k-body { padding: 20px; }.k-at-quote .k-cite-pin { left: 0; right: auto; }.k-at-quote .k-footline, .k-at-quote .k-signature { left: 20px; right: 20px; }
 .k-at-terms { left: 156px; top: 1148px; width: 190px; height: 126px; z-index: 6; }.k-at-terms .k-clause { margin-top: var(--p-space-1); }.k-at-terms .k-cite-pin { left: auto; right: 0; }
 .k-at-past { left: 16px; top: 1192px; width: 190px; height: 156px; z-index: 5; }
 .k-at-tests { left: 28px; top: 1280px; width: 310px; height: 230px; z-index: 6; }.k-at-tests .k-body { padding: var(--p-space-3); }.k-test__case { width: 22%; }.k-test__expected { width: 32%; }.k-test__actual { width: 34%; }.k-test { --k-body-size: 8px; --k-body-leading: 11px; }
 .k-at-permission { left: 8px; top: 1616px; width: 342px; height: 272px; }.k-permission__cells { grid-template-columns: repeat(2,1fr); gap: var(--p-space-2); }.k-permission { --k-perm-h: 44px; }.k-permission__cells { gap: var(--p-space-2) 8px; }.k-permission__cell { min-height: 106px; padding: var(--p-space-3) var(--p-space-1) 0; }.k-permission__cell h4 { margin-bottom: 8px; }.k-permission__cell::after { left: -4px; right: -4px; }.k-permission__cell:nth-child(odd)::after { left: 0; }.k-permission__cell:nth-child(even)::after { right: 0; }.k-permission__drawing { margin-bottom: var(--p-space-2); }.k-permission__drawing.k-permission__source { height: 40px; margin-top: 4px; margin-bottom: var(--p-space-2); }.k-permission__credential { margin-top: 12px; margin-bottom: var(--p-space-2); width: 100px; }.k-permission__sealed { margin-top: 4px; height: 40px; margin-bottom: var(--p-space-2); width: 96px; }.k-permission__cell p { font-size: 8px; line-height: 11px; }
 .k-workbench__question { left: 48px; top: 1534px; width: 288px; }.k-workbench__person { left: 168px; top: 1896px; }
 .k-files { height: 1336px; }.k-files .k-field { left: 48px; top: 48px; width: 326px; height: 1200px; }
 .k-files .k-route__name { left: 40px; top: 26px; font-size: var(--type-step-0); line-height: var(--type-leading-0); }
 .k-at-folder { left: 16px; top: 96px; width: 310px; height: 350px; }.k-folder__leaf { width: 170px; height: 232px; }.k-folder__leaf--quote { left: 8px; top: 48px; }.k-folder__leaf--variation { left: 140px; top: 26px; width: 178px; height: 204px; }.k-folder__leaf--week { left: 16px; top: 136px; width: 226px; height: 200px; transform: rotate(-3.5deg); }.k-folder__pocket::before { top: 10px; }.k-folder__leaf--variation > .k-body > .k-doc-subtitle:last-child { max-width: 72px; }.k-folder__pocket { height: 134px; padding: 10px var(--p-space-4); }.k-at-folder .k-folder__index { margin-top: 4px; padding-top: 3px; }.k-folder__index { gap: var(--p-space-3); }.k-folder__index span + span { padding-left: var(--p-space-3); }
 .k-at-title { left: 152px; top: 394px; width: 184px; height: 272px; }.k-at-folder .k-folder__pocket > p, .k-at-folder .k-folder__pocket > .k-folder__index { max-width: 100px; }.k-at-folder .k-folder__index { flex-wrap: wrap; row-gap: 2px; }
 .k-at-invoice { left: 16px; top: 554px; width: 302px; height: 352px; z-index: 5; }.k-at-invoice .k-doc-title { font-size: var(--type-step-2); line-height: var(--type-leading-2); }.k-at-invoice .k-body { padding: 20px; }
 .k-at-bill { left: 198px; top: 858px; width: 144px; height: 240px; z-index: 6; }.k-at-bill .k-body { padding: var(--p-space-3); }
 .k-at-glass { left: 40px; top: 1104px; width: 246px; height: 120px; padding: var(--p-space-5); z-index: 5; }.k-at-glass .k-tag { font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); }.k-at-glass p:last-child { font-size: var(--type-step-0); line-height: var(--type-leading-0); }
 .k-files__person { left: 168px; top: 1260px; }
 .k-files .k-glass { background: linear-gradient(172deg, var(--k-mat-light-160), var(--k-mat-light-030) 30%, var(--k-mat-light-000) 62%, var(--k-mat-light-060)); }
 .k-mark-wall { display: flex; flex-direction: column; gap: 40px; }.k-review { padding-top: 0; }.k-review blockquote { font-size: var(--type-step-1); line-height: var(--type-leading-1); }.k-pulled-line { font-size: var(--type-step-2); line-height: var(--type-leading-2); }.k-mark-register { grid-template-columns: minmax(0,1fr); }.k-mark-register > div + div { border-left: 0; border-top: var(--line-construction) solid var(--color-line-construction); }
 .k-figure-stop .k-person__role { max-width: 110px; }
}