/* ==========================================================
   DataShield — design system (Step 2)
   Big text, big buttons, high contrast, one accent color.
   Mobile-first: phone layout is the default, wider screens
   just get more breathing room.
   ========================================================== */

/* ---------- Colors and sizes (change them here, in one place) ---------- */
:root {
  --blue: #1E5EFF;        /* shield blue — the ONE accent color */
  --blue-dark: #1747C7;   /* darker blue for hover/pressed */
  --text: #111111;        /* almost-black text */
  --text-soft: #3A3A3A;   /* secondary text — still high contrast */
  --bg: #FFFFFF;          /* page background */
  --panel: #F4F6FA;       /* light gray for cards */
  --line: #C9CFDA;        /* borders */
  --danger: #B3261E;      /* "high" severity red (passes contrast) */
  --warn: #8A5A00;        /* "medium" severity amber (passes contrast) */
  --ok: #1B6E2D;          /* "low"/removed green (passes contrast) */
  --radius: 14px;
  --max-width: 720px;
  --tap: 56px;            /* smallest tap target: thumb-sized */
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;               /* base size: never smaller than 18px */
  -webkit-text-size-adjust: 100%; /* stop phones from shrinking text */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  overflow-wrap: break-word;     /* long words/links wrap instead of overflowing */
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* ---------- Page layout ---------- */
main {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* ---------- Text ---------- */
h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 {
  font-size: 2rem;     /* 36px */
  color: var(--blue);
}

h2 {
  font-size: 1.5rem;   /* 27px */
}

h3 {
  font-size: 1.2rem;   /* about 22px */
}

p {
  margin: 0 0 1em;
}

small,
.note {
  font-size: 1rem;     /* "small" text is still 18px */
  color: var(--text-soft);
}

a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Buttons ---------- */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);        /* at least 56px tall */
  min-width: var(--tap);
  padding: 12px 24px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: #FFFFFF;
  cursor: pointer;
}

button:hover,
.btn:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

/* Outline style for less important buttons (e.g. "Back") */
.btn-secondary {
  background: var(--bg);
  color: var(--blue-dark);
}

.btn-secondary:hover {
  background: var(--panel);
  color: var(--blue-dark);
}

/* Full-width button — the big main action on a screen */
.btn-block {
  display: flex;
  width: 100%;
}

button:disabled,
.btn[aria-disabled="true"] {
  background: #E4E7EE;   /* light gray = "not ready yet" */
  border-color: #9AA3B2;
  color: #3A3F4A;        /* dark enough to still read easily */
  cursor: not-allowed;
}

/* Clear focus ring so keyboard users always see where they are */
:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Forms ---------- */
label {
  display: block;
  font-weight: 700;
  margin: 16px 0 6px;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 10px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
}

/* Big, easy checkbox */
input[type="checkbox"] {
  display: inline-block;
  width: 28px;
  height: 28px;
  min-height: 0;
  margin: 0 12px 0 0;
  vertical-align: middle;
  accent-color: var(--blue);
}

.error {
  color: var(--danger);
  font-weight: 700;
}

/* ---------- Cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 16px;
}

/* ---------- Severity / status badges ---------- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--text-soft);
}

.badge-high { background: var(--danger); }
.badge-med  { background: var(--warn); }
.badge-low  { background: var(--ok); }

/* ---------- Footer ---------- */
footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
}

/* ---------- Wider screens (tablets and computers) ---------- */
@media (min-width: 600px) {
  main {
    padding: 40px 24px 64px;
  }

  h1 {
    font-size: 2.4rem;
  }
}

/* ---------- Home screen (Step 3) ---------- */
.tagline {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 24px;
}

.home-points {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}

.home-points li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
}

/* Blue check mark in front of each point */
.home-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: 700;
  font-size: 1.3rem;
}

/* ---------- Scan screen (Step 4) ---------- */
/* Anything marked hidden stays hidden, even if another rule says display. */
[hidden] {
  display: none !important;
}

#scan-form button {
  margin-top: 24px;
}

#scan-error {
  margin: 16px 0 0;
}

/* ---------- Results screen (Step 6) ---------- */
.score-box {
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 24px;
}

.score-label {
  font-weight: 700;
  margin: 0;
}

.score {
  font-size: 1.3rem;
  margin: 4px 0 8px;
}

#score-number {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--danger);
}

.broker-card h3 {
  margin: 0 0 8px;
}

.broker-card .badge {
  margin: 0 0 12px;
}

.exposed {
  margin: 0 0 16px;
  padding-left: 24px;
}

.exposed li {
  margin-bottom: 4px;
}

#remove-me {
  margin-top: 8px;
}

/* ---------- Guided scan (Step 24) ---------- */
/* This is me / Not me: two big buttons side by side. */
.answer-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
}

.answer-row .toggle {
  flex: 1;
  padding: 12px 8px;
}

.proof label {
  margin-top: 12px;
}

.proof .error {
  margin: 8px 0 0;
}

/* ---------- Authorization screen (Step 7) ---------- */
.consent-text p:last-child {
  margin-bottom: 0;
}

/* The whole row is clickable and thumb-sized, not just the small box. */
.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  margin: 16px 0 24px;
  cursor: pointer;
}

.check-row input {
  flex: none;
  margin: 0;
}

/* ---------- California DROP step (Step 18) ---------- */
.steps {
  padding-left: 40px;
}

.steps li {
  margin-bottom: 12px;
}

.steps li:last-child {
  margin-bottom: 0;
}

#open-drop {
  margin-bottom: 16px;
}

/* ---------- Pricing screen (Step 8) ---------- */
.billing-toggle {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
}

/* Not chosen: white with blue text. Chosen: solid blue. */
.toggle {
  flex: 1;
  background: var(--bg);
  color: var(--blue-dark);
}

.toggle:hover {
  background: var(--panel);
  color: var(--blue-dark);
}

.toggle[aria-pressed='true'],
.toggle[aria-pressed='true']:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--bg);
}

.plans {
  margin: 0 0 24px;
}

.plan h3 {
  margin-bottom: 4px;
}

.price {
  margin: 0;
}

.price .amount {
  font-size: 1.6rem;
  font-weight: 800;
}

/* Side by side on wider screens. */
@media (min-width: 600px) {
  .plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .plans .card {
    margin: 0;
  }
}

/* ---------- Removal dashboard (Step 9) ---------- */
#dash-score {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--danger);
}

#dash-score.all-clear {
  color: var(--ok);
}

.removal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.removal-row h3 {
  margin: 0 0 8px;
}

.removal-row .note {
  margin: 8px 0 0;
}

#open-dashboard {
  margin-bottom: 16px;
}

/* ---------- Removal steps on the dashboard (Step 25) ---------- */
.removal-row .needs {
  margin: 16px 0 8px;
}

.removal-row .steps {
  margin: 0 0 16px;
}

.removal-row .btn-block {
  margin-top: 12px;
}

.check-again {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 8px;
}

#dash-empty button {
  margin-top: 8px;
}

/* ---------- Check-again reminders (Step 30) ---------- */
/* Yellow means: past the 45 days, time to check that site again. */
.due-late {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-left: 6px solid var(--warn);
  border-radius: 8px;
  background: #FFF4D6;
  color: var(--text);
  text-align: left;
}

.removal-row.late {
  border: 2px solid var(--warn);
}

/* ---------- California DROP ID (Step 19) ---------- */
.drop-box h3 {
  margin-bottom: 8px;
}

#drop-form button,
#drop-check {
  margin-top: 16px;
}

#drop-change {
  margin-top: 12px;
}

/* ---------- Sign-in (Step 22) ---------- */
.account-box {
  margin-top: 32px;
}

.account-box p {
  margin-bottom: 12px;
}

#email-form button,
#check-code {
  margin-top: 16px;
}

#new-code {
  margin-top: 12px;
}

/* ---------- Delete my account (Step 29) ---------- */
/* Red outline buttons: only for actions that delete things. */
.btn-danger {
  background: var(--bg);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover {
  background: #FDECEA;
  border-color: var(--danger);
  color: var(--danger);
}

/* The Are you sure? box. */
.delete-confirm {
  margin-top: 12px;
  padding: 16px;
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  background: var(--bg);
}

#delete-start,
#delete-no {
  margin-top: 12px;
}

/* ---------- My permission (Step 33) ---------- */
.permission-box h3 {
  margin-bottom: 8px;
}

#permission-withdraw,
#permission-give,
#withdraw-no {
  margin-top: 12px;
}

/* ---------- My removal record (Step 32) ---------- */
/* On paper or in a saved PDF, only the record shows: plain and easy to read. */
.record-table {
  width: 100%;
  margin: 0 0 12pt;
  border-collapse: collapse;
  font-size: 10pt;
}

.record-table th,
.record-table td {
  padding: 6px 8px;
  border: 1px solid #000;
  text-align: left;
  vertical-align: top;
}

.record-table td:last-child {
  overflow-wrap: anywhere;
}

@media print {
  body.print-record > * {
    display: none !important;
  }

  body.print-record > #record {
    display: block !important;
    font-size: 11pt;
  }

  #record h1 {
    font-size: 20pt;
  }
}

/* ---------- Back button (Step 10) ---------- */
.back-button {
  margin: 0 0 24px;
}

/* ---------- Legal pages + footer (Step 12) ---------- */
.draft-banner {
  background: var(--warn);
  color: var(--bg);
  font-weight: 800;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius);
}

.legal h1 {
  margin-top: 24px;
}

.legal h2 {
  margin-top: 32px;
}

/* Footer links: big enough to tap easily. */
footer a {
  display: inline-block;
  padding: 14px 4px;
}

footer p {
  margin: 0;
}

/* ---------- Senior-friendly (Step 16) ---------- */
/* Headings get focus when a screen opens; only show the ring for keyboard users. */
h1:focus:not(:focus-visible),
h2:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Pick-your-size plans (Step 45) ---------- */
#seat-count,
#seat-pick {
  margin-bottom: 8px;
}

.people-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.people-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.people-email {
  flex: 1 1 12em;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.people-status {
  color: var(--text-soft);
}

#invite-send,
#seat-save {
  margin-top: 12px;
}