/* v3.6 R-31 · the shared components' one stylesheet (tcc-kit.js; docs/release-0112/v36-components.md) — office, field app and
   portals. V36-G (Marco, 10 Oct evening: "it's going backwards, like it's from the 90's"): the kit in OUR glass language, done
   better — depth from blur and soft shadow, never outlines; papers drawn as objects (real pictures with a paper's own shadow,
   fanned out of a frosted folder card); one primary pill per view, the rest round glass; the viewer a calm field with the paper
   large on it, a frosted side panel and a floating control capsule; the chain as glass rows on soft rails; the calendar airy
   (day numbers as type, events as small chips, today and the selection by a soft glow); overlays at approved 82 % frost / 18 px blur on a
   gentle scrim. Geist; the lit stone-and-sage field; light first, and a dark of its own (smoked glass on deep sage-graphite).
   Tokens borrow the page's own (--pm-* in the office, --px-* in the field app) and fall back to the same values. */
/* V36-H · the PORT (Marco, 10 Oct late: "even our current graphite mode is glassier and sexier"): the kit invents no material of its
   own. Every token below IS a live Next/Today token (nx-system.css :root html.nx-on, its night block; nx.css .pm-card, .pm-pill,
   .pm-dark, .pm-chip; the shell's .peek and .pm-drawer) — the fallbacks after each var() are the same values, for the field app and
   the portals, which do not load nx-system.css. Light = the live pm-glass; dark = the live graphite (smoked glass with its sheen,
   never a flat near-black panel). */
:root {
  --tk-f: var(--pm-f, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --tk-fd: var(--pm-fd, var(--tk-f));
  --tk-fm: var(--pm-fm, "Geist Mono", ui-monospace, Menlo, monospace);
  --tk-ink: var(--pm-ink, #18201d); --tk-ink2: var(--pm-ink2, #3c4742); --tk-sub: var(--pm-sub, #57645e); --tk-line: var(--pm-line, rgba(24, 40, 32, .08)); --tk-wash: var(--pm-wash, rgba(24, 40, 32, .035));
  --tk-solid: var(--pm-solid, rgba(246, 248, 247, .97)); --tk-solid2: var(--pm-solid-2, rgba(238, 242, 240, .98)); --tk-edge: var(--pm-edge, rgba(255, 255, 255, .9));
  --tk-glass: var(--pm-glass, rgba(255, 255, 255, .5)); --tk-glass-hi: var(--pm-glass-hi, rgba(255, 255, 255, .82));
  --tk-sheen: linear-gradient(transparent, transparent);   /* light glass has no sheen; dark takes --pm-sheen */
  --tk-card: var(--tk-glass); --tk-card-f: var(--tk-glass-hi); --tk-card-sh: var(--tk-shg);   /* work cards (folder, chain rows, viewer panel); lifted at night */
  --tk-shg: var(--pm-shg, inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 1px rgba(20, 36, 28, .03), 0 20px 44px -28px rgba(20, 40, 30, .34));
  /* buttons are .pm-pill: glass, its shadow, glass-hi on hover; the ONE primary is .pm-pill.dark */
  --tk-btn: var(--tk-glass); --tk-btn-hi: var(--tk-glass-hi); --tk-btn-sh: var(--tk-shg);
  --tk-gr: var(--pm-gr, #1e2425); --tk-gr2: var(--pm-gr2, #273031); --tk-on-gr: var(--pm-on-gr, #eef2ef); --tk-on-gr2: var(--pm-on-gr2, #93a19b);
  --tk-prim: var(--tk-gr); --tk-on-prim: #fff; --tk-prim-sh: 0 10px 24px -14px rgba(0, 0, 0, .6);
  /* the graphite card (.pm-dark): the chain's top party */
  --tk-gcard: linear-gradient(170deg, var(--tk-gr2), var(--tk-gr) 40%); --tk-gcard-sh: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -36px rgba(10, 20, 15, .7);
  --tk-paper-sh: 0 6px 18px -8px rgba(20, 30, 28, .45), 0 0 0 1px rgba(20, 30, 28, .06);   /* a paper tile, as the job's Days fan draws it (jobs-v36.js .v36d-pg) */
  --tk-paper-lift: 0 2px 4px rgba(20, 36, 28, .08), 0 26px 44px -18px rgba(20, 40, 30, .5);
  --tk-acc: var(--pm-acc, var(--k-signal, #81e59d)); --tk-sage: var(--pm-sage, color-mix(in srgb, var(--tk-acc) 38%, #c3d3ca));
  /* status: Today's own colours (.pm-chip, .pm-d) */
  --tk-ok: var(--pm-ok, #3f8a58); --tk-ok-s: color-mix(in srgb, var(--tk-ok) 12%, transparent); --tk-warn: var(--pm-warn, #a8741a); --tk-warn-s: rgba(185, 130, 34, .12); --tk-bad: var(--pm-bad, #ad452d); --tk-bad-s: var(--pm-bad-s, rgba(200, 85, 59, .1));
  --tk-info: var(--tk-ink2); --tk-info-s: color-mix(in srgb, var(--tk-sage) 45%, transparent); --tk-quiet: var(--tk-ink2); --tk-quiet-s: var(--tk-wash);
  /* the lit field (nx-system.css body.ws-page.surface): the viewer stands on it */
  --tk-field: var(--pm-bg, #e3e8e5);
  --tk-field-img: radial-gradient(55% 45% at 8% 0%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(50% 55% at 92% 18%, color-mix(in srgb, var(--tk-sage) 70%, transparent), transparent 72%), radial-gradient(70% 50% at 50% 110%, color-mix(in srgb, var(--tk-sage) 35%, #cfd6d3), transparent 70%);
  /* anything over content is the shell's hover card / drawer material (.peek, .pm-drawer): near-solid, its edge and shadow */
  --tk-scrim: rgba(16, 24, 20, .22); --tk-focus: var(--k-focus, color-mix(in srgb, var(--tk-acc) 80%, #18201d));
  --tk-sh: inset 0 1px 0 var(--tk-edge), inset 0 0 0 1px var(--tk-line), 0 2px 4px rgba(16, 30, 22, .06), 0 24px 54px -22px rgba(16, 30, 22, .42);
  --tk-rail: var(--tk-line);
  --tk-ease: var(--pm-ease, cubic-bezier(.22, .8, .24, 1));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tk-ink: var(--pm-ink, #eef2ef); --tk-ink2: var(--pm-ink2, #c3cdc8); --tk-sub: var(--pm-sub, #8d9a94); --tk-line: var(--pm-line, rgba(255, 255, 255, .07)); --tk-wash: var(--pm-wash, rgba(255, 255, 255, .045));
  --tk-solid: var(--pm-solid, rgba(22, 28, 26, .975)); --tk-solid2: var(--pm-solid-2, rgba(32, 39, 37, .98)); --tk-edge: var(--pm-edge, rgba(255, 255, 255, .09));
  --tk-glass: var(--pm-glass, rgba(30, 37, 35, .56)); --tk-glass-hi: var(--pm-glass-hi, rgba(40, 48, 45, .82));
  --tk-sheen: var(--pm-sheen, linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%));
  --tk-card: var(--pm-lift, linear-gradient(172deg, #27312f, #212a28 46%, #1c2422)); --tk-card-f: var(--tk-card); --tk-card-sh: var(--pm-lift-sh, inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .055), 0 34px 70px -32px rgba(0, 0, 0, .95));   /* V36-H2: lifted off the deep page */
  --tk-shg: var(--pm-shg, inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8));
  --tk-gr: var(--pm-gr, #111615); --tk-gr2: var(--pm-gr2, #1b2321); --tk-on-gr: var(--pm-on-gr, #eef2ef); --tk-on-gr2: var(--pm-on-gr2, #94a29c);
  --tk-prim: linear-gradient(180deg, #f2f6f3, #dce4df); --tk-on-prim: #0e1211; --tk-prim-sh: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(0, 0, 0, .8);   /* .pm-pill.dark at night */
  --tk-gcard: radial-gradient(70% 55% at 0% 0%, color-mix(in srgb, var(--tk-acc) 7%, transparent), transparent 70%), linear-gradient(172deg, #1c2422, #111715 46%, #0e1312);
  --tk-gcard-sh: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .045), 0 40px 80px -36px rgba(0, 0, 0, .95);
  --tk-paper-sh: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 34px -16px rgba(0, 0, 0, .8); --tk-paper-lift: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 50px -18px rgba(0, 0, 0, .85);
  --tk-ok: var(--pm-ok, #6fc28d); --tk-warn: var(--pm-warn, #dcaa4a); --tk-warn-s: rgba(185, 130, 34, .22); --tk-bad: var(--pm-bad, #e27a5f); --tk-bad-s: rgba(200, 85, 59, .22); --tk-ok-s: color-mix(in srgb, var(--tk-ok) 16%, transparent);
  --tk-info-s: rgba(255, 255, 255, .07); --tk-quiet-s: rgba(255, 255, 255, .07);   /* .pm-dark .pm-chip */
  --tk-field: var(--pm-bg, #0b0e0d);
  --tk-field-img: radial-gradient(60% 50% at 6% -6%, rgba(205, 228, 214, .085), transparent 70%), radial-gradient(48% 52% at 96% 12%, color-mix(in srgb, var(--tk-acc) 15%, transparent), transparent 72%), radial-gradient(80% 55% at 50% 118%, color-mix(in srgb, var(--tk-acc) 7%, #16201c), transparent 72%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .35));
  --tk-sh: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px -24px rgba(0, 0, 0, .9);
} }
:root[data-theme="dark"] {
  --tk-ink: var(--pm-ink, #eef2ef); --tk-ink2: var(--pm-ink2, #c3cdc8); --tk-sub: var(--pm-sub, #8d9a94); --tk-line: var(--pm-line, rgba(255, 255, 255, .07)); --tk-wash: var(--pm-wash, rgba(255, 255, 255, .045));
  --tk-solid: var(--pm-solid, rgba(22, 28, 26, .975)); --tk-solid2: var(--pm-solid-2, rgba(32, 39, 37, .98)); --tk-edge: var(--pm-edge, rgba(255, 255, 255, .09));
  --tk-glass: var(--pm-glass, rgba(30, 37, 35, .56)); --tk-glass-hi: var(--pm-glass-hi, rgba(40, 48, 45, .82));
  --tk-sheen: var(--pm-sheen, linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 46%));
  --tk-card: var(--pm-lift, linear-gradient(172deg, #27312f, #212a28 46%, #1c2422)); --tk-card-f: var(--tk-card); --tk-card-sh: var(--pm-lift-sh, inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .055), 0 34px 70px -32px rgba(0, 0, 0, .95));   /* V36-H2: lifted off the deep page */
  --tk-shg: var(--pm-shg, inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8));
  --tk-gr: var(--pm-gr, #111615); --tk-gr2: var(--pm-gr2, #1b2321); --tk-on-gr: var(--pm-on-gr, #eef2ef); --tk-on-gr2: var(--pm-on-gr2, #94a29c);
  --tk-prim: linear-gradient(180deg, #f2f6f3, #dce4df); --tk-on-prim: #0e1211; --tk-prim-sh: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(0, 0, 0, .8);
  --tk-gcard: radial-gradient(70% 55% at 0% 0%, color-mix(in srgb, var(--tk-acc) 7%, transparent), transparent 70%), linear-gradient(172deg, #1c2422, #111715 46%, #0e1312);
  --tk-gcard-sh: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .045), 0 40px 80px -36px rgba(0, 0, 0, .95);
  --tk-paper-sh: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 34px -16px rgba(0, 0, 0, .8); --tk-paper-lift: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 50px -18px rgba(0, 0, 0, .85);
  --tk-ok: var(--pm-ok, #6fc28d); --tk-warn: var(--pm-warn, #dcaa4a); --tk-warn-s: rgba(185, 130, 34, .22); --tk-bad: var(--pm-bad, #e27a5f); --tk-bad-s: rgba(200, 85, 59, .22); --tk-ok-s: color-mix(in srgb, var(--tk-ok) 16%, transparent);
  --tk-info-s: rgba(255, 255, 255, .07); --tk-quiet-s: rgba(255, 255, 255, .07);
  --tk-field: var(--pm-bg, #0b0e0d);
  --tk-field-img: radial-gradient(60% 50% at 6% -6%, rgba(205, 228, 214, .085), transparent 70%), radial-gradient(48% 52% at 96% 12%, color-mix(in srgb, var(--tk-acc) 15%, transparent), transparent 72%), radial-gradient(80% 55% at 50% 118%, color-mix(in srgb, var(--tk-acc) 7%, #16201c), transparent 72%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .35));
  --tk-sh: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 70px -24px rgba(0, 0, 0, .9);
}
.tk-surface { background: var(--tk-solid) !important; color: var(--tk-ink); box-shadow: var(--tk-sh); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); }   /* the shell's .peek (nx-system.css:212) */
.tk-mono { font: 500 12px var(--tk-fm); letter-spacing: .02em; }
.tk-grow { flex: 1; }
.tk-empty { margin: 0; padding: 14px 4px; font: 400 13.5px/1.5 var(--tk-f); color: var(--tk-sub); }
/* controls: Today's .pm-pill (nx.css:30) — glass, its shadow, glass-hi on hover; the ONE primary is .pm-pill.dark (nx.css:32,
   light pill at night nx.css:312); round icon buttons the same glass */
:root .tk-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 500 13.5px var(--tk-f); letter-spacing: -.005em; color: var(--tk-ink); background: var(--tk-btn); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--tk-btn-sh); transition: background .2s, transform .25s var(--tk-ease), box-shadow .2s; }
:root .tk-btn:hover { background: var(--tk-btn-hi); transform: translateY(-1px); } :root .tk-btn:active { transform: scale(.97); } :root .tk-btn:focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 2px; } .tk-btn[disabled] { opacity: .38; cursor: default; box-shadow: none; }
:root .tk-btn.tk-round { width: 40px; padding: 0; } :root .tk-btn.tk-primary { background: var(--tk-prim); color: var(--tk-on-prim); box-shadow: var(--tk-prim-sh); font-weight: 500; } :root .tk-btn.tk-primary:hover { background: var(--tk-prim); filter: brightness(1.06); }
:root .tk-btn .tcci, :root .tk-btn svg { width: 16px; height: 16px; flex: none; }
:root .tk-more { font: 600 18px/1 var(--tk-f); letter-spacing: .04em; padding-bottom: 6px; }   /* the round "…" that holds the other actions */
@media (pointer: coarse), (max-width: 760px) { :root .tk-btn { min-height: 44px; } :root .tk-btn.tk-round { width: 44px; } }   /* a phone's target (STANDARDS §9) */
/* a menu inside a pop-over: quiet rows, not a cloud of outlined buttons */
.tk-menu { display: grid; gap: 2px; min-width: 210px; } :root .tk-mitem, :root .tk-pop .tk-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 14px; border-radius: 14px; font: 450 14px var(--tk-f); color: var(--tk-ink); background: transparent; box-shadow: none; text-decoration: none; }
:root .tk-mitem:hover, :root .tk-pop .tk-btn:hover, :root .tk-mitem:focus-visible, :root .tk-pop .tk-btn:focus-visible { background: var(--tk-wash); outline: 0; } :root .tk-mitem.tk-danger { color: var(--tk-bad); } :root .tk-mitem .tcci, :root .tk-mitem svg { width: 16px; height: 16px; flex: none; color: var(--tk-sub); }
.tk-menu hr { border: 0; height: 1px; margin: 4px 10px; background: var(--tk-line); }
@media (pointer: coarse), (max-width: 760px) { :root .tk-mitem, :root .tk-pop .tk-btn { min-height: 46px; } }

/* ---------------------------------------------------------------- (c) status markers: Today's .pm-chip (nx.css:107; at night
   .pm-dark .pm-chip nx.css:102) with the eyebrow's dot (.pm-eye i) */
.tk-mark { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 9px; border-radius: 999px; font: 600 11.5px/1.3 var(--tk-f); letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.tk-mark > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tk-mark .tk-md { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); } .tk-mark .tk-mi { display: inline-flex; } .tk-mark .tk-mi svg, .tk-mark .tk-mi .tcci { width: 13px; height: 13px; }
.tk-mark.tk-s { padding: 3px 9px 3px 8px; gap: 6px; font-size: 11.5px; } .tk-mark.tk-s .tk-md { width: 6px; height: 6px; }
.tk-mark.tk-ok { color: var(--tk-ok); background: var(--tk-ok-s); } .tk-mark.tk-warn { color: var(--tk-warn); background: var(--tk-warn-s); } .tk-mark.tk-bad { color: var(--tk-bad); background: var(--tk-bad-s); }
.tk-mark.tk-info { color: var(--tk-info); background: var(--tk-info-s); } .tk-mark.tk-quiet { color: var(--tk-quiet); background: var(--tk-quiet-s); }
.tk-mark.tk-pending { color: var(--tk-ink2); background: var(--tk-quiet-s); } .tk-mark.tk-pending .tk-md { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }   /* asked, not answered: a hollow dot */
.tk-t-ok { color: var(--tk-ok); } .tk-t-warn { color: var(--tk-warn); } .tk-t-bad { color: var(--tk-bad); } .tk-t-info { color: var(--tk-info); } .tk-t-quiet, .tk-t-pending { color: var(--tk-quiet); }
.tk-lsw { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-family: var(--tk-f); }
.tk-lsw small { font: 500 11px var(--tk-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tk-sub); } .tk-lsw b { font: 500 14px var(--tk-f); color: var(--tk-ink); }
.tk-lsw time { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--tk-f); color: var(--tk-sub); font-variant-numeric: tabular-nums; } .tk-lsw time.tk-stale { color: var(--tk-warn); } .tk-lsw time svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- (a) evidence: papers as objects */
.tk-evs { font-family: var(--tk-f); }
.tk-evs.tk-strip { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 6px 4px 18px; scrollbar-width: thin; }
.tk-evs.tk-strip > .tk-evi { flex: none; scroll-snap-align: start; }
.tk-evs.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tk-evw, 150px), 1fr)); gap: 22px 18px; padding: 4px 2px 8px; }
.tk-evs.tk-sz-s { --tk-evw: 112px; --tk-fpw: 92px; } .tk-evs.tk-sz-m { --tk-evw: 150px; --tk-fpw: 108px; } .tk-evs.tk-sz-l { --tk-evw: 210px; --tk-fpw: 128px; }
.tk-evs.tk-strip .tk-ev { width: var(--tk-evw, 150px); }
.tk-evs.tk-strip > .tk-evi:only-child { flex: 1 1 auto; } .tk-evs.tk-strip > .tk-evi:only-child .tk-ev { width: 100%; } .tk-evs.tk-strip.tk-single { overflow: visible; padding: 0; }   /* one paper fills its own slot */
:root .tk-ev { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 10px; align-content: start; width: 100%; padding: 4px; border-radius: 16px; transition: transform .26s var(--tk-ease); }
:root .tk-ev:hover { transform: translateY(-3px); } :root .tk-ev:hover .tk-th { box-shadow: var(--tk-paper-lift); } :root .tk-ev:focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 3px; }
:root .tk-ev.tk-dim { opacity: .62; }
/* a paper: its real picture with a paper's own soft shadow — no frame, no box */
.tk-th { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fbfaf7; box-shadow: var(--tk-paper-sh); transition: box-shadow .26s var(--tk-ease); }
/* until its picture has loaded a paper is a calm, softly lit sheet — never a colour block (a lazy image, a page still being drawn) */
.tk-th:not(.tk-loaded):not(.tk-nopv):not(.tk-none) { background: linear-gradient(160deg, #fbfaf7, #eef2ef 70%, #e6ebe8); }
.tk-th img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; background: transparent; transition: opacity .3s var(--tk-ease); }
.tk-th:not(.tk-loaded) img { opacity: 0; }
.tk-th.tk-image img { object-position: center; }
/* a PDF's thumbnail is its real first page, shown from the top at a readable scale (a whole page at 150 px is a white sheet with
   invisible type); the viewer shows the whole page */
.tk-th.tk-pdf img, .tk-pkim img[data-pdf-src] { width: 175%; height: auto; max-width: none; object-fit: unset; align-self: start; justify-self: start; }
.tk-th.tk-pdf { place-items: start; }
/* the same rule for any page's own paper tile in a fan (the job's Days folder cards, jobs-v36.js; opt in elsewhere with .tk-paper):
   a PDF's drawn first page shown from its top at a readable scale — never a blank white sheet */
:is(.tk-paper, .v36d-pg) > img[src*="/preview/"], :is(.tk-paper, .v36d-pg) > img[data-pdf-src] { width: 175% !important; height: auto !important; max-width: none !important; object-fit: unset !important; object-position: 0 0 !important; }
.tk-th .tk-np { display: none; padding: 12px; font: 400 12px/1.4 var(--tk-f); color: var(--tk-sub); text-align: center; }
.tk-th.tk-none, .tk-th.tk-nopv { background: var(--tk-glass-hi); } .tk-th.tk-none .tk-np, .tk-th.tk-nopv .tk-np { display: block; }
.tk-th .tk-pg { position: absolute; right: 7px; bottom: 7px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tk-solid) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--tk-shg); color: var(--tk-ink2); font: 600 11.5px var(--tk-f); }
.tk-th .tk-evm { position: absolute; left: 7px; top: 7px; max-width: calc(100% - 14px); } .tk-th .tk-evm .tk-mark { background: color-mix(in srgb, var(--tk-solid) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--tk-shg); }
.tk-evl { display: grid; gap: 2px; min-width: 0; padding: 0 4px; } .tk-evl b { font: 550 13.5px/1.3 var(--tk-f); letter-spacing: -.012em; color: var(--tk-ink); overflow-wrap: anywhere; } .tk-evl span { font: 400 12.5px/1.35 var(--tk-f); color: var(--tk-sub); overflow-wrap: anywhere; }
/* a paper that should be here and is not: a soft hatched well that says who acts — never drawn as if it existed */
.tk-ev-miss { display: grid; gap: 10px; align-content: start; padding: 4px; } .tk-ev-miss .tk-th { background: repeating-linear-gradient(135deg, var(--tk-wash) 0 7px, transparent 7px 14px), color-mix(in srgb, var(--tk-glass) 70%, transparent); box-shadow: inset 0 1px 0 var(--tk-edge); align-content: center; gap: 4px; padding: 12px; text-align: center; }
.tk-ev-miss .tk-th b { font: 600 12.5px var(--tk-f); color: var(--tk-warn); } .tk-ev-miss .tk-th span { font: 400 12px/1.35 var(--tk-f); color: var(--tk-sub); }
.tk-evact { font: 500 12.5px var(--tk-f); color: var(--tk-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; padding: 0 4px; min-height: 32px; display: inline-flex; align-items: center; }

/* the FOLDER (layout 'folder'): a frosted glass card with the day's real papers fanned out of its top edge, like papers in a
   folder; a mouse or keyboard focus lifts and fans them, a tap opens the viewer on that paper. One quiet mark per paper (its
   dot on the picture; the words in its name, its preview and the folder's list). */
.tk-evs.tk-folder { position: relative; display: grid; width: 100%; max-width: var(--tk-fmax, 420px); isolation: isolate; }
.tk-folder .tk-ffan { position: relative; z-index: 0; height: calc(var(--tk-fpw) * 1.333 + 14px); margin: 0 0 -46px; pointer-events: none; }
.tk-folder .tk-ffan > .tk-evi { position: absolute; left: 50%; bottom: 0; width: var(--tk-fpw); margin-left: calc(var(--tk-fpw) / -2); transform-origin: 50% 110%;
  transform: translate(calc(var(--k, 0) * var(--tk-fsp, 40px)), calc(var(--ak, 0) * 7px)) rotate(calc(var(--k, 0) * 7deg)); transition: transform .42s var(--tk-ease); pointer-events: auto; z-index: var(--z, 1); }
.tk-folder:hover .tk-ffan > .tk-evi, .tk-folder:focus-within .tk-ffan > .tk-evi { transform: translate(calc(var(--k, 0) * var(--tk-fsp2, 62px)), calc(var(--ak, 0) * 5px - 16px)) rotate(calc(var(--k, 0) * 8deg)); }
.tk-folder .tk-ev { padding: 0; border-radius: 9px; } :root .tk-folder .tk-ev:hover, :root .tk-folder .tk-ev:focus-visible { transform: translateY(-14px) rotate(calc(var(--k, 0) * -3deg)); }
.tk-folder .tk-evi.tk-hover, .tk-folder .tk-evi.tk-focus { z-index: 9; }
.tk-folder .tk-evl { display: none; }   /* the name is in the paper's label, its preview and the folder's list */
.tk-folder .tk-th .tk-evm { left: auto; right: 7px; top: 7px; } .tk-folder .tk-th .tk-evm .tk-mark { padding: 5px; gap: 0; } .tk-folder .tk-th .tk-evm .tk-mark > span:last-child { display: none; }
.tk-folder .tk-th .tk-pg { display: none; }
.tk-folder .tk-fcard { position: relative; z-index: 1; display: grid; gap: 12px; min-height: 92px; padding: 20px 18px 18px 22px; border-radius: var(--pm-r, 26px); background: var(--tk-sheen), var(--tk-card-f); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--tk-card-sh); }   /* .pm-card's shape and shadow (nx.css:57, night nx.css:300) on --pm-glass-hi (the papers stand behind it; .pm-next, nx.css:113) */
.tk-fh { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .tk-fh > span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.tk-fh b { font: 450 17px/1.25 var(--tk-f); letter-spacing: -.018em; color: var(--tk-ink); overflow-wrap: anywhere; } .tk-fh small { font: 400 13px/1.4 var(--tk-f); color: var(--tk-sub); }
.tk-fh .tk-btn.tk-round { flex: none; margin: -4px -4px 0 0; }
.tk-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .tk-flist li { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; min-width: 0; font: 450 13.5px/1.35 var(--tk-f); color: var(--tk-ink2); }
.tk-flist li > span:first-child { min-width: 0; overflow-wrap: anywhere; } .tk-flist .tk-mono { color: var(--tk-sub); }
.tk-folder.tk-fempty .tk-ffan { height: 26px; margin-bottom: -14px; }
/* folders side by side (a job's days, a firm's papers) */
.tk-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 26px 20px; align-items: end; }
.tk-folders .tk-evs.tk-folder { max-width: none; }

/* the hover preview: the facts that matter and a larger picture; solid, never see-through */
.tk-peek { position: fixed; z-index: 9400; display: grid; grid-template-columns: 150px minmax(0, 220px); gap: 14px; padding: 14px; border-radius: 20px; opacity: 0; transform: translateY(6px) scale(.985); transition: opacity .16s, transform .2s var(--tk-ease); pointer-events: none; font-family: var(--tk-f); }
.tk-peek.on { opacity: 1; transform: none; } .tk-pkim { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #fbfaf7; box-shadow: var(--tk-paper-sh); } .tk-pkim img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tk-pkt { display: grid; gap: 7px; align-content: start; } .tk-pkt b { font: 550 14.5px/1.3 var(--tk-f); letter-spacing: -.012em; color: var(--tk-ink); } .tk-pkt > span:not(.tk-mark) { font: 400 12.5px/1.4 var(--tk-f); color: var(--tk-ink2); } .tk-pkt .tk-mark { justify-self: start; }
.tk-pkf small { display: block; font: 500 11px var(--tk-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tk-sub); } .tk-pkt em { font: 400 12px var(--tk-f); color: var(--tk-sub); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .tk-peek, :root .tk-ev, .tk-folder .tk-ffan > .tk-evi, .tk-th { transition: none; } }

/* ---------------------------------------------------------------- the viewer: the paper large on a calm field */
.tk-viewer[popover] { margin: 0; padding: 0; border: 0; width: auto; height: auto; max-width: none; max-height: none; overflow: hidden; color: inherit; }   /* URGENT2: the viewer in the top layer keeps its own frame (no popover UA box) */
.tk-viewer { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; font-family: var(--tk-f); border-radius: 0; }
.tk-viewer.tk-surface { background: var(--tk-field-img), var(--tk-field) !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tk-viewer.tk-in { animation: tk-fade .26s var(--tk-ease) both; } @keyframes tk-fade { from { opacity: 0; } to { opacity: 1; } }
.tk-vh { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; min-width: 0; }
.tk-vh h2 { margin: 0 0 0 6px; font: 400 21px/1.2 var(--tk-f); letter-spacing: -.025em; color: var(--tk-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-vpos { font: 500 12px var(--tk-fm); letter-spacing: .1em; text-transform: uppercase; color: var(--tk-sub); white-space: nowrap; }
.tk-vbody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 8px; min-height: 0; padding: 0 18px 0 8px; }
.tk-vpanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; } .tk-viewer.tk-cmp .tk-vpanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tk-vpane { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.tk-vcap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 14px 2px; font: 550 13.5px var(--tk-f); letter-spacing: -.01em; color: var(--tk-ink); min-height: 40px; }
.tk-vcap select { min-height: 36px; max-width: 100%; border: 0; border-radius: 999px; background: var(--tk-btn); box-shadow: var(--tk-btn-sh); color: var(--tk-ink); font: 450 13px var(--tk-f); padding: 0 12px; }
.tk-vcap label { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px var(--tk-f); color: var(--tk-sub); }
.tk-vstage { position: relative; min-height: 0; overflow: hidden; background: transparent; border-radius: 22px; }
.tk-vst { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: zoom-in; outline: 0; border-radius: 22px; } .tk-vst.tk-zoomed { cursor: grab; } .tk-vst:focus-visible { box-shadow: inset 0 0 0 2px var(--tk-focus); }
.tk-vst img { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 3px; box-shadow: var(--tk-paper-lift); background: #fbfaf7; user-select: none; }
.tk-vmsg { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 20px; text-align: center; font: 400 13.5px/1.5 var(--tk-f); color: var(--tk-sub); } .tk-vmsg b { color: var(--tk-ink); font-weight: 550; }
/* the side panel: frosted glass floating on the field */
.tk-vside { overflow-y: auto; margin: 8px 0 14px; padding: 20px 22px 22px; border-radius: var(--pm-r, 26px); background: var(--tk-sheen), var(--tk-card); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--tk-card-sh); font-family: var(--tk-f); }   /* .pm-card */
.tk-vside h3 { margin: 4px 0 10px; font: 500 11px var(--tk-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tk-sub); } .tk-vside h3 ~ h3 { margin-top: 22px; }
.tk-vside dl { display: grid; grid-template-columns: minmax(70px, max-content) minmax(0, 1fr); gap: 9px 14px; margin: 0; } .tk-vside dt { font: 500 12.5px var(--tk-f); color: var(--tk-sub); } .tk-vside dd { margin: 0; font: 450 13.5px/1.4 var(--tk-f); color: var(--tk-ink); overflow-wrap: anywhere; }
.tk-vacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 10px; } .tk-vacts a { text-decoration: none; }
.tk-fine { font: 400 12px/1.5 var(--tk-f); color: var(--tk-sub); margin: 10px 0 0; }
/* the page and zoom controls: one floating glass capsule */
.tk-vtools { justify-self: center; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; width: max-content; max-width: calc(100vw - 24px); margin: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px)); padding: 4px; border-radius: 999px; background: var(--tk-glass); box-shadow: var(--tk-shg); }   /* Today's lens capsule (.lensPill, nx.css:34); no backdrop blur — the viewer's field is opaque, and a filter here would make it the box the key hint is placed in */
.tk-vtools .tk-btn { box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--tk-ink2); } .tk-vtools .tk-btn:hover { background: var(--tk-wash); }
.tk-vz { min-width: 74px; text-align: center; font: 500 12.5px var(--tk-f); color: var(--tk-ink2); font-variant-numeric: tabular-nums; } .tk-sep { width: 1px; height: 22px; background: var(--tk-line); margin: 0 4px; }
.tk-vkeys { position: absolute; right: 26px; bottom: 30px; font: 400 12px var(--tk-f); color: var(--tk-sub); }
@media (max-width: 1100px) { .tk-vkeys { display: none; } }
@media (max-width: 760px) {
  .tk-vbody { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px; padding: 0 10px; } .tk-vside { max-height: 30vh; margin: 0; padding: 14px 16px; border-radius: 22px; }
  .tk-viewer.tk-cmp .tk-vpanes { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .tk-vkeys, .tk-vpos { display: none; } .tk-vh { padding: 10px 10px 4px; gap: 6px; } .tk-vh h2 { font-size: 17px; margin-left: 2px; } .tk-vh .tk-btn span { display: none; } .tk-vh .tk-btn { min-width: 44px; padding: 0 10px; }
  .tk-vtools { gap: 2px; margin: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px)); } .tk-vz { min-width: 52px; } .tk-vtools .tk-btn span { display: none; } .tk-vtools .tk-btn { min-width: 44px; padding: 0 10px; } .tk-vtools [data-v="zl"], .tk-vtools .tk-sep { display: none; }
}

/* ---------------------------------------------------------------- (b) the chain ladder: glass rows on soft rails */
.tk-chain { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0 22px; align-items: start; font-family: var(--tk-f); }
.tk-ctop { position: sticky; top: 0; display: grid; gap: 8px; padding: 20px 20px 22px; border-radius: var(--pm-r, 26px); background: var(--tk-sheen), var(--tk-card); color: var(--tk-ink); box-shadow: var(--tk-card-sh); }
.tk-ctop small { font: 500 11px var(--tk-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tk-sub); } .tk-ctop b { font: 450 19px/1.25 var(--tk-f); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tk-cfig { font: 300 30px/1.05 var(--tk-f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .tk-ctop p { margin: 0; font: 400 12.5px/1.5 var(--tk-f); color: var(--tk-sub); }
.tk-crows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tk-cr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 250px); gap: 8px 18px; align-items: center; margin-left: calc(var(--lvl, 0) * 30px); padding: 15px 20px 15px 20px; border-radius: var(--dl-r-lg, 22px); background: var(--tk-sheen), var(--tk-card); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--tk-card-sh); }   /* .pm-card material */
/* the rail: a soft curve from the tier above, never a hard box line */
.tk-cr::before { content: ''; position: absolute; left: -20px; top: -14px; height: calc(50% + 14px); width: 14px; border-left: 1.5px solid var(--tk-rail); border-bottom: 1.5px solid var(--tk-rail); border-bottom-left-radius: 12px; opacity: 0; }
.tk-cr[style*="--lvl:1"]::before, .tk-cr[style*="--lvl:2"]::before, .tk-cr[style*="--lvl:3"]::before, .tk-cr[style*="--lvl:4"]::before, .tk-cr[style*="--lvl:5"]::before { opacity: 1; }
.tk-cw { position: relative; display: grid; gap: 3px; min-width: 0; }
.tk-crl { font: 500 11px var(--tk-fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tk-sub); } .tk-cw b { font: 550 15.5px/1.3 var(--tk-f); letter-spacing: -.014em; color: var(--tk-ink); overflow-wrap: anywhere; } .tk-cw b a { color: inherit; text-decoration: none; } .tk-cw b a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.tk-cn { font: 400 12.5px/1.45 var(--tk-f); color: var(--tk-sub); overflow-wrap: anywhere; }
/* the edge: what passes to the firm, as a quiet figure with its state as a soft pill */
.tk-ce { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: center; justify-items: start; } .tk-ce > :not(.tk-carr) { grid-column: 2; } .tk-ce .tk-mark { white-space: normal; text-align: left; }
.tk-carr { grid-row: 1 / span 3; position: relative; width: 22px; height: 14px; } .tk-carr::before { content: ''; position: absolute; left: 0; right: 3px; top: 6.25px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tk-acc) 70%, var(--tk-sub))); } .tk-carr::after { content: ''; position: absolute; right: 1px; top: 3px; width: 6px; height: 6px; border-top: 1.5px solid color-mix(in srgb, var(--tk-acc) 70%, var(--tk-sub)); border-right: 1.5px solid color-mix(in srgb, var(--tk-acc) 70%, var(--tk-sub)); transform: rotate(45deg); }
.tk-camt { font: 300 22px/1.1 var(--tk-f); letter-spacing: -.02em; color: var(--tk-ink); font-variant-numeric: tabular-nums; } .tk-camt.tk-hid { font: 400 13px/1.35 var(--tk-f); letter-spacing: 0; color: var(--tk-sub); }
.tk-cnum { color: var(--tk-sub); }
.tk-cchips { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tk-chain.tk-compact { grid-template-columns: minmax(0, 1fr); } .tk-chain.tk-compact .tk-ctop { position: static; margin-bottom: 12px; }
@media (max-width: 760px) { .tk-chain { grid-template-columns: minmax(0, 1fr); } .tk-ctop { position: static; margin-bottom: 12px; } .tk-cr { grid-template-columns: minmax(0, 1fr); margin-left: calc(var(--lvl, 0) * 18px); padding: 14px 16px; } .tk-cr::before { left: -14px; width: 10px; } }

/* ---------------------------------------------------------------- (d) the calendar: the DISPATCH calendar's own look
   V36-H: the kit's calendar look (glowing rings, floating chips, a bare grid of numbers) is gone. TCCKit.calendar draws the
   Dispatch calendar's markup (.cal-a · .cal-board .cb-day · .cal-strip .sd · .cal-mon .md) and loads its stylesheets
   (calendar-a.css, dl-calendar.css), so it looks like /calendar. Only what the kit adds is here: N days in the row, the picked
   day (the phone strip's picked-day mark, calendar-a.css .sd[aria-current] + dl-calendar.css), a warn figure in the board's
   warn colour, and the month's range line. */
div.cal-a.tk-cal { max-width: 100%; min-width: 0; contain: inline-size; }   /* its width is its host's, never its 14 days' (the phone week scrolls inside itself) */   /* calendar-a.css caps the page's own board at 1320 px; the kit fits its host */
.tk-cal-strip .cal-board, .tk-cal-strip .cal-strip { grid-template-columns: repeat(var(--tk-n, 7), minmax(0, 1fr)); }
.tk-cal-strip .cal-strip { margin: 0; }
/* V36-H2 · a phone week longer than seven days (/jobs "next two weeks", a job's Days) scrolls inside its own card: the board's frame
   (dl-calendar.css .cal-board: --k-surface, --dl-r-lg, --dl-shadow), snap to a day, and the right edge fades while more days follow */
.cal-a.tk-cal.tk-cal-strip .cal-strip.tk-scroll { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64px; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 8px; scrollbar-width: none; padding: 8px; border-radius: var(--dl-r-lg, 22px); background: var(--k-surface); box-shadow: var(--dl-shadow); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.cal-a.tk-cal.tk-cal-strip .cal-strip.tk-scroll::-webkit-scrollbar { display: none; }
.cal-a.tk-cal.tk-cal-strip .cal-strip.tk-scroll.tk-end { -webkit-mask-image: none; mask-image: none; }
.cal-a.tk-cal.tk-cal-strip .cal-strip.tk-scroll > .sd { scroll-snap-align: start; }
body.ws-page.surface .cal-a.tk-cal .cb-day { position: relative; top: auto; }   /* a row of day heads on its own: nothing to stick under */
body.ws-page.surface .cal-a.tk-cal .cb-day.tk-sel, body.ws-page.surface .cal-a.tk-cal .md.tk-sel { background: color-mix(in srgb, var(--k-signal) 8%, var(--k-surface)); box-shadow: inset 0 -2px 0 var(--k-signal); }
body.ws-page.surface .cal-a.tk-cal .cb-day.today.tk-sel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-slate) 45%, transparent), inset 0 -2px 0 var(--k-signal); }
.cal-a.tk-cal .cb-day .dfig b.warn, .cal-a.tk-cal .sd b.warn { color: var(--k-warn); }
.cal-a.tk-cal .tk-calh { justify-content: flex-start; padding: 0 0 8px; margin: 0 0 10px; } .cal-a.tk-cal .tk-calh .rng { padding: 0; }

/* ---------------------------------------------------------------- (e) overlays: drawer · dialog · pop-over — approved soft frost */
.tk-layer { font-family: var(--tk-f); }
.tk-dwrap { position: fixed; inset: 0; z-index: 9000; pointer-events: none; } .tk-dwrap.on { pointer-events: auto; }
.tk-scrim { position: absolute; inset: 0; background: var(--tk-scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--tk-ease); }
.tk-dwrap.on .tk-scrim, .tk-mwrap.on .tk-scrim { opacity: 1; }
.tk-drawer { position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(540px, calc(100vw - 28px)); overflow-y: auto; overscroll-behavior: contain; border-radius: 30px; padding: 16px 26px 30px; transform: translateX(calc(100% + 24px)); transition: transform .38s var(--tk-ease); outline: 0; box-sizing: border-box; }
.tk-dwrap.on .tk-drawer { transform: none; } .tk-drawer:focus-visible { box-shadow: var(--tk-sh), inset 0 0 0 2px var(--tk-focus); }
.tk-dnav { position: sticky; top: -16px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: -16px -16px 6px; padding: 12px 6px 8px; background: linear-gradient(var(--tk-solid) 78%, transparent); }
.tk-grab { display: none; }
@media (max-width: 760px) {
  .tk-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 92vh; border-radius: 28px 28px 0 0; padding: 10px 16px calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); }
  .tk-grab { display: block; width: 40px; height: 5px; border-radius: 3px; margin: 2px auto 8px; background: color-mix(in srgb, var(--tk-ink) 18%, transparent); }
}
html.tk-locked, html.tk-locked body { overflow: hidden; }
.tk-mwrap { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: start center; padding: 9vh 20px 30px; overflow-y: auto; }
.tk-modal { position: relative; width: 100%; max-width: 560px; border-radius: 30px; padding: 22px 26px 24px; outline: 0; box-sizing: border-box; transform: translateY(12px) scale(.985); opacity: 0; transition: transform .32s var(--tk-ease), opacity .22s; }
.tk-modal.tk-m-s { max-width: 420px; } .tk-modal.tk-m-l { max-width: 820px; } .tk-mwrap.on .tk-modal { transform: none; opacity: 1; }
.tk-mh { display: flex; align-items: flex-start; gap: 12px; } .tk-mh h2 { flex: 1; margin: 4px 0 12px; font: 400 25px/1.15 var(--tk-f); letter-spacing: -.03em; color: var(--tk-ink); text-wrap: balance; }
.tk-mbody { font: 400 14.5px/1.55 var(--tk-f); color: var(--tk-ink2); } .tk-mf { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (max-width: 760px) { .tk-mwrap { place-items: end stretch; padding: 0; } .tk-modal { max-width: none !important; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } .tk-mf .tk-btn { flex: 1 1 100%; min-height: 48px; } }
.tk-pop { position: fixed; z-index: 9200; min-width: 210px; max-width: min(360px, calc(100vw - 16px)); padding: 6px; border-radius: 20px; outline: 0; box-sizing: border-box; }
.tk-pop a, .tk-pop button { font-family: var(--tk-f); }
@media (prefers-reduced-motion: reduce) { .tk-drawer, .tk-modal, .tk-scrim, .tk-viewer.tk-in { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- the overlay foundation applied to the office's existing
   surfaces that sit over content (STANDARDS §2 readable surfaces, §5.6): the More list, the places' menus, the find results,
   the profile menu and the popouts were frosted glass at 82 % — readable over the lit field, not over a page of text. Solid now. */
html.nx-on body.ws-page.surface .places .more-list, html.nx-on body.ws-page.surface .places .menu, html.nx-on body.ws-page.surface .places [role="menu"], html.nx-on body.ws-page.surface .top .results,
html.nx-on body .who-menu, html.nx-on body #whoMenu, html.nx-on body [role="menu"]:not(.tk-pop), html.nx-on body .row-menu, html.nx-on body .rowmenu { background: var(--tk-menu) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
/* the drawer itself takes focus when it opens (tabindex -1, so Tab starts inside it): no bright ring around the whole sheet — the
   controls inside keep their own focus rings */
html.nx-on .pm-drawer[tabindex="-1"]:focus, html.nx-on .pm-drawer[tabindex="-1"]:focus-visible, .tk-drawer[tabindex="-1"]:focus, .tk-drawer[tabindex="-1"]:focus-visible { outline: 0 !important; box-shadow: inset 0 1px 0 var(--tk-edge), inset 0 0 0 1px var(--tk-line), 0 40px 90px -40px rgba(10, 25, 18, .6); }   /* = .pm-drawer at rest (nx-system.css:185) */
/* a sheet drawer drawn into the shared drawer (telemetry, devices): its own frame steps aside — the drawer is the frame */
html body .pm-drawer .ddr.tk-in-drawer, html body .tk-drawer .ddr.tk-in-drawer { position: static !important; inset: auto !important; width: auto !important; max-width: none !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; animation: none !important; z-index: auto !important; overflow: visible !important; }
html body .pm-drawer .ddr.tk-in-drawer > .ddh .x, html body .tk-drawer .ddr.tk-in-drawer > .ddh .x { display: none !important; }
/* the telemetry and device timelines drawn into the shared drawer read in the drawer's own ink (they were drawn for a dark sheet) */
html body .pm-drawer .ddr.tk-in-drawer .ttl-svg text, html body .tk-drawer .ddr.tk-in-drawer .ttl-svg text { fill: var(--pm-sub, var(--tk-sub)); font-family: var(--tk-f); font-weight: 500; }
html body .pm-drawer .ddr.tk-in-drawer .ttl-svg .lane, html body .tk-drawer .ddr.tk-in-drawer .ttl-svg .lane { fill: var(--tk-wash); stroke: var(--tk-line); }
html body .pm-drawer .ddr.tk-in-drawer .ttl-svg .ax, html body .tk-drawer .ddr.tk-in-drawer .ttl-svg .ax { stroke: var(--tk-line); }
/* a component inside a grid or flex parent never widens it (a strip scrolls inside itself; the month shrinks to the column) */
.tk-cal, .tk-cgrid, .tk-evs, .tk-chain, .tk-crows, .tk-cw, .tk-ce, .tk-folders { min-width: 0; max-width: 100%; }

/* L7 · STANDARDS §2b, 16 Oct 2026 · approved Shell + Kit. One shared copy serves office, field and portals.
   Overlay tint is deliberately 82%, with 18px soft blur. The document viewer's full field remains opaque; it is a workspace.
   The existing evidence, chain and calendar anatomy stays intact. Their shared controls/materials receive this same kit. */
:root {
  --tk-ink:#15201a; --tk-ink2:#526158; --tk-sub:#59685f; --tk-line:rgba(21,32,26,.10); --tk-line2:rgba(21,32,26,.24);
  --tk-wash:rgba(21,32,26,.04); --tk-menu:rgba(247,249,248,.82); --tk-edge:rgba(255,255,255,.9);
  --tk-glass:rgba(255,255,255,.58); --tk-glass-hi:rgba(255,255,255,.95); --tk-card:var(--tk-glass); --tk-card-f:var(--tk-glass-hi);
  --tk-btn:var(--tk-glass-hi); --tk-btn-hi:#fff; --tk-acc:#81e59d; --tk-on-accent:#0d2a17;
  --tk-prim:var(--tk-acc); --tk-on-prim:var(--tk-on-accent); --tk-prim-sh:0 8px 22px -14px rgba(42,150,73,.55);
  --tk-ok:var(--tk-ink); --tk-warn:#8c5f12; --tk-bad:#a33e26; --tk-info:var(--tk-ink2); --tk-quiet:var(--tk-ink2);
  --tk-focus:var(--tk-ink); --tk-field:#e3e8e5; --tk-solid:rgba(247,249,248,.97); --tk-solid2:#eef1ef;
  --tk-card-sh:0 40px 90px -36px rgba(21,32,26,.45),inset 0 1px 0 rgba(255,255,255,.9);
  --tk-sh:inset 0 1px 0 var(--tk-edge),inset 0 0 0 1px var(--tk-line),0 24px 60px -22px rgba(21,32,26,.40);
  --tk-scrim:rgba(21,32,26,.22); --tk-btn-sh:inset 0 0 0 1px var(--tk-line2),0 2px 6px -4px rgba(21,32,26,.24);
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
  --tk-ink:#f2f5f2; --tk-ink2:#b5bfb8; --tk-sub:#a7b3aa; --tk-line:rgba(242,245,242,.10); --tk-line2:rgba(242,245,242,.22);
  --tk-wash:rgba(242,245,242,.04); --tk-menu:rgba(24,30,27,.82); --tk-edge:rgba(255,255,255,.12);
  --tk-glass:rgba(16,21,18,.52); --tk-glass-hi:rgba(255,255,255,.07); --tk-btn:var(--tk-glass-hi); --tk-btn-hi:rgba(255,255,255,.12);
  --tk-ok:var(--tk-ink); --tk-info:var(--tk-ink2); --tk-quiet:var(--tk-ink2); --tk-card:var(--tk-glass); --tk-card-f:var(--tk-glass-hi); --tk-prim:var(--tk-acc); --tk-on-prim:var(--tk-on-accent); --tk-warn:#d9b35a; --tk-bad:#ec9a85; --tk-field:#0f1311; --tk-solid:rgba(24,30,27,.97); --tk-solid2:#161b18;
  --tk-card-sh:0 40px 90px -30px rgba(0,0,0,.85),inset 0 2px 0 rgba(255,255,255,.03);
  --tk-sh:inset 0 1px 0 var(--tk-edge),inset 0 0 0 1px var(--tk-line),0 30px 70px -24px rgba(0,0,0,.78);
  --tk-scrim:rgba(0,0,0,.25); --tk-btn-sh:inset 0 0 0 1px var(--tk-line2),0 2px 6px -4px rgba(0,0,0,.4);
} }
:root[data-theme="dark"] {
  --tk-ink:#f2f5f2; --tk-ink2:#b5bfb8; --tk-sub:#a7b3aa; --tk-line:rgba(242,245,242,.10); --tk-line2:rgba(242,245,242,.22);
  --tk-wash:rgba(242,245,242,.04); --tk-menu:rgba(24,30,27,.82); --tk-edge:rgba(255,255,255,.12);
  --tk-glass:rgba(16,21,18,.52); --tk-glass-hi:rgba(255,255,255,.07); --tk-btn:var(--tk-glass-hi); --tk-btn-hi:rgba(255,255,255,.12);
  --tk-ok:var(--tk-ink); --tk-info:var(--tk-ink2); --tk-quiet:var(--tk-ink2); --tk-card:var(--tk-glass); --tk-card-f:var(--tk-glass-hi); --tk-prim:var(--tk-acc); --tk-on-prim:var(--tk-on-accent); --tk-warn:#d9b35a; --tk-bad:#ec9a85; --tk-field:#0f1311; --tk-solid:rgba(24,30,27,.97); --tk-solid2:#161b18;
  --tk-card-sh:0 40px 90px -30px rgba(0,0,0,.85),inset 0 2px 0 rgba(255,255,255,.03);
  --tk-sh:inset 0 1px 0 var(--tk-edge),inset 0 0 0 1px var(--tk-line),0 30px 70px -24px rgba(0,0,0,.78);
  --tk-scrim:rgba(0,0,0,.25); --tk-btn-sh:inset 0 0 0 1px var(--tk-line2),0 2px 6px -4px rgba(0,0,0,.4);
}
.tk-surface { background:var(--tk-menu)!important; backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); }
:root .tk-btn { min-height:38px; padding:0 15px; border-radius:12px; font:400 13.5px var(--tk-f); transition:background .18s,transform .2s var(--tk-ease); }
:root .tk-btn.tk-round { width:38px; padding:0; border-radius:50%; }
:root .tk-btn.tk-primary { color:var(--tk-on-accent); background:var(--tk-acc); box-shadow:var(--tk-prim-sh); font-weight:500; }
:root .tk-btn.tk-primary:hover { background:var(--tk-acc); filter:brightness(1.025); }
:root .tk-btn:focus-visible { outline:2px solid var(--tk-ink); outline-offset:3px; }
:root .tk-btn:disabled { opacity:.45; cursor:default; transform:none; filter:none; }
:root .tk-quiet-btn { background:transparent; padding:0; min-height:38px; border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; text-decoration:underline; text-decoration-color:var(--tk-line2); text-underline-offset:3px; }
:root .tk-quiet-btn:hover { background:transparent; transform:none; text-decoration-color:currentColor; }
.tk-mark,.tk-mark.tk-s { padding:3px 0; gap:7px; border-radius:0; font:400 12.5px/1.35 var(--tk-f); }
.tk-mark:is(.tk-ok,.tk-warn,.tk-bad,.tk-info,.tk-quiet,.tk-pending) { background:transparent; }
.tk-mark .tk-md,.tk-mark.tk-s .tk-md { width:7px; height:7px; box-shadow:none; }
.tk-mark.tk-pending .tk-md { background:transparent; box-shadow:inset 0 0 0 1px currentColor; }
.tk-field { display:grid; gap:6px; min-width:0; font-family:var(--tk-f); }
.tk-field>label,.tk-modal .field>label,.tk-drawer .field>label { display:block; color:var(--tk-ink2); font:400 12px/1.4 var(--tk-f); }
.tk-input { position:relative; min-width:0; }
.tk-field input,.tk-field select,.tk-field textarea,.tk-modal :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),.tk-drawer .field :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { box-sizing:border-box; width:100%; min-width:0; height:40px; padding:0 12px; border:1px solid var(--tk-line2); border-radius:12px; color:var(--tk-ink); background:var(--tk-wash); box-shadow:none; font:400 13.5px/1.4 var(--tk-f); transition:border-color .18s,box-shadow .18s; }
.tk-field textarea,.tk-modal textarea,.tk-drawer .field textarea { height:auto; min-height:90px; padding:10px 12px; resize:vertical; }
.tk-field :is(input,select,textarea)::placeholder { color:var(--tk-sub); opacity:1; }
.tk-field :is(input,select,textarea):focus,.tk-modal :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus,.tk-drawer .field :is(input,select,textarea):focus { outline:0; border-color:var(--tk-ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 12%,transparent); }
.tk-field [aria-invalid="true"],.tk-modal [aria-invalid="true"],.tk-drawer .field [aria-invalid="true"] { border-color:var(--tk-bad)!important; }
.tk-hint,.tk-field-error { font:400 12px/1.45 var(--tk-f); color:var(--tk-sub); }
.tk-field-error,.tk-modal .field-error,.tk-drawer .field-error { color:var(--tk-bad); }
.tk-has-icon :is(input,select) { padding-right:38px; }
.tk-has-icon select { appearance:none; -webkit-appearance:none; }
.tk-field-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--tk-sub); display:flex; }
.tk-field-icon svg { width:16px; height:16px; }
.tk-switch-row { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; color:var(--tk-ink); font:400 13.5px var(--tk-f); }
:root .tk-switch { appearance:none; -webkit-appearance:none; box-sizing:border-box; position:relative; flex:none; width:38px; min-width:38px; height:22px; margin:0; border:0; border-radius:99px; background:color-mix(in srgb,var(--tk-ink) 18%,transparent); cursor:pointer; box-shadow:none; transition:background .18s; }
:root .tk-switch::after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:var(--tk-field); transition:transform .18s var(--tk-ease); box-shadow:0 1px 3px rgba(0,0,0,.12); }
:root .tk-switch:checked { background:var(--tk-ink); }
:root .tk-switch:checked::after { transform:translateX(16px); }
:root .tk-switch:focus-visible { outline:2px solid var(--tk-ink); outline-offset:4px; }
:root .tk-switch:disabled { cursor:default; opacity:.45; }
.tk-modal :is(input[type="checkbox"],input[type="radio"]),.tk-drawer :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--tk-ink); }
:root .tk-filter { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:5px 11px; border:1px solid var(--tk-line2); border-radius:99px; font:400 12.5px var(--tk-f); color:var(--tk-ink2); cursor:pointer; }
:root .tk-filter[aria-pressed="true"] { border-color:var(--tk-ink); color:var(--tk-ink); font-weight:500; }
:root .tk-filter:focus-visible,:root .tk-tab:focus-visible { outline:2px solid var(--tk-ink); outline-offset:3px; }
:root .tk-filter:disabled { opacity:.45; cursor:default; }
.tk-count { font:400 11px var(--tk-fm); color:var(--tk-sub); }
.tk-tabs { display:flex; gap:20px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--tk-line); font-family:var(--tk-f); }
:root .tk-tab { all:unset; box-sizing:border-box; position:relative; display:inline-flex; align-items:center; gap:5px; flex:none; min-height:40px; padding:9px 0; font:400 13.5px var(--tk-f); color:var(--tk-ink2); cursor:pointer; }
:root .tk-tab[aria-selected="true"] { color:var(--tk-ink); font-weight:500; }
.tk-tab[aria-selected="true"]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--tk-ink); }
:root .tk-tab:disabled { cursor:default; opacity:.45; }
.tk-state { display:grid; gap:8px; justify-items:start; padding:6px 0; min-width:0; color:var(--tk-ink); font:400 13.5px/1.45 var(--tk-f); }
.tk-state b { font-weight:500; }
.tk-state>span:not(.tk-skeleton) { font:400 12.5px/1.5 var(--tk-f); color:var(--tk-sub); }
.tk-state-loading { gap:10px; width:100%; }
.tk-skeleton { display:block; height:10px; min-width:30px; max-width:100%; border-radius:6px; background:color-mix(in srgb,var(--tk-ink) 8%,transparent); animation:none; }
.tk-banner { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--tk-warn) 40%,transparent); border-radius:14px; background:color-mix(in srgb,var(--tk-warn) 8%,transparent); color:var(--tk-ink); font:400 13px/1.45 var(--tk-f); }
.tk-banner>svg { flex:none; width:16px; height:16px; margin-top:1px; color:var(--tk-warn); }
.tk-banner b { font-weight:500; }
.tk-banner a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.tk-dialog-figures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; padding:12px 0; border-top:1px solid var(--tk-line); border-bottom:1px solid var(--tk-line); }
.tk-dialog-figures b { display:block; color:var(--tk-ink); font:200 28px/1 var(--tk-f); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.tk-dialog-figures span { color:var(--tk-sub); font:400 11.5px/1.4 var(--tk-f); }
.tk-ack { display:flex; align-items:center; gap:10px; color:var(--tk-ink); font:400 13px/1.45 var(--tk-f); margin-top:14px; }
.tk-ack input { width:18px; height:18px; accent-color:var(--tk-ink); }
.tk-mh h2 { font:400 19px/1.25 var(--tk-f); letter-spacing:-.01em; margin:4px 0 12px; }
.tk-mbody { font:400 13.5px/1.5 var(--tk-f); }
.tk-mbody>p:first-child { margin-top:0; }
.tk-modal { border-radius:24px; padding:22px; max-height:calc(var(--vvh,100dvh) - 40px); overflow-y:auto; overscroll-behavior:contain; }
.tk-drawer { border-radius:24px; }
.tk-dnav { background:linear-gradient(var(--tk-menu) 78%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.tk-pop { min-width:236px; max-width:min(360px,calc(100vw - 16px)); padding:6px; border-radius:16px; overflow-y:auto; overscroll-behavior:contain; }
.tk-menu { min-width:0; gap:0; }
:root .tk-mitem,:root .tk-pop .tk-btn { min-height:38px; padding:9px 10px; border-radius:10px; font:400 13.5px/1.35 var(--tk-f); gap:10px; }
:root .tk-mitem:disabled { opacity:.45; cursor:default; }
:root .tk-mitem:focus-visible { outline:2px solid var(--tk-ink); outline-offset:-2px; }
:root .tk-mitem.tk-danger,:root .tk-mitem.tk-danger svg { color:var(--tk-bad); }
.tk-mitem>span:not(.tk-menu-icon) { min-width:0; }
.tk-mitem kbd { margin-left:auto; padding-left:12px; font:400 11px var(--tk-fm); color:var(--tk-sub); }
.tk-menu-icon { flex:none; width:16px; height:16px; }
.tk-menu hr { margin:5px 8px; }
.tk-pop-head { display:none; }
.tk-pwrap { position:fixed; inset:0; z-index:9200; font-family:var(--tk-f); }
.tk-pwrap .tk-scrim { opacity:1; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tk-pop-sheet { left:0!important; right:0!important; top:auto!important; bottom:0!important; width:auto; min-width:0; max-width:none; max-height:calc(var(--vvh,100dvh) - 48px); padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px)); border-radius:26px 26px 0 0; transform:translateY(20px); opacity:0; transition:transform .24s var(--tk-ease),opacity .18s; }
.tk-pwrap.on .tk-pop-sheet { transform:none; opacity:1; }
.tk-pop-sheet .tk-pop-head { display:grid; gap:2px; }
.tk-pop-head .tk-grab { display:block; width:38px; height:4px; margin:2px auto 8px; background:var(--tk-line2); border-radius:2px; }
.tk-pop-head>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 8px 6px; }
.tk-pop-head>div>span { color:var(--tk-sub); font:400 13px var(--tk-f); }
:root .tk-pop-head .tk-btn { width:38px; min-height:38px; padding:0; border-radius:50%; justify-content:center; }
:root .tk-pop-sheet .tk-mitem { min-height:48px; padding:13px 10px; font-size:15px; }
.tk-table { min-width:0; max-width:100%; padding:6px 6px 8px; border-radius:22px; background:var(--tk-glass); backdrop-filter:blur(30px) saturate(1.25); -webkit-backdrop-filter:blur(30px) saturate(1.25); box-shadow:var(--tk-card-sh); color:var(--tk-ink); font-family:var(--tk-f); }
.tk-table table { width:100%; border-collapse:collapse; table-layout:fixed; }
.tk-table th { height:38px; color:var(--tk-sub); font:400 12px var(--tk-f); text-align:left; padding:0 14px; border-bottom:1px solid var(--tk-line); }
.tk-table td { height:56px; padding:8px 14px; border-bottom:1px solid var(--tk-line); font:400 13.5px/1.35 var(--tk-f); overflow-wrap:anywhere; vertical-align:middle; }
.tk-table tr:last-child td { border-bottom:0; }
.tk-table tbody tr:hover,.tk-table tbody tr:focus-within { background:var(--tk-wash); }
.tk-table tbody tr:is(:hover,:focus-within) .tk-more { background:var(--tk-glass-hi); color:var(--tk-ink); }
.tk-table .tk-identity { font-weight:500; }
.tk-table small { display:block; color:var(--tk-sub); font:400 12px/1.4 var(--tk-f); }
.tk-table .tk-figure { font:400 12.5px var(--tk-fm); font-variant-numeric:tabular-nums; }
.tk-table .tk-unit { font:400 11.5px var(--tk-fm); color:var(--tk-sub); }
.tk-table :is(th,td):last-child { width:40px; padding-inline:4px; }
@media (pointer:coarse),(max-width:760px) { :root .tk-btn { min-height:44px; } :root .tk-btn.tk-round { width:44px; } :root .tk-filter { min-height:44px; } :root .tk-tab { min-height:44px; } .tk-switch-row { min-height:44px; } }
@media (max-width:760px) {
  .tk-mwrap { padding:0; }
  .tk-modal,.tk-drawer { border-radius:26px 26px 0 0; max-height:calc(var(--vvh,100dvh) - 32px); padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px)); }
  .tk-mf { justify-content:flex-end; gap:10px; } .tk-mf .tk-btn { flex:0 1 auto; }
  .tk-table table,.tk-table tbody { display:block; }
  .tk-table thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
  .tk-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto 44px; align-items:center; gap:6px 10px; padding:10px 12px; border-bottom:1px solid var(--tk-line); }
  .tk-table tr:last-child { border-bottom:0; }
  .tk-table td { display:none; height:auto; padding:0; border:0; }
  .tk-table td:is(.tk-identity,.tk-row-state,.tk-row-actions) { display:block; }
  .tk-table td.tk-row-actions { width:44px; }
}
@media (prefers-reduced-motion:reduce) { :root .tk-btn,.tk-switch,.tk-switch::after,.tk-pop-sheet,.tk-field :is(input,select,textarea) { transition:none!important; animation:none!important; } }

/* L7 adoption bridge · same existing nodes, selectors, handlers and names. Common dialogs/menus and record tabs are shared
   components even on a page whose recipe is still queued. These overrides change material/geometry, never field order. */
html.l7-on body.surface :is(.modal>.inner,.pm-drawer,.peek,.popout,.dmenu>.pop) { background:var(--tk-menu)!important; color:var(--tk-ink)!important; backdrop-filter:blur(18px) saturate(1.3)!important; -webkit-backdrop-filter:blur(18px) saturate(1.3)!important; box-shadow:var(--tk-sh)!important; border-color:var(--tk-line)!important; }
html.l7-on body.surface .modal>.inner { border-radius:24px!important; font-family:var(--tk-f)!important; }
html.l7-on body.surface .modal .dlg-head { background:none!important; border:0!important; }
html.l7-on body.surface .modal .dlg-head h2 { color:var(--tk-ink)!important; font:400 19px/1.25 var(--tk-f)!important; letter-spacing:-.01em!important; }
html.l7-on body.surface .modal .dlg-body { color:var(--tk-ink2)!important; font:400 13.5px/1.5 var(--tk-f)!important; }
html.l7-on body.surface .modal :is(.what,.keeps,.after,.incompany) { font:400 13.5px/1.5 var(--tk-f)!important; color:var(--tk-ink2)!important; }
html.l7-on body.surface .modal .field>label,html.l7-on body.surface main .field>label { color:var(--tk-ink2)!important; font:400 12px/1.4 var(--tk-f)!important; }
html.l7-on body.surface :is(.modal,main) .field :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]) { box-sizing:border-box; min-height:40px; border:1px solid var(--tk-line2)!important; border-radius:12px!important; background:var(--tk-wash)!important; color:var(--tk-ink)!important; padding:9px 12px; box-shadow:none!important; font:400 13.5px/1.4 var(--tk-f)!important; }
html.l7-on body.surface :is(.modal,main) .field :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus { border-color:var(--tk-ink)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 12%,transparent)!important; outline:0!important; }
html.l7-on body.surface :is(.modal,main) .field [aria-invalid="true"] { border-color:var(--tk-bad)!important; }
html.l7-on body.surface :is(.modal,main) .field .field-error { color:var(--tk-bad)!important; font:400 12px/1.45 var(--tk-f)!important; }
html.l7-on body.surface :is(.modal,main) .field .hint { color:var(--tk-sub)!important; font:400 12px/1.45 var(--tk-f)!important; }
html.l7-on body.surface .modal :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--tk-ink); }
html.l7-on.nx-on body.ws-page.surface :is(.dlg-foot,.modal .actions,.modal .acts,.modal .foot) :is(button,a),html.l7-on body.surface main :is(button.ghost,a.ghost,button.primary,a.primary,.pm-pill) { min-height:38px; padding:0 15px; border:0!important; border-radius:12px!important; background:var(--tk-btn)!important; color:var(--tk-ink)!important; box-shadow:var(--tk-btn-sh)!important; font:400 13.5px var(--tk-f)!important; }
html.l7-on.nx-on body.ws-page.surface :is(.dlg-foot,.modal .actions,.modal .acts,.modal .foot) :is(.primary,.danger,[data-ok]),html.l7-on body.surface main :is(button.primary,a.primary,.pm-pill.dark) { background:var(--tk-acc)!important; color:var(--tk-on-accent)!important; box-shadow:var(--tk-prim-sh)!important; font-weight:500!important; }
html.l7-on.nx-on body.ws-page.surface :is(.dlg-foot,.modal .actions,.modal .acts,.modal .foot) :is(button,a):focus-visible,html.l7-on body.surface main :is(button.ghost,a.ghost,button.primary,a.primary,.pm-pill):focus-visible { outline:2px solid var(--tk-ink)!important; outline-offset:3px; }
html.l7-on body.surface :is(.tabs,.ws-tabs) { gap:0 20px!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:inset 0 -1px 0 var(--tk-line)!important; }
html.l7-on body.surface :is(.tabs,.ws-tabs)>:is(button,a,.tab) { position:relative; min-height:40px; padding:9px 0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; color:var(--tk-ink2)!important; font:400 13.5px var(--tk-f)!important; }
html.l7-on body.surface :is(.tabs,.ws-tabs)>:is(.on,[aria-selected="true"],[aria-current="page"]) { color:var(--tk-ink)!important; background:none!important; box-shadow:inset 0 -1.5px 0 var(--tk-ink)!important; font-weight:500!important; }
html.l7-on body.surface :is(.tabs,.ws-tabs)>[hidden] { display:none!important; }
html.l7-on body.surface :is(.tabs,.ws-tabs) :is(.tag,.ws-tab-n) { color:var(--tk-sub)!important; background:none!important; font:400 11px var(--tk-fm)!important; }
html.l7-on body.surface .seg { display:inline-flex!important; align-items:center; gap:2px!important; padding:3px!important; border:0!important; border-radius:12px!important; background:color-mix(in srgb,var(--tk-ink) 6%,transparent)!important; box-shadow:none!important; }
html.l7-on body.surface .seg>:is(button,a) { min-height:30px!important; padding:5px 11px!important; border:0!important; border-radius:9px!important; background:transparent!important; color:var(--tk-ink2)!important; box-shadow:none!important; font:400 12.5px var(--tk-f)!important; }
html.l7-on body.surface .seg>:is(.on,[aria-selected="true"],[aria-pressed="true"]) { color:var(--tk-ink)!important; background:var(--tk-glass-hi)!important; font-weight:500!important; box-shadow:0 1px 4px -2px rgba(0,0,0,.25)!important; }
html.l7-on body.surface details.dmenu>summary { width:38px; height:38px; border-radius:50%; color:var(--tk-ink2); font:500 16px var(--tk-f); letter-spacing:.05em; }
html.l7-on body.surface details.dmenu>.pop { padding:6px!important; border-radius:16px!important; }
html.l7-on body.surface details.dmenu>.pop>:is(a,button) { display:flex; align-items:center; gap:10px; min-height:38px; padding:9px 10px; border:0!important; border-radius:10px; color:var(--tk-ink)!important; background:none!important; box-shadow:none!important; font:400 13.5px/1.35 var(--tk-f)!important; }
html.l7-on body.surface details.dmenu>.pop>:is(a,button).danger { color:var(--tk-bad)!important; }
/* A portaled legacy menu keeps the entire details ancestor for existing delegated handlers. Its summary is still the opener
   after close; no cloned buttons and no synthetic re-dispatch. */
.tk-pop details.dmenu { display:block; position:static; width:100%; }
.tk-pop details.dmenu>summary { display:none!important; }
.tk-pop details.dmenu>.pop { display:grid!important; position:static!important; min-width:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; }
.tk-pop details.dmenu>.pop>:is(a,button) { text-decoration:none; }
html.l7-on body.surface .toasts { position:fixed!important; left:50%!important; right:auto!important; top:auto!important; bottom:calc(26px + env(safe-area-inset-bottom,0px))!important; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 28px); z-index:10000; }
html.l7-on body.surface .toast,html.l7-on .tk-toast { display:flex; align-items:center; gap:12px; padding:11px 12px 11px 16px; border:1px solid var(--tk-line)!important; border-radius:16px!important; background:var(--tk-menu)!important; color:var(--tk-ink)!important; box-shadow:var(--tk-sh)!important; backdrop-filter:blur(18px) saturate(1.3)!important; -webkit-backdrop-filter:blur(18px) saturate(1.3)!important; font:400 13.5px/1.4 var(--tk-f)!important; }
html.l7-on .tk-toast button { background:none; border:0; color:var(--tk-ink); font:400 13px var(--tk-f); min-height:28px; cursor:pointer; }
html.l7-on .tk-toast [data-undo] { text-decoration:underline; text-underline-offset:3px; }
html.l7-on .tk-toast [data-close] { margin-left:auto; color:var(--tk-sub); }
html.l7-on .tk-banner { color:var(--tk-ink)!important; }
@media (pointer:coarse),(max-width:760px) {
  html.l7-on.nx-on body.ws-page.surface :is(.dlg-foot,.modal .actions,.modal .acts,.modal .foot) :is(button,a),html.l7-on body.surface main :is(button.ghost,a.ghost,button.primary,a.primary,.pm-pill) { min-height:44px; }
  html.l7-on body.surface :is(.tabs,.ws-tabs)>:is(button,a,.tab) { min-height:44px; }
  html.l7-on body.surface .seg>:is(button,a) { min-height:38px!important; }
  html.l7-on body.surface details.dmenu>summary { width:44px; height:44px; }
  /* NX text-menu chrome sets width:auto!important and min-width40px; the shared phone opener needs both hit dimensions. */
  html.l7-on.nx-on body.ws-page.surface details.dmenu>summary:not(:empty) { box-sizing:border-box; width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; }
  html.l7-on body.surface .modal>.inner { border-radius:26px 26px 0 0!important; }
  html.l7-on body.surface .toasts { bottom:calc(92px + env(safe-area-inset-bottom,0px))!important; }
}
/* The previous shared skin used #nx-tab inside :is() for every tablist, giving unrelated record tabs ID specificity.
   This adoption selector deliberately matches that weight once; all existing tab controls keep their own IDs and events. */
html.l7-on.nx-on body.ws-page.surface :is(.tk-tabs,.ws-tabs,.tabs):not(.l7-owned-sections):is(#nx-tab,[role="tablist"],.tk-tabs,.ws-tabs,.tabs)>:is(button,a,[role="tab"]):is(:enabled,:disabled,[href]) { min-height:40px!important; height:auto!important; padding:9px 0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--tk-ink2)!important; box-shadow:none!important; font:400 13.5px var(--tk-f)!important; letter-spacing:0!important; text-transform:none!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-tabs,.ws-tabs,.tabs):not(.l7-owned-sections):is(#nx-tab,[role="tablist"],.tk-tabs,.ws-tabs,.tabs)>:is(button,a,[role="tab"]):is(.on,[aria-selected="true"],[aria-current="page"]) { background:transparent!important; color:var(--tk-ink)!important; box-shadow:inset 0 -1.5px 0 var(--tk-ink)!important; font-weight:500!important; }
html.l7-on.nx-on body.ws-page.surface .tk-tabs>[role="tab"]::after { display:none!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { min-height:40px!important; height:40px; padding:0 12px!important; border:1px solid var(--tk-line2)!important; border-radius:12px!important; background:var(--tk-wash)!important; color:var(--tk-ink)!important; box-shadow:none!important; font:400 13.5px/1.4 var(--tk-f)!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) textarea:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { height:auto!important; min-height:90px!important; padding:10px 12px!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) .tk-has-icon :is(input,select) { padding-right:38px!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus { border-color:var(--tk-ink)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 12%,transparent)!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--tk-bad)!important; }
html.l7-on.nx-on body.ws-page.surface input.tk-switch { -webkit-appearance:none!important; appearance:none!important; position:relative!important; width:38px!important; min-width:38px!important; height:22px!important; min-height:22px!important; padding:0!important; border:0!important; border-radius:99px!important; background:color-mix(in srgb,var(--tk-ink) 18%,transparent)!important; box-shadow:none!important; }
html.l7-on.nx-on body.ws-page.surface input.tk-switch:checked { background:var(--tk-ink)!important; }
html.l7-on.nx-on body.ws-page.surface input.tk-switch::after { display:block!important; border-radius:50%!important; }
html.l7-on.nx-on body.ws-page.surface .tk-table th { height:38px!important; padding:0 14px!important; border-bottom:1px solid var(--tk-line)!important; background:transparent!important; color:var(--tk-sub)!important; font:400 12px var(--tk-f)!important; letter-spacing:0!important; text-transform:none!important; }
html.l7-on.nx-on body.ws-page.surface .tk-table td { height:56px; padding:8px 14px!important; border-bottom:1px solid var(--tk-line)!important; border-left:0!important; box-shadow:none!important; background:transparent!important; font:400 13.5px/1.35 var(--tk-f)!important; }
html.l7-on.nx-on body.ws-page.surface .tk-table tr:last-child td { border-bottom:0!important; }
html.l7-on.nx-on body.ws-page.surface .tk-table tr:hover td,html.l7-on.nx-on body.ws-page.surface .tk-table tr:focus-within td { background:var(--tk-wash)!important; box-shadow:none!important; }
@media (max-width:760px) {
  html.l7-on.nx-on body.ws-page.surface :is(.tk-tabs,.ws-tabs,.tabs):not(.l7-owned-sections):is(#nx-tab,[role="tablist"],.tk-tabs,.ws-tabs,.tabs)>:is(button,a,[role="tab"]):is(:enabled,:disabled,[href]) { min-height:44px!important; }
  /* 16px on the actual input avoids iOS automatic page zoom; the containing field keeps the approved40px geometry. */
  html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { font-size:16px!important; }
  html.l7-on.nx-on body.ws-page.surface .tk-table td { height:auto; padding:0!important; border:0!important; }
}

/* Keep the error/focus edge above the legacy generic input rules, which count every :not() in their specificity. */
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus { border-color:var(--tk-ink)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 12%,transparent)!important; }
html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.field) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])[aria-invalid="true"] { border-color:var(--tk-bad)!important; }
html.l7-on.nx-on body.ws-page.surface .tk-table td.tk-figure { font-family:var(--tk-fm)!important; font-variant-numeric:tabular-nums; }
.tk-has-icon input[type="date"]::-webkit-calendar-picker-indicator { opacity:0; }

/* A child overlay of a native retained-workflow dialog stays a DOM descendant (so it is not inert) and uses the browser's
   top layer (so a parent's backdrop filter/overflow cannot clip or offset its fixed position). */
.tk-top[popover] { margin:0; border:0; width:auto; height:auto; max-width:none; max-height:none; padding:0; overflow:visible; background:transparent; color:inherit; }
.tk-mwrap.tk-top[popover] { padding:9vh 20px 30px; overflow-y:auto; }
.tk-pop.tk-top[popover] { min-width:236px; max-width:min(360px,calc(100vw - 16px)); padding:6px; overflow-y:auto; background:var(--tk-menu); color:var(--tk-ink); }
.tk-peek.tk-top[popover] { padding:16px; background:var(--tk-menu); color:var(--tk-ink); }
@media(max-width:760px) { .tk-mwrap.tk-top[popover] { padding:0; } }

/* AA safeguard over arbitrary content: the menu itself remains exactly82%/18px. Only the destructive row gets a faint
   second wash of the SAME frost; exact approved red ink passes even over a black/white document behind the menu. */
:root .tk-menu .tk-mitem.tk-danger,html.l7-on body.surface details.dmenu>.pop>.tk-mitem.danger { background:color-mix(in srgb,var(--tk-menu) 35%,transparent)!important; }

@media(pointer:coarse),(max-width:760px) { html.l7-on .tk-toast button,html.l7-on .tk-banner button[data-close],html.l7-on .tk-banner button[data-notice-close] { min-width:44px; min-height:44px; } }

@media(pointer:coarse),(max-width:760px) { :root .tk-pop-head .tk-btn { width:44px; min-width:44px; min-height:44px; } }

/* Native record sheets keep the supplied identity beside a fixed close target. The old generic NX menu-button rule
   otherwise makes this close button100% wide and squeezes the identity down to a few letters. */
@media(max-width:700px) {
  html.l7-on body.surface details.dmenu>.pop.l7-native-menu .l7-menu-head>div>span { flex:1; min-width:0; text-align:left; font:400 13px/1.45 var(--tk-f); }
  html.l7-on body.surface details.dmenu>.pop.l7-native-menu .l7-menu-head>div>[data-l7-menu-close] { display:grid!important; place-items:center; flex:0 0 44px; width:44px!important; min-width:44px; height:44px!important; min-height:44px; margin-left:auto; padding:0!important; border:0!important; border-radius:50%!important; background:none!important; color:var(--tk-ink)!important; box-shadow:none!important; font:400 22px/1 var(--tk-f)!important; }
}

/* Claude shell review,16Oct · shared kit consumers keep one quiet keyboard ring, never a black outline.
   The single modality hook is in tcc-kit.js, shared by office, field and portals. Base button depth remains separate. */
:root .tk-btn { --l7-control-rest-shadow:var(--tk-btn-sh); }
:root .tk-btn.tk-primary { --l7-control-rest-shadow:var(--tk-prim-sh); }
:root .tk-tab[aria-selected="true"] { --l7-control-rest-shadow:inset 0 -1.5px 0 var(--tk-ink); }
:root :is(.tk-btn,.tk-switch,.tk-filter,.tk-tab,.tk-mitem,.tk-ev,.tk-vst):focus,
:root :is(.tk-modal,.tk-drawer,.tk-pop,.tk-viewer) :is(button,a[href],summary,input,select,textarea,[tabindex="0"]):focus { outline:0!important; outline-offset:0!important; box-shadow:var(--l7-control-rest-shadow,none)!important; }
:root[data-l7-keyboard="true"] :is(.tk-btn,.tk-switch,.tk-filter,.tk-tab,.tk-mitem,.tk-ev,.tk-vst):focus-visible,
:root[data-l7-keyboard="true"] :is(.tk-modal,.tk-drawer,.tk-pop,.tk-viewer) :is(button,a[href],summary,input,select,textarea,[tabindex="0"]):focus-visible { outline:0!important; outline-offset:0!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 18%,transparent)!important; }
:root :is(.tk-field,.tk-modal .field,.tk-drawer .field)>label,
:root :is(.tk-field,.tk-modal .field,.tk-drawer .field)>label>span { font:400 12px/1.4 var(--tk-f)!important; text-transform:none!important; letter-spacing:normal!important; }
/* The .tk-table is the glass panel. Its actual table is an unframed row grid, not a second card. */
:root .tk-table table { background:transparent!important; background-image:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; margin:0!important; }

:root .tk-field :is(input,select,textarea):focus { outline:0!important; box-shadow:none!important; }
:root[data-l7-keyboard="true"] .tk-field :is(input,select,textarea):focus-visible { outline:0!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 18%,transparent)!important; }

/* A retained text-labelled menu needs room for its words; canonical dot triggers keep their fixed circle. */
html.l7-on.nx-on body.ws-page.surface details.dmenu:not([data-l7-menu="1"])>summary.btn { width:auto!important; min-width:38px!important; padding:0 12px!important; white-space:nowrap!important; overflow-wrap:normal!important; word-break:normal!important; flex:none; }
@media (pointer:coarse),(max-width:760px) {
  html.l7-on.nx-on body.ws-page.surface details.dmenu:not([data-l7-menu="1"])>summary.btn { min-width:44px!important; min-height:44px!important; }
}

/* Native overflow triggers share the menu focus. Retained day-header IDs cannot mask it with a resting shadow. */
html.l7-on.nx-on body.ws-page.surface :is(details.dmenu,#daySurface #dayNav details.dmenu)>summary:focus { outline:0!important; outline-offset:0!important; box-shadow:var(--l7-control-rest-shadow,none)!important; }
html.l7-on.nx-on[data-l7-keyboard="true"] body.ws-page.surface :is(details.dmenu,#daySurface #dayNav details.dmenu)>summary:focus-visible { outline:0!important; outline-offset:0!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tk-ink) 18%,transparent)!important; }

/* Build154 detail audit. Titled record menus use neutral GLASS, measured right-edge placement, and one icon per row. */
.tk-pop.tk-menu-pop,.tk-pop.tk-top[popover].tk-menu-pop{min-width:min(260px,calc(100vw - 16px));width:300px;max-width:min(320px,calc(100vw - 16px));padding:8px;border:1px solid var(--tk-line)!important;border-radius:16px!important;background:var(--tk-menu)!important;backdrop-filter:blur(24px) saturate(1.3)!important;-webkit-backdrop-filter:blur(24px) saturate(1.3)!important}
.tk-menu-title{padding:8px 10px 12px;font:500 13px/1.4 var(--tk-f);color:var(--tk-ink2);overflow-wrap:anywhere}
:root .tk-menu .tk-mitem{min-height:40px;padding:8px 10px;gap:10px}
:root .tk-menu .tk-mitem:disabled{opacity:1;color:var(--tk-sub)}
.tk-menu-words{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;overflow-wrap:anywhere}
.tk-menu-words small{font:400 11px/1.4 var(--tk-fm);color:var(--tk-sub)}
.tk-menu .tk-mitem>svg{stroke-width:1.5}
@media(max-width:760px){.tk-pop-sheet.tk-menu-pop{width:auto;min-width:0;max-width:none;border-radius:26px 26px 0 0!important;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px))}:root .tk-pop-sheet .tk-menu .tk-mitem{min-height:48px;padding:12px 10px}}
/* Same named cascade layer as the office field floor: real form fields keep the audit's44px touch target. */
@layer ws13-floor{html.l7-on.nx-on body.ws-page.surface :is(.tk-field,.modal .field,.tk-modal .field,.tk-drawer .field) :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){height:44px!important;min-height:44px!important}}

.tk-pop.tk-menu-pop{--tk-record-glass:rgba(247,249,248,.82);--tk-record-brightness:1;background:var(--tk-record-glass)!important;backdrop-filter:blur(24px) saturate(1.3) brightness(var(--tk-record-brightness))!important;-webkit-backdrop-filter:blur(24px) saturate(1.3) brightness(var(--tk-record-brightness))!important}
:root[data-theme="dark"] .tk-pop.tk-menu-pop{--tk-record-glass:rgba(32,33,33,.40);--tk-record-brightness:.45}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tk-pop.tk-menu-pop{--tk-record-glass:rgba(32,33,33,.40);--tk-record-brightness:.45}}
/* Record sections float; only the current one receives a soft neutral pill. */
:root .tk-tabs{background:transparent;border:0;gap:4px;padding:0}
:root .tk-tab{border:0;border-radius:999px;min-height:44px;padding:8px 14px;background:transparent}
:root .tk-tab[aria-selected="true"]{border:0;background:var(--tk-wash);box-shadow:inset 0 0 0 1px var(--tk-line)}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.tk-pop.tk-menu-pop{background:var(--tk-solid)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

/* Existing delegated record menus retain their original ancestry and events, with the same detail-audit anatomy. */
html.l7-on body details.dmenu>.pop.l7-native-menu{width:300px!important;min-width:min(260px,calc(100vw - 16px))!important;max-width:min(320px,calc(100vw - 16px))!important;padding:8px!important;background:rgba(247,249,248,.82)!important;backdrop-filter:blur(24px) saturate(1.3)!important;-webkit-backdrop-filter:blur(24px) saturate(1.3)!important}
html[data-theme=dark].l7-on body details.dmenu>.pop.l7-native-menu{background:rgba(32,33,33,.40)!important;backdrop-filter:blur(24px) saturate(1.3) brightness(.45)!important;-webkit-backdrop-filter:blur(24px) saturate(1.3) brightness(.45)!important}
html.l7-on .l7-native-menu .l7-menu-head{display:block;padding:8px 10px 12px;font:500 13px/1.4 var(--tk-f);color:var(--tk-ink2)}
html.l7-on .l7-native-menu .l7-menu-head :is(.l7-menu-grab,[data-l7-menu-close]){display:none}
html.l7-on .l7-native-menu :is(a,button):not([data-l7-menu-close]){min-height:40px!important;padding:8px 10px!important}
html.l7-on .l7-native-menu [data-l7-page-off]{display:none!important}
html.l7-on .l7-native-menu svg{stroke-width:1.5!important}
html.l7-on .l7-native-menu :disabled{opacity:1!important;color:var(--tk-sub)!important}
@media(prefers-color-scheme:dark){html.l7-on:not([data-theme=light]) body details.dmenu>.pop.l7-native-menu{background:rgba(32,33,33,.40)!important;backdrop-filter:blur(24px) saturate(1.3) brightness(.45)!important;-webkit-backdrop-filter:blur(24px) saturate(1.3) brightness(.45)!important}}
@media(max-width:700px){html.l7-on body details.dmenu>.pop.l7-native-menu{width:auto!important;max-width:none!important;min-width:0!important}html.l7-on .l7-native-menu .l7-menu-head{display:grid}html.l7-on .l7-native-menu .l7-menu-head .l7-menu-grab{display:block}html.l7-on .l7-native-menu .l7-menu-head [data-l7-menu-close]{display:grid}html.l7-on .l7-native-menu :is(a,button):not([data-l7-menu-close]){min-height:48px!important}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){html.l7-on body details.dmenu>.pop.l7-native-menu{background:var(--tk-solid)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}

/* Small menu reasons/hints need AA even over the darkest/lightest blurred backing. These are foreground tokens only. */
.tk-pop.tk-menu-pop,html.l7-on body details.dmenu>.pop.l7-native-menu{--tk-ink2:#46514a;--tk-sub:#46514a;--l7-ink2:#46514a;--l7-ink3:#46514a}
:root[data-theme=dark] .tk-pop.tk-menu-pop,html[data-theme=dark].l7-on body details.dmenu>.pop.l7-native-menu{--tk-ink2:#cfd6d1;--tk-sub:#cfd6d1;--l7-ink2:#cfd6d1;--l7-ink3:#cfd6d1}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tk-pop.tk-menu-pop,html.l7-on:not([data-theme=light]) body details.dmenu>.pop.l7-native-menu{--tk-ink2:#cfd6d1;--tk-sub:#cfd6d1;--l7-ink2:#cfd6d1;--l7-ink3:#cfd6d1}}

/* More-specific native row display rules must never reveal the retained choices on another menu page. */
html.l7-on body details.dmenu>.pop.l7-native-menu [data-l7-page-off]{display:none!important}
/* Phone record sheets already have12px shell padding and8px title-row padding; avoid a third10px inset at the close. */
@media(max-width:700px){html.l7-on body details.dmenu>.pop.l7-native-menu .l7-menu-head{padding-left:0;padding-right:0}}

/* One pinned record frame: the original controls stay outside the one masked work scroller. */
.tk-fixed-frame{--tk-bar-offset:var(--tk-bar-top,0px);--tk-bar-bottom:16px;scroll-margin-top:var(--tk-bar-offset);position:sticky;top:var(--tk-bar-offset);display:flex;flex-direction:column;min-width:0;min-height:0;max-width:100%;max-height:calc(100svh - var(--tk-bar-offset) - var(--tk-bar-bottom));z-index:6;isolation:isolate}
.tk-fixed-bar{position:relative;flex:none;min-width:0;border-radius:18px;background:var(--tk-bar-frost,rgba(247,249,248,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.25);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
html[data-theme=dark] .tk-fixed-bar{--tk-bar-frost:rgba(24,30,27,.82)}
@media(prefers-color-scheme:dark){html:not([data-theme]) .tk-fixed-bar{--tk-bar-frost:rgba(24,30,27,.82)}}
.tk-fixed-scroll{box-sizing:border-box;flex:1;min-height:0;min-width:0;max-height:calc(100svh - var(--tk-bar-offset) - var(--tk-bar-height,48px) - var(--tk-bar-bottom));overflow:auto;overscroll-behavior:contain;padding:16px 0;scroll-padding-top:16px;scrollbar-width:thin;mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.tk-fixed-frame.contained{max-height:min(var(--tk-bar-room,100svh),calc(100svh - var(--tk-bar-offset) - var(--tk-bar-bottom)))}
@media(max-width:760px){.tk-fixed-frame{--tk-bar-offset:var(--tk-bar-phone-top,var(--tk-bar-top,0px));--tk-bar-bottom:calc(112px + env(safe-area-inset-bottom,0px))}}
/* One next step (STANDARDS §2d, 26 Oct 2026): the "···" menu's group headings — Send · Record · Files · Fix · Go to */
.tk-menu-sections .tk-menu-sec { padding: 8px 10px 2px; font: 500 11px/1.3 var(--tk-fm, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--tk-sub); }
.tk-menu-sections .tk-menu-sec:first-child { padding-top: 2px; }
.tk-next-more[hidden] { display: none !important; }