/* Dragonfly Circuit: shared presentation layer. CRM behavior remains in index.html. */
/* BRAND-COLORS.md, copied exactly (ground rule 11; test/brand-colors.test.js). The role tokens below are these. */
:root{color-scheme:light;--df-navy:#131533;--df-violet:#5B3E84;--df-blue:#3C67A6;--df-teal:#29A4A6;--df-teal-ink:#1F7B7D;--df-blue-light:#678FC8;--df-violet-light:#9B7FC3;--df-page:#F4F5F9;--df-surface-dark:#1D2047;--df-text-dark:#E8EAF4;--ink:var(--df-navy);--muted:#545A78;--line:#DADDE8;--panel:#fff;--page:var(--df-page);--teal:var(--df-teal-ink);--teal-bg:#EDF7F7;--red:#a73546;--red-bg:#fff0f2;--amber:#81541a;--amber-bg:#fff3dd;--purple:var(--df-violet);--surface2:#F2F3F8;--button-text:#fff;--shadow:0 8px 30px #13153312}
:root[data-circuit-theme=dark]{color-scheme:dark;--ink:var(--df-text-dark);--muted:#A9ADCB;--line:#33376A;--panel:var(--df-surface-dark);--page:var(--df-navy);--teal:var(--df-teal);--teal-bg:#182C47;--red:#ffb4c0;--red-bg:#48283e;--amber:#f0ca8a;--amber-bg:#403326;--purple:var(--df-violet-light);--surface2:#252957;--button-text:var(--df-navy);--shadow:0 16px 50px #0005}
body{line-height:1.5;background:var(--page)}button,input,select,textarea{color:var(--ink);background:var(--panel)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}button{border-color:var(--line);border-radius:7px;min-height:36px}button.primary,.auth-btn{background:var(--teal);border-color:var(--teal);color:var(--button-text)}
#auth-screen{background:var(--page)}.auth-card{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:8px;box-shadow:var(--shadow)}.auth-logo{background:#fff}.auth-subtitle,.auth-note{color:var(--muted)}
header{height:auto;min-height:70px;padding:12px 28px;background:var(--panel);color:var(--ink);border-top:2px solid var(--purple);border-bottom:1px solid var(--line);box-shadow:none}.header-title,.header-divider,.user-pill,.sign-out-btn{color:var(--muted)}.user-pill{background:var(--surface2)}.user-avatar{background:var(--teal);color:var(--button-text)}.sign-out-btn{border-color:var(--line)}.plan-badge{color:var(--purple);border-color:var(--purple);background:transparent;border-radius:4px}
.appearance-control{display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface2);color:var(--muted);flex:none}.appearance-control span{display:flex;pointer-events:none}
nav.tabs{padding:0 28px;background:var(--panel);border-color:var(--line);gap:8px;overflow-x:auto}nav.tabs button{min-height:48px;color:var(--muted)}nav.tabs button.active{color:var(--teal);border-bottom-color:var(--teal)}
.circuit-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:24px 26px 20px;background:linear-gradient(120deg,var(--panel),transparent);border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:6px}.circuit-intro span{color:var(--purple);font-size:11px;letter-spacing:1.2px;font-weight:700}.circuit-intro h1{font-size:27px;line-height:1.2;letter-spacing:-.6px;margin:6px 0}.circuit-intro p{margin:0;color:var(--muted);font-size:13px}.circuit-intro svg{width:210px;height:70px;color:var(--teal);opacity:.18;flex:none}
main{padding:20px 28px}.toolbar{padding:12px 14px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.toolbar input,.field input,.field select,.field textarea{background:var(--surface2);color:var(--ink);border-color:var(--line)}.toolbar label.small{background:var(--panel)!important;color:var(--ink);border-color:var(--line)!important}
table,.box,.card,.col,dialog,.panel,.empty{background:var(--panel);border-color:var(--line);border-radius:6px;box-shadow:0 3px 14px #13153308}th{background:var(--surface2);color:var(--muted)}tr.row:hover td{background:var(--surface2)}.col{background:var(--surface2);border:1px solid var(--line)}.card{padding:11px 12px}.card:hover{border-color:var(--teal)}.chip{border-radius:4px}.avatar{background:var(--teal);color:var(--button-text)}.panel{border-top:2px solid var(--purple)}.next{background:var(--teal-bg);border-color:var(--teal)}dialog{color:var(--ink)}#toast{background:var(--ink);color:var(--page)}
@media(max-width:960px){header,nav.tabs{padding-inline:16px}.circuit-intro{padding:18px}.circuit-intro svg{display:none}main{padding:16px}.header-right{gap:8px}}
@media(max-width:600px){.header-title,.header-divider,.user-pill span{display:none}.header-mark img{max-width:58px}.auth-card{padding:24px 18px}.toolbar>*{flex:1 1 140px}.toolbar .grow{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.auth-card>.appearance-control{margin:0 0 16px auto}
/* The Lite/Premium test switch (dev, qa, demo only). index.html styles it white-on-transparent for the
   pre-Circuit navy header; on Circuit's white light-mode header that was invisible (Matthew, 2026-09-24). */
.tier-switch{color:var(--muted);border-color:currentColor}.tier-switch:hover{background:var(--surface2);color:var(--ink)}
/* Sign-in card, Matthew 2026-09-24: the product name larger and in the main ink, and the environment line as a
   yellow caution badge. The old brown (#784600) read 2.1:1 on the dark card. The badge is 11:1 in both modes and
   never shows empty: prod has no environment line. */
.auth-subtitle{font-size:1.05rem;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.auth-env{display:inline-block;margin:0 0 1rem;padding:.3rem .75rem;border:1px solid #d9a800;border-radius:6px;background:#ffd23f;color:#2b2100;font-size:.95rem;font-weight:800;letter-spacing:.04em}
.auth-env:empty,.auth-env[hidden]{display:none}
/* Sign-in card, Matthew 2026-09-24: the product name on the top row beside the appearance control, above the logo,
   and the DEV badge evenly spaced between the logo and the sign-in button. The control is pinned to the card's corner
   so the name can share its row; the name's side padding keeps it clear of the control, more on a phone,
   where the card's own padding is narrower. The logo owns the gap below it, so prod, which has no badge, keeps the same gap. */
.auth-card{position:relative;padding-top:1.6rem}
.auth-card>.appearance-control{position:absolute;top:1.1rem;right:1.1rem;margin:0}
.auth-card>.auth-subtitle{min-height:34px;display:flex;align-items:center;justify-content:center;margin:0 0 1rem;padding:0 16px;font-size:1.15rem}
.auth-card>.auth-logo-wrap{margin-bottom:1.4rem}
.auth-card>.auth-env{margin:0 0 1.4rem}
@media(max-width:600px){.auth-card>.auth-subtitle{padding:0 42px}}
/* The Premium tier badge, Matthew 2026-09-24 ("looks weird", seen on the Project Tracker): the
   pre-Circuit pages filled it dark green and the rule above colored its text Circuit purple, so
   Premium read purple on dark green; the Agreement Tracker never filled it, so Premium looked like
   Lite. Premium is the primary teal chip with the button text color, 5.0:1 in light and 5.9:1 in
   dark, and Lite keeps the violet outline. The same in all four products. In the navy header the
   shared:navy-header block below draws both in Teal (BRAND-COLORS.md). */
body[data-plan="premium"] .plan-badge{background:var(--teal);border-color:var(--teal);color:var(--button-text)}

/* Compact working headers: general update for Lite and Premium. */
.circuit-intro{padding:14px 20px;margin-bottom:12px;gap:12px}
.circuit-intro h1{font-size:22px;line-height:1.25;letter-spacing:-.4px;margin:0 0 4px}
.circuit-intro p{margin:0;font-size:14px;line-height:1.45}
.circuit-intro>div>span,.circuit-intro>svg{display:none}
@media(max-width:600px){
  .circuit-intro{padding:12px 16px;margin-bottom:10px}
  .circuit-intro h1{font-size:20px}
  .circuit-intro p{font-size:13px}
}

/* Keep the environment-only tier switch on its own row on narrow screens. */
@media(max-width:600px){
  #app>header:not(.top),.brand-bar{flex-wrap:wrap;gap:8px;padding:10px 16px}
  .header-left,.brand-left{display:contents}
  .header-right{margin-left:auto;gap:6px;flex-shrink:0}
  .tier-switch{order:3;flex:1 0 100%;width:100%;margin:0;min-height:32px;
    white-space:normal;border-radius:6px;padding:6px 10px}
}

.toolbar input,.toolbar select{min-height:40px;font-size:14px}
/* The board's View picker had the browser's square grey box beside the rounded buttons (dry run, 2026-10-06). */
.toolbar select{border:1px solid var(--line);border-radius:7px;padding:0 10px;background:var(--surface2);color:var(--ink)}
.toolbar button,.toolbar .import-link{min-height:40px}
td{font-size:14px}
@media(max-width:600px){
  .toolbar{padding:10px;gap:8px}
  .toolbar>.muted{flex:1 0 100%}
  .toolbar #refreshed:empty{display:none}
  .toolbar input[type=search]{min-width:0;width:100%}
  .board{scroll-snap-type:x proximity}
  .board .col{scroll-snap-align:start}
}

/* Status pills (2026-10-07): why a deal is on Today, and on its card. The same names and colors in
   all four products: .pill-overdue red, .pill-today amber, .pill-neutral grey, .pill-info blue. */
:root{--pill-overdue-bg:#fee2e2;--pill-overdue-fg:#991b1b;--pill-today-bg:#fef3c7;--pill-today-fg:#92400e;--pill-neutral-bg:#e8edf4;--pill-neutral-fg:#3d4a5e;--pill-info-bg:#dbeafe;--pill-info-fg:#1e40af}
:root[data-circuit-theme=dark]{--pill-overdue-bg:#5a1f2a;--pill-overdue-fg:#fecaca;--pill-today-bg:#4a3511;--pill-today-fg:#fde68a;--pill-neutral-bg:#2b3a56;--pill-neutral-fg:#d6deeb;--pill-info-bg:#1e3a66;--pill-info-fg:#bfdbfe}
.pill{display:inline-block;padding:.1rem .45rem;border-radius:4px;font-size:.68rem;font-weight:700;letter-spacing:.04em;line-height:1.45;text-transform:uppercase;white-space:nowrap;vertical-align:middle;background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}
.pill-overdue{background:var(--pill-overdue-bg);color:var(--pill-overdue-fg)}
.pill-today{background:var(--pill-today-bg);color:var(--pill-today-fg)}
.pill-neutral{background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}
.pill-info{background:var(--pill-info-bg);color:var(--pill-info-fg)}
.pill-secondary{font-size:.6rem;padding:.05rem .35rem;opacity:.9}

/* One text size across every toolbar (2026-10-07): buttons, labels, selects, the Tools summary and
   hint text all 14px; hint text in the muted color. Settings, which has boxes rather than a
   toolbar, follows the same size for its hints and small buttons. */
.toolbar,.toolbar button,.toolbar button.small,.toolbar label,.toolbar select,.toolbar input,.toolbar .muted,.toolbar .import-link,.workspace-tools>summary,.workspace-tool-list>*{font-size:14px}
.toolbar .muted{color:var(--muted)}
#settings .hint,#settings button.small,#settings .field{font-size:14px}
@media(max-width:600px){.toolbar>#today-count{flex:1 1 auto}.toolbar>#today-count:empty{display:none}}

/* Phone workspaces keep the first useful record close to the controls. */
@media(max-width:640px){.circuit-intro p{display:none}.circuit-intro{padding-block:8px}.circuit-intro h1{margin:0;font-size:18px}}

/* dialog-chrome -- every pop-up window, the same in all four products (test/dialog-chrome.test.js).
   Matthew, 2026-10-08: "I have to scroll all the way back up to the top and click the X in the
   corner to close this window". The title row and its close button stay at the top while the
   body scrolls under them; a window with nothing to save ends with a Close button of its own;
   Escape closes it; and every title is 1.3rem, 700, in the heading color. The header takes over
   the window's top padding, so it sticks to the very top edge with no strip above it. */
dialog,.panel,.plan-dialog{padding-top:0}
.dialog-head{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--panel);border-bottom:1px solid var(--line);margin:0 -18px 12px;padding:14px 18px 10px}
.dialog-head h2,dialog h2,.panel h2{margin:0;font-size:1.3rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.dialog-head .sub{margin:2px 0 0}
.panel .dialog-head{margin:0 -20px 12px;padding:16px 20px 10px}
.plan-dialog .dialog-head{margin:0 -1.5rem 1.25rem;padding:1.25rem 1.5rem .75rem}
.dialog-x{flex-shrink:0;min-width:36px;min-height:36px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer}
.dialog-x:hover{background:var(--surface2);color:var(--ink)}
.dialog-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:720px){.plan-dialog .dialog-head{margin:0 -1rem 1rem;padding:1rem 1rem .6rem}}
/* end dialog-chrome */
/* shared:ai-mark-dark -- identical in all four products (test/brand-colors.test.js). BRAND-COLORS.md's
   Violet light reads 4.6:1 on a dark card but 4.0:1 on the AI box's own violet tint, so in dark mode the
   AI marks take the same hue lightened, 5.7:1 there: the shade the file allows where text would fail. */
:root[data-circuit-theme=dark] :is(.ai-label,.ai-fill-note,.ai-filled,.ai-filled span,#entry-mode.entry-mode-filled){color:color-mix(in srgb,var(--df-violet-light) 75%,#fff)}
/* end shared:ai-mark-dark */
/* shared:navy-header -- identical in all four products (test/brand-colors.test.js, test/parity.test.js).
   Matthew, 2026-10-10 (BRAND-COLORS.md, ground rule 11): the top bar is Deep Navy in both modes, its
   text white, and its own accents -- the underline, the plan badge, the tier switch, the avatar and
   focus rings -- Teal. The selector is each product's top bar, the header that opens #app on the board
   and on the import page (the Project Tracker's brand bar), never a header.top card inside <main>
   (the Project Tracker's project card and its import page's title).
   Since 2026-10-10 (checklist item 95, "My big thing is consistency with all these apps") this block
   sets the whole header, not only its colors: every part's type, size, spacing and the three
   breakpoints, so no product rule can make one product's header read differently (the CRM's "/" was
   a different glyph from the Agreement Tracker's because the header inherited each page's own font
   stack). The anatomy and every value are DESIGN.md's "UI standard"; a product keeps only its own
   title text and its own placement on the page: whether the bar sticks, and the Project Tracker's bleeding out of .wrap.
   Values are the Agreement Tracker's, the reference, except where three products agreed. */
#app>header:first-child{background:var(--df-navy);color:#fff;border-top-color:var(--df-navy);border-bottom-color:var(--df-teal)}
#app>header:first-child :is(.header-title,.brand-title,.who,.user-pill,.sign-out-btn){color:#fff}
#app>header:first-child #header-title{font-family:system-ui,-apple-system,sans-serif;font-size:.85rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;color:#fff}
#app>header:first-child :is(.header-divider,.brand-divider){color:rgba(255,255,255,.6)}
#app>header:first-child .user-pill{background:rgba(255,255,255,.1)}
#app>header:first-child .user-avatar{background:var(--df-teal);color:var(--df-navy)}
#app>header:first-child :is(.sign-out-btn,.btn,.appearance-control){background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
#app>header:first-child :is(.sign-out-btn,.btn,.appearance-control):hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--df-teal)}
#app>header:first-child .tier-switch{color:#fff;border-color:var(--df-teal)}
#app>header:first-child .tier-switch:hover{background:rgba(255,255,255,.12);color:#fff}
#app>header:first-child .plan-badge{background:transparent;border-color:var(--df-teal);color:var(--df-teal)}
body[data-plan="premium"] #app>header:first-child .plan-badge{background:var(--df-teal);border-color:var(--df-teal);color:var(--df-navy)}
#app>header:first-child :focus-visible{outline-color:var(--df-teal)}
#app>header:first-child{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:18px;box-sizing:border-box;height:auto;min-height:70px;padding:12px 28px;box-shadow:none;border-width:2px 0 1px;border-style:solid;font-family:system-ui,-apple-system,sans-serif;font-size:14px;font-weight:400;font-style:normal;line-height:1.5;letter-spacing:normal;text-transform:none}
#app>header:first-child .header-left{display:flex;align-items:center;gap:12px;min-width:0;margin:0;padding:0}
#app>header:first-child .header-mark{display:inline-flex;align-items:center;flex-shrink:0;margin:0;padding:0}
#app>header:first-child .header-mark img{display:block;height:34px;width:auto;max-width:none;margin:0;padding:0}
#app>header:first-child .header-divider{font-family:system-ui,-apple-system,sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:normal;margin:0;padding:0;opacity:1}
#app>header:first-child #header-title{margin:0;padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app>header:first-child .plan-badge{display:inline-flex;align-items:center;box-sizing:border-box;min-height:0;margin:0;padding:1px 8px;border-width:1px;border-style:solid;border-radius:4px;font-family:system-ui,-apple-system,sans-serif;font-size:10.5px;font-weight:700;line-height:16px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
#app>header:first-child .tier-switch:not([hidden]){display:inline-flex}
#app>header:first-child .tier-switch{align-items:center;box-sizing:border-box;min-height:0;width:auto;flex:0 1 auto;order:0;margin:0 0 0 6px;padding:1px 9px;border-width:1px;border-style:dashed;border-radius:999px;font-family:system-ui,-apple-system,sans-serif;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:transparent}
#app>header:first-child .header-right{display:flex;align-items:center;gap:16px;flex-shrink:0;margin:0;padding:0}
#app>header:first-child [data-appearance]:not([hidden]){display:grid}
#app>header:first-child [data-appearance]{place-items:center;box-sizing:border-box;width:34px;height:34px;min-height:34px;flex:0 0 auto;margin:0;padding:0;border-width:1px;border-style:solid;border-radius:50%;font-family:system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;cursor:pointer}
#app>header:first-child .user-pill{display:flex;align-items:center;gap:8px;box-sizing:border-box;margin:0;padding:3.2px 12px 3.2px 4px;border:0;border-radius:999px;font-family:system-ui,-apple-system,sans-serif;font-size:12.8px;font-weight:400;line-height:1.5;letter-spacing:normal;white-space:nowrap}
#app>header:first-child .user-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;margin:0;padding:0;border-radius:50%;font-size:10.4px;font-weight:700;line-height:1.5;letter-spacing:normal}
#app>header:first-child #user-name{font-size:12.8px;font-weight:400;line-height:1.5;color:#fff;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app>header:first-child .sign-out-btn{box-sizing:border-box;min-height:36px;margin:0;padding:4.8px 11.2px;border-width:1px;border-style:solid;border-radius:6px;font-family:system-ui,-apple-system,sans-serif;font-size:12.48px;font-weight:400;line-height:1.5;letter-spacing:normal;white-space:nowrap;cursor:pointer}
/* When space runs short the header gives way in one order, the same in all four, and no part ever
   wraps its own text: first the tier switch takes its short label (data-short, "Lite · switch"),
   then the signed-in name goes and the avatar stays, then the title shortens with an ellipsis (the
   whole name is its title attribute), then below 800px the switch drops to a row of its own and
   below 600px the title and the "/" go. 1440px at 125% zoom is 1152px wide, at 150% 960px. */
@media(max-width:1180px){#app>header:first-child .tier-switch[data-short]{font-size:0;letter-spacing:0}#app>header:first-child .tier-switch[data-short]::after{content:attr(data-short);font-size:10px;letter-spacing:.06em}}
@media(max-width:1100px){#app>header:first-child #user-name{display:none}#app>header:first-child .user-pill{padding:5px}}
@media(max-width:960px){#app>header:first-child{padding-inline:16px}#app>header:first-child .header-right{gap:8px}}
@media(max-width:850px){#app>header:first-child{padding:10px 16px;gap:10px}}
@media(max-width:800px){
#app>header:first-child{flex-wrap:wrap;gap:8px;padding:10px 16px}
#app>header:first-child .header-left{display:contents}
#app>header:first-child #header-title{flex:1 1 0;max-width:max-content}
#app>header:first-child .tier-switch{order:3;flex:1 0 100%;width:100%;margin:0;min-height:32px;border-radius:6px;padding:6px 10px;overflow:hidden;text-overflow:ellipsis}
#app>header:first-child .tier-switch[data-short]{font-size:10px;letter-spacing:.06em}
#app>header:first-child .tier-switch[data-short]::after{content:none}
#app>header:first-child .header-right{margin-left:auto;gap:6px;flex-shrink:0}
}
@media(max-width:600px){
#app>header:first-child .header-mark img{max-width:54px}
#app>header:first-child :is(#header-title,.header-divider){display:none}
#app>header:first-child .sign-out-btn{padding-inline:9px}
}
/* end shared:navy-header */
/* shared:environment-banner-and-plan-badge -- identical in all four products (test/design-md.test.js).
   Matthew, 2026-09-25: the Agreement Tracker's badge and the Project Tracker's banner did not match
   the others. The look is the Ticket Tracker's and the CRM's: banner, badge and header title. Each page keeps its own
   display rules (dev and qa only) and layout margins. */
html body .env-banner,html body .environment-banner{background:#fff3dd;color:#81541a;border:0;border-bottom:1px solid #ef9f27;border-radius:0;padding:6px;font-size:14px;font-weight:600;line-height:21px;letter-spacing:normal;text-transform:none;text-align:center}
html[data-circuit-theme=dark] body .env-banner,html[data-circuit-theme=dark] body .environment-banner{background:#403326;color:#f0ca8a}
html body .plan-badge{background:transparent;border:1px solid var(--purple);color:var(--purple);border-radius:4px;padding:1px 8px;font-size:10.5px;font-weight:700;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
html body .header-title,html body .brand-title{font-size:.85rem;letter-spacing:.06em;font-weight:400;text-transform:uppercase}
/* end shared:environment-banner-and-plan-badge */