/* Settings › Predictions (front/js/predictionsSettings.js) — mock Predictions.dc.html, Settings view.
   Theme tokens only (style.css :root / [data-theme="light"]); never hard-coded colors. */
.pr-page { display: flex; flex-direction: column; gap: 22px; }
.pr-empty { padding: 40px 0; text-align: center; color: var(--text-dim); font-size: 13.5px; }
.pr-head { margin-bottom: -6px; }
.pr-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.pr-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 3px; text-wrap: pretty; }
.pr-dim { color: var(--text-dim); }
.pr-link { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; text-decoration: none; }
.pr-link:hover { text-decoration: underline; }
.pr-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; font-family: inherit; }
.pr-x:hover { color: var(--danger-soft); }
.pr-page .ro, .pr-page [aria-disabled="true"] { cursor: not-allowed !important; }

/* Cards */
.pr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px 24px; }
.pr-card-head { padding: 16px 0 4px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pr-card-head.bottom { align-items: flex-end; padding-bottom: 12px; }
.pr-card-title { font-size: 14px; font-weight: 600; }
.pr-card-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 2px; }
.pr-help-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pr-help-btn { background: none; border: 1px solid var(--border-2); border-radius: 6px; color: var(--text-muted); font-size: 11.5px; font-weight: 600; padding: 2px 8px; cursor: pointer; font-family: inherit; }
.pr-help-btn:hover { border-color: var(--border-3); color: var(--text); }
.pr-evidence-site { font-size: 11.5px; color: var(--text-dim); }
.pr-help { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.pr-help b { color: var(--text); }

/* Site policy rows */
.pr-prow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pr-prow:first-of-type { border-top: none; }
.pr-prow.top { align-items: flex-start; }
.pr-prow-label { font-size: 13.5px; font-weight: 500; }
.pr-prow-note { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.pr-hours { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.pr-days { display: grid; grid-template-columns: repeat(7, minmax(64px, 1fr)); gap: 6px; }
.pr-day { display: flex; flex-direction: column; gap: 4px; }
.pr-day-btn { font-size: 11px; font-weight: 600; padding: 4px 0; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-dim); cursor: pointer; font-family: inherit; }
.pr-day-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.pr-time { font-size: 11px; padding: 3px 4px; border: 1px solid var(--border-2); border-radius: 5px; background: var(--surface-2); color: var(--text); width: 100%; box-sizing: border-box; font-family: inherit; color-scheme: inherit; }
.pr-time:disabled { opacity: .45; }

/* Segments + toggles */
.pr-seg { display: flex; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 2px; gap: 2px; width: fit-content; flex-wrap: wrap; }
.pr-seg button { background: transparent; border: none; color: var(--text-mid); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.pr-seg button:hover { color: var(--text); }
.pr-seg button.on { background: var(--surface-4); color: var(--text); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), calc(.12 * var(--shadow-k))); }
:root[data-theme="light"] .pr-seg button.on { background: #fff; }
.pr-seg button.off { color: var(--text-quiet); text-decoration: line-through; cursor: not-allowed; }
.pr-seg.ro button { cursor: default; }
.pr-aut-cell .pr-seg button { font-size: 11px; padding: 5px 9px; gap: 1px; }
.pr-drawer .pr-seg button { font-size: 11px; padding: 5px 8px; }
.pr-toggle { width: 38px; height: 22px; border-radius: 11px; border: none; cursor: pointer; background: var(--border-4); position: relative; flex-shrink: 0; padding: 0; }
.pr-toggle .pr-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .25); transition: left .15s; }
.pr-toggle.on { background: var(--accent); }
.pr-toggle.on .pr-knob { left: 19px; }
.pr-toggle.ro { cursor: default; }

/* Event types table */
.pr-types { padding-bottom: 12px; overflow-x: auto; }
.pr-types .pr-grid { min-width: 640px; }
.pr-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 250px) minmax(190px, 220px) 46px; gap: 14px; align-items: center; }
/* The mock is a 1280px page; let this section use the full settings width. */
.sp-main:has(#sp-predictions) { max-width: none; }
.pr-thead { padding: 0 0 8px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.pr-group { padding: 10px 0 4px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; border-top: 1px solid var(--border); }
.pr-row { border-top: 1px solid var(--border-soft); }
.pr-rowmain { padding: 11px 0; cursor: pointer; }
.pr-row.dim .pr-rowmain { opacity: .55; }
.pr-type { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pr-type-text { min-width: 0; }
.pr-type-name { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-type-det { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.pr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border-3); }
.pr-dot.auto { background: var(--accent); }
.pr-dot.recommend { background: var(--blue); }
.pr-dot.notify { background: var(--text-mid); }
.pr-dot.off { background: var(--border-3); }
.pr-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.pr-tag.blue { color: var(--blue); background: rgba(var(--blue-rgb), .12); padding: 2px 7px; border-radius: 6px; }
.pr-tag.rev { color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.pr-tag.irr { color: var(--amber); background: rgba(var(--amber-rgb), .10); }
.pr-tag.muted { color: var(--text-dim); background: var(--surface-3); }
.pr-timing-cell { min-width: 0; }
.pr-timing-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-timing-text { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-stage { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; }
.pr-stage.learned { color: var(--accent); background: rgba(var(--accent-rgb), .10); }
.pr-stage.locked  { color: var(--blue); background: rgba(var(--blue-rgb), .10); }
.pr-stage.default { color: var(--amber); background: rgba(var(--amber-rgb), .10); }
.pr-stage.rule    { color: var(--text-mid); background: var(--surface-3); }
.pr-stage.off     { color: var(--text-dim); background: var(--surface-3); }
.pr-evidence { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.pr-bar { width: 60px; height: 4px; border-radius: 2px; background: var(--border-2); position: relative; overflow: hidden; flex-shrink: 0; display: inline-block; }
.pr-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.pr-bar-fill.learned { background: var(--accent); }
.pr-bar-fill.locked  { background: var(--blue); }
.pr-bar-fill.default { background: var(--amber); }
.pr-bar-fill.rule    { background: var(--text-mid); }
.pr-bar-fill.off     { background: var(--text-dim); }
.pr-aut-cell { min-width: 0; }
.pr-unlock { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.pr-foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.pr-foot b { color: var(--text-muted); }

/* Drawer */
.pr-drawer { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin: 0 0 14px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pr-dh { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.pr-dtext { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.pr-actions { display: flex; flex-direction: column; gap: 7px; }
.pr-action { display: flex; align-items: flex-start; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
.pr-action[aria-disabled="true"] { opacity: .55; }
.pr-box { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border-4); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--accent-ink); font-size: 10px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.pr-box.on { background: var(--accent); border-color: var(--accent); }
.pr-action-label { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
.pr-ovs { display: flex; flex-direction: column; gap: 6px; }
.pr-ov { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.pr-ov-main { min-width: 0; flex: 1; }
.pr-ov-name { font-size: 12.5px; font-weight: 500; }
.pr-ov-rule { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
.pr-ov-edit { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.pr-sel { font-size: 11px; padding: 3px 5px; border: 1px solid var(--border-2); border-radius: 5px; background: var(--surface-2); color: var(--text); font-family: inherit; max-width: 100%; }
.pr-min { width: 96px; }
.pr-picker { display: flex; gap: 6px; flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--border-3); border-radius: 8px; padding: 8px 10px; align-items: center; font-size: 11.5px; }
.pr-chip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); cursor: pointer; font-family: inherit; }
.pr-chip.on { border-color: var(--accent); color: var(--accent); }
.pr-add { align-self: flex-start; padding: 2px 0; }
.pr-graduate { margin-top: 8px; font-size: 12px; color: var(--accent); background: rgba(var(--accent-rgb), .09); border-radius: 7px; padding: 7px 10px; line-height: 1.45; }
.pr-graduate a { font-weight: 600; color: inherit; }
.pr-last { margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }
.pr-adv-label { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.pr-adv-note { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.pr-timing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-lock { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border-2); background: transparent; color: var(--text-mid); cursor: pointer; font-family: inherit; }
.pr-lock.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.pr-stepper { display: flex; align-items: center; gap: 4px; }
.pr-stepper button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; color: var(--text-mid); font-size: 13px; line-height: 1; font-family: inherit; }
.pr-stepper span { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }

/* Recent changes */
.pr-recent { padding: 16px 24px 10px; }
.pr-recent .pr-card-head { padding: 0; align-items: center; margin-bottom: 6px; }
.pr-audit { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.pr-audit .pr-dim { font-size: 11.5px; white-space: nowrap; }

@media (max-width: 900px) {
  .pr-grid { grid-template-columns: minmax(160px, 1fr) 200px 190px 40px; gap: 10px; }
  .pr-drawer { margin-left: 0; }
}