@import url("./design-tokens.css");
/* Foundations shared by every customer and staff page. The import also supports
   existing rendered pages while a browser refreshes the new base template. */
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--green); outline-offset:3px; box-shadow:0 0 0 3px var(--gold); }
h1,h2,h3,h4 { font-family:var(--display); color:var(--green); }
h3 { font-size:19px; }
.shell { width:min(100% - 48px, 1080px); margin-inline:auto; }
.site-header { border-bottom:3px solid var(--gold); background:var(--white); }
.header-inner { min-height:76px; padding-block:12px; flex-wrap:wrap; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { display:block; height:44px; width:auto; }
.main-content { padding-block:44px 72px; }
h1,h2,p { margin:0; }
h3 { line-height:1.35; letter-spacing:-.02em; }
h1 { font-family:var(--display); font-size:clamp(30px,4.5vw,44px); font-weight:800; letter-spacing:-.02em; line-height:1.14; overflow-wrap:anywhere; }
h2 { font-size:23px; font-weight:700; line-height:1.35; margin-bottom:12px; overflow-wrap:anywhere; }
p+p { margin-top:12px; }
.eyebrow { font-size:15px; font-weight:700; letter-spacing:0;  color:var(--green); margin-bottom:12px; }
.lead { margin-top:16px; font-size:19px; color:var(--muted); }
.intro { margin-bottom:28px; }
.panel { min-width:0; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); margin-block:24px; box-shadow:var(--shadow); }
.notice { padding:20px 24px; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:8px; background:var(--green-t); margin-block:24px; }
.form-panel { max-width:640px; }
.field { margin-block:22px; }
label { display:block; font-weight:650; margin-bottom:7px; }
.required,.hint,.form-note,.muted { font-size:15px; color:var(--muted); }
.required { font-weight:400; }
input:not([type=hidden]), select, textarea { min-width:0; max-width:100%; width:100%; min-height:48px; border:1px solid var(--line-2); border-radius:8px; padding:10px 12px; font:inherit; font-size:17px; background:var(--white); color:var(--ink); }
.hint { margin-top:7px; }
.form-note { margin-bottom:24px; }
.button { border:1px solid var(--green); border-radius:8px; padding:13px 22px; background:var(--green); color:var(--white); box-shadow:inset 0 -3px 0 var(--gold); font:600 17px/1.4 var(--body); cursor:pointer; min-height:48px; }
.button:hover { background:var(--green-2); }
.button:disabled { cursor:not-allowed; opacity:.65; }
.button.secondary { background:var(--white); border-color:var(--line-2); color:var(--ink); }
.button.secondary:hover { background:var(--paper); }
.text-button { min-height:48px; min-width:48px; border:0; background:transparent; color:var(--green); text-decoration:underline; text-underline-offset:3px; padding:12px 8px; font:inherit; cursor:pointer; }
.error { border:1px solid #A32D2A; border-left-width:4px; background:#FBEFEE; color:#7F1F1D; padding:14px; margin-top:18px; }
.details { margin:0; }
.details>div { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,1fr); gap:12px; padding-block:12px; border-bottom:1px solid var(--line); }
.details>div:last-child { border-bottom:0; }
dt { color:var(--muted); }
dd { margin:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.reference { font-family:ui-monospace,monospace; font-size:15px; }
.status { display:inline-block; max-width:100%; padding:3px 10px; border:1px solid var(--line); border-radius:4px; background:var(--paper); font-size:15px; font-weight:650; overflow-wrap:anywhere; }
.support { margin-top:32px; }
.case-list { list-style:none; padding:0; margin:0; }
.site-footer { max-width:none; width:100%; margin:0; padding:28px max(24px,calc((100% - 1080px)/2)) 40px; background:var(--deep); color:var(--green-light); font-size:16px; }
.site-footer a { color:#fff; }
.site-footer .footer-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.site-footer .legal { border-top:1px solid rgba(226,181,102,.35); margin-top:16px; padding-top:16px; max-width:60em; }
.site-footer .muted { color:var(--green-light); font-size:15px; }
.site-footer :focus-visible { outline-color:var(--gold-light); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 24px; margin-block:12px; }
.skip-link { position:fixed; z-index:100; top:8px; left:16px; padding:12px 16px; background:var(--white); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
@media(max-width:520px) { .shell { width:calc(100% - 32px); } .main-content { padding-top:32px; } .panel { padding:20px; } .notice { padding:18px; } .details>div { grid-template-columns:1fr; gap:3px; } .button { width:100%; } }

textarea { resize:vertical; }

/* Phone use: readable form text, wrapping identifiers and comfortable actions. */
.main-content p, .notice p, label, .site-footer p { overflow-wrap:anywhere; }
.site-footer nav a, nav[aria-label="Queue pagination"] a { display:inline-flex; align-items:center; min-height:44px; padding-block:8px; overflow-wrap:anywhere; }
nav[aria-label="Queue pagination"] a { padding-inline:16px; border:1px solid var(--line); border-radius:4px; background:var(--white); }
.site-footer nav { gap:4px 24px; }
.case-list .panel>form { margin-top:18px; padding-top:8px; border-top:1px solid var(--line); }
.button { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:520px) {
  .header-inner { gap:8px 16px; }
  .brand { font-size:21px; }
  .notice { margin-block:18px; }
  .main-content { padding-bottom:40px; }
  .case-list .panel { margin-block:18px; }
  .case-list .details>div { padding-block:9px; }
  .case-list .field { margin-block:18px; }
  nav[aria-label="Queue pagination"] a { justify-content:center; width:100%; }
}

.review-action { margin-top:18px; }
.mfa-setup-key { overflow-wrap:anywhere; word-break:break-all; }
a.button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
input[type=checkbox], input[type=radio] { width:24px; min-height:24px; height:24px; margin:0 10px 0 0; vertical-align:middle; accent-color:var(--green); }
label:has(input[type=checkbox]), label:has(input[type=radio]) { min-height:48px; padding-block:12px; cursor:pointer; }

/* Common navigation and disclosure rhythm; page layouts reuse these controls. */
.back-link { display:inline-flex; align-items:center; min-height:44px; margin-bottom:16px; font-size:15px; font-weight:600; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.page-heading { max-width:740px; margin-bottom:28px; }
.page-heading .lead { font-size:18px; max-width:650px; }
summary { cursor:pointer; min-height:44px; padding-block:10px; font-weight:650; }
summary::marker { color:var(--green); }
details[open]>summary { margin-bottom:12px; }
fieldset { min-width:0; }
button,input,textarea,select { font-family:var(--body); }
input[type=file] { padding:12px; background:var(--white); }
input[type=file]::file-selector-button { min-height:42px; margin-right:12px; border:1px solid var(--line-2); border-radius:7px; padding:8px 12px; background:var(--paper); color:var(--ink); font:600 14px var(--body); cursor:pointer; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

@media(max-width:520px) { .site-footer { width:100%; margin:0; padding-inline:16px; } }