/* NSPAS — hand-rolled, mobile-first. Palette carried from the old
   nspas.nz app: tan header, dark-grey nav, dark-green + gold accents. */
:root {
  --ink: #333333;
  --muted: #7c7c72;
  --line: #dad8cc;
  --brand: #206030;          /* dark green — headings, buttons, links */
  --brand-dark: #17491f;
  --gold: #ffc800;           /* accent — active nav underline */
  --header-bg: #c1b986;      /* tan logo band */
  --nav-bg: #505050;         /* dark-grey nav strip */
  --bg: #f6f5f0;
  --card: #ffffff;
  --flash: #fff3cd;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* header: one tan band — logo on the left, main menu filling the space to its
   right (it used to sit in a separate dark strip below, leaving that empty). */
.sitehead { background: var(--header-bg); border-bottom: 3px solid var(--nav-bg); }
.headinner {
  max-width: 60rem; margin: 0 auto; padding: .5rem 1rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.5rem;
}
.headinner .logo { display: block; flex: 0 0 auto; }
.headinner .logo img { height: 76px; width: auto; max-width: 100%; display: block; }

.sitenav {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; column-gap: 1.4rem;
}
.sitenav a {
  color: var(--brand-dark); text-decoration: none; font-weight: 700;
  line-height: 40px; border-bottom: 3px solid transparent;
}
.sitenav a:hover, .sitenav a.active { border-bottom-color: var(--brand-dark); }
/* the account links sit apart from the site navigation proper */
.sitenav a.navuser { margin-left: auto; }
.nav-install {
  font: inherit; font-weight: 700; color: var(--brand-dark);
  background: none; border: 1px solid var(--brand-dark); border-radius: 6px;
  padding: .25rem .6rem; cursor: pointer;
}
.nav-install:hover { background: var(--brand-dark); color: var(--header-bg); }

/* account dropdown — a user icon on the right that opens password/sign-in +
   log out, keeping those off the main menu (mirrors the awe app). */
.usermenu { position: relative; margin-left: auto; }
.usermenu > summary {
  list-style: none; cursor: pointer; color: var(--brand-dark);
  padding: .2rem .35rem; display: inline-flex; align-items: center;
  border-radius: 6px; border-bottom: 0; line-height: 1;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::marker { content: ''; }
.usermenu > summary:hover { background: rgba(23, 73, 31, .12); }
.usermenu > summary svg { width: 26px; height: 26px; display: block; fill: currentColor; }
.usermenu-panel {
  position: absolute; right: 0; top: 100%; margin-top: .3rem; z-index: 50;
  min-width: 12rem; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); padding: .35rem;
}
.usermenu-name {
  padding: .4rem .6rem; font-weight: 600;
  border-bottom: 1px solid var(--line); margin-bottom: .3rem;
}
.usermenu-panel a {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: .5rem .6rem; border-radius: 4px; border-bottom: 0;
  color: var(--ink); font: inherit; font-weight: 400; line-height: 1.4;
  text-decoration: none;
}
.usermenu-panel a:hover { background: var(--bg); border-bottom: 0; }
.install-hint {
  max-width: 60rem; margin: .7rem auto 0; padding: .6rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  font-size: .92rem;
}

@media (max-width: 34rem) {
  .headinner { padding: .4rem .8rem; }
  .headinner .logo img { height: 48px; }
  /* menu drops below the logo and reads left-to-right like the page */
  .sitenav { flex: 1 1 100%; justify-content: flex-start; column-gap: 1.1rem; }
  .sitenav a { line-height: 34px; font-size: .95rem; }
  .sitenav a.navuser, .usermenu { margin-left: 0; }
  /* icon flows to the left here, so drop the panel from its left edge */
  .usermenu-panel { right: auto; left: 0; }
}

main { max-width: 60rem; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.4rem; margin: .5rem 0 1rem; color: var(--brand); }
h2 { font-size: 1.1rem; margin: 0 0 .3rem; }

.flash {
  max-width: 60rem;
  margin: .5rem auto 0;
  padding: .6rem 1rem;
  background: var(--flash);
  border: 1px solid #e5d9a5;
  border-radius: 6px;
}
.flash p { margin: .2rem 0; }

.muted { color: var(--muted); }

.cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .8rem 1rem;
}
.card p { margin: .2rem 0; color: var(--muted); }

form.stack { display: grid; gap: .8rem; max-width: 24rem; }
label { display: grid; gap: .25rem; font-weight: 600; }
input, select, textarea {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
button {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 6px;
  padding: .55rem 1.2rem;
  cursor: pointer;
}
button:hover { background: var(--brand-dark); }

table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
th { background: #efece1; }

/* breadcrumbs, buttons, notices */
.crumbs { margin: .3rem 0 .8rem; color: var(--muted); font-size: .9rem; }
.crumbs a { color: var(--brand); text-decoration: none; }
/* One button look for every action, so a button doesn't change appearance
   just because it happens to be a <form> submit rather than a link. */
.btns { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; margin: 1rem 0; }
a.btn,
button.btn-form,
button.danger,
.btns button:not(.linkish) {
  display: inline-block;
  font: inherit; font-weight: 600; line-height: 1.4;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 6px;
  padding: .55rem 1.2rem;
  min-height: 44px;              /* comfortable tap target on a phone */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
a.btn:hover,
button.btn-form:hover,
.btns button:not(.linkish):hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.notice {
  background: var(--flash);
  border: 1px solid #e5d9a5;
  border-radius: 6px;
  padding: .6rem 1rem;
  margin: .8rem 0;
}
.sechead p { margin: .2rem 0; }
a.cardlink { text-decoration: none; color: inherit; }
a.cardlink:hover { border-color: var(--brand); }

/* rules now render as plain headings + paragraphs via .content-body */

/* syllabus / programme */
.sylclass, .progclass { background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem 1rem; margin: .7rem 0; }
.sylclass h2, .progclass h3 { margin: 0 0 .3rem; }
.classds { white-space: pre-wrap; font: inherit; margin: .4rem 0 0; color: var(--ink); }
.classds-inline { margin: .3rem 0; }
table.comps { margin: .4rem 0; }
table.comps td.num { width: 2.2rem; text-align: right; color: var(--muted); }
.work { margin-left: .8rem; font-size: .95rem; }
.withdrawn { text-decoration: line-through; color: var(--muted); }
.highlight { background: #ffe0ef; padding: 0 .25rem; border-radius: 4px; }
.stagetime { color: var(--brand); margin-left: .4rem; }
.resultsbox { border-top: 2px solid var(--brand); margin-top: .5rem; padding-top: .4rem; }

/* toggle switch (instant-save flags on the section hub) */
table.flagtable td { padding: .5rem .8rem .5rem 0; vertical-align: middle; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 26px;
  background: #b9b6a8; transition: background .15s;
}
.switch .slider::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.switch input:disabled + .slider { opacity: .6; }
/* reserve a fixed slot so the transient Saving…/Saved text can't reflow the row */
.flag-status { display: inline-block; min-width: 6rem; margin-left: .6rem;
  font-size: .85rem; color: var(--muted); white-space: nowrap; vertical-align: middle; }
.flag-status.ok { color: var(--brand); }
.flag-status.err { color: #8d3030; }

/* drag reorder */
.draghandle { cursor: grab; color: var(--muted); width: 2rem; text-align: center; }
tr.sortable-ghost { opacity: .4; }
input.durinput { width: 5rem; }

/* admin action buttons (forms inside .btns rows) — styling shared with a.btn above */
.btns form { display: inline-flex; }
/* destructive actions stay red — selectors match the base rule's specificity
   above (.btns button:not(.linkish)) so they win by coming later */
button.danger, .btns button.danger, a.btn.danger-link {
  background: #8d3030; border-color: #8d3030; color: #fff;
}
button.danger:hover, .btns button.danger:hover, a.btn.danger-link:hover {
  background: #6d2222; border-color: #6d2222;
}

/* apply wizard */
button.linkish {
  background: none; border: none; color: var(--brand);
  text-decoration: underline; padding: .4rem 0; cursor: pointer; font-weight: 400;
}
label.inline { display: inline-flex; gap: .4rem; align-items: center; font-weight: 400; }
fieldset { border: 1px solid var(--line); border-radius: 6px; }
.acbox { position: relative; max-width: 24rem; }
.acitem { background: #fff; border: 1px solid var(--line); border-top: none;
  padding: .4rem .6rem; cursor: pointer; }
.acitem:hover, .acitem.active { background: #efece1; }
.workrow { display: grid; gap: .5rem; margin-bottom: .8rem; }
@media (min-width: 40rem) {
  .workrow { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
}
.feetotal { font-size: 1.15rem; }
.waivebox { border-left: 4px solid var(--brand); }
.agreebox { border-left: 4px solid #8d3030; }

/* scheduling board (admin sessions) */
.board { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.board .card.pool { grid-column: 1 / -1; }
.sess-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sess-head h3 { margin: 0; }
.sess-meta { color: var(--muted); font-size: .85em; }
ul.sess-list { list-style: none; margin: .5rem 0 0; padding: 0; min-height: 2.2rem; }
ul.sess-list.empty::after { content: "drop classes here"; color: var(--muted);
  font-size: .85em; display: block; padding: .5rem; border: 1px dashed var(--line);
  border-radius: 6px; text-align: center; }
li.sched-class { display: flex; gap: .5rem; align-items: baseline; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem;
  margin-bottom: .4rem; cursor: grab; }
li.sched-class.locked { cursor: default; }
li.sched-class .cnum { font-weight: 700; color: var(--brand-dark); }
li.sched-class .cstart { font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: .85em; margin-left: auto; white-space: nowrap; }
li.sortable-ghost { opacity: .4; }
.lockbar { padding: .5rem .8rem; border-radius: 6px; margin: .6rem 0;
  display: flex; align-items: center; gap: .8rem; }
.lockbar.on { background: #fdeaea; border: 1px solid #d8a; }
.lockbar.off { background: #efece1; border: 1px solid var(--line); }

/* adjudicator score + WYSIWYG report */
.scoregrid { max-width: 48rem; }
.scorefields { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end;
  margin-bottom: 1rem; }
.scorefields label { font-weight: 600; }
.scorefields input[type=number] { width: 7rem; font-size: 1.3rem; }
.report label { font-weight: 600; display: block; margin-bottom: .3rem; }
.wysiwyg-toolbar { display: flex; gap: .25rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0;
  padding: .3rem; background: #f0f3f8; }
.wysiwyg-toolbar button { background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: .3rem .6rem; cursor: pointer; color: var(--ink);
  font-size: .9rem; min-width: 2.2rem; }
.wysiwyg-toolbar button:hover { background: #e3ebf6; }
.wysiwyg { min-height: 14rem; border: 1px solid var(--line); border-radius: 0 0 6px 6px;
  padding: .7rem .9rem; background: #fff; font-size: 1.05rem; line-height: 1.5;
  overflow-y: auto; }
.wysiwyg:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.wysiwyg ul, .wysiwyg ol { margin: .3rem 0 .3rem 1.4rem; }

/* ideas & bugs list */
.kindpick { display: flex; gap: 1.5rem; }
.todo-item { max-width: 42rem; }
.todo-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin-bottom: .3rem; }
.todo-body { white-space: pre-wrap; margin: .2rem 0 .5rem; color: var(--ink); }
.todo-item.done { opacity: .6; }
.todo-item.done .todo-body { text-decoration: line-through; }
.tag.bug { background: #fdeaea; color: #8d3030; }
.todo-edit { margin-top: .5rem; }
.todo-edit > summary { cursor: pointer; color: var(--brand); font-size: .9rem;
  width: max-content; }
.todo-edit[open] > summary { margin-bottom: .5rem; }
.todo-edit form { max-width: none; }

/* print */
body.print header, body.print .noprint { display: none; }
@media print {
  header, .noprint, .btns { display: none; }
  body { background: #fff; }
  .sylclass, .progclass { border: none; padding: .3rem 0; break-inside: avoid; }
}

/* admin: data grid, field tables, tags */
.grid tbody tr:hover { background: #f0f3f8; }
table.fields { width: auto; }
table.fields th { background: none; color: var(--muted); font-weight: 600;
  text-align: right; white-space: nowrap; vertical-align: top; }
.tag { display: inline-block; font-size: .7em; font-weight: 600; vertical-align: middle;
  padding: .15rem .5rem; border-radius: 10px; background: #e3ebf6; color: var(--brand-dark); }
.warn { color: #8d3030; font-size: .9em; }
#filter { width: 100%; max-width: 20rem; margin: .3rem 0 .8rem; padding: .5rem .6rem;
  border: 1px solid var(--line); border-radius: 6px; }

/* editable content pages (about/contact/privacy/home intro) */
.content-body { max-width: 46rem; }
.content-body h2 { font-size: 1.15rem; margin: 1.2rem 0 .4rem; color: var(--brand); }
.content-body h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.content-body p { margin: .6rem 0; }
.content-body ul, .content-body ol { margin: .6rem 0; padding-left: 1.4rem; }
.content-body li { margin: .2rem 0; }
.content-body table td { border-bottom: 1px solid var(--line); padding: .35rem .8rem .35rem 0; }
.content-body a { color: var(--brand); }
.content-body img, .wysiwyg-area img { max-width: 100%; height: auto; }
.adjbio { margin-top: 2rem; }
.adjbio .content-body img { border-radius: 6px; }
.sigbox { display: inline-block; padding: .6rem 1rem; margin: .5rem 0;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.sigbox img { max-width: 100%; max-height: 140px; display: block; }

/* inline edit affordances on the section hub */
.editlink { font-size: .82rem; margin-left: .5rem; white-space: nowrap; }
.sigcell .sigthumb { max-height: 44px; max-width: 170px; vertical-align: middle;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 2px; }
.editicon { display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: .5rem; color: var(--brand); }
.editicon svg { width: 17px; height: 17px; fill: currentColor; }
.editicon:hover { color: var(--brand-dark); }

/* site footer */
.sitefoot { border-top: 1px solid var(--line); margin-top: 2.5rem;
  padding: 1rem; color: var(--muted); font-size: .9rem; }
.sitefoot .footinner { max-width: 60rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline; }
.sitefoot a { color: var(--brand); text-decoration: none; }
.sitefoot .spacer { margin-left: auto; }

/* WYSIWYG editor */
.wysiwyg { max-width: 46rem; }
.wysiwyg-bar { display: flex; flex-wrap: wrap; gap: .3rem;
  border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0;
  padding: .4rem; background: #efece1; }
.wysiwyg-btn { font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--brand); background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: .25rem .5rem; cursor: pointer; }
.wysiwyg-btn:hover { background: var(--brand); color: #fff; }
.wysiwyg-area { border: 1px solid var(--line); border-radius: 0 0 6px 6px;
  min-height: 14rem; padding: .7rem .9rem; background: #fff; overflow-wrap: anywhere; }
.wysiwyg-area:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.wysiwyg-area h2 { font-size: 1.15rem; color: var(--brand); }
.wysiwyg-area h3 { font-size: 1rem; }
.wysiwyg-area table td { border-bottom: 1px solid var(--line); padding: .3rem .6rem .3rem 0; }
.wysiwyg-help { max-width: 46rem; font-size: .85rem; color: var(--muted);
  margin: .4rem 0 .5rem; line-height: 1.4; }
.wysiwyg-help b { color: var(--ink); }

/* home sponsors section */
.sponsors { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; }
.sponsors .content-body h2 { font-size: 1.05rem; }
.classsponsors-link { font-weight: 600; }

/* home: per-section summary bullets (between welcome and the section cards) */
.section-summary { margin: .5rem 0 1.2rem; padding-left: 1.3rem; max-width: 52rem; }
.section-summary li { margin: .35rem 0; }

/* section delete confirmation (danger-link styling lives with the buttons above) */
.warnbox { background: #fdeaea; border-color: #d8aaaa; }
.warnbox ul { margin: .5rem 0 .5rem 1.2rem; }
.warnbox li { margin: .2rem 0; }