@font-face{font-family:'Sora';font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/sora-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-display:swap;font-weight:100 800;src:url(/fonts/sora-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:italic;font-display:swap;font-weight:200 900;src:url(/fonts/source-sans-3-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:italic;font-display:swap;font-weight:200 900;src:url(/fonts/source-sans-3-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}
/* pixelops: the workspace on the pixelops brand system v1.0. A light Chalk canvas, white surfaces, Mint for quiet
   surfaces, Jade for actions, Pine for text. Gold belongs to Pixel and nothing else. Sora sets headlines and short
   statements; Source Sans 3 sets the working text. Quiet surfaces, strong alignment, one clear primary action.
   Pixel's gestures follow pixel-motion.css: one gesture per real event, text carries the meaning.
   Light is the default. Dark tokens are written once below and applied by the build only under data-px-theme="dark". */
:root {
  --gold: #E6B95C; --pine: #183F36; --jade: #20735F; --mint: #D7EEE3; --chalk: #F7FBF8;
  --bg: #F7FBF8; --panel: #FFFFFF; --panel-2: #F4F9F6; --quiet: #D7EEE3; --quiet-2: #EAF5EF; --sunk: #EEF5F1; --hover: #EAF5EF; --sel: #D7EEE3;
  --ink: #183F36; --ink-2: #2D5047; --muted: #4B645B; --faint: #66786F;
  --line: #C5D8CE; --line-2: #AFC6BA; --ctl: #4B645B;
  --action: #20735F; --action-hover: #195B4B; --on-action: #FFFFFF; --link: #20735F; --focus: #183F36;
  --good: #20735F; --good-bg: #D7EEE3; --good-bd: #A3CDB9;
  --info: #285A7A; --info-bg: #EDF5FA; --info-bd: #BCD4E4;
  --warn: #88483A; --warn-bg: #F8EEEA; --warn-bd: #E2C3B8;
  --bad: #9A3C32; --bad-bg: #FBECE9; --bad-bd: #E9BCB4;
  --dis-ink: #5D6D65; --dis-bg: #E7EEE9;
  --in-bg: #FFFFFF;
  --paper: #FFFFFF; --paper-ink: #151515; --paper-line: #D9E2DD;
  --navy: var(--pine); --steel: var(--jade); --gold-lo: var(--jade); --lcd-bad: var(--bad); --console-muted: var(--muted); --console-ink: var(--ink); --console-3: var(--line); --accent-ink: var(--jade);
  --shadow-sm: 0 1px 2px rgba(24, 63, 54, .06);
  --shadow: 0 1px 2px rgba(24, 63, 54, .05), 0 10px 26px -20px rgba(24, 63, 54, .3);
  --shadow-lg: 0 26px 56px -28px rgba(24, 63, 54, .45);
  --f-display: 'Sora', Arial, sans-serif;
  --f-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --f-micro: var(--f-body);
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 16px; --r-sm: 8px; --r-xs: 4px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
:root[data-px-theme="dark"] {
  --bg: #0E2420; --panel: #15322B; --panel-2: #183830; --quiet: #1F4A40; --quiet-2: #1A3F36; --sunk: #112A25; --hover: #1C443A; --sel: #22503F;
  --ink: #EAF5EF; --ink-2: #CFE3D9; --muted: #A7C4B8; --faint: #8AA79B;
  --line: #2B5449; --line-2: #3A6A5C; --ctl: #8DB3A4;
  --action: #20735F; --action-hover: #2A8670; --on-action: #FFFFFF; --link: #8FE0C2; --focus: #EAF5EF;
  --good: #8FE0C2; --good-bg: rgba(143, 224, 194, .12); --good-bd: rgba(143, 224, 194, .36);
  --info: #9CCBEA; --info-bg: rgba(156, 203, 234, .12); --info-bd: rgba(156, 203, 234, .34);
  --warn: #EDB3A3; --warn-bg: rgba(237, 179, 163, .12); --warn-bd: rgba(237, 179, 163, .34);
  --bad: #F5A397; --bad-bg: rgba(245, 163, 151, .13); --bad-bd: rgba(245, 163, 151, .38);
  --dis-ink: #9AB2A7; --dis-bg: #1A3B33;
  --in-bg: #112A25;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7);
  --shadow-lg: 0 30px 60px -26px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 2px; }
::selection { background: var(--mint); color: var(--pine); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
svg.ic.lg { width: 1.5em; height: 1.5em; }
svg.ic.xl { width: 2.2em; height: 2.2em; stroke-width: 1.6; }
svg.ic .acc { fill: var(--quiet); stroke: currentColor; stroke-width: 1.2; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Pixel (brand motion contract v1.0: one gesture per real event; reduced motion turns gestures off) */
.pixel-mascot { display: block; width: var(--pixel-size, 96px); height: auto; overflow: visible; flex-shrink: 0; }
.pixel-mascot__body { fill: var(--gold); }
.pixel-mascot__eye { fill: var(--pine); }
.pixel-mascot__figure { transform-origin: 50px 92px; }
.pixel-mascot__eye { transform-box: fill-box; transform-origin: center; }
/* busy: while Pixel works it reads and types in a steady loop, with a three-pixel ellipsis over its head, so work in
   progress shows at a glance wherever Pixel appears: the top bar, the pursuit panel, the run window, and the section or
   figure being made. These rules come before the gestures, so a gesture plays over the loop and the loop resumes after. */
.pixel-mascot__dot { fill: var(--jade); }
[data-pixel-now="working"] .pixel-mascot__figure, .pixel-busy .pixel-mascot__figure { animation: pixel-type 1200ms ease-in-out infinite; }
[data-pixel-now="working"] .pixel-mascot__eyes, .pixel-busy .pixel-mascot__eyes { animation: pixel-read 2800ms steps(1, end) infinite; }
[data-pixel-now="working"] .pixel-mascot__dot, .pixel-busy .pixel-mascot__dot { animation: pixel-dot 1200ms ease-in-out infinite; }
[data-pixel-now="working"] .pixel-mascot__dot--2, .pixel-busy .pixel-mascot__dot--2 { animation-delay: 180ms; }
[data-pixel-now="working"] .pixel-mascot__dot--3, .pixel-busy .pixel-mascot__dot--3 { animation-delay: 360ms; }
.machine .pixel-mascot__dot { display: none; }
@keyframes pixel-type { 0%, 50%, 100% { transform: translateY(0); } 18% { transform: translateY(-3px); } 68% { transform: translateY(-2px); } }
@keyframes pixel-read { 0% { transform: translate(-5px, 1px); } 15% { transform: translate(-2px, 1px); } 30% { transform: translate(1px, 1px); } 45% { transform: translate(4px, 1px); } 58% { transform: translate(-5px, 4px); } 72% { transform: translate(-1px, 4px); } 86% { transform: translate(3px, 4px); } }
@keyframes pixel-dot { 0%, 70%, 100% { opacity: .2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
[data-pixel-play="blink"] .pixel-mascot__eye { animation: pixel-blink 320ms ease-in-out 1; }
[data-pixel-play="glance"] .pixel-mascot__eyes { animation: pixel-glance 420ms ease-in-out 1; }
[data-pixel-play="lean"] .pixel-mascot__figure { animation: pixel-lean 360ms var(--ease) 1; }
[data-pixel-play="lift"] .pixel-mascot__figure { animation: pixel-lift 420ms var(--ease) 1; }
@keyframes pixel-blink { 0%, 28%, 72%, 100% { transform: scaleY(1); } 46%, 54% { transform: scaleY(.15); } }
@keyframes pixel-glance { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }
@keyframes pixel-lean { 0%, 100% { transform: rotate(0deg); } 45%, 60% { transform: rotate(-4deg); } }
@keyframes pixel-lift { 0%, 100% { transform: translateY(0); } 48% { transform: translateY(-4px); } 78% { transform: translateY(1px); } }
/* play: what Pixel does now and then just for fun, when the pointer comes to it, and when it naps. Lengths are in the
   mark's own 100-unit grid, so every size moves the same way. The effects layer shows only during a gesture or a nap. */
.pixel-mascot__fx > * { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pixel-mascot__spark { fill: var(--gold); }
.pixel-mascot__z { fill: var(--pine); }
[data-pixel-play="hop"] .pixel-mascot__figure { animation: pixel-hop 720ms var(--ease) 1; }
[data-pixel-play="wiggle"] .pixel-mascot__figure { animation: pixel-wiggle 620ms ease-in-out 1; }
[data-pixel-play="peek"] .pixel-mascot__eyes { animation: pixel-peek 1500ms ease-in-out 1; }
[data-pixel-play="wink"] .pixel-mascot__eye--r { animation: pixel-blink 460ms ease-in-out 1; }
[data-pixel-play="wink"] .pixel-mascot__figure { animation: pixel-tilt 460ms ease-in-out 1; }
[data-pixel-play="turn"] .pixel-mascot__figure { animation: pixel-turn 1250ms var(--ease) 1; }
[data-pixel-play="stretch"] .pixel-mascot__figure, [data-pixel-play="wake"] .pixel-mascot__figure { animation: pixel-stretch 950ms var(--ease) 1; }
[data-pixel-play="stretch"] .pixel-mascot__eye { animation: pixel-squint 950ms ease-in-out 1; }
[data-pixel-play="sparkle"] .pixel-mascot__spark { animation: pixel-spark 1000ms var(--ease) 1; }
[data-pixel-play="sparkle"] .pixel-mascot__spark--2 { animation-delay: 140ms; }
[data-pixel-play="sparkle"] .pixel-mascot__figure, [data-pixel-play="happy"] .pixel-mascot__figure { animation: pixel-lift 420ms var(--ease) 1; }
[data-pixel-play="happy"] .pixel-mascot__eye { animation: pixel-happy 950ms ease-in-out 1; }
[data-pixel-play="scan"] .pixel-mascot__eyes { animation: pixel-scan 1300ms steps(1, end) 1; }
[data-pixel-play="bob"] .pixel-mascot__figure { animation: pixel-bob 1000ms ease-in-out 1; }
[data-pixel-play="tap"] .pixel-mascot__figure { animation: pixel-tap 640ms ease-out 1; }
[data-pixel-play="dance"] .pixel-mascot__figure { animation: pixel-dance 1150ms ease-in-out 1; }
[data-pixel-play="dance"] .pixel-mascot__eye { animation: pixel-happy 1150ms ease-in-out 1; }
[data-pixel-play="spin"] .pixel-mascot__figure { transform-origin: 50px 50px; animation: pixel-spin 900ms var(--ease) 1; }
[data-pixel-play="wake"] .pixel-mascot__eye { animation: pixel-wake 950ms ease-out 1; }
[data-pixel-mood="sleepy"] .pixel-mascot__eye { transform: translateY(3px) scaleY(.16); }
[data-pixel-mood="sleepy"] .pixel-mascot__figure { animation: pixel-breathe 3200ms ease-in-out infinite; }
[data-pixel-mood="sleepy"] .pixel-mascot__z { animation: pixel-zz 3200ms linear infinite; }
[data-pixel-mood="sleepy"] .pixel-mascot__z--2 { animation-delay: 1600ms; }
@keyframes pixel-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 16% { transform: translateY(0) scale(1.07, .9); } 44% { transform: translateY(-16px) scale(.95, 1.07); } 68% { transform: translateY(0) scale(1.08, .9); } 84% { transform: translateY(-2px) scale(.98, 1.02); } }
@keyframes pixel-wiggle { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-7deg); } 35% { transform: rotate(6deg); } 55% { transform: rotate(-4deg); } 75% { transform: rotate(2deg); } }
@keyframes pixel-peek { 0%, 100% { transform: translate(0, 0); } 12%, 38% { transform: translate(-6px, -1px); } 52%, 82% { transform: translate(6px, -1px); } 92% { transform: translate(0, 0); } }
@keyframes pixel-tilt { 0%, 100% { transform: rotate(0deg); } 30%, 70% { transform: rotate(-3deg); } }
@keyframes pixel-turn { 0%, 100% { transform: scaleX(1); } 14%, 72% { transform: scaleX(-1); } }
@keyframes pixel-stretch { 0%, 100% { transform: scale(1, 1); } 35%, 55% { transform: scale(.93, 1.13); } 72% { transform: scale(1.05, .94); } 86% { transform: scale(.99, 1.02); } }
@keyframes pixel-squint { 0%, 100% { transform: scaleY(1); } 25%, 60% { transform: scaleY(.35); } }
@keyframes pixel-spark { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; transform: scale(1.15); } 45% { transform: scale(.85); } 65% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes pixel-happy { 0%, 100% { transform: translateY(0) scaleY(1); } 18%, 80% { transform: translateY(-1px) scaleY(.4); } }
@keyframes pixel-scan { 0% { transform: translateX(-5px); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(5px); } 80% { transform: translateX(1px); } 100% { transform: translateX(0); } }
@keyframes pixel-bob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-4px); } }
@keyframes pixel-tap { 0%, 40%, 100% { transform: translateY(0); } 18%, 62% { transform: translateY(-5px); } }
@keyframes pixel-dance { 0%, 30%, 60%, 88%, 100% { transform: translateY(0) rotate(0deg); } 15% { transform: translateY(-7px) rotate(-8deg); } 45% { transform: translateY(-7px) rotate(8deg); } 75% { transform: translateY(-5px) rotate(-5deg); } }
@keyframes pixel-spin { 0% { transform: rotate(0deg); } 80% { transform: rotate(372deg); } 100% { transform: rotate(360deg); } }
@keyframes pixel-wake { 0% { transform: translateY(3px) scaleY(.16); } 35% { transform: translateY(0) scaleY(1.12); } 50%, 64% { transform: translateY(0) scaleY(1); } 72% { transform: translateY(0) scaleY(.15); } 82%, 100% { transform: translateY(0) scaleY(1); } }
@keyframes pixel-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 1.035); } }
@keyframes pixel-zz { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 20% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(8px, -12px) scale(1.1); } }
.pixel-stage { flex: none; display: grid; place-items: center; padding: 8%; }

/* the lockup: Pixel beside the lowercase wordmark; clear space is a quarter of the mascot height */
.home-link { display: inline-flex; border-radius: var(--r-sm); text-decoration: none; }
.home-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.wordmark .word { font: 600 25px/1 var(--f-display); letter-spacing: -.05em; padding-bottom: 3px; }

/* ---------- app layout */
#app { display: grid; grid-template-columns: 252px minmax(0, 1fr); height: 100%; }
#rail { display: flex; flex-direction: column; gap: 2px; padding: 20px 14px 14px; position: relative; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); }
#rail .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 8px 20px; }
#rail .brand .sub { font: 600 14px/1.3 var(--f-body); color: var(--muted); }
#rail > .btn.primary { margin: 0 2px 10px; padding: 10px 14px; }
#rail .sect { font: 600 14px/1 var(--f-body); color: var(--muted); padding: 18px 12px 8px; }
.navb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 600 15px/1.2 var(--f-body); cursor: pointer; position: relative; text-align: left; transition: background .2s var(--ease), color .2s var(--ease); }
.navb .ic { color: var(--muted); }
.navb:hover { background: var(--hover); color: var(--ink); }
.navb.on { background: var(--quiet); color: var(--ink); }
.navb.on .ic { color: var(--jade); }
.navb.on::before { content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; background: var(--jade); }
.navb .badge { margin-left: auto; }
#rail .foot { margin-top: auto; padding: 12px 8px 2px; font: 500 13px/1.6 var(--f-body); color: var(--muted); }
#rail .me { display: flex; align-items: center; gap: 10px; padding: 12px 4px 8px; font: 600 15px/1.2 var(--f-body); color: var(--ink); border-top: 1px solid var(--line); }
#main { overflow-y: auto; min-width: 0; position: relative; }
#top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 32px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
#top .search { flex: 1; max-width: 560px; position: relative; }
#top .search input { width: 100%; padding-left: 40px; background: var(--panel); }
#top .search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
#top .spacer { flex: 1; }
#view { padding: 32px 32px 88px; max-width: 1440px; margin: 0 auto; }
.btn.menu-btn { display: none; }

/* ---------- surfaces */
.px { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.px.flat { border-radius: var(--r-sm); }
.px.soft { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.panel { display: flex; flex-direction: column; min-width: 0; }
.panel > .hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.panel > .hd h2 { font: 600 18px/1.3 var(--f-display); margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: -.02em; }
.panel > .hd h2 > svg.ic:first-child { width: 20px; height: 20px; color: var(--jade); }
.panel > .hd .aside { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel > .bd { padding: 16px 20px; min-width: 0; }
.panel > .bd.flush { padding: 4px 8px 8px; }
.panel > .ft { padding: 12px 20px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.well { background: var(--panel-2); padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--info-bg); color: var(--ink); border: 1px solid var(--info-bd); border-radius: var(--r-sm); }
.callout > svg.ic:first-child { color: var(--info); }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-bd); } .callout.warn > svg.ic:first-child { color: var(--warn); }
.callout.bad { background: var(--bad-bg); border-color: var(--bad-bd); } .callout.bad > svg.ic:first-child { color: var(--bad); }
.callout.good { background: var(--good-bg); border-color: var(--good-bd); } .callout.good > svg.ic:first-child { color: var(--good); }
.callout .ic { margin-top: 3px; }

/* ---------- type */
h1, .h1 { font: 600 32px/1.2 var(--f-display); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h2 { font: 600 20px/1.25 var(--f-display); margin: 0; letter-spacing: -.02em; }
h3 { font: 600 17px/1.3 var(--f-display); margin: 0; letter-spacing: -.01em; }
.eyebrow { font: 600 14px/1.3 var(--f-body); color: var(--muted); }
.lede { color: var(--ink-2); max-width: 68ch; margin: 8px 0 0; font-size: 18px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 15px; }
.tiny { font-size: 14px; }
.mono { font-family: var(--f-mono); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.lcdtxt { font: 600 15px/1 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pre { white-space: pre-wrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- layout helpers (8 px grid) */
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.row.nw { flex-wrap: nowrap; }
.row.top { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack.tight { gap: 8px; }
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
/* the submission package's file list */
.pkg { display: flex; flex-direction: column; gap: 6px; }
.pkrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.pkrow.off { opacity: .55; }
.pkrow .input.sm { width: 100%; font-family: var(--f-mono); font-size: 13px; }
.pkrow .pk-ic .ic { width: 18px; height: 18px; color: var(--muted); }
/* the document view's cover page and contents, matching the Word file */
.paper .pcover { padding: 8px 4px 40px; margin-bottom: 32px; border-bottom: 2px dashed var(--line); font-family: var(--doc-font); color: #1d1d1d; user-select: none; }
.paper .plogo { display: block; max-width: 100%; height: auto; }
.paper .plogo-gap { padding: 18px 0; font-family: var(--f-body); }
.paper .prule { height: 4px; background: #E0A526; margin: 28px 0 18px; }
.paper .peyebrow { font-size: 0.95em; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--doc-brand); }
.paper .ptitle { font-size: 2.1em; font-weight: 700; color: var(--doc-brand); margin-top: 14px; line-height: 1.15; }
.paper .psub { font-size: 1.3em; color: #555; margin-top: 6px; }
.paper .pmeta { margin-top: 22px; line-height: 1.5; }
.paper .plabel { margin-top: 18px; font-size: 0.85em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doc-brand); }
.paper .pblock { line-height: 1.5; }
.paper .plogos { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.paper .plogos img { max-height: 40px; max-width: 160px; object-fit: contain; }
.paper .plegend { margin-top: 26px; padding: 10px 12px; border: 1px solid var(--doc-brand); font-size: 0.72em; line-height: 1.35; }
/* a document with no cover: its title block heads the first page */
.paper .ptitleblk { padding: 2px 4px 14px; margin-bottom: 18px; border-top: 3px solid #E0A526; padding-top: 8px; font-family: var(--doc-font); color: #1d1d1d; user-select: none; }
.paper .ptitleblk .ptb-title { font-size: 1.3em; font-weight: 700; color: var(--doc-brand); margin-top: 4px; line-height: 1.2; }
.paper .ptitleblk .ptb-meta { color: #404040; margin-top: 2px; font-size: 0.92em; }
.paper .ptitleblk .plegend { margin-top: 8px; padding: 6px 8px; text-align: justify; }
.paper .ptoc { padding: 4px 4px 32px; margin-bottom: 32px; border-bottom: 2px dashed var(--line); font-family: var(--doc-font); color: #1d1d1d; user-select: none; }
.paper .ptoc-h { font-size: 1.3em; font-weight: 700; color: var(--doc-brand); margin-bottom: 12px; }
.paper .ptoc-row { display: flex; gap: 14px; padding: 3px 0; }
.paper .ptoc-row span:first-child { min-width: 52px; }
.paper .ptoc-row.l2 { padding-left: 24px; } .paper .ptoc-row.l3 { padding-left: 48px; }
/* tracked edits: the history list and the redline */
.hist { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.hist .hrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.hist .hrow:first-child { border-top: 0; }
.redline { padding: 24px 32px; max-height: 60vh; overflow: auto; font-family: var(--doc-font); font-size: var(--doc-size, 12pt); line-height: 1.5; background: #fff; color: #1d1d1d; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.redline p { margin: 0 0 10px; }
.redline ins, .rl-key ins { background: #DDF3E8; color: #0B5D3B; text-decoration: underline; text-decoration-color: #2E9E6B; }
.redline del, .rl-key del { background: #FBE3DF; color: #9B2C1F; text-decoration: line-through; }
.redline .rl-ins { border-left: 3px solid #2E9E6B; padding-left: 8px; }
.redline .rl-del { border-left: 3px solid #C0533F; padding-left: 8px; }
/* the reviewed Word file: one row per section, opened to its redline, with the choice of what to keep */
.rvlist { display: grid; gap: 8px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.rvsec { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.rvsec.open { border-color: color-mix(in srgb, var(--jade) 40%, var(--line)); box-shadow: var(--shadow-sm); }
.rvsec .rvhead { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
.rvsec .redline { max-height: 34vh; padding: 14px 18px; }
.rvpaper { max-width: none; padding: 14px 18px; box-shadow: 0 0 0 1px var(--paper-line); }
.rvpaper .ed { min-height: 4em; }
.rl-key { display: inline-flex; gap: 8px; font-size: 13px; }
.rl-key ins, .rl-key del { padding: 1px 6px; border-radius: 4px; }
/* the outline reader: sections listed on the left, the chosen one read in full on the right */
.olay { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.olist { position: sticky; top: 12px; max-height: calc(100vh - 140px); overflow: auto; padding: 8px; border-radius: var(--r); }
.ogroup + .ogroup { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ovol { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 12px; }
.ovol b { flex: 1; min-width: 0; }
.oitem { display: flex; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; font: inherit; }
.oitem:hover { background: var(--hover); }
.oitem.on { background: var(--quiet); box-shadow: inset 3px 0 0 var(--jade); }
.oitem .num { font: 600 14px/1.45 var(--f-display); min-width: 32px; color: var(--jade); font-variant-numeric: tabular-nums; }
.oitem .t { display: block; font-size: 14.5px; line-height: 1.4; font-weight: 500; }
.oitem .m { display: block; margin-top: 2px; }
.opane { padding: 24px 28px 28px; min-width: 0; }
.ohd { display: flex; align-items: flex-start; gap: 12px; }
.opane h2 { font-size: 22px; line-height: 1.3; margin: 4px 0 0; }
.opane h3 { font: 600 16px/1.3 var(--f-display); margin: 0 0 8px; }
.opane section { margin-top: 24px; }
.ofacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 18px 0 0; padding: 16px 18px; background: var(--sunk); border-radius: var(--r-sm); }
.ofacts .wide { grid-column: 1 / -1; }
.ofacts dt { font-size: 13px; color: var(--muted); font-weight: 600; }
.ofacts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.prose { max-width: 74ch; font-size: 16px; line-height: 1.6; }
.prose p { margin: 0 0 10px; }
.oreqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oreqs li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.oreqs p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; max-width: 80ch; }
.ofigs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
/* home: two rows of paired panels; each pair stretches to the taller one so both end on the same line */
/* the pursuit list on Home: when it is due, what it is, and what it waits on */
.prow { align-items: center; gap: 16px; }
.prow .pdue { flex: none; width: 92px; }
.prow .pline { margin-top: 2px; color: var(--ink-2); overflow-wrap: anywhere; }
.prow .pline.warn b, .prow .pline b { color: var(--warn); }
.prow .pline.bad, .prow .pline.bad b { color: var(--bad); }
.prow .pline.info { color: var(--info); }
.prow > svg.ic { color: var(--muted); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 24px; align-items: stretch; }
.home-grid > .panel { display: flex; flex-direction: column; min-width: 0; }
.home-grid > .panel > .bd { flex: 1 1 auto; }
.home-grid > .panel > .bd:has(> .empty:only-child) { display: grid; align-content: center; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px 20px; border-top: 1px solid var(--line); }
.pager .btn[disabled] { background: transparent; border-color: transparent; color: var(--muted); opacity: .5; }
.pager .pg { min-width: 30px; padding: 3px 6px; font-variant-numeric: tabular-nums; }
.pager .pg.on { background: var(--quiet); color: var(--ink); }
.pager .pgap { color: var(--muted); padding: 0 2px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .aside { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
hr.dash { border: 0; height: 1px; background: var(--line); margin: 16px 0; }

/* ---------- buttons: one jade primary per view; everything else is quiet */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; margin: 0; cursor: pointer; min-height: 40px;
  font: 600 15px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; user-select: none; position: relative;
  background: var(--panel); border: 1px solid var(--ctl); border-radius: var(--r-sm); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn:hover { background: var(--hover); }
.btn .ic { opacity: .95; }
.btn.primary, .btn.navy { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn.primary:hover, .btn.navy:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn.danger { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad-bg) 70%, var(--bad) 8%); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.sm { padding: 6px 12px; font-size: 14px; min-height: 34px; }
.btn.xs { padding: 3px 9px; font-size: 13.5px; min-height: 28px; gap: 6px; }
.btn.icon { padding: 8px 9px; }
.btn[disabled], .btn.off { background: var(--dis-bg); border-color: var(--dis-bg); color: var(--dis-ink); cursor: not-allowed; }
.btn.ghost[disabled] { background: transparent; border-color: transparent; }
.btn .k { font: 600 11px/1 var(--f-body); opacity: .75; }
.linkish { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font: inherit; font-weight: 600; }

/* ---------- chips and badges (sentence case, flat) */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; font: 600 13px/1.6 var(--f-body); white-space: nowrap; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-xs); }
.chip.good { background: var(--good-bg); color: var(--good); border-color: var(--good-bd); }
.chip.warn, .chip.gold { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.chip.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-bd); }
.chip.info, .chip.violet { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.chip.navy { background: var(--pine); color: #FFFFFF; border-color: var(--pine); }
.chipbtn { cursor: pointer; }
/* the response package: one row per item, a status square, the actions that move it forward */
.pkglist .pkitem { align-items: flex-start; }
.pkdot { width: 10px; height: 10px; border-radius: 2px; margin-top: 6px; flex: none; background: var(--line-2); }
.pkdot.good { background: var(--good); } .pkdot.warn { background: var(--warn); } .pkdot.bad { background: var(--bad); } .pkdot.info { background: var(--info); }
.pkitem.na { opacity: .62; }
/* the package as Pixel reads it: what needs the team, what Pixel can draft, and what is covered, side by side */
.pkread { overflow: hidden; }
.pkread .pkread-hd { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.pkread .pkread-hd .state { font-size: 18px; }
.pkcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pkcol { display: flex; flex-direction: column; min-width: 0; padding: 14px 18px 18px; }
.pkcol + .pkcol { border-left: 1px solid var(--line); }
.pkcol-h { display: flex; align-items: center; gap: 8px; font: 600 15px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); padding-bottom: 8px; }
.pkcol-n { min-width: 26px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; font: 700 14px/1 var(--f-body); border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); }
.pkcol.you .pkcol-n { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bd); }
.pkcol.pixel .pkcol-n { background: var(--quiet); color: var(--pine); border-color: color-mix(in srgb, var(--jade) 30%, var(--quiet)); }
.pkcol.covered .pkcol-n { background: var(--good-bg); color: var(--good); border-color: var(--good-bd); }
html[data-px-theme="dark"] .pkcol.pixel .pkcol-n { color: var(--ink); }
.pkcol-b { display: flex; flex-direction: column; }
.pksum-row { padding: 10px 0; border-top: 1px solid var(--line); }
.pksum-row:first-child { border-top: 0; padding-top: 4px; }
.pksum-line { color: var(--ink-2); margin-top: 2px; }
.pkcol-empty { padding: 4px 0; }
.pkcol-f { padding-top: 12px; }
.pkna { padding: 10px 18px; border-top: 1px solid var(--line); }
/* everything covered: one list, flowing in columns across the panel */
.pkcols.one { grid-template-columns: minmax(0, 1fr); }
.pkcols.one .pkcol-b { display: block; columns: 2 320px; column-gap: 40px; }
.pkcols.one .pksum-row { break-inside: avoid; }
/* key personnel: each position, who fills it, and what the check of the resume found; a cover letter's check */
.roster { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.roster .rrow { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); min-width: 0; }
.roster .rrow select.input { flex: 1 1 160px; min-width: 0; max-width: 100%; }
.rrow-open { margin: 6px 0 0; padding-left: 16px; color: var(--ink-2); }
.rrow-open li.bad { color: var(--bad); }
.pkcheck { margin-top: 6px; }
.pkcheck.warn { color: var(--warn); }
.pkcheck.good { color: var(--good); }
.prepchk { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prepchk .chip { margin-right: 4px; }
@media (max-width: 900px) {
  .pkcols { grid-template-columns: minmax(0, 1fr); }
  .pkcol + .pkcol { border-left: 0; border-top: 1px solid var(--line); }
}
.pkacts .pklink { width: auto; max-width: 280px; min-height: 28px; padding: 2px 8px; font-size: 13px; }
.pkfile { gap: 4px; padding-right: 4px; }
.pkfile .x { background: transparent; border: 0; padding: 0 2px; cursor: pointer; color: var(--muted); display: inline-grid; place-items: center; }
.pkfile svg.ic { width: 13px; height: 13px; }
.chipbtn.on { background: var(--pine); color: #FFFFFF; border-color: var(--pine); }
.chipbtn b { font-weight: 700; margin-left: 2px; opacity: .8; }
/* the Library's documents: folders by customer, type filters, a selection bar for changes to many at once */
.repo-tools { gap: 8px; }
.repo-types { gap: 6px; }
.foldergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.folder { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; cursor: pointer; border-radius: var(--r-sm); font: inherit; color: var(--ink); min-width: 0; }
.folder:hover { background: var(--hover); }
.folder .fi { color: var(--jade); flex: none; margin-top: 1px; }
.folder .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.folder b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.crumbs { gap: 8px; }
.selbar { position: sticky; top: 72px; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--shadow); }
.selbar select.input { width: auto; min-width: 0; max-width: 150px; }
.repo-list .pick { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--jade); flex: none; cursor: pointer; }
.repo-list .repo-head { align-items: center; padding: 8px 12px; background: var(--panel-2); }
.repo-list .rowi.picked { background: var(--quiet-2); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font: 700 12px/1 var(--f-body); background: var(--bad); color: #FFFFFF; border-radius: 10px; box-shadow: 0 0 0 2px var(--panel); }
.dot { width: 8px; height: 8px; display: inline-block; flex: none; background: var(--faint); }
.dot.good { background: var(--good); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.info, .dot.violet { background: var(--info); }

/* ---------- figures (numbers and dates set in Sora; no plates) */
.lcd { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; color: var(--ink); font: 600 15px/1.2 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lcd.warn { color: var(--warn); } .lcd.bad { color: var(--bad); } .lcd.muted { color: var(--muted); }
.lcd.lg { font-size: 32px; letter-spacing: -.02em; }

/* the response due date: the most prominent fact on an opportunity */
.due { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; min-width: 240px; border-radius: var(--r); background: var(--quiet-2); border: 1px solid var(--line); text-align: left; }
.due .k { font: 600 14px/1.2 var(--f-body); color: var(--muted); }
.due .v { font: 600 40px/1.05 var(--f-display); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.due .v small { font-size: 20px; letter-spacing: -.02em; margin-left: 4px; }
.due .d { font: 600 16px/1.35 var(--f-body); color: var(--ink); }
.due .q { font: 500 14px/1.35 var(--f-body); color: var(--muted); }
.due.warn { background: var(--warn-bg); border-color: var(--warn-bd); } .due.warn .v { color: var(--warn); }
.due.bad { background: var(--bad-bg); border-color: var(--bad-bd); } .due.bad .v { color: var(--bad); }
.due.past { background: var(--panel-2); } .due.past .v { color: var(--muted); }
.due.sent .v { color: var(--good); }

/* ---------- score (compliance and bid): the number with a plain status word */
.score { display: grid; place-items: center; gap: 2px; min-width: 96px; padding: 12px 16px; border-radius: var(--r); background: var(--quiet-2); border: 1px solid var(--line); text-align: center; }
.score .v { font: 600 40px/1 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.score .k { font: 600 13.5px/1.25 var(--f-body); color: var(--muted); }
.score.good { background: var(--good-bg); border-color: var(--good-bd); } .score.good .v { color: var(--good); }
.score.warn { background: var(--warn-bg); border-color: var(--warn-bd); } .score.warn .v { color: var(--warn); }
.score.bad { background: var(--bad-bg); border-color: var(--bad-bd); } .score.bad .v { color: var(--bad); }
.score.sm { min-width: 64px; padding: 6px 10px; } .score.sm .v { font-size: 22px; }

/* ---------- progress (determinate only; nothing loops) */
.hp { --c: var(--jade); position: relative; height: 8px; background: var(--sunk); border-radius: 4px; min-width: 60px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.hp > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--c); max-width: 100%; transition: width .45s var(--ease); }
.hp.warn { --c: var(--warn); } .hp.bad { --c: var(--bad); } .hp.info { --c: var(--info); }
.hp.sm { height: 6px; }
.hp .lbl { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 700 11px/1 var(--f-body); color: var(--ink); }

/* ---------- forms */
.input, select.input, textarea.input { width: 100%; padding: 9px 12px; background: var(--in-bg); color: var(--ink); border: 1px solid var(--ctl); border-radius: var(--r-sm); margin: 0; font: 16px/1.4 var(--f-body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 28%, transparent); }
.input[disabled] { background: var(--dis-bg); color: var(--dis-ink); border-color: var(--dis-bg); }
.input::placeholder { color: var(--faint); }
textarea.input { min-height: 96px; resize: vertical; }
.input.sm { padding: 6px 10px; font-size: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .lbl { font: 600 14px/1.3 var(--f-body); color: var(--ink-2); }
.field .hint { font-size: 14px; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--jade); flex: none; }
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); }
.seg button { border: 0; background: transparent; padding: 5px 12px; font: 600 14px/1.2 var(--f-body); cursor: pointer; color: var(--muted); border-radius: 6px; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.seg.sm { padding: 3px; gap: 2px; }
.seg.sm button { padding: 4px 10px; font-size: 13px; }
.tbl.pipe td { vertical-align: top; }
.tbl.pipe td.opp { min-width: 260px; }
.tbl.pipe td.opp b { display: block; line-height: 1.35; }
.tbl.pipe td.nw, .tbl.pipe th { white-space: nowrap; }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.filterbar .input.sm { width: auto; min-width: 0; }
.filterbar .search-in { position: relative; flex: 1 1 260px; max-width: 380px; display: flex; }
.filterbar .search-in .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.filterbar .search-in .input { width: 100%; padding-left: 34px; }

/* ---------- tables */
.tbl-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tbl th { font: 600 14px/1.3 var(--f-body); text-align: left; padding: 10px 12px; background: var(--panel-2); color: var(--muted); position: sticky; top: 0; z-index: 1; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.click { cursor: pointer; }
.tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.total td { font-weight: 700; background: var(--panel-2); border-top: 1px solid var(--line-2); }
.tbl input.input { min-width: 70px; }
/* Settings, Notifications: what comes in pixelops (always) and by email (the person's choice) */
.tbl.ntf td.c, .tbl.ntf th.c { text-align: center; width: 112px; vertical-align: middle; }
.tbl.ntf td.c .ic { color: var(--good); }
.tbl.ntf td.c input { width: 18px; height: 18px; accent-color: var(--jade); cursor: pointer; }

/* ---------- tabs and sub-tabs. A pursuit has three pages to work in; what Pixel builds on the way sits under More,
   on the same strip, smaller and quieter */
.tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; padding: 0 4px; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.tab { border: 0; background: transparent; padding: 12px 8px 13px; font: 600 15px/1 var(--f-body); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; position: relative; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab.on { color: var(--ink); }
.tab.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--jade); }
.tab .st { width: 7px; height: 7px; background: var(--line-2); }
.tab .st.done { background: var(--jade); } .tab .st.now { background: var(--panel); box-shadow: inset 0 0 0 2px var(--jade); } .tab .st.warn { background: var(--bad); }
.tab:not(.more) { font-size: 16.5px; padding: 14px 14px 15px; gap: 8px; }
.tabs .tabgap { flex: 1; min-width: 16px; }
.tabs .tabmore { align-self: center; padding: 0 4px 0 8px; font: 600 12.5px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.tab.more { font-size: 14px; font-weight: 500; padding: 12px 7px 13px; gap: 5px; }
.tab.more svg.ic { width: 1em; height: 1em; }
.tab.more.on { font-weight: 600; }
/* Pixel on a tab: it is working on that part of the pursuit right now. The mark bobs the way Pixel types, with its
   three-pixel ellipsis beside it; with reduced motion both hold still and still say it. */
.tab.working { color: var(--ink); }
.tab .tabpx { display: inline-flex; align-items: flex-end; gap: 4px; flex: none; }
.tab .tabpx .pixel-mascot { --pixel-size: 18px !important; animation: tab-type 1200ms ease-in-out infinite; }
.tab.more .tabpx .pixel-mascot { --pixel-size: 15px !important; }
.tab .tdots { display: inline-flex; gap: 2px; padding-bottom: 2px; }
.tab .tdots i { width: 4px; height: 4px; background: var(--link); opacity: .9; animation: tab-dot 1200ms ease-in-out infinite; }
.tab.more .tdots i { width: 3px; height: 3px; }
.tab .tdots i:nth-child(2) { animation-delay: 180ms; }
.tab .tdots i:nth-child(3) { animation-delay: 360ms; }
@keyframes tab-type { 0%, 50%, 100% { transform: translateY(0); } 18% { transform: translateY(-2px); } 68% { transform: translateY(-1px); } }
@keyframes tab-dot { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.subnav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 4px; margin-bottom: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.subnav .sb { border: 0; background: transparent; padding: 8px 14px; border-radius: var(--r-sm); font: 600 15px/1.2 var(--f-body); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.subnav .sb:hover { color: var(--ink); background: var(--hover); }
.subnav .sb.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.subnav .sb .n { font: 600 12.5px/1 var(--f-body); padding: 3px 7px; border-radius: var(--r-xs); background: var(--quiet); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.subnav .sb .n.bad { background: var(--bad-bg); color: var(--bad); }
.subnav .tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-right: 4px; }
.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ---------- opportunity header */
.cart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px; }
.cart .label { width: 56px; height: 56px; display: grid; place-items: center; color: var(--ink); font: 600 15px/1 var(--f-display); letter-spacing: -.01em; border-radius: 12px; background: var(--quiet); }
.cart h1 { font-size: 28px; }
.cart .meta { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--muted); font-size: 15px; margin-top: 8px; }
.cart .dueblock { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

/* Pixel's panel: a quiet Mint surface at the top of every page of a pursuit, with where it stands, the one clear next
   step, what only a person can supply, and the conversation */
.pixelp { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; background: var(--quiet); border-color: color-mix(in srgb, var(--jade) 18%, var(--quiet)); }
.pixelp > .assist { padding: 0; background: none; border: 0; border-radius: 0; }
.pixelp > .needs { margin-top: 0; }
.pixelp > .dbar { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.pixelp .dbox textarea.input { min-height: 46px; }
.pixelp .dsend { flex-direction: row; align-items: flex-start; }
.assist { display: flex; gap: 16px; align-items: center; padding: 16px 20px; background: var(--quiet); border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--jade) 18%, var(--quiet)); }
.assist .who { display: flex; flex-direction: column; gap: 2px; }
.assist .state { font: 600 17px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--pine); }
.assist .msg { color: var(--ink); max-width: 72ch; }
.assist .eyebrow { color: var(--ink-2); }
html[data-px-theme="dark"] .assist .state { color: var(--ink); }

/* ---------- home */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; background: var(--quiet); border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--jade) 18%, var(--quiet)); }
/* the playground: Pixel's friends live in a layer under the hero's words and Pixel, clipped to the hero */
.hero > :not(.playground) { position: relative; z-index: 1; }
.hero .playground { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero .mascot .pixel-mascot { transform-origin: 50% 100%; }
.hero .lede { max-width: 58ch; }
.friend { position: absolute; display: block; overflow: visible; transform-origin: 50% 100%; }
.friend__fig { transform-box: fill-box; transform-origin: 50% 100%; }
.friend__eyes { transform-box: fill-box; }
.friend__eye { transform-box: fill-box; transform-origin: center; }
.friend--bit .friend__body { fill: var(--jade); } .friend--bit .friend__eye { fill: var(--mint); }
.friend--byte .friend__body { fill: #285A7A; } .friend--byte .friend__eye { fill: #EDF5FA; }
.friend--nib .friend__body { fill: var(--pine); } .friend--nib .friend__eye { fill: var(--mint); }
:root[data-px-theme="dark"] .friend--bit .friend__body { fill: #8FE0C2; }
:root[data-px-theme="dark"] .friend--byte .friend__body { fill: #9CCBEA; }
:root[data-px-theme="dark"] .friend--nib .friend__body { fill: #CFE3D9; }
:root[data-px-theme="dark"] .friend__eye { fill: #0E2420; }
.pg-bit { position: absolute; width: 6px; height: 6px; display: block; }
.hero .eyebrow { color: var(--ink-2); }
.hero h1 { font-size: 40px; letter-spacing: -.035em; margin-top: 4px; }
.hero .lede { color: var(--ink); }
.hero .row { margin-top: 16px; }
.hero .mascot { display: grid; place-items: center; padding: 12px; }
.hero .state { font: 600 15px/1.2 var(--f-body); color: var(--ink-2); text-align: center; margin-top: 6px; }
.welcome-art { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }

/* pipeline value: solid jade is firm, hatched jade is an estimate, a pine line spans a range */
.vhead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.vhead > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vhead .k { font: 600 14px/1.3 var(--f-body); color: var(--muted); }
.vhead .v { font: 600 28px/1.15 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vrows { display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: 132px minmax(0, 1fr) 120px; gap: 12px; align-items: center; padding: 8px 0; }
.vrow + .vrow { border-top: 1px solid var(--line); }
.vrow.idle { padding: 4px 0; }
.vl, .vv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vv { text-align: right; font-variant-numeric: tabular-nums; }
.vbar { position: relative; display: flex; height: 16px; background: var(--sunk); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.vbar.none { background: transparent; box-shadow: none; align-items: center; }
.vbar.thin { height: 8px; }
.vbar .cnt { height: 100%; background: var(--jade); border-radius: 3px; }
.vbar .firm { background: var(--jade); height: 100%; border-radius: 3px 0 0 3px; }
.vbar .est { height: 100%; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--jade) 42%, transparent) 0 4px, color-mix(in srgb, var(--jade) 16%, transparent) 4px 8px); }
.vbar .firm + .est { border-left: 2px solid var(--panel); }
.vbar .rng { position: absolute; bottom: -6px; height: 2px; background: var(--ink); }
.vbar .rng::before, .vbar .rng::after { content: ''; position: absolute; top: -3px; width: 2px; height: 8px; background: var(--ink); }
.vbar .rng::before { left: 0; } .vbar .rng::after { right: 0; }
.vlegend { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.vlegend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.sw.firm { background: var(--jade); }
.sw.est { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--jade) 42%, transparent) 0 4px, color-mix(in srgb, var(--jade) 16%, transparent) 4px 8px); box-shadow: inset 0 0 0 1px var(--line); }
.sw.rng { height: 2px; background: var(--ink); }

/* ---------- cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; color: inherit; font: inherit; transition: border-color .2s var(--ease), background .2s var(--ease); }
.card:hover { border-color: var(--jade); }
.card .t { font: 600 16px/1.3 var(--f-display); letter-spacing: -.01em; }
.kpi { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi .v { font: 600 32px/1.05 var(--f-display); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi .k { font: 600 14px/1.3 var(--f-body); color: var(--muted); }

/* board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.lane { background: var(--panel-2); padding: 12px; min-height: 120px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); }
.lane > .hd { display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-display); letter-spacing: -.01em; padding: 4px 4px 4px; }
.lane .opp { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; color: inherit; font: inherit; border-radius: 12px; transition: border-color .2s var(--ease); }
.lane .opp:hover { border-color: var(--jade); }
.lane .opp .t { font: 600 15px/1.35 var(--f-display); letter-spacing: -.01em; }

/* list rows */
.rows > * + * { border-top: 1px solid var(--line); }
.rowi { display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px; min-width: 0; }
.rowi.click { cursor: pointer; border-radius: var(--r-sm); transition: background .2s var(--ease); }
.rowi.click:hover { background: var(--hover); }
.rowi .grow > b { font-weight: 700; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; color: var(--muted); }
.empty h3 { color: var(--ink); font-size: 18px; }
.empty > svg.ic { width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--quiet); color: var(--jade); stroke-width: 1.7; }

/* drop zone */
.drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 24px; cursor: pointer; background: var(--panel); border: 2px dashed var(--line-2); border-radius: var(--r); transition: border-color .2s var(--ease), background .2s var(--ease); }
#dropzone { grid-template-columns: auto minmax(0, 1fr); }
#dropzone .small { max-width: 660px; }
.drop:hover { border-color: var(--jade); background: var(--quiet-2); }
.drop.over { border-color: var(--jade); border-style: solid; background: var(--quiet); }
.drop.px.soft { border: 2px dashed var(--line-2); }
.drop .big { font: 600 18px/1.3 var(--f-display); letter-spacing: -.02em; }
.drop > svg.ic:first-child { width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--quiet); color: var(--jade); }

/* avatars */
.av { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; font: 700 11px/1 var(--f-body); color: #FFFFFF; background: var(--jade); overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.av.pixel-av { background: transparent; border-radius: 0; box-shadow: none; }
.av.pixel-av .pixel-mascot { --pixel-size: 22px; }
.av.sm.pixel-av .pixel-mascot { --pixel-size: 18px; }
/* a role on a sign-off step, in place of a person's avatar */
.av.role-av { background: var(--quiet); color: var(--jade); }
.av.role-av svg.ic { width: 15px; height: 15px; }
/* the Team page: each role, what it does, and the people who hold it */
.role-row { align-items: flex-start; }
.role-people { gap: 6px; margin-top: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 2px 2px 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font: 600 14px/1.2 var(--f-body); color: var(--ink); }
.pchip > span { padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .x { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: -2px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 999px; }
.pchip .x:hover { background: var(--hover); color: var(--ink); }
.pchip .x svg.ic { width: 14px; height: 14px; }
.member-row { align-items: flex-start; }
.member-row .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-tools { gap: 6px; margin-top: 8px; }
.member-tools select.input.acc { width: auto; min-width: 0; padding-top: 4px; padding-bottom: 4px; }
.avstack { display: inline-flex; } .avstack .av + .av { margin-left: -6px; }

/* ---------- dialogs, toasts, runs */
#layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.scrim { position: fixed; inset: 0; background: rgba(24, 63, 54, .42); pointer-events: auto; display: grid; place-items: center; padding: 16px; }
.modal { width: min(680px, 100%); max-height: calc(100% - 32px); display: flex; flex-direction: column; pointer-events: auto; border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .2s var(--ease); }
.modal.wide { width: min(1040px, 100%); }
.modal > .hd { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.modal > .hd h2 { font: 600 20px/1.3 var(--f-display); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.modal > .hd .x { margin-left: auto; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: var(--r-sm); display: grid; place-items: center; }
.modal > .hd .x:hover { background: var(--hover); color: var(--ink); }
.modal > .bd { padding: 20px; overflow-y: auto; min-height: 0; }
.modal > .ft { padding: 14px 20px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; background: var(--panel-2); }
.totop { position: fixed; right: 24px; bottom: 24px; z-index: 110; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; color: var(--on-action); background: var(--action); border: 0; border-radius: 999px; box-shadow: var(--shadow-lg); font: 600 14px/1 var(--f-body); cursor: pointer; animation: rise .2s var(--ease); }
.totop:hover { background: var(--action-hover); }
.totop[hidden] { display: none; }
body.has-totop #toasts { bottom: 76px; }
body.modal-open .totop { display: none; }
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 120; pointer-events: none; max-width: min(420px, calc(100% - 40px)); }
body.modal-open #toasts { bottom: auto; top: 16px; max-width: min(380px, calc(100% - 40px)); }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px 12px 16px; animation: rise .2s var(--ease); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--jade); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.toast.bad { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
.toast.warn > svg.ic { color: var(--warn); }
.toast > svg.ic { color: var(--jade); margin-top: 3px; }
.toast.bad > svg.ic { color: var(--bad); }
.machine { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 8px; min-height: 40px; cursor: pointer; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); font: 600 14px/1 var(--f-body); }
.machine:hover { background: var(--hover); }
.machine .mlost { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; margin-left: -2px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 999px; font: 600 12px/1 var(--f-body); }
.machine .mlost svg.ic { width: 12px; height: 12px; }
.machine[data-active]:not([data-active="0"]) { border-color: var(--jade); background: var(--quiet-2); }
.machine .pixel-mascot { --pixel-size: 22px; }
.runlist { display: flex; flex-direction: column; gap: 12px; }
.run { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.run .log { font: 400 12.5px/1.55 var(--f-mono); color: var(--ink-2); background: var(--panel-2); padding: 10px 12px; max-height: 176px; overflow-y: auto; white-space: pre-wrap; border-radius: var(--r-sm); border: 1px solid var(--line); }
#runlog { max-height: 240px; }
.pop { position: absolute; z-index: 60; min-width: 320px; max-width: min(440px, calc(100vw - 32px)); pointer-events: auto; animation: pop .2s var(--ease); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.runhead { display: flex; gap: 16px; align-items: center; padding: 4px 0 12px; }
.runhead .state { font: 600 20px/1.2 var(--f-display); letter-spacing: -.02em; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }

/* ---------- response editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.editor .side { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 2px 4px 8px 2px; }
.brief { overflow: hidden; }
.brief .panel > .hd { background: var(--quiet); border-bottom: 1px solid var(--line); }
.tree { padding: 8px; }
.tree button { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; cursor: pointer; color: var(--ink-2); font: 500 15px/1.35 var(--f-body); border-radius: var(--r-sm); }
.tree button:hover { background: var(--hover); }
.tree button.on { background: var(--quiet); color: var(--ink); font-weight: 600; box-shadow: inset 4px 0 0 var(--jade); }
.tree button .n { font: 600 14px/1.35 var(--f-display); color: var(--muted); min-width: 32px; font-variant-numeric: tabular-nums; }
.tree .vol { font: 600 15px/1.2 var(--f-display); letter-spacing: -.01em; padding: 8px 10px 6px; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.paperwrap { background: var(--sunk); padding: 24px; border-radius: var(--r); border: 1px solid var(--line); overflow-x: auto; }
.paper { --doc-brand: #1F3864; background: var(--paper); color: var(--paper-ink); width: 100%; max-width: 8.5in; margin: 0 auto; padding: 0.8in 0.85in; border-radius: 3px; box-shadow: 0 0 0 1px var(--paper-line), 0 18px 36px -20px rgba(24, 63, 54, .4); font-family: var(--doc-font, 'Times New Roman', Times, serif); font-size: var(--doc-size, 12pt); line-height: 1.35; }
.paper .sec { position: relative; padding: 6px 0 10px; }
.paper .sec + .sec { border-top: 1px dashed var(--paper-line); margin-top: 8px; padding-top: 12px; }
.paper .sec.on { box-shadow: -16px 0 0 -12px var(--jade); }
.paper .sec .sh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; color: var(--doc-brand); font-weight: 700; }
.paper .sec .sh .chip { font-family: var(--f-body); }
.paper .sec .sh.l1 { font-size: 1.3em; } .paper .sec .sh.l2 { font-size: 1.15em; } .paper .sec .sh.l3 { font-size: 1.05em; }
.paper .sec .tools { position: absolute; right: 0; top: -26px; display: flex; gap: 2px; padding: 3px; font-family: var(--f-body); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); z-index: 3; }
.paper .sec:hover .tools, .paper .sec.on .tools, .paper .sec:focus-within .tools { opacity: 1; pointer-events: auto; }
.paper .sec .tools .btn { border-radius: 999px; }
.paper [contenteditable] { outline: none; min-height: 1.5em; border-radius: 2px; }
/* the text is the editor: a dashed ring under the pointer says so, and a solid one shows where the caret is */
.paper .ed[contenteditable="true"] { cursor: text; }
.paper .ed[contenteditable="true"]:hover:not(:focus) { outline: 1px dashed color-mix(in srgb, var(--jade) 55%, transparent); outline-offset: 5px; }
.paper [contenteditable]:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--jade) 45%, transparent); }
.paper .ed.locked { opacity: .55; pointer-events: none; }
.edhint { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px 10px 16px; margin: 0 0 12px; background: var(--info-bg); border: 1px solid var(--info-bd); border-radius: var(--r-sm); }
.edhint > svg.ic { color: var(--info); margin-top: 3px; }
.edhint .x { flex: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: var(--r-xs); display: grid; place-items: center; }
.edhint .x:hover { background: var(--hover); color: var(--ink); }
.chipbtn:hover { background: var(--hover); color: var(--ink); }
/* the drafting banner and the busy marks: Pixel works in plain view while it writes. Each busy Pixel keeps room over
   its head for the ellipsis it shows while working. */
.busybar { display: flex; gap: 16px; align-items: center; padding: 12px 18px; margin: 0 0 12px; background: var(--quiet); border: 1px solid color-mix(in srgb, var(--jade) 26%, var(--quiet)); border-radius: var(--r); }
.busybar .pixel-mascot { margin-top: 12px; }
.busybar .bt { font: 600 17px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--pine); }
.busybar .hp { max-width: 440px; margin-top: 4px; }
.edbusy { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 3px 10px 3px 6px; font: 600 13px/1 var(--f-body); color: var(--pine); background: var(--quiet); border: 1px solid color-mix(in srgb, var(--jade) 26%, var(--quiet)); border-radius: 999px; white-space: nowrap; }
.edbusy .pixel-mascot__dot { display: none; }
.paper .secbusy { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 8px 6px 12px; font-family: var(--f-body); color: #2D5047; background: #EEF5F1; border: 1px solid #CFE2D8; border-radius: 10px; }
.paper .secbusy .pixel-mascot { margin-top: 6px; }
.paper .placeholder .pixel-mascot { margin: 14px auto 6px; }
.paper .placeholder .hp { max-width: 280px; margin: 10px auto 0; }
.pixel-queued { display: block; opacity: .5; }
.pixel-queued .pixel-mascot { margin: 0 auto 6px; }
.paper p { margin: 0 0 0.6em; }
.paper h3 { font: 700 1.05em/1.3 inherit; font-family: inherit; color: var(--doc-brand); margin: 0.8em 0 0.3em; }
.paper h4 { font: 700 1em/1.3 inherit; font-family: inherit; font-style: italic; color: var(--doc-brand); margin: 0.6em 0 0.25em; }
.paper ul { list-style: none; padding-left: 1.2em; margin: 0 0 0.6em; }
.paper ul > li { position: relative; margin: 0 0 0.25em; }
.paper ul > li::before { content: ''; position: absolute; left: -1em; top: 0.55em; width: 0.38em; height: 0.38em; background: var(--doc-brand); }
.paper ol { padding-left: 1.5em; margin: 0 0 0.6em; }
.paper table { border-collapse: collapse; width: 100%; margin: 0.4em 0 0.8em; font-size: 0.92em; }
.paper th { background: var(--doc-brand); color: #fff; text-align: left; padding: 4px 6px; border: 1px solid #8EA3A0; font-weight: 700; }
.paper td { border: 1px solid #8EA3A0; padding: 4px 6px; vertical-align: top; }
.paper figure { position: relative; margin: 0.8em 0; text-align: center; user-select: none; }
.paper figure img { max-width: 100%; border: 1px solid var(--paper-line); }
.paper figure figcaption { font-weight: 700; color: var(--doc-brand); font-size: 0.9em; margin-top: 4px; }
.paper figure .ph { padding: 22px; border: 2px dashed #A9C6BA; color: #2D5047; font-family: var(--f-body); font-size: 14px; border-radius: 10px; }
/* a figure sits full width or beside the text, as it will in Word; the text wraps around one beside it, and two
   beside-text figures in a row share it. The editor contains its floats so a figure never spills into the next section. */
.paper .ed { display: flow-root; }
.paper figure.fl-right { float: right; clear: right; width: 45%; margin: 0.2em 0 0.6em 1.1em; }
.paper figure.fl-left { float: left; clear: left; width: 45%; margin: 0.2em 1.1em 0.6em 0; }
.paper figure.fl-full { clear: both; }   /* a full-width figure starts below any figure beside the text above it */
.paper .ed > ul, .paper .ed > ol { display: flow-root; }   /* a list beside a figure keeps its bullets clear of it */
.paper .figpair { display: flex; gap: 4%; align-items: flex-start; clear: both; margin: 0.8em 0; }
.paper .figpair figure { float: none; flex: 1 1 0; width: auto; margin: 0; }
.paper figure .figtools { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; gap: 2px; padding: 3px; font-family: var(--f-body); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); }
.paper figure:hover .figtools, .paper figure:focus-within .figtools { opacity: 1; pointer-events: auto; }
.paper figure .figtools button { border: 0; background: transparent; padding: 5px 9px; font: 600 12.5px/1 var(--f-body); color: var(--ink-2); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.paper figure .figtools button:hover { background: var(--hover); color: var(--ink); }
.paper figure .figtools button:disabled { opacity: .38; cursor: not-allowed; background: transparent; }
.paper figure .figtools button.on { background: var(--quiet); color: var(--pine); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
/* the running header and footer, where Word prints them; either one opens its settings */
.paper .phead, .paper .pfoot { position: relative; font-family: var(--doc-font); font-size: 0.75em; color: #4A4A4A; user-select: none; }
.paper .phead { display: flex; align-items: baseline; gap: 12px; padding: 0 0 6px; margin: 0 0 36px; border-bottom: 1px solid var(--doc-brand); }
.paper .phead b { color: var(--doc-brand); }
.paper .pfoot { padding: 6px 0 0; margin: 18px 0 0; border-top: 1px solid var(--doc-brand); }
.paper .pfline, .hfprev .pfline { display: flex; gap: 12px; }
.paper .pfline.split, .hfprev .pfline.split { justify-content: space-between; }
.paper .pfline.center, .hfprev .pfline.center { justify-content: center; text-align: center; }
.paper .plegline, .hfprev .plegline { text-align: center; }
.paper .plegline { font-size: 0.9em; font-style: italic; margin-bottom: 3px; }
.paper .phead[data-act], .paper .pfoot[data-act] { cursor: pointer; border-radius: 2px; }
.paper .phead[data-act]:hover, .paper .pfoot[data-act]:hover, .paper .phead[data-act]:focus-visible, .paper .pfoot[data-act]:focus-visible { outline: 1px dashed color-mix(in srgb, var(--jade) 55%, transparent); outline-offset: 5px; }
.paper .hfedit { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font: 600 12.5px/1 var(--f-body); color: var(--pine); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); white-space: nowrap; }
.paper .phead .hfedit { top: -30px; } .paper .pfoot .hfedit { bottom: -32px; }
.paper .phead:hover .hfedit, .paper .pfoot:hover .hfedit, .paper .phead:focus-visible .hfedit, .paper .pfoot:focus-visible .hfedit { opacity: 1; }
.hfprev { --doc-brand: #1F3864; padding: 16px 22px; background: var(--paper); color: var(--paper-ink); border-radius: 3px; box-shadow: 0 0 0 1px var(--paper-line); font-family: 'Times New Roman', Times, serif; font-size: 12pt; }
.hfprev .phead, .hfprev .pfoot { font-size: 0.75em; color: #4A4A4A; }
.hfprev .phead { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--doc-brand); }
.hfprev .phead b { color: var(--doc-brand); }
.hfprev .pfoot { padding-top: 6px; border-top: 1px solid var(--doc-brand); }
.hfprev .plegline { font-size: 0.9em; font-style: italic; margin-bottom: 3px; }
.hfprev .hfmid { padding: 22px 0; text-align: center; font-family: var(--f-body); }
.paper .gap { background: #FBEFD2; outline: 1px solid #B8892F; }
.paper .placeholder { color: #4B645B; font-family: var(--f-body); font-size: 14px; padding: 16px; border: 1.5px dashed var(--paper-line); text-align: center; border-radius: 10px; }
.edbar { position: sticky; top: 72px; z-index: 5; display: flex; gap: 2px; flex-wrap: wrap; align-items: center; padding: 6px 8px; margin-bottom: 12px; border-radius: 12px; }
.edbar button { border: 0; background: transparent; padding: 7px 10px; cursor: pointer; font: 600 14px/1 var(--f-body); color: var(--ink-2); border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; }
.edbar button:hover { background: var(--hover); }
.edbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 3px 6px; }
.reqitem { padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.reqitem + .reqitem { border-top: 1px solid var(--line); }
.reqitem .rid { font: 600 14px/1 var(--f-display); color: var(--jade); font-variant-numeric: tabular-nums; }
.comment { padding: 10px 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.comment.done { opacity: .6; }

/* figures */
.figgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fig { display: flex; flex-direction: column; min-width: 0; }
.fig .art { background: #fff; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; position: relative; border-radius: var(--r-sm); border: 1px solid var(--line); }
/* the whole figure, scaled to fit, under the strip that carries its status: nothing is cropped and nothing covers it */
.fig .art img { position: absolute; top: 38px; left: 10px; width: calc(100% - 20px); height: calc(100% - 48px); object-fit: contain; }
.fig .art .ph { color: #2D5047; font: 600 15px/1.4 var(--f-body); text-align: center; padding: 18px; display: grid; gap: 8px; justify-items: center; }
.fig .art .fstat { position: absolute; top: 8px; left: 8px; }
.fig .fbody { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 10px; min-width: 0; }
.fig .ft { display: flex; gap: 8px; align-items: baseline; }
.fig .ft .key { font: 600 15px/1.3 var(--f-display); color: var(--info); flex: none; }
.fig .ft b { font-size: 14.5px; line-height: 1.35; }
/* actions sit on the card's foot, so every card in a row lines them up */
.fig .figlay { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.fig .figlay select.input { width: auto; min-width: 0; max-width: 270px; padding: 4px 8px; font-size: 14px; }
.fig .figwhy { line-height: 1.4; }
.fig .factions { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.locked-panel { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--sunk); color: var(--muted); }
.locked-panel > .ic { width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--panel); color: var(--faint); }
.locked-panel h3 { color: var(--ink); font-size: 18px; margin: 4px 0 0; }
.locked-panel p { max-width: 60ch; margin: 0 0 8px; }
.tab.locked { color: var(--faint); }
.tab.locked:hover { color: var(--muted); }
.tab .ic.lk { width: 13px; height: 13px; }
.xray { position: relative; background: #fff; border-radius: var(--r-xs); overflow: hidden; }
.xray img, .xray .svgbox svg { width: 100%; height: auto; display: block; }
.xray .box { position: absolute; border: 2px solid rgba(32, 115, 95, .9); pointer-events: none; }
.xray .box.small { border-color: #B8892F; background: rgba(184, 137, 47, .15); }
.xray .box.over { border-color: #9A3C32; background: rgba(154, 60, 50, .18); }

/* score */
.scoreboard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.catrow { display: grid; grid-template-columns: 180px minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.catrow .v { font: 600 16px/1 var(--f-display); text-align: right; font-variant-numeric: tabular-nums; }

/* misc */
.kv { display: grid; grid-template-columns: minmax(104px, 34%) minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.kv dt { font: 600 14px/1.6 var(--f-body); color: var(--muted); padding-top: 1px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.factor { display: grid; grid-template-columns: 180px 112px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; }
/* the Brief: the bid, the market, and what is being bought on the left; dates, details, and documents beside them */
.split.brief { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); }
.bidtop { gap: 20px; align-items: flex-start; }
.bidnum { display: flex; flex-direction: column; gap: 2px; flex: none; min-width: 84px; }
.bidnum .lcd.lg { font-size: 40px; line-height: 1; }
.bidcall { padding: 12px 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.bidcall.row { align-items: center; }
/* what a score or a statement rests on: a small tag that opens the document, the pursuit, or the source */
.ref { display: inline-flex; align-items: center; padding: 0 6px; margin-left: 2px; min-height: 20px; font: 600 12px/1.5 var(--f-body); font-variant-numeric: tabular-nums; color: var(--link); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-xs); text-decoration: none; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
button.ref:hover, a.ref:hover { background: var(--hover); border-color: var(--line-2); }
.ref.quiet, span.ref { color: var(--muted); cursor: default; }
.refs { white-space: nowrap; }
.evid { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.evrow { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 9px 12px; text-align: left; font: inherit; color: inherit; background: var(--panel); border: 0; cursor: pointer; }
.evrow + .evrow { border-top: 1px solid var(--line); }
.evrow:hover { background: var(--hover); }
.evrow > .ref { margin: 2px 0 0; }
.evrow > .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.plainlist { margin: 4px 0 0; padding-left: 18px; }
.plainlist li + li { margin-top: 3px; }
.snip { color: var(--ink-2); overflow-wrap: anywhere; }
.snip mark { background: var(--quiet); color: var(--ink); font-weight: 600; padding: 0 2px; border-radius: 2px; }
.mlines { margin: 0; padding-left: 18px; }
.mlines li + li { margin-top: 6px; }
.mlines li { overflow-wrap: anywhere; }
.mlines li.hot { color: var(--bad); font-weight: 600; }
.mlines li.hot::marker { color: var(--bad); }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 16px; height: 8px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line-2); }
.pips i.on { background: var(--jade); box-shadow: none; }
.files .rowi .ic { margin-top: 3px; }
.thread { display: flex; flex-direction: column; gap: 8px; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: 60vh; overflow-y: auto; padding: 8px; box-shadow: var(--shadow-lg); }
.search-results button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; background: transparent; border: 0; text-align: left; cursor: pointer; color: var(--ink); border-radius: var(--r-sm); }
.search-results button:hover, .search-results button:focus { background: var(--hover); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal .d { min-height: 88px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal .d .n { font: 600 14px/1 var(--f-display); color: var(--muted); }
.cal .d.today { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }
/* an event always stays inside its day: two lines at most, the full name on hover */
.cal .d .ev { display: block; width: 100%; max-width: 100%; min-width: 0; background: var(--info-bg); padding: 3px 6px; font: 600 12.5px/1.3 var(--f-body); cursor: pointer; border: 1px solid var(--info-bd); text-align: left; color: var(--ink); border-radius: var(--r-xs); }
.cal .d .ev > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cal .d .ev.due { background: var(--bad-bg); border-color: var(--bad-bd); }
.cal .dow { font: 600 13px/1 var(--f-body); text-align: center; color: var(--muted); padding: 4px; }
.logo-prev { max-width: 260px; max-height: 90px; background: #fff; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.swatch { width: 28px; height: 28px; border-radius: 6px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line-2); flex: none; }
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.partner { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.partner .logo { height: 64px; display: grid; place-items: center; background: #FFFFFF; border-radius: var(--r-sm); border: 1px solid var(--line); overflow: hidden; }
.partner .logo img { max-height: 52px; max-width: 90%; }
.partner.on { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }

/* ---------- library shelf */
.libwrap { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 24px; align-items: start; }
.shelf { padding: 12px 8px; position: sticky; top: 88px; }
.shelf .sect { font: 600 14px/1 var(--f-body); color: var(--muted); padding: 14px 10px 6px; }
.shelf .sect:first-child { padding-top: 4px; }
.shelfb { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px 10px; font: 500 15px/1.2 var(--f-body); color: var(--ink-2); cursor: pointer; text-align: left; border-radius: var(--r-sm); }
.shelfb .ic { color: var(--muted); }
.shelfb:hover { background: var(--hover); color: var(--ink); }
.shelfb.on { background: var(--quiet); color: var(--ink); font-weight: 600; box-shadow: inset 4px 0 0 var(--jade); }
.shelfb.on .ic { color: var(--jade); }
.shelfb .dot { width: 6px; height: 6px; background: var(--line-2); }
/* the rate cards: one button a card, the open one marked */
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.cardpick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 170px; max-width: 300px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cardpick:hover { background: var(--hover); }
.cardpick.on { background: var(--quiet); border-color: var(--jade); box-shadow: inset 4px 0 0 var(--jade); }
.cardrow > .btn { align-self: center; }
@media (max-width: 640px) { .cardpick { min-width: 0; flex: 1 1 100%; max-width: none; } }
.libbody { padding: 20px; min-width: 0; }
.shelf-pick { display: none; }
.input[type="color"] { padding: 4px; height: 42px; cursor: pointer; }
.tbl .lcdtxt, .nowrap { white-space: nowrap; }

/* ---------- responsive */
@media (max-width: 1260px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor .side { position: static; max-height: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; padding: 0; }
}
@media (max-width: 980px) {
  .split, .split.brief, .g3, .g2, .home-grid { grid-template-columns: minmax(0, 1fr); }
  .olay { grid-template-columns: minmax(0, 1fr); }
  .olist { position: static; max-height: 340px; }
  .ofacts { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor .side { grid-template-columns: minmax(0, 1fr); }
  .libwrap { grid-template-columns: 1fr; }
  .shelf { display: none; }
  .shelf-pick { display: flex; }
  .cart { grid-template-columns: auto minmax(0, 1fr); }
  .cart .dueblock { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #rail { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 90; transform: translateX(-100%); transition: transform .2s var(--ease); }
  #app.navopen #rail { transform: none; box-shadow: 0 0 0 100vmax rgba(24, 63, 54, .42); }
  .btn.menu-btn { display: inline-flex; }
  #top { padding: 8px 16px; }
  #view { padding: 16px 16px 72px; }
  .cart { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .cart .label { display: none; }
  .due { min-width: 0; }
  .due .v { font-size: 32px; }
  .machine > span { display: none; }
  .machine { padding: 4px 8px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .factor { grid-template-columns: minmax(0, 1fr) auto; }
  .factor .note { grid-column: 1 / -1; }
  .catrow { grid-template-columns: minmax(0, 1fr) 56px; }
  .catrow .hp { grid-column: 1 / -1; grid-row: 2; }
  .drop { grid-template-columns: minmax(0, 1fr); }
  .paper { padding: 0.4in 0.32in; }
  .paperwrap { padding: 8px; }
  h1, .h1 { font-size: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .hero .mascot { display: none; }
  .hero h1 { font-size: 30px; }
  .assist { flex-wrap: wrap; }
  .busybar { flex-wrap: wrap; padding: 12px 14px; }
  .pager .pg:not(.on), .pager .pgap { display: none; }
  .pager .btn > span { display: none; }
  .paper .sec .tools .btn:nth-child(n+3) span { display: none; }
  .edbusy > span { display: none; }
  .cal .d { min-height: 60px; }
  .scoreboard { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .subnav .tools { margin-left: 0; }
  .vhead { grid-template-columns: minmax(0, 1fr); }
  .vrow { grid-template-columns: minmax(0, 1fr) auto; }
  .vrow .vbar { grid-column: 1 / -1; grid-row: 2; }
}

/* reduced motion: gestures and transitions off; text still changes */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- the preview: every document of the package, and each Word document page by page ---------- */
.respmode button { display: inline-flex; align-items: center; gap: 6px; }
.respmode button .ico { width: 15px; height: 15px; }
.pv { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.pvrail { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px; }
.pvrail > * { flex: none; }
.pvlist { padding: 0; overflow: hidden; }
.pvdoc { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 10px 12px; cursor: pointer; color: var(--ink-2); font: 500 14.5px/1.3 var(--f-body); }
.pvdoc:hover { background: var(--hover); }
.pvdoc.on { background: var(--quiet); color: var(--ink); box-shadow: inset 4px 0 0 var(--jade); }
.pvdoc.off { opacity: .6; }
.pvdoc .ico { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.pvdoc b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.pvdoc .tiny { display: block; margin-top: 2px; }
.pvdoc .tiny.bad { color: var(--bad); font-weight: 600; } .pvdoc .tiny.warn { color: var(--warn); }
.pvtodo { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.pvtodo .tiny { display: flex; gap: 6px; align-items: flex-start; } .pvtodo .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.pvout { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 8px; }
.pvout .eyebrow { padding: 2px 6px 6px; }
.pvout button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: transparent; padding: 5px 6px; cursor: pointer; color: var(--ink-2); font: 500 13.5px/1.3 var(--f-body); border-radius: var(--r-sm); }
.pvout button:hover { background: var(--hover); color: var(--ink); }
.pvout .n { font: 600 12.5px/1.3 var(--f-display); color: var(--muted); min-width: 26px; }
.pvout .pn { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.pvmain { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pvbar { position: sticky; top: 72px; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.pvtitle { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.pvbar .pvsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvbar > .grow { overflow: hidden; }
.pvbar .pvcount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pvbar .pvcount.over { color: var(--bad); }
/* a part of a document with a page limit of its own: its count beside the document's */
.partm { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 10px; font: 500 13px/1.6 var(--f-body); white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-xs); }
.partm b { font-weight: 600; color: var(--ink); }
.partm.over { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.partm.over b { color: var(--bad); }
.pvnotes { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.pvnote { display: flex; gap: 10px; align-items: center; padding: 9px 12px; }
.pvnote + .pvnote { border-top: 1px solid var(--line); }
.pvnote > .ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pvnote.bad > .ico { color: var(--bad); } .pvnote.warn > .ico { color: var(--warn); }
.pvnote .btn { flex: none; }
.pvhost { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 16px 28px; min-height: 50vh; overflow-x: auto; }
.pvpages { --z: 1; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.pvpages.grid { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px 18px; }
.pgslot { position: relative; flex: none; width: calc(var(--pw) * var(--z)); height: calc(var(--ph) * var(--z)); }
.pgtag { position: absolute; left: 0; right: 0; top: -19px; font: 600 11.5px/1 var(--f-body); letter-spacing: .02em; color: var(--muted); display: flex; justify-content: space-between; white-space: nowrap; overflow: hidden; }
.pgsheet { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); transform: scale(var(--z)); transform-origin: 0 0; background: #fff; color: #000; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 30, 28, .14), 0 16px 32px -20px rgba(20, 30, 28, .55); }
.pvpages.grid .pgsheet { cursor: zoom-in; }
.pvpages.grid .pgsheet:hover { box-shadow: 0 0 0 2px var(--jade), 0 16px 32px -20px rgba(20, 30, 28, .55); }
.pgbody { position: absolute; overflow: hidden; }
.pghead { position: absolute; display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; font: 400 9pt/1.15 var(--doc-font); color: var(--doc-brand); border-bottom: 0.75pt solid var(--doc-brand); padding-bottom: 4pt; }
.pghead b { font-weight: 700; }
.pgfoot { position: absolute; font: 400 8pt/1.15 var(--doc-font); color: #595959; }
.pgfoot .pgleg { text-align: center; }
.pgfoot .pgfl { display: flex; justify-content: space-between; gap: 12pt; }
.pgfoot .pgfl.center { justify-content: center; text-align: center; }
.tbl.pvcw td, .tbl.pvcw th { font-size: 13.5px; vertical-align: top; }
@media (max-width: 1100px) { .pv { grid-template-columns: 1fr; } .pvrail { position: static; max-height: none; } .pvout { display: none; } }

/* the document itself, in Word's sizes and spacing (see C.blocksToHtml and C.docx): points and inches, never the app's
   own type scale, so a page here breaks where the Word page breaks */
/* Word sets body text without pair kerning or ligatures unless a style turns them on, so the preview does the same */
.docflow, .dcover, .pghead, .pgfoot { font-kerning: none; font-variant-ligatures: none; }
.docflow { font-family: var(--doc-font); font-size: var(--doc-size); line-height: var(--doc-lh); font-weight: 400; font-style: normal; color: #000; text-align: left; letter-spacing: 0; word-spacing: 0; text-transform: none; overflow-wrap: break-word; -webkit-text-size-adjust: none; text-size-adjust: none; }
.docflow.pgcols { column-fill: auto; }
.docflow * { box-sizing: border-box; }
.docflow p { margin: 0; orphans: 2; widows: 2; }
.docflow b { font-weight: 700; } .docflow i { font-style: italic; }
.docflow sup, .docflow sub { font-size: 0.65em; line-height: 0; }
.docflow .dh { margin: 0; font-weight: 700; color: var(--doc-brand); font-size: var(--doc-size); line-height: var(--doc-single); break-after: avoid; break-inside: avoid; }
.docflow .dh.l1 { font-size: calc(var(--doc-size) + 4pt); border-bottom: 0.75pt solid var(--doc-accent); padding-bottom: 2pt; }
.docflow .dh.l1.sub { border-bottom: 0; padding-bottom: 0; }
.docflow .dh.l2 { font-size: calc(var(--doc-size) + 2pt); }
.docflow .dh.l3 { font-size: calc(var(--doc-size) + 1pt); }
.docflow .dh.l4 { font-style: italic; }
.docflow .dh.brk { break-before: column; }
.docflow .dbrk { height: 0; break-after: column; }
.docflow .dnote { color: #595959; font-size: max(8pt, calc(var(--doc-size) - 2pt)); }
/* the title block of a document with no cover: sizes and spacing are set inline from C.titleBlockSizes */
.docflow .dtblock { break-inside: avoid; break-after: avoid; }
.docflow .dtblock > div { margin: 0; line-height: var(--doc-single); }
.docflow .dtbe { border-top: 2.25pt solid var(--doc-accent); padding-top: 4pt; font-weight: 700; text-transform: uppercase; letter-spacing: 1pt; color: var(--doc-brand); }
.docflow .dtbt { font-weight: 700; color: var(--doc-brand); }
.docflow .dtbm { color: #404040; }
.docflow .dtbl { border: 0.75pt solid var(--doc-brand); padding: 2pt 4pt; margin-left: 4pt !important; margin-right: 4pt !important; text-align: justify; }
.docflow .dli { margin: 0; padding-left: 0.25in; text-indent: -0.1875in; orphans: 2; widows: 2; }
.docflow .dli.lv1 { padding-left: 0.5in; } .docflow .dli.lv2 { padding-left: 0.75in; }
.docflow .dli.ord { text-indent: -0.25in; }
.docflow .dli .dmk { display: inline-block; width: 0.1875in; text-indent: 0; color: var(--doc-brand); font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; font-weight: 400; font-style: normal; }
.docflow .dli.ord .dmk { width: 0.25in; color: inherit; font-family: inherit; }
.docflow table { border-spacing: 0; }
.docflow table.dtb { border-collapse: collapse; width: 100%; table-layout: fixed; }
.docflow table.dtb td { border: 0.5pt solid #8EA3C4; padding: 0 5pt; vertical-align: top; text-align: left; font-weight: 400; }
.docflow table.dtb tr { break-inside: avoid; }
.docflow table.dtb.keep { break-inside: avoid; }
.docflow table.dtb thead { break-inside: avoid; break-after: avoid; }
.docflow .dtp, .docflow .dli.tc { line-height: var(--doc-single); margin-top: var(--doc-cell, 2pt); margin-bottom: var(--doc-cell, 2pt); }
.docflow td.dth { background: var(--doc-brand); color: #fff; font-weight: 700; }
.docflow table.dtb td.drh { background: var(--doc-tint, #EBEDF1); font-weight: 700; }
.docflow td.dth .dmk { color: #fff; }
.docflow .dafter { height: 3pt; }
.docflow .dfig { text-align: center; line-height: var(--doc-single); break-after: avoid; break-inside: avoid; }
.docflow .dimg { display: inline-block; vertical-align: baseline; max-width: none; border: 0; }
.docflow span.dimg { background: #eef1f4; }
.docflow .dcap { font-weight: 400; color: #262626; font-size: max(9pt, calc(var(--doc-size) - 1pt)); line-height: var(--doc-single); text-align: center; break-inside: avoid; }
.docflow .dcap b { color: var(--doc-brand); }
.docflow .dfloat { break-inside: avoid; margin-bottom: 6pt; }
.docflow .dfloat.right { float: right; clear: right; margin-left: 0.2in; }
.docflow .dfloat.left { float: left; clear: left; margin-right: 0.2in; }
.docflow .dfloat .dcap, .docflow table.dpair .dcap { padding-top: var(--doc-cap-b, 3pt); padding-bottom: var(--doc-cap-a, 10pt); }
.docflow table.dpair { width: 100%; border-collapse: collapse; table-layout: fixed; break-inside: avoid; }
.docflow table.dpair td { padding: 0 5.4pt; vertical-align: top; border: 0; }
.docflow table.dpair .dfig.in { padding-top: 3pt; }
.docflow mark.dgap { background: #ffff00; color: inherit; }
.docflow .dtoch { font-weight: 700; color: var(--doc-brand); font-size: calc(var(--doc-size) + 3pt); margin: 0 0 10pt; break-after: avoid; }
.docflow .dtoch.tof { margin-top: 12pt; }
.docflow .dtoc { position: relative; overflow: hidden; margin: 0 0 3pt; padding-right: 2.4em; break-inside: avoid; }
.docflow .dtoc.l2 { padding-left: calc(1in / 6); } .docflow .dtoc.l3 { padding-left: calc(1in / 3); }
.docflow .dtoc.fg { line-height: var(--doc-single); }
/* the dot leader runs from the end of the entry's last line to the page number, the way a Word tab leader does */
.docflow .dtoc .t::after { content: '....................................................................................................................................................................................................'; position: absolute; white-space: nowrap; padding-left: 1pt; }
.docflow .dtoc .n { position: absolute; right: 0; bottom: 0; background: #fff; padding-left: 1pt; font-variant-numeric: tabular-nums; }
/* the cover: block margins merge to the larger of the two, the way Word spaces one paragraph from the next */
.dcover { display: flow-root; height: 100%; font-family: var(--doc-font); font-size: var(--doc-size); line-height: var(--doc-lh); color: #000; }
.dcover .dclogo { margin: 0 0 18pt; line-height: 0; }
.dcover .dclogo img { display: block; height: auto; max-width: 100%; }
.dcover .dceye { margin: 24pt 0 3pt; border-top: 3pt solid var(--doc-accent); padding-top: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 1pt; color: var(--doc-brand); font-size: calc(var(--doc-size) - 1pt); }
.dcover .dctitle { margin: 12pt 0 6pt; font-weight: 700; color: var(--doc-brand); font-size: max(24pt, calc(var(--doc-size) + 12pt)); line-height: var(--doc-single); }
.dcover .dcsub { margin: 0 0 18pt; color: #404040; font-size: calc(var(--doc-size) + 3pt); }
.dcover .dcm { margin: 0 0 1pt; line-height: var(--doc-single); }
.dcover .dclabel { margin: 12pt 0 2pt; font-weight: 700; text-transform: uppercase; color: var(--doc-brand); font-size: calc(var(--doc-size) - 1pt); }
.dcover .dcpl { display: flex; gap: 24pt; align-items: center; margin: 3pt 0 12pt; }
.dcover .dcpl img { max-height: 0.5in; max-width: 1.9in; object-fit: contain; }
.dcover .dclegend { margin: 24pt 0 0; border: 1pt solid var(--doc-brand); padding: 6pt; text-align: justify; font-size: max(8pt, calc(var(--doc-size) - 3pt)); line-height: var(--doc-single); }

/* ---------- sign-off: where the response goes ---------- */
.dv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; align-items: start; }
.dvk { font: 600 13px/1.6 var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); padding-top: 2px; white-space: nowrap; }
.dvv { min-width: 0; overflow-wrap: anywhere; }
.dvv > div + div { margin-top: 6px; }
.dvv .btn.xs.ghost { vertical-align: middle; }
.dvfiles { display: flex; flex-direction: column; gap: 2px; }
.dvto { display: flex; flex-direction: column; gap: 6px; }
.dvp { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dvmail { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .93em; }
.dvnote { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; color: var(--warn); }
.dvnote svg.ic { flex: none; width: 14px; height: 14px; margin-top: 2px; }
@media (max-width: 760px) { .dv { grid-template-columns: 1fr; gap: 2px 0; } .dvv { margin-bottom: 10px; } }

/* ---------- tell Pixel: the box and the conversation, inside Pixel's panel ---------- */
.dbar { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin: 0 0 14px; background: var(--quiet-2); border: 1px solid color-mix(in srgb, var(--jade) 22%, var(--quiet)); border-radius: var(--r); }
.dbox { display: flex; gap: 12px; align-items: flex-start; }
.dbox textarea.input { resize: vertical; min-height: 58px; max-height: 44vh; background: var(--panel); field-sizing: content; }
.dbox .dchips { gap: 6px; flex-wrap: wrap; }
.dbox .dchips .chip { white-space: normal; text-align: left; font-weight: 500; }
.dsend { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; }
.dthread { display: flex; flex-direction: column; gap: 8px; }
.dthread.tall { max-height: 54vh; overflow-y: auto; padding: 2px 4px 2px 2px; }
.dturn { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dturn.undone .da { opacity: .62; }
.dturn.queued { border-style: dashed; background: transparent; }
.dq, .da { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dq > .grow { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.dq .nw { white-space: nowrap; }
.da > .grow { min-width: 0; }
.dsay { color: var(--ink); }
.dans { padding: 8px 12px; background: var(--panel-2); border-left: 3px solid var(--jade); border-radius: var(--r-xs); overflow-wrap: anywhere; }
.ddid, .dneeds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.ddid li { display: flex; gap: 8px; align-items: baseline; }
.ddid li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--jade); transform: translateY(-2px); }
.ddid li > .grow { min-width: 0; overflow-wrap: anywhere; }
.dneeds { margin-top: 4px; padding-left: 16px; list-style: disc; }
.dpages { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dpages b { color: var(--ink); } .dpages b.bad { color: var(--bad); }
.dacts { gap: 6px; flex-wrap: wrap; align-items: center; }
.dstep { color: var(--pine); font-weight: 600; }
html[data-px-theme="dark"] .dstep { color: var(--ink); }
.dwrap { display: flex; flex-direction: column; gap: 4px; }
.dwrap .dfold { align-self: flex-end; }
.dline { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dline:hover { background: var(--hover); }
.dline > .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dline .dl-t { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dline > svg.ic { flex: none; color: var(--muted); }
.dbar > .linkish { align-self: flex-start; }
@media (max-width: 760px) { .pixelp { padding: 12px; } .dturn { padding: 8px 10px; } .dbox { flex-wrap: wrap; } .dq > .av, .da > .av { display: none; } .dsend { flex-direction: row; width: 100%; } .ddid li { flex-wrap: wrap; } }

/* ---------- gaps: one place to answer them ---------- */
.gapbar { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--warn-bd); background: var(--warn-bg); border-radius: var(--r); }
.gapbar > .ico { width: 20px; height: 20px; flex: none; color: var(--warn); }
.gaplist { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.gaprow { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.gaprow.customer { background: var(--sunk); }
.gaprow textarea { resize: vertical; min-height: 0; }
.gapplaces { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--sunk); border-radius: var(--r-sm); max-height: 180px; overflow-y: auto; }
.gapctx mark { background: #fff3a3; color: #3d3000; padding: 0 2px; border-radius: 2px; }

/* ---------- what needs you: the short list under Pixel's panel ---------- */
.needs { display: flex; flex-direction: column; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.need { display: flex; gap: 10px; align-items: center; padding: 9px 12px; }
.need + .need { border-top: 1px solid var(--line); }
.need > .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.need .btn { flex: none; }

/* a figure shown in the text that prints in the appendix */
.figappx { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bd); vertical-align: 1px; }

/* ---------- findings grouped by what clears them ---------- */
.fgroup { border-top: 1px solid var(--line); }
.fgroup:first-child { border-top: 0; }
.fgroup > summary { list-style: none; cursor: pointer; padding: 10px 14px; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary:hover { background: var(--hover); }
.fgroup[open] > summary { background: var(--panel-2); }
.fgroup > .rows { padding: 0 0 4px 14px; }

/* ---------- a term with its plain meaning on hover or focus ---------- */
.gl { position: relative; text-decoration: underline dotted; text-decoration-color: var(--muted); text-underline-offset: 3px; cursor: help; }
.gl:hover::after, .gl:focus::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: max-content; max-width: min(320px, 80vw); padding: 7px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left; color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.gl:focus { outline: 2px solid var(--jade); outline-offset: 1px; }

/* ---------- the steps of a pursuit, lit at the current one ---------- */
.pstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
.pstrip .ps { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; font: inherit; text-align: left; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; min-width: 0; }
.pstrip .ps .bar { height: 4px; background: var(--line); border-radius: 2px; }
.pstrip .ps .lbl { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstrip .ps .sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstrip .ps.done { color: var(--ink-2); }
.pstrip .ps.done .bar { background: var(--jade); }
.pstrip .ps.now { color: var(--ink); border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }
.pstrip .ps.now .bar { background: repeating-linear-gradient(90deg, var(--jade) 0 6px, var(--mint) 6px 10px); }
.pstrip .ps.warn { color: var(--bad); border-color: var(--bad-bd); }
.pstrip .ps.warn .bar { background: var(--bad); }
.pstrip .ps:hover { background: var(--hover); }
@media (max-width: 760px) { .pstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the setup list, floating in the corner of every page ---------- */
#dock { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; justify-content: flex-end; max-width: calc(100% - 40px); pointer-events: none; }
#dock:empty { display: none; }
#dock > * { pointer-events: auto; }
.sdock { width: 360px; max-width: 100%; max-height: max(260px, calc(100vh - 200px)); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); animation: rise .2s var(--ease); }
.sdock > .hd { display: flex; align-items: center; gap: 8px; padding: 12px 8px 6px 16px; }
.sdock > .hd h2 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--f-display); letter-spacing: -.01em; }
.sdock > .hd h2 svg.ic { color: var(--jade); }
.sdock > .hd .x { margin-left: auto; display: grid; place-items: center; padding: 6px; color: var(--muted); background: transparent; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.sdock > .hd .x:hover { color: var(--ink); background: var(--hover); }
.sdock .sprog { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.sdock .sprog .bar { flex: 1; height: 6px; overflow: hidden; background: var(--quiet-2); border-radius: 999px; }
.sdock .sprog .bar > span { display: block; height: 100%; background: var(--jade); border-radius: 999px; }
.sdock > .bd { min-height: 0; overflow-y: auto; }
.sdock .si { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px 8px 16px; }
.sdock .si + .si { border-top: 1px solid var(--line); }
.sdock .si .ck { width: 18px; height: 18px; flex: none; margin-top: 2px; border: 2px solid var(--line-2); border-radius: 4px; display: grid; place-items: center; }
.sdock .si.done .ck { background: var(--jade); border-color: var(--jade); color: #fff; }
.sdock .si.done b { color: var(--muted); font-weight: 500; }
.sdock .si > .btn { flex: none; }
.sdock > .ft { display: flex; justify-content: flex-end; padding: 6px 10px; background: var(--panel-2); border-top: 1px solid var(--line); }
.spill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg); font: 600 14px/1 var(--f-body); cursor: pointer; animation: rise .2s var(--ease); }
.spill:hover { background: var(--hover); }
.spill > svg.ic:first-child { color: var(--jade); }
.spill .n { padding: 4px 8px; color: var(--ink); background: var(--quiet-2); border-radius: 999px; font: 600 12px/1 var(--f-body); }
/* the toasts rise above the box, and the Top button sits beside it; on a wide screen the toasts stay low, beside it */
body.has-dock:not(.modal-open) #toasts { bottom: min(calc(var(--dock-h, 44px) + 32px), calc(100vh - 220px)); }
body.has-dock .totop { right: calc(var(--dock-w, 0px) + 36px); }
@media (min-width: 1100px) {
  body.dock-open:not(.modal-open) #toasts { bottom: 20px; right: calc(var(--dock-w, 372px) + 36px); }
  body.dock-open.has-totop:not(.modal-open) #toasts { bottom: 76px; }
}

/* ---------- the steps to send it, numbered ---------- */
.sendstep { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.sendstep + .sendstep { border-top: 1px solid var(--line); }
.sendstep > .lcdtxt { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 50%; }
.sendstep .field { margin-top: 8px; max-width: 360px; }
@media (max-width: 640px) { .sendstep { flex-wrap: wrap; } .sendstep > .btn, .sendstep > a.btn { margin-left: 38px; } }

/* ---------- a file name that opens the file ---------- */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.linklike:hover { text-decoration-color: currentColor; }
.linklike:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; border-radius: 2px; }

/* ---------- color-team reviews: numbered in order (gold is Pixel's, so no review wears a color) ---------- */
.ctnum { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; font-weight: 600; font-size: 12px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 50%; }
.rowi.ct.open .ctnum { color: var(--jade); border-color: var(--jade); }
.rowi.ct.closed .ctnum { color: #fff; background: var(--jade); border-color: var(--jade); }
.rowi.ct.closed b, .rowi.ct.skipped b { color: var(--muted); }