/* Paywall Checker: layered on top of ../style.css, which provides the shared
   tokens (light/dark), settings bar, tabs, cards, buttons and footer. */

/* Dark-red "WORK IN PROGRESS" ribbon, pinned to the top-right corner. */
.wip-ribbon {
  position: fixed;
  top: 18px;
  right: -46px;
  z-index: 9999;
  transform: rotate(45deg);
  transform-origin: center;
  background: #8b0000;
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  padding: 6px 48px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
[data-theme="light"] .wip-ribbon { background: #8b0000; color: #fff; }

.hero.welcome-state { padding-bottom: 1rem; max-width: 640px; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: .4rem; max-width: none; }
.subtitle { margin: 0; color: var(--text-secondary); font-size: 1.05rem; }

.lbl { display: block; font-weight: 700; margin-bottom: 8px; }
.lbl-sm { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.opt { font-weight: 400; color: var(--text-muted); }
#refs, #msg-text, .input-card input[type=email] {
  width: 100%; font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px;
}
#refs { font-size: .92rem; min-height: 150px; resize: vertical; }
#msg-text { font-size: .9rem; line-height: 1.5; min-height: 300px; resize: vertical; }
#refs:focus, #msg-text:focus, .input-card input:focus { outline: 2px solid var(--primary-light); outline-offset: 0; }
.email-row { margin-top: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

.bar { height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
#bar-fill { height: 100%; width: 0; background: var(--primary-light); transition: width .2s; }
.progress-label { font-size: .9rem; color: var(--text-secondary); margin-bottom: 8px; }

.pw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 auto 16px; max-width: 720px; }
.pw-stat { background: var(--primary-faint); border-radius: 3px; padding: 14px 16px; text-align: center; }
.pw-stat-label { font-size: .8rem; color: var(--text-secondary); }
.pw-stat-value { font-family: var(--font-display); font-size: clamp(1.4rem, 4.4vw, 2rem); font-weight: 700; color: var(--primary-dark); }
.pw-stat-value small { font-size: .6em; color: var(--text-muted); font-weight: 400; }

.cost-banner { background: var(--brand); color: #fff; border-radius: 3px; padding: 22px 20px; text-align: center; max-width: 720px; margin: 0 auto 24px; }
.cost-lead { font-size: clamp(1rem, 3vw, 1.25rem); }
.cost-value { font-family: var(--font-display); font-size: clamp(2.6rem, 9vw, 4.2rem); font-weight: 700; line-height: 1.1; margin: 4px 0; }
.cost-sub { font-size: .85rem; color: #cfe9f7; }

.list-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.list-head h2 { margin: 0; }
.count { color: var(--text-muted); font-weight: 400; font-size: .85em; }
.art-list { list-style: none; margin: 12px 0 0; padding: 0; }
.art-list li { padding: 12px 0; border-top: 1px solid var(--border-light); }
.art-list li:first-child { border-top: 0; }
.art-title { font-weight: 700; }
.art-meta { font-size: .85rem; color: var(--text-muted); margin-top: 2px; }
.art-links { font-size: .85rem; margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; }
.search-links { margin-top: 6px; color: var(--text-muted); }
.search-lbl { font-weight: 700; color: var(--text-secondary); }
.price { display: inline-block; background: var(--primary-faint); color: var(--primary-dark); border-radius: 3px; padding: 0 7px; margin-left: 8px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.tag-ok { color: var(--primary); font-weight: 700; }
.raw { font-size: .85rem; color: var(--text-secondary); word-break: break-word; }

.details-card summary, .faq summary { cursor: pointer; font-weight: 700; }
.faq { max-width: 720px; margin: 30px auto 10px; }
.faq h2 { font-family: var(--font-display); color: var(--slate); }
.faq details { border-top: 1px solid var(--border-light); padding: 12px 0; }
.faq details > div, .faq details > p { margin-top: 10px; }
.table-wrap { overflow-x: auto; margin-top: 10px; }
.price-table { border-collapse: collapse; font-size: .9rem; width: 100%; }
.price-table th, .price-table td { border-bottom: 1px solid var(--border-light); padding: 5px 10px; text-align: left; }
.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; }

.msg-modes { margin: 12px 0; display: inline-flex; }
.mode-btn { background: var(--card); color: var(--text-muted); border: none; font: inherit; font-size: .85rem; font-weight: 700; padding: 7px 14px; cursor: pointer; }
.mode-btn.active { background: var(--brand); color: #fff; }
.mode-btn:hover:not(.active) { background: var(--primary-faint); color: var(--primary-dark); }

@media (max-width: 520px) { .pw-stats { grid-template-columns: 1fr; } }