/* Shared style for ALL Curriculum Tools hub viewers (course outlines, course->
   program mapping, program map search, + future tools). Published once to
   .../curriculum-tools/assets/viewer.css and <link>ed by every viewer, so a
   tweak here updates them all. Tweak colors/spacing via the :root variables. */

:root {
  --gold:#eaab00; --gold-dark:#d49a00; --gold-soft:#faf2d8;
  --ink:#1a1a1a; --muted:#555; --rule:#d9d9d9; --link:#1f4e79; --panel:#faf7ef;
  --radius:8px; --btn-radius:5px;
}
* { box-sizing: border-box; }
body { font-family:"Helvetica Neue",Arial,system-ui,sans-serif; color:var(--ink);
       background:#fff; margin:0; font-size:16px; line-height:1.5; }
a { color:var(--link); }
:focus-visible { outline:3px solid var(--link); outline-offset:2px; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--link); color:#fff;
             padding:.55rem 1rem; z-index:100; }
.skip-link:focus { left:0; }

/* header — compact: the tool title is the hero; "Curriculum Tools" is a small,
   logo-like kicker sitting just above the gold rule (no logo image, no big chrome). */
.site-head { padding:.1rem .25rem .3rem; border-bottom:4px solid var(--gold); }
.site-head h1 { margin:0; font-size:1.5rem; line-height:1.15; }
.eyebrow { margin:.3rem 0 0; font-size:.78rem; font-weight:700; letter-spacing:.08em;
           text-transform:uppercase; color:var(--muted); }

/* minimal inner gutter — the page/accordion provides the outer margin */
main { padding:.2rem .25rem .25rem; }
.intro { margin:.25rem 0 1rem; max-width:62ch; }

/* search + filter controls */
.search { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; margin:0 0 1rem;
          padding:1rem; background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius); }
.field { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.field.grow { flex:1 1 16rem; }
.field label { font-weight:700; font-size:.9rem; }
.field input, .field select { font:inherit; padding:.55rem .6rem; border:1px solid #999;
                              border-radius:6px; background:#fff; min-height:44px; max-width:100%; }

.count { margin:.25rem 0 .75rem; color:var(--muted); font-size:.95rem; }
.results { list-style:none; margin:0; padding:0; }
.empty { padding:.4rem .25rem; color:var(--muted); }

/* result rows (.row = cards/program-search/outline-viewer; .course = legacy alias) */
.row, .course { display:flex; flex-wrap:wrap; gap:.4rem .75rem; align-items:flex-start;
                justify-content:space-between; padding:.6rem .25rem; border-bottom:1px solid var(--rule); }
.row-main, .course-id { flex:1 1 14rem; min-width:0; }
.code { font-weight:700; }
.title { color:var(--ink); }
.row-main, .sub, .group h2 { overflow-wrap:anywhere; }
.pill { display:inline-block; font-size:.75rem; font-weight:700; padding:.1rem .5rem;
        border-radius:999px; background:#eef0f2; color:#333; margin-left:.25rem; white-space:nowrap; }
.sub { color:var(--muted); font-size:.9rem; }

/* action buttons — Butte CTA system (primary gold-filled, secondary gold-outline) */
.links, .course-links { display:flex; gap:.5rem; flex:none; }
.links a, .course-links a { display:inline-flex; align-items:center; justify-content:center;
           padding:.4rem .9rem; min-height:40px; border:2px solid var(--gold); border-radius:var(--btn-radius);
           text-decoration:none; font-size:.9rem; font-weight:700; line-height:1.35; white-space:nowrap; }
a.primary { background:var(--gold); color:#000; }
a.primary:hover { background:var(--gold-dark); border-color:var(--gold-dark); }
a.secondary { background:#fff; color:var(--ink); }
a.secondary:hover { background:var(--gold-soft); }

/* course -> program grouped block */
.group { padding:.6rem .25rem; border-bottom:1px solid var(--rule); }
.group h2 { font-size:1.05rem; margin:0 0 .4rem; }
.group ul { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.prog { display:flex; flex-wrap:wrap; gap:.4rem .75rem; align-items:baseline; justify-content:space-between; }
.prog .links a { padding:.35rem .75rem; min-height:36px; font-size:.85rem; }

/* COI group separator (program search): logo + name, subtle COI-color accent.
   --coi / --coi-soft are set inline per group; both are baked WCAG-safe values. */
.coi-sep { display:flex; align-items:center; gap:.6rem; list-style:none;
           margin:1.35rem 0 .35rem; padding:.45rem .65rem; border-radius:6px;
           background:var(--coi-soft, #f3f3f3); border-left:5px solid var(--coi, var(--rule)); }
.coi-sep:first-child { margin-top:.25rem; }
.coi-sep img { width:40px; height:40px; flex:none; object-fit:contain; }
.coi-sep h2 { margin:0; font-size:1.05rem; line-height:1.2; color:var(--coi, var(--ink)); }
.coi-sep--plain { background:#f3f3f3; border-left-color:var(--rule); }
.coi-sep--plain h2 { color:var(--ink); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
           clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:600px) {
  .site-head h1 { font-size:1.3rem; }
  .field { flex:1 1 100%; }
  .field input, .field select { width:100%; }
  /* keep result rows horizontal so the compact button sits beside the title — saves a whole line per result */
  .row-main, .course-id { flex:1 1 8rem; }
  .links a, .course-links a { padding:.35rem .7rem; min-height:38px; font-size:.85rem; }
}