/* SchoolDay v236.5, corrected in v236.7: one appearance for every function.

   Loaded LAST in admin.html. That is necessary but, it turns out, nowhere near
   sufficient -- see the note on specificity above the tab rules.

     1. a title frame, so opening any function looks the same
     2. tabs with one shape and the Admin Branding colours
     3. the module panels sized to the panel, and NOTHING ELSE touched
     4. a mobile bar that touches the banner instead of floating under it */

/* ====================================================================== */
/* 1. THE TITLE FRAME                                                     */
/* ====================================================================== */

/* v236.7 rebuilt this. v236.5 centred the title against a three-column grid,
   and with a long description the text ran across the version badge and the
   help button -- the three things in the frame had no structural reason not
   to overlap, so they did.

   Rows, not columns, and every element in a named area:

     title    help
     desc     help
     actions  actions

   The help area is the only thing on the right, so nothing can collide with
   it. The description is in its own row under the title, left-aligned. Any
   action buttons the heading already carried go along the bottom, and wrap
   only when they run out of room. */
/* #adminApp is here to WIN, not to scope. styles.css:8656 says
 *
 *   #tab-class-calendars.class-calendar-empty-mode .section-heading {
 *     display: grid !important; grid-template-columns: 1fr !important;
 *     justify-items: center !important; text-align: center !important; }
 *
 * -- (1,2,0), every declaration !important, and it replaces this frame's whole
 * grid. It is why Class Calendars stayed centred through v236.7 and v236.8
 * while every other function came right: those releases fixed causes two and
 * three of four. An ID here beats it. */
.admin-body #adminApp .tab-panel > .section-heading.admin-title-frame-v2365,
.admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  justify-items: stretch !important;
  grid-template-areas:
    "title   help"
    "desc    help"
    "actions actions";
  align-items: start;
  gap: .7rem 1.5rem;
  /* v270.16: the frame's margin and padding are in admin-frames-v27016.css.
     They were !important here because styles.css forced .function-page-heading's
     padding and margin with !important; both of those are gone now, so the
     one place that sets them needs no !important at all. */
  border: 1px solid var(--admin-page-header-border, #b8d4ef);
  border-radius: .75rem;
  background: var(--admin-page-header-bg, #f4f9fd);
  color: var(--admin-page-header-text, #17364f);
  text-align: left !important;
  justify-content: initial !important;
}

/* The title and its description. Left-aligned, title first. */
.admin-title-frame-v2365 > .admin-title-main-v2365 {
  grid-area: title;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  text-align: left;
}
.admin-title-frame-v2365 > .admin-title-main-v2365 h2 {
  margin: 0 0 .2rem !important;
  font-size: 1.25rem;
  line-height: 1.2;
}
.admin-title-frame-v2365 > .admin-title-main-v2365 > .muted,
.admin-title-frame-v2365 > .admin-title-main-v2365 > p {
  margin: 0 !important;
  max-width: 62ch;
  color: #4a5f74;
  font-size: .88rem;
  line-height: 1.45;
  text-align: left;
}

/* Top right, and the only thing there. */
.admin-title-frame-v2365 > .admin-page-help-row {
  grid-area: help;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: end;
  gap: .5rem;
  margin: 0 !important;
  padding: 0 !important;
}
.admin-title-frame-v2365 > .admin-page-help-row .admin-version-label-v211 {
  padding: .18rem .5rem;
  border-radius: .35rem;
  background: #e7f1fa;
  color: #0f3d6b;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.admin-title-frame-v2365 > .admin-page-help-row button {
  padding: .35rem .7rem;
  font-size: .8rem;
  white-space: nowrap;
}

/* Compressed: the version goes UNDER the help button rather than beside it.
   Ordered explicitly, because wrapping a flex row would have put the button
   underneath instead, which is the wrong one to move. */
@media (max-width: 720px) {
  .admin-title-frame-v2365 > .admin-page-help-row {
    grid-auto-flow: row;
    justify-items: end;
    gap: .3rem;
  }
  .admin-title-frame-v2365 > .admin-page-help-row button { order: -1; }
}

/* Everything else the heading already held -- Generate list of events, Reload
   school comms -- along the bottom, in a line, wrapping only when it must. */
/* Everything else the heading holds -- the Key Stage picker and Load, the
   Generate and Reload buttons -- along the bottom of the frame, left aligned,
   wrapping only when it must.

   The !important is not decoration: styles.css:8664 centres these controls for
   Class Calendars specifically, at (1,2,0), when no Key Stage is loaded. */
.admin-title-frame-v2365 > *:not(.admin-page-help-row):not(.admin-title-main-v2365) {
  grid-area: actions;
  display: flex !important;
  flex-wrap: wrap;
  align-items: end !important;
  gap: .5rem;
  justify-content: flex-start !important;
  justify-items: start !important;
  margin: .5rem 0 0 !important;
  padding-top: .75rem;
  border-top: 1px solid var(--admin-page-header-border, #b8d4ef);
}

/* On a phone the frame is one column throughout, still left-aligned. */
@media (max-width: 520px) {
  .admin-body .tab-panel .section-heading.admin-title-frame-v2365 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "help" "title" "desc" "actions";
    padding: .65rem .7rem;
  }
  .admin-title-frame-v2365 > .admin-page-help-row { justify-items: start; justify-content: start; }
  .admin-title-frame-v2365 > .admin-page-help-row button { order: 0; }
}

/* Gated on the class the module sets. The row is a direct child of #adminApp
   in the markup, so hiding it unconditionally would delete "How this page
   works" outright if this stylesheet loaded and the script did not. */
html.admin-title-frames-v2365 #adminApp > .admin-page-help-row { display: none; }

/* ====================================================================== */
/* 2. TABS: FOLDER TABS, IN THE BRANDING COLOURS                          */
/* ====================================================================== */

/* WHY THESE SELECTORS LOOK LIKE THAT
   ----------------------------------
   v236.5 wrote .admin-body .schoolday-function-tabs-v2162 > button, loaded the
   file last, and nothing changed. admin-shell-v216.css has:

     .admin-body :is(.schoolday-function-tabs-v2162, #informationSubnavV136, ...) > button

   and :is() takes the specificity of its MOST SPECIFIC argument. There is an
   ID in that list, so those rules are (1,1,1) and v236.5's were (0,2,1).
   Loading later never came into it -- specificity is compared first.

   So these carry an ID of their own. #adminApp is a real ancestor of every
   panel, and the :is() lists below contain IDs too, which puts them past
   anything in v216. That is also why every strip ends up identical: one rule
   set wins everywhere instead of four sets winning in different places, which
   is what made View Metrics and Meal Plans look unlike the rest.

   #tabNav is deliberately NOT in the list. It is the page menu -- the sidebar
   on a laptop -- not a strip of in-page tabs. */
.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: .25rem !important;
  /* No gap under the row: the selected tab has to reach the content it opens,
     or it reads as a button sitting above a line. */
  margin: .45rem 0 0 !important;
  padding: 0 .2rem 0 .2rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--admin-tab-border, #b8d4ef) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) > button {
  position: relative;
  bottom: -1px;                       /* sit ON the rule, not above it */
  flex: 0 0 auto;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .5rem .95rem !important;
  border: 1px solid var(--admin-tab-border, #b8d4ef) !important;
  border-bottom-color: var(--admin-tab-border, #b8d4ef) !important;
  border-radius: .55rem .55rem 0 0 !important;
  background: var(--admin-tab-bg, #dceffc) !important;
  color: var(--admin-tab-text, #111827) !important;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* The selected tab is the front of the folder: it loses its bottom edge and
   runs into whatever is below it. Every marker the admin scripts use for
   "selected" is listed, because they do not agree with each other. */
.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) > button:is(.active, .selected, [aria-pressed="true"], [aria-selected="true"]) {
  z-index: 1;
  background: var(--admin-selected-tab-bg, #f5c542) !important;
  color: var(--admin-selected-tab-text, #111827) !important;
  border-color: var(--admin-selected-tab-border, #d09a00) !important;
  border-bottom-color: var(--admin-selected-tab-bg, #f5c542) !important;
}

.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) > button:not(.active):not(.selected):not([aria-pressed="true"]):not([aria-selected="true"]):hover {
  filter: brightness(.96);
}

/* The panel a tab strip opens into. Without this the selected tab merges into
   nothing and the folder reads as a line with buttons on it. */
.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) + * {
  /* Whatever the next element is -- a card, a div, or a bare <label> like the
     Email Template subject field. The Email Template one is why this is
     !important and why it is "+ *" rather than a list of tags: the label was
     sitting hard against the tab bar because neither applied to it. */
  margin-top: 0 !important;
  padding-top: 1.1rem !important;
}

/* ====================================================================== */
/* 3. THE MODULE PANELS, AND NOTHING ELSE                                 */
/* ====================================================================== */

/* v236.7 REMOVED the blanket clamp that used to live here:
 *
 *     .admin-body .tab-panel { max-width: 100%; }
 *     .admin-body .tab-panel > * { max-width: 100%; }
 *     .admin-body .tab-panel table { max-width: 100%; }
 *
 * #tab-school-calendars is "tab-panel card WIDE-CARD" -- deliberately wider
 * than the window, holding a calendar table with a column per class. On a
 * phone that clamp squeezed roughly thirty columns into about twelve pixels
 * each, so every cell wrapped to one character per line and the layout blew
 * up. The tab froze the page, with no JavaScript error, because it was not
 * JavaScript.
 *
 * Class Report Generation never needed the blanket rule. It needed the one
 * below: reportcards.css sizes its shell with calc(100vw - 2rem), which is
 * right for a page and wrong in a panel, because 100vw is the whole viewport
 * and the panel is the viewport minus the sidebar.
 *
 * That override already existed in v236.3 and lost: both selectors were
 * (0,2,0) with !important, so load order decided, and reportcards.css is added
 * to the head when the panel opens. Naming .admin-body puts this a class
 * ahead, which no load order can undo. */
.admin-body .admin-module-host-v2363 .reportcards-shell,
.admin-body .admin-module-host-v2363 .policies-shell,
.admin-body .admin-module-host-v2363 .admin-shell,
.admin-body .admin-module-host-v2363 .reportcards-body,
.admin-body .admin-module-host-v2363 .policies-body {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}

/* Wide content inside a module panel scrolls in its own box rather than
   pushing the admin page sideways. Scoped to the module hosts on purpose --
   a native panel that wants to be wide is allowed to be. */
.admin-body .admin-module-host-v2363 .report-pupil-table-wrap,
.admin-body .admin-module-host-v2363 .report-review-table-wrap-v203,
.admin-body .admin-module-host-v2363 .table-wrap { overflow-x: auto; }

/* ====================================================================== */
/* 4. THE MOBILE BAR MEETS THE BANNER                                     */
/* ====================================================================== */

/* It was a rounded card floating under the banner with the page scrolling
   beneath it. Staying put is right; floating is not -- the gap and the shadow
   made it a second thing on screen rather than the bottom of the first. */
@media (max-width: 820px) {
  .admin-body #mobileTabHeader.mobile-tab-header {
    top: var(--admin-banner-height-v2365, 54px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 .55rem calc(50% - 50vw) !important;
    padding: .4rem .7rem !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(23, 101, 168, .22) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06) !important;
  }

  /* "Current page" above the page name said what the bold line under it
     already showed. */
  .admin-body .mobile-tab-current .muted { display: none !important; }
  .admin-body .mobile-tab-current strong { font-size: 1rem; line-height: 1.2; }

  /* Shorter, so the page name gets the width. */
  .admin-body .mobile-tab-actions-v2113 { gap: .35rem; }
  .admin-body .mobile-tab-actions-v2113 button {
    min-height: 0 !important;
    padding: .35rem .6rem !important;
    font-size: .8rem !important;
    white-space: nowrap;
  }

  .admin-body #mobileTabMenu.mobile-tab-menu { border-radius: 0 0 .6rem .6rem !important; }

  /* With the bar against the banner, the title frame does not need a gap
     above it as well. */
  .admin-body .tab-panel .section-heading.admin-title-frame-v2365 { margin-top: 0; }
}

/* ====================================================================== */
/* 5. v236.8 CORRECTIONS                                                  */
/* ====================================================================== */

/* ---- The title really is left-aligned ---------------------------------- */

/* styles.css:8524 does this, with !important:
 *
 *     .function-page-heading { justify-content: center; text-align: center; }
 *     .function-page-heading > div { max-width: 900px; margin: 0 auto; }
 *
 * and admin.js puts .function-page-heading on the first heading in every
 * panel -- so the SAME element carries both classes. v236.7 aligned the
 * tagged title block and left that "> div" rule to centre it anyway.
 *
 * This targets the child directly, so it holds whether or not the module
 * managed to tag the block. Alignment is not something to leave depending on
 * a script having run. */
.admin-body #adminApp .tab-panel > .section-heading.admin-title-frame-v2365 > div,
.admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 > div {
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ---- The page controls, in the body ------------------------------------ */

/* A row of its own, under the standing notice and above the content it acts
   on. Left aligned, wrapping only when it must.

   The !important on justify-content is for Class Calendars specifically:
   styles.css:8664 centres these controls for that panel when no Key Stage is
   loaded, at (1,2,0). */
.admin-page-controls-v2368 {
  display: flex !important;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem;
  justify-content: flex-start !important;
  margin: 0 0 1.1rem !important;
}
.admin-page-controls-v2368:empty { display: none !important; }

/* ---- One frame under a tab strip, not two ------------------------------ */

/* Setup Resources, Games Settings and Information each draw their own card
   directly under the tab row, so the selected tab opened into a box inside a
   box, and the inner one started flush against the strip. The panel a strip
   opens into is the tab strip's own panel: it gets the padding, and nothing
   inside it draws a second border at the top. */
.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) + :is(.card, .panel, section, div) {
  /* v236.10: no frame, rather than a squared one. Squaring the top left the
     content in a box whose corner sat hard against the strip -- Setup
     Resources and Bulk Homework Manager both showed it. Manage Subjects has
     no box at all and reads better, so that is the shape for all of them. */
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1.1rem 0 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* A card nested straight inside the panel a strip opened is the extra frame
   the Games Settings tab showed: two borders, two lots of padding, one piece
   of content. */
.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) + * > .card:first-child {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ---- Policies: the tabs need something to open into ------------------- */

/* The policies strip had no panel under it, so the selected tab merged into
   the page background and read as misaligned rather than as the front of a
   folder. */
.admin-module-host-v2363 .policy-tab-nav + * {
  margin-top: 0 !important;
  padding: 1rem !important;
  border: 1px solid var(--admin-tab-border, #b8d4ef);
  border-top: 0;
  border-radius: 0 0 .7rem .7rem;
  background: #fff;
}

/* ====================================================================== */
/* 6. v236.9: PAGE HEADER BRANDING, AND THE TWO SPLIT FUNCTIONS           */
/* ====================================================================== */

/* The frame is a branded surface now -- Admin Branding -> Page headers sets
   its background, its border and its text. The title and the description
   inherit the text colour rather than carrying their own, or a school with a
   dark header would get dark text on it. */
.admin-title-frame-v2365 > .admin-title-main-v2365 h2 {
  color: var(--admin-page-header-text, #17364f);
}
.admin-title-frame-v2365 > .admin-title-main-v2365 > .muted,
.admin-title-frame-v2365 > .admin-title-main-v2365 > p {
  color: var(--admin-page-header-text, #17364f);
  opacity: .82;
}

/* ---- Manage Users and Manage Classes, split in two -------------------- */

/* Both did two jobs in one long scroll -- make a thing, then manage the
   things that exist. The strip uses the same classes as every other tab row,
   so it is styled by section 2 and by Admin Branding, not by anything here. */
.fn-split-holder-v2369 { min-width: 0; }
.fn-split-pane-v2369 { padding-top: 1rem; }
.fn-split-pane-v2369.hidden { display: none !important; }

/* The strip sits under whatever the panel already had above it. */
.fn-split-tabs-v2369 { margin-top: .75rem !important; }

/* ====================================================================== */
/* 7. v236.10: POLICIES INSIDE THE ADMIN PAGE                             */
/* ====================================================================== */

/* ---- The tab strip stops floating over the header ---------------------- */

/* policies.css:255 makes it sticky:
 *
 *     .policies-body .policy-tab-nav { position: sticky; top: 82px; z-index: 1400 }
 *
 * which is right for the standalone page, where 82px is its own header. Inside
 * the admin page there is already a sticky header, so the strip stuck to the
 * viewport and rode up OVER it as the page scrolled.
 *
 * It does not need to be sticky here: the panel scrolls with the page, and the
 * admin header is the thing that should stay. */
.admin-body #adminApp .admin-module-host-v2363 .policy-tab-nav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* ---- The policies strip is a folder like every other -------------------- */

/* It was styled entirely by policies.css -- a rounded pill container with
   rounded buttons -- which is why the Dashboard tab looked joined and the rest
   looked curved. It joins the same rules as every other strip now. */
.admin-body #adminApp .admin-module-host-v2363 .policy-tab-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: .25rem !important;
  margin: .45rem 0 0 !important;
  padding: 0 0 0 .2rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--admin-tab-border, #b8d4ef) !important;
  border-radius: 0 !important;
  background: none !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.admin-body #adminApp .admin-module-host-v2363 .policy-tab-nav > button {
  position: relative;
  bottom: -1px;
  flex: 0 0 auto;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .5rem .95rem !important;
  border: 1px solid var(--admin-tab-border, #b8d4ef) !important;
  border-radius: .55rem .55rem 0 0 !important;
  background: var(--admin-tab-bg, #dceffc) !important;
  color: var(--admin-tab-text, #111827) !important;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none !important;
  opacity: 1 !important;
}
.admin-body #adminApp .admin-module-host-v2363 .policy-tab-nav
  > button:is(.active, .selected, [aria-pressed="true"], [aria-selected="true"]) {
  z-index: 1;
  background: var(--admin-selected-tab-bg, #f5c542) !important;
  color: var(--admin-selected-tab-text, #111827) !important;
  border-color: var(--admin-selected-tab-border, #d09a00) !important;
  border-bottom-color: var(--admin-selected-tab-bg, #f5c542) !important;
}

/* ---- The Policies title matches every other title ---------------------- */

/* Policies renders its own header -- .policies-topline, an h2 and a Reload
   button in a white card -- so the title frame never applied to it and it was
   the one function whose heading looked unlike the rest. Same shape, same
   branding, same padding. */
.admin-body #adminApp .admin-module-host-v2363 .policies-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem 1.5rem;
  margin: 0 0 1.35rem !important;
  padding: 1.5rem 1.75rem !important;
  border: 1px solid var(--admin-page-header-border, #b8d4ef) !important;
  border-radius: .75rem !important;
  background: var(--admin-page-header-bg, #f4f9fd) !important;
  color: var(--admin-page-header-text, #17364f) !important;
  box-shadow: none !important;
  text-align: left !important;
}
.admin-body #adminApp .admin-module-host-v2363 .policies-topline h2 {
  margin: 0 0 .2rem !important;
  color: var(--admin-page-header-text, #17364f);
  font-size: 1.25rem;
  line-height: 1.2;
}
.admin-body #adminApp .admin-module-host-v2363 .policies-topline .muted {
  margin: 0 !important;
  color: var(--admin-page-header-text, #17364f);
  font-size: .88rem;
  opacity: .82;
}

/* ====================================================================== */
/* 8. v236.12: THE MODULE PANEL LOOKS LIKE EVERY OTHER PANEL              */
/* ====================================================================== */

/* ---- The renamed panels keep their show and hide ----------------------- */

/* The loader strips .tab-panel from a module's own panels, because admin.js
   sweeps every .tab-panel on each admin tab switch and was turning the policy
   dashboard off. switchPolicyTab still toggles .active, so the same two rules
   apply under the new name. */
.admin-module-host-v2363 .admin-module-panel-v23612 { display: none; }
.admin-module-host-v2363 .admin-module-panel-v23612.active { display: block; }

/* ---- The outer frame is back ------------------------------------------ */

/* v236.3 stripped the panel's card so a module drawing its own card would not
   be a card in a card. Neither module draws one for the whole page, so the
   result was Policies sitting on the bare page while every other function had
   a frame. It gets the same card as the rest. */
.admin-embedded-panel-v206:has(.admin-module-host-v2363) {
  /* v270.16: padding and shape are every panel's (admin-frames-v27016.css). */
  border: 1px solid var(--admin-tab-border, #b8d4ef) !important;
  background: var(--admin-card-bg, #fff) !important;
  box-shadow: none !important;
}

/* ---- Fewer curves ------------------------------------------------------ */

/* The corners were doing no work. A tab reads as a tab from the line it sits
   on and the gap the selected one makes in it, not from how round its top is
   -- and at .55rem the curve was the most noticeable thing about the strip. */
.admin-body #adminApp :is(
  .schoolday-function-tabs-v2162,
  .function-subnav,
  .sub-tab-row,
  .subtab-nav,
  .usage-tabs,
  .public-view-tabs-v194,
  .body-view-tabs-v228,
  #informationSubnavV136,
  #subjectKeyStageTabsV214
) > button,
.admin-body #adminApp .admin-module-host-v2363 .policy-tab-nav > button {
  border-radius: .3rem .3rem 0 0 !important;
}

/* And nothing a strip opens into is rounded at the top, so the join is flat. */
.admin-body #adminApp .admin-module-host-v2363 .policy-tab-nav + * {
  border-radius: 0 !important;
  border: 0 !important;
  padding: 1.1rem 0 0 !important;
  background: none !important;
}

/* ====================================================================== */
/* 6. v269.6: THE PHONE HEADER, AND TABS THAT FIT                         */
/* ====================================================================== */

/* 820px is where the app already calls itself mobile: it is the width at
   which #mobileTabHeader takes over (section 4). */
@media (max-width: 820px) {

  /* ---- The frame is the title, the version and How this page works ----- */

  /* The description is the longest thing in the frame and says what the page
     under it already shows -- "Every club at the school. Open a club to see
     its dates and take a register." above a list of clubs. On a phone that is
     most of the first screen, so it goes.

     The selector repeats the shape used in section 1 because that rule is
     !important throughout; a shorter selector here would lose to it. */
  .admin-body #adminApp .tab-panel > .section-heading.admin-title-frame-v2365 > .admin-title-main-v2365 > p,
  .admin-body #adminApp .tab-panel > .section-heading.admin-title-frame-v2365 > .admin-title-main-v2365 > .muted,
  .admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 > .admin-title-main-v2365 > p,
  .admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 > .admin-title-main-v2365 > .muted {
    display: none !important;
  }

  /* 1.5rem of padding around a single line of text is a lot of a phone. */
  .admin-body #adminApp .tab-panel > .section-heading.admin-title-frame-v2365,
  .admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 {
    gap: .35rem .6rem !important;
    margin-bottom: .6rem !important;
    padding: .55rem .7rem !important;
  }
  .admin-body #adminApp .tab-panel .section-heading.admin-title-frame-v2365 .admin-title-main-v2365 h2 {
    font-size: 1.05rem;
  }

  /* ---- Tabs: all one size, writing shrunk to fit ----------------------- */

  /* They were sized by their words, so "Dashboard" was narrow, "Manage
     Assessments" was wide and clipped, and the row scrolled. Now every tab
     takes an equal share of the row and the writing wraps inside it.

     flex-basis 0 with flex-grow 1 is what makes them equal: equal share of
     the row, not equal share of what is left after the words. The min-width
     is the floor -- a strip with eight tabs on it goes back to scrolling
     rather than squeezing them all into nothing, and they stay equal. */
  .admin-body #adminApp :is(
    .schoolday-function-tabs-v2162,
    .function-subnav,
    .sub-tab-row,
    .subtab-nav,
    .usage-tabs,
    .public-view-tabs-v194,
    .body-view-tabs-v228,
    #informationSubnavV136,
    #subjectKeyStageTabsV214
  ) {
    align-items: stretch !important;
    gap: .18rem !important;
    padding: 0 !important;
  }

  .admin-body #adminApp :is(
    .schoolday-function-tabs-v2162,
    .function-subnav,
    .sub-tab-row,
    .subtab-nav,
    .usage-tabs,
    .public-view-tabs-v194,
    .body-view-tabs-v228,
    #informationSubnavV136,
    #subjectKeyStageTabsV214
  ) > button {
    flex: 1 1 0 !important;
    min-width: 4.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .38rem .22rem !important;
    font-size: .72rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    hyphens: auto;
  }
}