/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMS: the parts the page (/tutix-programs) and the film's fifth chapter share (DESIGN.md 14.8).
   An offer's emblem tile with its Core / Extended badge, the depth dial and the shelf of emblems. Scoped under .pp-scope, which both roots carry
   (static/css/programs-page.css is the page's own sheet; static/css/film.css draws the chapter's plane and words). Every control that draws its own edge
   states its :focus-visible ring at the end of this sheet.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The emblem tile itself (.pmark), copied whole from static/css/public-pages.css so the landing film, which does not load that sheet, draws the same tiles.
   tests/test_programs_marketing_page.py holds the two copies equal rule for rule: change the tile in public-pages.css and copy it here. */
/* ============================ a program's emblem tile (.pmark) ============================ */
/* utils/program_emblems.py draws it (porcelain_program_mark in Jinja) from the same emblems React's ProgramMark draws, with the same numbers
   as ProgramMark.module.css: a rounded square (27% of its side) that holds one emblem in the program's own hue. The tile sets three custom
   properties and the emblem's own classes read them: --e the hue (inline, from the data), --ei the deep ink of its lines (the hue mixed 64%
   with --cls-ink, so it is deep in light and light in dark with no second table), --ew the pale wash inside shapes (the hue mixed 20% with
   the leaf). A program with no emblem keeps its monogram on the subject area's ink ([data-area] sets --cls-area in porcelain-tokens.css). The
   hues are illustration colours of the programs, not interface accents: controls stay the house blue. The curriculum tag is white
   (--cls-on-accent) on --et, the hue mixed 64% with the darkest ink of the mode (--cls-ink in light, --cls-shadow-ink in dark, where
   --cls-ink is light), so it holds 4.5:1 or more for all twelve hues in both modes. It is a picture beside a name, never instead of one. */
.pmark{--e:var(--cls-area);position:relative;display:inline-grid;flex:none;place-items:center;width:46px;height:46px;border-radius:27%;
  border:1px solid color-mix(in srgb,var(--cls-area) 46%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--cls-area) var(--cls-area-tint),var(--cls-leaf)),color-mix(in srgb,var(--cls-area) var(--cls-area-wash),var(--cls-leaf)));
  box-shadow:var(--cls-lit);color:var(--cls-area-ink);user-select:none}
.pmark--emblem{--ei:color-mix(in srgb,var(--e) 64%,var(--cls-ink));--ew:color-mix(in srgb,var(--e) 20%,var(--cls-leaf));--et:color-mix(in srgb,var(--e) 64%,var(--cls-ink));
  border-color:color-mix(in srgb,var(--e) 44%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--e) 22%,var(--cls-leaf)),color-mix(in srgb,var(--e) 8%,var(--cls-leaf)))}
:root[class~="dark"] .pmark--emblem{--et:color-mix(in srgb,var(--e) 64%,var(--cls-shadow-ink))}
@media (prefers-color-scheme:dark){:root:not([class~="cls-light"]) .pmark--emblem{--et:color-mix(in srgb,var(--e) 64%,var(--cls-shadow-ink))}}
.pmark__art{display:block;width:100%;height:100%;border-radius:inherit;max-width:none}
.pmark__art .s{fill:none;stroke:var(--ei);stroke-linecap:round;stroke-linejoin:round}
.pmark__art .f{fill:var(--e)}
.pmark__art .w{fill:var(--ew)}
.pmark__art .i{fill:var(--ei)}
.pmark__letters{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1}
.pmark__letters[data-long="true"]{font-size:13px;letter-spacing:-.02em}
.pmark__tag{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);max-width:100%;overflow:hidden;padding:1px 7px;border-radius:7px;
  border:2px solid var(--cls-leaf);background:var(--et,color-mix(in srgb,var(--cls-area) 64%,var(--cls-ink)));color:var(--cls-on-accent);
  font-size:8.5px;font-weight:800;letter-spacing:.06em;line-height:1.5;white-space:nowrap}
.pmark--sm{width:36px;height:36px}
.pmark--sm .pmark__letters{font-size:12.5px}
.pmark--sm .pmark__letters[data-long="true"]{font-size:11.5px}
.pmark--lg{width:64px;height:64px}
.pmark--lg .pmark__letters{font-size:19px;letter-spacing:-.015em}
.pmark--lg .pmark__letters[data-long="true"]{font-size:15.5px}
.pmark--lg .pmark__tag{bottom:-10px;font-size:9.5px}
.pmark--xl{width:88px;height:88px}
.pmark--xl .pmark__letters{font-size:26px;letter-spacing:-.02em}
.pmark--xl .pmark__letters[data-long="true"]{font-size:21px}
.pmark--xl .pmark__tag{bottom:-12px;padding:2px 9px;border-radius:8px;font-size:10.5px}

.pp-scope .pp-mark{position:relative;display:inline-grid;flex:none;place-items:center;--et:color-mix(in srgb,var(--e,var(--cls-area)) 64%,var(--cls-ink))}
:root[class~="dark"] .pp-scope .pp-mark{--et:color-mix(in srgb,var(--e,var(--cls-area)) 64%,var(--cls-shadow-ink))}
@media (prefers-color-scheme:dark){:root:not([class~="cls-light"]) .pp-scope .pp-mark{--et:color-mix(in srgb,var(--e,var(--cls-area)) 64%,var(--cls-shadow-ink))}}
.pp-scope .pp-mark--xs .pmark{width:28px;height:28px;border-radius:30%}
.pp-scope .pp-trk{position:absolute;right:-5px;top:-5px;width:15px;height:15px;box-sizing:content-box;border-radius:50%;background:var(--et);color:var(--cls-on-accent);border:2px solid var(--cls-leaf);font-size:8px;font-weight:800;display:grid;place-items:center;line-height:1}
.pp-scope .pp-mark--xs .pp-trk{width:11px;height:11px;font-size:6.5px;right:-4px;top:-4px}
.pp-scope .pmark--lg + .pp-trk{width:20px;height:20px;font-size:10px}
.pp-scope .dial{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--cls-sunk);border:1px solid var(--cls-line-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pp-scope .dial::-webkit-scrollbar{display:none}
.pp-scope .dial[data-more]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.pp-scope .dial button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--cls-ink-3);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color 160ms,color 160ms}
.pp-scope .dial button:hover{color:var(--cls-ink)}
.pp-scope .dial button[aria-checked="true"]{background:var(--cls-leaf);color:var(--cls-ink);box-shadow:var(--cls-raise),var(--cls-lit)}
.pp-scope .dial button[aria-checked="true"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cls-blue);flex:none}
.pp-scope .shelf{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center}
.pp-scope .shelf .gap{width:14px}
.pp-scope .pick{appearance:none;border:0;background:none;padding:4px;border-radius:14px;position:relative;cursor:pointer}
.pp-scope .pick[aria-checked="true"]{box-shadow:0 0 0 2px var(--cls-ground),0 0 0 4px var(--e,var(--cls-area))}
.pp-scope .pick::after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--cls-screen);color:#f4efe6;border:1px solid rgba(255,246,234,.14);padding:5px 10px;border-radius:9px;font-size:12.5px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 120ms;z-index:5}
.pp-scope .pick:hover::after,.pp-scope .pick:focus-visible::after{opacity:1}

/* a touch screen: every control is 44px */
@media (pointer:coarse){.pp-scope .dial button{min-height:44px}.pp-scope .pick{min-width:44px;min-height:44px}}
/* focus: the dial's chosen stop and the shelf's chosen emblem draw their own edge, so the ring is stated again after them */
.pp-scope :is(.dial button,.pick):focus-visible{outline:2px solid transparent;box-shadow:var(--cls-focus);transition:none}