/* ==========================================================================
   freeaiapis.org — styles.css
   Flat, utilitarian documentation-style design. Table of listings, no
   shadows, no gradients, no animations. Three text sizes only (heading,
   body, small labels). The single accent color is reserved for primary
   buttons and status badges; links share the same blue family.
   Light/dark both come from prefers-color-scheme.
   ========================================================================== */

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #5b6470;
  --hairline: #e2e4e8;      /* row dividers */
  --border: #c9cdd3;        /* inputs, buttons, table head rule */

  --accent: #2563eb;        /* primary buttons + status badges only */
  --accent-contrast: #ffffff;
  --accent-soft: #e8effc;

  --danger: #b42318;        /* semantic red for the key warning + errors */
  --warn: #d97706;          /* warning box left border */

  --fs-heading: 1.35rem;
  --fs-body: 1rem;
  --fs-small: 0.82rem;

  --radius: 5px;            /* buttons and inputs only */
}

@media (prefers-color-scheme: dark) {
  html:not(.light-mode) {
    --bg: #121417;
    --surface: #171a1f;
    --text: #e8eaed;
    --muted: #9aa3ad;
    --hairline: #2a2e34;
    --border: #3a3f47;

    --accent: #60a5fa;
    --accent-contrast: #0b1220;
    --accent-soft: #1c2c45;

    --danger: #f87171;
    --warn: #f0a13e;
  }
}

/* Class-based dark mode: .dark-mode overrides system preference; .light-mode forces light */
html.dark-mode {
  --bg: #121417;
  --surface: #171a1f;
  --text: #e8eaed;
  --muted: #9aa3ad;
  --hairline: #2a2e34;
  --border: #3a3f47;

  --accent: #60a5fa;
  --accent-contrast: #0b1220;
  --accent-soft: #1c2c45;

  --danger: #f87171;
  --warn: #f0a13e;
}

html.light-mode {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #5b6470;
  --hairline: #e2e4e8;
  --border: #c9cdd3;

  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --accent-soft: #e8effc;

  --danger: #b42318;
  --warn: #d97706;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

h1 {
  font-size: var(--fs-heading);
  font-weight: 700;
}

h2 {
  font-size: var(--fs-body);
  font-weight: 700;
}

h3 {
  font-size: var(--fs-small);
  font-weight: 700;
}

p {
  margin: 0 0 0.8rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Links share the accent blue family; underline on hover only. */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ layout --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--accent);
  padding: 0.4rem 0.8rem;
  z-index: 100;
  border: 1px solid var(--border);
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ------------------------------------------------------------- header -- */
.site-header {
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand {
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text);
}

.brand:hover {
  text-decoration: none;
}

/* ------------------------------------------------------- theme toggle --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
}

.site-nav a[aria-current="page"] {
  font-weight: 600;
}

/* ------------------------------------------------------- page headings -- */
h1 {
  margin: 1.4rem 0 0.2rem;
}

.lede {
  margin: 0 0 1rem;
  max-width: 75ch;
}

/* --------------------------------------- warning (thin left accent) ---- */
.warning {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--warn);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.4rem;
}

.warning p {
  margin: 0;
}

.warning strong {
  font-weight: 700;
}

/* make the warning's bold label wrap on mobile */
@media (max-width: 639px) {
  .warning strong {
    display: block;
  }
}

/* ------------------------------------------------------------ toolbar -- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1rem;
  margin: 1.1rem 0 0.5rem;
}

.toolbar input[type="search"] {
  flex: 1 1 240px;
}

input[type="search"],
select,
textarea {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.55rem;
}

.toolbar .check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding-top: 0.35rem;
  font-size: var(--fs-small);
}

.toolbar .sel {
  font-size: var(--fs-small);
  color: var(--muted);
  white-space: nowrap;
  padding-top: 0.35rem;
}

.toolbar .sel select {
  margin-left: 0.3rem;
}

.more-filters {
  display: inline-block;
  font-size: var(--fs-small);
  padding-top: 0.35rem;
}

.more-filters summary {
  cursor: pointer;
  color: var(--accent);
}

.more-filters[open] summary {
  margin-bottom: 0.5rem;
}

.more-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  border: 1px solid var(--hairline);
  padding: 0.6rem 0.8rem;
}

.more-inner label {
  font-size: var(--fs-small);
  color: var(--muted);
}

.more-inner select {
  margin-left: 0.3rem;
}

.results-count {
  margin: 0 0 0.4rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ------------------------------------------------------ listings table -- */
table.ltable {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 1.6rem;
}

table.ltable th {
  text-align: left;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
  vertical-align: bottom;
}

table.ltable td {
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0.9rem;
  vertical-align: top;
}

table.ltable th:first-child,
table.ltable td:first-child {
  padding-left: 0.8rem;
}

table.ltable th:last-child,
table.ltable td:last-child {
  padding-right: 0.8rem;
}

/* column widths — balanced for readability */
  .col-provider { min-width: 150px; width: 17%; }
  .col-tested { min-width: 75px; width: 11%; }
  .col-models { min-width: 85px; width: 13%; }
  .col-offer { min-width: 110px; width: 28%; }
  .col-type { width: 8%; }
  .col-card { width: 60px; }
  .col-expires { width: 8%; }
  .col-action { min-width: 90px; width: 12%; }

/* long labels may wrap; short labels stay on one line */
td.cell-type,
td.cell-expires,
td.cell-card {
  white-space: nowrap;
}

.provider-link {
  font-weight: 600;
}

.link-details,
.link-more {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0 0.45rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--accent);
  cursor: pointer;
}

.link-details:hover,
.link-more:hover {
  text-decoration: underline;
}

.models-line {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.uses-line {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-top: 0.2rem;
}

.ref-tag {
  color: var(--muted);
  font-size: var(--fs-small);
  margin-top: 0.25rem;
}

td.cell-tested {
  white-space: nowrap;
}

/* ------------------------------------------------------------- badges -- */
/* Plain square tags; the accent fill marks verified listings only. */
.badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
  padding: 0 7px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
  white-space: nowrap;
  vertical-align: baseline;
}

.badge-accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

td.cell-tested strong {
  font-weight: 700;
}

/* --------------------------------------------------- action buttons --- */
/* One consistent pair: primary (accent) for Copy code / Claim offer,
   secondary for Visit site. Fixed minimum width so the column aligns. */
.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
  padding: 4px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  white-space: nowrap;
  min-width: 112px;
  text-align: center;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

/* expandable details row, opened from the provider cell */
.details-row {
  display: none;
}

.details-row.open {
  display: table-row;
}

.listing-details summary {
  display: none;
}

.details-body {
  padding: 0.1rem 0.2rem 0.7rem;
  max-width: 68ch;
}

.details-body h3 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.9rem 0 0.25rem;
}

.details-body h3:first-child {
  margin-top: 0.2rem;
}

.steps {
  margin: 0;
  padding-left: 1.3rem;
}

.steps li {
  margin-bottom: 0.25rem;
}

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
}

.details dt {
  color: var(--muted);
}

.details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ref-note {
  border: 1px solid var(--hairline);
  padding: 0.5rem 0.7rem;
  margin: 0.2rem 0 0.4rem;
}

.risk-note {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--warn);
  padding: 0.5rem 0.7rem;
  margin: 0.8rem 0 0;
}

.risk-note p {
  margin: 0;
}

.report-line {
  margin: 0.9rem 0 0;
  font-size: var(--fs-small);
}

/* -------------------------------------------------- new this week list -- */
.new-week h2 {
  margin: 1.2rem 0 0.3rem;
}

.new-week ul {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
}

.new-week li {
  margin-bottom: 0.2rem;
}

/* -------------------------------------------------------- empty states -- */
.empty-state,
.load-error {
  margin: 1rem 0 2rem;
  color: var(--muted);
}

.empty-state .btn,
.empty-state a,
.load-error .btn {
  margin-right: 0.5rem;
}

.load-error {
  color: var(--danger);
}

/* ------------------------------------------------- removed / expired --- */
.removed-wrap {
  margin: 0 0 2rem;
}

.removed-wrap > details {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}

.removed-wrap summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}

.removed-wrap summary:hover {
  color: var(--text);
}

/* ------------------------------------------------- ad slots (inactive -- */
/* until real ad code is pasted in)                                        */
.ad-slot {
  display: none;
}

.ad-slot.ad-active {
  display: block;
  margin: 1.2rem 0;
}

.ad-label {
  display: block;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

tr.ad-row {
  display: none;
}

tr.ad-row.ad-active {
  display: table-row;
}

tr.ad-row td {
  padding: 0.4rem 0.65rem;
}

/* -------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 2rem;
  padding: 1rem 0 2rem;
  font-size: var(--fs-small);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-bottom: 0.8rem;
}

.footer-review {
  margin-bottom: 0.5rem;
}

.footer-review strong {
  font-weight: 700;
}

.footer-note {
  color: var(--muted);
  max-width: 72ch;
}

/* donate link inside the footer note — plain text, no badge */
.donate-link {
  white-space: nowrap;
  font-weight: 600;
}

.footer-fine {
  color: var(--muted);
}

/* ----------------------------------------------------- consent banner -- */
.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.8rem 1rem;
  font-size: var(--fs-small);
}

.consent p {
  margin: 0 0 0.6rem;
}

/* ------------------------------------------------------ content pages -- */
.page {
  padding-bottom: 1rem;
}

.page section {
  margin-top: 1.8rem;
  max-width: 80ch;
}

.page h2 {
  margin-bottom: 0.5rem;
}

.page ul,
.page ol {
  padding-left: 1.3rem;
  margin: 0 0 0.9rem;
}

.page li {
  margin-bottom: 0.3rem;
}

.page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.9rem;
}

.page th,
.page td {
  text-align: left;
  border: 1px solid var(--hairline);
  padding: 0.45rem 0.6rem;
  vertical-align: top;
}

.page th {
  font-weight: 700;
}

.notice {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--danger);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.4rem;
  max-width: 65ch;
}

.notice strong {
  color: var(--danger);
}

/* ---------------------------------------------------------- tab bar -- */
.tabs {
  display: flex;
  gap: 0 1.5rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.tab-link {
  display: inline-flex;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.4rem 0.6rem 0.3rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.tab-link[aria-current="true"],
.tab-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------- forms -- */
.form {
  max-width: 640px;
}

.form .field {
  margin-bottom: 1rem;
}

.form label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-small);
  margin-bottom: 0.2rem;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
}

.form textarea {
  min-height: 110px;
  resize: vertical;
}

.field-hint {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: 0.15rem;
}

.field-error input,
.field-error textarea,
.field-error select {
  border-color: var(--danger);
}

.form-error {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--danger);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.1rem;
}

.form-error strong {
  color: var(--danger);
}

.form-footnote {
    font-size: var(--fs-small);
    color: var(--muted);
    margin-top: 1.2rem;
    max-width: 72ch;
  }

  /* claim history section */
  .claim-history {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
  }

  .claim-history h2 {
    font-size: var(--fs-body);
    font-weight: 700;
  }

  .claim-history-lede {
    margin: 0 0 0.5rem;
    color: var(--muted);
  }

  #claim-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .claim-history-item {
    display: flex;
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--fs-small);
  }

  .claim-history-item.stale {
    opacity: 0.6;
  }

  .claim-history-provider {
    flex: 1 1 auto;
    font-weight: 600;
  }

  .claim-history-label {
    flex: 0 0 auto;
    color: var(--muted);
  }

  .claim-history-date {
    flex: 0 0 auto;
    color: var(--muted);
    white-space: nowrap;
  }

  .claim-history-empty {
    color: var(--muted);
    font-style: italic;
  }

  .history-tools {
    display: flex;
    justify-content: flex-end;
    margin: 0.6rem 0;
  }

  /* ensure form-pane is visible by default (JS will handle toggle) */
  .page #form-pane:not([hidden]) { display: block; }
  .page #history-pane:not([hidden]) { display: block; }

/* honeypot — hidden from humans, tempting for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------- mobile: card-like blocks -- */
/* Below 640px each listing becomes a bordered block: provider name on
   top, then labeled lines for offer, type, card needed, expires,
   last tested, and the action button. No horizontal scrolling at 375px. */
@media (max-width: 639px) {
  .ltable,
  .ltable tbody {
    display: block;
  }

  .ltable thead {
    display: none;
  }

  .ltable tr.lrow {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 14px;
    margin-bottom: 10px;
  }

  .ltable td {
    display: block;
    border: none;

  }

  .ltable td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--muted);
  }

  /* provider name on top, tested below it, then models, then offer, type, card, expires, action */
  td.cell-provider { order: 0; }
  td.cell-tested { order: 1; white-space: normal; }
  td.cell-tested::before { content: none; }   /* hide "Last tested" label on mobile */
  td.cell-models { order: 2; }
  td.cell-offer { order: 3; }
  td.cell-type { order: 4; }
  td.cell-card { order: 5; }
  td.cell-expires { order: 6; }
  td.cell-action { order: 7; }

  td.cell-provider::before,
  td.cell-action::before,
  td.details-cell::before {
    content: none;
  }

  /* action button full-width on mobile, 44px min-height */
  td.cell-action .btn,
  td.cell-action .btn-secondary {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    margin: 0;
  }

  .details-row.open {
    display: block;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-top: none;
    padding: 0 12px 12px;
    margin: -10px 0 10px;
  }

  .details-row.open td {
    border: none;
    padding: 0;
  }

  /* unified label/value rows for mobile */
  .mobile-labeled {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    align-items: flex-start;
  }
  .mobile-label {
    flex: 0 0 110px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--muted);
  }
  .mobile-value {
    flex: 1;
    font-size: var(--fs-body);
    color: var(--text);
    overflow-wrap: anywhere;
  }

  tr.ad-row.ad-active {
    display: block;
    padding: 0.4rem 0;
  }

  /* tap targets: nav links and more-filters summary */
  .site-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 4px 0;
  }
  .more-filters summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* Details link after provider name: 44px tap area */
  tr.lrow .link-details {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    margin-left: 0.45rem;
    font-size: var(--fs-small);
  }

  /* +N more link also needs 44px tap target */
  tr.lrow .link-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-small);
  }
}