/* Premium "Look back" bar on spot pages (history.js). Same retro palette as spot.css. */
.hist{margin:12px;padding:10px 12px;border:2px solid var(--navy);border-radius:8px;background:var(--cream);box-shadow:3px 3px 0 var(--navy)}
.hist .hrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.hist .hlbl{display:flex;align-items:center;gap:8px;font:800 13px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--navy)}
.ptag{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--mustard);color:var(--navy);border:1.5px solid var(--navy);font:800 10px var(--body);letter-spacing:.1em;text-transform:uppercase}
.hform{display:flex;gap:6px;align-items:center}
.hform input{font:600 14px var(--narrow);color:var(--ink);background:var(--paper);border:2px solid var(--navy);border-radius:6px;padding:5px 8px;min-width:0}
.hchip{border:1.5px solid var(--navy);background:var(--paper);color:var(--navy);border-radius:999px;padding:5px 10px;font:700 12px var(--body);cursor:pointer}
.hchip:hover:not(:disabled){background:var(--sand)}
.hchip:disabled{opacity:.45;cursor:default}
.hist .hsub{margin:6px 0 0;font:500 12.5px/1.4 var(--body);color:var(--muted)}
.hmsg:empty{display:none}
.hmsg{margin-top:8px;font:600 13px/1.4 var(--body);color:var(--navy)}
.hmsg.bad{color:var(--rust)}
.hmsg.ok{color:var(--olive)}
.hlink{border:0;background:none;padding:0;font:inherit;color:var(--teal);text-decoration:underline;cursor:pointer}
.hist.on{background:var(--navy);color:var(--cream)}
.hist.on .hlbl{color:var(--cream)}
.hist.on .hsub{color:var(--sage)}
.hist .hrange{font:800 15px var(--narrow);flex:1;min-width:140px}
.hist .hnav{display:flex;gap:6px}
.hist.on .dbt{margin-left:auto}
.hist.loading{opacity:.7;pointer-events:none}
/* Looking back: tint the forecast so nobody mistakes past surf for the live forecast */
body.so-hist #now, body.so-hist #flist, body.so-hist .dstrip{background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(31,48,68,.035) 14px 28px)}
body.so-hist #drive, body.so-hist #cams{display:none}

body.so-hist .meta span:last-child{visibility:hidden}
/* Closed: just the one button */
.hist.closed{padding:0;border:0;background:none;box-shadow:none}
.hbig{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid rgba(31,48,68,.18);background:#fff;color:var(--navy);border-radius:12px;padding:11px 14px;font:700 14px var(--body);box-shadow:0 1px 2px rgba(31,48,68,.06),0 4px 14px rgba(31,48,68,.06);cursor:pointer;transition:box-shadow .15s,transform .15s}
.hbig svg{width:18px;height:18px;flex:none;color:var(--orange)}
.hbig .ptag{margin-left:2px}
.hbig:hover{box-shadow:0 2px 4px rgba(31,48,68,.08),0 8px 22px rgba(31,48,68,.1);transform:translateY(-1px)}
.hbig:disabled{opacity:.7;cursor:progress}
@media (min-width:1000px){.hbig{width:auto;display:inline-flex}}
.hx{margin-left:auto;border:0;background:none;color:inherit;font:700 24px/1 var(--body);padding:0 4px;cursor:pointer;opacity:.7}
.hx:hover{opacity:1}

/* Premium card: a compact pricing card */
.hist:has(.pcard){padding:0;border:0;background:none;box-shadow:none}
.pcard{max-width:400px;margin:0 auto;padding:18px 18px 14px;border:1px solid rgba(31,48,68,.12);border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(31,48,68,.05),0 10px 30px rgba(31,48,68,.10)}
.ptop{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pcard .ptag{border:0;background:#fdf0dc;color:#b8601a;font-size:10px;padding:3px 8px}
.pcard .hx{margin:0;font-size:20px;color:var(--muted)}
.pcard h3{margin:0 0 12px;font:800 19px/1.2 var(--body);letter-spacing:-.01em;color:var(--navy)}
.pfeat{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px;font:500 14px/1.3 var(--body);color:#3d4a55}
.pfeat li{display:flex;gap:9px;align-items:flex-start}
.pfeat svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--teal)}
.pbuy{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pprice{display:flex;align-items:baseline;gap:2px;font:500 13px var(--body);color:var(--muted);flex-wrap:wrap}
.pprice b{font:800 24px/1 var(--body);letter-spacing:-.02em;color:var(--navy)}
.pprice em{flex-basis:100%;margin-top:3px;font:600 12px var(--body);font-style:normal;color:var(--olive)}
.pgo{flex:none;background:var(--navy);color:#fff;border-radius:999px;padding:11px 20px;font:700 14px var(--body);text-decoration:none;box-shadow:0 4px 12px rgba(31,48,68,.22);transition:transform .15s,box-shadow .15s}
.pgo:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,48,68,.28)}
.psoon{font:600 13px var(--body);color:var(--muted)}
.pproof{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #eef0f2}
.pfaces{display:flex}
.pfaces img{width:22px;height:22px;margin-left:-7px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:var(--sand)}
.pfaces img:first-child{margin-left:0}
.pproof>span:last-child{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.2}
.pstars{color:var(--mustard);font-size:12px;letter-spacing:1px}
.pjoin{font:500 12px var(--body);color:var(--muted)}
.pcard .hmsg{text-align:center}
@media (min-width:1000px){#ov .hist{margin:14px 16px;grid-column:1/-1}}
/* Premium cams (spot.js): a locked cam shows its name and the way in, never its picture */
.camlock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px;text-align:center;color:#fff;background:radial-gradient(120% 90% at 50% 0%,#2f5f73 0%,#1b3446 55%,#14212f 100%)}
.camlock .ptag{border:0;background:#fdf0dc;color:#b8601a;margin-bottom:2px}
.camlock b{font:700 15px var(--body);max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camlock small{font:600 11px var(--narrow);opacity:.75}
.camlock .camgo{display:inline-flex;align-items:center;gap:7px;margin-top:8px;border:0;border-radius:999px;background:#fff;color:var(--navy);padding:9px 16px;font:700 13px var(--body);box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;transition:transform .15s}
.camlock .camgo:hover{transform:translateY(-1px)}
.camlock .camgo:disabled{opacity:.6;cursor:default}
.camlock .camgo .lk{width:13px;height:13px}
.camlock em{font:600 11px var(--narrow);font-style:normal;opacity:.7;margin-top:2px}
.thumb.locked .im{display:grid;place-items:center;background:linear-gradient(160deg,#2f5f73,#14212f);color:#fdf0dc}
.thumb.locked .lk{width:16px;height:16px}
.camcap .cr.pc{text-decoration:none;color:#b8601a;font-weight:700}