/* "My reports" (account.html), on top of home.css: the member's sky, reports, the buying section,
   partner matching, predictions, gifts and settings. Also styles the markup account-page.js renders. */
.acc-email { color: var(--mist); font-size: 14px; }
.acc-notice { max-width: 1240px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 8px; background: rgba(212, 168, 98, 0.14); color: var(--ivory); }
.acc-center { max-width: 640px; margin: 8vh auto; text-align: center; color: var(--mist); }
.acc-center .lede { margin: 12px auto; }
.acc-center a { color: var(--gold); }

.acc-signin { max-width: 1040px; margin: 6vh auto 2vh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.acc-signin .card label { color: var(--ink); }
.acc-sky { padding-bottom: 8px; }
.acc-sky h1 { margin-bottom: 18px; }
.acc-sky .button { margin-top: 6px; }

/* ---- Paper half -------------------------------------------------------------------------------------------- */
.below.acc-main > .acc-section { padding: clamp(40px, 6vw, 72px) 0; }
.acc-banner { margin-top: 28px; padding: 14px 18px; border-radius: 10px; background: #e6f2ea; color: #1f5d3a; }
.acc-section h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
.acc-section h3 { font-size: 21px; margin: 0 0 6px; }
.acc-section a { color: var(--forest); }

.report-list { display: grid; gap: 12px; }
.report-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: center; }
.report-item h2 { font-size: 22px; margin: 0 0 4px; }
.report-item p { margin: 2px 0; }
.report-item-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.field-note { color: var(--muted); font-size: 14px; }
.empty-reports { background: #fff; border: 1px dashed #c9d3cf; border-radius: 12px; padding: 22px 24px; }
.empty-reports p { margin: 4px 0 0; color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--paper); color: var(--muted); }
.status-ready { background: #e6f2ea; color: #1f5d3a; }
.status-busy, .status-pending { background: #fbf4e6; color: #7a5516; }
.status-warn { background: #fff0ee; color: #8d3125; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: acc-pulse 1.2s ease-in-out infinite; }
@keyframes acc-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Buttons rendered by account-page.js */
.primary-button, .secondary-button, .button-line, .button-danger {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-control);
  font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none;
}
.primary-button { background: var(--forest); color: #fff; border: 0; }
.secondary-button, .button-line { background: #fff; color: var(--forest); border: 1px solid #c9d3cf; }
.button-line:hover, .secondary-button:hover { border-color: var(--forest); }
.button-danger { background: #fff; color: var(--error); border: 1px solid #e8c1b9; }

/* ---- Buying section ------------------------------------------------------------------------------------------- */
.acc-unlock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.unlock-intro > p { color: var(--muted); max-width: 46ch; }
.contents { list-style: none; counter-reset: chapter; padding: 0; margin: 20px 0 14px; }
.contents li { counter-increment: chapter; display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.contents li::before { content: counter(chapter); font-family: var(--serif); color: var(--gold-deep); min-width: 22px; }
.contents span { flex: 1; }
.contents small { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.contents .is-free small { color: #1f5d3a; }
.contents .is-locked small::before {
  content: ''; width: 10px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 6V4a3.5 3.5 0 0 1 7 0v2h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 6V4a3.5 3.5 0 0 1 7 0v2h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h4V4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contents .is-free small::before { content: '✓'; font-weight: 700; }
.acc-plans { display: grid; gap: 14px; }
.acc-plan { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.acc-plan.is-featured { border: 2px solid var(--gold-deep); box-shadow: 0 18px 40px rgba(28, 48, 42, 0.12); }
.acc-plan .plan-flag { margin: 0; font-size: 13px; font-weight: 700; color: var(--gold-deep); min-height: 0; }
.acc-plan .plan-flag:empty { display: none; }
.acc-plan h3 { font-size: 22px; margin: 2px 0 0; }
.acc-plan .plan-price { font-family: var(--serif); font-size: 30px; color: var(--forest); margin: 2px 0 6px; }
.acc-plan p { margin: 0 0 14px; color: var(--muted); }
.acc-plan .button { width: 100%; }
.acc-plan .button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Partner matching ------------------------------------------------------------------------------------- */
.acc-partner { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: clamp(20px, 4vw, 48px); align-items: center; }
.acc-partner p { color: var(--muted); max-width: 56ch; margin: 0; }
.partner-art { position: relative; width: 150px; height: 96px; }
.partner-art span { position: absolute; top: 0; width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--gold-deep); }
.partner-art span:first-child { left: 0; }
.partner-art span:last-child { right: 0; border-color: var(--forest); background: rgba(180, 134, 71, 0.08); }

/* ---- Predictions, gifts, settings -------------------------------------------------------------------------- */
.prediction-list ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.prediction { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.answer-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.acc-small p { color: var(--muted); }
.acc-small label { color: var(--ink); margin-top: 14px; }
.inline-form .inline-field input { max-width: 340px; }
.acc-settings summary { cursor: pointer; font-weight: 700; font-size: 18px; }
.settings-toggles { border: 0; padding: 0; margin: 16px 0; }
.settings-toggles legend { font-weight: 700; margin-bottom: 4px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.danger-zone { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.danger-zone input { max-width: 260px; margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
  .acc-email { display: none; }
}
@media (max-width: 900px) {
  .acc-signin, .acc-unlock { grid-template-columns: 1fr; }
  .acc-partner { grid-template-columns: 1fr; }
  .partner-art { display: none; }
  .report-item { grid-template-columns: 1fr; }
}