/* ============================================================================
   CLARENOR — APPLICATION STYLES
   ============================================================================
   Complements the existing marketing stylesheet (css/style.css) without replacing it.

   DESIGN INTENT, per the brief: CALM HUMAN IMMIGRATION GUIDANCE. The keywords are calm, competent, clear,
   human, serious, reassuring, guided, professional. What must be AVOIDED: AI gradients, futuristic visuals,
   generic SaaS dashboard hero, endless rounded cards, startup-tech aesthetic, fake government visual language,
   and American-flag cliché.

   So this sheet uses the existing brand tokens — navy, stone, slate, teal, and the Fraunces serif — and adds
   only what the application needs. The result should read as a serious professional service: restrained
   typography, generous reading space, clear paths, and visible progress. The logo is not used as a crutch here;
   the structure carries the identity.

   ACCESSIBILITY: focus states are always visible, no information is conveyed by colour alone, and every
   interactive element meets a 44px touch target. Nothing relies on hover.
   ============================================================================ */

/* ---- LAYOUT PRIMITIVES ---- */
.app-shell { background: var(--color-stone); min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1; padding: var(--space-xl) 0 var(--space-xl); }
.app-grid { display: grid; gap: var(--space-lg); }
/* A main column with a narrower side column. It MUST collapse to one column on a small screen — the previous
   version used an inline grid-template-columns style with no fallback, which is why case/intake/documents
   overflowed at 414px and 360px. `minmax(0, ...)` on every track is what allows a track to shrink below its
   content; without it a long word or a table forces the whole page wider than the viewport. */
.app-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .app-grid--sidebar { grid-template-columns: minmax(0, 1fr); } }
.app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .app-grid--2, .app-grid--3 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--space-md); }
.row { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }
.muted { color: var(--color-slate); }
.text-sm { font-size: var(--text-small); }
.text-caption { font-size: var(--text-caption); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.hidden { display: none !important; }
.center { text-align: center; }

/* ---- PANELS ---- */
.panel { background: var(--color-white); border: 1px solid var(--color-light-stone); border-radius: var(--radius-md); padding: var(--space-lg); }
.panel--flush { padding: 0; overflow: hidden; }
.panel--quiet { background: transparent; border: 1px dashed var(--color-light-stone); }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-light-stone);
}
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-head a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- PAGE HEADER: the customer must instantly know where they are ---- */
.app-header { background: var(--color-navy); color: var(--color-white); padding: var(--space-lg) 0; }
.app-header h1 { color: var(--color-white); margin: 0 0 var(--space-xs); font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.app-header .crumb { color: rgba(255,255,255,0.72); font-size: var(--text-small); }
.app-header .crumb a { color: rgba(255,255,255,0.85); }
.app-header .meta { color: rgba(255,255,255,0.8); font-size: var(--text-small); margin-top: var(--space-sm); }

/* ---- PROGRESS: the dashboard must answer "what stage am I at" ---- */
.progress-track { background: var(--color-light-stone); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-fill { background: var(--color-teal); height: 100%; border-radius: 999px; transition: width .3s ease; }
.progress-label { display: flex; justify-content: space-between; font-size: var(--text-small); color: var(--color-slate); margin-bottom: var(--space-xs); }

/* The staged path. Deliberately a list of stages with a state, not a decorative timeline, so a customer can read
   exactly where they are and what comes next. */
.stage-list { list-style: none; padding: 0; margin: 0; }
.stage {
  display: flex; gap: var(--space-md); padding: var(--space-sm) 0; align-items: flex-start;
  border-bottom: 1px solid var(--color-light-stone);
}
.stage:last-child { border-bottom: none; }
.stage-mark {
  flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: var(--weight-bold); border: 2px solid var(--color-light-stone);
  color: var(--color-slate); background: var(--color-white);
}
.stage--done .stage-mark { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.stage--current .stage-mark { border-color: var(--color-teal); color: var(--color-teal); }
.stage--current .stage-title { font-weight: var(--weight-semibold); }
.stage-title { font-size: var(--text-body); }
.stage-detail { font-size: var(--text-small); color: var(--color-slate); }

/* ---- STATUS BADGES: never colour alone — every badge carries a word ---- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px; border: 1px solid transparent; }
.status--draft { background: var(--color-light-stone); color: var(--color-slate); }
.status--progress { background: rgba(46,122,104,0.10); color: var(--color-teal); border-color: rgba(46,122,104,0.25); }
.status--action { background: rgba(180,83,9,0.10); color: #B45309; border-color: rgba(180,83,9,0.28); }
.status--waiting { background: rgba(15,42,67,0.07); color: var(--color-navy); border-color: rgba(15,42,67,0.18); }
.status--done { background: var(--color-navy); color: var(--color-white); }
.status--alert { background: rgba(153,27,27,0.10); color: #991B1B; border-color: rgba(153,27,27,0.3); }

/* ---- FORMS: labels always visible, errors always described in words ---- */
.field { margin-bottom: var(--space-lg); }
.field > label { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-xs); }
.field .help { display: block; font-size: var(--text-small); color: var(--color-slate); margin-bottom: var(--space-sm); }
.field .req { color: var(--color-teal); font-weight: var(--weight-bold); }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: var(--text-body); color: var(--color-navy);
  background: var(--color-white); border: 1px solid var(--color-light-stone); border-radius: var(--radius-sm);
  min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-slate) 50%), linear-gradient(135deg, var(--color-slate) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid rgba(46,122,104,0.35); outline-offset: 1px; border-color: var(--color-teal);
}
.field--error input, .field--error select, .field--error textarea { border-color: #991B1B; }
.field-error { display: block; color: #991B1B; font-size: var(--text-small); margin-top: var(--space-xs); font-weight: var(--weight-medium); }

.choices { display: grid; gap: var(--space-sm); }
.choice { display: flex; gap: var(--space-sm); align-items: flex-start; padding: 12px 14px; border: 1px solid var(--color-light-stone);
  border-radius: var(--radius-sm); background: var(--color-white); cursor: pointer; min-height: 48px; }
.choice:hover { border-color: var(--color-teal); }
.choice input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.choice--selected { border-color: var(--color-teal); background: rgba(46,122,104,0.05); }
.choice-label { font-size: var(--text-body); }

/* ---- SERVICE SELECTION: eight real services, each clearly its own path ---- */
.service-tile { display: flex; flex-direction: column; gap: var(--space-sm); background: var(--color-white); border: 1px solid var(--color-light-stone);
  border-radius: var(--radius-md); padding: var(--space-lg); text-decoration: none; color: inherit; height: 100%; }
.service-tile:hover { border-color: var(--color-teal); }
.service-tile h3 { margin: 0; font-size: 1.05rem; }
.service-tile .form-code { font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-teal); }
.service-tile .desc { font-size: var(--text-small); color: var(--color-slate); flex: 1; }
.service-tile .from { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--color-navy); }

/* ---- DOCUMENT CHECKLIST ---- */
.doc-item { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-light-stone); align-items: flex-start; }
.doc-item:last-child { border-bottom: none; }
.doc-icon { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: var(--weight-bold); border: 2px solid var(--color-light-stone); color: var(--color-slate); }
.doc-item--provided .doc-icon { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.doc-item--required .doc-icon { border-color: #B45309; color: #B45309; }
.doc-body { flex: 1; min-width: 0; }
.doc-name { font-weight: var(--weight-semibold); }
.doc-note { font-size: var(--text-small); color: var(--color-slate); }
.doc-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }

/* ---- CASE LIST ---- */
.case-card { background: var(--color-white); border: 1px solid var(--color-light-stone); border-radius: var(--radius-md); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; color: inherit; }
.case-card:hover { border-color: var(--color-teal); }
.case-ref { font-size: var(--text-caption); letter-spacing: 0.06em; color: var(--color-slate); font-weight: var(--weight-semibold); }
.case-card h3 { margin: 0; font-size: 1.05rem; }
.case-next { font-size: var(--text-small); color: var(--color-slate); }
.case-next strong { color: var(--color-navy); }

/* ---- PACKAGES: scope is stated, including what is NOT included ---- */
.pkg { background: var(--color-white); border: 1px solid var(--color-light-stone); border-radius: var(--radius-md);
  padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); height: 100%; }
.pkg--featured { border-color: var(--color-teal); border-width: 2px; }
.pkg h3 { margin: 0; }
.pkg .price { font-size: 1.65rem; font-weight: var(--weight-bold); color: var(--color-navy); }
.pkg .price small { display: block; font-size: var(--text-small); font-weight: var(--weight-normal); color: var(--color-slate); }
.pkg ul { margin: 0; padding-left: 1.1rem; font-size: var(--text-small); }
.pkg ul li { margin-bottom: 5px; }
.pkg .excl { font-size: var(--text-small); color: var(--color-slate); border-top: 1px solid var(--color-light-stone); padding-top: var(--space-sm); }
.pkg .excl strong { color: var(--color-navy); }

/* ---- LEGAL DISCLOSURE: present, readable, never hidden ---- */
.disclosure { background: rgba(15,42,67,0.04); border-left: 3px solid var(--color-navy); padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm); font-size: var(--text-small); color: var(--color-navy); }
.disclosure ul { margin: var(--space-sm) 0 0; padding-left: 1.1rem; }
.disclosure li { margin-bottom: 4px; }

/* ---- NOTICES ---- */
.notice { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); font-size: var(--text-small); border: 1px solid transparent; }
.notice--info { background: rgba(46,122,104,0.07); border-color: rgba(46,122,104,0.25); color: var(--color-navy); }
.notice--warn { background: rgba(180,83,9,0.08); border-color: rgba(180,83,9,0.3); color: #7C2D12; }
.notice--error { background: rgba(153,27,27,0.08); border-color: rgba(153,27,27,0.3); color: #7F1D1D; }
.notice--success { background: rgba(46,122,104,0.10); border-color: rgba(46,122,104,0.35); color: #14532D; }
.notice strong { display: block; margin-bottom: 4px; }

/* ---- STAFF SURFACE ---- */
.flag-row { display: flex; gap: var(--space-md); padding: var(--space-md); border-left: 3px solid var(--color-light-stone);
  background: var(--color-white); margin-bottom: var(--space-sm); border-radius: var(--radius-sm); }
.flag-row--urgent { border-left-color: #991B1B; background: rgba(153,27,27,0.04); }
.flag-row--referral { border-left-color: #B45309; background: rgba(180,83,9,0.05); }
.flag-row--review { border-left-color: var(--color-slate); }
.flag-label { font-weight: var(--weight-semibold); }
.flag-reason { font-size: var(--text-small); color: var(--color-slate); }

/* ---- TABLE (payments, documents) ---- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.table th { text-align: left; font-weight: var(--weight-semibold); color: var(--color-slate); text-transform: uppercase;
  font-size: var(--text-caption); letter-spacing: 0.04em; padding: var(--space-sm) var(--space-sm); border-bottom: 2px solid var(--color-light-stone); }
.table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-light-stone); vertical-align: top; }
.table-wrap { overflow-x: auto; }

/* ---- MOBILE: the intake must be strong on a phone ---- */
@media (max-width: 640px) {
  :root { --space-xl: 1.75rem; }
  .app-header { padding: var(--space-md) 0; }
  .panel { padding: var(--space-md); }
  .panel-head { flex-wrap: wrap; }
  .row { gap: var(--space-sm); }
  .row > .btn { width: 100%; justify-content: center; }
  .doc-actions .btn { flex: 1 1 auto; }
  .table { font-size: 0.8rem; }
}

/* ---- FOCUS VISIBILITY: keyboard users must always see where they are ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(46,122,104,0.5); outline-offset: 2px; border-radius: 3px;
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- PRINT: a filing checklist is something a customer may want on paper ---- */
@media print {
  .header, .footer, .btn, .doc-actions, [data-nav-auth] { display: none !important; }
  .panel { border: 1px solid #ccc; }
  body { background: #fff; }
}

/* ---- HOMEPAGE SERVICE STRIP ----
   Eight services, visible without scrolling. Deliberately plain rows rather than a card wall: the brief forbids
   "endless rounded cards", and a form number a visitor recognises is more useful than an icon. */
/* The hero on Clarenor is LIGHT (stone), not dark. An earlier version styled these chips as white-on-translucent
   which rendered as near-invisible pale text on a pale background — a clear contrast failure. These colours are
   chosen for the light background they actually sit on, and the text colour is the brand navy at full strength. */
.svc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 1.5rem; }
.svc-strip a {
  display: block; padding: 10px 12px; background: var(--color-white); border: 1px solid var(--color-light-stone);
  border-radius: var(--radius-sm); color: var(--color-navy); text-decoration: none; font-weight: 700;
  font-size: .95rem; min-height: 44px; line-height: 1.25;
}
.svc-strip a:hover { border-color: var(--color-teal); background: rgba(46,122,104,0.05); }
.svc-strip small { display: block; font-weight: 500; font-size: .72rem; color: var(--color-slate); margin-top: 2px; }
@media (max-width: 900px) { .svc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .svc-strip { grid-template-columns: 1fr; } }

/* ---- OVERFLOW SAFETY NETS ----
   Measured cause of the remaining horizontal overflow at 414px and 360px. Three separate things push a page
   wider than the viewport if nothing stops them: a long unbroken string (an email address, a reference code), a
   wide table, and a flex row that refuses to wrap. Each is handled explicitly rather than hoped about. */
html, body { max-width: 100%; overflow-x: hidden; }
.panel, .case-card, .pkg, .service-tile, .doc-body, .flag-row { min-width: 0; }
.app-grid > * { min-width: 0; }
/* A long token must break rather than widen its container. */
.case-ref, .mono, .notice, .doc-note, .case-next, .field .help, .text-sm, td, th { overflow-wrap: anywhere; word-break: break-word; }
/* Tables scroll inside their wrapper instead of stretching the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table { min-width: 0; }
/* Rows wrap on a phone rather than pushing content off-screen. */
@media (max-width: 640px) {
  .row { flex-wrap: wrap; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .doc-item { flex-wrap: wrap; }
  .flag-row { flex-wrap: wrap; }
  .progress-label { flex-wrap: wrap; gap: 2px; }
}
/* ---- TOUCH TARGETS: 44px minimum on anything interactive ----
   WCAG 2.2 (2.5.8) requires a 24px minimum and exempts links inside a sentence. These pages are used on a phone
   by people handling sensitive documents, so the target is the stricter 44px for every control that is NOT an
   inline link in prose. The e2e suite measures every interactive element at 1440/834/414/360. */
.btn, button, [role="button"], input[type="submit"], input[type="button"], .choice, select, .stage a {
  min-height: 44px;
}
.btn-sm { min-height: 44px; display: inline-flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
  min-height: 48px;
}
/* A checkbox or radio inside a .choice is a control in its own right but is deliberately small; the LABEL is the
   target and is 48px tall. Give the input a 24px hit area so it also satisfies the strict rule. */
.choice input[type="radio"], .choice input[type="checkbox"] { min-width: 24px; min-height: 24px; width: 24px; height: 24px; }
/* Icon-only or very short controls still need a real target. */
a.btn, button.btn { min-height: 44px; }

/* ---- navigation targets ----
   Header, footer and in-panel navigation are controls, not links inside a sentence, so they get a 44px target.
   A link INSIDE a paragraph is exempt under WCAG 2.2 and is deliberately left inline so prose stays readable. */
.header .nav-links a, .header .brand, .footer nav a, .nav-actions a, .panel-head a {
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer nav a { min-height: 32px; }

/* ---- HOMEPAGE REVIEW EXPLANATION ----
   Replaced a fabricated named Case Guide. This states the process truthfully, so it is styled as a short
   ordered explanation rather than a person's profile. */
.guide-preview__steps { list-style: none; padding: 0; margin: .75rem 0 0; }
.guide-preview__steps li { font-size: .85rem; color: var(--color-slate); line-height: 1.5; padding: .45rem 0; border-bottom: 1px solid var(--color-light-stone); }
.guide-preview__steps li:last-child { border-bottom: none; }
.guide-preview__steps strong { color: var(--color-navy); }
.guide-preview__note { font-size: .72rem; color: var(--color-slate); margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--color-light-stone); }
/* ---- SERVICE STRIP: must never render as run-together prose ----
   index.html previously did not load app.css, so these anchors inherited inline behaviour and ran into one
   paragraph. The rule below is duplicated defensively so the strip lays out correctly even if the wider
   stylesheet is unavailable. */
.svc-strip { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px !important; margin-top: 1.5rem !important; }
.svc-strip a { display: block !important; text-decoration: none; color: var(--color-navy) !important; background: var(--color-white) !important; border: 1px solid var(--color-light-stone) !important; }
@media (max-width: 900px) { .svc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 420px) { .svc-strip { grid-template-columns: 1fr !important; } }