/* Downtown Crowd — the board (table view).

   Loads AFTER theme.css, which owns the palette, the type, the header bar and
   the badge language shared with the swipe deck. This sheet is only the board:
   density, columns, and the two formats.

   Layout is an app shell: header + toolbar + filter bar are fixed chrome, and
   the board is the page's ONLY vertical scroll context (PATTERNS +
   MOBILE-GUIDE: one scroll context per surface; a sticky thead needs its own
   scroller). Desktop shows twelve columns and fits 1280 px with no horizontal
   scroll. At <=760 px the same table drops to three columns — the event cell
   grows a meta line and a badge line, and the rest moves into the row detail.

   Sections: 1 shell · 2 toolbar · 3 filter bar · 4 table · 5 cells
             6 detail · 7 phone format · 8 footnote · 9 touch */

/* ---- 1. shell ------------------------------------------------------------ */

:root { --head-h: 26px; }

html { overflow: hidden; }

body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- 2. toolbar ---------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: none;
  padding: 6px max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.counts { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.tickstat { display: flex; align-items: baseline; gap: 6px; }
.tickstat b {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--dot-on);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.tickstat b.bump { animation: pop .22s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.tickstat small, .rowstat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
}
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.quick { display: flex; align-items: center; }
.quick .fcell { width: 230px; gap: 0; }
.quick .fcell > span {                 /* the placeholder carries the label here */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.quick input { width: 100%; height: 30px; padding: 0 9px; font-size: 12.5px; background: var(--surface); }
#filters-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.sort-mobile { display: none; }
.status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--danger);
  padding: 3px 2px 0;
}

/* ---- 3. filter bar ------------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  flex: none;
  padding: 8px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
}
.fcell { display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; }
.fcell > span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 12px;
}
.fcell[data-kind="text"] { width: 150px; }
.fcell[data-kind="select"], .fcell[data-kind="min"] { width: 118px; }
.fcell[data-kind="range"] { width: 128px; }
.fcell[data-kind="daterange"] { width: 202px; }
.frow { display: flex; gap: 4px; }
.filterbar .reset { align-self: flex-end; border-color: transparent; color: var(--faint); }
.filterbar .reset:hover { color: var(--text); border-color: var(--line-strong); }

.filterbar input, .filterbar select { width: 100%; min-width: 0; height: 26px; padding: 0 7px; }
.filterbar input[type="date"] { font-family: var(--mono); font-size: 11px; }

/* ---- 4. table ------------------------------------------------------------ */

.scroll {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;      /* fixed = no content-measuring pass over 395 rows */
  width: 100%;
  min-width: 1080px;
  font-size: 12.5px;
}
table.narrow { min-width: 0; }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  padding: 0;
}
th .hwrap { display: flex; align-items: stretch; height: var(--head-h); }
th button.sort {
  all: unset;
  display: flex;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
  height: 100%;
  padding: 0 5px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
th button.sort:hover { color: var(--text); }
th button.sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th button.sort.main { flex: 1 1 auto; min-width: 0; }
th button.subsort { flex: none; opacity: .75; padding-left: 0; font-size: 9px; }
th button.subsort::before { content: "·"; margin-right: 3px; opacity: .5; }
th button.subsort[aria-pressed="true"] { color: var(--accent); opacity: 1; }
th button.sort .arrow { font-size: 8px; opacity: 0; }
th[aria-sort] button.sort.main { color: var(--accent); }
th[aria-sort] button.sort.main .arrow { opacity: 1; }

tbody td {
  border-bottom: 1px solid var(--line-soft);
  padding: 5px;
  vertical-align: top;
  background: var(--row);
}
tbody tr.odd td { background: var(--row-alt); }
tbody tr.row:hover td { background: var(--hover); }
tbody tr.row:hover td.c-tick { box-shadow: inset 2px 0 0 var(--accent); }
tbody tr.row.on td { background: var(--picked); }
tbody tr.row.on td.c-tick { box-shadow: inset 3px 0 0 var(--brand); }
tbody tr.row.open td { background: var(--hover); }

/* ---- 5. cells ------------------------------------------------------------ */

.c-tick { width: 30px; }
.c-when { width: 178px; }
.c-loc { width: 122px; }
.c-att { width: 88px; }
.c-field { width: 98px; }
.c-travel { width: 80px; }
.c-after { width: 60px; }
.c-public { width: 68px; }
.c-curb, .c-brain { width: 54px; }
.c-org { width: 92px; }

.c-att, .c-curb, .c-brain { font-family: var(--mono); }
.c-att { text-align: right; }
th.c-att button.sort { justify-content: flex-end; }
.c-curb, .c-brain { text-align: center; }
th.c-curb button.sort, th.c-brain button.sort { justify-content: center; }

input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--dot-on);
  cursor: pointer;
}
.tickwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}

.title {
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;          /* one long title can't blow up the row */
}
.title .heat { margin-right: 6px; vertical-align: 1px; }
.title .grade { margin-left: 6px; vertical-align: 1.5px; }
.expand {
  float: right;
  all: unset;
  cursor: pointer;
  color: var(--faint);
  font-size: 11px;
  line-height: 1;
  padding: 2px 3px;
  margin-left: 4px;
}
.expand:hover { color: var(--accent); }

.venue {                       /* collapsed rows stay one line; the detail wraps */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.sub {
  display: block;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.3;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.when-date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  margin-right: 7px;
}

a.org { color: var(--accent); text-decoration: none; font-size: 11px; word-break: break-word; }
a.org:hover { text-decoration: underline; }

.calbtns { display: inline-flex; gap: 4px; }
.calbtns button, .calbtns a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .02em;
  min-height: 0;
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
}
.calbtns button:hover, .calbtns a:hover { color: var(--accent); border-color: var(--accent); }

.empty { padding: 40px 16px; color: var(--muted); text-align: center; font-size: 13px; }
.empty b { color: var(--text); }

/* ---- 6. expanded detail --------------------------------------------------- */

tr.detail td {
  background: var(--sunk);
  border-bottom: 1px solid var(--line-strong);
  padding: 8px 16px 10px 38px;
}
.detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 22px;
}
.detail-grid div { min-width: 0; }
.detail-grid dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}
.detail-grid dd { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text); }
.detail-grid .sub { white-space: normal; }
.detail-grid .venue { white-space: normal; }

/* ---- 7. phone format ------------------------------------------------------
   Same table, three columns; the event cell carries the meta and badge lines
   the dropped columns used to hold, and the rest lives in the row detail. */

.rowmeta, .rowbadges { display: none; }

@media (max-width: 760px) {
  table { font-size: 13.5px; }
  .c-tick { width: 44px; }
  .c-when { width: 80px; }
  td.c-when { text-align: right; }
  td.c-when .when-date { margin: 0; font-size: 11px; color: var(--muted); }
  .title { font-size: 14.5px; -webkit-line-clamp: 3; }

  .rowmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
  }
  .rowmeta b { color: var(--text); font-weight: 700; }
  .rowmeta span { color: var(--faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rowbadges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
  .rowbadges .pill { font-size: 9.5px; padding: 0 5px; }
  .rowbadges .rate { font-size: 11.5px; letter-spacing: 0; }

  tbody td { padding: 8px 6px; }
  tr.detail td { padding: 6px 14px 12px 16px; }
  .detail-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Phone chrome budget: one count line + two 44px rows, nothing else. */
  .toolbar { gap: 6px; padding: 6px 12px 8px; }
  .counts { width: 100%; gap: 10px; order: 1; }
  .tickstat b { font-size: 17px; }
  .quick { order: 2; flex: 1 1 auto; min-width: 0; }
  .quick .fcell { width: 100%; }
  .quick input { height: 44px; font-size: 16px; padding: 0 12px; }
  #filters-toggle { order: 3; flex: none; }
  .tools { order: 4; width: 100%; margin-left: 0; gap: 6px; }
  .sort-mobile {
    display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
    font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--faint);
  }
  .sort-mobile select { width: auto; flex: 1 1 auto; min-width: 0; }
  #sort-dir { flex: none; width: 44px; padding: 0; text-align: center; }
  #export-csv, #clear-ticks, #undo-clear { flex: 0 1 auto; }

  /* Filters take over the surface instead of pushing the board off-screen. */
  .filterbar { flex: 1 1 auto; overflow: auto; align-content: flex-start; gap: 10px 8px; padding: 10px 14px 16px; }
  .fcell { flex: 1 1 44%; width: auto !important; }
  .fcell[data-kind="daterange"], .fcell[data-kind="text"] { flex-basis: 100%; }
  .filterbar .reset { flex: 1 1 100%; }
  body.filters-open .scroll { display: none; }

  .foot h2 { font-size: 17px; }
}

@media (max-width: 1180px) { .bar .edition { display: none; } }

/* ---- 8. footnote ---------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding: 22px max(14px, env(safe-area-inset-right)) 46px max(14px, env(safe-area-inset-left));
  font-size: 12.5px;
  color: var(--muted);
  max-width: 860px;
  line-height: 1.6;
}
.foot h2 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 0 0 10px;
  font-weight: 700;
}
.foot p { margin: 0 0 10px; }
.foot b { color: var(--text); }
.foot details { margin: 12px 0; border-top: 1px solid var(--line); padding-top: 10px; }
.foot summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  padding: 3px 0;
  list-style: none;
}
.foot summary::-webkit-details-marker { display: none; }
.foot summary::before { content: "▸ "; color: var(--accent); }
.foot details[open] summary::before { content: "▾ "; }
.foot table.rubric { min-width: 0; width: 100%; margin-top: 10px; font-size: 11.5px; table-layout: auto; }
.foot table.rubric th, .foot table.rubric td { border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; text-align: left; vertical-align: top; }
.foot table.rubric th {
  position: static;
  background: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom-color: var(--line-strong);
}
.foot table.rubric td.n { text-align: right; font-family: var(--mono); padding-right: 14px; }
.foot code { font-family: var(--mono); font-size: 11px; color: var(--text); }
.build { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }

/* ---- 9. touch -------------------------------------------------------------
   Target sizing follows the input device, not the width: a 768 px iPad keeps
   the full grid but still needs 44 px targets and 16 px fields, or iOS zooms
   in on focus and never zooms back. */

@media (max-width: 760px), (pointer: coarse) {
  :root { --head-h: 44px; }
  .filterbar input, .filterbar select, .quick input { font-size: 16px; height: 44px; padding: 0 12px; }
  button, .btn { font-size: 12px; min-height: 44px; padding: 12px 14px; }
  button.quiet { font-size: 16px; }
  .tickwrap { min-width: 44px; min-height: 40px; margin: -4px 0 -4px -5px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .expand { padding: 12px; margin: -9px -6px -9px 0; font-size: 13px; }
  .calbtns button, .calbtns a { height: 40px; padding: 0 12px; font-size: 12px; }
  .c-when { width: 190px; }
}