/*  The level-assessment lesson's application page (2026-11-10), on the
    signed-out shell in the landing's design. Every colour is a theme token,
    as in landing.css, so the page follows the light half and the moon's dark
    half of whichever theme the office chose. Measured pairs (Elbe theme):
      light — text #1C1814 on the card #FFFFFF-ish grad 16:1; muted #5E584C 7.1:1;
      dark  — text #F3EDDB on #1A2332-ish grad 13:1; muted #93A1B5 5.6:1.
    The chosen day / hour / coach is the theme's brass with --theme-on-brass,
    the same pair as the page's primary button, so it is readable on every
    theme without a literal colour here.  */

.tr-page { padding-top: 40px; }
.tr-in { max-width: 980px; }

.tr-note { color: var(--theme-text-muted); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tr-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--elbe-line); border-top-color: var(--theme-brass); animation: tr-spin 0.8s linear infinite; display: inline-block; }
@keyframes tr-spin { to { transform: rotate(360deg); } }

/* The closed / paused card: the same card the steps use, with the knight as its mark. */
.tr-banner {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--theme-card-grad); border: 1px solid var(--elbe-line); border-radius: var(--elbe-r);
    box-shadow: var(--elbe-shadow); padding: 18px 20px; color: var(--theme-text);
}
.tr-banner-ico { font-size: 30px; line-height: 1; color: var(--theme-brass); flex: 0 0 auto; }
.tr-banner-t { font-family: var(--elbe-serif); font-size: 19px; font-weight: 700; color: var(--theme-text); margin: 0 0 6px; }
.tr-banner-b { font-size: 14px; line-height: 1.55; color: var(--theme-text-muted); margin: 0; }
.tr-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; margin-top: 12px; }

/* Steps */
.tr-step { margin-top: 26px; }
.tr-step-h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--theme-text); margin-bottom: 12px; flex-wrap: wrap; }
.tr-step-n {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px;
    background: var(--theme-accent-grad); color: var(--theme-on-brass);
    display: grid; place-items: center; font-family: var(--elbe-serif); font-weight: 700; font-size: 14px;
}
.tr-step-sub { font-weight: 500; font-size: 13.5px; color: var(--theme-text-muted); }

/* Tiles: a day, an hour, a coach. Tap targets, not text: no selection, no tap flash. */
.tr-days, .tr-times, .tr-coaches { display: grid; gap: 10px; }
.tr-days { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.tr-times { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.tr-coaches { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.tr-tile {
    background: var(--theme-card-grad); border: 1px solid var(--elbe-line); border-radius: 12px;
    padding: 10px 12px; text-align: start; color: var(--theme-text); cursor: pointer;
    font: inherit; transition: border-color 0.15s, background 0.15s;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    min-height: 44px;
}
@media (hover: hover) { .tr-tile:not(:disabled):hover { border-color: var(--theme-brass); background: var(--theme-hover-bg); } }
.tr-tile:focus-visible { outline: 2px solid var(--elbe-eyebrow); outline-offset: 2px; }
.tr-tile.on { background: var(--elbe-brass); border-color: var(--elbe-brass); color: var(--theme-on-brass); }
.tr-tile.on .tr-muted, .tr-tile.on .tr-tile-sub { color: var(--theme-on-brass); opacity: 0.85; }
.tr-tile:disabled { cursor: not-allowed; opacity: 0.55; }

.tr-tile-day { font-size: 12.5px; color: var(--theme-text-muted); }
.tr-tile-num { font-family: var(--elbe-serif); font-size: 22px; font-weight: 700; line-height: 1.1; }
.tr-tile-sub { font-size: 12px; color: var(--theme-text-muted); margin-top: 3px; }
.tr-tile-time { font-family: var(--elbe-serif); font-size: 18px; font-weight: 700; }
.tr-tile-name { font-weight: 700; font-size: 14.5px; }
.tr-tile-title { font-size: 12px; color: var(--elbe-brass-text); font-weight: 700; letter-spacing: 0.4px; }
.tr-tile.on .tr-tile-title { color: var(--theme-on-brass); }
.tr-tile-ach { font-size: 12.5px; color: var(--theme-text-muted); margin-top: 4px; line-height: 1.45; white-space: pre-line; }

/* The details card and the done card */
.tr-card {
    background: var(--theme-card-grad); border: 1px solid var(--elbe-line); border-radius: var(--elbe-r);
    box-shadow: var(--elbe-shadow); padding: 18px 20px; color: var(--theme-text);
}
.tr-card .form-label { font-size: 13px; font-weight: 600; color: var(--theme-text); margin-bottom: 4px; }
.tr-card .form-control { min-height: 44px; }
.tr-req { color: var(--elbe-wine-text); }
.tr-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tr-hint { font-size: 13px; color: var(--theme-text-muted); }
.tr-hint.ready { color: var(--elbe-felt-text); font-weight: 600; }
.tr-card .lp-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.tr-done { text-align: center; margin-top: 10px; }
.tr-done-ico {
    width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 12px;
    background: var(--theme-accent-grad); color: var(--theme-on-brass);
    display: grid; place-items: center; font-size: 28px; font-weight: 700;
}
.tr-rows { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin: 14px auto 0; text-align: start; }
.tr-row { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--theme-hover-bg); }
.tr-row span:first-child { color: var(--theme-text-muted); font-size: 13px; flex: 0 0 auto; }
.tr-row span:last-child { color: var(--theme-text); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.tr-note-box { font-size: 13.5px; line-height: 1.55; color: var(--theme-text-muted); max-width: 520px; margin: 14px auto 0; }
.tr-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* A phone: the band's own side padding does the gutter; tiles stay tappable. */
@media (max-width: 575.98px) {
    .tr-page { padding: 24px 16px 40px; }
    .tr-days { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .tr-times { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .tr-coaches { grid-template-columns: 1fr; }
    .tr-card { padding: 14px; }
    .tr-form-foot .lp-btn { width: 100%; }
}