/* ==========================================================================
   English Studio — the look every page shares.

   The colours are the logo's: the Mini's navy, a brighter royal blue for
   anything you can press, and the Union Jack's red, used sparingly.

   Tailwind's runtime writes its own stylesheet after this file, so a rule
   here that has to beat a utility class carries a `body` in front of it.
   The layout and spacing stay in the markup; this file only dresses it.
   ========================================================================== */

:root {
  --es-navy: #1a2a52;
  --es-navy-2: #203466;
  --es-royal: #3b63c4;
  --es-royal-2: #2d4c9e;
  --es-royal-3: #263f80;
  --es-red: #e03a4a;
  --es-ink: #14213f;
  --es-muted: #5d6b88;
  --es-line: rgb(26 42 82 / .08);
  --es-grad: linear-gradient(135deg, #4c77d9 0%, #3b63c4 42%, #2a4899 100%);
  --es-grad-navy: linear-gradient(150deg, #2a3f78 0%, #1a2a52 60%, #121d3b 100%);
  --es-shadow-card: 0 1px 2px rgb(16 26 51 / .04), 0 10px 28px -14px rgb(26 42 82 / .18);
  --es-shadow-lift: 0 2px 6px rgb(16 26 51 / .05), 0 18px 40px -18px rgb(26 42 82 / .32);
  --es-shadow-btn: inset 0 1px 0 rgb(255 255 255 / .2), 0 8px 18px -8px rgb(38 63 128 / .7);
  --es-glass: rgb(255 255 255 / .78);
  --es-blur: saturate(1.6) blur(18px);
  --es-tabbar: 64px;
  --es-tabbar-space: calc(var(--es-tabbar) + env(safe-area-inset-bottom, 0px));
  accent-color: var(--es-royal);
}

/* --------------------------------------------------------------------------
   The page: a soft wash of the brand colours behind everything. A fixed
   layer rather than background-attachment, which iPhones ignore.
   -------------------------------------------------------------------------- */
html { background: #f3f6fb; }
body { background: transparent !important; color: #1e293b; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at -8% -12%, rgb(59 99 196 / .16), transparent 62%),
    radial-gradient(760px 420px at 108% -6%, rgb(224 58 74 / .07), transparent 60%),
    radial-gradient(1100px 700px at 50% 118%, rgb(59 99 196 / .09), transparent 62%),
    linear-gradient(180deg, #f6f8fd 0%, #eef2fa 100%);
}
::selection { background: rgb(59 99 196 / .18); }
body ::-webkit-scrollbar-thumb { background: #c9d2e3; border: 2px solid transparent; background-clip: padding-box; }

/* Headings: the brand's ink, drawn a little tighter. */
body #view-root h1.font-extrabold { color: var(--es-ink); letter-spacing: -.022em; }
body #view-root h2.font-extrabold, body #view-root h2.font-bold { color: var(--es-ink); letter-spacing: -.012em; }

/* The name, set the way the logo sets it. */
.es-wordmark {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 700; letter-spacing: .005em; color: var(--es-navy);
}
.es-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.es-brand-mark {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--es-line), 0 6px 14px -8px rgb(26 42 82 / .45);
}
.es-brand-mark img { width: 38px; height: 38px; object-fit: contain; }
.es-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.es-brand-text .es-wordmark { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-brand-role {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--es-muted); display: flex; align-items: center; gap: 6px; margin-top: 3px;
}
.es-brand-role::before { content: ''; width: 14px; height: 2px; border-radius: 2px; background: var(--es-red); }

/* A grid whose columns only start at sm: or lg: has one implicit column below
   that, and an implicit column is as wide as its longest unbreakable line: one
   long title in a truncated card pushed a whole phone page sideways. Explicit
   columns (grid-cols-*) are untouched; this only sizes the implicit ones. */
:where(.grid) { grid-auto-columns: minmax(0, 1fr); }
/* A select is as wide as its longest option unless told otherwise; never wider
   than the box it sits in. */
:where(select) { max-width: 100%; }

/* --------------------------------------------------------------------------
   Cards: white, rounder, lifted by a soft shadow instead of a grey outline.
   Tailwind composes ring + shadow from custom properties, so both are set
   here rather than fighting its box-shadow.
   -------------------------------------------------------------------------- */
body .bg-white.ring-1.ring-slate-200:not(.shadow-lg):not(.shadow-xl):not(.shadow-2xl) {
  --tw-ring-color: rgb(26 42 82 / .075);
  --tw-shadow: 0 1px 2px rgb(16 26 51 / .04), 0 10px 28px -14px rgb(26 42 82 / .18);
}
body .bg-white.ring-1.ring-slate-200.rounded-lg:not(.shadow-lg):not(.shadow-xl) {
  --tw-shadow: 0 1px 2px rgb(16 26 51 / .05);
}
body a.bg-white.ring-1.ring-slate-200, body button.bg-white.ring-1.ring-slate-200 {
  transition: box-shadow .18s ease, transform .18s ease, background-color .15s ease;
}
@media (hover: hover) {
  body a.bg-white.ring-1.ring-slate-200.rounded-2xl:hover {
    --tw-shadow: 0 2px 6px rgb(16 26 51 / .05), 0 18px 40px -18px rgb(26 42 82 / .32);
    transform: translateY(-1px);
  }
}
body .shadow-xl.bg-white, body .shadow-2xl.bg-white {
  --tw-shadow: 0 30px 70px -24px rgb(15 26 51 / .38), 0 2px 8px rgb(15 26 51 / .06);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* The main action: a gradient of the brand blue, lit from the top. */
body :is(button, a, label).bg-brand-500,
body :is(button, a, label).bg-brand-600 {
  background-image: var(--es-grad);
  box-shadow: var(--es-shadow-btn);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  body :is(button, a, label).bg-brand-500:hover,
  body :is(button, a, label).bg-brand-600:hover {
    filter: brightness(1.08) saturate(1.05);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 12px 24px -10px rgb(38 63 128 / .75);
  }
}
body :is(button, a, label).bg-brand-500:active,
body :is(button, a, label).bg-brand-600:active { transform: translateY(1px) scale(.985); filter: brightness(.96); }
body button.bg-brand-500:disabled, body button.bg-brand-600:disabled { filter: saturate(.4) opacity(.55); box-shadow: none; transform: none; }
/* Bars and dots in the brand colour get the same gradient, without the shadow. */
body div.bg-brand-500, body span.bg-brand-500 { background-image: var(--es-grad); }

/* The dark band over a form's section is navy too. */
body div.bg-slate-700.text-white { background-image: var(--es-grad-navy); }

/* Dark buttons are navy, not black. */
body :is(button, a).bg-slate-900 { background-image: var(--es-grad-navy); box-shadow: 0 8px 18px -10px rgb(15 26 51 / .7); }

/* The quiet actions: white, outlined by a hairline, lifted a little. */
body :is(button, a).bg-slate-100 {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgb(26 42 82 / .11), 0 1px 2px rgb(16 26 51 / .06);
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
@media (hover: hover) {
  body :is(button, a).bg-slate-100:hover { background-color: #f2f5fc; box-shadow: 0 0 0 1px rgb(59 99 196 / .28), 0 4px 10px -6px rgb(26 42 82 / .3); }
}
body :is(button, a).bg-slate-100:active { transform: scale(.985); }
body :is(button, a).bg-white.ring-1:active { transform: scale(.985); }

/* Anything pressable answers the finger at once. */
button, a, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
body :is(input, select, textarea).border-slate-300 { border-color: #d3dbe9; }
body :is(input, select, textarea).border-slate-300:hover { border-color: #b9c5dc; }
body :is(input, select, textarea):focus { outline: none; }
body :is(input, select, textarea).border:focus {
  border-color: var(--es-royal);
  box-shadow: 0 0 0 4px rgb(59 99 196 / .14);
}
/* One chevron for every select, instead of each browser's own. */
body select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235d6b88'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .5rem center; background-size: 1rem;
  padding-right: 1.8rem;
}
body select:not([multiple]):not([size]):disabled { opacity: .6; }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--es-royal); }

/* Someone's initials on a round badge (esAvatar() in the page). */
.es-av {
  display: grid; place-items: center; flex-shrink: 0; border-radius: 999px;
  color: #fff; font-weight: 700; letter-spacing: .02em;
  background: var(--av);
  background: linear-gradient(135deg, color-mix(in srgb, var(--av) 72%, #fff), var(--av));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 4px 10px -6px var(--av);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
body #view-root table thead th { color: #5d6b88; }
body #view-root table thead.bg-slate-50, body #view-root table thead tr.bg-slate-50 { background-color: #f6f8fc; }
@media (hover: hover) {
  body #view-root table tbody tr.hover\:bg-slate-50:hover { background-color: #f4f7fd; }
}

/* --------------------------------------------------------------------------
   Toasts and dialogs
   -------------------------------------------------------------------------- */
body .toast {
  border-radius: 16px; padding: 12px 16px; font-weight: 500;
  background: rgb(20 33 63 / .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -14px rgb(15 26 51 / .55), 0 0 0 1px rgb(255 255 255 / .06) inset;
}
body .toast.success { background: linear-gradient(135deg, #10a371, #047857); }
body .toast.error   { background: linear-gradient(135deg, #e5484d, #b4232f); }

body .modal-backdrop {
  background: rgb(15 26 51 / .42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body .modal-card {
  border-radius: 26px;
  box-shadow: 0 40px 100px -24px rgb(15 26 51 / .5), 0 0 0 1px rgb(26 42 82 / .06);
}

/* --------------------------------------------------------------------------
   Navigation — the same pill in the office panel and in the portal
   -------------------------------------------------------------------------- */
body .nav-item, body .nav-link {
  padding: 10px 12px; border-radius: 14px;
  color: #42506b; font-weight: 600; font-size: 14.5px; line-height: 1.25;
  transition: background-color .15s ease, color .15s ease, box-shadow .2s ease;
}
/* A row, unless the page has hidden the entry. */
body :is(.nav-item, .nav-link):not(.hidden) { display: flex; align-items: center; gap: 12px; }
body .nav-item svg, body .nav-link svg { color: #8391ad; transition: color .15s ease; flex-shrink: 0; }
@media (hover: hover) {
  body .nav-item:hover, body .nav-link:hover { background: rgb(59 99 196 / .08); color: var(--es-navy); }
  body .nav-item:hover svg, body .nav-link:hover svg { color: var(--es-royal); }
}
body .nav-item.active, body .nav-link.active {
  color: #fff; background: var(--es-grad);
  box-shadow: var(--es-shadow-btn);
}
body .nav-item.active svg, body .nav-link.active svg { color: #fff; }

/* The side column on a desktop: a floating panel in the brand's navy, lit
   royal at the top and warmed by a trace of the flag's red at the foot. Below
   1024px it gives way to the tabs and their sheet. */
@media (min-width: 1024px) {
  body .es-side {
    position: sticky; top: 12px; align-self: flex-start;
    height: calc(100vh - 24px); margin: 12px 0 12px 12px;
    border-radius: 28px; border: 0; color: #fff;
    background:
      radial-gradient(130% 55% at 0% 0%, rgb(86 128 226 / .55), transparent 62%),
      radial-gradient(100% 40% at 100% 100%, rgb(224 58 74 / .22), transparent 62%),
      linear-gradient(180deg, #243a73 0%, #1a2a52 58%, #141f43 100%);
    box-shadow: 0 30px 60px -30px rgb(15 26 51 / .7), inset 0 1px 0 rgb(255 255 255 / .1);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .25) transparent;
  }
  body .es-side::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .25); }
  body .es-side .es-wordmark { color: #fff; }
  body .es-side .es-brand-role { color: rgb(255 255 255 / .66); }
  body .es-side .es-brand-mark { box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6); }

  body .es-side .nav-item, body .es-side .nav-link { color: rgb(255 255 255 / .8); }
  body .es-side .nav-item svg, body .es-side .nav-link svg { color: rgb(255 255 255 / .6); }
  body .es-side .nav-item.active, body .es-side .nav-link.active {
    color: var(--es-navy); background: #fff;
    box-shadow: 0 12px 24px -12px rgb(0 0 0 / .55);
  }
  body .es-side .nav-item.active svg, body .es-side .nav-link.active svg { color: var(--es-royal); }

  /* What sits under the menu: the lines, the student-mode button, who is signed in. */
  body .es-side :is(.border-slate-200, .border-slate-200\/70) { border-color: rgb(255 255 255 / .12); }
  body .es-side a.bg-brand-500 {
    background: rgb(255 255 255 / .12); background-image: none;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
  }
  body .es-side #side-whoami > div:first-child { color: rgb(255 255 255 / .6); }
  body .es-side #side-whoami > div:first-child .text-slate-400 { color: rgb(255 255 255 / .55); }
  body .es-side #side-whoami > div:first-child :is(#admin-username, #hdr-user) { color: #fff; }
  body .es-side #side-whoami > div:first-child .text-brand-600 { color: #b9cdf6; }
  body .es-side :is(#logout-btn, #side-toggle) { color: rgb(255 255 255 / .6); }
  body .es-side > div > label.text-slate-400 { color: rgb(255 255 255 / .6); }
}
@media (min-width: 1024px) and (hover: hover) {
  body .es-side .nav-item:not(.active):hover, body .es-side .nav-link:not(.active):hover {
    background: rgb(255 255 255 / .1); color: #fff;
  }
  body .es-side .nav-item:not(.active):hover svg, body .es-side .nav-link:not(.active):hover svg { color: #fff; }
  body .es-side a.bg-brand-500:hover { background: rgb(255 255 255 / .2); filter: none; }
  body .es-side #side-whoami > div:first-child:hover { background: rgb(255 255 255 / .1); }
  body .es-side :is(#logout-btn, #side-toggle):hover { color: #fff; background: rgb(255 255 255 / .12); }
}

/* --------------------------------------------------------------------------
   Phones and tablets: a frosted bar on top, tabs at the bottom, and "More"
   growing the bar into a sheet with every other place (assets/es-shell.js).
   -------------------------------------------------------------------------- */
.es-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--es-glass);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  border-bottom: 1px solid var(--es-line);
}
.es-topbar .es-brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.es-topbar .es-brand-mark img { width: 33px; height: 33px; }
.es-topbar .es-wordmark { font-size: 18px; }
.es-avatar {
  margin-left: auto; flex-shrink: 0;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 15px; background: var(--es-grad);
  box-shadow: var(--es-shadow-btn);
}
.es-avatar:active { transform: scale(.94); }

.es-tabbar {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgb(255 255 255 / .84);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  border-top: 1px solid var(--es-line);
  box-shadow: 0 -10px 30px -18px rgb(26 42 82 / .35);
}
.es-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; padding: 4px 2px 2px; border: 0; background: none; cursor: pointer;
  color: #6b7896; font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.es-tab-ico {
  display: grid; place-items: center; width: 56px; height: 32px; border-radius: 999px;
  transition: background-color .2s ease, transform .12s ease;
}
.es-tab svg { width: 23px; height: 23px; }
.es-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tab.active { color: var(--es-royal-3); }
.es-tab.active .es-tab-ico { background: linear-gradient(135deg, rgb(76 119 217 / .18), rgb(42 72 153 / .2)); }
.es-tab:active .es-tab-ico { transform: scale(.9); }

/* Under the tab bar and its sheet (45), over the page and its floating button. */
.es-overlay {
  position: fixed; inset: 0; z-index: 44;
  background: rgb(15 26 51 / .38);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.es-overlay.show { opacity: 1; pointer-events: auto; }

@media (min-width: 1024px) {
  .es-topbar, .es-tabbar, .es-overlay { display: none !important; }
}
/* "More": the rest of the places as tiles, in a sheet on top of the bar. */
.es-sheet {
  position: absolute; left: 0; right: 0; bottom: 100%;
  padding: 18px 14px 8px;
  background: rgb(255 255 255 / .97);
  -webkit-backdrop-filter: var(--es-blur); backdrop-filter: var(--es-blur);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -24px 50px -26px rgb(15 26 51 / .5);
  max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(18px); visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
.es-tabbar.expanded .es-sheet {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.es-tabbar.expanded :is(#tab-more, #nav-more) .es-tab-ico { background: var(--es-grad); color: #fff; }
.es-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.es-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 0; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  color: #3b4760; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center;
}
.es-tile-ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px;
  color: var(--es-royal-2); background: linear-gradient(145deg, #f4f7fd, #e1e8f7);
  box-shadow: inset 0 0 0 1px rgb(59 99 196 / .12), 0 6px 14px -10px rgb(26 42 82 / .55);
  transition: transform .12s ease;
}
.es-tile svg { width: 25px; height: 25px; }
.es-tile:active .es-tile-ico { transform: scale(.92); }
.es-tile.active { color: var(--es-royal-3); }
.es-tile.active .es-tile-ico { color: #fff; background: var(--es-grad); box-shadow: var(--es-shadow-btn); }
.es-tile-label {
  max-width: 100%; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.es-sheet-head { margin: -4px 2px 16px; }
.es-sheet-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 4px 4px; border-top: 1px solid var(--es-line);
}
.es-sheet-av {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px;
  color: #fff; font-weight: 700; background: var(--es-grad);
}
.es-sheet-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.es-sheet-cap { font-size: 11px; color: var(--es-muted); }
.es-sheet-name { font-size: 13.5px; font-weight: 600; color: var(--es-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-sheet-out {
  flex-shrink: 0; padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #c42a3a; background: #fef2f3;
  box-shadow: inset 0 0 0 1px #fbc8ce;
}

/* The initial's menu, for somebody with more than one profile. */
.es-menu {
  position: fixed; z-index: 95; right: 12px; top: calc(62px + env(safe-area-inset-top, 0px));
  width: min(320px, calc(100vw - 24px)); padding: 8px;
  background: #fff; border-radius: 22px;
  box-shadow: 0 30px 70px -24px rgb(15 26 51 / .45), 0 0 0 1px var(--es-line);
  animation: esPop .18s ease both;
}
.es-menu[hidden] { display: none; }
.es-menu-head {
  padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--es-muted);
}
.es-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 14px; text-align: left; background: none; border: 0; cursor: pointer;
}
.es-menu-item.current { background: #f0f4fc; }
.es-menu-av {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px;
  color: #fff; font-weight: 700; background: var(--es-grad);
}
.es-menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.es-menu-name { font-size: 14px; font-weight: 700; color: var(--es-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-menu-sub { font-size: 11.5px; color: var(--es-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-menu-check { color: var(--es-royal); font-weight: 800; }
.es-menu-sep { height: 1px; margin: 6px 4px; background: var(--es-line); }
.es-menu-link {
  display: block; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left;
  font-size: 14px; font-weight: 600; color: #334155; background: none; border: 0; cursor: pointer;
}
.es-menu-link.danger { color: #c42a3a; }
@media (hover: hover) {
  .es-menu-item:hover, .es-menu-link:hover { background: #f3f6fc; }
}
@keyframes esPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  /* No side menu here: the tabs and their sheet carry it all. */
  body .es-side { display: none; }
  /* Room at the bottom for the tabs, wherever the page ends. */
  body #view-root { padding-bottom: calc(var(--es-tabbar-space) + 24px); }
  body #view-root .sticky.bottom-0 { bottom: calc(var(--es-tabbar-space) + 8px); }
  body .toast { top: calc(12px + env(safe-area-inset-top, 0px)); }
}
/* A tablet gets a floating tab bar, the way iPad apps carry theirs. */
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --es-tabbar-space: calc(var(--es-tabbar) + 28px + env(safe-area-inset-bottom, 0px)); }
  .es-tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(560px, calc(100% - 48px));
    padding: 6px; border-radius: 26px;
    border: 1px solid rgb(255 255 255 / .7);
    box-shadow: 0 18px 44px -18px rgb(15 26 51 / .45), 0 0 0 1px var(--es-line);
  }
  /* On a tablet the sheet floats above the floating bar, rounded all round. */
  .es-sheet {
    bottom: calc(100% + 10px); border-radius: 26px; padding: 20px 16px 10px;
    box-shadow: 0 24px 60px -24px rgb(15 26 51 / .55), 0 0 0 1px var(--es-line);
  }
  .es-sheet-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* A phone: the dialogs rise from the bottom edge, like the phone's own sheets. */
@media (max-width: 639px) {
  /* A row of tabs scrolls sideways instead of stacking up two or three deep. */
  body .es-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  body .es-tabs::-webkit-scrollbar { display: none; }
  body .es-tabs > * { flex-shrink: 0; white-space: nowrap; }
  body .toast { left: 12px; right: 12px; max-width: none; }
  /* The bar and its sheet read as one panel rising from the bottom edge. */
  .es-tabbar.expanded { border-top-color: transparent; box-shadow: none; }
  /* A list's main action floats above the tabs, a thumb away. */
  body .es-fab { position: fixed; z-index: 42; right: 16px; bottom: calc(var(--es-tabbar-space) + 14px); }
  body .es-fab:is(button, a), body .es-fab > :is(button, a) {
    border-radius: 999px; padding: 14px 22px; font-size: 16px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 16px 32px -12px rgb(38 63 128 / .85);
  }
  body #view-root:has(.es-fab) { padding-bottom: calc(var(--es-tabbar-space) + 100px); }
  body .modal-backdrop { align-items: flex-end; padding: 0; }
  body .modal-card {
    max-width: none !important; width: 100% !important;
    border-radius: 26px 26px 0 0; max-height: 92vh; max-height: 92dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    animation: esSheetUp .3s cubic-bezier(.2, .8, .2, 1) both;
  }
}
@keyframes esSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   Sign-in: the brand on navy, the form on white.
   -------------------------------------------------------------------------- */
.es-login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.es-login-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(520px 360px at 88% 0%, rgb(224 58 74 / .38), transparent 62%),
    radial-gradient(640px 460px at 0% 100%, rgb(76 119 217 / .55), transparent 62%),
    var(--es-grad-navy);
  padding: calc(36px + env(safe-area-inset-top, 0px)) 24px 88px;
  border-radius: 0 0 36px 36px;
  text-align: center;
}
/* The flag, faintly, behind the logo. */
.es-login-hero::before {
  content: ''; position: absolute; inset: -40% -20%; pointer-events: none; opacity: .9;
  background:
    linear-gradient(33deg, transparent 48.2%, rgb(255 255 255 / .07) 48.2%, rgb(255 255 255 / .07) 51.8%, transparent 51.8%),
    linear-gradient(-33deg, transparent 48.2%, rgb(255 255 255 / .07) 48.2%, rgb(255 255 255 / .07) 51.8%, transparent 51.8%),
    linear-gradient(90deg, transparent 47.5%, rgb(255 255 255 / .06) 47.5%, rgb(255 255 255 / .06) 52.5%, transparent 52.5%),
    linear-gradient(0deg, transparent 46%, rgb(255 255 255 / .06) 46%, rgb(255 255 255 / .06) 54%, transparent 54%);
}
.es-login-hero > * { position: relative; }
.es-login-logo {
  display: grid; place-items: center; margin: 0 auto 16px;
  width: 104px; height: 104px; border-radius: 30px; background: #fff;
  box-shadow: 0 22px 44px -18px rgb(0 0 0 / .55), 0 0 0 6px rgb(255 255 255 / .12);
}
.es-login-logo img { width: 90px; height: 90px; object-fit: contain; }
.es-login-hero .es-wordmark { color: #fff; font-size: 30px; line-height: 1.1; }
.es-login-tag { margin: 10px auto 0; max-width: 30ch; color: rgb(255 255 255 / .78); font-size: 15px; line-height: 1.5; }
.es-login-panel { flex: 1; display: flex; justify-content: center; padding: 0 16px 32px; margin-top: -56px; }
.es-login-card {
  width: 100%; max-width: 420px; align-self: flex-start;
  background: #fff; border-radius: 28px; padding: 28px 24px;
  box-shadow: 0 30px 70px -30px rgb(15 26 51 / .45), 0 0 0 1px var(--es-line);
}
@media (min-width: 1024px) {
  .es-login { flex-direction: row; }
  .es-login-hero {
    flex: 0 0 46%; border-radius: 0 44px 44px 0; padding: 56px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  .es-login-logo { width: 148px; height: 148px; border-radius: 40px; }
  .es-login-logo img { width: 128px; height: 128px; }
  .es-login-hero .es-wordmark { font-size: 44px; }
  .es-login-tag { font-size: 17px; }
  .es-login-panel { align-items: center; margin-top: 0; padding: 48px; }
  .es-login-card { align-self: center; padding: 40px 36px; }
}

/* --------------------------------------------------------------------------
   Libraries with folders (assets/es-folders.js): ticking many, the bar of
   things to do to them, and cards carried by hand.
   -------------------------------------------------------------------------- */
.es-item { position: relative; border-radius: 20px; }
/* A card's or a folder's "⋯" menu. */
.es-pop {
  position: fixed; z-index: 96; min-width: 210px; max-width: calc(100vw - 16px); padding: 6px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 0 0 1px var(--es-line), 0 22px 44px -16px rgb(15 26 51 / .4);
  animation: esPop .16s ease both;
}
.es-pop button {
  display: block; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left;
  font-size: 14px; line-height: 20px; font-weight: 600; color: #334155; background: none;
}
.es-pop button.danger { color: #dc2626; }
@media (hover: hover) { .es-pop button:hover { background: #f8fafc; } }
.es-item, [data-es-folder] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.es-item :is(input, textarea, select) { -webkit-user-select: text; user-select: text; }
/* The tick: a round bubble on the card's corner - on a mouse when the card is
   hovered or anything is ticked, on a touch screen always. */
.es-check {
  position: absolute; z-index: 2; top: -7px; left: -7px; width: 26px; height: 26px;
  cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.es-check input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.es-check span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1.5px #b9c5dc, 0 3px 8px -3px rgb(26 42 82 / .45);
  pointer-events: none;
}
.es-check input:checked + span { background: var(--es-grad); box-shadow: 0 0 0 1.5px #2d4c9e, 0 6px 14px -6px rgb(38 63 128 / .8); }
.es-check input:checked + span::after { content: '✓'; color: #fff; font-weight: 800; font-size: 14px; line-height: 1; }
.es-check input:focus-visible + span { box-shadow: 0 0 0 3px rgb(59 99 196 / .35); }
@media (hover: hover) { .es-item:hover .es-check { opacity: 1; } }
@media (hover: none) { .es-check { opacity: 1; } }
.es-check:focus-within, .es-picking .es-check { opacity: 1; }
.es-item.es-selected { box-shadow: 0 0 0 3px rgb(59 99 196 / .6); }
.es-dragging { opacity: .4; }
.es-drop-over { box-shadow: 0 0 0 3px var(--es-royal) !important; background-color: #f0f4fc !important; }
body.es-drag-on, body.es-drag-on * { cursor: grabbing !important; }
.es-ghost {
  position: fixed; z-index: 99; left: 0; top: 0; pointer-events: none;
  max-width: 260px; padding: 8px 14px; border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--es-grad-navy); box-shadow: 0 16px 34px -12px rgb(15 26 51 / .7);
}
.es-bulk {
  position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 24px);
  padding: 8px; border-radius: 22px; color: #fff; background: var(--es-grad-navy);
  box-shadow: 0 22px 50px -18px rgb(15 26 51 / .75);
  overflow-x: auto; scrollbar-width: none;
  animation: esBulkUp .22s cubic-bezier(.2, .8, .2, 1) both;
}
.es-bulk::-webkit-scrollbar { display: none; }
.es-bulk-count { padding: 0 10px 0 4px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.es-bulk button {
  flex-shrink: 0; padding: 9px 13px; border-radius: 14px; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: #fff; background: rgb(255 255 255 / .12);
}
.es-bulk button.danger { background: rgb(224 58 74 / .85); }
@media (hover: hover) { .es-bulk button:hover { background: rgb(255 255 255 / .22); } .es-bulk button.danger:hover { background: #e03a4a; } }
@keyframes esBulkUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.es-bulk .es-bulk-x { padding: 9px 11px; background: transparent; }
@media (max-width: 1023px) { .es-bulk { bottom: calc(var(--es-tabbar-space) + 12px); } }
/* A phone is too narrow for one row: the bar spans the screen and wraps, so
   every button stays within reach instead of scrolling out of sight. */
@media (max-width: 639px) {
  .es-bulk { left: 12px; right: 12px; transform: none; max-width: none; flex-wrap: wrap; justify-content: center;
             row-gap: 6px; overflow: visible; animation-name: esBulkUpPhone; }
}
@keyframes esBulkUpPhone { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* A page fades in without moving: a transform left on its wrapper would make
   the wrapper the frame for anything fixed inside it, like the floating button. */
body #view-root > .fade-in { animation-name: esFade; }
@keyframes esFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}