/* ============================================================
   ThreadWare User Guides - shared stylesheet.

   One file for all guide pages. The palette is the same
   "instrument panel" family as wwwroot/help/administrator-manual.html
   (galvanised steel grounds, deep gauge-dial teal, burnt amber for
   caution) so the two sets read as one library.

   NOTE ON DARK MODE: these pages are plain static HTML served
   outside the Blazor app, so they do NOT get the MudBlazor in-app
   theme toggle and there is no --mud-palette-* variable to read.
   prefers-color-scheme is the correct mechanism HERE and only here.
   Inside the app, keep using the MudBlazor palette vars.

   If you change the app, update the guide that describes it, in the
   same commit. See .github/copilot-instructions.md.
   ============================================================ */

:root {
  --paper:        #eef1f2;
  --surface:      #ffffff;
  --surface-sunk: #e4e9eb;
  --ink:          #0f1a20;
  --ink-soft:     #3d4c54;
  --ink-mute:     #64757e;
  --rule:         #ccd6da;
  --rule-strong:  #a8b8bf;
  --accent:       #0d6470;
  --accent-soft:  #e0eef0;
  --on-accent:    #ffffff;
  --signal:       #a8541a;
  --signal-soft:  #f7ebe0;
  --go:           #2f6b46;
  --go-soft:      #e3efe8;
  --stop:         #96322a;
  --stop-soft:    #f7e6e4;
  --shadow:       0 1px 2px rgba(15,26,32,.06), 0 8px 24px -12px rgba(15,26,32,.18);

  --step:         clamp(1rem, .82rem + .55vw, 1.0625rem);
  --measure:      68ch;

  --display: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:    "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", "Roboto Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0c1418;
    --surface:      #121e24;
    --surface-sunk: #0a1216;
    --ink:          #e6edef;
    --ink-soft:     #b3c2c8;
    --ink-mute:     #8298a1;
    --rule:         #24363e;
    --rule-strong:  #374d57;
    --accent:       #56b8c4;
    --accent-soft:  #102f35;
    --on-accent:    #0c1418;
    --signal:       #e09055;
    --signal-soft:  #33210f;
    --go:           #6cbb8c;
    --go-soft:      #10261a;
    --stop:         #e8887e;
    --stop-soft:    #331612;
    --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --paper:        #0c1418;
  --surface:      #121e24;
  --surface-sunk: #0a1216;
  --ink:          #e6edef;
  --ink-soft:     #b3c2c8;
  --ink-mute:     #8298a1;
  --rule:         #24363e;
  --rule-strong:  #374d57;
  --accent:       #56b8c4;
  --accent-soft:  #102f35;
  --on-accent:    #0c1418;
  --signal:       #e09055;
  --signal-soft:  #33210f;
  --go:           #6cbb8c;
  --go-soft:      #10261a;
  --stop:         #e8887e;
  --stop-soft:    #331612;
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

/* -- The guide navbar (the same strip on every page) -------- */
.guidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.guidebar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.guidebar-brand {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.guidebar-brand .t { color: var(--accent); }
.guidebar-brand .sub {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: .5rem;
}
.guidebar-home {
  font-size: .88rem;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .25rem .6rem;
  white-space: nowrap;
}
.guidebar-home:hover { background: var(--accent-soft); }
.guidebar-jump { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.guidebar-jump select {
  font-family: var(--body);
  font-size: .88rem;
  color: var(--ink);
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .3rem .5rem;
  max-width: 15rem;
}

/* -- Masthead ---------------------------------------------- */
.masthead { background: var(--surface); border-bottom: 3px solid var(--accent); }
.masthead-inner { max-width: 1180px; margin: 0 auto; padding: 2.2rem 1.5rem 1.8rem; }
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6rem;
}
h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.standfirst {
  max-width: var(--measure);
  margin: .9rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* -- Layout ------------------------------------------------ */
main { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
main > * { max-width: var(--measure); }
main > .wide, main > .tablewrap, main > .cards { max-width: none; }

h2 {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 2.6rem 0 .2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
h2:first-of-type { margin-top: 1rem; }
h3 { font-family: var(--display); font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
p { margin: .8rem 0; }
ul, ol { margin: .8rem 0; padding-left: 1.4rem; }
li { margin: .35rem 0; }
a { color: var(--accent); }
strong { color: var(--ink); }
code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .08em .35em;
}

/* A menu path, for example: Menu > Production > Scoresheets */
.path {
  font-family: var(--mono);
  font-size: .86rem;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: .45rem .7rem;
  display: inline-block;
  color: var(--ink);
}

/* -- Callouts ---------------------------------------------- */
.note, .caution, .good, .access {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 6px;
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
}
.note    { border-left-color: var(--accent); background: var(--accent-soft); }
.caution { border-left-color: var(--signal); background: var(--signal-soft); }
.good    { border-left-color: var(--go);     background: var(--go-soft); }
.access  { border-left-color: var(--signal); background: var(--signal-soft); }
.note p:first-child, .caution p:first-child,
.good p:first-child, .access p:first-child { margin-top: 0; }
.note p:last-child, .caution p:last-child,
.good p:last-child, .access p:last-child { margin-bottom: 0; }
.callout-title {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .01em;
  display: block;
  margin-bottom: .3rem;
}

/* -- Tables ------------------------------------------------ */
.tablewrap { overflow-x: auto; margin: 1.4rem 0; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: .95rem;
  background: var(--surface);
}
th, td {
  border: 1px solid var(--rule);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
}
thead th {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .02em;
}
tbody tr:nth-child(even) td { background: var(--surface-sunk); }

/* -- Card grid (index page) -------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 2rem;
}
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.card:hover { border-color: var(--rule-strong); }
.card .card-title { font-family: var(--display); font-size: 1.1rem; display: block; margin-bottom: .3rem; }
.card .card-desc { font-size: .9rem; color: var(--ink-soft); }

/* -- Numbered steps ---------------------------------------- */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  margin: .9rem 0;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: .85rem;
  display: grid;
  place-items: center;
}

/* -- Footer ------------------------------------------------ */
.colophon {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  margin-top: 2rem;
}
.colophon-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 2.4rem;
  font-size: .88rem;
  color: var(--ink-mute);
}
.colophon-inner p { margin: .45rem 0; max-width: var(--measure); }
.colophon .maint {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-mute);
  border-top: 1px dashed var(--rule);
  padding-top: .8rem;
  margin-top: 1rem;
}

/* -- Narrow screens ---------------------------------------- */
@media (max-width: 560px) {
  .guidebar-inner { padding: .5rem .9rem; gap: .6rem; }
  .guidebar-brand .sub { display: none; }
  .guidebar-jump { margin-left: 0; width: 100%; }
  .guidebar-jump select { max-width: none; width: 100%; }
  .masthead-inner { padding: 1.6rem .9rem 1.3rem; }
  main { padding: 1.4rem .9rem 2.4rem; }
  .colophon-inner { padding: 1.2rem .9rem 2rem; }
}

@media print {
  .guidebar { display: none; }
  body { background: #fff; color: #000; }
}