/* ===========================================================================
   My Table. The record page.
   ---------------------------------------------------------------------------
   Every colour here comes from a shared.css token, so this page follows the
   site into dark without a single value of its own. Nothing is hardcoded except
   the two flag tints at the bottom, which are taken from the status pairs
   shared.css already defines for exactly this.

   The page is a RECORD, not a scoreboard, which is why nothing on it is a big
   number in a coloured tile. The facts row is small on purpose and the medals
   are not here at all: they live on the play hub where they belong.
   =========================================================================== */

.mt-wrap { max-width: 760px; margin: 0 auto; padding: 0 18px 80px; }

/* ---- THE WAY BACK. The play hub's three panes, drawn here as doors rather
        than as tabs. Nothing is marked selected, because this page is not one
        of the three and the mark would be a lie.

        Every value is copied from the hub's own .tabs / .tabbtn: the 640px cap,
        the 1.5px lilac hairline, the small-caps serif at 16px falling to 15 on a
        narrow phone, the 11/4/9 padding and the 3px underline that the -1.5px
        bottom margin hangs over the hairline. Measured at 375px the strip is
        339px wide against the hub's 331, because this page's column is padded
        18px and the hub's 22, so "Your Laurels" sits on one line here where the
        hub's own wraps to two. Copied values, not a copied picture. --------- */
.mt-back {
  display: flex; max-width: 640px; margin: 0 auto;
  border-bottom: 1.5px solid var(--lilac);
}
.mt-back a {
  flex: 1; text-align: center; text-decoration: none;
  font-family: var(--serif-sc); font-size: 16px; color: var(--dusk);
  padding: 11px 4px 9px; margin-bottom: -1.5px;
  border-bottom: 3px solid transparent;
}
.mt-back a:hover, .mt-back a:focus-visible {
  color: var(--ink); border-bottom-color: var(--orchid);
}
.mt-back a:focus-visible { outline: 2px solid var(--orchid); outline-offset: -3px; }
@media (max-width: 380px) { .mt-back a { font-size: 15px; } }

.mt-head { text-align: center; padding: 26px 0 4px; }
.mt-head h1 { margin: 0; }
.mt-since { color: var(--dusk); font-style: italic; margin: 6px 0 0; }

/* ---- WHICH CARD. Two controls, one choice, never a sideways scroll.
        Her rule 2026-09-06: never a side to side scroll, use a menu when a card
        has to be chosen. Her observation the same day: the pills look good on a
        computer. Both are true, so both controls exist and the width decides.
        The breakpoint is MEASURED, not guessed. Measured 2026-09-06 in the
        browser: the five pills are 618px wide as a row, the column adds 36px of
        padding, so they need 654px of viewport. The switch is at 700px, which
        leaves 46px in hand for a font that renders wider than Playfair does.
        Add a sixth card, or a longer name, and this has to be measured again,
        or the row will break the page instead of scrolling, which is the whole
        point of the missing overflow rule below. --------------------------- */
.mt-pick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--lilac);
}
.mt-pick label { color: var(--dusk); font-size: 15px; flex: none; }
.mt-pick select {
  flex: 1 1 200px; min-width: 0; font: inherit; font-size: 16px; cursor: pointer;
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--lilac);
  background: var(--surface); color: var(--ink);
}
.mt-pick select:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

/* the pills. No overflow rule at all, deliberately: with nothing to scroll
   inside, a row that did not fit would visibly break the page rather than hide
   two cards off an edge, so this can never regress quietly into a scroller. */
.mt-tabs {
  display: none; gap: 7px; padding: 4px 0 12px;
  margin: 22px 0 18px; border-bottom: 1px solid var(--lilac);
}
.mt-tabs button {
  white-space: nowrap; font-family: inherit; font-size: 15px; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--lilac);
  background: var(--ivory); color: var(--dusk);
}
.mt-tabs button[aria-selected="true"] {
  background: var(--label); border-color: var(--label); color: var(--cloud); font-weight: 600;
}
.mt-tabs button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

@media (min-width: 700px) {
  .mt-pick { display: none; }
  .mt-tabs { display: flex; }
}

/* ---- progress against the card. The denominator is counted off the card
        files this page loads, never written down here. ------------------- */
.mt-prog { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.mt-prog b { font-family: var(--serif, Georgia, serif); font-size: 22px; color: var(--label);
             font-variant-numeric: tabular-nums; }
.mt-prog span { color: var(--dusk); font-size: 15px; }
.mt-bar { height: 10px; border-radius: 999px; background: var(--ivory);
          border: 1px solid var(--lilac); overflow: hidden; }
.mt-bar i { display: block; height: 100%; background: var(--label); transition: width .25s ease; }

.mt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px; margin: 20px 0 30px; }
.mt-fact { background: var(--ivory); border: 1px solid var(--lilac); border-radius: 10px; padding: 12px 14px; }
.mt-fact b { display: block; font-family: var(--serif, Georgia, serif); font-size: 24px;
             color: var(--label); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mt-fact span { display: block; color: var(--dusk); font-size: 14.5px; margin-top: 3px; }

/* ---- sections ------------------------------------------------------------ */
.mt-sec { margin: 34px 0 0; }
.mt-sec > h2 { font-size: 20px; margin: 0 0 4px; }
.mt-sec > p.mt-note { color: var(--dusk); font-size: 15px; margin: 0 0 14px; }

.mt-rows { border-top: 1px solid var(--lilac); }
.mt-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--lilac); width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: var(--body-ink); text-align: left; cursor: pointer;
}
.mt-row:hover { background: var(--ivory); }
.mt-row:focus-visible { outline: 2px solid var(--orchid); outline-offset: -2px; }
.mt-row .mt-when { color: var(--dusk); font-size: 14.5px; white-space: nowrap;
                   font-variant-numeric: tabular-nums; }
.mt-empty { color: var(--dusk); font-style: italic; padding: 14px 0; }

.mt-pill { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
           border: 1px solid var(--label); color: var(--label);
           border-radius: 4px; padding: 1px 7px; margin-left: 8px; white-space: nowrap; }

/* ---- a solved hand, opened. HER fourteen tiles, in the deck she was using
        that day, which is why img() is called with an explicit style rather
        than the reader's current one. ------------------------------------ */
.mt-snap { background: var(--ivory); border: 1px solid var(--lilac); border-radius: 10px;
           padding: 14px 15px; margin: 0 0 14px; }
.mt-snap h3 { margin: 0 0 2px; font-size: 17px; }
.mt-snap .mt-when { display: block; color: var(--dusk); font-size: 14px; margin-bottom: 10px; }
.mt-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-tiles img { width: 30px; height: auto; border-radius: 3px; display: block; }
.mt-tiles .mt-gap { width: 10px; }
.mt-deck { color: var(--dusk); font-size: 13.5px; font-style: italic; margin: 10px 0 0; }

/* ---- adding a play day --------------------------------------------------- */
.mt-add { background: var(--ivory); border: 1px solid var(--lilac); border-radius: 10px;
          padding: 16px 16px 18px; margin-top: 14px; }
.mt-add label { display: block; font-size: 14.5px; color: var(--dusk); margin: 12px 0 4px; }
.mt-add input[type="text"], .mt-add input[type="date"], .mt-add input[type="number"],
.mt-add select, .mt-add textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--lilac); background: var(--surface); color: var(--ink);
}
.mt-add textarea { min-height: 66px; resize: vertical; }
.mt-four { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mt-inline { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; }
.mt-inline input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.mt-inline span { font-size: 14.5px; color: var(--body-ink); }

.mt-btn { font: inherit; font-size: 16px; cursor: pointer; border-radius: 9px;
          padding: 10px 18px; border: 1px solid var(--label);
          background: var(--label); color: var(--cloud); }
.mt-btn.ghost { background: transparent; color: var(--label); }
.mt-btn[disabled] { opacity: .55; cursor: default; }
.mt-btn:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
.mt-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

/* ---- the photo, and the rule that sits above the button ------------------ */
.mt-photorule { border: 1px dashed var(--orchid); border-radius: 9px; padding: 12px 14px;
                margin: 16px 0 0; font-size: 15px; color: var(--body-ink); background: var(--surface); }
.mt-photorule b { color: var(--label); }
.mt-shot { margin-top: 12px; }
.mt-shot img { max-width: 220px; border-radius: 8px; border: 1px solid var(--lilac); display: block; }

/* ---- sharing. Off, and it says so. --------------------------------------- */
.mt-share { margin-top: 40px; border-top: 1px solid var(--lilac); padding-top: 18px; }
.mt-share h2 { font-size: 18px; margin: 0 0 4px; }
.mt-share p { color: var(--dusk); font-size: 15px; margin: 0 0 12px; }
.mt-state { display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 14px;
            border: 1px solid var(--lilac); color: var(--dusk); background: var(--ivory); }
.mt-state.on { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-ink); }

.mt-gate { text-align: center; padding: 50px 0; color: var(--dusk); }
.mt-err { color: var(--orchid); font-size: 15px; margin-top: 10px; }

@media (max-width: 560px) {
  .mt-four { grid-template-columns: 1fr; }
}

/* ---- adding to a day that is already saved ------------------------------- */
.mt-more { margin-top: 12px; }
.mt-btn.mt-small { font-size: 15px; padding: 7px 14px; }
.mt-morepanel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--lilac); }
.mt-morepanel label { display: block; font-size: 14.5px; color: var(--dusk); margin: 12px 0 4px; }
.mt-morepanel select, .mt-morepanel input[type="file"] {
  width: 100%; font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--lilac); background: var(--surface); color: var(--ink);
}
.mt-morepanel select { cursor: pointer; }

/* a win already on the day, with the way to take it back off */
.mt-winline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mt-x {
  font: inherit; font-size: 13.5px; cursor: pointer; flex: none;
  background: none; border: 0; padding: 2px 0; color: var(--dusk);
  text-decoration: underline; text-underline-offset: 3px;
}
.mt-x:hover { color: var(--orchid); }
.mt-x:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
.mt-x[disabled] { opacity: .5; cursor: default; }

/* ---- a game, and the days it opens on ------------------------------------
   The caret is the house control, copied from .boxcollapse in admin/index.html
   rather than invented here, and it sits in a fixed-width seat so the row does
   not shift when the glyph flips between shut and open. ------------------- */
.mt-game { border-bottom: 1px solid var(--lilac); }
.mt-game:last-child { border-bottom: 0; }
.mt-gamehead { border-bottom: 0 !important; }
.mt-gamename { display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.mt-caret {
  display: inline-block; width: 1.35em; flex: 0 0 1.35em; text-align: left;
  color: var(--dusk); font-size: 13px; line-height: inherit;
  background: none; border: 0; padding: 0;
}
.mt-tray { padding: 2px 0 14px 1.35em; }
.mt-month { margin: 4px 0; font-size: 15px; color: var(--body-ink);
            font-variant-numeric: tabular-nums; }
.mt-month b { color: var(--label); font-weight: 600; margin-right: 8px; }
.mt-again { display: inline-block; margin-top: 10px; font-size: 15px; color: var(--label); }

/* the tray of games that have left the shelf */
.mt-trayhead { display: flex; align-items: center; justify-content: space-between;
               gap: 10px; font-size: 20px; margin: 0 0 4px; }
.mt-trayhead .boxcollapse {
  background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 3px 9px; border-radius: 7px; flex: 0 0 auto; color: var(--dusk);
}
.mt-trayhead .boxcollapse:hover { color: var(--ink); }
.mt-trayhead .boxcollapse:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

/* the line under the bar that says why a zero is a zero */
.mt-progwhy {
  margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--dusk);
  background: var(--ivory); border: 1px dashed var(--lilac);
  border-radius: 9px; padding: 11px 13px;
}

/* ---- THE WHOLE CARD, section by section, greyed until won ----------------
   The point of the page in one block: how many lines exist, which you hold,
   and how far there is to go. A chip carries a line NUMBER and nothing else,
   because the card's content is not this page's to show. ------------------ */
.mt-secblock { padding: 12px 0; border-bottom: 1px solid var(--lilac); }
.mt-secblock:last-child { border-bottom: 0; }
.mt-secname { display: flex; align-items: baseline; justify-content: space-between;
              gap: 12px; margin: 0 0 9px; font-size: 16px; color: var(--ink); }
.mt-secname b { font-variant-numeric: tabular-nums; color: var(--dusk); font-size: 15px; font-weight: 600; }
.mt-secname b.done { color: var(--label); }
.mt-secblock.finished .mt-secname span { color: var(--label); font-weight: 600; }

.mt-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-line {
  min-width: 38px; padding: 7px 9px; border-radius: 8px; font: inherit; font-size: 16px;
  text-align: center; font-variant-numeric: tabular-nums;
  border: 1px dashed var(--lilac); background: transparent; color: var(--dusk);
}
.mt-line.got {
  border: 1px solid var(--label); background: var(--label); color: var(--cloud);
  font-weight: 600; cursor: pointer;
}
.mt-line.got:hover { filter: brightness(1.1); }
.mt-line.got:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

/* ---- the days inside a game, and the ones that carry a win ---------------
   Every day is a chip so the row reads as dates rather than as a run of
   digits. A day you won on is a button; the rest are plain, so the only things
   that look pressable are the ones worth pressing. ----------------------- */
.mt-daystrip { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.mt-day {
  min-width: 30px; padding: 3px 7px; border-radius: 7px; text-align: center;
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--dusk); border: 1px solid transparent; background: transparent;
}
.mt-day.won {
  cursor: pointer; color: var(--cloud); font-weight: 600;
  background: var(--label); border-color: var(--label);
}
.mt-day.won:hover { filter: brightness(1.12); }
.mt-day.won:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

/* ---- sections that fold -------------------------------------------------
   The card grid and the trainers both shut away, on the same caret the console
   uses. Shut by default: the page should open on what you have, not on the 55
   you have not. A shut header keeps its own count, so it still says what is
   inside it. ------------------------------------------------------------- */
.mt-fold { margin-top: 22px; border-top: 1px solid var(--lilac); padding-top: 8px; }
.mt-foldhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--serif, Georgia, serif); font-size: 18px; margin: 0;
}
.mt-foldhead .boxcollapse,
.mt-trayhead .boxcollapse {
  background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 3px 9px; border-radius: 7px; flex: 0 0 auto; color: var(--dusk);
}
.mt-foldhead .boxcollapse:hover { color: var(--ink); }
.mt-foldhead .boxcollapse:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

/* the card, section by section. A chip is a LINE NUMBER, nothing else. */
.mt-secblock { padding: 12px 0; border-bottom: 1px solid var(--lilac); }
.mt-secblock:last-child { border-bottom: 0; }
.mt-secname { display: flex; align-items: baseline; justify-content: space-between;
              gap: 12px; margin: 0 0 9px; font-size: 16px; color: var(--ink); }
.mt-secname b { font-variant-numeric: tabular-nums; color: var(--dusk); font-size: 15px; font-weight: 600; }
.mt-secname b.done { color: var(--label); }
.mt-secblock.finished .mt-secname span { color: var(--label); font-weight: 600; }
.mt-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-line {
  min-width: 38px; padding: 7px 9px; border-radius: 8px; font: inherit; font-size: 16px;
  text-align: center; font-variant-numeric: tabular-nums;
  border: 1px dashed var(--lilac); background: transparent; color: var(--dusk);
}
.mt-line.got { border: 1px solid var(--label); background: var(--label);
               color: var(--cloud); font-weight: 600; cursor: pointer; }
.mt-line.got:hover { filter: brightness(1.1); }
.mt-line.got:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

/* ---- a section as a box -------------------------------------------------
   The two she looks at most sit in panels of their own, so the page reads as
   rooms rather than one long column, and a box opens and shuts on its own
   caret. Her call 2026-09-06. ------------------------------------------- */
.mt-sec.mt-box {
  background: var(--ivory); border: 1px solid var(--lilac); border-radius: 14px;
  padding: 16px 18px 18px; margin-top: 26px;
}
.mt-sec.mt-box > h2 { margin: 0; }
.mt-sec.mt-box > h2 + * { margin-top: 10px; }
.mt-sec.mt-box .mt-rows { border-top: 1px solid var(--lilac); }
.mt-sec.mt-box .mt-snap { background: var(--surface); }
.mt-sec.mt-box .mt-line { background: var(--surface); }
.mt-sec.mt-box .mt-line.got { background: var(--label); }

/* ---- A MONTH PER GAME -----------------------------------------------------
   The Laurels grid, brought inside a game (her call 2026-09-06). Seven columns,
   a square a day, filled for a day you played, a small count when you played
   more than once, and only a day you WON on is pressable.
   The empty squares are deliberately inert here. On Laurels an empty square is
   a door into that day's games; letting one look pressable on this page would
   promise something it cannot do. ----------------------------------------- */
.mt-calwrap { margin-top: 10px; }
.mt-calhead { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.mt-callbl { font-family: var(--serif, Georgia, serif); font-size: 15px; color: var(--label);
             letter-spacing: .04em; text-align: center; }
.mt-callbl.solo { display: block; margin: 0 0 8px; }
.mt-calstep { font: inherit; font-size: 18px; line-height: 1; cursor: pointer; color: var(--label);
              background: none; border: 0; padding: 2px 8px; border-radius: 7px; }
.mt-calstep:hover:not([disabled]) { background: var(--ivory); }
.mt-calstep[disabled] { opacity: .3; cursor: default; }
.mt-calstep:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }

.mt-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
          max-width: 300px; margin: 0 auto; }
.mt-dow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
          color: var(--dusk); text-align: center; padding-bottom: 2px; }
.mt-cd { position: relative; aspect-ratio: 1; border-radius: 7px;
         border: 1px solid var(--lilac); background: var(--surface);
         display: flex; align-items: center; justify-content: center;
         font: inherit; font-size: 14px; color: var(--dusk); padding: 0; }
.mt-cd i { font-style: normal; }
.mt-cd.blank { border: 0; background: transparent; }
.mt-cd.played { background: var(--label); border-color: var(--label); color: var(--cloud); font-weight: 600; }
.mt-cd.won { cursor: pointer; box-shadow: 0 0 0 2px var(--orchid); }
.mt-cd.won:hover { filter: brightness(1.12); }
.mt-cd.won:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
.mt-cn { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
         border-radius: 999px; background: var(--orchid); color: #fff;
         font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
         padding: 0 3px; font-variant-numeric: tabular-nums; }