/* Layout for the account pages, on top of the v1 design tokens in
   design.css. Only additions — nothing in design.css is overridden, so the
   approved visual language stays the source of truth for colour and type. */

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--plum);
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.nav-link {
  color: var(--plum);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nav-link:hover { border-bottom-color: var(--rust); }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--plum);
  cursor: pointer;
}

.inline-form { display: inline; }

.hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: center;
  margin: 8px 0 28px;
}
.hero-art {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.lede { font-size: 1.08rem; color: var(--muted); }

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.panel.narrow { max-width: 520px; }
.muted-panel { background: var(--lilac); }
.muted { color: var(--muted); }

.stack { display: grid; gap: 14px; margin-top: 12px; }

.field { display: grid; gap: 4px; }
.field-label { font-weight: 600; font-size: .95rem; }
.field input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
}
.hint { font-size: .85rem; color: var(--muted); }
.check { display: flex; gap: 8px; align-items: flex-start; }

.issues {
  margin: 12px 0;
  padding: 12px 12px 12px 28px;
  background: var(--peach);
  border-radius: 12px;
}

.flash {
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
}
.flash-ok { background: var(--yellow); }
.flash-error { background: var(--peach); }
.flash-info { background: var(--lilac); }

.materials { list-style: none; padding: 0; display: grid; gap: 16px; }
.material {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: var(--paper);
}
.material h3 { margin: 0 0 6px; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.facts dt { font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }

/* NOT `.grid`. design.css already defines
     .grid { display: grid; grid-template-columns: repeat(3,1fr) }
   for its card rows, so a <table class="grid"> became a grid container:
   thead and tbody turned into grid items and were laid out SIDE BY SIDE,
   with the header row in one column and the data in the next. That is what
   made the operator table look shuffled and squeezed "published" into two
   lines. A table needs a name of its own. */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 22px;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table th { font-weight: 700; color: var(--muted); }

/* The state is one short word and should never be hyphenated apart. */
.admin-table .state-cell { white-space: nowrap; }

/* A wide table scrolls inside its own box rather than widening the page.
   The table keeps `display: table`, so the columns stay aligned. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .admin-table { min-width: 34rem; }

/* Visible to a screen reader, not on screen: each row's select needs a
   label, and the column header alone does not reach it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.button.small { padding: 4px 10px; font-size: .85rem; }

.site-footer {
  padding: 24px 16px 40px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

/* ------------------------------------------------------------------ legal
   Terms of Use and Privacy Notice: long reading text, so a readable measure
   rather than the full width, and the same panel scale as every other page. */
.panel.legal { max-width: 760px; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 10px; }
.legal code { font-size: .9em; white-space: nowrap; }
.legal-table { font-size: .92rem; }
@media (max-width: 520px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .legal-table td { border-bottom: 0; padding: 4px 0; }
  .legal-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: var(--muted);
    font-size: .85rem;
  }
}
.draft-banner {
  background: var(--peach);
  border: 1px dashed var(--rust);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.placeholder {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 3px;
  border-radius: 3px;
}

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { max-width: 320px; justify-self: center; }
}

/* ------------------------------------------------------------------ PT-WEB-02
   A scale for pages that are forms, not posters.

   design.css is the approved v1 look and it is written for a landing page:
   `h2` is clamp(2.2rem, 3.5vw, 3.4rem) and `.hero h1` is 3.25rem. Those are
   right above a hero illustration and wrong above an email field, where a
   heading three lines tall pushes the first input off a phone screen.

   So the hero keeps its size and everything inside a panel gets a smaller
   step. Same Georgia serif, same cream and plum - only the scale changes. */

.panel h1 {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

/* Forms and single-message pages sit in `.panel.narrow`, and want less again. */
.panel.narrow h1 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
  margin-bottom: 8px;
}

.panel h2 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 22px 0 10px;
}

.panel .lede { font-size: 1rem; }

/* --------------------------------------------------------------- materials */

.material {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.material-text { flex: 1 1 16rem; min-width: 0; }
.material h2 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  margin: 0 0 6px;
}
.material p { margin: 0 0 6px; }
.material .meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}
.material .button { flex: 0 0 auto; }

/* ----------------------------------------------------------- next steps */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 18px 0 0;
}

.footnote {
  font-size: 0.9rem;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------- keyboard access */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- narrow */

/* Long words must wrap rather than widen the page - but `anywhere` also
   feeds into a table's min-content width, which squeezed columns and broke
   `published` across two lines. `break-word` wraps without that side
   effect; the aggressive value is applied only where an address needs it. */
body { overflow-wrap: break-word; }
.facts dd, .admin-table td { overflow-wrap: anywhere; }
.admin-table .state-cell { overflow-wrap: normal; }
img, table { max-width: 100%; }

@media (max-width: 520px) {
  .wrap { padding: 16px 16px 48px; }
  .panel { padding: 18px 16px; }

  /* The account line is an email address; let it break instead of pushing. */
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 10px; }

  /* One tap target per row reads better than two squeezed side by side. */
  .material .button,
  .actions .button { width: 100%; text-align: center; }
  .material-text { flex: 1 1 100%; }

  /* The table itself is NOT turned into blocks any more: that detached
     thead from tbody and lost the column alignment. `.table-scroll` does
     the scrolling and the table stays a table. */
  .admin-table th,
  .admin-table td { padding: 8px; }
}

/* ------------------------------------------------------------------ hero

   design.css pins `.hero h1` to 3.25rem, which is 52px at every width - on a
   390px screen that is five or six lines before anything else is visible.
   The clamp below reaches the SAME 3.25rem from about 950px upward, so the
   approved desktop look is untouched, and eases down to ~33px on a phone. */

.hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.25rem);
  line-height: 1.12;
}