/* POA's corners and motion (PJ, 10/22, for Will's "a little blocky").
   Every page loads this file last, printouts included.

   One radius scale, by role:
     --r-s    4px  tags, chips, buttons, fields, headshots
     --r-m    8px  cards, tiles, panels, menus, popovers
     --r-l   12px  dialogs and the profile
     --r-xs   2px  chips under about 14px tall (percentiles, grade cells),
                   so they stay cells and do not turn into pills
     --r-xl  28px  full-height sidebars, on the edge facing the content
                   only, as Gaurish's portal mockup draws them (PJ, 10/24)
   Bars and position tabs stay square: they are the frame.

   Every rule here is wrapped in :where(), which weighs nothing, so a
   component that needs a different corner sets border-radius in its own
   stylesheet and wins without a fight. Nothing in this file sets a color,
   so dark mode needs no twin; it is not in tools/build_dark_css. */
:root {
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 12px;
  --r-xs: calc(var(--r-s) / 2);
  --r-xl: 28px;
}

/* ---- small: buttons and fields ---- */
:where(button, select, textarea,
  input[type="text"], input[type="search"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input:not([type]),
  [class$="-btn"], [class*="-btn "]) {
  border-radius: var(--r-s);
}

/* ---- small: rank, grade and action tags in every view ---- */
:where(.rank-tag, .cfb-ranktag, .cf-rankchip, .cf-rank, .cf-classchip, .cf-dec, .cf-st,
  .cf-college-name, .gm-rank, .ctl-rank, .pip-grade, .gtc-rank, .sc-grade, .mp-ranktag,
  .mp-class, .trv-tag, .trv-rank, .trv-chip, .ug-big, .ug-small, .ph-rank-chip, .wl-rank-chip,
  .lb-card-rank, .mp-card-rank, .mp-hc-rank, .cg-tag, .cmp-tag, .action-chip, .c-official-tag,
  .class-chip, .ph-class-chip, .lb-class-chip, .commit-chip, .pscore-chip, .pj-grade-chip,
  .blind-chip, .efp-chip, .psnap-chip, .trk-chip, .sc-chip, .hsp-tag, .px-tag, .fp-tag,
  .ow-tag, .sc-tag, .fb-tag, .ps-op-tag, .mp-pill, .phc-rank, .phc-class, .ph-rankbadge,
  .ph-actionchip, .ph-classification, .eval-rank, .eval-score, .eval-szn, .combine-val, .ps-offer,
  .ps-linkmark, .score-box, .pscore-box, .ath-sub-box, .cfb-offer, .cf-qtag,
  .hw-badge, .acct-badge, .user-badge, .home-me, .home-me-badge, .trv-badge,
  .c-crit i, .ev-crit i, .ev-rank i, .ev-score i, .ev-trait, .boneyard-count, .wl-scorechip, .wl-name-new,
  .wl-pickable, .vz-rank, .gp-rank, .gp-group-year, .lb-rank, .lb-family-now, .ug-offer, .film-status, .contact-hit b, .cf-score, .mp-fan-school,
  .vh-era, .vh-thumb img) {
  border-radius: var(--r-s);
}

/* headshots and photos */
:where(.c-headshot, .cf-shot, .lb-card-shot, .mp-card-shot, .mp-hc-shot, .ph-shot, .vz-shot, .gp-shot, .lb-shot,
  .ph-statemap, .ph-statemap-canvas) {
  border-radius: var(--r-s);
  overflow: clip;
}

/* ---- micro: chips under about 14px tall ---- */
:where(.chip, .pct, .c-grade, .cf-newtag, .cf-pffnum.cf-pctshade, .cf-cut-clear, .bx-key i, .cf-qbar) {
  border-radius: var(--r-xs);
}

/* ---- segmented switches round as one piece ----
   overflow: clip, not hidden: a hidden overflow lets a switch inside a
   flex column shrink to nothing. */
:where(.toggle-group, .pf-seg, .mp-modeseg, .ef-levelseg, .lb-seg) {
  border-radius: var(--r-s);
  overflow: clip;
}
:where(.toggle-group, .pf-seg, .mp-modeseg, .ef-levelseg, .lb-seg) > :where(*) {
  border-radius: 0;
}

/* ---- the frame stays square ----
   The top menu, the submenus and their dropdowns, and the profile's tabs
   are the frame, not objects on it (PJ, 10/22). */
:where(.brand, .topnav-btn, .tn-top, .archive-btn, .tn-item, .tn-flymenu,
  .sn-page, .sn-item, .ptab-btn) {
  border-radius: 0;
}
/* other screens' tabs: top corners only, like folder tabs */
:where(.mp-sc-tab, .trv-tab, .pip-tab) {
  border-radius: var(--r-s) var(--r-s) 0 0;
}
/* position tabs sit in the bar, so they stay square; class tabs stand
   alone and round on every corner (PJ, 10/22) */
:where(.tab-btn) { border-radius: 0; }
:where(.class-tab) { border-radius: var(--r-s); }

/* ---- medium: cards, tiles, panels, menus, popovers ---- */
:where([class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "],
  [class$="-pop"], [class*="-pop "], [class$="-menu"], [class*="-menu "],
  .pf-dropmenu, .search-results, .ctl-pop-card, .cf-tally-pop,
  .home-stat, .home-door, .home-find, .home-dir-col, .step,
  .ptable, .prod-box, .rg-box, .ctl-box, .vh-lightbox img,
  .bigchip, .part, .why, .callout, .mp-area-tip, .mp-trv-tip) {
  border-radius: var(--r-m);
}
/* containers of rows clip their corners (the map's own controls are
   rounded in map.css, where they outrank Leaflet's stylesheet) */
:where(.ptable, .part, .home-door, .home-find, .pf-dropmenu, .search-results, .cfb-card) {
  overflow: clip;
}

/* Dropdown menus hang from their bar: square along the top, rounded at
   the bottom (PJ, 10/23); the mega menu's grey panel follows its corner. */
:where(.tn-menu, .sn-menu) { border-radius: 0 0 var(--r-m) var(--r-m); }
:where(.tn-panel) { border-radius: 0 0 var(--r-m) 0; }

/* cells inside those containers stay square */
:where(.ph, .ptable-head, .home-dir-item) { border-radius: 0; }
/* the profile sidebar and full-height sidebars are frame, not cards */
:where(.profile-sidebar, .mp-panel, .sc-panel) { border-radius: 0; }

/* ---- large: dialogs and the profile ---- */
:where(.profile-card, [class$="-modal"], [class*="-modal "], .crop-dialog,
  .school-modal-frame, .login-card) {
  border-radius: var(--r-l);
  overflow: clip;
}

/* ---- motion ----
   The feel of a phone (PJ, 10/22): short, quiet and everywhere. Things that
   appear ease in from a few pixels away; things that are pressed give a
   little; colors change over a beat instead of snapping. Times stay
   between 120 and 240ms so nothing waits on an animation. Shadows appear
   only on what floats. Anyone who turns motion off on his computer gets
   none of it. */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  /* A screen fades in when it opens. Opacity only: a transform here would
     move the map's tiles and every fixed popup inside the screen. */
  :where([id$="-screen"]:not([hidden])) { animation: poa-fade .2s ease-out; }

  /* The profile rises in when it opens (.opening, set by profile.js), sinks
     away when it closes (.closing), and a new tab crossfades (.tab-in). */
  :where(.profile-overlay.opening) { animation: poa-fade .18s ease-out; }
  :where(.profile-overlay.opening .profile-card) { animation: poa-rise .24s var(--ease); }
  :where(.profile-overlay.closing) { animation: poa-fade-out .16s ease-in forwards; pointer-events: none; }
  :where(.profile-overlay.closing .profile-card) { animation: poa-sink .16s ease-in forwards; }
  :where(.tab-in) { animation: poa-fade .18s ease-out; }

  /* Menus, dropdowns, search results and popovers drop in from their
     anchor. */
  :where([class$="-menu"], [class*="-menu "], .pf-dropmenu, .search-results, .tn-menu,
    [class$="-pop"], [class*="-pop "], .ctl-pop-card) {
    animation: poa-drop .16s var(--ease);
    transform-origin: top center;
  }

  /* Dialogs and their backdrops. */
  :where([class$="-overlay"]:not(.profile-overlay), [class$="-modalback"], .wdg-sheet-back, .school-modal-back) {
    animation: poa-fade .18s ease-out;
  }
  :where([class$="-modal"], [class*="-modal "], .crop-dialog, .school-modal-frame) {
    animation: poa-rise .24s var(--ease);
  }

  /* Colors and borders change over a beat. */
  :where(button, a, .class-tab, .tab-btn, .prow, .wl-row, .cf-row, .hot-row, .sc-row, tr, .chip,
    .action-chip, .home-dir-item, input, select, textarea) {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease,
      box-shadow .15s ease, opacity .15s ease, transform .12s var(--ease);
  }
  /* A press gives a little, the way a key does. Not tabs or menu items:
     they are the frame, and a tab that moved when pressed read as the page
     jumping (PJ, 10/22). */
  :where(button:not(:disabled):not(.ptab-btn, .tab-btn, .class-tab, .topnav-btn, .sn-page, .sn-item, .tn-item, .cf-qday),
    .home-door, .home-stat):active {
    transform: scale(.97);
  }
}
@keyframes poa-fade { from { opacity: 0; } }
@keyframes poa-fade-out { to { opacity: 0; } }
@keyframes poa-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes poa-sink { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes poa-drop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Light and dark cross-fade (PJ, 10/26): the old page dissolves into the new
   over half a second. Browsers without view transitions get the class. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.5s; animation-timing-function: ease-in-out; }
  :root.theme-fading *, :root.theme-fading *::before, :root.theme-fading *::after {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, fill 0.45s ease, box-shadow 0.45s ease !important; }
}

/* Hover cards wait a quarter second before they show, and go at once
   (PJ, 10/29: "they are a bit quick"). */
.ew-tw:hover > .ew-tip, .ew-score:hover .why, .pn-tipwrap:hover > .pn-tip, .pn-boxprod:hover .why,
.pn-dparts .seg:hover .why, .ew-bignum:hover, .ew-bignum:hover .pt { transition-delay: .25s; }