/* Shared Cabrillo typography. Load after each shell's layout styles.
   App/utility pages use one fixed role scale; public headlines and the
   classroom projection board intentionally retain their display scale. */
:root {
  --font-body: 'TT Interphases', 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'TT Interphases Mono', 'Fira Code', ui-monospace, Menlo, monospace;
  --type-body: 1rem;
  --type-support: .875rem;
  --type-meta: .8125rem;
  --type-section: 1rem;
  --type-page: 1.375rem;
  --type-title: 1.375rem;
  --type-metric: 1.375rem;
  /* Type-scale roles 1 and 2 (PORTAL-DESIGN-POLICY.md, "The type scale," 20
     Sep 2026): a page title (28-32px, the heading a route is named after)
     and a section heading (18-20px, a labelled group inside a page) must be
     two clearly different sizes. --type-title and --type-page above render
     identically at 1.375rem, so h1 and h2 on the student production page
     measured 22px/22px at a 16px root with no distinguishable hierarchy.
     These two are rem-based, not hardcoded px, so they scale with a
     reader's own larger-text browser setting like every other role here. */
  --type-page-title: 1.75rem;
  --type-section-heading: 1.125rem;
  --leading-body: 1.6;
  --leading-heading: 1.3;
}
html { font-size: 100%; }
body.fh-app, body.fh-public { font: 400 var(--type-body)/var(--leading-body) var(--font-body); }
body.fh-board { font-family: var(--font-body); }
.fh-app :is(h1,h2,h3,h4), .fh-public :is(h1,h2,h3,h4) {
  font-family: var(--font-body);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.fh-app h1 { font-size: var(--type-title); line-height: 28px; letter-spacing: -.01em; }
.fh-app h2, .fh-app .inst-page-head h2 { font-size: var(--type-page); line-height: 28px; letter-spacing: -.01em; }
/* The student production page (portal-student.php, .production-workspace):
   its own <h1> (the production's title) and every <h2> panel heading inside
   it (Crew, Equipment, Documents and friends) both rendered at
   --type-title/--type-page above, which share the same 1.375rem value, so
   the page measured 22px/22px with no hierarchy at all (PORTAL-DESIGN-
   POLICY.md, "The type scale," 20 Sep 2026: role 1 page title is 28-32px,
   role 2 section heading is 18-20px, and they must read as two different
   sizes). Scoped to this page and placed after the rules above so it wins
   the cascade at equal specificity; instructor pages give their own page
   title to an .inst-page-head h2, a different structure this does not
   touch. */
.fh-app .production-workspace h1 { font-size: var(--type-page-title); line-height: 1.2; }
.fh-app .production-workspace h2 { font-size: var(--type-section-heading); line-height: 1.35; }
.fh-app h3, .fh-app h4, .fh-app .card-h, .fh-app .item-title,
.fh-app .role-work__title, .fh-app .student-equip-request__head h3 {
  font-size: var(--type-section); font-weight: 600; line-height: 1.4; letter-spacing: 0;
}
.fh-app :is(.cab-small,.fhint,.k-sub), .fh-app .inst-page-head p,
.fh-public :is(.small,.smaller) { font-size: var(--type-support); line-height: var(--leading-body); }
.fh-app :is(.inst-page-head__copy,.fh-prose), .fh-app .student-pane > p,
.fh-app .student-pane > .cab-small { max-width: 72ch; }
.fh-app :is(label,legend) { font-family: var(--font-body); font-size: var(--type-support); line-height: 1.5; }
.fh-app :is(input,select,textarea) { font-family: var(--font-body); font-size: var(--type-support); }
.fh-app :is(.tabbar button,.fb-tools button,.role-guide__switcher button),
.fh-public .btn { font-family: var(--font-body); font-size: var(--type-support); font-weight: 600; line-height: 1.3; }
/* Buttons: 32 px pills, Medium weight, sentence case (DESIGN-SYSTEM.md section 4).
   Type-scale role 4 (menu/button item), set 20 Sep 2026: var(--type-support), the
   same token every menu trigger (equipment-more-actions summary and friends)
   already used, so a primary button and its own More actions sibling render
   the same computed size instead of one following the root font size (a
   browser accessibility setting, not a page zoom) and the other frozen in px. */
.fh-app .btn, .fh-app #inst-main .btn-small { font-family: var(--font-body); font-size: var(--type-support); font-weight: 500; line-height: 20px; }
.fh-app .side-nav .nav-sec { font-family: var(--font-body); font-size: var(--type-support); font-weight: 600; line-height: 1.4; }
.fh-app .side-nav button[data-pane] { font-size: var(--type-support); line-height: 1.4; }
.fh-app .student-nav button { font-size: var(--type-support); line-height: 1.4; }
.fh-app .role-guide__section :is(p,li), .fh-app .sec-desc { font-size: var(--type-body); line-height: var(--leading-body); }
.fh-app :is(.role-work__meta,.eq-group-label) { font-size: var(--type-support); line-height: 1.5; }
.fh-app .role-picker>summary { font-weight: 600; }
.fh-app :is(.rq,.tag,.side-nav .badge) {
  font: 500 var(--type-meta)/1.4 var(--font-body); letter-spacing: 0; text-transform: none;
  white-space: normal; overflow-wrap: anywhere;
}
.fh-app .st { font: 500 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.fh-app .kpi { min-width: 0; }
.fh-app #dashboard-project-picker { max-width: 36rem; margin-bottom: 20px; }
.fh-app .dashboard-announcement { padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.fh-app .dashboard-announcement:first-child { padding-top: 0; }
.fh-app .dashboard-announcement h3 { margin: 0 0 6px; }
.fh-app .dashboard-announcement p { max-width: 68ch; margin: 6px 0 12px; white-space: pre-line; overflow-wrap: anywhere; }
.fh-app #student-pane-dashboard .card { box-shadow: none; border-color: var(--hairline) !important; }
.fh-app .response-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; align-items:end; }
.fh-app .response-filters > div { min-width:0; }
.fh-app .response-filters label { margin:0 0 6px; }
.fh-app .response-filters input[type=search] { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); }
@media(max-width:640px) { .fh-app .response-filters { grid-template-columns:1fr; } }
.fh-app .response-question { padding:20px 0; border-bottom:1px solid var(--hairline); }
.fh-app .response-question h3 { margin:0 0 12px; }
.fh-app .response-count { display:grid; grid-template-columns:minmax(0,2fr) minmax(40px,1fr) 3ch; gap:16px; align-items:center; margin:8px 0; }
.fh-app .response-count > span { overflow-wrap:anywhere; }
.fh-app .response-bar { height:6px; background:var(--hairline); }
.fh-app .response-bar > span { display:block; height:100%; background:var(--cab-blue); }
.fh-app .response-record { padding:16px 0; border-bottom:1px solid var(--hairline); }
.fh-app .response-record-head { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; justify-content:space-between; }
.fh-app .response-record-head .cab-caption { display:block; }
.fh-app .response-student { min-height:44px; padding:4px 0; background:none; border:0; color:var(--cab-blue); font:600 var(--type-body)/1.5 var(--font-body); text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.fh-app .response-student:hover { text-decoration:underline; text-underline-offset:3px; }
.fh-app .response-answers { border:0; margin:8px 0 0; padding:0; box-shadow:none; }
.fh-app .response-answers > summary { min-height:44px; padding:10px 0; font-size:var(--type-support); font-weight:500; cursor:pointer; }
.fh-app .response-answer { margin:16px 0; max-width:68ch; overflow-wrap:anywhere; }
.fh-app .response-answer p { margin:4px 0; white-space:pre-wrap; }
.fh-app :is(th,.table th) { font: 600 var(--type-meta)/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.fh-app :is(.st,.drow-tag,.k-value,td) { font-variant-numeric: tabular-nums; }
.fh-app .item-title { overflow-wrap: anywhere; }
@media (max-width:640px) {
  .fh-app :is(input,select,textarea) { font-size: 1rem; } /* No iOS focus zoom. */
}
@media print {
  /* Attendance's compact printed strip is not a dashboard. */
  .fh-app .att-kpis .k-value { font-size: 1rem; }
}
/* Course lifecycle cards use a full-width title and one quiet status. */
.fcard.course-form > button.fhead { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:start; }
.course-form .fhead .grow { grid-column:1 / -1; }
.course-form .fhead .st { grid-column:1; justify-self:start; }
.course-form .fhead .cab-caption { grid-column:2; grid-row:2; }
.course-form .course-form__note { grid-column:1 / -1; grid-row:3; text-align:left; }
.course-form__answers dt { margin-top:16px; font-weight:500; }
.course-form__answers dd { margin:4px 0 0; overflow-wrap:anywhere; }
#films-project-picker:has(select) { margin-bottom:20px; max-width:40rem; }
#activity-setup-method { margin-bottom:20px; max-width:40rem; }
#films-tabs .subtab, #ipane-acts .subtab { min-height:44px; }
[data-task-pane][hidden], #prod-list > [hidden], #student-pane-films [role="tabpanel"][hidden] { display:none !important; }