/* ==========================================================================
   EquiStories — shared shell
   One palette, one typeface, one top bar for every page on the site.

   HOW THIS WORKS WITHOUT REWRITING ANYTHING
   -----------------------------------------
   The three apps grew their own names for the same colours: the manager says
   --accent, Shows says --amber, the Hub says --accent and --honey. Rather than
   find-and-replace across ~16,000 lines of existing markup, this file defines
   ONE canonical palette and then ALIASES every historical name onto it. Existing
   var(--amber) / var(--accent) / var(--parchment) keep working untouched — they
   just resolve to the same colour now.

   The variable block uses `html:root` and the type rules use `html body`. Those
   are one notch more specific than the plain `:root` / `body` the apps declare,
   so this file wins WHEREVER it is loaded — including on the Stable Manager,
   whose <style> block lives down in the body. That means a single, ordinary
   <link> in <head> on every page. Everything else is prefixed .equi- so it
   cannot collide with app CSS.
   ========================================================================== */

/* Playfair Display + Lora are what the Hub already loads and uses; matching
   them here is what brings the Manager and Shows into line, rather than
   introducing a fourth typeface nothing else uses. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Lora:ital,wght@0,400;0,500;1,400&family=Caveat:wght@500;600&display=swap');

/* Reserve room for the vertical scrollbar on EVERY page. Without this, a page
   short enough not to scroll is ~15px wider than one that does, and because the
   header is centred, the crest and wordmark visibly jump left/right as you move
   between pages. `overflow-y:scroll` is the fallback for older browsers. */
html{ scrollbar-gutter: stable; overflow-y: scroll; }

html{
  /* One responsive root size for the whole site. Each page used to declare its
     own copy of this; if any page's stylesheet was stale or lost the cascade,
     that page rendered at a different scale and the header visibly changed
     size between pages. Declaring it here, in the file every page loads first,
     makes that impossible. */
  font-size: clamp(16px, 0.6vw + 14px, 23px);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;      /* keeps the page width identical everywhere */
  overflow-y: scroll;            /* fallback for browsers without the above  */
  overflow-x: hidden;            /* see below                                */
}
/* No page may scroll sideways. If one page is even a few pixels wider than the
   window it can be nudged horizontally, and then EVERYTHING on it — including
   the header — looks shifted left compared to a page that fits. Long words,
   wide tables and nowrap rows are the usual culprits, so they're handled here
   rather than hunted one at a time. */
html body{
  overflow-x: hidden;
  max-width: 100%;
  overflow-wrap: break-word;
}
html body img:not(.equi-hd__logo){ max-width: 100%; }
html body pre, html body code{ overflow-wrap: anywhere; }
html body table{ max-width: 100%; }
html:root{
  /* ---- canonical palette -------------------------------------------------
     Manager and Shows were already byte-identical; the Hub had drifted a few
     shades. These are the Manager/Shows values, so two of the three apps are
     unchanged and the Hub comes into line.                                   */
  --equi-bg:        #150f0a;
  --equi-ink:       #100b07;   /* deepest — page chrome, top bar, bar tracks  */
  --equi-panel:     #20180f;   /* cards                                       */
  --equi-raised:    #2a2015;   /* inputs, raised rows                         */
  --equi-line:      #4a3925;   /* hairline borders                            */
  --equi-line-2:    #6f5631;   /* brighter hairline — hero dividers, focus    */
  --equi-text:      #f2e7d6;
  --equi-dim:       #b7a48f;   /* secondary text                              */
  --equi-accent:    #ca9b3b;   /* brass — labels, borders, links              */
  --equi-accent-2:  #c9a8e8;   /* orchid — prestige / rider                   */
  --equi-good:      #7a9b6e;
  --equi-warn:      #c9a23a;
  --equi-bad:       #b1473f;
  --equi-rust:      #c96a3a;
  --equi-faint:     #8b7960;   /* quieter than --equi-dim: timestamps, hints  */
  --equi-brass-light:#ecd08a;  /* highlight gold on dark panels               */
  --equi-gold-solid:#d8b448;   /* the one solid-gold: primary button, active tab */
  --equi-hero:      #241a11;   /* textured hero / header band base            */
  --equi-plum:      #6a4a8a;   /* rider prestige                              */
  --equi-good-soft: #a0e8c0;
  --equi-bad-soft:  #e08080;

  --equi-serif: 'Lora', 'Palatino Linotype', Georgia, serif;
  --equi-display: 'Playfair Display', Georgia, serif;
  --equi-mono: 'Courier New', ui-monospace, monospace;

  --equi-radius: 8px;
  --equi-gold-shine: linear-gradient(90deg,#7d5f1e,#c9a244 45%,#ecd487 62%,#c9a244);

  /* ---- aliases: Stable Manager ---- */
  --bg: var(--equi-bg);
  --panel: var(--equi-panel);
  --panel2: var(--equi-raised);
  --text: var(--equi-text);
  --dim: var(--equi-dim);
  --accent: var(--equi-accent);
  --accent2: var(--equi-accent-2);   /* orchid — prestige/rider/headings (was mis-wired to green) */
  --good: var(--equi-good);
  --warn: var(--equi-warn);
  --danger: var(--equi-bad);

  /* ---- aliases: Shows ---- */
  --amber: var(--equi-accent);
  --parchment: var(--equi-text);
  --raised: var(--equi-raised);
  --ink: var(--equi-ink);
  --line: var(--equi-line);
  --moss: var(--equi-good);
  --rust: var(--equi-rust);
  --mono: var(--equi-mono);

  /* ---- aliases: Community Hub ---- */
  --deep: var(--equi-ink);
  --honey: var(--equi-accent);
  --bad: var(--equi-bad);
}

/* Hub-only tokens keep their own meaning but follow the shared accent. */
html:root{ --sf-accent: var(--equi-accent); --sf-bg: var(--equi-panel);
       --sf-panel: var(--equi-ink); --sf-text: var(--equi-text); }

html body{ font-family: var(--equi-serif); }
html h1, html h2, html h3, .equi-display{ font-family: var(--equi-display); letter-spacing:.01em; }

/* ==========================================================================
   SITE HEADER — one header, every page.
   This is the Community Hub's header, verbatim: the warm gradient panel, the
   gold hairline, the gold-shine Playfair wordmark, the Caveat tagline, and the
   boxed tab row with your name and Sign out at the right-hand end. The crest
   from the tracker now sits beside the wordmark.
   ========================================================================== */
/* ==========================================================================
   BOX MODEL + PAGE CONTAINERS — the thing that kept the pages misaligned.

   The Hub and Shows declared `* { box-sizing:border-box }` globally. The Stable
   Manager declared only `#app * { ... }` — which matches the DESCENDANTS of
   #app but not #app itself, and not the header, which sits outside it. So the
   identical rule `max-width:1700px; padding:0 32px` produced a 1700px box on
   two pages and a 1764px box on the third (1700 of content PLUS 64 of padding).
   That is why the tracker's margins looked wider and nothing lined up.

   Below: one box model for everything, and one geometry for every page
   container, stated in the file all three pages load.
   ========================================================================== */
html, body{ box-sizing: border-box; }
html body *,
html body *::before,
html body *::after{ box-sizing: border-box; }

/* Every page-level container — the header, the Hub's and Shows' .wrap, and the
   tracker's #app — is now the same width with the same gutters, so content
   starts at the same x on all three pages. Vertical padding is left to each
   page; only the horizontal geometry is unified. */
html body .equi-hd__wrap,
html body .wrap,
html body #app{
  width: 100%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 2vw, 32px);
  padding-right: clamp(16px, 2vw, 32px);
  box-sizing: border-box;
}

html body .equi-hd{
  font-family: var(--equi-serif);
  font-size: 16px;          /* fixed base for the header, independent of :root */
  line-height: 1.4;
  text-align: left;
  background: linear-gradient(180deg, #2c1f16, var(--equi-bg));
  border-bottom: 1px solid var(--equi-line);
  position: relative;
  font-family: var(--equi-serif);
}
html body .equi-hd::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--equi-gold-shine);
  opacity:.55;
}
html body .equi-hd__wrap{
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 18px clamp(16px,2vw,32px) 0;
}
html body .equi-hd__brand{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  min-height: clamp(96px, 11vw, 168px);   /* == the crest height */
}
html body .equi-hd__logo{
  height: clamp(96px, 11vw, 168px);
  width: auto; display:block;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.5));
}
html body .equi-hd__title{
  margin:0;
  font-family: var(--equi-display);
  font-weight:700;
  font-size: clamp(30px, 3.4vw, 60px);   /* px, not rem — see above */
  background: var(--equi-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height:1.15;
}
html body .equi-hd__tagline{
  color: var(--equi-dim);
  margin: 2px 0 0;
  min-height: 1.35em;
  font-family: 'Caveat', cursive;
  font-size: clamp(17px, 1.2vw, 30px);
}

/* Tab row — the Hub writes its own tabs in here; the other pages get links
   across the site. Either way the styling is identical. */
html body .equi-hd__nav{
  display:flex; gap:4px; flex-wrap:wrap;
  margin-top:14px;
  align-items:center;
}
html body .equi-hd__nav .tab{
  padding:8px 15px;
  font-size:clamp(13px,.8vw,17px);
  border:1px solid var(--equi-line);
  border-radius:7px;
  cursor:pointer;
  background:var(--equi-panel);
  color: var(--equi-dim);
  font-family: var(--equi-serif);
  text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none;
  display:inline-block;
}
html body .equi-hd__nav .tab:hover{ color: var(--equi-brass-light); border-color:var(--equi-accent); }
html body .equi-hd__nav .tab.active{
  background: var(--equi-gold-solid);
  color:#20180f;
  font-weight:700;
  border-color: var(--equi-gold-solid);
}
html body .equi-hd__user{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  padding:0 4px;
}
html body .equi-hd__user .small{ font-size:clamp(13px,.8vw,18px); color: var(--equi-dim); }
html body .equi-hd__user button{
  padding:4px 12px; font-size:.9em; margin-top:0;
  background:#2c2118; color: var(--equi-text);
  border:1px solid var(--equi-line); border-radius:6px;
  cursor:pointer; font-family: var(--equi-serif);
}
html body .equi-hd__user button:hover{ border-color: var(--equi-accent); }

@media (max-width: 620px){
  html body .equi-hd__wrap{ padding-top:12px; }
  html body .equi-hd__logo{ height:74px; }
  html body .equi-hd__brand{ gap:12px; }
  html body .equi-hd__tagline{ font-size:17px; }
  html body .equi-hd__nav .tab{ padding:8px 12px; font-size:14px; }
  html body .equi-hd__user{ margin-left:0; width:100%; }
}

/* Links across the site, sitting under the tagline. Plain HTML in every page,
   so navigation survives even if no JavaScript runs. */
html body .equi-hd__apps{ margin-top:6px; display:flex; gap:14px; flex-wrap:wrap; }
html body .equi-hd__app{
  color: var(--equi-dim);
  text-decoration:none;
  font-size:14px;
  border-bottom:1px solid transparent;
}
html body .equi-hd__app:hover{ color: var(--equi-text); border-bottom-color: var(--equi-line); }
html body .equi-hd__app.is-here{ color: var(--equi-accent); border-bottom-color: var(--equi-accent); }
html body .equi-hd__words{ min-width:0; }

/* Member names are links to their Hub profile wherever they appear. */
.member-link{ color: var(--equi-accent); text-decoration:none; }
.member-link:hover{ text-decoration:underline; }

/* Name / My Profile / Sign out sit together at the right of the tab row. */
html body .equi-hd__user a.ghost,
html body .equi-hd__user button{
  padding:4px 12px; font-size:clamp(13px,.8vw,18px); margin-top:0;
  background:#2c2118; color: var(--equi-text);
  border:1px solid var(--equi-line); border-radius:6px;
  cursor:pointer; text-decoration:none; font-family: var(--equi-serif);
  display:inline-block; line-height:1.5;
}
html body .equi-hd__user a.ghost:hover,
html body .equi-hd__user button:hover{ border-color: var(--equi-accent); }


/* ==========================================================================
   PROFILE FRAMES — a shared set members can pick for avatars, horse and rider
   portraits, and roster thumbnails. Pure CSS so they cost nothing to load and
   work identically in the Hub and the tracker.
   Usage: <div class="equi-frame equi-frame--brass"><img …></div>
   ========================================================================== */
.equi-frame{ position:relative; display:inline-block; line-height:0; border-radius:10px; }
.equi-frame > img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

.equi-frame--none{ }
.equi-frame--brass{ padding:4px; background:var(--equi-gold-shine); border-radius:12px; }
.equi-frame--brass > img{ border-radius:9px; }
.equi-frame--rope{ padding:5px; border:3px double var(--equi-accent); border-radius:12px; background:var(--equi-ink); }
.equi-frame--ribbon{ padding:4px; border:2px solid var(--equi-accent); border-radius:12px; box-shadow:0 0 0 4px var(--equi-ink), 0 0 0 6px var(--equi-accent-2); }
.equi-frame--rosette{ padding:6px; border-radius:50%; background:conic-gradient(var(--equi-accent) 0 25%, var(--equi-brass-light) 0 50%, var(--equi-accent) 0 75%, var(--equi-brass-light) 0); }
.equi-frame--rosette > img{ border-radius:50%; }
.equi-frame--plaque{ padding:8px 8px 20px; background:linear-gradient(180deg,#3a2b1d,#241a14); border:1px solid var(--equi-line); border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.45); }
.equi-frame--plaque::after{ content:attr(data-caption); position:absolute; left:0; right:0; bottom:4px; text-align:center; font-family:var(--equi-serif); font-size:.72rem; color:var(--equi-accent); line-height:1.2; }
.equi-frame--moss{ padding:4px; border:2px solid var(--equi-good); border-radius:12px; }
.equi-frame--plum{ padding:4px; border:2px solid var(--equi-accent-2); border-radius:12px; }
.equi-frame--vignette::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 26px 8px rgba(0,0,0,.55); pointer-events:none; }
.equi-frame--polaroid{ padding:7px 7px 26px; background:#efe6d6; border-radius:3px; box-shadow:0 3px 12px rgba(0,0,0,.5); }
.equi-frame--polaroid > img{ border-radius:0; }
.equi-frame--polaroid::after{ content:attr(data-caption); position:absolute; left:0; right:0; bottom:6px; text-align:center; font-family:'Caveat',cursive; font-size:1rem; color:#3a2b1d; }

/* ==========================================================================
   GALLERY — a masonry-ish column layout for art logs, so pieces keep their own
   proportions instead of being cropped to a uniform tile.
   ========================================================================== */
.equi-gallery{ column-gap:12px; columns:3; }
@media (max-width:1100px){ .equi-gallery{ columns:2; } }
@media (max-width:620px){ .equi-gallery{ columns:1; } }
.equi-gallery > .equi-gitem{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 12px; background:var(--equi-panel);
  border:1px solid var(--equi-line); border-radius:10px; overflow:hidden;
}
.equi-gallery > .equi-gitem img{ display:block; width:100%; height:auto; }
.equi-gallery > .equi-gitem .equi-gcap{ padding:8px 10px; font-size:.88em; color:var(--equi-dim); }
.equi-gallery > .equi-gitem .equi-gcap b{ color:var(--equi-text); }

/* Members' own CSS is scoped under this, never applied to the page chrome. */
.profile-custom{ }
