/* Shared workspace components. Feature sheets own layouts; this file owns
   typography, control sizing and surface treatment. Login and printed CVs
   deliberately retain their existing presentation. */
@font-face {
  font-family: "Pathlyra Inter";
  src: url("/fonts/inter-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@media screen {
  body:has(#platformView:not(.hidden)) {
    --ui-font: "Pathlyra Inter", "Segoe UI", sans-serif;
    --ns-radius-sm: 8px;
    --ns-radius: 10px;
    --ns-radius-lg: 12px;
    --ns-shadow: none;
    font-family: var(--ui-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--app-text);
  }

  body:has(#platformView:not(.hidden)) :is(#platformView, #modalRoot, #toast),
  body:has(#platformView:not(.hidden)) :is(#platformView, #modalRoot) * {
    font-family: var(--ui-font);
  }

  #platformView .page { padding: 28px 32px 48px; }
  #platformView :is(.page-heading,.ca-heading) { gap: 16px; margin:0 0 24px; padding:0 0 20px; border-bottom:1px solid var(--app-border); align-items:center; }
  #platformView :is(.page-heading,.ca-heading) h1 { font-size: 28px; line-height: 1.25; letter-spacing: -.6px; margin:0; font-weight:650; }
  #platformView :is(.page-heading,.ca-heading) p { font-size: 14px; line-height: 1.55; margin:8px 0 0; max-width:70ch; color:var(--app-muted); }
  #platformView .page-heading > div {min-width:0}
  #platformView :is(.page-heading,.ca-heading) > div > span {display:none}
  #platformView .page-heading > .primary-button {flex-shrink:0;align-self:center;margin:0}
  #platformView .page-heading > div > span { font-size: 11px; letter-spacing: .08em; }
  #platformView :is(.top-context small, .sidebar nav label) { font-size: 11px; }
  #platformView .sidebar nav a { min-height: 44px; font-size: 14px; }
  #platformView :is(.top-profile small, .global-search kbd) { font-size: 12px; }
  #platformView .top-profile b { font-size: 13px; }
  #platformView .global-search { height: 44px; min-width: 0; }
  #platformView .global-search input { font-size: 14px; min-width: 0; }

  #platformView :is(.surface, .ns-panel, .table-surface, .dashboard-panel,
    .event-row, .scholarship-row, .faq-row, .student-course-row, .course-outline,
    .course-participants, .course-detail-head, .lesson-view) {
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-panel);
    box-shadow: none;
  }
  #platformView .surface-head { padding: 18px 20px; gap: 16px; min-height: 72px; }
  #platformView .surface-head h2 { font-size: 17px; line-height: 1.4; font-weight: 650; }
  #platformView .surface-head p { font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
  #platformView .surface-head button { font-size: 13px; flex-shrink: 0; }
  #platformView .ns-panel-body { padding: 20px; }

  body:has(#platformView:not(.hidden)) :is(.primary-button, .secondary-button,
    .outline-button, .submit-button) {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
  }
  body:has(#platformView:not(.hidden)) :is(button, a):hover { transform: none; }
  body:has(#platformView:not(.hidden)) :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 3px;
  }
  body:has(#platformView:not(.hidden)) :is(button, input, select, textarea):disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
  body:has(#platformView:not(.hidden)) :is(.modal, .settings-form) label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }
  body:has(#platformView:not(.hidden)) :is(.modal, .settings-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea) {
    min-height: 44px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--app-panel);
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.5;
  }
  body:has(#platformView:not(.hidden)) :is(input[type=checkbox], input[type=radio]) {
    accent-color: var(--app-primary);
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: middle;
  }
  body:has(#platformView:not(.hidden)) .modal { border-radius: 12px; }
  body:has(#platformView:not(.hidden)) .modal header { padding: 24px; }
  body:has(#platformView:not(.hidden)) .modal header h2 { font-size: 24px; line-height: 1.3; }
  body:has(#platformView:not(.hidden)) .modal header p { font-size: 13px; }
  body:has(#platformView:not(.hidden)) .modal form { padding: 24px; }

  #platformView :is(.university-toolbar, .task-toolbar, .document-toolbar,
    .event-toolbar, .activity-toolbar, .course-toolbar, .k-toolbar,
    .workflow-toolbar, .list-toolbar) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 16px;
  }
  #platformView :is(.search-field, .activity-search, .k-search, .table-search) {
    min-width: min(260px, 100%);
    min-height: 44px;
    border-radius: 8px;
    box-shadow: none;
  }
  #platformView :is(.university-toolbar, .task-toolbar, .document-toolbar,
    .event-toolbar, .activity-toolbar, .course-toolbar, .k-toolbar,
    .workflow-toolbar, .list-toolbar) :is(input, select) {
    font-size: 14px;
    color: var(--app-text);
  }
  #platformView :is(.ns-tabs, .tabbar) button { min-height: 44px; font-size: 14px; }
  #platformView :is(.ns-tabs, .tabbar) button span { font-size: 12px; }
  #platformView table { font-size: 14px; }
  #platformView table th { padding: 14px 16px; font-size: 12px; letter-spacing: .025em; }
  #platformView table td { padding: 16px; line-height: 1.5; }
  #platformView table tbody tr:hover { background: var(--app-page); }
  #platformView table :is(small, td > span, td:first-child span) { font-size: 12px; }
  #platformView table td:last-child button { min-height: 36px; height: auto; font-size: 13px; }
  #platformView :is(.status, .badge, .course-badge, .activity-badge) { font-size: 12px; line-height: 1.4; }

  #platformView .dashboard-kpis { gap: 12px; margin-bottom: 20px; }
  #platformView .dashboard-kpi {
    min-height: 112px;
    padding: 18px 20px;
    text-align: left;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-panel);
    box-shadow: none;
  }
  #platformView .dashboard-kpi span { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }
  #platformView .dashboard-kpi strong { font-size: 28px; line-height: 1.2; margin: 8px 0; font-variant-numeric: tabular-nums; }
  #platformView .dashboard-kpi small { font-size: 12px; line-height: 1.5; }
  #platformView .dashboard-kpi:hover { border-color: var(--app-primary); }
  #platformView .dashboard-kpi:nth-child(n+5) { min-height: 84px; padding: 14px 20px; }
  #platformView .dashboard-kpi:nth-child(n+5) strong { font-size: 22px; display: inline-block; margin: 4px 10px 0 0; }
  #platformView .dashboard-grid { gap: 20px; align-items: start; }
  #platformView .dashboard-panel { min-height: 0; }
  #platformView .dashboard-scroll { min-height: 132px; max-height: 320px; }
  #platformView .dashboard-list-item { padding: 14px 20px; min-height: 64px; }
  #platformView .dashboard-list-item b { font-size: 14px; line-height: 1.45; }
  #platformView .dashboard-list-item span { font-size: 13px; line-height: 1.5; margin-top: 4px; }
  #platformView .no-inline-data { padding: 40px 20px; font-size: 14px; }

  #platformView :is(.modern-empty, .course-empty, .empty-state, .university-empty,
    .document-empty, .task-empty, .test-empty, .event-empty, .activity-empty, .k-empty, .k-error) {
    min-height: 160px;
    height:auto;
    padding: 24px;
    gap: 0;
  }
  #platformView .empty-badge { width: 40px; height: 40px; border-radius: 10px; box-shadow: none; outline:none; margin:0 auto; background:var(--app-page); border:1px solid var(--app-border); color:var(--app-muted); font-size:14px; }
  #platformView .empty-badge svg { width: 20px; height: 20px; }
  #platformView :is(.modern-empty, .course-empty, .empty-state, .university-empty,
    .document-empty, .task-empty, .test-empty, .event-empty, .activity-empty, .k-empty, .k-error) h2 { font-size: 17px; line-height:1.4; font-weight:600; margin:12px 0 6px; }
  #platformView :is(.modern-empty, .course-empty, .empty-state, .university-empty,
    .document-empty, .task-empty, .test-empty, .event-empty, .activity-empty, .k-empty, .k-error) p { max-width: 480px; font-size: 14px; line-height: 1.6; margin:0 auto 16px; }
  #platformView :is(.module-empty,.module-list):has(>.modern-empty) {min-height:0}
  #platformView :is(.student-course-row small, .course-outline header p, .lesson-outline-row small,
    .course-mini-empty, .lesson-meta, .student-course-row > div:nth-child(2) > span) { font-size: 12px; }
  #platformView :is(.lesson-outline-row b, .student-course-row p, .lesson-lead) { font-size: 14px; line-height: 1.5; }
  #platformView :is(.course-outline h2, .course-participants h2) { font-size: 17px; }
  #platformView :is(.course-outline > header, .course-participants > header) { padding: 18px 20px; }
  /* Feature metadata uses the same readable secondary type scale. */
  #platformView :is(.event-summary span, .event-date span, .event-copy > span,
    .event-capacity span, .event-participant-table small, .k-resource-card > small,
    .k-tags span, .k-admin-row span, .k-status, .k-faq-question small,
    .k-faq-answer footer > span:nth-child(2), .k-form label small, .k-attachments small,
    .activity-table td:first-child span, .activity-status, .evidence-linked,
    .cv-included, .cv-suggested, .university-scholarship-filter,
    .university-result-copy > span, .university-result-copy small,
    .university-compare-check, .university-overview-grid dt,
    .university-record-list span, .requirement-matches > span, .requirement-matches b,
    .university-link-list b, .shortlist-row span, .shortlist-stage,
    .counselling-summary span, .counselling-meta dt, .counselling-copy b,
    .counselling-private b, .counselling-follow-up-date, .counselling-related span,
    .counselling-timeline time, .counselling-timeline span, .counselling-timeline small,
    .counselling-dashboard-summary span, .counselling-dashboard-summary small) {
    font-size: 12px;
    line-height: 1.5;
  }
  #platformView :is(.event-copy p, .university-record-list p, .shortlist-row p) {
    font-size: 14px;
    line-height: 1.6;
  }
  #platformView :is(.cv-paper section p, .cv-record header span, .cv-record small,
    .cv-paper > header > span, .cv-subject-grid b, .cv-subject-grid small,
    .cv-keywords span, .cv-score-list span, .cv-score-list b) { font-size: 12px; }
  #platformView .course-dashboard-panel .dashboard-scroll { padding: 0; }
  #platformView :is(.table-subtitle, .person small, .status-chip,
    .ns-detail-row span, .ns-key-values b, .drawer-toolbar > span,
    .account-summary span, .account-sort span, .account-identity small,
    .student-profile-identity small, .student-profile-identity > span,
    .student-profile-direction > span:first-child, .profile-missing-list > b,
    .profile-missing-list span, .profile-focus > span, .profile-tags > span,
    .profile-linked-summary > div:last-child span, .profile-definition dt,
    .profile-missing, .profile-history small, .profile-multi-chips button,
    .student-completion-cell span, .academic-programme,
    .academic-summary article > span, .academic-summary article > small,
    .academic-subject-table td:first-child small, .academic-level,
    .academic-note-list small, .academic-document-list small,
    .test-score-summary article > span, .test-score-summary small,
    .test-score-toolbar > span, .test-score-table td:first-child small,
    .test-validity, .test-validity + small, .test-evidence,
    .document-summary > button > span, .document-summary > button > small,
    .document-archive-toggle, .document-title-cell small, .document-deadline,
    .document-deadline small, .document-visibility, .document-pagination,
    .document-pagination b, .document-priority, .document-attention-strip small,
    .task-summary > button > small, .task-title-cell small, .task-priority,
    .task-deadline, .task-deadline small, .task-pagination, .task-pagination b,
    .task-dashboard-strip small) { font-size: 12px; line-height: 1.5; }
  #platformView :is(.profile-empty-copy, .profile-tab-empty p,
    .profile-permission-note, .academic-comment, .academic-compact-empty) {
    font-size: 13px; line-height: 1.6;
  }
  body:has(#platformView:not(.hidden)) :is(.field-help, .field-error,
    .optional-label, .account-role-picker small, .account-role-readonly small,
    .account-role-readonly span, .profile-form-note, .test-detail-score > span,
    .test-detail-score > small, .test-component-grid span, .test-detail-meta dt,
    .test-note-section article small, .document-upload-field small,
    .document-student-picker small, .document-detail-summary dt,
    .document-version-list small, .document-audit small,
    .task-student-picker small, .task-template-list small, .task-detail-summary dt,
    .task-related > span, .task-attachments small, .task-history small) {
    font-size: 12px; line-height: 1.5;
  }
  body:has(#platformView:not(.hidden)) :is(.confirmation-copy,
    .account-preservation-note p, .test-detail-meta dd, .test-note-section article p,
    .test-no-notes, .document-detail-summary dd, .document-version-list p,
    .document-audit p, .task-detail-summary dd, .task-comments span) {
    font-size: 14px; line-height: 1.6;
  }
  #platformView .test-score-toolbar select { min-height: 44px; font-size: 14px; border-radius: 8px; }
  /* Recipient document search sits in the action row, not document-toolbar. */
  #platformView .document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  #platformView .document-actions .document-search {
    display: flex; align-items: center; gap: 10px;
    flex: 1 1 280px; width: auto; min-width: 0; max-width: 420px;
    height: 44px; margin: 0 0 0 auto; padding: 0 14px;
    border: 1px solid var(--app-border); border-radius: 8px;
    background: var(--app-panel); color: var(--app-muted); box-shadow: none;
  }
  #platformView .document-search > svg {
    width: 18px; height: 18px; flex: 0 0 18px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  #platformView .document-search input {
    flex: 1; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0;
    border: 0; border-radius: 0; outline: none; box-shadow: none;
    background: transparent; color: var(--app-text); font-size: 14px; font-weight: 400;
  }
  #platformView .document-search input::placeholder { color: var(--app-muted); opacity: 1; }
  #platformView .document-actions .document-search:focus-within {
    border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(110,35,64,.14);
  }
  #platformView .document-actions .document-search input:focus { outline: none; border: 0; box-shadow: none; }

  body:has(#platformView:not(.hidden)), #platformView *,
  body:has(#platformView:not(.hidden)) #modalRoot * {
    scrollbar-width: thin;
    scrollbar-color: var(--app-border) transparent;
  }
}

@media screen and (max-width: 1100px) {
  #platformView .page { padding: 24px; }
  #platformView .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #platformView .topbar { gap: 12px; padding-inline: 20px; }
  #platformView .top-context { min-width: 0; }
}
@media screen and (max-width: 1000px) {
  #platformView .document-actions .document-search {
    flex: 0 0 44px; width: 100%; max-width: none; margin: 0;
  }
}
@media screen and (max-width: 700px) {
  #platformView .page { padding: 20px 16px 32px; }
  #platformView .page-heading { align-items: flex-start; flex-direction: column; }
  #platformView .page-heading > .primary-button {align-self:flex-start}
  #platformView .page-heading h1 { font-size: 26px; }
  #platformView .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  #platformView .dashboard-kpi { padding: 16px; }
  #platformView .surface-head { flex-wrap: wrap; padding: 16px; }
  #platformView :is(.university-toolbar, .task-toolbar, .document-toolbar,
    .event-toolbar, .activity-toolbar, .course-toolbar, .k-toolbar,
    .workflow-toolbar, .list-toolbar) > :is(label, select, input, .search-field, .k-search) {
    flex: 1 1 100%; width: 100%; min-width: 0; max-width: none;
  }
  body:has(#platformView:not(.hidden)) .modal-shade { padding: 12px; }
  body:has(#platformView:not(.hidden)) .modal { max-height: calc(100dvh - 24px); }
  body:has(#platformView:not(.hidden)) .modal :is(header, form) { padding: 20px; }
  /* Match the desktop field selector specificity to avoid iOS focus zoom. */
  body:has(#platformView:not(.hidden)) :is(.modal, .settings-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #platformView *, body:has(#platformView:not(.hidden)) #modalRoot * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}