/* TheBook.
 *
 * The tokens at the top are lifted from pikemusicschool.com/styles.css so the
 * tool reads as part of the school rather than a bolted-on app. Everything
 * below them is specific to a calendar grid, which the marketing site has no
 * need for.
 *
 * The four availability colours are the one place this departs from the site
 * palette, and they are chosen to survive three things: being looked at on a
 * phone in a rehearsal room, being read by someone who cannot distinguish red
 * from green, and being printed. So they vary in lightness as well as hue, and
 * every cell carries a glyph as well as a colour -- the colour is the fast
 * signal, the glyph is the one that is actually load-bearing.
 */

:root{
  --ink:#1B211D;
  --ink-soft:#242B26;
  --paper:#EDE6D6;
  --paper-soft:#E4DAC4;
  --ivory:#F5F0E4;
  --brass:#B8862E;
  --brass-bright:#D6A548;
  --signal:#5B7A64;
  --line: rgba(245,240,228,0.14);
  --line-dark: rgba(27,33,29,0.12);

  --ideal:#2F6B4F;
  --ideal-soft:#CFE3D6;
  --good:#7FA05A;
  --good-soft:#E0E9CE;
  --maybe:#C98A2E;
  --maybe-soft:#F4E3C4;
  /* An unpainted half-hour: the paper the grid is printed on, because that is
     what "nothing said" should look like. */
  --blank:#F0E8D8;
  /* A definite refusal, and the only genuinely loud colour in the palette.
     It is meant to be loud: it is the one answer that stops the band, and
     until now it looked identical to having said nothing at all. */
  --cant:#C4342A;
  --cant-soft:#F6D9D6;

  --danger:#8C3A2E;
}

*{box-sizing:border-box;}

/* The browser's own rule for this is `[hidden]{display:none}`, at the
 * specificity of a bare attribute selector -- which any class in this file
 * outranks. `.btn{display:inline-flex}` therefore un-hid every button the
 * JavaScript had set `hidden` on, including "Delete lineup" on a lineup that
 * does not exist yet. Restated here so hiding something actually hides it. */
[hidden]{display:none !important;}

body.thebook{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;margin:0;letter-spacing:-0.01em;}
h1{font-size:clamp(1.8rem,5vw,2.6rem);}
h2{font-size:1.35rem;}
h3{font-size:1.1rem;}
a{color:inherit;}

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

.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:0.6em;margin:0;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--brass);display:inline-block;}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(237,230,214,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dark);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;max-width:1120px;margin:0 auto;}
.logo{font-family:'Fraunces',Georgia,serif;font-size:1.1rem;font-weight:600;text-decoration:none;}
.logo span{color:var(--brass);}
.nav-right{display:flex;align-items:center;gap:16px;}

.act-head{padding:40px 0 24px;}
.act-head h1{margin-top:8px;}
.sub{color:var(--ink-soft);opacity:0.75;margin:6px 0 0;max-width:56ch;}
.muted{color:var(--ink-soft);opacity:0.7;font-size:0.92rem;}

.pane{max-width:420px;background:var(--ivory);border:1px solid var(--line-dark);border-radius:14px;padding:28px;margin-top:8px;}
.field{margin:16px 0;}
.field label,.field>span{display:block;font-size:0.8rem;letter-spacing:0.04em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;opacity:0.7;margin-bottom:6px;}
.field.inline{display:flex;align-items:center;gap:10px;margin:0;}
.field.inline>span{margin:0;text-transform:none;letter-spacing:0;font-family:inherit;font-size:0.9rem;white-space:nowrap;}
/* Every text-like input, listed by exclusion rather than by enumeration.
 * Naming the types one at a time is how `email` and `number` ended up with
 * browser defaults while everything beside them was styled. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea{
  width:100%;padding:11px 13px;font:inherit;color:var(--ink);
  background:var(--paper);border:1px solid rgba(27,33,29,0.22);border-radius:9px;
}
select{width:auto;}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;font:inherit;font-weight:500;cursor:pointer;
  background:var(--ink);color:var(--ivory);border:1px solid var(--ink);border-radius:9px;
  text-decoration:none;
}
.btn:hover{background:var(--ink-soft);}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(27,33,29,0.25);}
.btn.ghost:hover{background:rgba(27,33,29,0.06);}
.btn.danger{background:transparent;color:var(--danger);border-color:rgba(140,58,46,0.35);}
.btn[disabled]{opacity:0.45;cursor:not-allowed;}
.linkish{background:none;border:0;font:inherit;color:var(--ink);opacity:0.7;cursor:pointer;text-decoration:underline;padding:0;}

.error{color:var(--danger);font-size:0.9rem;margin:10px 0 0;}
.loading{opacity:0.5;font-family:'IBM Plex Mono',monospace;font-size:0.85rem;}

.who{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.who button{
  padding:12px 20px;font:inherit;color:var(--ink);cursor:pointer;background:var(--paper);
  border:1px solid rgba(27,33,29,0.22);border-radius:999px;
}
.who button:hover{border-color:var(--brass);background:var(--ivory);}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-dark);margin:24px 0 20px;overflow-x:auto;}
.tab{
  padding:10px 16px;font:inherit;font-size:0.94rem;cursor:pointer;white-space:nowrap;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--ink);opacity:0.6;
}
.tab.is-on{opacity:1;border-bottom-color:var(--brass);font-weight:500;}

.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.sub-toolbar{font-size:0.9rem;}
.spacer{flex:1 1 auto;}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:0.9rem;cursor:pointer;}
.week-label{font-family:'IBM Plex Mono',monospace;font-size:0.85rem;min-width:12ch;text-align:center;}
.weeknav{display:flex;align-items:center;gap:6px;}
.weeknav .btn{padding:8px 12px;}
.saved{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;opacity:0.55;}

/* ---------- the paint swatches ---------- */
.paint{display:flex;gap:6px;flex-wrap:wrap;}
.swatch{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;font:inherit;font-size:0.88rem;
  /* Explicit, because a <button> with no colour of its own is rendered in the
     system accent -- which on iOS is blue, so these read as links. */
  color:var(--ink);
  cursor:pointer;background:var(--ivory);border:1px solid rgba(27,33,29,0.18);border-radius:999px;
  -webkit-tap-highlight-color:transparent;
}
.swatch i{width:13px;height:13px;border-radius:4px;display:inline-block;border:1px solid rgba(27,33,29,0.2);}
.swatch[data-grade=ideal] i{background:var(--ideal);}
.swatch[data-grade=good] i{background:var(--good);}
.swatch[data-grade=maybe] i{background:var(--maybe);}
.swatch[data-grade=no] i{background:var(--cant);border-color:var(--cant);}
.swatch[data-grade=blank] i{background:var(--blank);}
.swatch.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:500;}

/* ---------- the grid ---------- */
/* One scroll region, not two.
 *
 * Letting the grid grow to its full height and scrolling the page instead put
 * the day-name row -- which is sticky at the top of the grid -- underneath the
 * site header, which is also sticky and sixty pixels tall. Bounding the height
 * here gives the grid its own viewport: the days and the times stay pinned to
 * the edges of it, the paint swatches never scroll away, and the page itself
 * stops being three thousand pixels long on a six-week horizon. */
.grid-scroll{
  overflow:auto;
  max-height:min(62vh,560px);
  border:1px solid var(--line-dark);border-radius:12px;background:var(--ivory);
  overscroll-behavior:contain;
}
.grid{
  display:grid;
  grid-template-columns:64px repeat(7,minmax(84px,1fr));
  min-width:660px;
  user-select:none;
  -webkit-user-select:none;
  /* Scrolling wins by default.
   *
   * This was `none` so that dragging across cells painted them -- which it
   * did, at the cost of every touch gesture inside the grid. On a phone that
   * meant the days could not be slid sideways to reach the weekend and the
   * hours could not be scrolled at all: whatever the grid opened on was all
   * you were ever going to see.
   *
   * Panning is now the default and painting is the exception, entered by
   * holding a cell for a moment. See the pointer handlers in thebook.js. */
  touch-action:pan-x pan-y;
}
.grid .head{
  position:sticky;top:0;z-index:2;background:var(--paper-soft);
  padding:8px 6px;text-align:center;font-size:0.78rem;line-height:1.3;
  border-bottom:1px solid var(--line-dark);
}
.grid .head b{display:block;font-family:'Fraunces',Georgia,serif;font-size:0.98rem;font-weight:500;}
.grid .head.is-today{background:var(--brass);color:var(--ivory);}
.grid .head.is-past{opacity:0.45;}
/* Pinned to the left edge, so the times are still readable when a narrow
 * screen is scrolled sideways to reach Sunday. */
.grid .time{
  position:sticky;left:0;z-index:1;background:var(--ivory);
  padding:0 8px;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:0.7rem;
  opacity:0.55;border-right:1px solid var(--line-dark);
  display:flex;align-items:flex-start;justify-content:flex-end;
}
/* The corner where the two sticky axes meet has to outrank both. */
.grid .head:first-child{position:sticky;left:0;z-index:3;}
.grid .time.hour{opacity:0.85;}

.cell{
  height:26px;border-bottom:1px solid rgba(27,33,29,0.06);border-right:1px solid rgba(27,33,29,0.06);
  background:var(--blank);cursor:crosshair;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:0.62rem;font-family:'IBM Plex Mono',monospace;color:rgba(27,33,29,0.55);
}
.cell.hour{border-top:1px solid rgba(27,33,29,0.16);}
.cell[data-grade=ideal]{background:var(--ideal-soft);color:var(--ideal);}
.cell[data-grade=good]{background:var(--good-soft);color:#4C6330;}
.cell[data-grade=maybe]{background:var(--maybe-soft);color:#8A5D14;}
.cell[data-grade=no]{background:var(--cant-soft);color:var(--cant);font-weight:600;}
/* A day that has already been.
 *
 * This was a plain 0.3 opacity, which on a phone is indistinguishable from an
 * empty cell you have simply not painted yet -- so opening the tool on a
 * Saturday showed five dead columns that swallowed every tap in silence. Now
 * it is hatched: visibly closed rather than merely faint. */
.cell.is-past{
  background-image:repeating-linear-gradient(45deg,rgba(27,33,29,0.10) 0 2px,transparent 2px 7px);
  color:transparent;
  cursor:not-allowed;
  opacity:0.6;
}
.grid .head.is-past{opacity:0.4;text-decoration:line-through;text-decoration-thickness:1px;}

/* Says why a column is closed, and flashes when a tap lands on one. */
.grid-note{
  font-size:0.82rem;opacity:0.62;margin:10px 0 0;
  transition:color 140ms linear,opacity 140ms linear;
}
.grid-note.flash{color:var(--danger);opacity:1;font-weight:500;}
@media (prefers-reduced-motion:reduce){.grid-note{transition:none;}}

/* A time the member's own calendar says is taken. Hatched rather than
 * coloured, so it reads as "something else is here" rather than as a fifth
 * grade of availability. */
.cell.is-busy{
  background-image:repeating-linear-gradient(45deg,rgba(27,33,29,0.22) 0 2px,transparent 2px 6px);
}
.cell.is-booked{
  background:var(--ink);color:var(--ivory);
  background-image:repeating-linear-gradient(45deg,rgba(245,240,228,0.18) 0 2px,transparent 2px 6px);
}

/* The band view.
 *
 * Two different questions are being answered in one cell, and they must not be
 * confused with each other:
 *
 *   CAN everyone make it?   -- hatched if not. A veto, not a bad score.
 *   HOW WELL does it suit?  -- the fill, graded across the times everyone is
 *                              free, from "all four are only scraping" to
 *                              "all four said ideal".
 *
 * The grading interpolates the same three colours the personal grid already
 * uses for maybe / good / ideal, so a deep green cell here means the same
 * thing it means over there. The number stays because colour alone cannot
 * separate "all four free" from "three free, one yet to answer" -- and a cell
 * where somebody has not answered is outlined, so an optimistic-looking green
 * is never mistaken for a full house. */
.cell.band{cursor:default;font-size:0.66rem;font-weight:500;font-variant-numeric:tabular-nums;}
.cell.band[data-share="0"]{background:var(--blank);color:rgba(27,33,29,0.3);}
.cell.band.blocked{background:repeating-linear-gradient(45deg,#EADFCB 0 3px,#F0E8D8 3px 7px);color:rgba(140,58,46,0.75);}
/* At least one person has actually said no, rather than simply not having
   filled it in. Worth telling apart: one is a decision, the other is a
   reminder to chase somebody. */
.cell.band.refused{background:repeating-linear-gradient(45deg,var(--cant-soft) 0 3px,#F0E8D8 3px 7px);color:var(--cant);}
.legend .hatch.refused{background:repeating-linear-gradient(45deg,var(--cant-soft) 0 3px,#F0E8D8 3px 7px);}
.cell.band.partial{outline:1px dashed rgba(27,33,29,0.4);outline-offset:-2px;}

/* The key for that scale. Shown only in band view, where it is the only way to
 * read the fill. */
.scale{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.scale .ramp{
  width:132px;height:10px;border-radius:999px;
  border:1px solid rgba(27,33,29,0.2);
  background:linear-gradient(90deg,#F0DCB4 0%,#A8C48A 57%,#2F6B4F 100%);
}
.scale .ends{font-size:0.78rem;opacity:0.7;}
.legend .hatch{
  width:12px;height:12px;border-radius:3px;display:inline-block;
  border:1px solid rgba(27,33,29,0.2);
  background:repeating-linear-gradient(45deg,#EADFCB 0 3px,#F0E8D8 3px 7px);
}

/* Painting has been armed by a long press: drag now marks cells instead of
 * scrolling, and the grid says so rather than leaving you to discover it. */
.grid-scroll.is-painting{box-shadow:inset 0 0 0 2px var(--brass);}

.legend{font-size:0.82rem;opacity:0.7;margin-top:12px;display:flex;gap:18px;flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(27,33,29,0.2);display:inline-block;}

/* ---------- suggestions ---------- */
.suggestion{
  background:var(--ivory);border:1px solid var(--line-dark);border-radius:12px;
  padding:18px 20px;margin-bottom:12px;
}
.suggestion.top{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}
.suggestion header{position:static;background:none;border:0;backdrop-filter:none;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0;}
.suggestion .when{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;}
.suggestion .rank{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass);}
.suggestion .why{font-size:0.9rem;opacity:0.78;margin:8px 0 0;}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0;}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:0.82rem;border:1px solid rgba(27,33,29,0.15);background:var(--paper);
}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.chip[data-grade=ideal] i{background:var(--ideal);}
.chip[data-grade=good] i{background:var(--good);}
.chip[data-grade=maybe] i{background:var(--maybe);}
.chip.owed{border-color:var(--brass);}
.chip.owed::after{content:"owed";font-size:0.68rem;font-family:'IBM Plex Mono',monospace;opacity:0.7;letter-spacing:0.06em;}
.suggestion .actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;}

.near{background:var(--paper-soft);border:1px dashed rgba(27,33,29,0.25);border-radius:12px;padding:14px 18px;margin-bottom:10px;font-size:0.92rem;}
.empty{background:var(--ivory);border:1px solid var(--line-dark);border-radius:12px;padding:28px;text-align:center;}

.ledger{margin-top:32px;border-top:1px solid var(--line-dark);padding-top:20px;}
.bars{display:grid;gap:8px;margin-top:12px;max-width:520px;}
.bar{display:grid;grid-template-columns:8ch 1fr auto;align-items:center;gap:10px;font-size:0.88rem;}
.bar .track{height:9px;background:var(--paper-soft);border-radius:999px;overflow:hidden;}
.bar .fill{height:100%;background:var(--brass);border-radius:999px;}
.bar .num{font-family:'IBM Plex Mono',monospace;font-size:0.76rem;opacity:0.6;}

/* ---------- booked ---------- */
.rehearsal{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--ivory);border:1px solid var(--line-dark);border-radius:12px;padding:16px 20px;margin-bottom:10px;
}
.rehearsal.past{opacity:0.6;}
.rehearsal .when{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;}

/* ---------- sync ---------- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;}
.card{background:var(--ivory);border:1px solid var(--line-dark);border-radius:14px;padding:22px 24px;}
.card h3{margin-bottom:6px;}
.card .btn{margin-top:14px;}
.how{margin-top:16px;font-size:0.88rem;}
.how summary{cursor:pointer;opacity:0.75;}
.how div{padding-top:10px;}
.how p{margin:0 0 8px;}
code{font-family:'IBM Plex Mono',monospace;font-size:0.85em;background:var(--paper-soft);padding:1px 5px;border-radius:4px;}

/* Phones.
 *
 * This is where the tool is actually used -- somebody standing in a kitchen
 * being asked "can you do Thursday". So the four swatches have to stay on one
 * row (reaching for a grade must not involve a wrap), the cells get taller for
 * thumbs, and the chrome that is only decoration on a small screen goes. */
@media (max-width:640px){
  .wrap{padding:0 14px 80px;}
  .act-head{padding:24px 0 16px;}
  .nav{padding:12px 14px;}
  .logo{font-size:0.98rem;white-space:nowrap;}
  .nav-right .eyebrow{display:none;}
  .nav-right{gap:10px;}
  .tabs{margin:18px 0 16px;}
  .tab{padding:10px 12px;font-size:0.9rem;}

  .paint{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
  .swatch{padding:9px 4px;font-size:0.78rem;justify-content:center;gap:5px;}
  .swatch i{width:11px;height:11px;}

  .toolbar{gap:10px;}
  .weeknav{width:100%;justify-content:space-between;}
  .week-label{flex:1 1 auto;}
  .sub-toolbar .btn{flex:1 1 auto;}
  .spacer{display:none;}

  /* All seven days, always. Sliding sideways to find out whether anyone is
     free at the weekend is a poor way to learn it, so the columns share
     whatever width there is instead of holding a minimum and overflowing.
     The grid can still be panned -- it just no longer has to be. */
  .grid{grid-template-columns:38px repeat(7,minmax(0,1fr));min-width:0;}
  .grid .head{padding:7px 1px;font-size:0.64rem;line-height:1.25;}
  .grid .head b{font-size:0.8rem;}
  .grid .time{padding:0 4px;font-size:0.6rem;}
  .cell{height:34px;} /* a bigger target for a thumb */
  .grid-scroll{max-height:min(58vh,460px);}
  .pane{padding:20px;}
  .suggestion{padding:16px;}
  .suggestion .when{font-size:1.05rem;}
  .rehearsal{gap:10px;}
}

@media print{
  header,.tabs,.toolbar,.actions{display:none;}
  .grid-scroll{overflow:visible;}
}

@media (prefers-reduced-motion:no-preference){
  .cell{transition:background-color 90ms linear;}
}

/* ---------- multi-band ---------- */

/* The list of bands you are in. A whole row is the target, because on a phone
   a link the width of the band's name is a link you miss. */
.band-row{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--ivory);border:1px solid var(--line-dark);border-radius:12px;
  padding:16px 20px;margin-bottom:10px;
}
.band-row:hover{border-color:var(--brass);}
.band-row > div{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;}
.band-name{font-family:'Fraunces',Georgia,serif;font-size:1.1rem;}
.band-sub{font-size:0.88rem;opacity:0.65;}

.role-pill{
  font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid rgba(27,33,29,0.2);opacity:0.7;white-space:nowrap;
}
.role-pill.admin{border-color:var(--brass);color:var(--brass);opacity:1;}

.tabs.small{border-bottom:0;margin:0 0 16px;}
.hint{font-size:0.82rem;opacity:0.6;margin:6px 0 0;}
.optional{font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0;opacity:0.5;}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.btn.small{padding:7px 13px;font-size:0.85rem;}

.member,.invite-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--line-dark);
}
.member:last-child,.invite-row:last-child{border-bottom:0;}
.member > div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.member-name{font-weight:500;}

.invite-link{
  width:100%;margin:8px 0;font-family:'IBM Plex Mono',monospace;font-size:0.78rem;
}

/* ---------- places ---------- */

.place{
  border:1px solid var(--line-dark);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;background:var(--paper);
}
.place-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.rating-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px;}
.rating-row .mins{width:5.5em;}
.at-place{
  font-family:'IBM Plex Mono',monospace;font-size:0.74rem;letter-spacing:0.06em;
  color:var(--brass);white-space:nowrap;
}

/* Everyone's travel, side by side. This is the table that settles the
   argument about whether a room is "not that far". */
.matrix{border-collapse:collapse;width:100%;font-size:0.85rem;font-variant-numeric:tabular-nums;}
.matrix th,.matrix td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--line-dark);}
.matrix th{font-weight:500;font-size:0.78rem;opacity:0.75;}
.matrix td{text-align:right;}
.matrix td.unsaid{opacity:0.35;}
.matrix .hassle{color:var(--maybe);margin-left:4px;font-weight:600;}

@media (max-width:640px){
  .band-row{padding:14px 16px;}
  .rating-row{gap:10px;}
  .matrix{font-size:0.78rem;}
  .matrix th,.matrix td{padding:6px 5px;}
}

/* The one card on the page whose buttons cannot be undone. Set apart rather
   than tucked away: hiding a destructive action makes people hunt for it and
   then click it in a hurry. */
.danger-zone{border-color:rgba(140,58,46,0.3);}
.danger-zone h3{color:var(--danger);}
.confirm{
  margin-top:14px;padding:14px 16px;border-radius:10px;
  background:rgba(140,58,46,0.06);border:1px solid rgba(140,58,46,0.25);
}
.confirm p{margin:0;font-size:0.92rem;}

/* ---------- lineups ---------- */

.lineup-picker{margin-bottom:14px;}
.who-ticks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.tick{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--paper);border:1px solid rgba(27,33,29,0.18);border-radius:999px;
  font-size:0.9rem;cursor:pointer;user-select:none;
}
.tick:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:500;}
.tick input{width:auto;margin:0;}

@media (max-width:640px){
  .who-ticks{gap:6px;}
  .tick{padding:8px 12px;font-size:0.86rem;}
}

/* The number key that selects a swatch.
 *
 * Shown only where there is a real keyboard: `pointer: fine` and `hover: hover`
 * together mean a mouse or trackpad, which is also the only place the shortcut
 * can be pressed. On a phone it would be a number with no meaning taking up
 * room in a control that is already tight. */
.swatch kbd{display:none;}

@media (hover: hover) and (pointer: fine){
  .swatch kbd{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.66rem;
    line-height:1;
    padding:3px 5px;
    margin-left:2px;
    border-radius:4px;
    border:1px solid rgba(27,33,29,0.18);
    background:var(--paper-soft);
    opacity:0.65;
  }
  .swatch.is-on kbd{opacity:1;border-color:rgba(27,33,29,0.3);}
}