/* =============================================================================
 * today.css — A1 · layout for the Today and Scope screens.
 *
 * COLOUR IS NOT HERE, AND THAT IS DELIBERATE.
 * Every status colour, tint and tile in Ops v4 comes from
 * web/js/ops-v4/kit/lres-ops-v4-kit.js. CONTRACTS §9: agents use the kit and do
 * not restyle it. If a rule below set a background on `.opsv4-tile` it would be
 * a second, divergent definition of option G living somewhere the kit's own
 * smoke test cannot see. So this file carries layout only — grids, spacing,
 * overflow, the print and narrow-screen behaviour — and the two class names it
 * does share with the kit (`.opsv4-strip`, `.opsv4-tile`) are only given
 * geometry.
 *
 * It is loaded by today.js itself (`ensureStylesheet()`), not by index.html —
 * web/index.html belongs to A0. docs/build/requests/A1.md asks for the <link>
 * to be moved into the shell so the file is fetched with the rest of the page
 * rather than on first navigation.
 * ========================================================================== */

.opsv4-page {
    font-family: Inter, Arial, sans-serif;
    color: #0F1419;
    background: #F4F5F7;
    min-height: 100%;
    padding: 4px 0 28px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.opsv4-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
}
.opsv4-head-text { flex-grow: 1; min-width: 220px; }
.opsv4-dateline { font-size: 15px; font-weight: 700; color: #6B7280; }
.opsv4-headline {
    margin: 2px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.6px;
}
.opsv4-headbtn {
    height: 56px;
    padding: 0 20px;
    border-radius: 18px;
    background: #FFFFFF;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #0F1419;
    border: none;
    cursor: pointer;
}
.opsv4-headbtn--primary { background: #009A42; color: #FFFFFF; padding: 0 24px; font-size: 17px; }

/* ── Date strip (geometry only — the kit paints it) ──────────────────────── */
.opsv4-strip { margin: 4px 0 18px; }
.opsv4-strip--scroll { overflow-x: auto; padding-bottom: 4px; }
.opsv4-tile { min-width: 96px; }

/* ── The three columns ───────────────────────────────────────────────────── */
.opsv4-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.opsv4-group {
    background: #FFFFFF;
    border-radius: 26px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.opsv4-group-head { display: flex; align-items: baseline; gap: 10px; }
.opsv4-group-head h2 { margin: 0; font-size: 20px; font-weight: 800; flex-grow: 1; }
.opsv4-group-count { font-size: 14px; font-weight: 700; color: #6B7280; }
.opsv4-clear { padding: 24px 0; text-align: center; font-size: 16px; font-weight: 700; color: #9CA3AF; }

.opsv4-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #F4F5F7;
}
.opsv4-item-body { flex-grow: 1; min-width: 0; }
.opsv4-item-title { font-size: 16px; font-weight: 800; }
.opsv4-item-sub { font-size: 13px; color: #6B7280; }
.opsv4-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.opsv4-cta {
    height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: none;
    background: #0F1419;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Scope ───────────────────────────────────────────────────────────────── */
.opsv4-scope-bar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 0 0 6px; }
.opsv4-scope-bar h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.6px; }
.opsv4-scope-sub { font-size: 16px; color: #4B5563; margin-top: 2px; }
.opsv4-seg { display: flex; background: #E9EBEE; border-radius: 16px; padding: 4px; }
.opsv4-seg button {
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 800;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
}
.opsv4-seg button[aria-pressed="true"] { background: #FFFFFF; color: #0F1419; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.opsv4-chip {
    height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    border: 2px solid transparent;
    background: #E9EBEE;
    color: #6B7280;
    cursor: pointer;
}
.opsv4-chip[aria-pressed="true"] { border-color: #0F1419; background: #FFFFFF; color: #0F1419; }
.opsv4-weekbtn { height: 52px; padding: 0 18px; border-radius: 16px; border: none; background: #FFFFFF; font-size: 15px; font-weight: 800; cursor: pointer; }
.opsv4-weekbtn--icon { width: 52px; padding: 0; font-size: 22px; }

.opsv4-board {
    margin-top: 14px;
    background: #FFFFFF;
    border-radius: 26px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: auto;
}
/* 270px name column + seven equal day columns — the grid both views share. */
.opsv4-grid { display: grid; grid-template-columns: 270px repeat(7, minmax(84px, 1fr)); gap: 8px; min-width: 860px; }
.opsv4-grid--rows { gap: 0 8px; align-items: center; padding: 6px 0; border-top: 1px solid #F1F3F5; }
.opsv4-firstcol { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6px 6px; font-size: 13px; font-weight: 800; color: #6B7280; }
.opsv4-jobcell { grid-row: 1 / span 2; display: flex; flex-direction: column; padding: 0 6px; text-decoration: none; color: #0F1419; }
.opsv4-jobname { font-size: 15px; font-weight: 800; }
.opsv4-jobmeta { font-size: 12px; color: #6B7280; }
.opsv4-stage { align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 8px; }
.opsv4-bar {
    height: 34px;
    margin: 2px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}
.opsv4-bar-label { font-size: 13px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; }
.opsv4-pill { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 9px; white-space: nowrap; }
.opsv4-person { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.opsv4-person-name { display: block; font-size: 14px; font-weight: 800; }
.opsv4-person-skill { display: block; font-size: 12px; color: #6B7280; }
.opsv4-daypair { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; overflow: hidden; }
.opsv4-cell { display: block; height: 22px; line-height: 22px; text-align: center; font-size: 11px; font-weight: 800; text-decoration: none; overflow: hidden; white-space: nowrap; }
.opsv4-key { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid #F1F3F5; flex-wrap: wrap; }
.opsv4-key-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4B5563; }
.opsv4-swatch { width: 14px; height: 14px; border-radius: 4px; }
.opsv4-undated { margin-top: 14px; background: #FFFFFF; border-radius: 22px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opsv4-undated-title { font-size: 15px; font-weight: 800; flex-shrink: 0; }
.opsv4-undated-chip { font-size: 14px; padding: 8px 12px; border-radius: 12px; background: #F4F5F7; }

.opsv4-empty { padding: 40px 20px; text-align: center; font-size: 16px; font-weight: 700; color: #9CA3AF; }
.opsv4-error { padding: 20px; border-radius: 18px; background: #FFFFFF; font-size: 15px; color: #B91C1C; font-weight: 700; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .opsv4-groups { grid-template-columns: 1fr; }
    .opsv4-headline { font-size: 28px; }
}

@media print {
    .opsv4-headbtn, .opsv4-cta, .opsv4-seg, .opsv4-chip, .opsv4-weekbtn { display: none !important; }
    .opsv4-board { overflow: visible; }
}