/* Shared cocoa controls; selection identity stays in headings and summaries. */
@media screen {
  :root {
    --brand:#765846; --brand-d:#5D4233; --page:#F5F1EB; --card:#FFFCF7;
    --text:#3F332D; --muted:#70645C; --line:#DED3C7;
    --sel-fg:#8A5A44; --sel-bg:#F7ECE5;
    --key-deep:var(--text); --key-accent:var(--sel-fg); --key-soft:var(--sel-bg);
  }
  header.top { background:var(--card)!important; border-bottom:1px solid var(--line)!important; }
  .start-wrap h1 { border-left:4px solid var(--sel-fg); padding-left:12px; }
  .guide, .todo { background:var(--sel-bg); border-color:#E2CABE; border-left:4px solid var(--sel-fg); }
  .guide h3, .ct:not([style]), .ph-t { color:var(--sel-fg); }
  .ct:not([style]) { padding:8px 10px; background:var(--sel-bg); border-radius:6px; }
  .ph-head { background:var(--sel-bg); }
  .ph-no, .todo .lbl { background:var(--sel-fg); color:#fff; }
  .ph-pill.go { background:var(--sel-bg); color:var(--sel-fg); }
  .menu .mtab { background:var(--card); border-color:var(--line); box-shadow:none; }
  .menu .mtab:hover { background:#F1E9E1; border-color:var(--brand); box-shadow:none; transform:none; }
  .menu .mtab[aria-selected="true"] { background:var(--brand); border-color:var(--brand); box-shadow:none; color:#fff; }
  .menu .mtab[aria-selected="true"] .mi { background:#ffffff20; color:#fff; }
  .menu .mtab[aria-selected="true"] .mn { background:#ffffff26; color:#fff; }
  .menu .mtab[aria-selected="true"]::before { border-top-color:var(--brand); }
  .menu .mtab:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
  table th, table.mini th, .rv-table th, .pc-table th, .res-table th { background:var(--sel-bg); color:var(--sel-fg); }
  .sb2:not(.ok):not(.wn):not(.bd):not(.gy) { border-top-color:var(--sel-fg); background:var(--card); }
  .sb2:not(.ok):not(.wn):not(.bd):not(.gy) .n, .cc-stat b, .cf-sum b, .cf-left b { color:var(--text); }
  .sb2 .l { font-size:12px; color:var(--muted); }
  .course-card { background:var(--card); border-top-color:var(--sel-fg); }
  .btn.bp, .bnext { background:var(--brand); color:#fff; }
  .btn.bp:hover, .bnext:hover { background:var(--brand-d); }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
}