/* ============================================================
   Mirath: Documents + Compare view styles
   Owner: DOC-VIEWS agent (js/views/documents.js, js/views/compare.js).
   All colors via css/tokens.css custom properties: no hardcoded
   hex. The .legal-doc preview itself is styled by css/print.css;
   this file styles the shell around it (all of which carries
   .no-print) and the madhab comparison table.
   ============================================================ */

/* ------------------------------------------------------------
   Documents: state line and regeneration notice
   ------------------------------------------------------------ */

.doc-state-line {
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-6);
}

.doc-state-line a {
  color: var(--color-accent);
}

/* Collaborative amber register: an invitation, not an accusation. */
.doc-state-line--missing {
  color: var(--color-awl);
  border-inline-start: 3px solid var(--color-awl);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-awl) 7%, transparent);
}

/* Quiet honest-review notice: informational, never urgent, no alarm hue. */
.doc-stale-note {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
  border-inline-start: 3px solid var(--color-separator);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  max-width: 38rem;
}

.regen-notice {
  border-inline-start: 3px solid var(--color-awl);
  margin-bottom: var(--space-6);
}

.regen-notice-title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.regen-notice-body {
  font-size: var(--text-callout);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   Documents: tier groups and cards
   ------------------------------------------------------------ */

.doc-tier-group {
  margin-bottom: var(--space-10);
}

.doc-tier-heading {
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.doc-tier-note {
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 38rem;
  margin-bottom: var(--space-5);
}

.doc-cards {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .doc-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .doc-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 2px solid var(--color-accent); /* ledger tab */
}

.doc-card-title {
  font-size: var(--text-h3);
}

.doc-card-desc {
  flex: 1;
  font-size: var(--text-callout);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.doc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.doc-card-price {
  font-family: var(--font-sans);
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   Documents: the unlock sheet (rendered inside .sheet-body).
   Quiet throughout: no urgency hues, no countdowns, nothing
   sticky. The Stripe action is a plain link styled as a button.
   ------------------------------------------------------------ */

.unlock-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.unlock-includes li {
  position: relative;
  padding-inline-start: var(--space-5);
  font-size: var(--text-callout);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.unlock-includes li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.unlock-pay {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.unlock-pay-link {
  align-self: flex-start;
  text-decoration: none;
}

.unlock-pay-note {
  font-size: var(--text-footnote);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 34rem;
}

/* The discount pointer under the Stripe action: one quiet line;
   coupons live on Stripe's checkout page, never in the app. */
.unlock-discount-note {
  color: var(--color-text-faint);
}

.unlock-code-field {
  margin-block: var(--space-4);
}

.unlock-code-row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}

.unlock-code-row .field-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.06em;
}

.unlock-code-note {
  min-height: 1.4em;
  margin-top: var(--space-2);
  font-size: var(--text-footnote);
  line-height: 1.5;
  color: var(--color-awl); /* collaborative amber, never an alarm red */
}

.unlock-code-note--done {
  color: var(--color-success);
}

/* The transient beat while a code or license is checked on this
   device (licenses verify offline through WebCrypto), quiet, not
   amber: the reader has done nothing to be corrected about. */
.unlock-code-note--busy {
  color: var(--color-text-secondary);
}

.unlock-fallback {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-separator);
}

.unlock-hardship {
  margin-top: var(--space-4);
  font-size: var(--text-footnote);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.unlock-hardship a {
  color: var(--color-accent);
}

/* ------------------------------------------------------------
   Documents: preview shell
   ------------------------------------------------------------ */

.doc-preview-section {
  margin-top: var(--space-10);
}

.doc-preview-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.doc-preview-title {
  font-size: var(--text-h2);
}

.doc-preview-meta {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.doc-preview-note {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 38rem;
  margin-bottom: var(--space-4);
}

.doc-generation-note {
  font-size: var(--text-callout);
  color: var(--color-awl);
  line-height: 1.5;
  border-inline-start: 3px solid var(--color-awl);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-awl) 7%, transparent);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------
   Documents: the backup nudge (.no-print, session-dismissible).
   Quiet register: separator-toned rule, footnote type, link-styled
   actions. Never a modal, never an alarm hue.
   ------------------------------------------------------------ */

.backup-nudge {
  border-inline-start: 3px solid var(--color-separator);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  max-width: 38rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text-secondary) 4%, transparent);
}

.backup-nudge-body {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.backup-nudge-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-footnote);
}

/* Both actions read as quiet text links, including the <button>.
   They stay under 44px visually; the ::after inset extends the hit
   area to the tap-target minimum (the .share-chip pattern). */
.backup-nudge-link,
.backup-nudge-dismiss {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

button.backup-nudge-link::after,
.backup-nudge-dismiss::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.backup-nudge-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.backup-nudge-link:hover {
  color: var(--color-accent-hover);
}

.backup-nudge-sep {
  color: var(--color-text-faint);
}

.backup-nudge-dismiss {
  color: var(--color-text-faint);
  margin-inline-start: auto;
}

.backup-nudge-dismiss:hover {
  color: var(--color-text-secondary);
}

/* Confirmation after the download: empty until it speaks. */
.backup-nudge-status {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: var(--space-1);
}

.backup-nudge-status:empty {
  display: none;
}

/* The quiet donation register: no modal, no pressure. */
.donation-line {
  font-size: var(--text-footnote);
  color: var(--color-text-faint);
  line-height: 1.6;
  max-width: 38rem;
  margin-top: var(--space-5);
}

.donation-line a {
  color: var(--color-accent);
}

/* ------------------------------------------------------------
   Documents: execution instructions panel (.no-print)
   ------------------------------------------------------------ */

.exec-panel {
  margin-top: var(--space-10);
}

.exec-panel-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-2);
}

.exec-panel-lede {
  font-size: var(--text-callout);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 42rem;
  margin-bottom: var(--space-4);
}

.exec-section-title {
  font-size: var(--text-headline);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-2);
}

.exec-panel p,
.align-section p {
  font-size: var(--text-callout);
  line-height: 1.55;
  margin-bottom: var(--space-3);
}

.exec-steps,
.exec-list {
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-6);
  font-size: var(--text-callout);
  line-height: 1.55;
}

.exec-steps > li,
.exec-list > li {
  margin-bottom: var(--space-2);
}

/* BLINDSPOTS B4: the interested-witness rule, bold and unmissable. */
.exec-warning {
  font-weight: 700;
  color: var(--color-text-primary);
  border-inline-start: 3px solid var(--color-awl);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  background: color-mix(in srgb, var(--color-awl) 8%, transparent);
}

.exec-advisory {
  font-weight: 600;
  color: var(--color-scholar);
  border-inline-start: 3px solid var(--color-scholar);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-scholar) 7%, transparent);
}

.exec-note {
  font-size: var(--text-footnote);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Documents: beneficiary alignment (BLINDSPOTS A1)
   ------------------------------------------------------------ */

.align-section {
  margin-top: var(--space-8);
}

.align-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.align-item {
  font-size: var(--text-callout);
  line-height: 1.55;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-separator);
}

.align-item:last-child {
  border-bottom: none;
}

.align-item-type {
  color: var(--color-text-secondary);
}

.align-include {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  font-size: var(--text-callout);
  color: var(--color-text-primary);
  cursor: pointer;
}

.align-include input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

/* On screen the printable checklist sits below its card with a
   little air; in print it follows the document. */
.align-doc {
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------
   Compare: current-school line
   ------------------------------------------------------------ */

.compare-current-line {
  font-size: var(--text-subhead);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.compare-current-line a {
  color: var(--color-accent);
}

/* ------------------------------------------------------------
   Compare: the table
   Horizontal scroll on narrow screens; the heir column stays
   pinned (position: sticky) so rows remain legible mid-scroll.
   ------------------------------------------------------------ */

.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.compare-table-wrap:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-subhead);
}

.compare-table th,
.compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-separator);
}

.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-raised);
  z-index: 1;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* Pinned heir column */
.compare-heir-col,
.compare-heir-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  min-width: 10rem;
  max-width: 14rem;
}

.compare-table thead .compare-heir-col {
  z-index: 3;
  background: var(--color-surface-raised);
}

.compare-heir-name {
  display: block;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-heir-relation {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.compare-school-col {
  min-width: 9rem;
}

.compare-school-name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-headline);
  font-weight: 600;
  color: var(--color-text-primary);
}

.compare-school-authority {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-faint);
}

.compare-school-yours {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 1px var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
}

.compare-school-col--current {
  border-top: 2px solid var(--color-accent);
}

.compare-cell .share-chip {
  margin-bottom: var(--space-1);
}

.compare-designation {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.compare-none {
  display: inline-block;
  min-width: 48px;
  font-family: var(--font-mono);
  font-size: var(--text-footnote);
  color: var(--color-hajb);
  font-style: italic;
  margin-bottom: var(--space-1);
}

/* A cell where the schools part ways: highlighted, never alarming. */
.compare-cell--diff {
  background: color-mix(in srgb, var(--color-awl) 8%, transparent);
  border-inline-start: 2px solid var(--color-awl);
}

sup.compare-fn {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-accent);
  margin-inline-start: 2px;
}

/* A school whose reading is withheld: the scholar register, not an error. */
.compare-cell--referral {
  vertical-align: middle;
  text-align: center;
  background: color-mix(in srgb, var(--color-scholar) 6%, transparent);
  border-inline-start: 3px solid var(--color-scholar);
  max-width: 11rem;
}

.compare-referral-text {
  display: block;
  font-size: var(--text-footnote);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-scholar);
}

/* ------------------------------------------------------------
   Compare: inline note cards (testator record missing, no
   eligible heirs) and the members-outside-the-readings list
   ------------------------------------------------------------ */

.compare-note-line {
  font-size: var(--text-callout);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.compare-note-line a {
  color: var(--color-accent);
}

.compare-omitted {
  margin-top: var(--space-5);
  max-width: 44rem;
}

.compare-omitted-lede {
  font-size: var(--text-footnote);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.compare-omitted-list {
  margin: 0;
  padding-inline-start: var(--space-6);
  font-size: var(--text-footnote);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.compare-omitted-list > li {
  margin-bottom: var(--space-1);
}

/* ------------------------------------------------------------
   Compare: notes, footnotes, reference
   ------------------------------------------------------------ */

.compare-notes {
  margin: var(--space-5) 0 0;
  padding-inline-start: var(--space-6);
  font-size: var(--text-footnote);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 44rem;
}

.compare-notes > li {
  margin-bottom: var(--space-2);
}

.compare-view .scholar-banner {
  margin-top: var(--space-5);
}

.compare-section-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.compare-footnotes {
  margin-top: var(--space-10);
}

.compare-fn-list {
  margin: 0;
  padding-inline-start: var(--space-6);
  font-size: var(--text-callout);
  line-height: 1.6;
  max-width: 44rem;
}

.compare-fn-list > li {
  margin-bottom: var(--space-4);
}

.compare-agreement {
  margin-top: var(--space-6);
  font-size: var(--text-callout);
  color: var(--color-text-secondary);
}

.compare-reference {
  margin-top: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 0 var(--space-5);
}

.compare-reference summary {
  min-height: var(--tap-target-min);
  padding: var(--space-3) 0;
  font-family: var(--font-serif);
  font-size: var(--text-headline);
  line-height: calc(var(--tap-target-min) - 2 * var(--space-3));
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style-position: inside;
}

.compare-reference summary::marker {
  color: var(--color-accent);
}

.compare-reference summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.compare-ref-list {
  margin: var(--space-2) 0 var(--space-4);
  padding-inline-start: var(--space-6);
  font-size: var(--text-subhead);
  line-height: 1.6;
  max-width: 44rem;
}

.compare-ref-list > li {
  margin-bottom: var(--space-3);
}

.compare-ref-amja {
  display: block;
  font-size: var(--text-footnote);
  font-style: italic;
  color: var(--color-scholar);
}

.compare-ref-source {
  font-size: var(--text-footnote);
  font-style: italic;
  color: var(--color-text-faint);
  line-height: 1.6;
  padding-bottom: var(--space-5);
  max-width: 44rem;
}

/* Narrow screens: the pinned heir column yields more room
   to the scrolling school columns. */
@media (max-width: 600px) {
  .compare-heir-col,
  .compare-heir-cell {
    min-width: 8rem;
    max-width: 9.5rem;
  }

  .compare-table {
    min-width: 640px;
  }
}