/* Compare pages (/compare/*): a two-app table and "pick X if" cards, layered on
   main.css + sec-identify.css + sec-native.css + feature-page.css like the feature pages.
   Draft 2026-09-29, first used by /compare/planta/. */

/* ── § 010 · two "pick it if" cards side by side ─────────────────────────── */
.cmp-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); align-items: stretch; }
.cmp-picks .hp-card { height: 100%; }
.cmp-picks .hp-folder-wrap, .cmp-picks .folder { height: 100%; }
.cmp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.cmp-list li {
  position: relative; padding: var(--s3) 0 0 22px; border-top: 1px solid var(--hairline);
  font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--ink);
}
.cmp-list li::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--s3) + 8px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--mustard);
}

/* ── § 020 / § 030 · the comparison table ─────────────────────────────────── */
.cmp-table-wrap { width: 100%; overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp-table col.cmp-col-row { width: 26%; }
.cmp-table thead th {
  padding: 0 var(--s4) var(--s3); text-align: left; vertical-align: bottom;
  border-bottom: 2px solid var(--ink);
}
.cmp-table { --cmp-band-ezina: #f5ebde; /* Colors/Brown/1 */ --cmp-band-planta: var(--manila); /* Colors/Eggshell/2 */ }
/* Figma page/compare-app: 32 app icon + the "App name" style. */
.cmp-app { display: inline-flex; align-items: center; gap: 8px; }
.cmp-app img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.cmp-app__name { font-family: var(--f-sans); font-weight: 800; font-size: 28px; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.cmp-app__label { display: flex; flex-direction: column; }
/* The paid plan under the name ("Premium"), Figma Verdict aside. */
.cmp-app__plan { font-family: var(--f-sans); font-weight: 500; font-size: 14px; color: var(--hp-muted, var(--muted)); }

/* The detailed tables colour each app's column (Corbin's Draft B): one band
   per column, running unbroken through the heads, group rows and rows. */
.cmp-table:not(.cmp-sum) [data-app="Ezina"] { background: var(--cmp-band-ezina); }
/* The other app, whichever it is (Planta on /compare/planta/, and so on). */
.cmp-table:not(.cmp-sum) [data-app]:not([data-app="Ezina"]) { background: var(--cmp-band-planta); }
.cmp-table:not(.cmp-sum) thead th[data-app] { padding-top: var(--s4); }
.cmp-table tbody th, .cmp-table tbody td {
  padding: var(--s4); border-bottom: 1px solid var(--hairline); vertical-align: top; text-align: left;
}
/* Figma text style "Row name": Cabinet Grotesk Bold 16/21, 2%, in capitals. */
.cmp-table tbody th {
  padding-left: 0; font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 21px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.cmp-table td { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--ink); }
.cmp-table td .cmp-note { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.cmp-table tr.cmp-group th, .cmp-table tr.cmp-group td {
  padding: var(--s6) 0 var(--s2); border-bottom: 1px solid var(--ink);
  font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 20px;
  letter-spacing: 0; text-transform: none;
}

/* Verdict marks (Figma page/compare-mark 1470:12572): green dot for yes, mustard
   dot for partial/paid, the map's no-data hatch for no. Words always sit beside the mark. */
.cmp-mark { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--f-sans); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; }
.cmp-mark::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; transform: translateY(1px); }
.cmp-mark--yes::before { background: var(--green); }
.cmp-mark--part::before { background: var(--mustard); }
.cmp-mark--no::before {
  background: repeating-linear-gradient(45deg, rgba(117, 92, 71, 0.85) 0 1.5px, var(--card-light) 1.5px 4px);
  border: 1px solid var(--hairline); box-sizing: border-box;
}

/* ── § 040 · where Planta does better: plain numbered list ─────────────────── */
.cmp-better { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.cmp-better li { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.cmp-better li:nth-child(-n+2) { padding-top: 0; border-top: 0; }
/* Figma text style Edge title: Cabinet Grotesk Medium 20/110. */
.cmp-better h3 { font-family: var(--f-sans); font-weight: 500; font-size: 20px; line-height: 1.1; color: var(--ink); }
.cmp-better p { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted, var(--muted)); }

.cmp-draft {
  margin: 0; padding: var(--s3) var(--s4); border: 1px dashed var(--muted); border-radius: var(--radius-sm);
  font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--muted);
}

@media (max-width: 980px) {
  .cmp-picks, .cmp-better { grid-template-columns: minmax(0, 1fr); }
  .cmp-better li:nth-child(2) { padding-top: var(--s4); border-top: 1px solid var(--hairline); }
}
@media (max-width: 640px) {
  /* Phone: each row becomes a small stacked block, app names repeated as labels. */
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: 100%; }
  .cmp-table colgroup, .cmp-table thead { display: none; }
  .cmp-table tbody tr { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
  .cmp-table tbody th, .cmp-table tbody td { padding: 0; border: 0; }
  .cmp-table tbody th { margin-bottom: var(--s2); }
  .cmp-table tbody td { padding-top: var(--s2); }
  /* Phone: each app's answer is led by its icon and name, and in the detailed
     tables sits in a block of its column colour. */
  .cmp-table tbody td[data-app]::before {
    content: attr(data-app); display: block; margin-bottom: 6px; padding-left: 28px; min-height: 20px;
    background: no-repeat left center / 20px 20px;
    font-family: var(--f-sans); font-weight: 800; font-size: 16px; line-height: 21px; color: var(--ink);
  }
  .cmp-table tbody td[data-app^="Ezina"]::before { background-image: url("/assets/Images/compare/ezina-app-icon-20.png"); }
  .cmp-table tbody td[data-app^="Planta"]::before { background-image: url("/assets/Images/compare/planta-app-icon-20.png"); }
  .cmp-table:not(.cmp-sum) tbody td[data-app] { padding: var(--s3); border-radius: 8px; margin-top: var(--s2); }
  .cmp-table tr.cmp-group { padding-bottom: 0; border-bottom: 1px solid var(--ink); }
  .cmp-table tr.cmp-group th { padding: var(--s5) 0 var(--s2); margin: 0; }
  .cmp-table tr.cmp-group td { display: none; }
  /* Summary (Figma 1502:12762): the two apps side by side, 40 apart, under
     the row name, with the link below them. */
  .cmp-sum tbody tr { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 40px; }
  .cmp-sum tbody th, .cmp-sum tbody td:last-child { grid-column: 1 / -1; }
  .cmp-sum tbody td[data-app] { width: auto; }
}

/* ── Draft A · expandable rows (scripts/compare.js adds .is-collapsible) ─────── */
.cmp-table.is-collapsible tr:not(.is-open) .cmp-note { display: none; }
.cmp-row-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.cmp-row-toggle::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.cmp-row-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
.cmp-row-toggle:focus-visible, .cmp-all-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cmp-all-toggle {
  display: block; margin: 0 0 var(--s4) auto; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) { .cmp-row-toggle::after { transition: none; } }

/* ── Draft B · the summary chart ──────────────────────────────────────────── */
.cmp-sum td { vertical-align: middle; }
.cmp-sum .cmp-sum__count { display: block; margin-top: 6px; font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.cmp-sum .cmp-sum__count small { font-weight: 500; font-size: 14px; color: var(--muted); }
.cmp-sum tr.cmp-sum__total th, .cmp-sum tr.cmp-sum__total td { border-top: 2px solid var(--ink); border-bottom: 0; }
.cmp-sum tr.cmp-sum__total .cmp-sum__count { font-size: 20px; } /* Figma Verdict total, size/lg */
/* Every area is five direct comparisons, so five dots is the same scale on
   every row (gen asserts it). */
.cmp-dots { display: flex; gap: 6px; }
.cmp-dot { width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.cmp-dot--yes { background: var(--green); }
.cmp-dot--part { background: var(--mustard); }
/* Not checked: we could not confirm it either way. A plain ring, never
   counted as a no (scripts/compare/build.py). */
.cmp-dot--unk, .cmp-mark--unk::before { background: transparent; border: 2px solid var(--hairline); box-sizing: border-box; }
.cmp-mark--unk { color: var(--muted); }
.cmp-dot--no {
  background: repeating-linear-gradient(45deg, rgba(117, 92, 71, 0.85) 0 1.5px, var(--card-light) 1.5px 4px);
  border: 1px solid var(--hairline);
}
.cmp-sum__edge { display: block; margin-top: 6px; font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.cmp-sum__more { white-space: nowrap; font-family: var(--f-sans); font-weight: 700; font-size: 15px; }
.cmp-sum-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s4) 0 0; padding: 0; list-style: none;
  font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.cmp-sum-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-sum-note { margin: var(--s3) 0 0; font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--hp-muted, var(--muted)); max-width: 72ch; }
/* The two app columns sit side by side at a fixed width (Figma 300 + cell
   padding); the link column takes whatever is left. */
.cmp-table.cmp-sum col.cmp-col-app { width: 332px; }
.cmp-table.cmp-sum col.cmp-col-more { width: auto; }

@media (max-width: 640px) {
  .cmp-sum__more { display: inline-block; padding-top: var(--s2); }
  /* Stacked, the total is one block: one rule above it, not one per cell. */
  .cmp-sum tr.cmp-sum__total { border-top: 2px solid var(--ink); border-bottom: 0; }
  .cmp-sum tr.cmp-sum__total th, .cmp-sum tr.cmp-sum__total td { border-top: 0; }
}

/* ── Phone accordions (scripts/compare.js) ───────────────────────────────────
   On phones each category heading opens and closes its rows (Figma 1502:10264).
   The script adds the buttons; wider screens show every row and the heading as text. */
.cmp-acc-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: default;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.cmp-acc-sum { display: none; }
@media (max-width: 640px) {
  .cmp-acc-toggle { cursor: pointer; }
  .cmp-acc-toggle::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-top: -5px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.15s ease;
  }
  .cmp-acc-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 5px; }
  .cmp-acc-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .cmp-acc-sum { display: block; margin-top: 4px; font-family: var(--f-sans); font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); }
  .cmp-table tr.cmp-acc-hidden { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cmp-acc-toggle::after { transition: none; } }

/* Questions on compare pages match the Where … does better lists (Figma Edge title):
   medium-weight titles, and no rule above the first row. */
.fp-faq__q { font-weight: 500; }
.fp-faq__item:nth-child(-n+2) { padding-top: 0; border-top: 0; }
@media (max-width: 720px) {
  .fp-faq__item:nth-child(2) { padding-top: var(--s4); border-top: 1px solid var(--hairline); }
}

/* ── /compare/ hub: nine apps in one table (Figma 1526:18341) ─────────────────
   A 144 label column and nine equal app columns; Ezina's column is banded.
   Phones keep the grid and scroll it sideways, with the area names pinned. */
.cmp-hub { table-layout: auto; min-width: 1100px; }
.cmp-hub thead th { vertical-align: bottom; padding: 0 6px var(--s3); }
.cmp-hub thead td { width: 144px; }
.cmp-hub .cmp-app { align-items: flex-start; gap: 6px; }
.cmp-hub .cmp-app img { width: 20px; height: 20px; border-radius: 5px; }
.cmp-hub .cmp-app__name { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.cmp-hub .cmp-app__plan { font-size: 13px; }
.cmp-hub tbody td { padding-left: 6px; padding-right: 6px; }
.cmp-hub [data-app="Ezina"] { background: var(--cmp-band-ezina); }
.cmp-hub__extra { display: block; margin-top: 4px; font-family: var(--f-sans); font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--hp-muted, var(--muted)); }
.fp-hero--solo .fp-hero__text { max-width: 760px; }

.cmp-better--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-better--three li { padding-top: 0; border-top: 0; }

.cmp-best { margin: 0; padding: 0; list-style: none; }
.cmp-best li { display: grid; grid-template-columns: 248px minmax(0, 1fr) auto; align-items: center; gap: var(--s5);
  padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.cmp-best p { font-family: var(--f-serif); font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0; }
.cmp-best .hp-link { white-space: nowrap; font-family: var(--f-sans); font-weight: 700; font-size: 15px; }

@media (max-width: 980px) {
  .cmp-better--three { grid-template-columns: minmax(0, 1fr); }
  .cmp-better--three li + li { padding-top: var(--s4); border-top: 1px solid var(--hairline); }
  .cmp-best li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
}
@media (max-width: 640px) {
  /* Undo the stacked phone table for the hub: it stays a grid that scrolls. */
  .cmp-hub-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-table.cmp-hub { display: table; width: auto; min-width: 1000px; }
  .cmp-table.cmp-hub thead { display: table-header-group; }
  .cmp-table.cmp-hub tbody { display: table-row-group; }
  .cmp-table.cmp-hub tr, .cmp-sum.cmp-hub tbody tr { display: table-row; padding: 0; border-bottom: 0; }
  .cmp-table.cmp-hub th, .cmp-table.cmp-hub td { display: table-cell; width: auto; }
  .cmp-table.cmp-hub tbody th, .cmp-table.cmp-hub tbody td { padding: var(--s3) 6px; border-bottom: 1px solid var(--hairline); margin: 0; }
  .cmp-table.cmp-hub tbody td[data-app]::before { content: none; }
  .cmp-table.cmp-hub tbody th { position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; background: var(--paper, #faf6ee); }
  .cmp-hub tr.cmp-sum__total th, .cmp-hub tr.cmp-sum__total td { border-top: 2px solid var(--ink); border-bottom: 0; }
}