/* Canonical Tutor24Hour UI foundation.
   Feature and homepage-variant styles may compose differently, but recurring
   platform primitives should consume these tokens instead of inventing a new
   visual language. Keep this file low-specificity and non-destructive. */


:root {
  --t24-font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --t24-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --t24-text-xs: .75rem;
  --t24-text-sm: .875rem;
  --t24-text-md: 1rem;
  --t24-text-lg: 1.125rem;
  --t24-text-xl: 1.25rem;
  --t24-text-2xl: 1.5rem;
  --t24-text-3xl: 2rem;
  --t24-space-1: .25rem;
  --t24-space-2: .5rem;
  --t24-space-3: .75rem;
  --t24-space-4: 1rem;
  --t24-space-5: 1.25rem;
  --t24-space-6: 1.5rem;
  --t24-space-8: 2rem;
  --t24-space-10: 2.5rem;
  --t24-space-12: 3rem;
  --t24-radius-sm: .375rem;
  --t24-radius-md: .5rem;
  --t24-radius-lg: .75rem;
  --t24-radius-xl: 1rem;
  --t24-radius-pill: 999px;
  --t24-color-text: #172033;
  --t24-color-muted: #667085;
  --t24-color-surface: #ffffff;
  --t24-color-surface-soft: #f6f8fb;
  --t24-color-border: #d7dee8;
  --t24-color-border-strong: #b9c4d2;
  --t24-color-brand: #1769e0;
  --t24-color-brand-strong: #0f56bd;
  --t24-color-brand-soft: #eaf2ff;
  --t24-color-success: #067647;
  --t24-color-warning: #854a0e;
  --t24-color-danger: #b42318;
  --t24-color-focus: #2563eb;
  --t24-shadow-sm: 0 1px 2px rgb(16 24 40 / .05);
  --t24-shadow-md: 0 10px 28px rgb(16 24 40 / .09);
  --t24-control-height-sm: 2.25rem;
  --t24-control-height-md: 2.75rem;
  --t24-control-height-lg: 3rem;
  --t24-content-max: 80rem;
  --t24-reading-max: 48rem;
}

.t24-platform-system {
  font-family: var(--t24-font-sans);
}

.t24-platform-system {
  color: var(--t24-color-text);
  text-rendering: optimizeLegibility;
}

.t24-platform-system :where(button, input, select, textarea) { font: inherit; }
.t24-platform-system :where(input, select, textarea):disabled,
.t24-platform-system :where(button):disabled { cursor: not-allowed; opacity: .62; }
.t24-platform-system :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--t24-color-focus) 36%, transparent);
  outline-offset: 2px;
}

.t24-ui-page {
  width: min(100% - 2rem, var(--t24-content-max));
  margin-inline: auto;
}

.t24-ui-reading {
  max-width: var(--t24-reading-max);
}

.t24-ui-card {
  background: var(--t24-color-surface);
  border: 1px solid var(--t24-color-border);
  border-radius: var(--t24-radius-lg);
  box-shadow: var(--t24-shadow-sm);
}

.t24-ui-button,
.t24-ui-button-primary,
.t24-ui-button-secondary {
  min-height: var(--t24-control-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--t24-space-2);
  padding: .625rem 1rem;
  border-radius: var(--t24-radius-md);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.t24-ui-button-primary {
  border: 1px solid var(--t24-color-brand);
  background: var(--t24-color-brand);
  color: #fff;
}

.t24-ui-button-secondary {
  border: 1px solid var(--t24-color-border);
  background: var(--t24-color-surface);
  color: var(--t24-color-text);
}

.t24-ui-input,
.t24-ui-select,
.t24-ui-search {
  min-height: var(--t24-control-height-md);
  border: 1px solid var(--t24-color-border);
  border-radius: var(--t24-radius-md);
  background: var(--t24-color-surface);
  color: var(--t24-color-text);
  font: inherit;
}

.t24-ui-input:focus-visible,
.t24-ui-select:focus-visible,
.t24-ui-search:focus-visible,
.t24-ui-button:focus-visible,
.t24-ui-button-primary:focus-visible,
.t24-ui-button-secondary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--t24-color-focus) 35%, transparent);
  outline-offset: 2px;
}

.t24-ui-muted { color: var(--t24-color-muted); }
.t24-ui-status-success { color: var(--t24-color-success); }
.t24-ui-status-warning { color: var(--t24-color-warning); }
.t24-ui-status-danger { color: var(--t24-color-danger); }

/* Shell markers are intentionally structural. They let audits and tests verify
   that pages stay inside one of the governed navigation families. */
[data-platform-shell-family="public"],
[data-platform-shell-family="authenticated"],
[data-platform-shell-family="operations"],
[data-platform-shell-family="specialized"] {
  font-family: var(--t24-font-sans);
}

/* Tutor authenticated workspace — governed semantic foreground/background pairs (v20C25). */
.tutor-workspace-page {
    --tutor-workspace-text: #172033;
    --tutor-workspace-supporting: #475467;
    --tutor-workspace-border: #667085;
    --tutor-workspace-focus: #175cd3;
    color: var(--tutor-workspace-text);
}

.tutor-workspace-page .t24-supporting-text,
.tutor-workspace-page .form-text {
    color: var(--tutor-workspace-supporting) !important;
}

.tutor-workspace-page .form-control,
.tutor-workspace-page .form-select,
.tutor-workspace-page .btn-outline-secondary,
.tutor-workspace-page .table,
.tutor-workspace-page .card {
    border-color: var(--tutor-workspace-border);
}

.tutor-workspace-page .form-control:focus,
.tutor-workspace-page .form-select:focus,
.tutor-workspace-page .btn:focus-visible,
.tutor-workspace-page a:focus-visible {
    outline: 3px solid var(--tutor-workspace-focus);
    outline-offset: 2px;
}


/* Canonical application primitives — v99 component foundation. */
.t24-workspace-page{max-width:1440px;margin:0 auto}
.t24-page-shell{width:100%;max-width:1280px;margin:0 auto;padding:.25rem 0 2rem}
.t24-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.t24-page-header h1{font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 .3rem;font-weight:700}
.t24-page-header p,.t24-section-heading p{margin:0;color:#667085}
.t24-eyebrow,.t24-page-kicker,.t24-section-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#475467}
.t24-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.t24-section-heading h2{font-size:1rem;margin:0 0 .2rem;font-weight:700}
.t24-section-heading a{font-size:.875rem;text-decoration:none;white-space:nowrap}
.t24-section-card{background:var(--bs-body-bg,#fff);border:1px solid rgba(15,23,42,.10);border-radius:10px;box-shadow:0 1px 2px rgba(15,23,42,.04);padding:1.2rem}
.t24-section-card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(15,23,42,.09);background:#fbfcfe}
.t24-metric-card{background:var(--bs-body-bg,#fff);border:1px solid rgba(15,23,42,.10);border-radius:10px;padding:1rem;box-shadow:none}
.t24-metric-card .display-6{font-size:1.65rem;line-height:1.2;margin:.2rem 0}
.t24-empty-state{min-height:9rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.35rem;padding:1.25rem;border:1px dashed rgba(15,23,42,.18);border-radius:12px;background:rgba(248,250,252,.72);color:#64748b;text-align:left}
.t24-empty-state strong{color:#0f172a;font-size:.98rem;margin-bottom:.25rem}
.t24-data-table{margin-bottom:0}
.t24-data-table thead th,.t24-data-table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.035em;color:#64748b;font-weight:600;white-space:nowrap;border-bottom-width:1px}
.t24-data-table td{font-size:.875rem;vertical-align:middle;padding:.75rem .6rem}
.t24-data-table td:first-child span{display:block;color:#667085;font-size:.78rem}
.t24-status{display:inline-flex;align-items:center;padding:.25rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.2}
.t24-status.success{background:#ecfdf3;color:#027a48}
.t24-status.neutral{background:#f2f4f7;color:#475467}
.t24-status.warning{background:#fffaeb;color:#b54708;border:1px solid #b54708}
.t24-attention-card{display:flex;align-items:flex-start;gap:.85rem;padding:1rem;border:1px solid #f5c26b;border-radius:10px;background:#fffaf0;color:#344054}
.t24-attention-icon{flex:0 0 28px;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#fffaeb;color:#b54708;border:1px solid #b54708;font-weight:900}
.t24-field{display:grid;gap:.375rem}
.t24-field>label{font-size:.875rem;font-weight:650;color:#344054}
.t24-field :is(input,select,textarea){min-height:44px;border:1px solid #98a2b3;border-radius:8px;background:#fff;color:#101828;padding:.6rem .75rem}
.t24-tabs{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid #e4e7ec}
.t24-tab{display:inline-flex;align-items:center;min-height:42px;padding:.5rem .75rem;border:0;border-bottom:2px solid transparent;background:transparent;color:#475467;font-weight:650;white-space:nowrap}
.t24-tab[aria-selected="true"],.t24-tab.active{border-bottom-color:#175cd3;color:#175cd3}
.t24-modal{background:#fff;border:1px solid #e4e7ec;border-radius:12px;box-shadow:0 18px 48px rgba(16,24,40,.16)}
.t24-toast{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border:1px solid #d0d5dd;border-radius:10px;background:#fff;box-shadow:0 10px 28px rgba(16,24,40,.10)}
.t24-skeleton{min-height:18px;border-radius:8px;background:linear-gradient(90deg,#eef2f6,#f8fafc,#eef2f6);background-size:200% 100%;animation:t24AppSkeleton 1.3s ease infinite}
@keyframes t24AppSkeleton{0%{background-position:0 0}100%{background-position:200% 0}}
@media(max-width:767.98px){.t24-page-header>.d-flex{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:.25rem}.t24-page-header .btn{white-space:nowrap}.t24-section-card{border-radius:12px;padding:1rem}.t24-page-shell{padding-top:0}.t24-page-header{margin-bottom:1rem}}
.local-staging-email-inbox{max-width:920px}
.collaboration-recording-settings{max-width:900px}