/* Subscription surfaces: allowance meter, report unlock panel, plan facts,
   confirmation and notices. Builds on the tokens defined in style.css. */
:root { --lime-wash: #f5fbe0; --slip-used: #e7ebec; }

/* Allowance meter: one folded slip per unlock. */
.allowance { display: grid; gap: 10px; justify-items: start; }
.allowance-slips { display: flex; gap: 6px; }
.slip { position: relative; width: 24px; height: 32px; background: var(--ink);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.slip::before { content: ''; position: absolute; inset: 1.5px; background: var(--accent);
  clip-path: polygon(0 0, calc(100% - 7.4px) 0, 100% 7.4px, 100% 100%, 0 100%); }
.slip::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--ink);
  clip-path: polygon(0 0, 0 100%, 100% 100%); }
.slip-used { background: var(--border); }
.slip-used::before { background: var(--slip-used); }
.slip-used::after { background: var(--border); }
.slip-spent::before { animation: slip-spend .7s ease-out both; }
@keyframes slip-spend { 0% { background: var(--accent); transform: none; } 45% { transform: translateY(-4px); } 100% { background: var(--slip-used); transform: none; } }
.allowance-paused .slip:not(.slip-used)::before { background: var(--lime-wash); }
.allowance-caption { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.allowance-large .allowance-slips { gap: 10px; }
.allowance-large .slip { width: 40px; height: 54px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.allowance-large .slip::before { inset: 2px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.allowance-large .slip::after { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .slip-spent::before { animation: none; } }

/* Links styled as actions. */
.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--ink); border-radius: 5px; background: var(--ink); color: var(--accent); font-weight: 600; text-decoration: none; }
.button-link:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--accent); }
.button-secondary { background: var(--paper); color: var(--ink); border-color: var(--border); }
.button-secondary:hover { background: var(--surface); border-color: var(--strong-border); color: var(--ink); }
.plain-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; text-decoration: underline; }
.plain-link:hover { background: none; color: var(--accent-ink); }
button[data-busy='true']::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: billing-spin .8s linear infinite; }
@keyframes billing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[data-busy='true']::before { animation: none; } }

/* Report preview: unlock panel. */
.unlock-gate { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); margin: 28px 0 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.gate-copy { padding: 30px 32px; }
.gate-copy h2 { font-size: 24px; letter-spacing: -.4px; }
.gate-copy > p { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 52ch; }
.gate-included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; }
.gate-included li { position: relative; padding-left: 20px; line-height: 1.45; }
.gate-included li::before { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 12px; background: var(--accent);
  border: 1px solid var(--accent-ink); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.gate-action { display: grid; align-content: center; gap: 16px; padding: 30px 32px; background: var(--lime-wash); border-left: 1px solid var(--line); }
.gate-price { margin: 0; font-size: 14px; color: var(--muted); }
.gate-price strong { display: block; color: var(--ink); font-size: 30px; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.gate-actions button, .gate-actions .button-link { min-width: 190px; }
.gate-secondary { font-size: 13px; }
.gate-note { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--warning-surface); color: var(--warning-ink); font-size: 13px; line-height: 1.5; }
.gate-status { margin: 0; font-size: 13px; color: var(--muted); }
.unlock-gate:is([data-state='unlocked'], [data-state='ready'], [data-state='exhausted'], [data-state='pending'], [data-state='loading'], [data-state='unknown'], [data-state='finishing']) .gate-action { background: var(--paper); }
.unlock-gate:is([data-state='suspended'], [data-state='waiting-payment']) .gate-action { background: var(--warning-surface); }
.unlock-gate[data-state='unavailable'] .gate-action button:disabled { cursor: default; opacity: 1; background: var(--surface); color: var(--muted); border-color: var(--line); }
.unlock-gate button:disabled:not([data-busy='true']) { cursor: not-allowed; }
.unlock-gate .confirm-panel { margin: 0; }

/* Confirmation used for unlock and cancel. */
.confirm-panel { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper); }
.confirm-panel h3 { font-size: 17px; outline: none; }
.confirm-panel p { margin: 0; font-size: 14px; color: var(--muted); }
.confirm-panel .gate-note { color: var(--warning-ink); }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.confirm-error { color: var(--error-ink) !important; }
.confirm-danger { border-color: var(--error-border); }
.confirm-danger .confirm-actions button:first-child { background: var(--error-ink); border-color: var(--error-ink); color: var(--paper); }
.confirm-danger .confirm-actions button:first-child:hover { background: #7d2919; }

/* Plan facts (checkout, account, pricing). */
.plan-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.plan-facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.plan-facts > div:first-child { border-top: 0; }
.plan-facts dt { margin: 0; font-size: 13px; color: var(--muted); }
.plan-facts dd { margin: 0; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface); color: var(--ink); }
.status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-positive { background: var(--positive-surface); color: var(--positive-ink); }
.status-warning { background: var(--warning-surface); color: var(--warning-ink); }

/* Notices for analysis admission limits on the home page. */
.limit-notice { display: grid; gap: 6px; width: min(1000px, calc(100% - 64px)); margin: 20px auto 0; padding: 18px 20px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent-ink); border-radius: 8px; background: var(--paper); }
.limit-notice strong { font-size: 15px; }
.limit-notice p { margin: 0; color: var(--muted); font-size: 14px; }
.limit-notice a { justify-self: start; font-size: 14px; font-weight: 500; }

/* Home: price disclosure under the form. */
.pricing-note { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pricing-note a { color: var(--ink); font-weight: 500; }
.entry-billing .pricing-note { margin: 0; text-align: left; }
.header-link { font-size: 14px; color: var(--ink); text-decoration: none; padding: 10px 4px; }
.header-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .unlock-gate { grid-template-columns: minmax(0, 1fr); }
  .gate-copy, .gate-action { padding: 24px 20px; }
  .gate-action { border-left: 0; border-top: 1px solid var(--line); }
  .gate-included { grid-template-columns: minmax(0, 1fr); }
  .gate-actions button, .gate-actions .button-link { width: 100%; }
  .plan-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .limit-notice { width: calc(100% - 40px); }
}
button.plain-link { min-height: 40px; }
.pricing-note[data-mode='full'] { color: var(--ink); }
.overlap-prompt { max-width: 640px; margin: 8px 0 24px; }