/* Self-hosted, not @import from fonts.googleapis.com: the sitewide CSP
   (apps.core.middleware.ContentSecurityPolicyMiddleware — font-src 'self',
   no CDN exceptions anywhere in this codebase) blocks the cross-origin
   @import silently once this page is served through Django instead of
   as a static file with no policy applied. Same fix already applied
   once before in this codebase for the one inline <script> in base.html. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  src: url("../fonts/register/newsreader-normal.0a301b6df4c7.woff2") format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  src: url("../fonts/register/newsreader-italic.6d201901085f.woff2") format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  src: url("../fonts/register/sourcesans3-regular.fb6579a30024.woff2") format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/register/ibmplexmono-400.814fe1615d4d.woff2") format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/register/ibmplexmono-500.6708425c446b.woff2") format('woff2');
  font-display: swap;
}

/* Palette matched exactly to kuwaitmirror.com's own tokens (--ink/--paper
   naming there maps to --ground/--ink here) — the one deliberate exception
   is --accent, kept red per instruction rather than the homepage's navy. */
:root{
  --ground:#eeedeb;
  --surface:#e2e0dd;
  --surface-raised:#e2e0dd;
  --ink:#34414b;
  --ink-dim:#546878;
  --ink-faint:#778fa1;
  --line:rgba(52,65,75,0.11);
  --line-strong:rgba(52,65,75,0.22);
  --accent:#7C1F2C;
  --accent-ink:#F8F0EA;
  --gold:#546878;
  --good:#34414b;

  --display:'Newsreader', 'Iowan Old Style', 'Palatino Linotype', serif;
  --body:'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ background:var(--ground); }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Backstop against any one element (a long unbroken URL, a wide table,
     a nowrap badge) forcing the whole page wider than the viewport on a
     narrow screen — the actual causes are fixed at their own source
     below too, this is the safety net for whichever one gets missed. */
  overflow-x:hidden;
}
p{ margin:0; }
h1,h2,h3{ margin:0; text-wrap:balance; font-weight:500; }
a{ color:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }

/* ---------- Masthead ---------- */
.masthead{
  border-bottom:1px solid var(--line-strong);
  padding:22px 0;
}
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  text-decoration:none;
}
.brand-kicker{
  font-size:9px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.brand-logo{
  height:30px; width:auto; display:block;
}
.mast-links{ display:flex; gap:28px; font-size:13.5px; }
.mast-links a{ text-decoration:none; color:var(--ink-dim); }
.mast-links a:hover{ color:var(--ink); }
.mast-links .cta-link{ color:var(--accent); font-weight:600; }

/* ---------- Hero / title page ---------- */
/* Fills exactly the first screen (one scroll) rather than an arbitrary
   fixed padding — 100svh minus the masthead's own rendered height (74px
   at this width: 22px padding top+bottom plus the 30px logo), so the
   hero's own vertical centering makes the whole first view read as one
   deliberate screen instead of trailing off or overflowing awkwardly. */
.hero{
  min-height:calc(100svh - 74px); padding:56px 0; text-align:center;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.hero h1{
  font-size:56px; line-height:1.08; max-width:760px; margin:0 auto;
}
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero-dek{
  max-width:560px; margin:22px auto 0; color:var(--ink-dim);
  font-size:17px; line-height:1.65;
}
.hero-rule{
  width:64px; height:1px; background:var(--line-strong);
  margin:32px auto;
}
.hero-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.05em;
  text-transform:uppercase; padding:13px 26px; text-decoration:none;
  display:inline-block; border:1px solid var(--line-strong);
  color:var(--ink); transition:border-color .15s ease, background .15s ease;
}
.btn:hover{ border-color:var(--ink); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--ink); border-color:var(--ink); }

/* ---------- Search ---------- */
.search-panel{
  max-width:640px; margin:44px auto 0;
  border:1px solid var(--line-strong); background:var(--surface-raised);
}
/* The directory's own search bar isn't a centred hero widget — it's the
   page's primary tool, so it runs the full width of .wrap (edge to edge)
   rather than sitting narrow and centred like the homepage's version. */
.search-panel-wide{ max-width:none; margin:0 0 1px; }
.search-row{ display:flex; align-items:stretch; }
.search-row input{
  flex:1; border:none; background:none; font-family:var(--body);
  font-size:15px; color:var(--ink); padding:16px 18px; outline:none;
}
.search-row input::placeholder{ color:var(--ink-faint); }
.search-row button{
  flex:none; border:none; border-left:1px solid var(--line-strong);
  background:none; font-family:var(--mono); font-size:11.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);
  padding:0 22px; cursor:pointer;
}
.search-row button:hover{ color:var(--accent); }
.search-tags{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin-top:14px;
}
.search-tag{
  font-family:var(--mono); font-size:11px; color:var(--ink-faint);
  border:1px solid var(--line); padding:4px 10px; background:none;
  cursor:pointer; text-decoration:none; display:inline-block;
  transition:border-color .15s ease, color .15s ease;
}
.search-tag:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Section frame ---------- */
section{ padding:64px 0; border-top:1px solid var(--line); }
.section-head{ margin-bottom:36px; }
.section-head .kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.section-head h2{ font-family:var(--display); font-size:30px; }
.section-head p{ color:var(--ink-dim); max-width:560px; margin-top:10px; font-size:15px; }

/* ---------- Admission standard ---------- */
.standard-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.standard-item{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 20px;
}
.standard-num{
  font-family:var(--display); font-style:italic; font-size:26px;
  color:var(--accent); display:block; margin-bottom:10px;
}
.standard-item h3{ font-size:14.5px; font-weight:600; margin-bottom:6px; }
.standard-item p{ font-size:13px; color:var(--ink-dim); line-height:1.55; }

/* ---------- Register entries ---------- */
.register-list{ margin-top:0; }
.register-empty{
  padding:48px 0; text-align:center; border-bottom:1px solid var(--line);
}
.register-empty p{ color:var(--ink-dim); font-size:14.5px; margin-bottom:8px; }
.register-empty a{ color:var(--accent); font-weight:600; text-decoration:none; }
.register-empty a:hover{ text-decoration:underline; }
.no-results{ display:none; padding:48px 0; text-align:center; color:var(--ink-dim); font-size:14.5px; border-bottom:1px solid var(--line); }
.no-results.visible{ display:block; }
.entry{
  display:grid; grid-template-columns:52px 88px 1fr auto; gap:24px;
  grid-template-areas:"photo num info badges";
  align-items:start; padding:26px 0; border-bottom:1px solid var(--line);
}
.entry-photo{ grid-area:photo; }
.entry-num{ grid-area:num; }
.entry-info{ grid-area:info; min-width:0; }
.entry-badges{ grid-area:badges; }
.entry-photo{
  width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--surface-raised); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.entry-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.entry-photo-placeholder{ font-family:var(--display); font-size:19px; color:var(--ink-faint); }
.entry-num{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); padding-top:4px;
}
.entry-num span{ display:block; color:var(--gold); font-size:10px; letter-spacing:0.08em; margin-bottom:3px; }
.entry-name{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.entry-name h3{ font-family:var(--display); font-size:20px; }
.entry-field{
  font-size:14px; color:var(--accent); font-weight:600; margin-bottom:10px;
}
.entry-meta{
  display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-dim);
}
.entry-meta strong{ color:var(--ink); font-weight:600; }
.entry-badges{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.verified{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--good);
}
.verified svg{ width:14px; height:14px; }
.entry-link{
  font-family:var(--mono); font-size:11px; letter-spacing:0.03em;
  text-decoration:none; color:var(--ink-faint); border-bottom:1px solid var(--line-strong);
}
.entry-link:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Two paths ---------- */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); }
.path{ background:var(--surface); padding:36px; }
.path .kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.path h3{ font-family:var(--display); font-size:23px; margin-bottom:12px; }
.path p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin-bottom:20px; }
.path .price{ font-family:var(--mono); font-size:13px; color:var(--ink-faint); margin-bottom:20px; }
.path .price strong{ color:var(--ink); font-size:16px; }

/* ---------- Legal / prose pages (Terms, profile) ---------- */
.legal{ max-width:720px; }
.legal dl{ display:grid; gap:26px; }
.legal dt{ font-family:var(--display); font-size:17px; color:var(--ink); margin-bottom:6px; }
.legal dd{ margin:0; color:var(--ink-dim); font-size:14.5px; line-height:1.7; }

/* ---------- Member verification status (IELTS/professional-register
   style: a real membership number always shows its true status, never
   a bare not-found) ---------- */
.status-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line-strong); background:var(--surface); padding:18px 22px; margin:20px 0 32px;
}
.status-badge{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:2px; flex:none;
  display:inline-flex; align-items:center; gap:7px;
}
/* A small solid dot carries the same at-a-glance status signal an emoji
   would, without relying on emoji rendering/tone — colour comes from the
   badge's own text colour, so it never needs a separate rule per status. */
.status-badge::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none;
}
.status-badge.is-active{ background:var(--good); color:var(--accent-ink); }
.status-badge.is-renewal_pending{ background:var(--surface-raised); color:var(--accent); border:1px solid var(--accent); }
.status-badge.is-expired, .status-badge.is-suspended{ background:var(--accent); color:var(--accent-ink); }
.status-badge.is-withdrawn{ background:var(--ink-faint); color:var(--accent-ink); }
.status-banner .meta{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; }
.timeline-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:14px; }
.timeline-item dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.timeline-item dd{ font-size:14px; color:var(--ink); margin:0; }

/* ---------- Verification checklist (member profile) ---------- */
.check-list{ display:grid; gap:14px; }
.check-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px 16px; border:1px solid var(--line); background:var(--surface-raised);
}
.check-item > div:first-child{ min-width:0; }
.check-item-label{ font-size:14.5px; color:var(--ink); font-weight:600; }
.check-item-detail{ font-size:13px; color:var(--ink-dim); margin-top:3px; overflow-wrap:break-word; }
.check-item-result{
  flex:none; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--good); white-space:nowrap; padding-top:2px;
}
.check-item-result.is-pending{ color:var(--ink-faint); }
.last-reviewed{
  font-family:var(--mono); font-size:11px; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.04em; margin-top:16px;
}

/* Read-only facts on the member profile reuse the same .field-grid/.field
   boxed-panel language the application form already established, instead
   of a plain <dl> — a profile page and its own intake form should look
   like the same product, not two different eras of design. */
.detail-value{ font-size:14.5px; color:var(--ink); line-height:1.7; margin:0; }
.detail-value a{ color:var(--accent); font-weight:600; text-decoration:none; }
.detail-value a:hover{ text-decoration:underline; }

/* ---------- Fee schedule table (public profile) ---------- */
.fee-table-wrap{ margin-top:18px; overflow-x:auto; }
.fee-table{ width:100%; border-collapse:collapse; font-size:13px; }
.fee-table th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-faint); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
.fee-table td{ padding:8px 12px; border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; }
.fee-table tbody tr:last-child td{ border-bottom:none; }

/* ---------- Public profile legal disclaimer ---------- */
.profile-disclaimer{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-left:3px solid var(--accent); background:var(--surface);
  padding:11px 16px; margin-bottom:28px; font-size:12.5px; color:var(--ink-dim);
}
.profile-disclaimer strong{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); flex:none;
}
.profile-disclaimer a{ color:var(--ink-dim); text-decoration:underline; }
.profile-disclaimer a:hover{ color:var(--accent); }

/* ---------- Spam-safe contact block ---------- */
.contact-panel{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--line-strong); background:var(--surface); padding:18px 22px;
}
.contact-panel .meta{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.contact-panel-value{ font-family:var(--mono); font-size:14px; color:var(--ink); }

/* ---------- Application / profile field rows ---------- */
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.field .meta{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--ink-faint); text-transform:uppercase; }
/* Excludes checkbox/radio: a "Yes/In progress"-style radio sometimes sits
   inside a .field wrapper (for its label), and this box styling (100%
   width, padding, its own border) would otherwise fight the dedicated
   checkbox/radio rule below for the exact same element — same
   specificity either way, so which one "won" depended on source order
   rather than intent. Excluding them here is the one place that needs
   to change, rather than a per-instance override wherever a tickbox
   happens to land inside a .field. */
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select{
  font-family:var(--body); font-size:15px; color:var(--ink);
  border:1px solid var(--line-strong); background:var(--surface-raised);
  padding:11px 14px; outline:none; width:100%;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:70px; }

/* A rate needs to read as money at a glance, not as an ambiguous free-text
   box that might contain a number, a currency symbol, or a sentence — the
   prefix is a fixed, non-editable part of the control, not a placeholder. */
.currency-field{
  display:flex; align-items:stretch; border:1px solid var(--line-strong); background:var(--surface-raised);
}
.currency-field input{ border:none; background:none; flex:1; min-width:0; }
.currency-field input:focus{ border:none; }
.currency-field:focus-within{ border-color:var(--accent); }
.currency-prefix{
  display:flex; align-items:center; padding:0 14px;
  font-family:var(--mono); font-weight:600; font-size:15px; color:var(--ink);
  background:var(--surface); border-right:1px solid var(--line-strong);
}

/* Native <select>'s own chrome (arrow, padding) never matches a
   designed page — appearance:none strips it, the inline SVG chevron
   below replaces it, so a select reads as one more field in this same
   family rather than an obviously-unstyled OS control. */
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23546878' stroke-width='1.6'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:36px; cursor:pointer;
}

/* Checkboxes/radios: accent-color alone (broad modern support, zero
   markup changes) recolours the native control to match the page's own
   palette instead of leaving the OS-default blue — a small change that
   is most of why a form full of tickboxes reads as "part of this site"
   rather than a generic HTML form dropped onto it. */
/* accent-color alone still leaves the browser's own native shape showing
   through on several browsers/platforms — a fully custom appearance (same
   appearance:none technique the <select> chevron above already uses) is
   the only way every checkbox/radio on the site actually looks like part
   of this design rather than an OS control with a tint applied. One rule,
   used everywhere a tickbox appears — no per-instance overrides. */
input[type="checkbox"], input[type="radio"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:17px; height:17px; flex:none; margin:2px 0 0;
  border:1.5px solid var(--line-strong); background:var(--surface-raised);
  cursor:pointer; position:relative;
  transition:border-color .15s ease, background .15s ease;
}
input[type="checkbox"]{ border-radius:3px; }
input[type="radio"]{ border-radius:50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover{ border-color:var(--ink-faint); }
input[type="checkbox"]:checked, input[type="radio"]:checked{
  border-color:var(--accent); background:var(--accent);
}
/* Centred via left/top:50% + translate(-50%,-50%) rather than fixed
   pixel offsets — a fixed offset only lines up by coincidence for one
   exact box size, which is why the mark drifted off-centre wherever the
   box's actual rendered size differed even slightly (sub-pixel rounding,
   a browser's own checkbox baseline tweaks). Percentage + translate
   centres correctly regardless. */
input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:50%; top:44%; width:5px; height:9px;
  border:solid var(--accent-ink); border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg);
}
input[type="radio"]:checked::after{
  content:''; position:absolute; left:50%; top:50%; width:7px; height:7px;
  border-radius:50%; background:var(--accent-ink);
  transform:translate(-50%,-50%);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-dim); line-height:1.5; }
.checkbox-row label{ cursor:pointer; }
.checkbox-row a{ color:var(--accent); font-weight:600; text-decoration:none; }
.checkbox-row a:hover{ text-decoration:underline; }
.form-message{ padding:12px 16px; border:1px solid var(--line-strong); font-size:13.5px; margin-bottom:16px; }
.form-message.error{ color:var(--accent); border-color:var(--accent); }

.signature-pad-wrap{ border:1px solid var(--line-strong); background:#fff; display:inline-block; }
#signature-pad{ display:block; cursor:crosshair; touch-action:none; }

/* ---------- Application form: one bordered panel per section, matching
   the same boxed language .path/.standard-item already use elsewhere on
   the site, instead of one long undifferentiated list of fields. ---- */
.form-panel{
  border:1px solid var(--line-strong); background:var(--surface); padding:28px 30px; margin-top:1px;
}
.form-panel + .form-panel{ border-top:1px solid var(--line-strong); }
.form-panel-title{
  font-family:var(--display); font-size:19px; color:var(--ink); margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.form-panel-note{ font-size:13px; color:var(--ink-faint); margin:-8px 0 16px; }

/* Repeatable "add another" rows: each one its own compact card, not a
   full-width grid row competing for the same columns as the fields
   around it — the round "×" is a real remove *button*, not text. */
.repeat-row{
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); background:var(--surface-raised);
  padding:16px; margin-top:10px;
}
.repeat-row .field{ flex:1 1 160px; min-width:140px; }
.repeat-remove{
  flex:none; width:30px; height:30px; border:1px solid var(--line-strong); background:none;
  color:var(--ink-faint); font-size:16px; line-height:1; cursor:pointer; border-radius:50%;
}
.repeat-remove:hover{ color:var(--accent); border-color:var(--accent); }
.repeat-add{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--accent); background:none; border:1px dashed var(--line-strong); padding:10px 16px;
  cursor:pointer; margin-top:10px; width:100%; text-align:left;
}
.repeat-add:hover{ border-color:var(--accent); }

/* Native `hidden` loses to any later, more specific display rule
   (.field-grid/.repeat-row both set their own `display`) unless
   re-asserted here — without this, every "add another" row shows at
   once regardless of the +/× JS, since the class's `display:flex`
   simply overrides the attribute. */
[hidden]{ display:none !important; }

/* ---------- Back to top ---------- */
/* Exactly kuwaitmirror.com's own .back-to-top (same markup, same
   dimensions/shape, same colours via this file's own token names) —
   small, square, soft, not the heavier filled circle a generic "scroll
   up" button usually gets, so the Register reads as the same product
   family as the homepage rather than a differently-designed page. */
#scroll-to-top{
  position:fixed; bottom:18px; right:18px; z-index:20;
  width:30px; height:30px; border-radius:2px;
  border:1px solid var(--accent); background:var(--surface-raised); color:var(--accent);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
  opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .15s ease, color .15s ease;
}
#scroll-to-top.is-visible{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s, background .15s ease, color .15s ease;
}
#scroll-to-top:hover{ background:var(--accent); color:var(--accent-ink); }
#scroll-to-top svg{ width:13px; height:13px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line-strong); padding:20px 0; }
footer .wrap{
  text-align:center; color:var(--ink-faint); font-size:13.5px;
}
footer .wrap a{ color:inherit; text-decoration:none; }
footer a:hover{ color:var(--ink); }

@media (max-width:820px){
  .wrap{ padding:0 20px; }
  .hero h1{ font-size:38px; }
  /* The masthead stacks into two rows on mobile (brand centred above a
     bordered tabs row) — noticeably taller than the single desktop row,
     so the same viewport-height subtraction needs a bigger offset here
     to still land on one full screen instead of running past it. */
  .hero{ min-height:calc(100svh - 150px); }
  .standard-list{ grid-template-columns:repeat(2,1fr); }
  /* Photo + name read as one header row, Reg. No. and the verified
     badge/link each get their own full-width row below — the old plain
     grid-template-columns:1fr stacked all four grid children in raw DOM
     order (photo, then Reg. No. alone, then name/field/meta, then
     badges) with no visual grouping, reading as an unsorted list of
     fragments rather than one card. */
  .entry{
    grid-template-columns:52px 1fr; column-gap:14px; row-gap:8px;
    grid-template-areas:
      "photo info"
      "num   num"
      "badges badges";
  }
  .entry-badges{ align-items:flex-start; text-align:left; flex-direction:row; justify-content:space-between; }
  .paths{ grid-template-columns:1fr; }
  .field-grid{ grid-template-columns:1fr; }
  .checkbox-grid{ grid-template-columns:1fr; }
  .timeline-grid{ grid-template-columns:1fr; }
  .form-panel{ padding:22px 20px; }
  /* Same stacked, centred pattern the main KMI app's own header already
     uses on small screens (.kmi-header-top/.kmi-nav in terminal.css) —
     the brand centres above the tabs instead of the tabs disappearing
     entirely, which used to leave "Apply for Listing" unreachable from
     the header on mobile. */
  .masthead .wrap{ flex-direction:column; gap:14px; }
  .brand{ align-items:center; }
  .mast-links{
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px;
    /* .mast-links sits inside .wrap's own 20px horizontal padding, so a
       plain width:100% border only ever spans the padded content box,
       not the actual viewport — reading as a short, off-looking line
       rather than the full-width divider it's meant to be. Negative
       margins matching .wrap's mobile padding bleed the border itself
       out to the true screen edges; matching padding keeps the tab
       links themselves visually aligned exactly where they were. */
    width:auto; margin:0 -20px; padding:14px 20px 0;
    border-top:1px solid var(--line);
  }
}