/* ===========================================================================
 * EAH SPACES — per-space colour, motion, and one subsection-tab look   v3.33.0
 * ---------------------------------------------------------------------------
 * Owner: "apply this same concept for section, subsection menus and their
 * respective spaces design to the ephesus account hub."
 *
 * The concept, from the Online Service Setup console (v2.44.x):
 *   1. every control space carries its own accent, and the accent travels from
 *      the card you clicked into the space it opens, so colour says where you are
 *   2. a space's stacked subsections become a WRAPPING row of tabs showing one
 *      panel at a time, so no space is taller than about a screenful
 *   3. hover, entrance and panel changes move — subtly, and never when the
 *      member has asked the system for less motion
 *
 * WHAT IS DIFFERENT HERE, AND WHY THIS FILE IS SHAPED THE WAY IT IS
 * ---------------------------------------------------------------------------
 * The Online Service console had ONE subsection mechanism, which this project
 * wrote. The Hub already has FOUR, all live, none aware of the others:
 *
 *   .eah-toprail__chip   5 sections, scroll-spy, each with its own accent
 *   .sec-tab             Security only; it RE-PARENTS cards into new panels
 *   .egw-subnav-chip     the group nav across a sidebar parent's siblings
 *   .eahib-chip          the inbox filter rail
 *
 * A fifth competing mechanism would be the exact "double up" the existing guard
 * at the in-section builder warns about — and worse, the URL router treats the
 * FIRST matching control in a panel as the subsection, so two mechanisms in one
 * panel means the address bar starts describing the wrong one.
 *
 * So the split is deliberate:
 *   BEHAVIOUR (one panel at a time) is added only where nothing exists.
 *   LOOK (this pill, this accent) is given to all of them.
 * One visual language across the console, and nothing fighting underneath it.
 *
 * THE !important ON THE LEGACY FAMILIES IS NOT LAZINESS.
 * Those three families are styled from <style> blocks INSIDE the profile
 * template — body markup, which outranks every enqueued sheet on source order no
 * matter what order the sheets load in. Restyling them from a stylesheet needs
 * to out-rank a body rule, and `html .prof-container` + !important is the bar the
 * template itself already set (see the palette-participation block). The NEW
 * classes in this file carry no !important at all; they have no competition.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1. THE ACCENT
 * --a is the ink (text, fill, border), --aw the wash behind an icon.
 * Named to match the Online Service console so the two read the same.
 *
 * A space with no palette falls back to the house clay rather than to nothing.
 * An UNDECLARED var() drops the whole declaration — a space added later without
 * a colour would lose the styling, not merely the colour. -----------------  */
.prof-content-section{ --a:#ef5130; --aw:rgba(239,81,48,.12); }

/* The leadership consoles get theirs from PHP: the card grid already keeps a
   colour per permission group, and the section wrapper now carries the same
   value as --c. Deriving --aw from it with color-mix means one number in PHP,
   not two. Browsers without color-mix keep the fallback wash — the ink, which
   is what carries the meaning, still lands. */
.prof-content-section[style*="--c:"]{ --a:var(--c); }
@supports (color: color-mix(in srgb, red 10%, white)){
  .prof-content-section[style*="--c:"]{ --aw:color-mix(in srgb, var(--c) 13%, transparent); }
}

/* The member-facing sections. These slugs are the data-section values the
   profile template emits; the colours follow the icon washes the template
   already used for them, so nothing changes hue on upgrade. */
.prof-content-section[data-section="home"]        { --a:#b45309; --aw:rgba(180,83,9,.12) }
.prof-content-section[data-section="overview"]    { --a:#0d7d75; --aw:rgba(13,125,117,.12) }
.prof-content-section[data-section="readings"]    { --a:#6366f1; --aw:rgba(99,102,241,.12) }
.prof-content-section[data-section="inbox"]       { --a:#0891b2; --aw:rgba(8,145,178,.12) }
.prof-content-section[data-section="directory"]   { --a:#0d9488; --aw:rgba(13,148,136,.12) }
.prof-content-section[data-section="resources"]   { --a:#4f46e5; --aw:rgba(79,70,229,.12) }
.prof-content-section[data-section="welfare"]     { --a:#be123c; --aw:rgba(190,18,57,.12) }
.prof-content-section[data-section="organization"]{ --a:#7c3aed; --aw:rgba(124,58,237,.12) }
.prof-content-section[data-section="leadership"]  { --a:#b91c1c; --aw:rgba(185,28,28,.12) }
.prof-content-section[data-section="calendar"]    { --a:#f59e0b; --aw:rgba(245,158,11,.12) }
.prof-content-section[data-section="bookings"]    { --a:#2563eb; --aw:rgba(37,99,235,.12) }
.prof-content-section[data-section="registrations"]{ --a:#059669; --aw:rgba(5,150,105,.12) }
.prof-content-section[data-section="give"]        { --a:#e11d48; --aw:rgba(225,29,72,.12) }
.prof-content-section[data-section="academy"]     { --a:#0d7d75; --aw:rgba(13,125,117,.12) }
.prof-content-section[data-section="security"]    { --a:#dc2626; --aw:rgba(220,38,38,.12) }
.prof-content-section[data-section="privacy"]     { --a:#475467; --aw:rgba(71,84,103,.12) }
.prof-content-section[data-section="notifications"]{ --a:#0ea5e9; --aw:rgba(14,165,233,.12) }
.prof-content-section[data-section="appearance"]  { --a:#8b5cf6; --aw:rgba(139,92,246,.12) }
.prof-content-section[data-section="trash"]       { --a:#5f5e5a; --aw:rgba(95,94,90,.12) }

/* ---------------------------------------------------------------------------
 * 2. THE TAB ROW — the new mechanism
 * Type and padding match the Online Service console, including the correction
 * the owner asked for there: 12.5px type and 12px horizontal padding. That
 * second number is the one that matters on a phone — it, not the type size,
 * decides how many lines the labels wrap onto.
 * The HEIGHT differs from the sister site, and deliberately; see the note on
 * the 44px floor below. ---------------------------------------------------  */
.eahsp-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 13px; padding:0 0 9px;
  border-bottom:1px solid var(--hairline, rgba(0,0,0,.10)); }
.eahsp-tabs[hidden]{ display:none }

/* THE PILL IS 44px TALL HERE, NOT 30px LIKE THE SISTER SITE, AND THAT IS
   DELIBERATE. frontend-responsive.css sets `min-height:44px` on every button in
   this theme, commented "WCAG touch target". Overriding a stated accessibility
   floor to reclaim 14px on a menu would be the wrong trade, and it would make
   these the only buttons in the Hub that break the rule. So the floor stands and
   the tabs match every other control on the site.
   The explicit centring is because of it: a button given a min-height taller
   than its content does not reliably centre that content across browsers, and
   the label was sitting high. */
.eahsp-tab{ border:1px solid var(--hairline, rgba(0,0,0,.10));
  background:var(--prof-card-bg, #fff); color:var(--prof-text-dark-body, #475467);
  border-radius:999px; padding:5px 12px; font:inherit; font-size:12.5px; line-height:1.5;
  font-weight:600; cursor:pointer; white-space:nowrap; max-width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; text-overflow:ellipsis;
  transition:background 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)),
             color 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)),
             border-color 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)),
             transform 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)); }
.eahsp-tab:hover{ border-color:var(--a); color:var(--prof-text-dark-heading, #101828); transform:translateY(-1px) }
.eahsp-tab[aria-selected="true"]{ background:var(--a); border-color:var(--a); color:#fff }
.eahsp-tab:focus-visible{ outline:2px solid var(--a); outline-offset:2px }

/* HIDDEN, NEVER REMOVED and never re-parented. Every existing save handler,
   switch, upload and AJAX binding inside a panel keeps working untouched —
   which is the whole reason this is a visibility change and not a rebuild.
   !important because the panels being hidden are ordinary template markup and
   several of them carry their own display rule. */
[data-eahsp-off]{ display:none !important }

/* The panel that just appeared fades in. It is the only one on screen, so
   nothing needs pointing at — this only softens the swap. */
@keyframes eahspPane{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.eahsp-shown{ animation:eahspPane 260ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)) }

/* ---------------------------------------------------------------------------
 * 3. THE SAME PILL FOR THE THREE LEGACY FAMILIES
 * See the !important note in the header — these out-rank body <style> blocks.
 * The top rail keeps its own per-rail accent where it declares one; where it
 * does not, it inherits the section's. -----------------------------------  */
html .prof-container .eah-toprail,
html .prof-container .egw-subnav{
  display:flex !important; flex-wrap:wrap !important; gap:6px !important;
  overflow:visible !important;            /* was overflow-x:auto — see below */
  -webkit-overflow-scrolling:auto !important; }

/* A subsection you have to swipe sideways to find is a subsection you do not
   know exists. Both legacy rails scrolled horizontally; both now wrap. */

html .prof-container .eah-toprail__chip,
html .prof-container .egw-subnav-chip,
html .prof-container .sec-tab{
  border-radius:999px !important; padding:5px 12px !important;
  font-size:12.5px !important; line-height:1.5 !important; font-weight:600 !important;
  white-space:nowrap !important;
  transition:background 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)),
             color 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)),
             border-color 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)),
             transform 180ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)) !important; }

html .prof-container .eah-toprail__chip:hover,
html .prof-container .egw-subnav-chip:hover,
html .prof-container .sec-tab:hover{
  border-color:var(--eah-rail-accent, var(--a)) !important;
  transform:translateY(-1px) !important; }

html .prof-container .eah-toprail__chip.is-active,
html .prof-container .egw-subnav-chip.active,
html .prof-container .sec-tab.active{
  background:var(--eah-rail-accent, var(--a)) !important;
  border-color:var(--eah-rail-accent, var(--a)) !important;
  color:#fff !important; }

/* ---------------------------------------------------------------------------
 * 4. THE LEADERSHIP CARD GRID — the Hub's equivalent of the Setup hub page
 *
 * ALMOST NOTHING BELONGS HERE, AND THAT IS THE POINT.
 * These cards (.egw-lc, in .egw-lc-grid) ALREADY have the treatment this task
 * was going to add, and a richer one: egw-polish.css gives them a hover lift, a
 * shadow tinted from the card's own --c, a border that takes --c, a radial wash
 * on ::before, a shine sweep on ::after, and an icon that scales and fills with
 * a gradient. A first draft of this section re-implemented all of it against
 * `.egw-lc-card` — a class this theme has never emitted — and would have been
 * dead on arrival; corrected to the real class it would have been worse, because
 * both pseudo-elements are already spoken for and an accent edge on ::before
 * would have painted over the existing wash.
 *
 * So this section adds only what is genuinely missing, and repairs one thing.
 *
 * ADDED: the staggered entrance. Nothing else animates the grid appearing.
 * REPAIRED: the existing reduced-motion block clears `transition` on the card
 * and the icon and hides the shine — but it does NOT clear `transform`, so the
 * -5px hover jump and the icon's scale still happen, they just snap into place
 * instead of easing. Cleared properly in section 5.
 *
 * Specificity note: the existing rules are `.prof-container .egw-lc` (0,2,0).
 * A bare `.egw-lc` here would be (0,1,0) and lose no matter how late this file
 * loads, so these match the same shape. ---------------------------------- */
@keyframes eahspIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.prof-container .egw-lc-grid > .egw-lc{ opacity:0;
  animation:eahspIn 420ms var(--ease-standard, cubic-bezier(.2,.7,.3,1)) forwards }
.prof-container .egw-lc-grid > .egw-lc:nth-child(1){ animation-delay:20ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(2){ animation-delay:60ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(3){ animation-delay:100ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(4){ animation-delay:140ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(5){ animation-delay:180ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(6){ animation-delay:220ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(7){ animation-delay:260ms }
.prof-container .egw-lc-grid > .egw-lc:nth-child(8){ animation-delay:300ms }
/* Capped past the ninth: beyond that a stagger stops reading as polish and
   starts reading as lag. The largest category holds eight, so this is a guard
   against a future group, not the normal case. */
.prof-container .egw-lc-grid > .egw-lc:nth-child(n+9){ animation-delay:340ms }

/* ---------------------------------------------------------------------------
 * 5. REDUCED MOTION — written out in full, on purpose
 * The theme's global block (frontend-responsive.css) clears animation-duration,
 * animation-iteration-count, transition-duration and scroll-behavior. It does
 * NOT clear transform, opacity, animation-name or animation-delay. So a hover
 * lift built with transform, and a staggered entrance built with a delay and a
 * starting opacity of 0, both survive it — the entrance would even leave cards
 * invisible, because opacity:0 is the resting state and only the animation puts
 * it back. Everything this file animates is therefore neutralised by hand.
 * (platform.css on the sister site taught the same lesson: clearing only the
 * transition leaves the movement in place, it just snaps.) ---------------  */
@media (prefers-reduced-motion:reduce){
  /* The tabs, mine and the three legacy families. */
  .eahsp-tab, .eahsp-tab:hover,
  html .prof-container .eah-toprail__chip, html .prof-container .eah-toprail__chip:hover,
  html .prof-container .egw-subnav-chip,   html .prof-container .egw-subnav-chip:hover,
  html .prof-container .sec-tab,           html .prof-container .sec-tab:hover{
    transition:none !important; transform:none !important; }
  .eahsp-shown{ animation:none !important; animation-name:none !important; opacity:1 !important }

  /* The entrance this file added. Without the opacity reset the cards would
     stay INVISIBLE: opacity:0 is their resting state and only the animation
     puts it back, so killing the animation alone would remove the grid. */
  .prof-container .egw-lc-grid > .egw-lc{
    animation:none !important; animation-name:none !important;
    animation-delay:0s !important; opacity:1 !important; transform:none !important; }

  /* REPAIR, not addition. egw-polish.css already has a reduced-motion block for
     these cards, but it only clears `transition` — so the -5px hover lift and
     the icon's scale still happen, they just snap. Clearing the transform is
     what actually honours the request. */
  .prof-container .egw-lc:hover, .prof-container .egw-lc:active,
  .prof-container .egw-lc:hover .egw-lc__ic{
    transform:none !important; }
}

/* ---------------------------------------------------------------------------
 * 6. DARK MODE — declared twice, deliberately
 * header.php stamps a concrete data-theme before paint, AND every media query
 * in this theme is guarded with :root:not([data-theme="light"]). Both paths
 * have to be written: the attribute covers a member who has chosen a theme, the
 * guarded query covers one who has not and whose device asked for dark. ---- */
/* :not([aria-selected="true"]) IS LOad-BEARING, not tidiness. Without it these
   rules are (0,2,1) and the selected-tab rule is (0,2,0), so in dark mode the
   dark styling out-ranked the selection and EVERY tab rendered unselected —
   the accent fill disappeared and there was no way to see which subsection was
   open. Excluding the selected tab keeps the accent winning in both themes,
   which is also what section 6's closing note promises. */
html[data-theme="dark"] .eahsp-tab:not([aria-selected="true"]){
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
  color:var(--muted, #9aa3b2); }
html[data-theme="dark"] .eahsp-tab:not([aria-selected="true"]):hover{ color:#fff }
html[data-theme="dark"] .eahsp-tabs{ border-bottom-color:rgba(255,255,255,.12) }
/* The cards need nothing here: egw-polish.css already tints their hover shadow
   from the card's own --c with color-mix, which reads correctly in both themes. */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .eahsp-tab:not([aria-selected="true"]){
    background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
    color:var(--muted, #9aa3b2); }
  :root:not([data-theme="light"]) .eahsp-tab:not([aria-selected="true"]):hover{ color:#fff }
  :root:not([data-theme="light"]) .eahsp-tabs{ border-bottom-color:rgba(255,255,255,.12) }
}

/* The selected pill is a solid accent fill with white text in BOTH themes — the
   accents are mid-to-dark hues chosen for exactly that, and flipping them per
   theme would make the same space two different colours. */

/* ---------------------------------------------------------------------------
 * 7. PHONE
 * Same type size as everywhere else; only the padding and the gap come in, and
 * only because horizontal padding is what decides the line count. ---------  */
@media (max-width:640px){
  .eahsp-tabs{ gap:5px; padding-bottom:8px; margin-bottom:11px }
  .eahsp-tab{ padding:5px 10px }
  html .prof-container .eah-toprail__chip,
  html .prof-container .egw-subnav-chip,
  html .prof-container .sec-tab{ padding:5px 10px !important }
  html .prof-container .eah-toprail,
  html .prof-container .egw-subnav{ gap:5px !important }
}