/* =========================================================================
   designer-look.css — the Play Designer look card (js/designer-look-card.js)
   Oct 6 2026. ONE component, two mounts: Settings → Playbook and the
   designer's Look sheet.

   ⛔ THE ATHLETE APP'S GRAMMAR, NOT THE COACH SETTINGS CARD (Carlos, Oct 6:
   "that's what we're designing towards, a whole fresh look. The athlete app
   looks good — the spacing, the way everything is, the colors, all of it").
   Every component below is LIFTED, cited to the line it came from:
     card surface + hairline + 14.81px radius ... athlete/css/settings.css:50-55 (.setrow)
     group label (Rajdhani 700, 2.22px track) ... athlete/css/settings.css:45-47 (.setg)
     title (Saira Condensed 800, 0.5px track) ... athlete/css/settings.css:140 (.sca-title)
     the board plate (plate-mix, 17.28px) ....... athlete/css/home.css:79 (.ngp)
     the segmented control (joined, hairline
       dividers, volt FILL + dark ink active) .. athlete/css/season.css:51-60 (.season .seg)
     the full-width 44px seg placement ......... athlete/css/film.css:340-341 (.fseg .seg)
     caption / meta tier (Rajdhani 700 11.11px,
       1.23px track) ........................... athlete/css/home.css:135 (.ngp .seg button)
     quiet secondary verb (the reset) .......... athlete/css/settings.css:219-222 (.bk-act)
     spacing ladder (2.47 · 4.94 · 7.41 · 9.87 ·
       12.34 · 14.81 · 17.28 · 19.75) .......... the athlete app's 390-authoring x1.234 ladder
   The VOLT and PLATE values are athlete/css/volt-day.css:16-17 / :24 —
   supplied to the card as custom properties by js/designer-palette.js (UI),
   so no hex lives here; surfaces, borders and ink are the host's own
   var(--gc-*) tokens, so the card is right in the coach app's dark default,
   its day theme and the designer's three chromes.
   Volt is a FILL with dark ink, never text on a light surface
   (.claude/rules/platform-css.md §4). Orbitron: none — no numerals here.

   LAYOUT — iPAD FIRST (Carlos, Oct 6: "the primary is iPad and web
   browser"): the card asks how wide ITS HOST is (a container query). 560px+
   (iPad landscape and portrait, desktop) puts the board BESIDE the trays —
   the designed layout; a phone host stacks the trays under the board.
   ========================================================================= */
.sc-look-host { container-type: inline-size; }
/* the Settings → Playbook slot: just the gap the athlete ladder gives a group */
.sc-look-slot { margin: 17.28px 0; }

.sc-look {
    /* bases — js/designer-look-card.js writes the athlete volt + plate from the
       palette module inline on this element, which outranks these */
    --lk-ui-volt: var(--gc-accent-primary);
    --lk-ui-volt-deep: var(--gc-accent-primary);
    --lk-ui-on-volt: var(--gc-text-on-accent);
    --lk-ui-plate: var(--gc-bg-sunken);
    --lk-ui-plate-ink: var(--gc-text-color-secondary);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14.81px;
    padding: 17.28px;
    border-radius: 14.81px;
    border: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-panel);
    color: var(--gc-text-color-primary);
    font-family: var(--gc-font-body);
}
@container (min-width: 560px) {
    .sc-look { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); align-items: start; gap: 19.75px; padding: 19.75px; }
    .sc-look__board { position: sticky; top: 0; }
}

/* the board sits on the athlete app's plate */
.sc-look__board {
    border-radius: 17.28px;
    overflow: hidden;
    background: var(--lk-ui-plate);
    padding: 7.41px;
}
.sc-look__canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 600;
    border-radius: 9.87px;
}
.sc-look__caption {
    padding: 9.87px 7.41px 2.47px;
    color: var(--lk-ui-plate-ink);
    font-family: var(--gc-font-body);
    font-weight: 700;
    font-size: 11.11px;
    letter-spacing: 1.23px;
    text-transform: uppercase;
}

.sc-look__tray { display: flex; flex-direction: column; gap: 12.34px; min-width: 0; }
.sc-look__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12.34px; }
.sc-look__title {
    margin: 0;
    font-family: var(--gc-font-display);
    font-weight: 800;
    font-size: 25px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--gc-text-color-primary);
}
.sc-look__saved {
    display: inline-flex;
    align-items: center;
    gap: 4.94px;
    font-family: var(--gc-font-body);
    font-weight: 700;
    font-size: 11.11px;
    letter-spacing: 1.23px;
    text-transform: uppercase;
    color: var(--gc-text-color-secondary);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sc-look__saved::before { content: "\2713"; }
.sc-look__saved.is-on { opacity: 1; }

.sc-look__rows { display: flex; flex-direction: column; gap: 12.34px; }
.sc-look__row { display: flex; flex-direction: column; gap: 4.94px; min-width: 0; }
.sc-look__label {
    padding: 0 2.47px;
    font-family: var(--gc-font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2.22px;
    text-transform: uppercase;
    color: var(--gc-text-color-secondary);
}

/* the joined segmented control: one bordered box, hairline dividers, active
   = the volt fill with dark ink; full width, 44px keys */
.sc-look__seg {
    display: flex;
    width: 100%;
    border: 1px solid var(--gc-border-strong);
    border-radius: 4.94px;
    overflow: hidden;
    min-width: 0;
}
.sc-look__key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.41px;
    padding: 4.94px 7.41px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--gc-text-color-secondary);
    font-family: var(--gc-font-display);
    font-weight: 700;
    font-size: 11.72px;
    letter-spacing: 1.48px;
    line-height: 1.05;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.sc-look__key + .sc-look__key { border-left: 1px solid var(--gc-border-subtle); }
.sc-look__key:hover { color: var(--gc-text-color-primary); }
.sc-look__key:active { transform: scale(0.98); }
.sc-look__key:focus-visible { outline: 2px solid var(--lk-ui-volt-deep); outline-offset: -2px; }
.sc-look__key.is-active {
    background: linear-gradient(135deg, var(--lk-ui-volt), var(--lk-ui-volt-deep));
    color: var(--lk-ui-on-volt);
}
.sc-look__word { text-align: center; white-space: normal; overflow-wrap: normal; word-break: keep-all; }
/* a key with a swatch stacks it over the word, so "Night Turf" never
   truncates in a narrow tray */
.sc-look__key--swatch { flex-direction: column; gap: 4.94px; padding: 7.41px 4.94px; }
.sc-look__swatch {
    flex: none;
    width: 14.81px;
    height: 14.81px;
    border-radius: 50%;
    background: var(--sw, var(--gc-bg-sunken));
    box-shadow: 0 0 0 1px var(--gc-border-strong);
}

.sc-look__foot { display: flex; justify-content: flex-start; padding-top: 2.47px; }
.sc-look__reset {
    min-height: 44px;
    padding: 0 14.81px;
    border-radius: 9.87px;
    border: 1px solid var(--gc-border-strong);
    background: none;
    color: var(--gc-text-color-primary);
    font-family: var(--gc-font-body);
    font-weight: 700;
    font-size: 11.72px;
    letter-spacing: 1.23px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-look__reset:hover { background: var(--gc-bg-hover); }
.sc-look__reset:focus-visible { outline: 2px solid var(--gc-text-color-primary); outline-offset: 2px; }