/* Housing Court Filer — Typography.
   The one place the application's type is decided. Every value is taken from the approved /calendar
   screen, which is the reference for the whole system. Page stylesheets do not declare a font, and do
   not re-size, re-weight or re-case the roles below — they inherit them. The rules for changing this
   file are in docs/design/DESIGN-RULES.md; TypographyContractTests holds every stylesheet to them.

   Linked last in App.razor, so it wins any tie with a page stylesheet. Selectors stay at element or
   single-class weight on purpose: a component that really needs a different treatment (a coloured
   banner, a status pill) can still set its own colour without an !important war. */

/* Inter ships as two subsets. Without a unicode-range on each, the later face claims the whole family
   and inter-latin-ext.woff2 — which has no basic-Latin lowercase or digits — pushes every page onto
   the next family in the stack. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Families. The document face is only for on-screen previews of court papers, never for the app. */
  --hcf-font:Inter,"Avenir Next","Nunito Sans","Segoe UI",Arial,sans-serif;
  --hcf-font-document:"Times New Roman",Times,Georgia,serif;
  --hcf-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Scale. 1rem = 16px; the px figure is what the reference screen renders. */
  --hcf-text-page-title:1.55rem;   /* 24.8px  page <h1> */
  --hcf-text-modal-title:1.25rem;  /* 20px    dialog and drawer title */
  --hcf-text-card-title:1.12rem;   /* 17.9px  card and section <h2> */
  --hcf-text-panel-title:1.05rem;  /* 16.8px  state panel title */
  --hcf-text-body:1rem;            /* 16px    paragraphs, sub-headings, controls, buttons */
  --hcf-text-table:.88rem;         /* 14.1px  table cells, empty states, minor headings */
  --hcf-text-small:.82rem;         /* 13.1px  dialog subtitles, field notes, validation */
  --hcf-text-column:.78rem;        /* 12.5px  table column headers */
  --hcf-text-label:.76rem;         /* 12.2px  field labels, eyebrows */
  --hcf-text-caption:.75rem;       /* 12px    weekday letters, pill counts and the smallest captions */
  --hcf-text-metric:1.55rem;       /* 24.8px  KPI and summary figures: a number set at page-title size */

  --hcf-weight-regular:400;
  --hcf-weight-intake-field:600;
  --hcf-weight-bold:700;
  --hcf-weight-label:800;
  --hcf-leading-body:1.38;
  --hcf-leading-heading:1.22;
  --hcf-tracking-caps:.02em;
  --hcf-tracking-title:-.02em;
  --hcf-tracking-code:.25em;       /* one-time-code inputs, so each digit stands apart */
  /* Field labels are upper-cased like the calendar's filter labels. Set to none to go sentence case. */
  --hcf-label-case:uppercase;

  /* Text colours. Ink is content; navy is anything that describes content. */
  --hcf-text:var(--hcf-ink,#172941);
  --hcf-text-meta:var(--hcf-navy,#213d66);
  --hcf-text-link:var(--hcf-navy,#213d66);
  --hcf-text-crumb-link:#18385f;
  --hcf-text-success:#145c39;
  --hcf-text-danger:var(--hcf-danger,#c74343);
  --hcf-text-warning:#74550c;
  --hcf-text-inverse:#fff;
  --hcf-text-inverse-meta:#dce6f1;   /* secondary text on a navy or dark banner */
  --hcf-text-accent:var(--hcf-gold,#e4b64f); /* gold text, only on dark fills */
  --hcf-text-action:#0f172a;
}

/* ----------------------------------------------------------------------------------- document base */
html{font-size:16px;font-family:var(--hcf-font)}
body{font-family:var(--hcf-font);font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-regular);line-height:var(--hcf-leading-body);color:var(--hcf-text);-webkit-font-smoothing:antialiased}

/* Headings take no colour of their own, so one on a dark banner stays readable by inheriting its
   container's. Court-paper previews keep the typography they reproduce. */
:is(h1,h2,h3,h4,h5,h6):not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-family:inherit;font-weight:var(--hcf-weight-bold);line-height:var(--hcf-leading-heading);letter-spacing:normal;text-transform:none}
h1:not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-size:var(--hcf-text-page-title)}
h2:not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-size:var(--hcf-text-card-title)}
.portfolio-summary-report .status-report-header h2{font-size:var(--hcf-text-page-title)}
/* The receivable ledger names its client beside a smaller title, both at the card-title size. */
.receivable-ledger-report .status-report-header h2,.status-report-client{font-size:var(--hcf-text-card-title)}
.status-report-client{color:var(--hcf-text-meta)}
h3:not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-size:var(--hcf-text-body)}
:is(h4,h5,h6):not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-size:var(--hcf-text-table)}
strong,b{font-weight:var(--hcf-weight-bold)}
small{font-size:var(--hcf-text-small)}
p a:where(:not([class])){color:var(--hcf-text-link);font-weight:var(--hcf-weight-bold);text-decoration:none}
.hcf-document,.document-paper,.preview-paper,.printed-wording{font-family:var(--hcf-font-document)}

/* --------------------------------------------------------------------------------- page heading */
.page-breadcrumb{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-bold);color:var(--hcf-text-meta)}
.page-breadcrumb a{color:var(--hcf-text-crumb-link)}
.module-heading h1,.hcf-page-heading h1{font-size:var(--hcf-text-page-title);font-weight:var(--hcf-weight-bold);line-height:var(--hcf-leading-heading);color:var(--hcf-text)}
.module-heading p,.hcf-page-heading p{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-regular);color:var(--hcf-text-meta)}
.hcf-eyebrow{font-size:var(--hcf-text-label);font-weight:var(--hcf-weight-label);letter-spacing:var(--hcf-tracking-caps);text-transform:uppercase;color:var(--hcf-text-meta)}

/* ------------------------------------------------------------------------------ cards and panels */
.standard-card>header h2,.hcf-workspace-panel>h2:first-child,.hcf-component-lab>h2:first-child{font-size:var(--hcf-text-card-title);color:var(--hcf-text)}
.hcf-state h2{font-size:var(--hcf-text-panel-title);color:var(--hcf-text-meta)}
.mfa-method-copy strong{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-bold);color:var(--hcf-text)}
.mfa-method-copy>span{font-size:var(--hcf-text-small);font-weight:var(--hcf-weight-regular);color:var(--hcf-text-meta)}

/* Dialogs and drawers. Held at element weight so a card inside a dialog keeps its card title. */
:where(dialog,[role=dialog],[aria-modal=true],.hcf-drawer,.edit-drawer) header h2{font-size:var(--hcf-text-modal-title);letter-spacing:var(--hcf-tracking-title)}
:where(dialog,[role=dialog],[aria-modal=true],.hcf-drawer,.edit-drawer) header p{font-size:var(--hcf-text-small);color:var(--hcf-text-meta)}

/* ---------------------------------------------------------------------------------------- forms */
/* A field label is small, heavy, navy and upper-cased. A checkbox or radio label is a sentence the
   user reads, so it reads as body text. */
label{font-size:var(--hcf-text-label);font-weight:var(--hcf-weight-label);color:var(--hcf-text-meta);letter-spacing:var(--hcf-tracking-caps);text-transform:var(--hcf-label-case)}
label:has(input[type=checkbox],input[type=radio]),input[type=checkbox]+label,input[type=radio]+label,.hcf-checkbox{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-regular);color:var(--hcf-text);letter-spacing:normal;text-transform:none}
/* What a user types or picks is content, whatever label it sits in. */
input,select,textarea{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-regular);color:var(--hcf-text);letter-spacing:normal;text-transform:none}
/* Intake values need more presence than regular body copy without inheriting the 800-weight label. */
.intake-page :is(input,select,textarea),.hcf-intake-modal :is(input,select,textarea){font-weight:var(--hcf-weight-intake-field)}
label :is(small,.date-field,.hcf-field-note,.validation-message){font-weight:var(--hcf-weight-regular);letter-spacing:normal;text-transform:none}
.hcf-field-note{font-size:var(--hcf-text-small);line-height:1.35;color:var(--hcf-text-meta)}
.validation-message{font-size:var(--hcf-text-small);color:var(--hcf-text-danger)}

/* The shared form date picker uses the /calendar mini-calendar type roles. */
.datepicker{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-regular);color:var(--hcf-text);letter-spacing:normal;text-transform:none}
.datepicker .dp-nav,.datepicker .dp-action{color:var(--hcf-text-meta)}
.datepicker .dp-title{font-size:var(--hcf-text-card-title);font-weight:var(--hcf-weight-bold);color:var(--hcf-text)}
.datepicker .dp-weekdays span{font-size:var(--hcf-text-caption);font-weight:var(--hcf-weight-regular);color:var(--hcf-text-meta)}
.datepicker .dp-cell{font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-regular);color:var(--hcf-text)}
.datepicker .dp-grid.dp-days .dp-cell.today,.datepicker .dp-grid.dp-months .dp-cell.selected{color:var(--hcf-text-inverse)}
.datepicker .dp-cell:disabled{color:var(--hcf-text-meta)}
.datepicker .dp-action{font-weight:var(--hcf-weight-bold)}

/* -------------------------------------------------------------------------------------- buttons */
/* Element-qualified so a page's blanket `.x-page button{font:inherit}` reset cannot undo it. */
:is(button,a,span,label):is(.hcf-button,.hcf-button-secondary,.hcf-button-danger){font-size:var(--hcf-text-body);font-weight:var(--hcf-weight-bold);letter-spacing:normal;text-transform:none}
:is(button,a,span,label).hcf-button-compact{font-size:var(--hcf-text-table)}

/* ----------------------------------------------------------------------------------------- tabs */
/* Every tab bar carries .hcf-tabs (its shape is in components.css). The label reads at table size and one
   weight, so nothing shifts when a tab is chosen; the chosen tab is white on its navy fill. Held at
   two-class weight so a page's blanket `.x-page button{font:inherit}` reset cannot undo it. */
.hcf-tabs :is(button,a,[role=tab]){font-size:var(--hcf-text-table);font-weight:var(--hcf-weight-bold);letter-spacing:normal;text-transform:none;color:var(--hcf-text-meta)}
.hcf-tabs :is(.active,[aria-selected=true],[aria-current=page]){color:var(--hcf-text-inverse)}

/* --------------------------------------------------------------------------------------- tables */
th:not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-size:var(--hcf-text-column);font-weight:var(--hcf-weight-bold);color:var(--hcf-text-meta);letter-spacing:var(--hcf-tracking-caps);text-transform:uppercase}
td:not(:where(.hcf-document,.document-paper,.preview-paper,.printed-wording,.docx-preview,.docx-preview-wrapper,.preview-document) *){font-size:var(--hcf-text-table);color:var(--hcf-text)}
.hcf-table th{white-space:nowrap}
td a:where(:not(.hcf-button,.hcf-button-secondary)){color:var(--hcf-text-link);font-weight:var(--hcf-weight-bold);text-decoration:none}
.empty-table,.hcf-empty{font-size:var(--hcf-text-table);color:var(--hcf-text-meta);text-align:center}

/* Paper reports keep column labels compact and preserve room for the recorded values. */
@media print {
    .portfolio-summary-report table th{font-size:8pt;letter-spacing:normal;text-transform:none}
    .portfolio-summary-report table td{font-size:9pt}
}