/* page.css — dashboard and popup layout (the blocks themselves come from ui.css) */
:root { color-scheme: light dark; }
html, body { margin: 0; }
body.rscs { background: #f7f8f8; color: var(--rs-fg); font-size: 15px; }
@media (prefers-color-scheme: dark) {
  body.rscs { --rs-bg: #1b1d1d; --rs-fg: #eef1f1; --rs-muted: #a8b0b0; --rs-line: #354040; --rs-soft: #253030;
    --rs-accent: #4fd1c5; --rs-accent-fg: #0f1414; --rs-good: #81c784; --rs-warn: #ffb74d; --rs-bad: #ef9a9a; --rs-info: #9fa8ff; background: #121515; }
  body.rscs .rscs-score-num, body.rscs .rscs-ico { color: #0f1414; }
  body.rscs .rscs-pro { background: #c5cae9; color: #0f1414; border-color: #c5cae9; }
}
a { color: var(--rs-accent); }
.pg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.pg-top { background: var(--rs-bg); border-bottom: 1px solid var(--rs-line); position: sticky; top: 0; z-index: 5; }
.pg-top-in { display: flex; align-items: center; gap: 10px; min-height: 52px; flex-wrap: wrap; }
.pg-top-in > b { font-size: 16px; }
.pg-nav { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; font-size: 14px; }
.pg-nav a { text-decoration: none; color: var(--rs-muted); }
.pg-nav a:hover { color: var(--rs-fg); }
.pg-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding: 20px 0 8px; align-items: start; }
.pg-hero h1 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; }
.pg-sub { margin: 0 0 12px; color: var(--rs-muted); }
.pg-result { margin: 4px 0; }
.pg-result .rscs-score { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pg-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.pg-form .rscs-input { flex: 1 1 240px; }
.pg-buy-mini { display: none; margin: 6px 0; }
.pg-light { margin: 10px 0 0; padding: 8px 12px; border-left: 4px solid var(--rs-accent); background: var(--rs-bg); border-radius: 0 8px 8px 0; font-size: 14px; }
.pg-buy { background: var(--rs-bg); border: 2px solid #1a237e; border-radius: 14px; padding: 14px 16px; position: sticky; top: 64px; }
.pg-buy h2, .pg-pro h2 { font-size: 18px; margin: 0 0 6px; }
.pg-price { font-size: 18px; font-weight: 800; margin: 8px 0; }
.pg-sec { background: var(--rs-bg); border: 1px solid var(--rs-line); border-radius: 14px; padding: 16px; margin: 16px 0; }
.pg-sec h2 { font-size: 20px; margin: 0 0 6px; }
.pg-sec h3 { font-size: 15px; margin: 12px 0 4px; }
.pg-sec-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pg-sec-head h2, .pg-sec-head h3 { margin-right: auto; }
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-table { font-size: 13px; min-width: 560px; }
.pg-table td:nth-child(2), .pg-table th:nth-child(2) { white-space: normal; text-align: left; }
#hist-table td:nth-child(4), #hist-table th:nth-child(4) { white-space: normal; text-align: left; }
.pg-table a { color: var(--rs-fg); text-decoration: none; }
.pg-table a:hover { text-decoration: underline; }
.pg-exact td:last-child { color: var(--rs-good); font-weight: 800; }
.pg-outlier td { background: rgba(255, 183, 77, .14); }
.pg-new { margin-left: 6px; font-size: 11px; }
.pg-static { cursor: default; }
.pg-draft { display: grid; gap: 8px; }
.pg-draft label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.pg-comp { border-top: 1px solid var(--rs-line); padding-top: 8px; margin-top: 8px; }
.pg-samplenote { margin-top: 10px; }
details { border-top: 1px solid var(--rs-line); padding: 8px 0; }
summary { cursor: pointer; font-weight: 600; }
.pg-foot { padding: 8px 0 32px; }
@media (max-width: 860px) {
  .pg-hero { grid-template-columns: 1fr; }
  .pg-buy { position: static; }
  .pg-buy-mini:not([hidden]) { display: flex; }
  .pg-result .rscs-formula { display: none; }   /* the same formula is printed under the source table */
  .pg-two { grid-template-columns: 1fr; }
  .pg-nav { display: none; }
  .pg-hero h1 { font-size: 23px; }
}
/* popup */
body.pg-popup { width: 380px; min-height: 200px; font-size: 14px; }
.pp { padding: 12px; display: grid; gap: 10px; }
.pp-head { display: flex; align-items: center; gap: 8px; }
.pp-head b { flex: 1; }
.pp .rscs-score-num { width: 64px; height: 64px; padding-top: 14px; }
.pp .rscs-score-val { font-size: 26px; }
.pp-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }