/* ============================================================================
   AU ONE · DESIGN OKR — presentation polish layer (2026-09-08)
   ----------------------------------------------------------------------------
   Loaded ONLY by design.html, after the page's own stylesheet, so every rule
   here refines what the engine already renders. It never changes markup,
   logic, saving or realtime; delete this file and Design works exactly as
   before, just plainer.

   Contents
     1 · tokens (surface / border / accent / glow) + one motion system
     2 · buttons: hover · press · focus · disabled · loading
     3 · tab bar + tab transition
     4 · Overview objective cards and key results
     5 · Projects: project cards, phase (objective) groups, KR rows, add-KR
     6 · progress bars and rings
     7 · inputs and selects
     8 · quiet save status chip · remote pulse · number pop
     9 · empty states · skeletons
    10 · mobile · reduced motion · print
   ============================================================================ */

/* ── 1 · tokens + motion ────────────────────────────────────────────────── */
:root{
  --okr-accent:var(--brand);                                   /* AU olive */
  --okr-accent-ink:#fff;
  --okr-accent-soft:color-mix(in srgb,var(--brand) 14%,transparent);
  --okr-accent-line:color-mix(in srgb,var(--brand) 55%,transparent);
  --okr-glow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent),0 6px 18px color-mix(in srgb,var(--brand) 18%,transparent);
  --okr-glow-soft:0 0 0 2px color-mix(in srgb,var(--brand) 16%,transparent);
  --okr-surface:var(--card);
  --okr-surface-2:color-mix(in srgb,var(--card) 92%,var(--label) 8%);
  --okr-surface-hover:color-mix(in srgb,var(--card) 96%,var(--label) 4%);
  --okr-border:color-mix(in srgb,var(--label) 9%,transparent);
  --okr-border-strong:color-mix(in srgb,var(--label) 16%,transparent);
  --okr-text:var(--label);
  --okr-muted:var(--label2);
  --okr-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  --okr-shadow-hover:0 2px 4px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.09);
  --okr-good:var(--green);
  --okr-bad:var(--red);
  --motion-fast:110ms;
  --motion-base:170ms;
  --motion-slow:240ms;
  --ease-standard:cubic-bezier(.2,.7,.2,1);
  --ease-emphasized:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --okr-surface:#161618;
    --okr-surface-2:#1f1f22;
    --okr-surface-hover:#1c1c1f;
    --okr-border:rgba(255,255,255,.07);
    --okr-border-strong:rgba(255,255,255,.13);
    --okr-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
    --okr-shadow-hover:0 2px 6px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.45);
  }
}
html[data-theme="dark"]{
  --okr-surface:#161618;
  --okr-surface-2:#1f1f22;
  --okr-surface-hover:#1c1c1f;
  --okr-border:rgba(255,255,255,.07);
  --okr-border-strong:rgba(255,255,255,.13);
  --okr-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  --okr-shadow-hover:0 2px 6px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.45);
}
html[data-theme="light"]{
  --okr-surface:#FFFFFF;
  --okr-surface-2:#F6F5F1;
  --okr-surface-hover:#FAFAF7;
  --okr-border:rgba(30,32,24,.08);
  --okr-border-strong:rgba(30,32,24,.15);
}
/* light ground: warm neutral instead of flat iOS grey */
html[data-theme="light"] body{background:#F4F3EE}
@media (prefers-color-scheme:light){ html:not([data-theme="dark"]) body{background:#F4F3EE} }

/* ── 2 · buttons ────────────────────────────────────────────────────────── */
main button,.navbar button,.tabbar button,#auMaster button,#dsCollab button{
  transition:background var(--motion-base) var(--ease-standard),color var(--motion-base) var(--ease-standard),
             border-color var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),
             transform var(--motion-fast) var(--ease-standard),opacity var(--motion-base) var(--ease-standard);
  -webkit-tap-highlight-color:transparent;
}
main button:active,.tabbar button:active,.navbar button:active{transform:scale(.97)}
main button:focus-visible,.navbar button:focus-visible,.tabbar button:focus-visible,#auMaster button:focus-visible{
  outline:none;box-shadow:var(--okr-glow-soft),0 0 0 1px var(--okr-accent)
}
main button:disabled,#auMaster button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* primary calls to action: olive, glowing, alive */
.addkr-ok,.addproj-save,.au-btn.au-primary,.auadd button,#auGate .gbtn,.wkdp-btn.ok:not(.danger){
  background:linear-gradient(180deg,color-mix(in srgb,var(--okr-accent) 92%,#fff 8%),var(--okr-accent))!important;
  color:var(--okr-accent-ink)!important;border:0;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 14px color-mix(in srgb,var(--okr-accent) 28%,transparent);
}
.addkr-ok:hover,.addproj-save:hover,.au-btn.au-primary:hover,.auadd button:hover,#auGate .gbtn:hover,.wkdp-btn.ok:not(.danger):hover{
  filter:brightness(1.06);box-shadow:var(--okr-glow);transform:translateY(-1px)
}
.addkr-ok:active,.addproj-save:active,.au-btn.au-primary:active,.auadd button:active,#auGate .gbtn:active{transform:scale(.98);filter:brightness(.98)}

/* secondary / tertiary */
.addproj-cancel,.addkr-cancel,.bridge-btn,.reset-chip,.exp-rchip,.autog,.auchip,.lead-assign-btn,.wkdp-btn.cancel,.au-btn:not(.au-primary){
  border:1px solid var(--okr-border)!important;background:var(--okr-surface-2)!important;color:var(--okr-text)!important;
}
.addproj-cancel:hover,.addkr-cancel:hover,.bridge-btn:hover,.reset-chip:hover,.exp-rchip:hover,.lead-assign-btn:hover,.wkdp-btn.cancel:hover,.au-btn:not(.au-primary):hover{
  background:var(--okr-surface-hover)!important;border-color:var(--okr-border-strong)!important;box-shadow:var(--okr-shadow)
}
.autog.on,.auchip.on{background:var(--okr-accent)!important;border-color:var(--okr-accent)!important;color:var(--okr-accent-ink)!important;box-shadow:var(--okr-glow-soft)}
.addproj-toggle{background:var(--okr-accent-soft);color:var(--okr-accent);border:1px solid transparent;box-shadow:none}
.addproj-toggle:hover{border-color:var(--okr-accent-line);box-shadow:var(--okr-glow-soft)}
.addproj-toggle.open{background:var(--okr-accent);color:var(--okr-accent-ink)}
.addkr{color:var(--okr-accent);border-radius:9px;padding:6px 10px;margin-left:-10px;display:inline-flex;align-items:center;gap:6px}
.addkr:hover{background:var(--okr-accent-soft)}
.addkr:active{opacity:1;transform:scale(.98)}
.bridge-btn{color:var(--okr-accent)!important}
.remove-chip{border-radius:9px}
.remove-chip:hover{background:color-mix(in srgb,var(--okr-bad) 12%,transparent)}
.remove-chip.armed{box-shadow:0 0 0 3px color-mix(in srgb,var(--okr-bad) 22%,transparent)}
.collab-btn{opacity:.8;border-radius:9px;padding:6px 8px}
.collab-btn:hover{opacity:1;background:var(--okr-accent-soft);color:var(--okr-accent)}
.krc-del{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;opacity:.75}
.krc-del:hover{opacity:1;background:color-mix(in srgb,var(--okr-bad) 12%,transparent);color:var(--okr-bad)}
.krrev-dec,.krrev-inc{border-radius:7px;transition:background var(--motion-fast),transform var(--motion-fast)}
.krrev-dec:hover,.krrev-inc:hover{background:var(--okr-accent-soft);color:var(--okr-accent)}

/* loading state: any control the helper marks busy */
main button[aria-busy="true"],#auMaster button[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
main button[aria-busy="true"]::after,#auMaster button[aria-busy="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 25%,#fff 25%);border-top-color:#fff;
  animation:okrSpin .7s linear infinite;color:var(--okr-accent-ink)
}
.addproj-cancel[aria-busy="true"]::after,.au-btn:not(.au-primary)[aria-busy="true"]::after{border-top-color:var(--okr-accent)}

/* checkboxes: olive tick, satisfying press */
.cbx{transition:background var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard),color var(--motion-base),transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-base)}
.cbx:hover{border-color:var(--okr-accent-line);box-shadow:var(--okr-glow-soft)}
.cbx.on{background:var(--okr-good);border-color:var(--okr-good);box-shadow:0 0 0 3px color-mix(in srgb,var(--okr-good) 18%,transparent)}
.cbx.on svg{animation:okrTick var(--motion-slow) var(--ease-emphasized)}
.cbx:focus-visible{outline:none;box-shadow:var(--okr-glow-soft),0 0 0 1px var(--okr-accent)}
.phase-grp.active .cbx.master{border-color:var(--okr-accent);color:var(--okr-accent)}

/* segmented control: glider carries the accent */
.seg{background:var(--okr-surface-2);border:1px solid var(--okr-border);border-radius:11px}
.seg .glider{background:var(--okr-surface);box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 1px var(--okr-border-strong),inset 0 -2px 0 var(--okr-accent-line);
  transition:transform var(--motion-slow) var(--ease-emphasized),width var(--motion-slow) var(--ease-emphasized)}
html[data-theme="dark"] .seg .glider{background:#2a2a2e}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .seg .glider{background:#2a2a2e}}
.seg button{transition:color var(--motion-base)}

/* ── 3 · tab bar + page transition ──────────────────────────────────────── */
.tabbar{box-shadow:0 -1px 0 var(--okr-border),0 -10px 30px rgba(0,0,0,.06)}
.tabbtn{position:relative;gap:4px;padding:9px 4px 7px;border-radius:12px;margin:4px 2px;color:var(--okr-muted)}
.tabbtn svg{transition:transform var(--motion-base) var(--ease-emphasized),color var(--motion-base)}
.tabbtn:hover{color:var(--okr-text)}
.tabbtn.active{color:var(--okr-accent)}
.tabbtn.active svg{transform:translateY(-1px) scale(1.06)}
.tabbtn.active::before{
  content:"";position:absolute;left:18%;right:18%;top:2px;height:3px;border-radius:0 0 3px 3px;
  background:var(--okr-accent);box-shadow:0 2px 10px color-mix(in srgb,var(--okr-accent) 60%,transparent);
  animation:okrTabIn var(--motion-base) var(--ease-emphasized)
}
.tabbtn.active .tl{font-weight:700}
.tabbtn:active{opacity:1;transform:scale(.95)}
.tab-page{animation:okrPageIn 200ms var(--ease-standard)}
.tab-page.active{animation:okrPageIn 200ms var(--ease-standard)}
.navbar{box-shadow:0 1px 0 var(--okr-border)}
.navbar.scrolled{box-shadow:0 1px 0 var(--okr-border),0 6px 20px rgba(0,0,0,.06)}
.largetitle h1{font-weight:800;letter-spacing:-.02em}
.largetitle .eyebrow .dot{background:var(--okr-accent);box-shadow:0 0 8px var(--okr-accent)}
.theme-btn:hover,.acct-btn:hover,.aubackbtn:hover{box-shadow:var(--okr-glow-soft)}

/* ── 4 · Overview objectives + KRs ──────────────────────────────────────── */
.card,.obj,.proj,.qcard,.kpi,.hero{
  background:var(--okr-surface);border:1px solid var(--okr-border);box-shadow:var(--okr-shadow);
  transition:box-shadow var(--motion-slow) var(--ease-standard),border-color var(--motion-slow),transform var(--motion-slow) var(--ease-standard)
}
.obj:hover,.proj:hover,.qcard:hover{box-shadow:var(--okr-shadow-hover);border-color:var(--okr-border-strong)}
.obj{position:relative}
.obj::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--okr-accent);opacity:.55;transition:opacity var(--motion-base)}
.obj:hover::before{opacity:1;box-shadow:0 0 12px var(--okr-accent-line)}
.obj-head{padding:18px 18px 14px;gap:14px}
.obj-badge{width:38px;height:38px;border-radius:11px;font-size:14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 3px 10px rgba(0,0,0,.14)}
.obj-head .o-tag{font-size:11px;letter-spacing:.08em;color:var(--okr-muted)}
.obj-head .o-title{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.22;margin-top:2px;text-wrap:balance}
.obj-head .o-score .os-v{font-size:24px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color var(--motion-base)}
.obj-head .o-score .os-l{font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.kr{padding:12px 18px 13px 18px;border-top:1px solid var(--okr-border);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--okr-surface-2) 55%,transparent));transition:background var(--motion-base)}
.kr:hover{background:var(--okr-surface-2)}
.kr .kr-top{margin-bottom:8px}
.kr .kr-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.kr .kr-name .kr-id{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--okr-accent);background:var(--okr-accent-soft);padding:2px 7px;border-radius:999px;margin-right:8px;vertical-align:1px}
.kr .kr-val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.group-head{color:var(--okr-muted);letter-spacing:.09em}
.kpi .k-val{font-weight:800;letter-spacing:-.03em}
.hero{background:linear-gradient(135deg,var(--okr-surface),color-mix(in srgb,var(--okr-surface) 88%,var(--okr-accent) 12%))}
.hero .hero-body h2{font-weight:800;letter-spacing:-.02em;text-wrap:balance}

/* ── 5 · Projects: cards, objective groups, KR rows ─────────────────────── */
.proj-head{padding:15px 18px;transition:background var(--motion-base)}
.proj-head:hover{background:var(--okr-surface-hover)}
.proj-head:active{background:var(--okr-surface-2)}
.proj-id .pn{font-size:18px;font-weight:700;letter-spacing:-.02em}
.proj-id .pmeta{color:var(--okr-muted)}
.proj-ring .rc{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.proj-fin{border-top:1px solid var(--okr-border);background:var(--okr-surface-2)}
.proj-fin .f .fv{font-variant-numeric:tabular-nums}
.proj-detail.open{animation:okrExpand var(--motion-slow) var(--ease-emphasized)}
.proj.is-edited{border-color:var(--okr-accent-line)}
.pill{transition:background var(--motion-base),color var(--motion-base)}
.pill.done{box-shadow:0 0 0 1px color-mix(in srgb,var(--okr-good) 35%,transparent)}
.detail-head{color:var(--okr-muted);letter-spacing:.08em}
/* objective (phase) groups */
.phase-grp{border-top:1px solid var(--okr-border);transition:background var(--motion-base)}
.phase-row{padding:12px 6px 12px 4px;border-radius:12px;transition:background var(--motion-base)}
.phase-row:hover{background:var(--okr-surface-2)}
.phase-grp.open>.phase-row{background:var(--okr-accent-soft)}
.phase-grp.open{box-shadow:inset 3px 0 0 var(--okr-accent-line);border-radius:0 12px 12px 0}
.phase-row .pr-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.phase-row.complete .pr-num{background:var(--okr-good);box-shadow:0 0 0 3px color-mix(in srgb,var(--okr-good) 18%,transparent)}
.phase-row.active .pr-num{background:var(--okr-accent)}
.phase-pct{font-weight:800;font-variant-numeric:tabular-nums}
.grp-chev{transition:transform var(--motion-base) var(--ease-emphasized),color var(--motion-base)}
.phase-grp.open .grp-chev{color:var(--okr-accent)}
/* KR rows */
.kr-rows{margin:2px 0 12px 38px;border-left:2px solid var(--okr-accent-line);padding-left:14px}
.phase-grp.open .kr-rows{animation:okrExpand var(--motion-slow) var(--ease-emphasized)}
.krc{padding:8px 4px 8px 0;border-top:1px solid var(--okr-border);border-radius:8px;transition:background var(--motion-base)}
.krc:hover{background:var(--okr-surface-2)}
.krc-name{font-size:14px;font-weight:500;transition:color var(--motion-base)}
.krc.done .krc-name{color:var(--okr-muted)}
.krc.done .cbx.kr{box-shadow:0 0 0 3px color-mix(in srgb,var(--okr-good) 16%,transparent),0 0 10px color-mix(in srgb,var(--okr-good) 30%,transparent)}
.krc-date{background:var(--okr-surface-2);padding:2px 7px;border-radius:999px}
.krrev{transition:box-shadow var(--motion-base)}
.krrev.on{box-shadow:var(--okr-glow-soft)}
/* add key result */
.addkr-wrap{padding-top:10px}
.addkr-form{animation:okrExpand var(--motion-base) var(--ease-emphasized);gap:8px}
.addkr-input{border:1px solid var(--okr-border);background:var(--okr-surface);border-radius:10px;padding:10px 12px;transition:border-color var(--motion-base),box-shadow var(--motion-base)}
.addkr-input:focus{box-shadow:var(--okr-glow-soft);border-color:var(--okr-accent)}
.addkr-ok{border-radius:10px;padding:10px 16px}
.addkr-cancel{border-radius:10px}
/* a row on its way out (delete) */
.okr-out{animation:okrOut 150ms var(--ease-standard) forwards}

/* ── 6 · progress ───────────────────────────────────────────────────────── */
.bar{height:8px;border-radius:5px;background:var(--okr-surface-2);box-shadow:inset 0 0 0 1px var(--okr-border)}
.bar>i{transition:width 320ms var(--ease-emphasized),box-shadow var(--motion-slow);border-radius:5px}
.bar>i[data-w="100"],.phase-row.complete .bar>i{box-shadow:0 0 10px color-mix(in srgb,var(--okr-good) 55%,transparent)}
.ring-svg .prog{transition:stroke-dashoffset 480ms var(--ease-emphasized),stroke var(--motion-base)}
.qc-metric .bar{height:7px}

/* ── 7 · inputs ─────────────────────────────────────────────────────────── */
main input:not([type="checkbox"]):not([type="radio"]),main select,main textarea,#auMaster input,#auMaster select,#auGate input,.au-input{
  border-radius:10px;transition:border-color var(--motion-base),box-shadow var(--motion-base),background var(--motion-base)
}
main input:not([type="checkbox"]):not([type="radio"]):focus,main select:focus,main textarea:focus,#auMaster input:focus,#auGate input:focus,.au-input:focus{
  outline:none;border-color:var(--okr-accent)!important;box-shadow:var(--okr-glow-soft)!important
}
.rev-dur,.exp-date,.qsel,.sort-sel,.st-sel,.ty-sel{border:1px solid var(--okr-border);background:var(--okr-surface)}
.rev-durwrap,.exp-inwrap,.bill-contract{border:1px solid var(--okr-border);border-radius:10px;transition:border-color var(--motion-base),box-shadow var(--motion-base)}
.rev-durwrap:focus-within,.exp-inwrap:focus-within,.bill-contract:focus-within{border-color:var(--okr-accent);box-shadow:var(--okr-glow-soft)}
@media (pointer:coarse){
  main input:not([type="checkbox"]):not([type="radio"]),main select,main textarea{font-size:16px}
}

/* ── 8 · quiet save chip · remote pulse · number pop ────────────────────── */
.okr-save{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--okr-muted);opacity:0;transform:translateY(2px);pointer-events:none;white-space:nowrap;
  transition:opacity var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard),color var(--motion-base)
}
.okr-save.is-on{opacity:1;transform:none}
.okr-save::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.okr-save[data-state="saving"]{color:var(--okr-accent)}
.okr-save[data-state="saving"]::before{animation:okrBlink 1s ease-in-out infinite}
.okr-save[data-state="saved"]{color:var(--okr-good)}
.okr-save[data-state="saved"]::before{width:auto;height:auto;background:none;content:"✓";font-weight:900;line-height:1}
.okr-save[data-state="local"]{color:var(--okr-muted)}
.okr-save[data-state="local"]::before{width:auto;height:auto;background:none;content:"✓";font-weight:900;line-height:1}
.okr-save[data-state="error"]{color:var(--okr-bad)}
.okr-save[data-state="error"]::before{width:auto;height:auto;background:none;content:"!";font-weight:900;line-height:1}
.phase-row .pr-meta .okr-save,.krc .okr-save{margin-left:6px}
/* a value another designer just changed — one soft pulse on that field's row only */
.okr-pulse{animation:okrPulse 700ms var(--ease-standard)}
.okr-pop{display:inline-block;animation:okrPop 300ms var(--ease-emphasized)}

/* ── 9 · empty states · skeletons ───────────────────────────────────────── */
.empty{padding:34px 16px;color:var(--okr-muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.empty .okr-empty-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--okr-accent-soft);color:var(--okr-accent);box-shadow:var(--okr-glow-soft)}
.empty .okr-empty-ic svg{width:22px;height:22px}
.okr-skel{position:relative;overflow:hidden;background:var(--okr-surface-2);border-radius:10px;min-height:14px}
.okr-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--okr-text) 6%,transparent),transparent);animation:okrShimmer 1.4s ease-in-out infinite}
.okr-skel-card{padding:16px 18px;border:1px solid var(--okr-border);border-radius:16px;background:var(--okr-surface);display:grid;gap:10px}
.okr-skel-card .okr-skel{height:12px}
.okr-skel-card .okr-skel.t{width:55%;height:16px}
.okr-skel-card .okr-skel.b{height:8px;width:100%}

/* ── keyframes ──────────────────────────────────────────────────────────── */
@keyframes okrPageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes okrExpand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes okrOut{to{opacity:0;transform:translateX(-6px);max-height:0;padding-top:0;padding-bottom:0;margin:0}}
@keyframes okrTick{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes okrTabIn{from{transform:scaleX(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes okrSpin{to{transform:rotate(360deg)}}
@keyframes okrBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes okrPulse{0%{background-color:color-mix(in srgb,var(--okr-accent) 18%,transparent)}100%{background-color:transparent}}
@keyframes okrPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes okrShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ── 10 · mobile · reduced motion · print ───────────────────────────────── */
@media (max-width:430px){
  .obj-head{padding:16px 16px 12px}
  .obj-head .o-title{font-size:17px}
  .obj-head .o-score .os-v{font-size:21px}
  .kr{padding:11px 16px 12px}
  .kr .kr-top{flex-wrap:wrap;row-gap:4px}
  .kr .kr-val{flex:0 1 auto}
  .proj-id .pn{font-size:16px}
  .kr-rows{margin-left:30px;padding-left:10px}
  .krc{flex-wrap:wrap;row-gap:6px}
  .krc-name{flex-basis:calc(100% - 34px)}
  .krc .krrev,.krc .krc-date{margin-left:31px}
  .krc-del{margin-left:auto}
}
@media (pointer:coarse){
  .cbx.kr{width:24px;height:24px}
  .krc-del,.krrev-dec,.krrev-inc,.collab-btn{min-width:36px;min-height:36px}
  .addkr,.addkr-ok,.addkr-cancel,.addproj-save,.addproj-cancel,.bridge-btn,.remove-chip,.reset-chip{min-height:40px}
  .tabbtn{min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  main *,.navbar *,.tabbar *,#auMaster *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .tab-page,.tab-page.active,.addkr-form,.proj-detail.open,.phase-grp.open .kr-rows,.okr-out,.okr-pulse,.okr-pop,.tabbtn.active::before{animation:none!important}
  .okr-out{opacity:0}
  .okr-skel::after{animation:none!important}
}
@media print{ .okr-save,.tabbar{display:none!important} .obj,.proj{box-shadow:none;break-inside:avoid} }