/* 3020 · Apple Human Interface Guidelines look, held to WCAG 2.2 AA.
   Loaded after app.css: redefines the shared tokens and restyles the building blocks.
   Colors: iOS system colors fail AA for text (blue 4.0:1, green 2.2:1, orange 2.2:1), so the accessible
   "Increase Contrast" shades are used; every text pair here is ≥ 4.5:1, every control border ≥ 3:1. */
:root, :root[data-theme="light"]{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --paper:#F2F2F7; --paper-2:#E5E5EA; --card:#FFFFFF; --ink:#1C1C1E; --muted:#6C6C70; --line:#D1D1D6; --field:#8E8E93;
  --olive:#0062CC; --olive-2:#0062CC; --olive-soft:#E5F0FC; --on-olive:#FFFFFF;
  --sky:#0062CC; --sky-soft:#E5F0FC; --rust:#C4160C; --rust-soft:#FDECEB; --amber:#A34B00; --amber-soft:#FFF3E0;
  --pos:#1B7A34; --pos-bg:#E8F5EC; --crit:#A34B00; --crit-bg:#FFF3E0; --neg:#C4160C; --neg-bg:#FDECEB; --info:#0062CC; --info-bg:#E5F0FC;
  --focus:#0062CC; --r-card:14px; --r-fld:10px; --r-md:12px; --r-lg:18px; --r-sm:8px;
  --bar: rgba(249,249,249,.82); --shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --mx-deep:#3A1166; --mx-violet:#A845D4; --mx-ink:#140A24; color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#000000; --paper-2:#1C1C1E; --card:#1C1C1E; --ink:#F2F2F7; --muted:#AEAEB2; --line:#38383A; --field:#8E8E93;
  --olive:#4BA3FF; --olive-2:#4BA3FF; --olive-soft:#0B2A4A; --on-olive:#000000; --sky:#4BA3FF; --sky-soft:#0B2A4A;
  --rust:#FF6961; --rust-soft:#3A1715; --amber:#FFB340; --amber-soft:#3A2A10;
  --pos:#4CD964; --pos-bg:#0F2E17; --crit:#FFB340; --crit-bg:#3A2A10; --neg:#FF6961; --neg-bg:#3A1715; --info:#4BA3FF; --info-bg:#0B2A4A;
  --focus:#4BA3FF; --bar: rgba(22,22,24,.82); --shadow: none; color-scheme: dark; } }
:root[data-theme="dark"]{
  --paper:#000000; --paper-2:#1C1C1E; --card:#1C1C1E; --ink:#F2F2F7; --muted:#AEAEB2; --line:#38383A; --field:#8E8E93;
  --olive:#4BA3FF; --olive-2:#4BA3FF; --olive-soft:#0B2A4A; --on-olive:#000000; --sky:#4BA3FF; --sky-soft:#0B2A4A;
  --rust:#FF6961; --rust-soft:#3A1715; --amber:#FFB340; --amber-soft:#3A2A10;
  --pos:#4CD964; --pos-bg:#0F2E17; --crit:#FFB340; --crit-bg:#3A2A10; --neg:#FF6961; --neg-bg:#3A1715; --info:#4BA3FF; --info-bg:#0B2A4A;
  --focus:#4BA3FF; --bar: rgba(22,22,24,.82); --shadow: none; color-scheme: dark; }
@media (prefers-contrast: more){ :root{ --muted:#3A3A3C; --line:#8E8E93; --field:#3A3A3C; } }
@media (prefers-contrast: more){ :root[data-theme="dark"]{ --muted:#D1D1D6; --line:#8E8E93; --field:#D1D1D6; } }
@media (prefers-contrast: more) and (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --muted:#D1D1D6; --line:#8E8E93; --field:#D1D1D6; } }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* base */
html{font-size:100%; scroll-padding-top:88px} /* 2.4.11: focused items never hide under the sticky bar */
html,body{background:var(--paper); color:var(--ink); font-family:var(--font); font-size:1rem; line-height:1.47; letter-spacing:-.01em; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); letter-spacing:-.02em; color:var(--ink)}
h1{font-size:2.125rem; font-weight:700; line-height:1.15}          /* HIG large title 34 */
h2{font-size:1.25rem; font-weight:600}                              /* title 3 */
h3{font-size:1.0625rem; font-weight:600}                            /* headline 17 */
.muted,.help{color:var(--muted)}
a{color:var(--olive)}
:focus-visible{outline:3px solid var(--focus)!important; outline-offset:2px!important; border-radius:6px}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--olive); color:var(--on-olive); padding:10px 16px; border-radius:10px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
main:focus{outline:none}

/* top bar: translucent material, like a navigation bar */
.top{background:var(--bar)!important; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--line)!important; box-shadow:none!important}
body::before{background:var(--bar)}
.nav a{color:var(--ink)!important; font-weight:500; border-radius:8px; min-height:44px; display:inline-flex; align-items:center}
.nav a[aria-current="page"]{color:var(--olive)!important; font-weight:600}
.nav a[aria-current="page"]::after{background:var(--olive)!important}
.logo-word{color:var(--ink)!important}

/* cards = grouped inset sections */
.card,.panel,.stat,.tile,.sc,.hp-link,.hp-ask{background:var(--card)!important; border:0!important; border-radius:var(--r-card)!important; box-shadow:var(--shadow)!important}
.sc{border-left:5px solid var(--info)!important}.sc-neg{border-left-color:var(--neg)!important}.sc-crit{border-left-color:var(--crit)!important}
.tile .big{color:var(--olive)!important}.tile .big.alert{color:var(--crit)!important}
.stat b{font-family:var(--font-display); font-weight:700}

/* buttons: filled (primary), tinted (default/ghost); 44pt minimum */
.btn{min-height:44px; border-radius:var(--r-fld)!important; font-weight:600!important; letter-spacing:-.01em; border:0!important; background:var(--olive-soft)!important; color:var(--olive)!important; box-shadow:none!important; padding:10px 18px}
.btn.primary{background:var(--olive)!important; color:var(--on-olive)!important}
.btn.ghost{background:var(--olive-soft)!important; color:var(--olive)!important}
.btn.warn{background:var(--neg-bg)!important; color:var(--neg)!important}
.btn.sm{min-height:36px; padding:6px 14px; font-size:.9375rem}
.btn:active{transform:none; filter:brightness(.92)}
.btn[disabled]{opacity:.45}
.bulkbar{background:var(--card)!important; color:var(--ink)!important; border-radius:var(--r-card); box-shadow:0 4px 18px rgba(0,0,0,.12)!important}
.bulkbar .btn{background:var(--olive-soft)!important; color:var(--olive)!important}
.bulkbar .btn.ghost{background:transparent!important; color:var(--olive)!important}
.link{color:var(--olive)!important}

/* fields */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{
  background:var(--card)!important; color:var(--ink)!important; border:1px solid var(--field)!important; border-radius:var(--r-fld)!important; min-height:44px; padding:10px 12px; font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:1}
label.f{font-size:.8125rem; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0}

/* segmented control */
.seg{background:var(--paper-2)!important; border-radius:10px!important; padding:2px!important; border:0!important; gap:2px}
.seg label{border:0!important; border-radius:8px!important; background:transparent!important; color:var(--ink)!important; font-weight:500; min-height:36px}
.seg label:has(input:checked){background:var(--card)!important; color:var(--ink)!important; box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg label:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:1px}

/* pills / badges */
.pill{border-radius:999px!important; font-weight:600; background:var(--paper-2)!important; color:var(--ink)!important}
.pill.ok{background:var(--pos-bg)!important; color:var(--pos)!important}
.pill.flag{background:var(--neg-bg)!important; color:var(--neg)!important}
.pill.info{background:var(--info-bg)!important; color:var(--info)!important}
.pill.unplanned{background:var(--crit-bg)!important; color:var(--crit)!important}

/* tables → inset grouped lists */
table{border-collapse:separate; border-spacing:0}
th{color:var(--muted)!important; font-weight:600; font-size:.8125rem; text-transform:none!important; letter-spacing:0!important; border-bottom:.5px solid var(--line)!important}
td{border-bottom:.5px solid var(--line)!important}
tr.phase td,.wt-row.is-phase,.wt-row.wt-total{background:var(--paper)!important}
.wt-row{background:var(--card)!important; border-bottom:.5px solid var(--line)!important}
.wt-row:hover,tr.clickable:hover td{background:var(--olive-soft)!important}
.wbs-l{border-color:var(--field)!important; color:var(--muted)!important}

/* message strips */
.msg{border-radius:var(--r-fld)!important; border:0!important; border-left:4px solid currentColor!important}
.msg.ok{background:var(--pos-bg)!important; color:var(--pos)!important}.msg.warn{background:var(--crit-bg)!important; color:var(--crit)!important}
.msg.err{background:var(--neg-bg)!important; color:var(--neg)!important}.msg.info{background:var(--info-bg)!important; color:var(--info)!important}
.msg .btn{background:var(--card)!important}

/* dialogs: native <dialog> as an iOS sheet */
dialog.sheet{border:0; padding:22px; border-radius:18px; background:var(--card); color:var(--ink); max-width:min(560px,calc(100vw - 24px)); width:100%; max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 12px 48px rgba(0,0,0,.28)}
dialog.sheet.wide{max-width:min(860px,calc(100vw - 24px))}
dialog.sheet::backdrop{background:rgba(0,0,0,.4)}
@media (max-width:720px){ dialog.sheet{margin:auto 0 0; max-width:100%; border-radius:18px 18px 0 0; max-height:92dvh; padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))} }
dialog.sheet .actions{position:sticky; bottom:-22px; background:var(--card); padding:12px 0 0; margin-top:16px}

/* toasts */
.toast{background:rgba(28,28,30,.94)!important; color:#fff!important; border-radius:14px!important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toast{background:rgba(58,58,60,.96)!important} }
:root[data-theme="dark"] .toast{background:rgba(58,58,60,.96)!important}

/* board */
.col{background:var(--paper-2)!important; border-radius:var(--r-card)!important}
.kcard{background:var(--card)!important; border-radius:12px!important; box-shadow:var(--shadow)!important; border-top:0!important; border-right:0!important; border-bottom:0!important; color:var(--ink)!important}

/* help dock */
.help-dock{background:var(--paper)!important; border-left:.5px solid var(--line)!important}

/* the mark sits on its own ink tile in both themes */
.logo-mark,.brandmark{border-radius:10px}

/* target size (2.5.8): small icon buttons get at least 24×24, ours 32+ */
.wt-ab,.col-menu,.wt-caret,.bell{min-width:32px; min-height:32px}
.tab[aria-current="page"]{color:var(--olive)!important; font-weight:600; background:transparent!important; box-shadow:inset 0 -3px 0 var(--olive)!important}
.tab{color:var(--ink)!important; min-height:44px; display:inline-flex; align-items:center}
.subtab[aria-current="page"],.subtab[aria-selected="true"]{color:var(--ink)!important; font-weight:600; border-bottom-color:var(--olive)!important}
.subtab{min-height:44px; display:inline-flex; align-items:center; color:var(--muted)}
t-badge{vertical-align:middle}
:root,:root[data-theme="light"]{--muted:#5E5E63}
.kcard{cursor:pointer;text-align:left}
.kcard-open{all:unset;cursor:pointer;display:block;font-weight:600;font-size:.9375rem;color:var(--ink);border-radius:6px}
.kcard-open:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.kmove{border:0;background:transparent;color:var(--olive)!important;min-height:32px;padding:4px 8px;border-radius:8px;font-weight:600;cursor:pointer;margin-left:auto}
.kmove:hover{background:var(--olive-soft)}
.avatar{background:var(--mx-deep,#3A1166)!important;color:#FFFFFF!important}
dialog.sheet .actions{position:static}
.pva-bars i.p{background:var(--field)!important}.pva-bars i.a{background:var(--olive)!important}.pva-bars i.a.over{background:var(--neg)!important}
.cb-bar .l1{background:var(--olive)}.cb-bar .l2{background:var(--mx-violet)}.cb-bar .l3{background:var(--crit)}
.wt-track span{background:var(--pos)}.wt-bud.is-tight .wt-track span{background:var(--crit)}.wt-bud.is-over .wt-track span{background:var(--neg)}
.chip{background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--field)!important;min-height:36px}
.chip:has(input:checked){background:var(--olive-soft)!important;border-color:var(--olive)!important}
.auth{background:var(--card)!important;color:var(--ink)}
main:focus,main:focus-visible{outline:none!important}
/* dark-safe surfaces for older hard-coded light grays */
.wt-track,.cb-bar,.glance-bar{background:var(--paper-2)!important}
.wt-caret:hover,.wt-ab:hover,.bell:hover,.col-menu:hover{background:var(--olive-soft)!important}
.hp-m{background:var(--card)!important;border-color:var(--line)!important}.hp-m.me{background:var(--olive-soft)!important}
.xsec,.fc,.appr-f,.pf-h{border-color:var(--line)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--olive)}
.wt-row.is-add{background:var(--olive-soft)!important}
.wt-hint{background:var(--info-bg)!important;color:var(--info)!important}
.sc-why li,.xlist li,.appr-list li{border-color:var(--line)!important}
@media (max-width:520px){
  .logo-word{display:none}
  .tabs{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:0 10px}
  .top-in{gap:8px!important;padding:6px 10px!important}
  .nav-user{flex:none;gap:2px}
}
.kcard.is-draggable{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kghost{position:fixed!important;left:0;top:0;z-index:200;pointer-events:none;opacity:.95;box-shadow:0 12px 32px rgba(0,0,0,.28)!important}
body.is-board-dragging,body.is-board-dragging *{cursor:grabbing!important}
.kcard.is-dragging{opacity:.35}
.col.is-drop{outline:3px dashed var(--olive)!important;outline-offset:-3px;background:var(--olive-soft)!important}
.rules{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.rule{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:.5px solid var(--line)}
.rule:first-child{border-top:0}
.rn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--olive-soft);color:var(--olive);font-weight:700;display:grid;place-items:center;font-size:.875rem}
.rin{display:inline-block!important;width:auto!important;min-width:120px;min-height:38px!important;margin:2px 4px;padding:6px 10px!important}
.route{margin:8px 0 0;color:var(--ink)}