/**
 * surf-call.css — the surfability card.
 *
 * admin/LOCAL-INTEL-ENGINE.md §13.6-13.9. Built on the --ws-* tokens in theme.css so the light
 * theme comes for free. Every token carries a dark-palette fallback because playbook.php is a
 * standalone page with its own variables and does not load theme.css — without the fallbacks the
 * card renders as unstyled text on exactly the page the "How this works" link points at.
 *
 * The visual hierarchy is deliberate and follows from what the card is FOR: the window is the
 * product. A rider already suspects the weekend might be good — what they cannot get anywhere else
 * is "11am to 2pm". So the time is the largest thing on the card, the band word sits beside it as
 * a qualifier, and the numeric score appears nowhere at all (§13.9, and settled with Jeff).
 */

.surf-call {
    background: var(--ws-bg-card, rgba(255,255,255,0.05));
    border: 1px solid var(--ws-border-subtle, rgba(255,255,255,0.06));
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: var(--ws-shadow-card, 0 4px 20px rgba(0,0,0,0.3));
    /* The card is data, not chrome — a left rule ties the whole block to the "on" colour without
       flooding it, which a tinted background would. */
    border-left: 3px solid var(--ws-border-default, rgba(255,255,255,0.1));
}
.surf-call.surf-call-flat { border-left-color: var(--ws-border-subtle, rgba(255,255,255,0.06)); }
.surf-call:not(.surf-call-flat) { border-left-color: #38BDF8; }

/* ── header ──────────────────────────────────────────────────────────────────────────────── */
.surf-call-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}
.surf-call-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ws-text-muted, #64748B);
    margin: 0;
}

/*
 * The unproven chip. Muted rather than alarming — this is a standing statement of fact about the
 * model, not a transient warning, and a red badge would read as "something is broken" and get
 * dismissed. It has to still be there in six months.
 */
.surf-call-chip {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FBBF24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 999px;
    padding: 2px 8px;
    cursor: help;
}

/* ── which beach ─────────────────────────────────────────────────────────────────────────── */
.surf-call-loc {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.surf-call-spot {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ws-text-heading, #F1F5F9);
}
/* Never "nearby". If we are answering about a different beach, that is the headline. */
.surf-call-dist {
    font-size: 0.78rem;
    color: var(--ws-text-secondary, #94A3B8);
}

.surf-call-verdict {
    font-size: 0.88rem;
    color: var(--ws-text-secondary, #94A3B8);
    margin: 0 0 10px;
    line-height: 1.45;
}

/* ── the days ────────────────────────────────────────────────────────────────────────────── */
.surf-call-days {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.surf-day {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "label  call"
        ".      detail";
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
    padding: 8px 0 0;
    border-top: 1px solid var(--ws-border-subtle, rgba(255,255,255,0.06));
}
.surf-call-days > .surf-day:first-child { border-top: none; padding-top: 0; }

.surf-day-when  { grid-area: label; }
.surf-day-call  { grid-area: call; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.surf-day-detail { grid-area: detail; }

.surf-day-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ws-text-secondary, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/*
 * The band word. Sized as a qualifier, not the answer — "good" is the least surprising thing on
 * the card and the window is the reason anyone opened it.
 */
.surf-band {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.surf-band-great    { color: #34D399; }
.surf-band-good     { color: #38BDF8; }
.surf-band-marginal { color: #FBBF24; }
.surf-band-none,
.surf-band-flat,
.surf-band-not-rideable { color: var(--ws-text-muted, #64748B); font-weight: 600; }

/* The product. Biggest thing on the card. */
.surf-window {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ws-text-primary, #E2E8F0);
    line-height: 1.3;
}

.surf-day-detail {
    font-size: 0.76rem;
    color: var(--ws-text-muted, #64748B);
    line-height: 1.4;
}
.surf-day-tomorrow { color: var(--ws-text-secondary, #94A3B8); }

.surf-day.is-off .surf-day-label { color: var(--ws-text-muted, #64748B); }

.surf-call-more-days {
    font-size: 0.76rem;
    color: var(--ws-text-secondary, #94A3B8);
    margin: 10px 0 0;
}

.surf-call-empty {
    font-size: 0.85rem;
    color: var(--ws-text-secondary, #94A3B8);
    margin: 4px 0 0;
}

/* ── the other spots ─────────────────────────────────────────────────────────────────────────
   A name and a weekday, nothing else. This strip answers "is anywhere else worth a look", and
   the moment it grows a window or a size it stops being a strip and becomes a second card. It
   wraps rather than scrolls — a dashboard card never has a scrollbar. */
.surf-call-others {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ws-overlay-light, rgba(255,255,255,0.07));
}
.surf-call-others-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ws-text-muted, #64748B);
    margin-bottom: 7px;
}
.surf-call-others-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.surf-other {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--ws-overlay-medium, rgba(255,255,255,0.05));
    font-size: 0.76rem;
    text-decoration: none;
    color: var(--ws-text-secondary, #94A3B8);
}
.surf-other:hover { background: var(--ws-overlay-strong, rgba(255,255,255,0.09)); }
.surf-other-name { color: inherit; }
.surf-other-day { font-weight: 700; }
/* On vs flat is carried by the DAY, not by the spot name — the name is the label, the weekday
   is the answer. A flat spot stays legible rather than being greyed into unreadability. */
.surf-other.is-on .surf-other-day { color: #38BDF8; }
.surf-other.is-off .surf-other-day { color: var(--ws-text-muted, #64748B); }

/* ── upsell ──────────────────────────────────────────────────────────────────────────────── */
.surf-call-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--ws-overlay-medium, rgba(255,255,255,0.05));
    font-size: 0.76rem;
    color: var(--ws-text-secondary, #94A3B8);
}
.surf-call-upsell-link {
    font-weight: 700;
    color: #38BDF8;
    text-decoration: none;
    white-space: nowrap;
}
.surf-call-upsell-link:hover { text-decoration: underline; }

/* ── footer + the honesty line ───────────────────────────────────────────────────────────── */
.surf-call-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
/* The call is frozen hourly, so it has an age. Saying when means a stale cron looks stale rather
   than looking like a confident answer about right now. */
.surf-call-made {
    font-size: 0.7rem;
    color: var(--ws-text-muted, #64748B);
}
.surf-call-more {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ws-text-secondary, #94A3B8);
    text-decoration: none;
}
.surf-call-more:hover { color: var(--ws-text-primary, #E2E8F0); }

/*
 * The honesty note is part of the card, not a footnote in a tooltip. It is small, but it is always
 * present and it is readable — three labelled days is a demonstration, not a validation, and the
 * card has to survive being wrong.
 */
.surf-call-note {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--ws-border-subtle, rgba(255,255,255,0.06));
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--ws-text-muted, #64748B);
}
.surf-call-note-link {
    color: var(--ws-text-secondary, #94A3B8);
    text-decoration: none;
    white-space: nowrap;
    margin-left: 6px;
    font-weight: 600;
}
.surf-call-note-link:hover { color: var(--ws-text-primary, #E2E8F0); text-decoration: underline; }

/* ── embedded in the playbook ────────────────────────────────────────────────────────────── */
/* On the spot page the card is not a card — it sits inside a section that already has a heading
   and a surface, so it drops its own chrome and keeps only the day layout. */
.surf-call-embedded {
    background: none;
    border: none;
    border-left: none;
    box-shadow: none;
    padding: 0;
}

.surf-method {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ws-border-subtle, rgba(255,255,255,0.06));
}
.surf-method-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--ws-text-secondary, #94A3B8);
}
.surf-method p {
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--ws-text-muted, #64748B);
    margin: 0 0 10px;
}
.surf-method p b { color: var(--ws-text-secondary, #94A3B8); }
.surf-method p a { color: #38BDF8; }

@media (max-width: 420px) {
    .surf-call { padding: 14px; }
    .surf-day {
        grid-template-columns: 1fr;
        grid-template-areas: "label" "call" "detail";
        row-gap: 3px;
    }
    .surf-window { font-size: 0.96rem; }
}