/* ASU Los Diablos - shared design system
   Palette is ASU official: maroon #8C1D40, gold #FFC627. */

:root {
  --maroon:      #8C1D40;
  --maroon-dark: #6B1631;
  --maroon-tint: #F7EDF1;
  --gold:        #FFC627;
  --gold-dark:   #C89000;

  --ink:         #1A1A1A;
  --ink-2:       #4A4A4A;
  --ink-3:       #767676;
  --line:        #E0DEDB;
  --bg:          #FFFFFF;
  --bg-2:        #FAF9F7;

  --ok:          #127A46;
  --ok-bg:       #E8F5EE;
  --warn:        #A85E00;
  --warn-bg:     #FDF3E2;
  --bad:         #B3261E;
  --bad-bg:      #FCEDEC;

  --radius:      3px;
  --shadow:      none;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body { font-size: 16px; line-height: 1.55; }

a { color: var(--maroon); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 620px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- header */

.topbar {
  background: var(--maroon);
  color: #fff;
  border-bottom: 4px solid var(--gold);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none; font-weight: 800;
  letter-spacing: .02em; font-size: 1.05rem;
}
/* The pitchfork is taller than it is wide, like the real mark, so it is not boxed. */
.brand .pitchfork {
  width: 22px; height: 36px; flex: none;
  fill: var(--gold);
}
.brand small { display: block; font-weight: 500; font-size: .72rem; opacity: .85; letter-spacing: .04em; }

.topnav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Screens on one side, who-you-are on the other, with a rule between them. Without this
   the person's name sat inline and read as another menu item. */
.navlinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navme {
  display: flex; align-items: center; gap: 10px;
  padding-left: 22px; border-left: 1px solid rgba(255,255,255,.28);
}
@media (max-width: 700px) {
  .topnav { gap: 10px; }
  .navme { padding-left: 0; border-left: 0; }
}
.topnav a, .topnav button {
  color: #fff; text-decoration: none; font: inherit; font-size: .9rem; font-weight: 600;
  background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 6px;
}
.topnav a:hover, .topnav button:hover { background: rgba(255,255,255,.14); }
.topnav a.active { background: rgba(255,255,255,.2); }
.whoami { font-size: .85rem; opacity: .82; font-weight: 500; }

/* View As picker, admin only. Sits in the top bar so it reads as a control over the whole
   screen rather than a setting belonging to any one page. */
.lens-pick {
  width: auto; font-size: .82rem; padding: 5px 8px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff;
}
.lens-pick option { color: var(--ink); background: #fff; }

.lens-bar {
  border: 1px solid var(--gold); border-left: 3px solid var(--gold);
  background: #fffaf0; color: var(--ink-2);
  padding: 10px 14px; margin-bottom: 16px; font-size: .88rem; border-radius: 3px;
}
.lens-bar .lnk { margin-left: 8px; }

/* ---------------------------------------------------------------- layout */

.page { padding: 32px 0 72px; }
.page-head { margin-bottom: 24px; }
.page-head p { color: var(--ink-2); margin: 0; max-width: 68ch; }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 20px;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .n { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--maroon); }
.stat .l { font-size: .82rem; color: var(--ink-2); margin-top: 6px; font-weight: 600; }

/* ---------------------------------------------------------------- table */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 700; white-space: nowrap;
  background: var(--bg-2); position: sticky; top: 0; z-index: 1;
}
tbody tr:hover { background: var(--bg-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent;
}
.pill-ok      { background: var(--ok-bg);   color: var(--ok);     border-color: #BFE3CF; }
.pill-warn    { background: var(--warn-bg); color: var(--warn);   border-color: #F0DCB4; }
.pill-bad     { background: var(--bad-bg);  color: var(--bad);    border-color: #F2C9C6; }
.pill-quiet   { background: #F0EFEC;        color: var(--ink-2);  border-color: var(--line); }
.pill-maroon  { background: var(--maroon-tint); color: var(--maroon); border-color: #E7CFD8; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .9rem; font-weight: 700;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: var(--maroon); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--maroon-dark); }
.btn-gold      { background: var(--gold); color: var(--maroon); }
.btn-gold:hover:not(:disabled) { background: var(--gold-dark); color: #fff; }
.btn-quiet     { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover:not(:disabled) { background: var(--bg-2); }
.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- forms */

label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.hint { font-size: .82rem; color: var(--ink-3); font-weight: 400; margin: 4px 0 0; }

/* password and tel were missing, so those boxes fell back to the raw browser input and
   sat next to a styled one looking broken. Keep this list complete. */
input[type=text], input[type=email], input[type=number], input[type=url], input[type=date],
input[type=time], input[type=password], input[type=tel], input[type=search],
input[type=datetime-local],
select, textarea {
  width: 100%; font: inherit; font-size: .95rem;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--maroon); outline-offset: 1px; border-color: var(--maroon);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field { margin-bottom: 18px; }

/* ---------------------------------------------------------------- misc */

.msg { padding: 12px 16px; border-radius: 8px; font-size: .9rem; margin-bottom: 18px; font-weight: 600; }
.msg-ok   { background: var(--ok-bg);   color: var(--ok); }
.msg-bad  { background: var(--bad-bg);  color: var(--bad); }
.msg-info { background: var(--maroon-tint); color: var(--maroon); }
.msg:empty { display: none; }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }

.muted { color: var(--ink-3); }
.small { font-size: .85rem; }
.right { text-align: right; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.deadline {
  border-left: 4px solid var(--gold);
  background: var(--bg-2);
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin-bottom: 18px;
}
.deadline strong { color: var(--maroon); }

/* Compliance grid: 22 event columns, so the scholar name has to stay pinned while the
   rest scrolls sideways. */
/* The compliance grid is 25 signature columns wide. Holding it inside the 1120px reading
   column threw away 250px of a 1280px screen and cut the year off mid-table. Attendance is
   the one screen that is legitimately wider than prose, so it gets the window. */
body.wide-screen .wrap { max-width: 1600px; }

/* One scroll region, sized to fill what is left of the window, rather than a 561px box
   sitting inside a page that also scrolls. The scholar column and the header row are
   sticky, so neither the name nor the event ever scrolls out of reach. */
/* Tall enough to be worth scrolling. At 470px it showed six of 29 scholars through a
   letterbox. The header row and the scholar column are both sticky, so a taller box costs
   nothing in orientation. */
.gridwrap {
  overflow: auto;
  max-height: calc(100vh - 150px);
  min-height: 320px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
/* Not width:100%. The global table rule stretched this one to fill the card, and since the
   tick columns are fixed at 30px every leftover pixel landed in the Scholar column, which
   came out 670px wide holding a name. Mia: "you have wasted ungodly amounts of space". The
   table now takes the width it needs and stops. */
.gridwrap table { width: 100%; font-size: .84rem; border-collapse: separate; border-spacing: 0; }
.gridwrap th, .gridwrap td { border-bottom: 1px solid var(--line); padding: 8px 10px; background: #fff; }
/* A signature column holds one glyph, so it needs the width of that glyph and nothing more.
   At 10px of padding each, 25 of them wasted 300px and pushed the spring term off screen. */
.gridwrap thead th {
  position: sticky; top: 0; z-index: 3; background: var(--bg-2);
  border-bottom: 2px solid var(--line); font-size: .6rem; padding: 10px 3px;
  text-align: center; white-space: nowrap; letter-spacing: 0;
}
/* Everything after the signature columns is a summary, so it gets the minimum it needs. */
.gridwrap td.sum, .gridwrap th.sum { padding-left: 6px; padding-right: 6px; font-size: .78rem; }
.gridwrap th.scholar-col, .gridwrap td.scholar-col {
  position: sticky; left: 0; z-index: 2;
  border-right: 2px solid var(--line); text-align: left;
  width: 210px; min-width: 210px; max-width: 210px; padding-left: 12px;
}
.gridwrap thead th.scholar-col { z-index: 4; }
/* Turn the event and form headings on their side. Measured on the live grid at a 1280px
   window on 08/16/2026: laid out flat, 29 columns came to 1407px inside a 1154px box, so
   253px of it sat off the right hand edge and Mia said three times that she could not
   scroll to it. Shortening the headings enough to save 253px would have meant "Spring
   Promesa" becoming something like "Spr P". On their side, every column is the width of the
   glyph it holds, the full heading survives, and the same grid comes to 1154px. It fits with
   about 130px to spare, which is roughly four more events before this is a problem again.
   The row sizes itself to the longest heading rather than a fixed height, so a longer event
   name next year makes the header taller instead of clipping. */
.gridwrap thead th.vhead {
  writing-mode: vertical-rl; transform: rotate(180deg);
  vertical-align: bottom; padding: 8px 2px;
  font-size: .62rem; letter-spacing: .02em;
}
.gridwrap tbody tr:hover td { background: var(--maroon-tint); }
/* Not a fixed width. Fixed at 30px, every spare pixel in the card had nowhere to go but
   the Scholar column, and capping that column left a dead band down the right instead. The
   ticks share the room, which also gives them air to read. */
.gridwrap td.cell, .gridwrap thead th.vhead {
  text-align: center; font-weight: 800; font-size: .95rem;
  padding: 8px 2px; min-width: 30px;
}
.cell-signed  { color: var(--ok); }
.cell-excused { color: var(--maroon); font-size: .7rem !important; font-weight: 800; }
.cell-missed  { color: var(--bad); }
.cell-pending { color: #D6D3CE; }
.gridwrap th.term-fall   { border-top: 3px solid var(--gold); }
.gridwrap th.term-spring { border-top: 3px solid var(--maroon); }
/* Sortable headers. The arrow only appears on the column actually sorted, so the header
   row stays quiet until it is used. */
/* Mirror of the grid's horizontal scrollbar, sitting above it. Without this the only way
   to scroll right was to scroll down 29 rows to reach the real one. */
/* Made deliberately visible. A 14px transparent strip is technically a scrollbar and
   practically invisible, which is no use to someone who has said twice they cannot scroll
   right. This one has a track you can see and grab. */
.scrollrail {
  overflow-x: scroll; overflow-y: hidden; height: 16px; margin-bottom: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px;
}
.scrollrail > div { height: 1px; }
.scrollrail::-webkit-scrollbar { height: 14px; }
.scrollrail::-webkit-scrollbar-thumb {
  background: var(--maroon); border-radius: 7px; border: 3px solid var(--bg-2);
}
.scrollrail::-webkit-scrollbar-track { background: transparent; }

/* The Events table. Every field was the same width, so the event name showed "Los Diablos
   Kic" and the type showed "Mand" while the note box had room to spare. Size each column to
   what it actually holds, and let the name have the room left over. */
.ev-table { table-layout: fixed; width: 100%; }
.ev-table th, .ev-table td { padding: 7px 6px; vertical-align: middle; }
.ev-table input, .ev-table select { width: 100%; font-size: .84rem; padding: 6px 8px; }

/* A read only list. Every row is the same height because every cell is text, which is what
   the Command Central events table does and what my inputs-on-every-row version could not. */
/* Where was added 08/16/2026 and every width below it moved one along. It is a link to a
   street address, so it wraps rather than getting a fixed width; the name gives up the room
   for it, which it has to spare. */
.ev-table th:nth-child(2) { width: 110px; }       /* Date */
.ev-table th:nth-child(3) { width: 150px; }       /* Time */
.ev-table th:nth-child(4) { width: auto; }        /* Where */
.ev-table th:nth-child(5) { width: 170px; }       /* Kind */
.ev-table th:nth-child(6) { width: 150px; }       /* Counts */
.ev-table .ctr { text-align: center; }
.row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.row-link:hover { color: var(--maroon); text-decoration: underline; }
.cell-note { font-size: .78rem; color: var(--ink-3); margin-top: 3px; }
.cell-note.flag { color: var(--bad); }

/* The house form layout, lifted from Command Central rather than invented again:
   command-central/Event Planning/ep-event-create-flow-mockup.html:22-27. Labels in a fixed
   left column, fields in the rest, everything on one baseline. */
/* A form is for reading down a column, not for spanning a 1600px screen. An 860px wide box
   holding "09:00 AM" looks broken because it is. Fields get the width their content needs. */
/* Command Central's detail form, not a third invention.
   platform-mockup\style.css:188-190 and 468. A 200px label column, the control taking the
   rest, labels aligned to the top of their control, and the help text under the LABEL rather
   than under the field. Mia, 08/16/2026: "why are you not using command central design 'my
   profile' with 3 sub-tabs". Because I did not read it first, again. */
/* Command Central's own 1fr control column sits inside a narrower main area than this app's
   1120px card, where it came out 800px wide. A phone number in an 800px box looks broken,
   so the column is capped at the width a person actually reads and types in. */
.form-grid {
  display: grid; grid-template-columns: 200px minmax(0, 560px);
  gap: 14px 18px; align-items: start;
  padding: 18px 4px 6px;
}
.form-grid > label { padding-top: 8px; }
.label-help {
  display: block; font-weight: 400; color: var(--ink-3);
  font-size: .76rem; line-height: 1.4; margin-top: 4px;
  text-transform: none; letter-spacing: 0;
}
.form-grid textarea { width: 100%; font: inherit; resize: vertical; }

/* Mia, 08/16/2026: "you just throw crap down a page without actually designing with best
   practice". She was looking at My Details, which was a full bleed photo dropzone, then a
   full bleed textarea, then a 180px label column, three different widths down one page.
   Everything below puts the whole form on one grid: one label column, one control column,
   one right hand edge, with quiet subheads breaking it into the questions being asked. */
.form-grid .fg-head {
  grid-column: 1 / -1;
  margin: 22px 0 2px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.form-grid .fg-head:first-child { margin-top: 0; }
/* A value the person cannot change. Reads as text, not as a disabled box they will try to
   click into. */
.form-grid .fg-static { color: var(--ink-2); font-size: .92rem; padding-top: 7px; }
.form-grid .fg-photo { display: flex; align-items: flex-start; gap: 14px; }
.form-grid .fg-photo .headshot {
  width: 74px; height: 74px; flex: 0 0 74px; margin: 0;
  font-size: .68rem; border-radius: var(--radius);
}
.form-grid .fg-photo .drop { flex: 1; margin: 0; padding: 14px; font-size: .86rem; }
.form-grid .fg-photo .drop .small { display: block; margin-top: 3px; }
/* Save sits outside the grid so it lines up with the controls rather than with the labels,
   and so the hint next to it never stretches the control column. */
.fg-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line);
}
.fg-actions .hint { margin: 0; max-width: 46ch; }
@media (max-width: 700px) {
  .form-grid .fg-photo { flex-direction: column; }
  .form-grid .fg-photo .drop { width: 100%; }
}
.form-grid input[type=date] { width: 190px; }
.form-grid input[type=time] { width: 150px; }
.form-grid select { width: auto; min-width: 220px; max-width: 100%; }
/* .rec-editor-row label sits later in this file at the same specificity and was winning,
   so these are scoped one level deeper rather than moved. */
.form-grid > label,
.rec-editor-row .form-grid > label {
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  text-transform: none; letter-spacing: 0; margin: 0;
}
/* The Kickoff block on Start Here. Five short facts somebody reads once in advance and then
   again at 8:40 on the morning, standing outside a building. A labelled grid, not a
   paragraph they have to re-parse while walking. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 24px; }
.facts .k {
  display: block; font-size: .7rem; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .07em;
}
.facts .v { display: block; margin-top: 4px; font-size: .94rem; font-weight: 600; color: var(--ink); }

/* The checklist on Start Here. Scholars read this on a phone, so it has to fit 375px without
   sideways scrolling: measured at 423px inside a 333px box before these rules, which put the
   Join GroupMe button off the right hand edge. The what column takes the room left over and
   the other two shrink to their content. */
.start-list { width: 100%; }
.start-list td { vertical-align: top; }
.start-list td:nth-child(2), .start-list td:nth-child(3) { white-space: nowrap; width: 1%; }
@media (max-width: 700px) {
  .start-list th, .start-list td { padding-left: 6px; padding-right: 6px; }
  .start-list td:nth-child(2) { white-space: normal; min-width: 74px; }
  .start-list td:nth-child(3) .btn { white-space: nowrap; }
}

/* Resources. Same shape as the Start Here checklist: what it is on the left with a line
   saying when you would want it, and the way to reach it on the right. Read on a phone by
   somebody who is already having a bad day, so the phone number is a button and not a
   string of digits to copy out. */
.res-table { width: 100%; }
.res-table td { vertical-align: top; }
.res-table td:last-child { white-space: nowrap; width: 1%; }
@media (max-width: 700px) {
  .res-table th, .res-table td { padding-left: 6px; padding-right: 6px; }
}

/* Plain English for the column headings above it, so a setting never has to be guessed at. */
.legend-list {
  display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px;
  margin: 0 2px 18px; padding: 14px 16px;
  background: var(--bg-2); border-left: 3px solid var(--line); font-size: .86rem;
}
.legend-list dt { font-weight: 700; color: var(--ink); }
.legend-list dd { margin: 0; color: var(--ink-2); }
@media (max-width: 700px) { .legend-list { grid-template-columns: 1fr; gap: 2px 0; }
  .legend-list dd { margin-bottom: 8px; } }

.checkbox-row { display: flex; align-items: center; gap: 9px; }
.checkbox-row input[type=checkbox] { width: 17px; height: 17px; flex: none; }
.checkbox-row label,
.rec-editor-row .checkbox-row label {
  font-weight: 400; color: var(--ink-2); font-size: .88rem;
  text-transform: none; letter-spacing: 0; margin: 0;
}
.ev-edit-act {
  display: flex; align-items: center; gap: 18px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
@media (max-width: 800px) {
  .form-grid { grid-template-columns: 1fr; gap: 6px 0; }
  .form-grid > label { margin-top: 10px; }
}

/* ---------------------------------------------------------------- take attendance
   Built for a phone held in one hand in a noisy room, not for a desk. No table, because a
   table on a 390px screen wraps every name onto three lines. One tappable row per person,
   the whole row is the target, and the save bar never leaves the screen. */
.checkin { padding: 0; overflow: hidden; }
.checkin-event, .checkin-find {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 14px 16px; font-size: 1rem;
}
.checkin-find { background: var(--bg-2); }
.checkin-tabs { display: flex; border-bottom: 1px solid var(--line); }
.checkin-tabs .tab { flex: 1; padding: 12px 6px; font-size: .84rem; }

.tick-list { max-height: none; }
.tick {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.tick:last-child { border-bottom: 0; }
.tick input[type=checkbox] { width: 24px; height: 24px; flex: none; accent-color: var(--maroon); }
.tick-name { font-weight: 600; font-size: 1rem; }
.tick:has(input:checked) { background: #F3F8F3; }
.tick:has(input:checked) .tick-name { color: var(--ok); }
.tick[hidden] { display: none; }

/* Sticks to the bottom of the viewport so Save is reachable without scrolling 29 names. */
.checkin-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: #fff; border-top: 1px solid var(--line);
}
.checkin-count { margin-right: auto; font-size: .9rem; color: var(--ink-2); }
.checkin-bar .btn { padding: 11px 20px; }

@media (max-width: 700px) {
  .wrap { padding: 0 12px; }
  .page-head h1 { font-size: 1.5rem; }
  .card { border-radius: 0; margin-left: -12px; margin-right: -12px; }
  .topnav { gap: 8px; }
  .navlinks { gap: 2px; }
  .navlinks a { padding: 7px 9px; font-size: .84rem; }
  /* Tables that are genuinely wide scroll inside themselves rather than stretching the page. */
  .rec-table { display: block; overflow-x: auto; white-space: nowrap; }
}

.sep { color: var(--ink-3); margin: 0 6px; }
.lnk-quiet { color: var(--ink-3) !important; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--maroon); }
th.sorted-asc::after  { content: " \2191"; font-weight: 700; }
th.sorted-desc::after { content: " \2193"; font-weight: 700; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; margin: 14px 0 0; color: var(--ink-2); }
.legend b { font-size: 1rem; }

/* Tabs. Peer sections are tabs, never stacked down the page. Mirrors the house component
   in command-central/Platform/platform-mockup/style.css:648-667. */
.section-tabs {
  display: flex; justify-content: space-between; align-items: stretch;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 10px;
}
.tab-group { display: flex; gap: 0; flex-wrap: wrap; }
.tab {
  background: transparent; border: 0; padding: 13px 20px;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-3);
  cursor: pointer; border-bottom: 2px solid transparent; user-select: none;
}
.tab:hover { color: var(--ink); background: var(--bg-2); }
.tab.active { color: var(--maroon); border-bottom-color: var(--maroon); }
.tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.section-actions { display: flex; align-items: center; gap: 8px; padding: 7px 0; flex-wrap: wrap; }
.sub-panel { display: none; padding-top: 18px; }
.sub-panel.active { display: block; }
.card.tabbed { padding-top: 0; }

/* Status reads as words, not a badge on every row. Colour marks a problem only.
   (platform-mockup/style.css:103) */
.st { font-size: .86rem; color: var(--ink-2); }
.st-flag { color: var(--bad); font-weight: 700; }
.st-wait { color: var(--warn); font-weight: 600; }
.st-ok   { color: var(--ink-3); }

/* Signing and uploads */
/* The form you are about to sign, as a document rather than a window onto one.
   Mia, twice: "the forms need to be pdf version to read - with formatting - and sign at
   bottom - i already told you the embed is awful". The embed was .formdoc, a 340px scroll
   box of unformatted text, which is a bad way to read an ASU legal release and a worse way
   to read one you are signing. One column at a readable measure, headings that look like
   headings, and the signature at the end of the page. */
.doc-card { padding: 0; overflow: hidden; }
.doc-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 20px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.doc-bar .small { display: block; color: var(--ink-3); }

.doc {
  max-width: 74ch; margin: 0 auto; padding: 40px 32px 32px;
  font-size: .95rem; line-height: 1.65; color: var(--ink);
}
.doc-head { margin-bottom: 30px; padding-bottom: 18px; border-bottom: 2px solid var(--maroon); }
.doc-org {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--maroon);
}
.doc-head h2 { margin: 8px 0 4px; font-size: 1.5rem; }
.doc-meta { font-size: .82rem; color: var(--ink-3); }
.doc h3 {
  margin: 28px 0 8px; font-size: 1rem; font-weight: 700; color: var(--ink);
}
.doc p { margin: 0 0 15px; }
.doc-sign { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc-sign .agree { margin-bottom: 4px; }
.doc-sign .form-grid { padding-left: 0; padding-right: 0; }
@media (max-width: 700px) { .doc { padding: 26px 18px 22px; } }
.sigpad {
  border: 2px dashed var(--line); border-radius: 8px; background: #fff;
  display: block; width: 100%; height: 130px; touch-action: none; cursor: crosshair;
}
.agree { display: flex; gap: 9px; align-items: flex-start; font-weight: 600; font-size: .88rem; }
.agree input { width: auto; margin-top: 3px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.tile {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tile .tname { font-weight: 700; font-size: .92rem; }
.drop {
  border: 2px dashed var(--line); border-radius: 8px; padding: 20px 14px;
  text-align: center; color: var(--ink-3); font-size: .84rem; background: var(--bg-2);
  cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--maroon); color: var(--maroon); }
.headshot {
  width: 104px; height: 104px; border-radius: var(--radius); background: var(--bg-2);
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
  color: var(--ink-3); font-size: .75rem; text-align: center; flex: none;
}
.headshot img { width: 100%; height: 100%; object-fit: cover; }

dialog {
  border: 0; border-radius: var(--radius); padding: 0;
  box-shadow: 0 10px 50px rgba(0,0,0,.28); max-width: 620px; width: calc(100% - 32px);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog .dlg-head { padding: 20px 24px 0; }
dialog .dlg-body { padding: 12px 24px; }
dialog .dlg-foot { padding: 16px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }

.spinner {
  width: 22px; height: 22px; border: 3px solid var(--line);
  border-top-color: var(--maroon); border-radius: 50%;
  animation: spin .7s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  h1 { font-size: 1.55rem; }
  .wrap, .wrap-narrow { padding: 0 16px; }
  .card { padding: 16px; }
  .topbar .wrap { min-height: 60px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
}

/* Drill-down links: a scholar's name is clickable from any screen it appears on. */
a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-2, #CFC5C1); }
a.drill:hover { color: var(--maroon); border-bottom-color: var(--maroon); }
a.drill:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

details summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--maroon); }
details summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- Promesa list
   Replaces the table of rows-with-buttons. Grouped by month, status carried by a chip and
   a coloured left edge, so the eye finds the exceptions without reading every line. */

.month-group { margin-bottom: 22px; }
.month-head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); font-weight: 700; margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.promesa-list { list-style: none; margin: 0; padding: 0; }
.promesa-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; margin-bottom: 6px; border-radius: 8px;
  background: var(--bg-2); border-left: 4px solid var(--line);
  flex-wrap: wrap;
}
.promesa-row.s-signed   { border-left-color: var(--ok); }
.promesa-row.s-excused  { border-left-color: var(--maroon); }
.promesa-row.s-awaiting { border-left-color: var(--warn); }
.promesa-row.s-disputed { border-left-color: var(--bad); background: var(--bad-bg); }
.promesa-row.s-missed   { border-left-color: var(--bad); }

.pr-main { display: flex; flex-direction: column; gap: 2px; min-width: 220px; flex: 1 1 auto; }
.pr-name { font-weight: 700; font-size: .95rem; }
.pr-when { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pr-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-by { font-size: .78rem; color: var(--ink-3); }

.chip {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: .73rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.chip-signed   { background: var(--ok-bg);   color: var(--ok);     border-color: #BFE3CF; }
.chip-excused  { background: var(--maroon-tint); color: var(--maroon); border-color: #E7CFD8; }
.chip-awaiting { background: var(--warn-bg); color: var(--warn);   border-color: #F0DCB4; }
.chip-disputed { background: var(--bad-bg);  color: var(--bad);    border-color: #F2C9C6; }
.chip-missed   { background: var(--bad-bg);  color: var(--bad);    border-color: #F2C9C6; }
.chip-pending  { background: #F0EFEC;        color: var(--ink-3);  border-color: var(--line); }

/* ---------------------------------------------------------------- callouts + check in */

.callout {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px;
  border: 1px solid var(--line); font-size: .93rem;
}
.callout-live { background: var(--warn-bg); border-color: #F0DCB4; color: var(--warn); }
.callout-bad  { background: var(--bad-bg);  border-color: #F2C9C6; color: var(--bad); }
.callout strong { color: inherit; }

.checkin-card { text-align: center; padding: 32px 24px; }
.checkin-btn { font-size: 1.15rem; padding: 20px; margin-top: 18px; }
.checkin-done {
  background: var(--ok-bg); color: var(--ok); border: 1px solid #BFE3CF;
  border-radius: var(--radius); padding: 20px; font-weight: 700; font-size: 1.05rem;
  margin: 18px 0 12px;
}

/* ---------------------------------------------------------------- event manager
   Everything else runs off the calendar, so each event is a card you can see and edit
   whole, rather than a row of cramped inputs. */

.event-row {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px; background: var(--bg);
}
.event-row:hover { border-color: var(--line); box-shadow: var(--shadow); }
.ev-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ev-name {
  flex: 1 1 260px; font-weight: 700; font-size: 1rem;
  border: 1px solid transparent; background: transparent; padding: 6px 8px;
}
.ev-name:hover { border-color: var(--line); background: var(--bg-2); }
.ev-actions { display: flex; gap: 6px; }
.ev-conflict {
  background: var(--warn-bg); color: var(--warn); border: 1px solid #F0DCB4;
  border-radius: 6px; padding: 8px 12px; font-size: .82rem; margin-bottom: 12px;
}
.ev-fields, .ev-fac {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.ev-fac { margin-top: 12px; grid-template-columns: 1fr; }
.ev-fields label, .ev-fac label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 700;
}
.ev-fields input, .ev-fields select, .ev-fac select { margin-top: 4px; font-size: .9rem; }
.ev-fields .hint, .ev-fac .hint { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.ev-check {
  display: flex; align-items: center; gap: 8px; text-transform: none;
  letter-spacing: 0; font-size: .85rem; color: var(--ink); align-self: end; padding-bottom: 8px;
}
.ev-check input { width: auto; margin: 0; }

/* ---------------------------------------------------------------- activity grid
   Replaces the scrolling list. 11 activities fit on one screen as cards. */

.act-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px; align-items: start;
}
.act {
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; background: var(--bg);
}
.act header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.act-name { font-weight: 700; font-size: .91rem; line-height: 1.3; }
.act-when { font-size: .79rem; color: var(--ink-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.act-by   { font-size: .76rem; color: var(--ink-3); margin-top: 3px; }
.act-signed   { border-left-color: var(--ok); }
.act-excused  { border-left-color: var(--maroon); }
.act-awaiting { border-left-color: var(--warn); }
.act-disputed { border-left-color: var(--bad); background: var(--bad-bg); }
.act-missed   { border-left-color: var(--bad); }
.act-meeting { margin-top: 10px; }
.act-theirs {
  background: var(--bg-2); border-radius: 6px; padding: 9px 11px;
  font-size: .81rem; margin-bottom: 9px; line-height: 1.45;
}
.act-editor { margin-top: 10px; }
.act-editor textarea { font-size: .88rem; min-height: 90px; }
.act-editor-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 8px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------- live check in */

.live-now {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--maroon); color: #fff; border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 20px; flex-wrap: wrap;
}
.live-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 700; }
.live-name { font-size: 1.25rem; font-weight: 800; margin-top: 4px; }
.live-when { font-size: .84rem; opacity: .85; margin-top: 2px; }
.live-btn { font-size: 1.05rem; padding: 15px 34px; }
.live-done { background: rgba(255,255,255,.18); border-radius: 8px; padding: 14px 22px; font-weight: 700; }

/* ---------------------------------------------------------------- inline confirm */

.btn.armed {
  background: var(--bad) !important; color: #fff !important;
  border-color: var(--bad) !important;
}
.inline-summary td { background: var(--bg-2); }
.inline-summary textarea { min-height: 90px; font-size: .88rem; }

.owed-item {
  border: 1px solid var(--line); border-left: 4px solid var(--bad);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.owed-item h3 { margin-bottom: 2px; }
.owed-item textarea { margin: 10px 0; }

/* ---------------------------------------------------------------- contact */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.contact-role { font-size: .69rem; text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); font-weight: 700; }
.contact-name { font-weight: 700; margin: 4px 0 6px; }
.contact-card a { display: block; font-size: .84rem; margin-top: 2px; }

/* ================================================================ record view
   This is a scholarship compliance record, not a consumer app. Dense rows, real column
   alignment, restrained colour. Mia: "these are not kindergarteners, please stop making
   bubbly design." No cards, no pills, no rounded blobs. */

.card { border-radius: 0; box-shadow: none; }
.stat { border-radius: 0; background: transparent; border: 0; border-left: 2px solid var(--maroon);
        padding: 4px 0 4px 14px; }
.stat .n { font-size: 1.5rem; font-weight: 700; }
.stat .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.btn { border-radius: 2px; font-weight: 600; }
.btn-sm { padding: 5px 11px; }
input, select, textarea { border-radius: 2px; }
.chip { display: none; }

.rec-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 0 0 10px; margin-bottom: 0; border-bottom: 2px solid var(--ink);
  font-size: .85rem; flex-wrap: wrap;
}
.rec-count { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }

table.rec-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.rec-table thead th {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--ink-3); text-align: left; padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line); background: transparent; position: static;
}
table.rec-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.rec-table tbody tr:hover { background: transparent; }
tr.rec:hover .rec-name { color: var(--maroon); }

.rec-name   { font-weight: 600; width: 40%; }
.rec-when   { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; width: 20%; }
.rec-status { font-size: .8rem; width: 18%; }
.rec-by     { color: var(--ink-3); font-size: .82rem; width: 17%; }
.rec-act    { text-align: right; white-space: nowrap; }

/* the status colour is carried by the row's left edge, one pixel, not a badge */
tr.rec td:first-child { border-left: 3px solid transparent; padding-left: 11px; }
tr.rec-signed   td:first-child { border-left-color: var(--ok); }
tr.rec-excused  td:first-child { border-left-color: var(--maroon); }
tr.rec-awaiting td:first-child { border-left-color: var(--warn); }
tr.rec-disputed td:first-child { border-left-color: var(--bad); }
tr.rec-missed   td:first-child { border-left-color: var(--bad); }

.lnk {
  background: none; border: 0; padding: 0; font: inherit; font-size: .82rem;
  color: var(--maroon); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.lnk:hover { color: var(--maroon-dark); }
.lnk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.rec-editor-row td { background: var(--bg-2); padding: 14px 16px; }
.rec-editor-row label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.rec-editor-row textarea { font-size: .88rem; min-height: 74px; margin-top: 4px; }
.rec-editor-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.rec-theirs { font-size: .84rem; color: var(--ink-2); margin-bottom: 10px; line-height: 1.5; }
.rec-theirs-who { font-weight: 700; color: var(--ink); }

/* check in bar: a rule across the page, not a floating tile */
.live-now {
  border-radius: 0; background: var(--maroon); padding: 16px 20px;
  border-left: 4px solid var(--gold);
}
.live-label { font-size: .66rem; letter-spacing: .12em; }
.live-name { font-size: 1.1rem; font-weight: 700; }
.live-btn { font-size: .92rem; padding: 11px 26px; border-radius: 2px; }
.live-done { border-radius: 2px; padding: 10px 18px; font-size: .88rem; }

.callout, .due, .deadline, .owed-item, .contact-card, .event-row, .tile, .drop { border-radius: 0; }
.due { background: transparent; border-left: 3px solid var(--gold); padding: 8px 0 8px 14px; }

.role-picker { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 4px; }
.role-opt {
  display: flex; align-items: center; gap: 6px; font-size: .85rem;
  text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500;
}
.role-opt input { width: auto; margin: 0; }
code { font-size: .84em; background: var(--bg-2); padding: 2px 5px; border-radius: 2px; }

/* Roster health. A tick or a dash, because a column of words is unreadable at 61 rows. */
.ok-tick { color: var(--ok); font-weight: 800; }
.no-tick { color: var(--ink-3); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* ---------------------------------------------------------------- printing a form
   The PDF Mia asked for. There is no stored PDF file: the browser prints the same rows the
   signature is attached to, so the document somebody saves and the text they agreed to
   cannot drift apart. Save As PDF adds .printing-doc to body, which hides the app and
   leaves the form. */
@media print {
  body.printing-doc .site-header,
  body.printing-doc nav,
  body.printing-doc #msg,
  body.printing-doc .page-head,
  body.printing-doc .card.tabbed,
  body.printing-doc .no-print { display: none !important; }

  body.printing-doc, body.printing-doc #view, body.printing-doc .doc-card {
    background: #fff; margin: 0; padding: 0; border: 0; box-shadow: none;
  }
  body.printing-doc .doc {
    max-width: none; padding: 0; font-size: 11pt; line-height: 1.5; color: #000;
  }
  body.printing-doc .doc-head { border-bottom: 2px solid #000; }
  body.printing-doc .doc-org { color: #000; }
  /* A signature block that breaks across a page is a signature block nobody can read as
     one thing. */
  body.printing-doc .doc-sign { break-inside: avoid; page-break-inside: avoid; }
  body.printing-doc .doc h3 { break-after: avoid; page-break-after: avoid; }
  body.printing-doc .doc p  { orphans: 3; widows: 3; }
  /* The typed name and the drawn signature have to appear on paper, and a form control
     prints as an empty box by default. */
  body.printing-doc .doc-sign input[type=text] {
    border: 0; border-bottom: 1px solid #000; border-radius: 0;
    padding: 2px 0; font-size: 11pt;
  }
  body.printing-doc .sigpad { border: 0; border-bottom: 1px solid #000; height: 90px; }
  body.printing-doc .agree input { -webkit-appearance: none; appearance: none; }
  body.printing-doc .hint { display: none; }
  @page { margin: 18mm 16mm; }
}

/* The definition of a mentor, from Mia's Kickoff deck. Set apart from the rules under it
   because it is the answer to a question, not another instruction. */
.doc-lede {
  margin: 0 0 18px; padding-left: 14px;
  border-left: 3px solid var(--gold);
  font-size: .95rem; color: var(--ink-2); max-width: 68ch;
}

/* The Commitment tab on My Promesa. Mia's Kickoff deck highlights one line in yellow and
   she asked for scholars to be "reminded about attendance in every which way possible", so
   the row flagged emphasis carries that weight here too instead of reading like the rest. */
.commit-list { grid-template-columns: 260px 1fr; }
.commit-list dt.commit-loud, .commit-list dd.commit-loud {
  background: #FFF6DC; color: var(--ink);
}
.commit-list dt.commit-loud { font-weight: 800; }
.commit-list dt, .commit-list dd { padding: 6px 8px; }
@media (max-width: 700px) { .commit-list { grid-template-columns: 1fr; } }

/* The numbered clauses of a signable form. Word numbers them 1) to 9) and the numbers are
   how anybody refers to a clause, so they are kept and hung in the margin rather than
   flattened into more paragraphs. */
.doc-clauses { margin: 0 0 15px; padding-left: 2.2em; }
.doc-clauses > li { margin: 0 0 14px; padding-left: .3em; }
.doc-clauses > li::marker { font-weight: 700; color: var(--maroon); }
.doc strong { font-weight: 700; }
@media print {
  body.printing-doc .doc-clauses > li { break-inside: avoid; page-break-inside: avoid; }
  body.printing-doc .doc-clauses > li::marker { color: #000; }
}

/* Her deck keeps its own section titles. "Strict Missed Event Protocol" is a heading she
   wrote and presents from, not a group of rows I can retitle. */
.commit-block + .commit-block { margin-top: 22px; }
.commit-section {
  margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--maroon);
}

/* ---------------------------------------------------------------- the profile page
   Mia, 08/16/2026, with a reference design: "why are you NOT building an actual profile
   page - but with the tabs we need - Contact Info, Studies, Forms, Docs". A profile opens
   with who you are, then reads as values rather than as form fields, and each card is
   edited on its own. */

.prof-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.prof-head h2 { margin: 0 0 2px; font-size: 1.35rem; }
.prof-role {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--maroon);
}
.prof-sub { font-size: .9rem; color: var(--ink-2); margin-top: 4px; }
.prof-state { margin-left: auto; }

/* The photo, changed by a badge on it rather than by a dropzone the width of the page. */
.avatar {
  position: relative; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%;
  background: var(--maroon-tint); color: var(--maroon);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; overflow: visible;
}
.avatar img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; }
.avatar-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff; background: var(--maroon); color: #fff;
  font-size: .8rem; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.avatar-edit:hover { background: var(--maroon-dark); }
.avatar-edit.busy { opacity: .5; }
.avatar-edit.over { outline: 3px solid var(--gold); }

/* A card of values with its own Edit, per the reference. */
.info-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0 0 16px; background: #fff;
}
.info-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.info-head h3 { margin: 0; font-size: .98rem; color: var(--maroon); }
.info-body { padding: 18px; }

.kv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.kv-wide { grid-column: 1 / -1; }
.kv-k {
  display: block; font-size: .74rem; color: var(--ink-3); font-weight: 600;
  margin-bottom: 4px;
}
.kv-v { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
.kv-v.kv-empty { font-weight: 400; color: var(--ink-3); font-style: italic; }
.kv-grid label { font-size: .74rem; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.kv-help { display: block; font-size: .74rem; color: var(--ink-3); margin-top: 4px; }
.kv-actions { display: flex; gap: 8px; padding-top: 4px; }

@media (max-width: 860px) { .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .kv-grid { grid-template-columns: 1fr; }
  .prof-state { margin-left: 0; width: 100%; }
}

/* The read view and the edit view of a card were both on screen at once, which read as a
   page of stray text boxes under a page of values. `display: grid` on .kv-grid beats the
   browser's own `[hidden] { display: none }`, so the hidden attribute did nothing at all.
   Caught by Mia, not by me: I verified the toggle by reading element.hidden in the console,
   which was perfectly correct and told me nothing about what the page was drawing. */
.kv-grid[hidden] { display: none; }

/* ---------------------------------------------------------------- spreadsheet tables
   Mia, 08/16/2026, on the pairing directory: "this needs to look more like a spreadsheet -
   it's too hard to read". Every cell was wrapping, so a name like "Michael (Mike) Zamora"
   took three lines and a row holding seven short facts stood 140px tall. She reads
   spreadsheets: one row is one line, columns are the width of what they hold, and anything
   too long is cut rather than allowed to push the row open. The full value is on hover. */
/* Mia, 08/16/2026: "all you did was move white space, smush the grid, only changed it on
   pairings and not the other tabs". Truncating was the wrong half of the idea. "(602) 489-..."
   is not a phone number and "Alexandria Bar..." is not a name. A spreadsheet shows the whole
   value on one line and scrolls sideways when there are more columns than window, so that is
   what this does: columns sized to their contents, nothing cut. */
.sheet { table-layout: auto; width: 100%; font-size: .85rem; }
.sheet th, .sheet td {
  padding: 6px 12px; line-height: 1.35; vertical-align: middle; white-space: nowrap;
}
.sheet tbody tr:nth-child(even) { background: var(--bg-2); }
.sheet tbody tr:hover { background: var(--maroon-tint); }
.sheet .rec-name { font-weight: 700; }
.sheet .rec-name a { text-decoration: none; }
.sheet .rec-name a:hover { text-decoration: underline; }


/* Setting, current value, Change. The value column takes the room because a GroupMe join
   link is the longest thing on the screen. */
.sheet-set th:nth-child(1) { width: 30%; }
.sheet-set th:nth-child(2) { width: 56%; }
.sheet-set th:nth-child(3) { width: 14%; }
/* A setting's explanation has to wrap; it is a sentence, not a value. */
.sheet-set td .cell-note, .sheet-set td.rec-name { white-space: normal; }
.sheet .rec-editor-row td { white-space: normal; }

/* Events, as a sheet. Mia: "same here - Command Central UX not applied - hard to read".
   The note under an event name is the one thing allowed a second line, because it is a
   sentence; everything else is one row, one line. Where takes the room left over because a
   street address is the longest value in the table. */
.ev-table td .cell-note {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .74rem; margin-top: 1px;
}

/* Two buttons in one cell. Without this the whitespace between them collapses in the text
   layer and "Tips" and "Builder" read as the phrase "Tips Builder". */
.btn-row { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }