/*
 * App styles: the Hacker Cats design kit's **Web** expression
 * (design-kit/readme.md → "WEB foundations", design-kit/COMPONENTS.md).
 * Style with --web-* tokens only (css/tokens/web.css); don't invent new colours.
 *
 * Quick rules:
 *   - Paper ground, ink header/footer. Brown = primary action.
 *   - Yellow = highlight only (markers, underlines, focus ring) — plus the one
 *     CTA button that sits on the ink header. Never yellow text on paper.
 *   - Green = something live right now. Not "done", not navigation.
 *   - 4px corners; hard offset shadows only on cards and primary buttons.
 *   - Hover darkens or adds a frame. One primary button per view.
 *
 * (Posters are print, so they use the Field Manual look in css/posters.css.)
 */
@import "./tokens/fonts.css";
@import "./tokens/colors.css";      /* Field Manual palette; used by pixel icons */
@import "./tokens/web.css";
@import "./tokens/base.css";

h1, h2, h3 { color: var(--web-ink); font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: var(--web-size-h2); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: var(--web-size-h3); line-height: 1.3; }
p { margin: 0; max-width: var(--web-measure); }
code, kbd, pre, .mono { font-family: var(--web-font-mono); font-size: 0.92em; }
.muted { color: var(--web-muted); }
.small { font-size: var(--web-size-small); }
.hidden { display: none !important; }
#draft-note:empty, #error-summary:empty, #meeting-errors:empty, #made-row:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { max-width: var(--web-page-max); margin: 0 auto; padding-left: var(--web-pad-x); padding-right: var(--web-pad-x); }
.page { padding-top: clamp(32px, 4vw, 56px); padding-bottom: var(--web-section-y); display: flex; flex-direction: column; gap: 32px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.section-head p { font-size: var(--web-size-small); color: var(--web-muted); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 20;
  background: var(--web-ink); color: var(--web-on-ink); padding: 10px 16px;
  border-radius: var(--web-radius); font-weight: 600; text-decoration: none;
}
.skip:focus { left: 12px; outline: 3px solid var(--web-yellow); color: var(--web-on-ink); }

/* ---------- header (ink chrome) ---------- */
.site-header { background: var(--web-ink); border-bottom: 1px solid var(--web-ink); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; padding: 8px 0; border-radius: var(--web-radius); }
.wordmark { font-family: var(--web-font-mono); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--web-on-ink); }
.wordmark .prompt { color: var(--web-yellow); }
.brand__sub { font-size: var(--web-size-small); color: var(--web-on-ink-muted); }
.site-nav { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--web-hit); padding: 10px 0 7px;
  border-bottom: 3px solid transparent; color: var(--web-on-ink); text-decoration: none; font-size: 15px; font-weight: 500;
}
.site-nav a:hover { border-bottom-color: var(--web-control); color: var(--web-on-ink); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--web-yellow); font-weight: 600; }
/* The CTA in the nav is a button, not a nav link: undo the link styles above. */
.site-nav a.btn { color: var(--fg); padding: 0 14px; min-height: var(--web-hit); border: 1.5px solid var(--border); font-weight: 600; font-size: 15px; }
.site-nav a.btn:hover { color: var(--fg); border-color: var(--border); }
.site-header :focus-visible, .page-head :focus-visible, .site-footer :focus-visible, .on-ink :focus-visible { outline-color: var(--web-yellow); }
.auth { display: flex; gap: 10px; align-items: center; font-size: var(--web-size-small); color: var(--web-on-ink-muted); }

/* ---------- page header (ink band) ---------- */
.page-head { background: var(--web-ink); border-top: 1px solid var(--web-ink-rule); }
.page-head .wrap { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: var(--web-size-h1); line-height: 1.1; letter-spacing: -0.02em; color: var(--web-on-ink); }
.page-head .lede { font-size: var(--web-size-lead); color: var(--web-on-ink-muted); max-width: 62ch; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-muted);
}
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--web-yellow); flex: none; }
.page-head .eyebrow { color: var(--web-on-ink-muted); }

/* ---------- demo-mode band ---------- */
.notice-band { background: var(--web-yellow-tint); border-bottom: 1px solid var(--web-yellow); color: var(--web-yellow-text); font-size: var(--web-size-small); }
.notice-band .wrap { padding-top: 10px; padding-bottom: 10px; }
.notice-band a { color: var(--web-yellow-text); font-weight: 600; }

/* ---------- footer ---------- */
.site-footer { background: var(--web-ink); color: var(--web-on-ink); margin-top: auto; }
.site-footer .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.site-footer p { font-size: 15px; color: var(--web-on-ink-muted); }
.site-footer .wordmark { font-size: 20px; display: block; margin-bottom: 8px; }
.site-footer a { color: var(--web-on-ink); }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; outline: none; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--web-brown); --bg-hover: var(--web-brown-hover); --fg: var(--web-surface); --border: transparent; --shadow: var(--web-shadow-button);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: 600 16px/1.2 var(--web-font);
  color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--border); border-radius: var(--web-radius);
  box-shadow: var(--shadow);
  text-decoration: none; cursor: pointer;
  transition: background 120ms var(--web-ease);
}
.btn:hover { background: var(--bg-hover); color: var(--fg); }
.btn--signal { --bg: var(--web-yellow); --bg-hover: #EBC155; --fg: var(--web-ink); --shadow: 2px 2px 0 #140D06; } /* only on ink surfaces */
.btn--secondary { --bg: transparent; --bg-hover: var(--web-sunk); --fg: var(--web-ink); --border: var(--web-brown); --shadow: none; }
.btn--on-ink { --bg: transparent; --bg-hover: #3E2D1C; --fg: var(--web-on-ink); --border: var(--web-on-ink-muted); --shadow: none; } /* secondary, on ink */
.btn--ghost { --bg: transparent; --bg-hover: var(--web-sunk); --fg: var(--web-ink); --shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.btn--danger { --bg: var(--web-red); --bg-hover: #86311C; --fg: #FFFCF6; }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; gap: 8px; }
.btn[disabled], .btn[aria-disabled="true"] {
  --bg: var(--web-sunk); --bg-hover: var(--web-sunk); --fg: var(--web-muted); --shadow: none;
  border: 1.5px dashed var(--web-line-strong); cursor: not-allowed;
}
.btn svg { flex: none; }
/* <label class="btn"> wrapping a hidden file input */
.btn:has(input[type="file"]:focus-visible) { outline: var(--web-focus-outline); outline-offset: 2px; }

/* ---------- cards ---------- */
.card {
  background: var(--web-surface); border: 1px solid var(--web-line); border-radius: var(--web-radius);
  box-shadow: var(--web-shadow-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.card--flat { box-shadow: none; }
.card--ink { background: var(--web-ink); border-color: var(--web-ink); color: var(--web-on-ink); box-shadow: none; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.card__head .meta { font-size: var(--web-size-small); color: var(--web-muted); }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px;
  font: 600 13px/1.5 var(--web-font); white-space: nowrap;
  color: var(--web-text); background: var(--web-sunk); border: 1px solid var(--web-line); border-radius: var(--web-radius);
}
.badge--signal { color: var(--web-yellow-text); background: var(--web-yellow-tint); border-color: var(--web-yellow); }
.badge--danger { color: var(--web-red-text); background: var(--web-red-tint); border-color: var(--web-red); }
.badge--live { color: var(--web-green-text); background: var(--web-green-tint); border-color: var(--web-green); }
.badge--ink { color: var(--web-on-ink); background: var(--web-ink); border-color: var(--web-ink); }

/* ---------- alerts ---------- */
.alert {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 14px 16px;
  background: var(--web-surface); border: 1px solid var(--web-line-strong); border-radius: var(--web-radius); color: var(--web-text);
}
.alert svg { margin-top: 2px; }
.alert__title { font-weight: 600; color: var(--web-ink); }
.alert__body { margin-top: 2px; }
.alert--warning { background: var(--web-yellow-tint); border-color: #C9971F; }
.alert--warning .alert__title { color: var(--web-yellow-text); }
.alert--danger { background: var(--web-red-tint); border-color: var(--web-red); }
.alert--danger .alert__title { color: var(--web-red-text); }
.alert--live { background: var(--web-green-tint); border-color: var(--web-green); }
.alert--live .alert__title { color: var(--web-green-text); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field label, .field .label, legend { font-weight: 600; color: var(--web-ink); }
.field__hint { font-size: var(--web-size-small); color: var(--web-muted); font-weight: 400; }
.field__note { font-size: var(--web-size-small); color: var(--web-muted); }
.field__note--error { color: var(--web-red-text); font-weight: 600; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select, textarea {
  font: 16px/1.4 var(--web-font); color: var(--web-ink);
  background: var(--web-field); border: 1px solid var(--web-control); border-radius: var(--web-radius);
  padding: 10px 12px; min-height: var(--web-control-h); width: 100%;
  transition: box-shadow 120ms var(--web-ease), border-color 120ms var(--web-ease);
}
textarea { line-height: 1.5; resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: #8C7556; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--web-ink); box-shadow: var(--web-focus-ring); }
[aria-invalid="true"] { border-color: var(--web-red) !important; }
input[readonly] { background: var(--web-sunk); }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--web-brown); flex: none; }
input[type="color"] { width: 52px; height: 44px; padding: 3px; border: 1px solid var(--web-control); border-radius: var(--web-radius); background: var(--web-field); cursor: pointer; }
.form { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
fieldset { margin: 0; min-width: 0; padding: 16px 20px 20px; background: var(--web-surface); border: 1px solid var(--web-line); border-radius: var(--web-radius); display: flex; flex-direction: column; gap: 18px; }
fieldset.quiet { padding: 0; background: none; border: 0; }
legend { padding: 0 6px; font-size: 18px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--web-hit); cursor: pointer; color: var(--web-text); }
.choices { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* Segmented control: buttons with aria-pressed */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.segmented button {
  min-height: 40px; padding: 0 16px; font: 600 15px/1 var(--web-font); cursor: pointer;
  color: var(--web-ink); background: var(--web-surface); border: 1px solid var(--web-line-strong); border-radius: var(--web-radius);
  transition: background 120ms var(--web-ease);
}
.segmented button:hover { background: var(--web-sunk); }
.segmented button[aria-pressed="true"] { color: var(--web-surface); background: var(--web-brown); border-color: var(--web-brown); }

/* ---------- event cards ---------- */
.event-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px 20px; align-items: center; }
.date-block { text-align: center; border-right: 1px solid var(--web-line); padding-right: 16px; }
.date-block .dow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--web-muted); }
.date-block .day { font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--web-ink); }
.event-head h3 { font-size: 18px; }
.event-head p { font-size: 15px; color: var(--web-muted); margin-top: 2px; }
.details { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; font-size: 15px; margin: 0; }
.details dt { font-weight: 600; color: var(--web-ink); }
.details dd { margin: 0; }
.status { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--web-line); padding-top: 16px; }
.progress { height: 8px; background: var(--web-sunk); border: 1px solid var(--web-line); border-radius: var(--web-radius); overflow: hidden; }
.progress > div { height: 100%; background: var(--web-brown); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.checklist .check { font-size: 15px; }

/* ---------- tables ---------- */
.table-wrap { position: relative; /* clips .sr-only text inside scrolled tables */ overflow-x: auto; background: var(--web-surface); border: 1px solid var(--web-line); border-radius: var(--web-radius); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--web-line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { background: var(--web-sunk); color: var(--web-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
tr.is-break td { background: var(--web-paper); color: var(--web-muted); }
tr.is-now td { background: var(--web-yellow-tint); }

/* ---------- month calendar ---------- */
.cal { background: var(--web-surface); border: 1px solid var(--web-line); border-radius: var(--web-radius); box-shadow: var(--web-shadow-card); overflow: hidden; }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--web-line); flex-wrap: wrap; }
.cal__title { font-size: var(--web-size-h3); font-weight: 600; color: var(--web-ink); margin: 0; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dow { padding: 8px; background: var(--web-sunk); border-bottom: 1px solid var(--web-line); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--web-muted); }
.cal__day { min-height: clamp(68px, 11vw, 120px); padding: 6px; border-right: 1px solid var(--web-line); border-bottom: 1px solid var(--web-line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal__day:nth-child(7n) { border-right: 0; }
.cal__day.is-other { background: var(--web-paper); color: var(--web-muted); }
.cal__day.is-break { background: var(--web-paper); }
.cal__num { font-size: 14px; font-weight: 600; color: var(--web-ink); display: flex; align-items: center; gap: 6px; }
.cal__day.is-other .cal__num { color: var(--web-muted); font-weight: 400; }
.cal__day.is-today .cal__num::before { content: ""; width: 8px; height: 8px; background: var(--web-yellow); }
.cal__item {
  display: block; font-size: 12px; line-height: 1.35; padding: 2px 6px; border-radius: var(--web-radius);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; border: 1px solid;
}
.cal__item--event { background: var(--web-yellow-tint); border-color: var(--web-yellow); color: var(--web-yellow-text); font-weight: 600; }
.cal__item--meeting { background: var(--web-sunk); border-color: var(--web-line-strong); color: var(--web-ink); }
.cal__item--break { background: transparent; border-style: dashed; border-color: var(--web-line-strong); color: var(--web-muted); }
a.cal__item:hover { border-color: var(--web-ink); color: var(--web-ink); }
.legend { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; font-size: var(--web-size-small); }
.legend .cal__item { display: inline-block; }

/* ---------- semester plan ---------- */
.plan td:first-child, .plan td:nth-child(2) { white-space: nowrap; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plan s { color: var(--web-muted); }
.flag { display: block; font-size: var(--web-size-small); }
.flag--warn { color: var(--web-red-text); font-weight: 600; }
.flag--caution { color: var(--web-yellow-text); font-weight: 600; }

/* ---------- misc ---------- */
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: var(--web-radius); background: var(--web-yellow); color: var(--web-ink); font-size: 16px; }
.empty { border: 1px dashed var(--web-line-strong); border-radius: var(--web-radius); padding: 32px; text-align: center; color: var(--web-muted); }
.empty p { margin: 0 auto; }
pre.code { background: var(--web-ink); color: var(--web-on-ink); padding: 16px 18px; border-radius: var(--web-radius); overflow-x: auto; margin: 0; font-size: 15px; line-height: 1.6; }
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(90vw, 440px);
  background: var(--web-ink); color: var(--web-on-ink); padding: 12px 16px; border-radius: var(--web-radius);
  box-shadow: 2px 2px 0 #140D06; font-size: 15px;
}
.toast--danger { background: var(--web-red); }

@media print {
  .site-header, .site-footer, .notice-band, .no-print { display: none !important; }
  body { background: #fff; }
}