/*
 * Switchback, "Welcome Home" (doc/030_PRD.md, Figma page "Switchback").
 * Tokens come from the brand kit. Zilla Slab stands in for Adelle (titles),
 * Barlow Condensed for Trade Gothic (labels and numbers), Inter for body.
 */

@font-face { font-family: "Zilla Slab"; font-weight: 700; font-display: swap; src: url("/assets/ZillaSlab-Bold-4f1e00b7.ttf") format("truetype"); }
@font-face { font-family: "Zilla Slab"; font-weight: 600; font-display: swap; src: url("/assets/ZillaSlab-SemiBold-c55a11f5.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/BarlowCondensed-SemiBold-15c3c298.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("/assets/BarlowCondensed-Medium-447ff327.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/assets/Inter-Regular-84552dd4.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/assets/Inter-Medium-f2f7e25f.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/assets/Inter-SemiBold-572d6758.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/assets/Inter-Bold-cc42f9d8.ttf") format("truetype"); }

:root {
  --paper: #E9E9E4;
  --surface: #F6F5F0;
  --pine-tint: #DCE4DA;
  --pine: #295135;
  --pine-deep: #173022;
  --night: #0E1712;
  --ember: #D9702B;
  --ember-tint: #F5E2D2;
  --barn: #860D1A;
  --signal: #B41223; /* emergency only */
  --ink: #1A1A1A;
  --slate: #515354;
  --mist: #9DA0A2;
  --rule: #D5D4CC;
  --water: #6E9DB3;
  --white: #FFFFFF;

  --font-title: "Zilla Slab", Georgia, serif;
  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 16px;
  --radius-control: 12px;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; font: 400 13px/18px var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: var(--pine); }
h1, h2, h3 { font-family: var(--font-title); margin: 0; color: var(--ink); }
h1 { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 16px; line-height: 21px; font-weight: 600; }
p { margin: 0; }
.icon { flex: none; }

/* Labels: uppercase, tracked condensed type. */
.eyebrow, .label, th, .nav-heading, .stat-label {
  font: 600 12px/14px var(--font-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate);
}
.muted { color: var(--slate); }
.num { font-variant-numeric: tabular-nums; }

/* Shell: night side nav and the page. */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 28px 16px 20px; background: var(--night); overflow-y: auto; }
.brand { display: flex; flex-direction: column; padding: 0 8px 20px; text-decoration: none; }
.brand-name { font: 700 21px/26px var(--font-title); letter-spacing: -0.005em; color: var(--white); }
.brand-camp { font: 600 12px/14px var(--font-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ember); }
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font: 600 13px/18px var(--font-body); color: var(--mist); text-decoration: none; }
.nav-item:hover { color: var(--white); }
.nav-item.is-active { background: var(--pine); color: var(--white); }
.nav-item.is-soon { opacity: 0.55; cursor: default; }
.nav-item.is-soon:hover { color: var(--mist); }
.nav-soon { margin-left: auto; font: 600 11px/14px var(--font-label); letter-spacing: 0.09em; text-transform: uppercase; }
.nav-heading { color: var(--slate); padding: 18px 10px 6px; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--pine-deep); }
.avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ember); color: var(--night); font: 600 12px/14px var(--font-label); letter-spacing: 0.09em; }
.me-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.me-name { font: 600 13px/18px var(--font-body); color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-role { font: 600 12px/14px var(--font-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--mist); }
.me form { display: contents; }
.me-sign-out { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: none; color: var(--mist); cursor: pointer; }
.me-sign-out:hover { color: var(--white); background: var(--night); }

.main { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 32px; min-width: 0; }
.beta-note { margin-top: auto; color: var(--mist); font-size: 12px; }

/* Page header */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-note { display: flex; align-items: flex-start; gap: 10px; color: var(--slate); }

/* Controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--pine); border-radius: var(--radius-control); background: var(--pine); color: var(--white);
  font: 600 15px/18px var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.button:hover { background: var(--pine-deep); }
.button-outline { background: var(--surface); color: var(--pine); }
.button-outline:hover { background: var(--pine-tint); }
.button-block { width: 100%; height: 46px; }
.button-danger { background: var(--surface); border-color: var(--barn); color: var(--barn); }
.button-danger:hover { background: var(--ember-tint); }
.button-danger-solid { background: var(--barn); border-color: var(--barn); }
.button-danger-solid:hover { background: #6A0A14; }
.button[disabled], .button[aria-disabled=true] { opacity: 0.5; cursor: not-allowed; }
.link-button { border: 0; background: none; padding: 0; cursor: pointer; font: 600 12px/14px var(--font-label);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pine); text-decoration: none; }
.link-button-danger { color: var(--barn); }
form.button_to { display: inline; }

.input, input[type=text], input[type=email], input[type=search], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); font: 400 13px/18px var(--font-body); }
textarea { font-size: 15px; line-height: 22px; padding: 12px; min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pine); outline-offset: -1px; }
input[type=file] { font: inherit; }
.search { position: relative; display: block; width: 260px; }
.search .icon { position: absolute; left: 13px; top: 12px; color: var(--slate); }
.search input { padding-left: 37px; }
.chip { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid var(--rule);
  border-radius: var(--radius-control); background: var(--surface); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-table { padding: 20px 4px 8px; gap: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-table > .card-head, .card-table > .card-pad { padding: 0 16px; }
.card-link { font: 600 15px/18px var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pine); text-decoration: none; }
.card-meta { font: 600 12px/14px var(--font-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat { gap: 0; padding: 14px 18px; }
.stat-value { font: 600 40px/40px var(--font-label); color: var(--ink); }
.stat-value.is-ember { color: var(--ember); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 0 16px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 10px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
td.strong, td:first-child { font-weight: 600; }
td a { color: inherit; text-decoration: none; }
td a:hover { color: var(--pine); text-decoration: underline; }
td.muted { color: var(--slate); }
.empty { padding: 16px; color: var(--slate); }

/* Pills */
.pill { display: inline-block; padding: 3px 8px; border-radius: 10px; font: 600 12px/14px var(--font-label);
  letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
.pill-pine { background: var(--pine-tint); color: var(--pine); }
.pill-ember { background: var(--ember-tint); color: var(--ember); }
.pill-changed { background: var(--ember); color: var(--white); }
.pill-solid { background: var(--pine-deep); color: var(--white); }
.pill-quiet { background: var(--paper); color: var(--slate); box-shadow: inset 0 0 0 1px var(--rule); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Definition rows in side cards */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.row:first-child { padding-top: 0; }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row-label { color: var(--slate); }
.row-value { font-weight: 600; text-align: right; }
.row-value.is-ember { color: var(--ember); }
.check-row { display: flex; align-items: center; gap: 10px; }
.check-row .icon { color: var(--pine); }
.check-row .row-value { margin-left: auto; font-weight: 400; color: var(--slate); }
.attention { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.attention:first-of-type { padding-top: 0; }
.attention:last-child { border-bottom: 0; padding-bottom: 0; }
.attention > .icon:first-child { color: var(--ember); margin-top: 1px; }
.attention-text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.attention-text strong { font-weight: 600; }
.attention-text span { color: var(--slate); }
.person-row { display: flex; align-items: center; gap: 12px; }
.attention-text strong a { color: inherit; text-decoration: none; }
.attention-text strong a:hover { color: var(--pine); text-decoration: underline; }
.person-row .avatar { width: 36px; height: 36px; background: var(--pine-tint); color: var(--pine); }

/* Tabs */
.tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--radius-control); background: var(--rule); }
.tab { padding: 7px 14px; border-radius: 9px; color: var(--slate); font-weight: 500; font-size: 14px; text-decoration: none; }
.tab.is-active { background: var(--surface); color: var(--ink); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Flash */
.flash { padding: 12px 16px; border-radius: var(--radius-control); background: var(--pine-tint); color: var(--pine); font-weight: 500; }
.flash-alert { background: var(--ember-tint); color: #8A4310; }

/* Panels opened by a link to their id (season staff import and add). */
.drawers > .card:not(:target) { display: none; }
.drawers:has(.card:target) { display: block; }
.drawers { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-size: 12px; background: var(--paper); padding: 1px 4px; border-radius: 4px; }

/* Unit roster grid */
.grid-name small { display: block; color: var(--slate); font-weight: 400; }

/* Guide editor */
.guide { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.moment { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 10px;
  color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none; }
.moment.is-active { background: var(--pine-tint); color: var(--pine); font-weight: 600; }
.moment .count { font: 600 12px/14px var(--font-label); color: var(--slate); }
.entry { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid transparent; border-radius: var(--radius-control);
  color: var(--ink); text-decoration: none; }
.entry:hover { border-color: var(--rule); }
.entry.is-active { border-color: var(--pine); background: var(--white); }
.entry-title { font-weight: 600; font-size: 14px; line-height: 20px; }
.was { display: flex; gap: 10px; color: var(--slate); padding-top: 16px; border-top: 1px solid var(--rule); }
.errors { padding: 12px 16px; border-radius: var(--radius-control); background: var(--ember-tint); color: #8A4310; }

/* Sign in (W1) */
.sign-in { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.sign-in-photo { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 56px; color: var(--white);
  /* The photo already carries the frame's gradient; this only keeps the type legible. */
  background: linear-gradient(180deg, rgb(14 23 18 / 0) 60%, rgb(14 23 18 / 0.6) 100%),
              url("/assets/sign_in_campfire-f71de96a.jpg") left bottom / cover no-repeat var(--night); }
.sign-in-photo .script { width: 190px; height: auto; filter: invert(1); margin-bottom: 4px; }
.sign-in-title { font: 700 28px/32px var(--font-title); letter-spacing: -0.01em; }
.sign-in-tagline { font-size: 15px; line-height: 22px; color: var(--mist); }
.sign-in-panel { display: grid; place-items: center; padding: 48px 24px; background: var(--paper); }
.sign-in-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.sign-in-form .eyebrow { font-size: 15px; line-height: 18px; letter-spacing: 0.06em; color: var(--ember); }
.sign-in-form .lede { font-size: 15px; line-height: 22px; color: var(--slate); }
.sign-in-form input[type=email], .sign-in-form input[type=text] { height: 48px; padding: 14px; }
.sign-in-form .code { font: 600 24px/24px var(--font-label); letter-spacing: 0.4em; }
.or { display: flex; align-items: center; gap: 10px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.fine { color: var(--slate); }

@media (max-width: 1100px) {
  .columns, .guide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; padding: 16px; }
  .brand { padding-bottom: 8px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-heading { display: none; }
  .main { padding: 20px 16px; }
  .search { width: 100%; }
  .sign-in { grid-template-columns: minmax(0, 1fr); }
  .sign-in-photo { min-height: 240px; padding: 24px; }
}
.print-list { display: flex; flex-direction: column; gap: 20px; }
.nowrap { white-space: nowrap; }
/* Kitchen: the same columns in every unit's table. */
.fixed-columns { table-layout: fixed; }
.fixed-columns th:nth-child(1) { width: 150px; }
.fixed-columns th:nth-child(2) { width: 28%; }

/* Print (kitchen list, check-in desk): the page alone, flat, in black on white. */
@media print {
  @page { margin: 12mm; }
  html, body, .main { background: var(--white); }
  .shell { display: block; }
  .sidebar, .page-actions, .beta-note, .flash, .drawers { display: none !important; }
  .main { padding: 0; gap: 12px; }
  .card { background: var(--white); border-color: var(--mist); border-radius: 6px; padding: 10px; break-inside: avoid; }
  .card-table { padding: 10px 0 4px; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat { padding: 6px 10px; }
  .stat-value { font-size: 24px; line-height: 26px; }
  .print-list { gap: 10px; }
  td { padding: 6px 10px; }
  th { padding: 0 10px 6px; }
  .pill { box-shadow: inset 0 0 0 1px currentColor; }
  a { color: inherit; text-decoration: none; }
}
.strong { font-weight: 600; }
.icon-space { display: inline-block; width: 16px; flex: none; }
.row.person-row { justify-content: flex-start; }
.tabs { align-self: flex-start; }
.field-row.time-title { grid-template-columns: 140px minmax(0, 1fr); }

/* Health form on file (decision 4): a small staff toggle under a name. */
.inline-form { display: inline; }
.form-chip { margin-top: 4px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font: 600 11px/1.6 "Barlow Condensed", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); cursor: pointer; }
.form-chip-done { border-color: var(--pine-tint); background: var(--pine-tint); color: var(--pine); }