/*
 * Agevow — the admin screens (ROADMAP §S-ADMIN, §S-RECORD, §S-DESIGN): WordPress's own
 * look (its buttons, tabs, tables), cards, 44 px targets, logical properties so a
 * right-to-left language mirrors on its own; tables become cards on a phone and
 * nothing scrolls sideways at 320 px. Plain CSS, no build step, nothing minified,
 * nothing loaded from elsewhere. Loaded on our own screens only.
 */
.agevow-wrap {
  max-inline-size: 72rem;
}

/* `hidden` loses to any display rule (a flex line, a 44 px button on touch): the
   screens hide and show their parts with it, so it always wins here. */
.agevow-wrap [hidden] {
  display: none !important;
}

.agevow-wrap .agevow-lead {
  font-size: 1rem;
  line-height: 1.5;
  max-inline-size: 40rem;
}

.agevow-card {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 8px;
  padding-block: 16px;
  padding-inline: 20px;
  margin-block-start: 16px;
  box-sizing: border-box;
}

.agevow-card h2 {
  margin-block-start: 0;
}

.agevow-tabs {
  margin-block-end: 8px;
}

/* ── the status line ───────────────────────────────────────────────────── */
.agevow-status {
  font-size: 15px;
  line-height: 1.5;
  max-inline-size: 60rem;
  padding-block: 10px;
  padding-inline: 14px;
  border-inline-start: 4px solid #8c8f94;
  background: #fff;
}

.agevow-status.is-on {
  border-inline-start-color: #00a32a;
}

/* ── the first run and the gate's settings (P10) ───────────────────────── */
.agevow-firstrun {
  border-color: var(--wp-admin-theme-color, #2271b1);
}

.agevow-q {
  margin-block: 0 20px;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.agevow-q legend {
  font-size: 15px;
  font-weight: 600;
  margin-block-end: 8px;
  padding: 0;
}

.agevow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--wp-admin-theme-color, #2271b1);
  color: #fff;
  font-size: 14px;
  margin-inline-end: 6px;
}

.agevow-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 8px;
}

.agevow-choice {
  --agevow-line: 20px;
  --agevow-box: 1rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;
  gap: 4px 8px;
  margin: 0;
  min-block-size: 44px;
  padding-block: 8px;
  padding-inline: 12px;
  border: 1px solid #c3c4c7;
  border-radius: 6px;
  box-sizing: border-box;
}

.agevow-choice:focus-within {
  border-color: var(--wp-admin-theme-color, #2271b1);
  box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
}

/* The words grow from nothing beside the radio and wrap there; grown from their whole
   width, a long choice dropped under its own radio ("Only the pages and categories I
   choose" at 1440 px, 2026-10-19). The hint still takes its own line. */
.agevow-choice label {
  font-size: 14px;
  line-height: var(--agevow-line);
  flex: 1 1 0;
}

/* The radio (or tick box) sits in the middle of the words' FIRST line, also when they
   wrap to two lines or more (a page whose title is one long word): WordPress's own box
   is 16 px, 25 px from 782 px down. */
.agevow-wrap .agevow-choice input[type="radio"],
.agevow-wrap .agevow-choice input[type="checkbox"] {
  margin-block: calc((var(--agevow-line) - var(--agevow-box)) / 2) 0;
}

@media (max-width: 782px) {
  .agevow-choice {
    --agevow-box: 1.5625rem;
  }
}

/* The whole box is the target: the label stretches over it. */
.agevow-choice label::after {
  content: "";
  position: absolute;
  inset: 0;
}

.agevow-choice .agevow-hint {
  flex-basis: 100%;
  color: #50575e;
  font-size: 13px;
}

.agevow-suggest {
  margin-block: 10px;
  padding-block: 8px;
  padding-inline: 12px;
  background: #f0f6fc;
  border-inline-start: 4px solid var(--wp-admin-theme-color, #2271b1);
  max-inline-size: 60ch;
}

.agevow-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 8px;
}

.agevow-field label,
.agevow-label {
  font-weight: 600;
  margin: 0;
}

.agevow-field select,
.agevow-field input[type="text"],
.agevow-field input[type="url"],
.agevow-field input[type="number"],
.agevow-field input[type="date"] {
  min-block-size: 40px;
  max-inline-size: 100%;
}

.agevow-wide input {
  inline-size: 36rem;
}

.agevow-field select {
  inline-size: 8rem;
}

.agevow-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  margin: 0;
}

.agevow-switch input[type="checkbox"] {
  margin: 0;
}

.agevow-ids {
  margin-block: 8px;
  padding: 0;
  border: 0;
  max-block-size: 16rem;
  overflow-y: auto;
  min-inline-size: 0;
}

.agevow-ids legend {
  font-weight: 600;
  margin-block-end: 6px;
}

.agevow-ids .agevow-choice {
  border: 0;
  padding-block: 4px;
  padding-inline: 0;
}

.agevow-mark-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

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

.agevow-actions .button {
  min-block-size: 44px;
}

.agevow-saved.is-ok {
  color: #007017;
}

.agevow-saved.is-bad,
.agevow-error,
.agevow-empty.is-bad {
  color: #b32d2e;
}

.agevow-warning {
  color: #8a4b00;
}

/* ── the preview: the gate's own card, at a desktop's or a phone's width ── */
.agevow-preview {
  margin-block: 16px;
}

.agevow-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agevow-preview-head h3 {
  margin: 0;
}

.agevow-preview-sizes .button {
  min-block-size: 36px;
}

.agevow-preview-sizes .button[aria-pressed="true"] {
  background: #f0f0f1;
  border-color: #8c8f94;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
}

.agevow-preview-frame {
  margin-block-start: 10px;
  padding: 24px 12px;
  background: var(--agevow-cover, #ffffff);
  border: 1px solid #dcdcde;
  border-radius: 8px;
  overflow: hidden;
  margin-inline: auto;
  box-sizing: border-box;
}

.agevow-preview-frame[data-size="phone"] {
  max-inline-size: 375px;
}

.agevow-preview-gate {
  display: flex;
  justify-content: center;
}

.agevow-preview-gate .agevow-preview-label {
  display: block;
  font-size: 13px;
}

/* ── a colour: its hex code, and beside it the picker as a 44 px swatch ── */
.agevow-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0 16px;
}

.agevow-color {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px 8px;
}

.agevow-color label {
  grid-column: 1 / -1;
}

.agevow-wrap .agevow-color input[type="color"] {
  inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
  padding: 2px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

/* ── the folded note ───────────────────────────────────────────────────── */
.agevow-different summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  min-block-size: 32px;
  line-height: 32px;
}

.agevow-different ul {
  list-style: disc;
  padding-inline-start: 20px;
  max-inline-size: 60rem;
}

.agevow-different li {
  font-size: 14px;
  line-height: 1.5;
}

/* ── the Checks (P9) ───────────────────────────────────────────────────── */
.agevow-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 8px 16px;
  align-items: end;
}

.agevow-filters .agevow-field select,
.agevow-filters .agevow-field input {
  inline-size: 100%;
}

.agevow-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.agevow-filter-actions .button {
  min-block-size: 40px;
  display: inline-flex;
  align-items: center;
}

/* Deleting the plugin deletes the record (P11): said where the copy is made. */
.agevow-keep {
  grid-column: 1 / -1;
  margin: 0;
}

.agevow-table-wrap {
  overflow-x: auto;
}

.agevow-table th.num,
.agevow-table td.num {
  text-align: end;
}

.agevow-table tr.agevow-total td {
  font-weight: 600;
}

.agevow-result.is-pass {
  color: #007017;
}

.agevow-result.is-under {
  color: #b32d2e;
  font-weight: 600;
}

.agevow-muted {
  color: #50575e;
}

.agevow-bar-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.agevow-bar {
  display: inline-block;
  inline-size: 8rem;
  block-size: 10px;
  background: #dcdcde;
  border-radius: 5px;
  overflow: hidden;
}

.agevow-bar-fill {
  display: block;
  block-size: 100%;
  background: var(--wp-admin-theme-color, #2271b1);
}

.agevow-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 10px;
}

.agevow-pager .button {
  min-block-size: 40px;
}

/* ── the printable summary (P9) ────────────────────────────────────────── */
.agevow-sheet {
  background: #fff;
  color: #1d2327;
  max-inline-size: 48rem;
  padding: 24px 28px;
  border: 1px solid #c3c4c7;
  box-sizing: border-box;
}

.agevow-sheet h1 {
  font-size: 22px;
  margin-block: 0 4px;
}

.agevow-sheet h2 {
  font-size: 16px;
  margin-block: 20px 6px;
}

.agevow-sheet-meta {
  color: #50575e;
  margin-block-start: 0;
}

.agevow-sentence {
  font-size: 15px;
  line-height: 1.5;
}

.agevow-sheet-table {
  border-collapse: collapse;
  inline-size: 100%;
}

.agevow-sheet-table th,
.agevow-sheet-table td {
  border: 1px solid #c3c4c7;
  padding: 4px 8px;
  text-align: start;
  vertical-align: top;
}

.agevow-disclaimer {
  margin-block-start: 24px;
  font-style: italic;
}

.agevow-noprint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media print {
  #adminmenumain,
  #wpadminbar,
  #wpfooter,
  #screen-meta,
  #screen-meta-links,
  .notice,
  .update-nag,
  .agevow-noprint {
    display: none !important;
  }

  html.wp-toolbar {
    padding-top: 0 !important;
  }

  #wpcontent,
  #wpbody-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .agevow-sheet {
    border: 0;
    padding: 0;
    max-inline-size: none;
  }
}

/* ── touch screens and tablet widths (P15): a finger needs 44 px, and a field
   under 16 px makes iOS zoom the page when it is tapped. WordPress's own sizes are
   30–40 px; every control of ours is raised, the tabs and the fold included. ── */
@media (pointer: coarse), (max-width: 1024px) {
  .agevow-wrap .button,
  .agevow-wrap .button-link,
  .agevow-wrap .nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    box-sizing: border-box;
  }

  .agevow-wrap .agevow-preview-sizes .button,
  .agevow-wrap .agevow-filter-actions .button,
  .agevow-wrap .agevow-pager .button {
    min-block-size: 44px;
  }

  .agevow-wrap select,
  .agevow-wrap input[type="text"],
  .agevow-wrap input[type="url"],
  .agevow-wrap input[type="number"],
  .agevow-wrap input[type="date"],
  .agevow-wrap input[type="search"],
  .agevow-wrap .agevow-field select,
  .agevow-wrap .agevow-field input[type="text"],
  .agevow-wrap .agevow-field input[type="url"],
  .agevow-wrap .agevow-field input[type="number"],
  .agevow-wrap .agevow-field input[type="date"] {
    font-size: 16px;
    min-block-size: 44px;
  }

  /* The preview draws the visitor's gate as it is: its fields keep the gate's 48 px. */
  .agevow-wrap .agevow-gate .agevow-field input {
    min-block-size: 48px;
  }

  .agevow-wrap .agevow-different summary {
    min-block-size: 44px;
    line-height: 44px;
  }
}

/* A long name with no space in it (a page, a product) wraps inside its box: a page's
   choice, and the history's change, the one cell that names a product or a category.
   Never every cell — a table squeezed onto a tablet then split short words ("Checko/ut",
   seen on the iPad, 2026-10-15). */
.agevow-choice label,
.agevow-history-table td:last-child,
.agevow-sheet-table td:last-child {
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

/* The first column of the record's tables is the date: one line, never "2026-10-" over
   "14" (Safari's engine breaks after a hyphen when a wide column takes the room — the
   history on the iPad and desktop Safari, 2026-10-15). */
.agevow-table td:first-child,
.agevow-sheet-table td:first-child {
  white-space: nowrap;
}

/* "Get early access" (class-early-access.php): the last card on the Gate screen,
   deliberately quieter than the ones above it — an offer, never a warning. */
.agevow-early-access {
  border-style: dashed;
}

/* A link, not a <button>: it must centre its own label when a phone makes it
   full width, as every <button> beside it does by default. */
.agevow-early-access .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── "Version X is available — Update now" (UPD1) ───────────────────────── */
.agevow-update {
  border-inline-start: 4px solid var(--wp-admin-theme-color, #2271b1);
}

.agevow-update p {
  margin: 0 0 8px;
}

.agevow-update .agevow-update-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin: 0;
}

.agevow-update-actions a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.agevow-update-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── phones: tables become cards, nothing scrolls sideways at 320 px ───── */
@media (max-width: 600px) {
  .agevow-card {
    padding-inline: 14px;
  }

  .agevow-wide input,
  .agevow-field select,
  .agevow-field input {
    inline-size: 100%;
    font-size: 16px;
  }

  .agevow-choice {
    --agevow-line: 24px;
  }

  .agevow-choice label {
    font-size: 16px;
  }

  .agevow-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .agevow-table,
  .agevow-table tbody,
  .agevow-table tr,
  .agevow-table td {
    display: block;
    inline-size: 100%;
    box-sizing: border-box;
  }

  .agevow-table tr {
    border: 1px solid #dcdcde;
    border-radius: 8px;
    margin-block-end: 12px;
    padding: 4px 8px;
  }

  .agevow-table td,
  .agevow-table td.num {
    border: 0;
    padding: 6px 0;
    text-align: start;
  }

  .agevow-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #50575e;
    font-size: 12px;
  }

  .agevow-table-wrap {
    overflow-x: visible;
  }

  .agevow-filter-actions .button,
  .agevow-actions .button {
    inline-size: 100%;
    justify-content: center;
  }

  /* WordPress's buttons never wrap; a long label must, or the page scrolls sideways. */
  .agevow-wrap .button {
    white-space: normal;
    max-inline-size: 100%;
    line-height: 1.4;
    padding-block: 10px;
    block-size: auto;
  }

  .agevow-sheet {
    padding: 16px;
  }

  .agevow-sheet-table {
    font-size: 13px;
  }

  .agevow-bar {
    inline-size: 5rem;
  }
}