/* ===== Scrim Planner =====
   Sits in the ScrimView frame (/sv/sv.css): the header, footer, hero and the
   --sv-* tokens come from there. The planner's own colour names below point at
   those tokens, so the rules further down keep reading as they always have, and
   planner.js can keep using them in the few inline styles it writes
   (--text-muted, --bg-tertiary). */
:root {
    --bg-card: var(--sv-bg-2);
    --bg-secondary: var(--sv-bg-2);
    --bg-tertiary: var(--sv-bg-3);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --border: var(--sv-line);
    --border-light: var(--sv-line-2);
    --text-primary: var(--sv-text);
    --text-secondary: var(--sv-mute);
    --text-muted: var(--sv-dim);
    --accent: var(--sv-red);
    --accent-hover: var(--sv-red-2);
    --red-bg: var(--sv-red-soft);
    --green: var(--sv-ok);
    --blue: var(--sv-blue);
    --yellow: var(--sv-warn);
    --purple: #a78bfa;
    --radius: 10px;
    --radius-lg: var(--sv-radius);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
    /* booked time: --sv-warn as rgb, for the stripes */
    --booked-rgb: 255, 182, 72;
}

.pl-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px 8px; }
.pl-wrap h1, .pl-wrap h2, .pl-wrap h3, .pl-wrap p { margin: 0; }

/* ---- hero (the landing and the "board is gone" page): .sv-hero does the rest ---- */
.pl-hero .pl-missing-cta { margin-top: 28px; }

/* ---- landing ---- */
.pl-landing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .pl-landing { grid-template-columns: minmax(0, 1fr); } }

.pl-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 60%), var(--sv-bg-2);
    border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius);
    padding: 30px;
}
/* The form people come here for: a faint red edge, nothing louder */
.pl-card-main { border-color: rgba(255, 70, 85, 0.22); box-shadow: 0 0 36px -14px rgba(255, 70, 85, 0.22); }
.pl-card h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 6px; }
.pl-card > p { color: var(--sv-mute); font-size: 14.5px; margin-bottom: 24px; }
.pl-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sv-red-2); margin-bottom: 12px;
}

.pl-field { display: block; margin-bottom: 20px; }
.pl-field > span {
    display: block; font-size: 13px; font-weight: 600; color: var(--sv-mute); margin-bottom: 8px;
}
.pl-field em { font-style: normal; color: var(--sv-dim); font-weight: 400; }
.pl-field input:not([type="checkbox"]), .pl-field select {
    display: block; width: 100%; min-width: 0; height: 44px; padding: 0 13px;
    background: var(--sv-bg); border: 1px solid var(--sv-line-2);
    border-radius: 10px; color: var(--sv-text);
    font-family: inherit; font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pl-field select { cursor: pointer; }
.pl-field input::placeholder, .pl-you input::placeholder { color: var(--sv-dim); }
.pl-field input:focus, .pl-field select:focus {
    outline: none; border-radius: 10px; border-color: var(--sv-red-line); box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.15);
}
.pl-field input[type="checkbox"] { accent-color: var(--sv-red); }
.pl-code { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.pl-code::placeholder { letter-spacing: 0.12em; font-weight: 400; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pl-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* a row of whole fields keeps the same rhythm as a single field */
.pl-row > .pl-field, .pl-modal .pl-row > .pl-field { margin-bottom: 0; }
.pl-card > .pl-row { margin-bottom: 20px; }
.pl-modal .pl-row { margin-bottom: 16px; }
@media (max-width: 560px) {
    .pl-row, .pl-row-3 { grid-template-columns: minmax(0, 1fr); }
    .pl-card > .pl-row { row-gap: 20px; }
    .pl-modal .pl-row { row-gap: 16px; }
}

.pl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--sv-line-2);
    background: var(--sv-bg-3); color: var(--sv-text); text-decoration: none; white-space: nowrap;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.3s, transform 0.2s var(--sv-ease);
}
.pl-btn:hover { border-color: var(--sv-mute); }
.pl-btn:focus-visible { border-radius: 10px; }
.pl-btn-primary, a.pl-btn-primary { background: var(--sv-red); border-color: var(--sv-red); color: #fff; }
.pl-btn-primary:hover { border-color: var(--sv-red); box-shadow: var(--sv-glow); transform: translateY(-1px); }
.pl-btn-wide { width: 100%; }
.pl-card .pl-btn-wide { height: 48px; font-size: 15px; border-radius: 12px; }
.pl-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.pl-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.pl-panel-btn { margin-top: 12px; }

.pl-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pl-chip {
    display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
    background: var(--sv-bg-3); border: 1px solid var(--sv-line-2);
    color: var(--sv-mute); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.pl-chip:hover { border-color: var(--sv-mute); color: var(--sv-text); }
.pl-chip:focus-visible { border-radius: 999px; }
.pl-chip.on { background: var(--sv-red-soft); border-color: var(--sv-red-line); color: var(--sv-red-2); }

.pl-error {
    margin-top: 12px; padding: 10px 13px; border-radius: 10px;
    background: var(--sv-red-soft); border: 1px solid var(--sv-red-line);
    color: #ffb3ba; font-size: 13.5px; line-height: 1.5;
}
.pl-note { color: var(--sv-dim); font-size: 13px; line-height: 1.55; margin-top: 10px; }
.pl-note-side { align-self: center; margin-top: 0; }
.pl-note-flush { margin-top: 0; }
.pl-signin { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sv-line); }

/* ---- board header ---- */
.pl-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px;
    padding: 36px 0 22px; border-bottom: 1px solid var(--sv-line); margin-bottom: 20px;
}
.pl-head-main { flex: 1 1 320px; min-width: 0; }
.pl-head h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.pl-head-sub { color: var(--sv-mute); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.pl-head-sub b { color: var(--sv-text); font-weight: 600; }
.pl-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pl-you {
    display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
    background: var(--sv-bg-2); border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius); padding: 12px 14px; margin-bottom: 18px;
}
.pl-you label { font-size: 13px; color: var(--sv-mute); font-weight: 600; }
.pl-you input {
    flex: 0 1 220px; min-width: 160px; height: 38px; padding: 0 12px;
    background: var(--sv-bg); border: 1px solid var(--sv-line-2);
    border-radius: 10px; color: var(--sv-text); font-family: inherit; font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pl-you input:focus { outline: none; border-radius: 10px; border-color: var(--sv-red-line); box-shadow: 0 0 0 3px rgba(255, 70, 85, 0.15); }
.pl-saved { font-size: 13px; color: var(--sv-dim); margin-left: auto; }
.pl-saved.ok { color: var(--sv-ok); }

/* Two-way switches: availability or scrims, usual week or these dates */
.pl-modes {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--sv-bg-3); border: 1px solid var(--sv-line-2); border-radius: 10px;
}
.pl-modes button {
    height: 34px; padding: 0 14px; border: none; border-radius: 7px; background: transparent; color: var(--sv-mute);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: color 0.2s, background 0.2s, box-shadow 0.3s;
}
.pl-modes button:hover { color: var(--sv-text); }
.pl-modes button:focus-visible { border-radius: 7px; }
.pl-modes button.on { background: var(--sv-red); color: #fff; box-shadow: var(--sv-glow-soft); }

/* ---- layout ---- */
.pl-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pl-body { grid-template-columns: minmax(0, 1fr); } }

.pl-grid-card {
    background: var(--sv-bg-2); border: 1px solid var(--sv-line);
    border-radius: var(--sv-radius); padding: 18px; overflow: hidden;
}
.pl-grid-scroll { overflow-x: auto; padding-bottom: 6px; }

/* ---- the grid ---- */
.pl-grid { display: grid; gap: 0; user-select: none; min-width: max-content; }
.pl-time-col { display: flex; flex-direction: column; }
.pl-corner { height: 44px; }
.pl-time {
    height: 18px; font-size: 11px; line-height: 1; color: var(--sv-dim);
    text-align: right; padding-right: 8px; white-space: nowrap;
    display: flex; align-items: center; justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}
.pl-time.hour { color: var(--sv-mute); font-weight: 600; }

.pl-day { display: flex; flex-direction: column; min-width: 54px; }
.pl-day-head {
    height: 42px; text-align: center; padding: 4px 4px 3px; line-height: 1.4;
    border-bottom: 1px solid var(--sv-line-2); margin-bottom: 2px;
}
.pl-day-dow { font-size: 11.5px; font-weight: 700; color: var(--sv-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.pl-day-date { font-size: 11px; color: var(--sv-dim); }
.pl-day.today .pl-day-dow { color: var(--sv-red-2); }
.pl-day.today .pl-day-head { border-bottom-color: var(--sv-red-line); }

.pl-cell {
    height: 18px; border: 1px solid rgba(255, 255, 255, 0.045); border-top: none; border-left: none;
    background: var(--sv-bg-3); cursor: pointer; position: relative;
    /* painting owns the gesture that starts on a cell; the scroll container
       around the grid still scrolls from anywhere else */
    touch-action: none;
}
.pl-cell.hour-start { border-top: 1px solid rgba(255, 255, 255, 0.11); }
/* Your own hours: a ring, which reads on any heat (a thin bar at the left
   edge disappeared on bright cells). */
.pl-cell.mine::after {
    content: ''; position: absolute; inset: 3px;
    border: 2px solid var(--sv-blue); border-radius: 4px; pointer-events: none;
}
/* Hour rows tall enough to read, and to hit with a finger; half hours stay
   compact. */
.pl-grid.slot-60 .pl-cell, .pl-grid.slot-60 .pl-time { height: 30px; }
.pl-grid.slot-30 .pl-cell, .pl-grid.slot-30 .pl-time { height: 20px; }
.pl-grid.slot-30 .pl-cell.mine::after { inset: 2px; border-radius: 3px; }
.pl-time { font-size: 12px; }
.pl-cell { border-color: rgba(255, 255, 255, 0.06); }
.pl-day + .pl-day .pl-cell { border-left: 1px solid rgba(255, 255, 255, 0.08); }
/* How many can play, written in the cell once there is more than one person */
.pl-n {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.88); pointer-events: none;
}
.pl-grid.slot-30 .pl-n { font-size: 10.5px; }
.pl-cell.ink-dark .pl-n { color: #05261f; }
.pl-cell.peak .pl-n { font-weight: 800; }
/* Now, across today's column */
.pl-cell.now::before {
    content: ''; position: absolute; left: -1px; right: -1px; top: var(--now, 0%); height: 2px;
    background: var(--sv-red); box-shadow: 0 0 6px rgba(255, 70, 85, 0.6);
    z-index: 3; pointer-events: none;
}
.pl-cell.sel { outline: 2px solid var(--sv-red); outline-offset: -2px; z-index: 2; }
/* Booked time has to read through the availability heat under it: the point of
   putting scrims on the same grid is that nobody offers an hour that is gone.
   planner.js paints the heat as an inline `background:` shorthand, which would
   reset this image, hence the !important. */
.pl-cell.scrim {
    background-image: repeating-linear-gradient(45deg,
        rgba(var(--booked-rgb), 0.55) 0 3px, rgba(var(--booked-rgb), 0.08) 3px 8px) !important;
    box-shadow: inset 2px 0 0 rgba(var(--booked-rgb), 0.75), inset -2px 0 0 rgba(var(--booked-rgb), 0.75);
}
.pl-cell.scrim-start { border-top: 2px solid var(--sv-warn); }
.pl-cell.peak { box-shadow: inset 0 0 0 1px rgba(61, 224, 196, 0.6); }

.pl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; font-size: 12.5px; color: var(--sv-dim); }
.pl-legend-scale { display: flex; align-items: center; gap: 4px; }
.pl-legend-scale > span:first-child { margin-right: 4px; }
.pl-legend-scale > span:last-child { margin-left: 4px; }
.pl-legend-box { width: 18px; height: 12px; border: 1px solid var(--sv-line); border-radius: 3px; }
.pl-legend-key { display: flex; align-items: center; gap: 7px; }
.pl-legend-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--sv-line); }
.pl-legend-swatch.is-mine { background: none; border: 2px solid var(--sv-blue); }
.pl-legend-num {
    min-width: 18px; height: 14px; padding: 0 3px; border-radius: 3px; font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; color: #05261f;
    background: hsl(170, 75%, 60%);
}
.pl-legend-swatch.is-booked {
    background: repeating-linear-gradient(45deg, rgba(var(--booked-rgb), 0.5) 0 4px, transparent 4px 8px);
    border-color: var(--sv-warn);
}
.pl-legend-swatch.is-override { background: var(--purple); }

/* ---- side panels ---- */
.pl-side { display: flex; flex-direction: column; gap: 16px; }
.pl-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 60%), var(--sv-bg-2);
    border: 1px solid var(--sv-line); border-radius: var(--sv-radius); padding: 16px;
}
.pl-panel h3 {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sv-dim); margin-bottom: 12px;
}
.pl-panel h3 span { color: var(--sv-text); }
/* A panel's one action, at the end of its heading. */
.pl-h3-btn {
    margin-left: auto; background: none; border: 1px solid var(--sv-line-2); color: var(--sv-mute);
    border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 600;
    letter-spacing: 0; text-transform: none; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.pl-h3-btn:hover { color: var(--sv-text); border-color: var(--sv-mute); }

/* Best times: one line each (day, time, count), so the column beside the
   grid fits next to it; hovering one outlines its hours on the grid. */
.pl-best { display: flex; flex-direction: column; gap: 6px; }
.pl-best-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px;
    padding: 7px 10px; background: var(--sv-bg); border: 1px solid var(--sv-line);
    border-radius: 10px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.pl-best-row:hover { border-color: var(--sv-line-2); }
.pl-best-row.full { border-color: rgba(61, 224, 196, 0.4); background: rgba(61, 224, 196, 0.06); }
.pl-best-row.full:hover { border-color: rgba(61, 224, 196, 0.65); }
.pl-best-day { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pl-best-time { font-size: 12.5px; color: var(--sv-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-best-count { font-size: 14px; font-weight: 800; color: var(--sv-ok); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-best-count small { font-size: 0.72em; font-weight: 600; color: var(--sv-dim); }
.pl-best-row.clash .pl-best-count { color: var(--sv-warn); }
.pl-best-tag { grid-column: 1 / -1; font-size: 11.5px; color: var(--sv-warn); margin-top: 2px; }
.pl-more {
    align-self: flex-start; background: none; border: none; color: var(--sv-mute); font: inherit;
    font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px;
}
.pl-more:hover { color: var(--sv-text); }
.pl-cell.best-hl { outline: 2px solid #fff; outline-offset: -2px; z-index: 2; }

/* Who has filled it in: pills that wrap. */
.pl-people.pl-pills { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.pl-pill {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px;
    border-radius: 999px; background: var(--sv-bg); border: 1px solid var(--sv-line);
    font-size: 13px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.pl-pill:hover { border-color: var(--sv-line-2); }
.pl-pill.on { background: rgba(107, 156, 255, 0.14); border-color: rgba(107, 156, 255, 0.5); }
.pl-pill-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pill.me .pl-pill-name { color: var(--sv-blue); font-weight: 600; }
.pl-pill-n { font-size: 11.5px; color: var(--sv-dim); font-variant-numeric: tabular-nums; }
.pl-pill-x { background: none; border: none; color: var(--sv-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.pl-pill-x:hover { color: var(--sv-red); }

/* The grid's column: the grid, then what is booked and the Discord post. */
.pl-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pl-panel-wide .pl-scrims { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pl-panel-wide .pl-scrims > .pl-empty { grid-column: 1 / -1; }
.pl-day.week-start { margin-left: 10px; }

.pl-people { display: flex; flex-direction: column; gap: 2px; }
.pl-person {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px;
    border-radius: 8px; cursor: pointer; font-size: 14px; transition: background 0.2s;
}
.pl-person:hover { background: rgba(255, 255, 255, 0.05); }
a.pl-person { text-decoration: none; color: var(--sv-text); }
.pl-note a { color: var(--sv-red-2); text-decoration: none; font-weight: 600; }
.pl-note a:hover { text-decoration: underline; }
.pl-person.on { background: rgba(107, 156, 255, 0.14); }
.pl-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-person-n { font-size: 12px; color: var(--sv-dim); font-variant-numeric: tabular-nums; }
a.pl-person .pl-person-n { letter-spacing: 0.08em; }
.pl-person.me .pl-person-name { color: var(--sv-blue); font-weight: 600; }

.pl-scrims { display: flex; flex-direction: column; gap: 8px; }
.pl-scrim {
    padding: 10px 12px; background: var(--sv-bg);
    border: 1px solid var(--sv-line); border-left: 3px solid var(--sv-warn);
    border-radius: 10px;
}
.pl-scrim.block { border-left-color: var(--purple); }
.pl-scrim-top { display: flex; align-items: baseline; gap: 8px; }
.pl-scrim-title { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-scrim-x {
    background: none; border: none; color: var(--sv-dim); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 3px; border-radius: 4px; transition: color 0.2s;
}
.pl-scrim-x:hover { color: var(--sv-red); }
.pl-scrim-when { font-size: 12.5px; color: var(--sv-mute); margin-top: 3px; }
.pl-scrim-note { font-size: 12.5px; color: var(--sv-dim); margin-top: 3px; }
.pl-scrim-by { font-size: 11.5px; color: var(--sv-dim); }

.pl-empty { color: var(--sv-dim); font-size: 13.5px; line-height: 1.55; padding: 4px 0; }
.pl-empty-gap { margin-top: 18px; }

/* ---- landing: the boards a team already has, first ---- */
.pl-yours { margin: 0 auto 24px; }
.pl-yours-head { text-align: center; margin-bottom: 14px; }
.pl-yours-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.pl-yours-head p { color: var(--sv-mute); font-size: 14.5px; margin-top: 4px; }
.pl-yours-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; gap: 14px; }
.pl-yours-card {
    display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--sv-radius);
    text-decoration: none; color: var(--sv-text);
    background: linear-gradient(180deg, rgba(255, 70, 85, 0.08), rgba(255, 70, 85, 0) 70%), var(--sv-bg-2);
    border: 1px solid rgba(255, 70, 85, 0.35); box-shadow: 0 0 36px -14px rgba(255, 70, 85, 0.35);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pl-yours-card:hover { border-color: rgba(255, 70, 85, 0.7); box-shadow: 0 0 40px -10px rgba(255, 70, 85, 0.5); }
.pl-yours-title { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-yours-meta { font-size: 12.5px; color: var(--sv-dim); letter-spacing: 0.02em; }
.pl-yours-card .pl-btn { align-self: flex-start; margin-top: 6px; }
/* With a board there already, starting another folds behind one button. */
.pl-create-open { display: none; }
.pl-card-main.collapsed .pl-create-open { display: inline-flex; }
.pl-card-main.collapsed > :not(.pl-eyebrow):not(h2):not(p):not(.pl-create-open) { display: none; }

/* ---- hover tip ---- */
.pl-tip {
    position: fixed; z-index: 60; pointer-events: none;
    background: var(--sv-bg-2); border: 1px solid var(--sv-line-2);
    border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-lg);
    font-size: 13px; line-height: 1.5; max-width: 260px;
}
.pl-tip-when { font-weight: 700; margin-bottom: 5px; }
.pl-tip-line { color: var(--sv-mute); }
.pl-tip-free { color: var(--sv-ok); }
.pl-tip-out { color: var(--sv-dim); }
.pl-tip-scrim { color: var(--sv-warn); margin-top: 4px; }

/* ---- modal ---- */
.pl-modal-back {
    position: fixed; inset: 0; background: rgba(4, 6, 10, 0.74);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 70; padding: 20px;
}
.pl-modal {
    background: var(--sv-bg-2); border: 1px solid var(--sv-line-2);
    border-radius: var(--sv-radius); padding: 26px; width: 100%; max-width: 500px;
    max-height: calc(100vh - 40px); overflow-y: auto;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 70, 85, 0.06);
}
.pl-modal h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 18px; }
.pl-modal .pl-field { margin-bottom: 16px; }
.pl-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 22px; }
.pl-modal-actions #plHookOff { margin-right: auto; }

.pl-hidden { display: none !important; }

/* a day whose availability is not this person's usual week */
.pl-day.override .pl-day-head { border-bottom-color: var(--purple); }
.pl-day.override .pl-day-date::after { content: ' *'; color: var(--purple); font-weight: 700; }

/* whose planner you are looking at */
.pl-teampick {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin: 0 auto 24px; max-width: 900px;
}
.pl-teampick .pl-chip { padding: 8px 16px; font-size: 14px; }
.pl-chip-n {
    display: inline-block; margin-left: 7px; padding: 0 7px;
    border-radius: 999px; background: rgba(255, 255, 255, 0.1);
    font-size: 12px; font-weight: 700;
}
.pl-chip.on .pl-chip-n { background: rgba(255, 70, 85, 0.25); }
.pl-for { font-size: 14px; font-weight: 500; color: var(--sv-dim); }

/* ---- phone ---- */
@media (max-width: 620px) {
    .pl-card { padding: 22px 18px; }
    .pl-head { padding-top: 26px; }
    .pl-head-actions, .pl-head-actions .pl-modes { width: 100%; }
    .pl-head-actions .pl-modes button { flex: 1; }
    .pl-head-actions > .pl-btn { flex: 1; }
    .pl-you input { flex: 1 1 160px; }
    .pl-you .pl-modes { width: 100%; }
    .pl-you .pl-modes button { flex: 1; }
    .pl-saved { margin-left: 0; }
    .pl-grid-card { padding: 14px 12px; }
    .pl-modal { padding: 22px 18px; }
}
@media (max-width: 420px) {
    .pl-wrap { padding: 0 16px 8px; }
}

/* ---- when2meet import ---- */
.pl-w2m-sum { font-size: 14px; margin: 2px 0 12px; }
.pl-w2m-modes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--sv-mute); }
.pl-w2m-modes label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.pl-w2m-modes label.off { opacity: 0.5; cursor: default; }
.pl-w2m-modes input { width: auto; margin-top: 2px; }
.pl-w2m-people {
    display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto;
    border: 1px solid var(--sv-line); border-radius: 10px; padding: 6px; margin-bottom: 12px;
}
.pl-w2m-person { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.pl-w2m-person:hover { background: rgba(255, 255, 255, 0.04); }
.pl-w2m-person input { width: auto; }
.pl-w2m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-w2m-tag { font-size: 11px; color: var(--sv-dim); border: 1px solid var(--sv-line); border-radius: 999px; padding: 1px 8px; }
.pl-w2m-hours { font-size: 12.5px; color: var(--sv-mute); font-variant-numeric: tabular-nums; }

/* ---- scrims against a team ---- */
.pl-scrim-vs { font-weight: 500; color: var(--sv-mute); margin-left: 4px; }
#plScrimFlash { margin: 10px 0 0; color: var(--sv-text); }