/* "Corners: rounded" (Danny, 2026-10-08; an admin's switch, app/themes.py). Loaded last, and only when that choice is
   made (it is what the Mix layouts wear unless sharp is asked for). Cards 14px, thumbnails 10px, fields 10px, buttons
   and chips pills: the sizes are tokens (tokens.css, --round-*), and so are the two colours of the soft shadow.
   The heavy edges of cards and boxes go: a tinted fill and that shadow stand in for them. The radar's plot, the home
   chart's sheet and a strip of film stay square. No colour is written here.
   This sheet has the last word on corners, so its radii are marked important: no screen's own rule needs to know of it. */

:root { --radius: var(--round-card); --radius-small: var(--round-field); }

/* buttons and chips: pills */
.button, .mx-find__go, .mx-see, .vbox__close, .shot__pick, .radar__pick, .ready-chip, .fa__close, .badge, .chip, .chip button, .mx-chip, .flag, .replay__play, .replay__skip, .replay__over,
.fa .fa__bar, .fa .fa__bar span { border-radius: var(--round-pill) !important; }
/* fields */
input[type="email"], input[type="password"], input[type="text"], input[type="url"], textarea, select { border-radius: var(--round-field) !important; }
/* thumbnails, and the other small pictures of a video */
.vbox__thumb, .vbox__player, .player, .ex-shotc__box, .mx-card__n, .mx-shots, .mx-shot, .radar__steps, .mx-all, .shot--pick .vbox__face { border-radius: var(--round-thumb) !important; }
.mx-peek__c { border-radius: var(--round-thumb); }
.mx-shots, .radar__steps { overflow: hidden; }
.ex-pick .mx-shot { border-radius: 0 !important; }  /* there the shots are one joined list, rounded as a whole */
/* cards and boxes */
.card, .mx-card, .ex-pick, .ex-radar, .ex-finder, .mx-pick, .mx-find__box, .tr__sheet, .open, .makeit, .radar, .replay, .fa.fa--inline { border-radius: var(--round-card) !important; }

/* a tinted fill and a soft shadow where the heavy edge was */
.ex-radar, .ex-pick, .mx-pick, .ex-card, .fa.fa--inline, .fa.fa--inline[open], .ex-shotc__box { border: 0; box-shadow: 0 1px 2px var(--round-shade), 0 12px 28px -8px var(--round-shade-wide); }
.ex-radar, .mx-pick { background: var(--walnut); }
.mx-pick { padding: 18px 18px 20px; }
.ex-pick .mx-shots { border: 0; }
.ex-pick .mx-shot + .mx-shot { border-top: 0; }
/* Film along, in the Mix layouts: the clock and the strip of shots lose their ink edges */
:root[data-layout] .fa .fa__clock, :root[data-layout] .fa[data-state="running"] .fa__clock { border-color: transparent; border-radius: var(--round-thumb) !important; }
:root[data-layout] .fa .fa__strip { gap: 3px; }
:root[data-layout] .fa .fa__strip > li > .fa__blk { border: 0; border-radius: 8px !important; box-shadow: inset 0 0 0 1.5px var(--line); }  /* a thin ring: a shot whose colour is the panel's own must not vanish into it */
:root[data-layout] .fa .fa__strip > li > .fa__blk[aria-current] { box-shadow: 0 0 0 2px currentColor; }
/* the rules between sections are hairlines */
.mx-then, .mx-five { border-top: 1px solid var(--rule); }
.ex-then { border-top: 0; }
.ex-vs { border-top: 1px solid var(--rule); }

/* the radar: a rounded card with its plot left square. On a phone it stands a little in from the screen's edges,
   and its insides keep the width they had. */
.replay .radar { border-radius: 0 !important; }
@media (max-width: 899.98px) {
  .radar, .replay { margin-left: calc(8px - var(--gut)); margin-right: calc(8px - var(--gut)); padding-left: calc(var(--gut) - 8px); padding-right: calc(var(--gut) - 8px); }
  .replay .radar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
/* on a phone the line from the mark crosses the radar card's own foot, and the gap, to the pick's box */
.ex-top .mx-drop { height: 38px; }

@media (min-width: 900px) {
  .mx-pick { padding: 22px 24px 24px; border: 0; }
  .ex-top .mx-sheet { margin-right: -54px; }  /* the card's own padding and the gap: its edge is gone */
}