/*
 * Teachito design layer (T-005) — the primitives of the design boards (emrooz-handoff), as classes.
 *
 * Every number here is read off the boards' inline styles (the most-repeated declarations across all 95 boards),
 * so a page built from these classes matches its board. Colours are --t-* variables:
 *   - the dark values below are the boards' palette and the fallback;
 *   - Components/Common/Design/TeachitoTokens.razor re-emits them per theme (light is derived).
 * Pages opt in with a `t-page` root. Nothing here touches the legacy pages (no element selectors outside .t-*).
 *
 * Guard notes (tests/.../Ux/CssRulesTests):
 *   - 10px / 11px text exists in the boards. It is only expressed through .t-fs-10 / .t-fs-11, which are the two
 *     selectors sanctioned in SanctionedTinyRules. Do not write a bare font-size below 12px anywhere else.
 *   - no `outline: none`; no repeat(N,1fr) grids (write `1fr 1fr`).
 */

:root {
    --t-bg: #0E1318; --t-card: #161D24; --t-raised: #1F2933; --t-bar: #12181E;
    --t-text: #E8EEF2; --t-text2: #A9B6C1; --t-muted: #8A97A3; --t-soft: #C9D3DB;
    --t-track: #2A343D; --t-faint: #66737F; --t-ring: #3A4651; --t-dim: #4A5661;
    --t-accent: #5FD3C0; --t-accent-rgb: 95, 211, 192; --t-on-accent: #07211D; --t-on-accent-soft: #0B3B34;
    --t-amber: #E8B15D; --t-amber-rgb: 232, 177, 93; --t-amber-soft: #E6D3B0; --t-on-amber: #2A1D05;
    --t-info: #8FB8E8;
    --t-border: rgba(255, 255, 255, .07); --t-border-soft: rgba(255, 255, 255, .06); --t-border-strong: rgba(255, 255, 255, .12);
    --t-accent-border: rgba(95, 211, 192, .3);
}

/* ── page frame ─────────────────────────────────────────────────────────────────────────────────────────────── */
.t-page {
    box-sizing: border-box;
    min-height: 100%;
    padding: 28px 20px 32px;
    background: var(--t-bg);
    color: var(--t-text);
    font-family: 'Vazirmatn', system-ui, sans-serif;
    /* the boards never set a body line-height, so every text runs at the font's own "normal"; the app's global 1.75 would
       make each line taller than the board's */
    line-height: normal;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.t-page button, .t-page input, .t-page textarea { font-family: inherit; }
.t-page a { text-decoration: none; color: inherit; }
.t-page a.t-btn--primary { color: var(--t-on-accent); }   /* the link reset above is more specific than .t-btn--primary */
.t-page h1, .t-page h2, .t-page h3, .t-page p { margin: 0; }
.t-page :is(button, a, textarea, input):focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }

/* ── type scale (boards use 10–56px) ────────────────────────────────────────────────────────────────────────── */
.t-fs-10 { font-size: 10px; }
.t-fs-11 { font-size: 11px; }
.t-fs-12 { font-size: 12px; }
.t-fs-13 { font-size: 13px; }
.t-fs-14 { font-size: 14px; }
.t-fs-15 { font-size: 15px; }
.t-fs-16 { font-size: 16px; }
.t-fs-17 { font-size: 17px; }
.t-fs-18 { font-size: 18px; }
.t-fs-20 { font-size: 20px; }
.t-fs-22 { font-size: 22px; }
.t-fs-24 { font-size: 24px; }
.t-fs-26 { font-size: 26px; }
.t-fs-28 { font-size: 28px; }
.t-fs-30 { font-size: 30px; }
.t-w5 { font-weight: 500; }
.t-w6 { font-weight: 600; }
.t-w7 { font-weight: 700; }
.t-lh-15 { line-height: 1.5; }
.t-lh-17 { line-height: 1.7; }
.t-lh-19 { line-height: 1.9; }
.t-lh-20 { line-height: 2; }
.t-c-text { color: var(--t-text); }
.t-c-text2 { color: var(--t-text2); }
.t-c-muted { color: var(--t-muted); }
.t-c-soft { color: var(--t-soft); }
.t-c-faint { color: var(--t-faint); }
.t-c-accent { color: var(--t-accent); }
.t-c-amber { color: var(--t-amber); }
.t-tc { text-align: center; }

/* ── layout helpers ─────────────────────────────────────────────────────────────────────────────────────────── */
.t-stack { display: flex; flex-direction: column; }
.t-row { display: flex; }
.t-center { align-items: center; }
.t-baseline { align-items: baseline; }
.t-between { justify-content: space-between; }
.t-end { justify-content: flex-end; }
.t-grow { flex: 1; min-width: 0; }
.t-shrink0 { flex-shrink: 0; }
.t-gap-2 { gap: 2px; }
.t-gap-4 { gap: 4px; }
.t-gap-6 { gap: 6px; }
.t-gap-8 { gap: 8px; }
.t-gap-10 { gap: 10px; }
.t-gap-12 { gap: 12px; }
.t-gap-14 { gap: 14px; }
.t-gap-16 { gap: 16px; }
.t-gap-20 { gap: 20px; }
.t-gap-24 { gap: 24px; }
.t-mt-auto { margin-top: auto; }

/* ── surfaces ───────────────────────────────────────────────────────────────────────────────────────────────── */
.t-card {
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-radius: 18px;
    overflow: hidden;
}
.t-card--r16 { border-radius: 16px; }
.t-card--pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.t-card--accent { border-color: var(--t-accent-border); }

/* ── small controls the Profile boards share (chips, text field, 38px action buttons) ───────────────────────── */
.t-chip {
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--t-text) 12%, transparent);
    background: transparent;
    color: var(--t-soft);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.t-chip.is-on { border-color: var(--t-accent); background: rgba(var(--t-accent-rgb), .12); color: var(--t-accent); }
.t-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(var(--t-accent-rgb), .5);
    background: var(--t-bg);
    color: var(--t-text);
    font-size: 14px;
}
.t-sbtn {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--t-text) 14%, transparent);
    background: transparent;
    color: var(--t-soft);
    font-size: 13px;
    cursor: pointer;
}
.t-sbtn--primary { border: 0; background: var(--t-accent); color: var(--t-on-accent); font-weight: 700; }
.t-sbtn--amber { border-color: rgba(var(--t-amber-rgb), .4); color: var(--t-amber); }
.t-sbtn--amber-solid { border: 0; background: var(--t-amber); color: var(--t-on-amber); font-weight: 700; }
.t-sbtn:disabled { opacity: .5; cursor: default; }

/* A card holding a single row: icon/text on the leading side, action on the trailing side. */
.t-rowcard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    border-radius: 16px;
    background: var(--t-card);
    border: 1px solid var(--t-border);
}
.t-divider-top { border-top: 1px solid var(--t-border-soft); }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────────────────── */
.t-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 54px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: var(--t-raised);
    color: var(--t-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.t-btn--primary { background: var(--t-accent); color: var(--t-on-accent); }
.t-btn--ghost { height: 44px; background: transparent; color: var(--t-text2); font-size: 14px; font-weight: 400; }
.t-btn:disabled, .t-btn[aria-disabled="true"] { background: var(--t-track); color: var(--t-faint); cursor: default; }

.t-iconbtn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--t-raised);
    color: var(--t-text);
    font-size: 20px;
    cursor: pointer;
}
.t-iconbtn--48 { width: 48px; height: 48px; font-size: 22px; }
.t-iconbtn--52 { width: 52px; height: 52px; font-size: 24px; }
.t-iconbtn:disabled { color: var(--t-faint); cursor: default; }

/* bare 44px hit area around an icon or glyph (back arrow, ✦, close) */
.t-hit {
    width: 44px;
    height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--t-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ── progress ───────────────────────────────────────────────────────────────────────────────────────────────── */
.t-progress { height: var(--t-progress-h, 6px); border-radius: 999px; background: var(--t-track); overflow: hidden; }
.t-progress--raised { background: var(--t-raised); }
.t-progress__fill { height: 100%; border-radius: 999px; background: var(--t-accent); }

/* ── assistant bubble ───────────────────────────────────────────────────────────────────────────────────────── */
.t-bubble { display: flex; align-items: center; gap: 10px; }
.t-bubble__disc {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--t-accent-rgb), .13);
    color: var(--t-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.t-bubble__text {
    padding: 10px 14px;
    background: var(--t-card);
    border: 1px solid var(--t-border);
    border-radius: 4px 16px 16px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--t-soft);
}

/* ── stepper row (TStepper) ─────────────────────────────────────────────────────────────────────────────────── */
.t-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 12px;
    border-radius: 16px;
    background: var(--t-card);
    border: 1px solid var(--t-border);
}
.t-stepper--big { padding: 12px; }
.t-stepper__label { width: 48px; padding-inline-start: 8px;   /* board: 40px + 8px padding (content-box) */ font-size: 14px; color: var(--t-muted); }
.t-stepper__value { flex: 1; text-align: center; font-size: var(--t-stepper-value, 26px); font-weight: 700; }
.t-stepper--compact { padding: 6px 6px 6px 16px; }
.t-stepper--compact .t-stepper__label { width: 36px; padding-inline-start: 0; }

/* ── board chrome (TPage → AppState.BoardChrome → MainLayout) ───────────────────────────────────────────────────
   On phones a TPage owns its header, so the layout's app bar and its reserved top space go away and the page runs
   edge to edge (the page supplies its own 20px side padding). Desktop keeps the app bar until the desktop shell lands. */
@media (max-width: 959.98px) {
    .mud-appbar.t-appbar--board { display: none; }
    .mud-main-content.t-main--board { padding-top: 0 !important; }
    .layout-body.t-body--board { padding-top: 0; padding-left: 0; padding-right: 0; }
}

/* Wider than a phone: the boards are 390px, so until each page gets its desktop composition (REDESIGN_TEACHITO §5)
   the page is a centred column instead of a stretched one. */
@media (min-width: 600px) {
    .t-page { max-width: 480px; margin-inline: auto; }
}

/* A page with a desktop composition (<TPage Wide>): from 1100px it takes the room and lays its own columns out. */
@media (min-width: 1100px) {
    .t-page.t-page--wide { max-width: 1120px; padding: 32px 32px 40px; gap: 28px; }
}

/* Onboarding on desktop: the step is a centred card on the backdrop, not a phone-height strip. */
@media (min-width: 960px) {
    .t-page.onb { min-height: min(calc(100vh - 64px), 820px) !important; margin-block: 32px; padding: 24px 32px 28px !important; border: 1px solid var(--t-border); border-radius: 24px; }
}

/* A page that stays one column on desktop but has room to breathe (<TPage Roomy>). */
@media (min-width: 960px) {
    .t-page.t-page--roomy { max-width: 720px; }
}

/* ── legacy app bar, until each page it serves is drawn from the boards ──────────────────────────────────────────
   app.css paints it as a purple gradient with !important. Pages that are not boards yet still get this bar, so it takes
   the board's bar surface and text (both themes) instead of staying purple next to the teal bottom bar. */
.mud-appbar.appbar-custom {
    background: var(--t-bar) !important;
    color: var(--t-text) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--t-border);
}

/* ── legacy side drawer (desktop): the purple profile header becomes the board's card surface ───────────────────── */
.drawer-nav .dheader {
    background: var(--t-card);
    border-bottom: 1px solid var(--t-border);
    border-radius: 0;
    margin-bottom: 4px;
}
.drawer-nav .dheader .davatar { border: 2px solid var(--t-accent-border); box-shadow: none; }
.drawer-nav .dheader .dname { color: var(--t-text); }
.drawer-nav .dheader .dphone { color: var(--t-muted); }
.drawer-nav .dheader .dswitch .mud-switch-label,
.drawer-nav .dheader .dswitch .mud-typography { color: var(--t-text) !important; }

/* ── desktop rail (>=960px): the legacy drawer takes the board's bar surface — a slim, quiet column with the avatar as a
   row, small group labels, 40px links and the accent as the active pill. Markup is unchanged (NavModelTests own the items). ── */
@media (min-width: 960px) {
    .mud-drawer { background: var(--t-bar) !important; border-inline-start: 1px solid var(--t-border); }
    .drawer-nav .dheader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: start; padding: 16px 16px 12px; background: transparent; border-bottom: 1px solid var(--t-border); }
    .drawer-nav .dheader .davatar { width: 40px !important; height: 40px !important; margin: 0; flex-shrink: 0; }
    .drawer-nav .dheader .dname { font-size: 14px; font-weight: 700; margin: 0; }
    .drawer-nav .dheader .dphone { font-size: 12px; }
    .drawer-nav .mud-nav-group > .mud-nav-link { font-size: 12px; font-weight: 600; color: var(--t-muted); }
    .drawer-nav .mud-nav-link { margin: 1px 10px; border-radius: 12px; font-size: 14px; color: var(--t-text2); min-height: 40px; }
    .drawer-nav .mud-nav-link:hover { background: var(--t-raised); color: var(--t-text); }
    .drawer-nav .mud-nav-link.active,
    .mud-dark .drawer-nav .mud-nav-link.active { background: rgba(var(--t-accent-rgb), .14) !important; color: var(--t-accent) !important; border-radius: 12px !important; margin: 1px 10px !important; }
    .dlogout-area { border-top: 1px solid var(--t-border); }
}