/* ==========================================================================
   Setstack — standalone application shell.

   Loaded AFTER styles.css, which is Workshop's stylesheet kept byte-identical
   so the two apps stay diffable. This file adds ONLY what the standalone shell
   and the new workspace need; it deliberately does not touch the palette. The
   dark-grey surfaces, the Blueprint blue, the type and the cut-corner card
   shape all come from styles.css and are used here exactly as Workshop uses
   them:

     --card-cut     18px   large surfaces (day columns, program cards, modals)
     --card-cut-sm  10px   rows and small cards (sections, library items)

   The shape itself is one polygon that slices the top-right corner. It is
   applied through the .pg-cut / .pg-cut-sm helpers below rather than repeated,
   because every new surface has to match Workshop's exactly.
   ========================================================================== */

:root {
    --pg-topbar-h: 52px;
    --pg-day-min: 190px;
    --pg-hover-line: #404040;   /* the hover border styles.css uses on cards */
}

/* The Blueprint corner cut, as used throughout styles.css. */
.pg-cut { clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%); }
.pg-cut-sm { clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%); }

/* ---------- top bar ---------------------------------------------------- */
/* Replaces the dashboard sidebar + page header. Same chrome treatment the
   sidebar had — panel surface, hairline rule, blue for the active item. */

.coach-app { display: block; min-width: 1024px; }
.app-shell { height: 100%; }

.pg-topbar {
    height: var(--pg-topbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

/* The Setstack lockup is two images rather than a mark plus set type: the
   wordmark's two tones (blue SET, white STACK) are part of the logo and can't
   be reproduced with a font. Both are sized by height so the ratio is fixed. */
.pg-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.pg-brand-mark { height: 26px; width: auto; }
.pg-brand-word { height: 15px; width: auto; }

/* Login lockup. styles.css sizes .login-logo for Blueprint's near-square logo;
   the Setstack wordmark is ~9:1, so it needs its own width and a mark above it.
   styles.css is kept byte-identical to Workshop's, so the override lives here. */
.login-brand { display: grid; justify-items: center; gap: 18px; }
.login-mark { width: 78px; height: auto; filter: drop-shadow(0 8px 24px rgba(120,172,210,.22)); }
.login-logo { width: min(70vw, 232px); }

.pg-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pg-nav::-webkit-scrollbar { display: none; }
/* styles.css builds .tab for a vertical sidebar (width:100%, 38px tall); the
   top bar wants the opposite, so those two properties are reset rather than the
   shared rule being edited. Colour and active state stay Workshop's. */
.pg-nav .tab {
    width: auto; flex: 0 0 auto; height: 32px; padding: 0 14px;
    font-size: 13px; border-radius: 7px; cursor: pointer;
}

.pg-topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pg-topbar-right .account-card { height: 32px; }
.account-dropdown-item { display: block; width: 100%; text-align: left; text-decoration: none; }

.pg-save-pill {
    font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 4px 10px; border-radius: 999px;
    background: var(--field); border: 1px solid var(--line-strong); color: var(--muted);
}
.pg-save-pill.is-saving { color: var(--blue-bright); border-color: rgba(120,172,210,.4); }
.pg-save-pill.is-saved { color: var(--green); border-color: rgba(51,192,125,.4); }
.pg-save-pill.is-dirty { color: #eab308; border-color: rgba(234,179,8,.4); }

/* ---------- generic page furniture -------------------------------------- */

.pg-page-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.pg-page-heading .eyebrow { margin: 0 0 2px; }
.pg-page-heading h2 { margin: 0; font-size: 19px; }
.pg-page-search { flex: 1 1 240px; max-width: 380px; height: 32px; font-size: 12.5px; }
.pg-select { height: 32px; }

.pg-subtabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 12px 22px 0; border-bottom: 1px solid var(--line); }
.pg-subtab {
    height: 32px; padding: 0 14px; border: 0; background: transparent; cursor: pointer; color: var(--muted);
    font-family: inherit; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pg-subtab:hover { color: var(--muted-bright); }
.pg-subtab.active { color: var(--blue-bright); border-bottom-color: var(--blue); }

.pg-card-grid { flex: 1; overflow: auto; padding: 20px 22px; display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-content: start; }
.pg-template-body { flex: 1; overflow: auto; padding: 20px 22px; }

/* Same card as .program-card in styles.css, corner cut included. */
.pg-card {
    padding: 18px; border: 1px solid var(--line-strong); border-left: 3px solid var(--card-accent, var(--blue));
    background: var(--panel-soft);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    display: grid; gap: 9px; cursor: pointer; position: relative;
    transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pg-card:hover { transform: translateY(-3px); border-color: var(--pg-hover-line); box-shadow: var(--shadow-md); }
.pg-card h3 { margin: 0; font-size: 15.5px; color: #fff; padding-right: 8px; }
.pg-card .pg-card-meta { margin: 0; font-size: 11px; color: var(--muted); }
.pg-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- builder shell ---------------------------------------------- */

.pg-builder { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); }
.pg-builder.is-hidden { display: none; }

.pg-builder-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.pg-back {
    flex: 0 0 auto; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--field);
    border-radius: 7px; color: var(--muted); font-family: inherit; font-size: 12.5px; cursor: pointer;
    transition: border-color .14s var(--ease), color .14s var(--ease);
}
.pg-back:hover { color: var(--blue-bright); border-color: var(--pg-hover-line); }
.pg-title-input {
    flex: 0 1 300px; min-width: 140px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
}
.pg-title-input:hover { border-color: var(--line-strong); }
.pg-title-input:focus { outline: none; background: var(--field); border-color: var(--blue); }
.pg-tags-input { flex: 0 1 220px; min-width: 100px; height: 30px; font-size: 12px; }
.pg-save-state { flex: 1 1 auto; font-size: 11.5px; color: var(--muted-dark); min-width: 0; }
.pg-save-state.is-error { color: var(--red); }
.pg-builder-actions { flex: 0 0 auto; display: flex; gap: 6px; }

/* A <select> in a builder toolbar MUST be given an explicit width.
   styles.css sets `input, select, textarea { width: 100% }`, which is right
   inside the modal forms it was written for. In a flex toolbar it is a trap:
   #program-category-select also carries `flex: 0 0 auto` (styles.css), so its
   basis resolves from that 100% — the select claimed the entire bar and could
   not shrink, pushing Find & replace / PDF / Assign and, worst of all, SAVE
   several hundred pixels off the right edge of the screen at every viewport
   width. The builder had no reachable save button. Scoped to the toolbar so
   selects inside modal forms keep filling their field, as they should. */
.pg-builder-bar .pg-select { flex: 0 0 auto; width: 150px; }

/* Safety net for the same class of mistake. If anything in a builder bar ever
   over-claims again, it wraps to a second row instead of silently pushing the
   actions off-screen — a control the coach cannot see is a control that does
   not exist. Nothing wraps at any supported width today. */
.pg-builder-bar { flex-wrap: wrap; }

/* Week strip — horizontal, so the week list costs no horizontal workspace.
   Replaces the old vertical week-nav sidebar. */
.pg-weekbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
    padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.pg-weekbar-chips { flex: 1 1 auto; display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; min-width: 0; }
.pg-week-chip {
    flex: 0 0 auto; height: 28px; padding: 0 12px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--field); color: var(--muted);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    font-family: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
    transition: border-color .14s var(--ease), color .14s var(--ease), background-color .14s var(--ease);
}
.pg-week-chip:hover { border-color: var(--pg-hover-line); color: var(--muted-bright); }
.pg-week-chip.active { background: var(--blue-deep); border-color: var(--blue-bright); color: var(--blue-bright); }
.pg-week-chip .pg-week-chip-count { font-size: 10px; font-weight: 600; opacity: .6; }
.pg-weekbar-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pg-weekbar-sep { width: 1px; height: 18px; background: var(--line-strong); }
.pg-repeat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.pg-repeat input { width: 42px; height: 26px; padding: 0 4px; text-align: center; }

.pg-builder-body { flex: 1; min-height: 0; display: flex; align-items: stretch; }

/* ---------- collapsible library ---------------------------------------- */

.pg-library {
    flex: 0 0 236px; width: 236px; min-width: 0; display: flex; flex-direction: column;
    background: var(--panel); border-right: 1px solid var(--line); overflow: hidden;
    transition: flex-basis .16s var(--ease), width .16s var(--ease);
}
.pg-library.is-collapsed { flex-basis: 0; width: 0; border-right-color: transparent; }
.pg-library-head { flex: 0 0 auto; padding: 13px 12px; display: grid; gap: 9px; border-bottom: 1px solid var(--line); }
.pg-library-title { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-dark); }
.pg-library-search { height: 30px; width: 100%; font-size: 12px; }
.pg-library-body { flex: 1; min-height: 0; overflow-y: auto; }
.pg-library-group { display: grid; gap: 7px; }
.pg-library-group-label { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-dark); }
.pg-library-group + .pg-library-group { margin-top: 10px; }

.pg-library-toggle {
    flex: 0 0 auto; width: 14px; border: 0; border-right: 1px solid var(--line); background: var(--panel);
    color: var(--muted-dark); cursor: pointer; font-size: 12px; padding: 0; line-height: 1;
    transition: background-color .14s var(--ease), color .14s var(--ease);
}
.pg-library-toggle:hover { background: var(--blue-deep); color: var(--blue-bright); }

.pg-library .library-tabs { padding: 8px 8px 0; }
.pg-library .library-tab-content { padding: 9px 10px 14px; gap: 7px; }

/* ---------- the weekly stage -------------------------------------------- */

.pg-stage { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 14px; }

.pg-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(var(--pg-day-min), 1fr));
    gap: 10px;
    align-items: start;
    min-height: 100%;
}

/* A day column is the big surface here, so it carries the full corner cut —
   the same treatment .program-week had when a week was one card. */
.pg-day {
    background: var(--panel-soft); border: 1px solid var(--line-strong);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    display: flex; flex-direction: column; min-width: 0;
    transition: border-color .16s var(--ease);
}
.pg-day.is-today { border-color: var(--blue); }
.pg-day.drop-target { border-color: var(--blue); background: rgba(120,172,210,.06); }

.pg-day-head {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px;
    padding: 10px 8px 9px 10px; background: var(--panel-soft); border-bottom: 1px solid var(--line);
}
.pg-day-name {
    flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-bright);
    display: flex; align-items: baseline; gap: 6px;
}
.pg-day-name:hover { color: var(--blue-bright); }
.pg-day-date { font-size: 10px; font-weight: 600; letter-spacing: .2px; color: var(--muted-dark); text-transform: none; }
.pg-day-count { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--muted-dark); }
.pg-day-body { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 8px; min-width: 0; }
.pg-day-empty {
    border: 1px dashed var(--line-strong); border-radius: 7px; padding: 16px 8px; text-align: center;
    font-size: 11.5px; color: var(--muted-dark); line-height: 1.5;
}
.pg-day-add {
    width: 100%; height: 28px; border: 1px dashed var(--line-strong); border-radius: 7px; background: transparent;
    color: var(--muted-dark); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
    transition: border-color .14s var(--ease), color .14s var(--ease), background-color .14s var(--ease);
}
.pg-day-add:hover { border-color: var(--blue); color: var(--blue-bright); background: rgba(120,172,210,.06); }

/* ---------- sections --------------------------------------------------- */
/* Row-scale surface, so the small corner cut — same as .library-row. */

.pg-section {
    border: 1px solid var(--line-strong); border-left: 3px solid var(--section-color, var(--blue));
    background: rgba(255,255,255,.015); min-width: 0;
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    transition: border-color .14s var(--ease);
}
.pg-section.drop-target { border-color: var(--blue); background: rgba(120,172,210,.08); }
.pg-section.is-dragging { opacity: .4; }
.pg-section-head { display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 6px; min-width: 0; }
.pg-section-title {
    flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--muted-bright); overflow-wrap: anywhere;
}
.pg-section-title:hover { color: var(--section-color, var(--blue-bright)); }
.pg-section-count { flex: 0 0 auto; font-size: 10px; color: var(--muted-dark); font-weight: 600; }
.pg-section-body { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 6px; min-width: 0; }
.pg-section.is-collapsed .pg-section-body { display: none; }
.pg-section-add {
    width: 100%; height: 24px; border: 1px dashed var(--line-strong); border-radius: 6px; background: transparent;
    color: var(--muted-dark); font-family: inherit; font-size: 11px; cursor: pointer;
}
.pg-section-add:hover { border-color: var(--blue); color: var(--blue-bright); }

/* ---------- blocks (formerly "circuits") -------------------------------- */
/* Kept rounded, not cut: styles.css's .circuit-card was rounded too, and a cut
   on every nested level turns the column into a sawtooth. */

.pg-block { border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.02); min-width: 0; }
.pg-block.drop-target { border-color: var(--blue); background: rgba(120,172,210,.08); }
.pg-block.is-dragging { opacity: .4; }
.pg-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 5px 4px 5px 5px; min-width: 0; }
.pg-block-spacer { flex: 1 1 auto; }
.pg-block-letter {
    flex: 0 0 auto; height: 17px; min-width: 17px; padding: 0 6px; border-radius: 4px;
    background: var(--blue-deep); color: var(--blue-bright); font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.pg-block-name {
    flex: 1 1 100%; order: 5; min-width: 0; border: 1px solid transparent; border-radius: 4px; background: transparent;
    color: var(--muted-bright); font-family: inherit; font-size: 10.5px; font-weight: 600; padding: 2px 4px;
}
.pg-block-name::placeholder { color: var(--muted-dark); font-weight: 400; }
.pg-block-name:hover { border-color: var(--line-strong); }
.pg-block-name:focus { outline: none; background: var(--field); border-color: var(--blue); }
.pg-block-rounds {
    flex: 0 0 auto; width: 52px; height: 20px; border: 1px solid var(--line-strong); border-radius: 4px;
    background: var(--field); color: var(--muted-bright); font-family: inherit; font-size: 10.5px; text-align: center; padding: 0 3px;
}
.pg-block-rounds::placeholder { color: var(--muted-dark); }
.pg-block-body { display: flex; flex-direction: column; gap: 4px; padding: 0 5px 5px; min-width: 0; }

/* ---------- items ------------------------------------------------------- */
/* Rounded, matching .program-block in styles.css. */

.pg-item {
    display: flex; align-items: flex-start; gap: 5px; padding: 6px 5px 6px 3px;
    border-radius: 7px; background: var(--panel-soft); box-shadow: var(--shadow-sm);
    border: 1px solid var(--line); min-width: 0;
    transition: border-color .12s var(--ease);
}
.pg-item:hover { border-color: var(--line-strong); }
.pg-item.is-dragging { opacity: .4; }
.pg-item.is-missing { border-style: dashed; background: #1c1416; }
.pg-item.is-missing .pg-item-name { color: var(--muted-dark); font-style: italic; }
.pg-item.is-throwing { border-left: 3px solid var(--blue); }
.pg-item.is-complete .pg-item-name { text-decoration: line-through; color: var(--muted-dark); }

.pg-grip {
    flex: 0 0 auto; width: 13px; align-self: stretch; border: 0; background: transparent; cursor: grab; padding: 0;
    color: var(--muted-dark); font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 3px; opacity: .55;
    transition: opacity .12s var(--ease), color .12s var(--ease), background-color .12s var(--ease);
}
.pg-item:hover .pg-grip, .pg-section-head .pg-grip, .pg-block-head .pg-grip, .pg-day-head .pg-grip { opacity: 1; }
.pg-grip:hover { color: var(--blue-bright); background: var(--blue-deep); }
.pg-grip:active { cursor: grabbing; }
.pg-grip.pg-grip-sm { width: 11px; font-size: 10px; }

.pg-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-item-name { font-size: 12px; line-height: 1.35; color: var(--muted-bright); overflow-wrap: anywhere; hyphens: auto; }
.pg-item-sub { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.pg-item-video { color: var(--blue); text-decoration: none; font-size: 10px; }

/* Same red-until-set / green-once-set language .block-prescription-btn uses. */
.pg-rx {
    align-self: flex-start; max-width: 100%; min-height: 20px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--line-strong); background: rgba(255,255,255,.06); color: var(--muted);
    font-family: inherit; font-size: 10px; font-weight: 700; text-align: left; overflow-wrap: anywhere; line-height: 1.3;
    transition: border-color .12s var(--ease), color .12s var(--ease);
}
.pg-rx:hover { border-color: var(--blue); color: var(--blue-bright); }
.pg-rx.is-empty { border-color: var(--red); color: var(--red); }
.pg-rx.is-empty:hover { border-color: #f16560; color: #f16560; }
.pg-rx.is-set { border-color: var(--green); color: var(--green); }
.pg-rx.is-set:hover { border-color: #4fd695; color: #4fd695; }

.pg-item-check { flex: 0 0 auto; margin-top: 3px; width: 13px; height: 13px; accent-color: var(--blue); }

/* Row menu — hidden until hover/focus so cards stay clean. */
.pg-menu-wrap { flex: 0 0 auto; position: relative; }
.pg-dots {
    width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
    color: var(--muted-dark); font-size: 13px; line-height: 1; padding: 0; opacity: 0;
    transition: opacity .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease);
}
.pg-item:hover .pg-dots, .pg-section-head:hover .pg-dots, .pg-block-head:hover .pg-dots,
.pg-day-head:hover .pg-dots, .pg-throwing-item:hover .pg-dots, .pg-throwing-section-head:hover .pg-dots,
.pg-dots:focus-visible, .pg-menu-wrap.is-open .pg-dots { opacity: 1; }
.pg-dots:hover { background: rgba(255,255,255,.06); color: var(--muted-bright); }

/* Body-parented (see menu.js) — fixed, not absolute. */
.pg-menu {
    position: fixed; z-index: 400; min-width: 176px; padding: 5px;
    background: var(--panel-soft-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    display: flex; flex-direction: column; gap: 1px;
}
.pg-menu button {
    width: 100%; text-align: left; height: 28px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent;
    color: var(--muted-bright); font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.pg-menu button:hover { background: var(--blue-deep); color: var(--blue-bright); }
.pg-menu button.is-danger:hover { background: rgba(239,83,80,.14); color: var(--red); }
.pg-menu button:disabled { color: var(--muted-dark); cursor: default; background: transparent; }
.pg-menu-sep { height: 1px; background: var(--line); margin: 3px 0; }
.pg-menu-label { padding: 5px 9px 3px; font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-dark); }

/* ---------- drop indicator ---------------------------------------------- */

.pg-drop-line { height: 0; border-top: 2px solid var(--blue); margin: -1px 0; position: relative; }
.pg-drop-line::before {
    content: ""; position: absolute; left: -1px; top: -4px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--blue);
}
.pg-drag-ghost {
    position: fixed; z-index: 999; pointer-events: none; padding: 6px 11px;
    background: var(--blue-deep); border: 1px solid var(--blue-bright); color: var(--blue-bright);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    font-size: 11.5px; font-weight: 600; box-shadow: var(--shadow-md);
}

/* ---------- focus day ---------------------------------------------------- */

.pg-focus { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.pg-focus-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-focus-title { margin: 0; font-size: 20px; color: #fff; }
.pg-focus-sub { font-size: 12px; color: var(--muted); }
.pg-focus-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.pg-focus .pg-section { background: var(--panel-soft); box-shadow: var(--shadow-sm); }
.pg-focus .pg-section-title { font-size: 12px; }
.pg-focus .pg-item-name { font-size: 13px; }
.pg-focus .pg-rx { font-size: 11px; min-height: 22px; }
.pg-focus .pg-day-add { max-width: 320px; }
.pg-focus-daybar { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-focus-daybtn {
    height: 28px; padding: 0 13px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--field); color: var(--muted);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    font-family: inherit; font-size: 12px; font-weight: 600;
}
.pg-focus-daybtn:hover { border-color: var(--pg-hover-line); color: var(--muted-bright); }
.pg-focus-daybtn.active { background: var(--blue-deep); border-color: var(--blue-bright); color: var(--blue-bright); }

/* ---------- throwing builder --------------------------------------------- */

.pg-throwing-stage { padding: 20px 22px; }
.pg-throwing-day { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.pg-throwing-section {
    border: 1px solid var(--line-strong); border-left: 3px solid var(--blue); background: var(--panel-soft);
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    box-shadow: var(--shadow-sm);
}
.pg-throwing-section.drop-target { border-color: var(--blue); background: rgba(120,172,210,.07); }
.pg-throwing-section.is-dragging { opacity: .4; }
.pg-throwing-section-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px; border-bottom: 1px solid var(--line); }
.pg-throwing-section-name {
    flex: 1 1 auto; min-width: 0; border: 1px solid transparent; border-radius: 6px; background: transparent;
    color: var(--muted-bright); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; padding: 4px 6px;
}
.pg-throwing-section-name:hover { border-color: var(--line-strong); }
.pg-throwing-section-name:focus { outline: none; background: var(--field); border-color: var(--blue); }
.pg-throwing-items { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px 11px; }
.pg-throwing-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 9px 8px 4px;
    border: 1px solid var(--line-strong); background: var(--field);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    transition: border-color .14s var(--ease);
}
.pg-throwing-item:hover { border-color: var(--pg-hover-line); }
.pg-throwing-item.is-dragging { opacity: .4; }
.pg-throwing-item-main { flex: 1 1 auto; min-width: 0; }
.pg-throwing-item-name { font-size: 13px; color: var(--muted-bright); font-weight: 600; }
.pg-throwing-item-detail { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pg-throwing-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pg-chip {
    font-size: 10px; font-weight: 600; letter-spacing: .2px; padding: 4px 9px; border-radius: 999px;
    background: var(--blue-deep); color: var(--blue-bright);
}

/* ---------- modals: new bits --------------------------------------------- */

.pg-section-choices { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.pg-section-choice {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
    padding: 9px 11px; border: 1px solid var(--line-strong); background: var(--field); color: var(--muted-bright);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    font-family: inherit; font-size: 13px;
    transition: border-color .14s var(--ease), background-color .14s var(--ease);
}
.pg-section-choice:hover { border-color: var(--blue); background: var(--panel-soft); }
.pg-section-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--swatch, var(--blue)); flex: 0 0 auto; }
.pg-section-create { display: flex; align-items: center; gap: 10px; padding-top: 6px; font-size: 12.5px; color: var(--muted); }
.pg-section-create input[type="color"] { width: 34px; height: 28px; padding: 2px; }

.pg-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-suggest {
    padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field);
    color: var(--muted); font-family: inherit; font-size: 11px; cursor: pointer;
}
.pg-suggest:hover { border-color: var(--blue); color: var(--blue-bright); }

.pg-copy-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pg-copy-day {
    padding: 8px 4px; border: 1px solid var(--line-strong); background: var(--field); color: var(--muted);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center;
}
.pg-copy-day:hover { border-color: var(--pg-hover-line); color: var(--muted-bright); }
.pg-copy-day.active { background: var(--blue-deep); border-color: var(--blue-bright); color: var(--blue-bright); }
.pg-check-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.pg-picker-tools { display: flex; gap: 8px; align-items: center; }
.pg-picker-tools .pg-page-search { max-width: none; }
.assign-modal-card { width: min(96vw, 620px); }

/* Mass athlete assignment is the point of the Athletes page, so its button is
   always visible; the destructive folder controls stay hover-revealed. */
.athlete-folder-actions { display: flex; align-items: center; gap: 6px; opacity: 1; }
.athlete-folder-actions .folder-edit,
.athlete-folder-actions .folder-delete { opacity: 0; transition: opacity .12s var(--ease); }
.athlete-folder header:hover .folder-edit,
.athlete-folder header:hover .folder-delete,
.folder-edit:focus-visible, .folder-delete:focus-visible { opacity: 1; }

/* The athlete's current-program summary sits between the toolbar and the week,
   so it stays one compact row — every pixel it takes is a pixel off the week. */
.athlete-program-card {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 16px; margin: 0; border: 0; border-bottom: 1px solid var(--line);
    background: var(--panel); clip-path: none;
}
.athlete-program-card .program-summary-row { display: contents; }
.athlete-program-card .program-summary-row > div { display: flex; align-items: baseline; gap: 10px; }
.athlete-program-card .eyebrow { margin: 0; }
.athlete-program-card h3 { margin: 0; font-size: 14px; }
.athlete-program-card .program-summary-meta { margin: 0; font-size: 11.5px; color: var(--muted); }
.athlete-program-card .program-assign-row { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.athlete-program-card .program-summary-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
#athlete-detail-view .avatar { flex: 0 0 auto; }

/* The page bars keep Workshop's chrome; the 34px navy section-icon tiles were
   sidebar-era decoration and are redundant now the top bar names the page. */
.section-icon { display: none; }

/* ---------- undo toast ---------------------------------------------------- */

/* The assign dialog's resolved-window line. Weeks are anchored to Sunday, so
   the date a coach picks is not always the date week 1 begins — this states the
   real boundary before they commit, and turns amber only when the program
   actually has content on days that would land before their start date. */
.assign-note-stack { display: grid; gap: 3px; min-width: 0; }
.assign-window-note { margin: 0; white-space: pre-line; }
.assign-window-note:empty { display: none; }
.assign-window-note.is-caution { color: #eab308; }

/* ---------- toasts ------------------------------------------------------- */
/* One stack, bottom-centre. Deliberately restrained: the surface is the same
   panel grey as every other card and the text is the same muted-bright — only a
   2px rail down the left carries the colour, so a burst of feedback still reads
   as Blueprint navy rather than as a traffic light. Green and red appear on the
   rail and the icon only. */

.pg-toast-stack {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
    pointer-events: none;
}

.pg-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    max-width: min(460px, calc(100vw - 48px));
    padding: 11px 10px 11px 15px;
    background: var(--panel-soft-2); border: 1px solid var(--line-strong);
    border-left: 2px solid var(--toast-accent, var(--blue));
    color: var(--muted-bright); font-size: 13px; line-height: 1.35;
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(10px) scale(.98);
    transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.pg-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.pg-toast.is-leaving { opacity: 0; transform: translateY(6px) scale(.98); }

.pg-toast-icon {
    flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--toast-accent, var(--blue)); background: color-mix(in srgb, var(--toast-accent, var(--blue)) 16%, transparent);
}
.pg-toast-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.pg-toast-action {
    flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--field); color: var(--blue-bright);
    font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 7px; cursor: pointer;
}
.pg-toast-action:hover { border-color: var(--blue-bright); background: var(--blue-deep); }

.pg-toast-close {
    flex: 0 0 auto; width: 22px; height: 22px; border: 0; background: transparent; cursor: pointer;
    color: var(--muted-dark); font-size: 15px; line-height: 1; border-radius: 5px;
}
.pg-toast-close:hover { color: var(--text); background: rgba(255,255,255,.06); }

.pg-toast.is-success { --toast-accent: var(--green); }
.pg-toast.is-error   { --toast-accent: var(--red); }
.pg-toast.is-warning { --toast-accent: #eab308; }
.pg-toast.is-info    { --toast-accent: var(--blue); }

/* ---------- dialogs ------------------------------------------------------ */
/* Built on .modal / .modal-card from styles.css, so the cut corner, the
   backdrop and the rise-in animation are Workshop's, not a second look. */

.pg-dialog-card { width: min(100%, 460px); }
.pg-dialog-message { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pg-dialog-choices {
    display: grid; gap: 6px; max-height: 320px; overflow-y: auto;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.pg-dialog-choice {
    display: grid; gap: 2px; text-align: left; padding: 9px 11px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: 8px; background: var(--field);
    font-family: inherit; color: var(--text);
}
.pg-dialog-choice strong { font-size: 12.5px; font-weight: 700; }
.pg-dialog-choice span { font-size: 11px; color: var(--muted-dark); }
.pg-dialog-choice:hover:not(:disabled) { border-color: var(--blue); background: var(--panel-soft); }
.pg-dialog-choice:focus-visible { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 2px rgba(120,172,210,.25); }
.pg-dialog-choice:disabled { opacity: .45; cursor: default; }

/* ---------- modules ------------------------------------------------------ */

/* The cards and the convert panel share one scroll region, so the panel sits
   directly under the last card instead of being pushed to the window floor by
   .pg-card-grid's flex:1. */
.pg-modules-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.pg-modules-scroll .pg-card-grid { flex: 0 0 auto; overflow: visible; }

.pg-module-card { border-left-color: var(--section-color, var(--blue)); }
.pg-module-type {
    font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--section-color, var(--blue));
}
.pg-module-desc { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* The module type inside a program day. Small, dim, and ABOVE the name —
   the name is what the coach reads, the type is only context. */
.pg-section { display: flex; flex-direction: column; }
.pg-section-module {
    order: -1; padding: 6px 6px 0 9px;
    font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--muted-dark);
}
.pg-section-module + .pg-section-head { padding-top: 2px; }
.pg-section-title.as-text { cursor: default; }

/* Legacy blocks / throwing days offered for conversion. Quiet — it is a
   migration aid, not a feature. */
.pg-legacy { padding: 0 22px 24px; }
.pg-legacy-head h3 { margin: 0 0 3px; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted-bright); }
.pg-legacy-head p { margin: 0 0 12px; font-size: 12px; color: var(--muted-dark); max-width: 62ch; line-height: 1.5; }
.pg-legacy-list { display: grid; gap: 6px; }
.pg-legacy-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--line); background: rgba(255,255,255,.015);
    clip-path: polygon(0 0, calc(100% - var(--card-cut-sm)) 0, 100% var(--card-cut-sm), 100% 100%, 0 100%);
}
.pg-legacy-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }

/* The module bar carries one more control than the program bar (type), so the
   pieces are sized explicitly rather than left to fight over flex:1 — otherwise
   "Unsaved changes" wraps to two lines and squeezes the description field. */
#module-builder-mode #module-description { flex: 1 1 160px; min-width: 90px; }
#module-builder-mode .pg-save-state { flex: 0 0 auto; white-space: nowrap; }

/* Module builder: one section, given the whole stage instead of a 190px column. */
.pg-module-stage { padding: 20px 22px; overflow: auto; }
.pg-module-canvas { max-width: 720px; }
.pg-module-section { background: var(--panel-soft); box-shadow: var(--shadow-sm); }
.pg-module-section .pg-section-head { padding: 10px 10px 8px 12px; }
.pg-module-section .pg-section-title { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); }
.pg-module-section .pg-module-type { order: -1; padding: 10px 12px 0; }
.pg-module-section .pg-section-body { padding: 0 10px 12px; gap: 7px; }
.pg-module-adds { display: flex; gap: 6px; margin-top: 3px; }
.pg-module-adds .pg-section-add { flex: 1 1 auto; height: 28px; }

/* Module rows in the builder drawer — the primary programming surface. */
.pg-module-row .library-item-head { display: flex; align-items: center; gap: 6px; }
.pg-module-add {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--line-strong); background: var(--field); color: var(--blue-bright);
    font-family: inherit; font-size: 13px; line-height: 1; padding: 0;
    opacity: 0; transition: opacity .14s var(--ease);
}
.pg-module-row:hover .pg-module-add, .pg-module-add:focus-visible { opacity: 1; }
.pg-module-add:hover { border-color: var(--blue-bright); background: var(--blue-deep); }

.pg-library-cta {
    width: 100%; height: 30px; margin-bottom: 4px; cursor: pointer;
    border: 1px dashed var(--line-strong); border-radius: 7px; background: transparent;
    color: var(--blue-bright); font-family: inherit; font-size: 12px; font-weight: 600;
}
.pg-library-cta:hover { border-color: var(--blue); background: rgba(120,172,210,.07); }

/* ---------- save state --------------------------------------------------- */
/* A dot while there is unsaved work, a tick once it is safe. The glyph is CSS
   so the status strings stay plain text. */

.pg-save-state.is-dirty { color: #eab308; }
.pg-save-state.is-saving { color: var(--blue-bright); }
.pg-save-state.is-saved { color: var(--green); }
.pg-save-state.is-dirty::before { content: "● "; }
.pg-save-state.is-saved::before { content: "✓ "; }
.pg-save-pill.is-dirty::before { content: "● "; }
.pg-save-pill.is-saved::before { content: "✓ "; }

/* ---------- responsive ---------------------------------------------------- */

/* Below ~1500px seven equal columns stop being readable, so the grid keeps its
   190px floor and scrolls horizontally instead of squeezing names to ellipses. */
@media (max-width: 1500px) {
    .pg-week-grid { min-width: max-content; }
    .pg-stage { overflow-x: auto; }
}
@media (max-width: 1100px) {
    :root { --pg-day-min: 178px; }
    .pg-library { flex-basis: 200px; width: 200px; }
}
@media (max-width: 1024px) {
    .coach-app { min-width: 0; }
}
/* Phones/small tablets: the seven-column builder is unusable, so Focus Day
   becomes the only mode (builder.js reads this same breakpoint). */
@media (max-width: 820px) {
    .coach-app { min-width: 0; }
    /* The nav scrolls inside itself rather than the whole bar, so the account
       control stays pinned instead of sliding under the tabs. */
    .pg-topbar { gap: 10px; padding: 0 10px; }
    /* Narrow bars keep the mark; the wordmark is the part that can go. */
    .pg-brand-word { display: none; }
    .pg-nav .tab { padding: 0 10px; font-size: 12px; }
    .pg-topbar-right .account-email { display: none; }
    .pg-builder-bar { flex-wrap: wrap; }
    .pg-title-input { flex-basis: 100%; }
    .pg-weekbar { flex-wrap: wrap; gap: 8px; }
    .pg-weekbar-chips { flex: 1 1 100%; }
    .pg-weekbar-tools { flex-wrap: wrap; }
    .pg-builder-body { position: relative; }
    .pg-library { position: absolute; left: 0; top: 0; bottom: 0; z-index: 20; box-shadow: var(--shadow-lg); }
    .pg-library-toggle { width: 30px; font-size: 16px; position: relative; z-index: 21; }
    .pg-focus { min-width: 0; }
    .pg-focus-head { gap: 8px; }
    .pg-focus-title { font-size: 17px; }
    .pg-focus-daybar { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
    .pg-focus-daybar .pg-focus-daybtn { flex: 0 0 auto; }
    .pg-focus-body { grid-template-columns: 1fr; min-width: 0; }
    .pg-field-row { grid-template-columns: 1fr; }
    .pg-copy-days { grid-template-columns: repeat(2, 1fr); }
}