/* ==========================================================================
   EquiStories — shared components  (load AFTER equi-shell.css)

   Stage 2 of unification. equi-shell.css matched the chrome — palette, type,
   top bar. This file matches the things INSIDE the pages: buttons, inputs,
   cards.

   THE IDEA: unify by ROLE, not by renaming your markup.
   The three apps already agreed on what buttons mean, they just spelled it
   differently:

       role        Hub                Manager        Shows
       primary     bare <button>      .btn           .primary
       secondary   .ghost  (x49)      .secondary(x48).ghost  (x29)
       danger      —                  .danger (x12)  .danger (x8)

   So each role is styled here across ALL its spellings. Not one class in your
   HTML has to change, and the Hub's signature gradient becomes the primary
   button everywhere instead of three different looks.

   SPECIFICITY: selectors are prefixed `html body` so this wins from <head>
   over the apps' own blocks (the Manager's <style> lives in the body). Inline
   style="" attributes still win over everything here — deliberate, since a lot
   of buttons carry inline sizing and those stay exactly as they are.

   TO BACK OUT: delete the one <link> line from the three pages. Nothing else
   references this file.
   ========================================================================== */

/* ---- surfaces ---------------------------------------------------------- */
html body .card,
html body .panel{
  background: var(--equi-panel);
  border: 1px solid var(--equi-line);
  border-radius: 10px;
}

/* ---- form controls ----------------------------------------------------- */
html body input[type="text"],
html body input[type="number"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input:not([type]),
html body select,
html body textarea{
  background: var(--equi-raised);
  color: var(--equi-text);
  border: 1px solid var(--equi-line);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--equi-serif);
  font-size: .95rem;
}
html body input[type="text"]:focus,
html body input[type="number"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input:not([type]):focus,
html body select:focus,
html body textarea:focus{
  outline: none;
  border-color: var(--equi-accent);
  box-shadow: 0 0 0 2px rgba(201,138,58,.18);
}
html body input::placeholder,
html body textarea::placeholder{ color: var(--equi-dim); opacity: .62; }

/* ---- buttons: shared shape -------------------------------------------- */
html body button{
  font-family: var(--equi-serif);
  border-radius: 6px;
  cursor: pointer;
  transition: filter .12s ease, border-color .12s ease, color .12s ease;
}
html body button:disabled{ opacity: .5; cursor: not-allowed; }

/* ---- role: PRIMARY ----------------------------------------------------- */
/* The Hub's gradient, promoted to the site-wide "this is the main action". */
html body button.btn,
html body button.primary,
html body .btn,
html body .primary{
  background: var(--equi-gold-solid);
  color: #20180f;
  border: 1px solid var(--equi-gold-solid);
  font-weight: 600;
}
html body button.btn:hover:not(:disabled),
html body button.primary:hover:not(:disabled){
  filter: brightness(1.06);
  color: #20180f;
}

/* ---- role: SECONDARY --------------------------------------------------- */
/* Calm outlined button — the workhorse. Both .ghost and .secondary land here
   so the Hub, Manager and Shows finally agree on what a secondary action
   looks like. */
html body button.ghost,
html body button.secondary{
  background: var(--equi-raised);
  color: var(--equi-text);
  border: 1px solid var(--equi-line);
  font-weight: 400;
}
html body button.ghost:hover:not(:disabled),
html body button.secondary:hover:not(:disabled){
  border-color: var(--equi-accent);
  color: var(--equi-accent);
}

/* ---- role: DANGER ------------------------------------------------------ */
html body button.danger{
  background: transparent;
  color: var(--equi-bad);
  border: 1px solid var(--equi-bad);
}
html body button.danger:hover:not(:disabled){
  background: var(--equi-bad);
  color: #fff6ea;
}

/* ---- small shared bits ------------------------------------------------- */
html body .tag{
  background: var(--equi-raised);
  border: 1px solid var(--equi-line);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: .84em;
  color: var(--equi-dim);
}
html body .small{ font-size: .88em; }
html body .muted{ color: var(--equi-dim); }
html body a{ color: var(--equi-accent); }
html body hr{ border: none; border-top: 1px solid var(--equi-line); }

/* ---- shared theme utilities (match the homepage look) ------------------ */
/* Gold small-caps section label — the eyebrow above serif headings. */
html body .equi-eyebrow{
  font-family: var(--equi-serif); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color: var(--equi-accent); margin:0 0 8px;
}
html body .equi-eyebrow.dim{ color: var(--equi-dim); }
/* Diagonal cross-hatch band, e.g. a page hero/header. */
html body .equi-hero{
  position:relative; border:1px solid var(--equi-line); border-radius:12px; padding:32px; overflow:hidden;
  background: var(--equi-hero);
  background-image:
    repeating-linear-gradient(45deg,  rgba(236,208,138,.05) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(236,208,138,.035) 0 1px, transparent 1px 11px);
}
/* Corner brackets — add <span class="equi-bk tl/tr/bl/br"></span> inside a relative box. */
html body .equi-bk{ position:absolute; width:26px; height:26px; border-color:var(--equi-accent); border-style:solid; opacity:.7; pointer-events:none; }
html body .equi-bk.tl{ top:12px; left:12px; border-width:1px 0 0 1px; }
html body .equi-bk.tr{ top:12px; right:12px; border-width:1px 1px 0 0; }
html body .equi-bk.bl{ bottom:12px; left:12px; border-width:0 0 1px 1px; }
html body .equi-bk.br{ bottom:12px; right:12px; border-width:0 1px 1px 0; }

/* ---- directory pages (Shops / Breeds): textured hero + tile grid -------- */
html body .dir-hero{
  position:relative; border-bottom:1px solid var(--equi-line-2); padding:22px 4px 16px; margin-bottom:22px;
  background-image:
    repeating-linear-gradient(45deg,  rgba(236,208,138,.05) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(236,208,138,.03) 0 1px, transparent 1px 11px);
}
html body .dir-hero .hd{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
html body .dir-hero h1{ font-family:var(--equi-display); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.2rem); margin:2px 0 0; color:var(--equi-text); }
html body .dir-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
html body .dir-tile{ border:1px solid var(--equi-line); border-radius:10px; overflow:hidden; background:var(--equi-panel); cursor:pointer; text-decoration:none; color:inherit; display:block; transition:border-color .12s ease; }
html body .dir-tile:hover{ border-color:var(--equi-accent); }
html body .dir-tile .art{ height:118px; display:grid; place-items:center; color:var(--equi-faint); font-size:1.8rem; border-bottom:1px solid var(--equi-line); background-color:var(--equi-hero); background-size:cover; background-position:center; background-image:repeating-linear-gradient(45deg,rgba(236,208,138,.06) 0 1px,transparent 1px 9px); }
html body .dir-tile .art .ph{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.5; }
html body .dir-tile .body{ padding:14px 16px; }
html body .dir-name{ font-family:var(--equi-display); font-weight:700; color:var(--equi-brass-light); }
html body .dir-tagline{ display:block; color:var(--equi-dim); font-style:italic; font-size:.86rem; margin-top:3px; }
html body .dir-meta{ display:block; color:var(--equi-faint); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-top:8px; }

/* ---- inventory item tiles (tack + attire), themed to match the homepage --- */
html body .inv-item{ background:var(--equi-panel); border:1px solid var(--equi-line); border-radius:10px; padding:10px; text-align:center; transition:border-color .12s ease; }
html body .inv-item:hover{ border-color:var(--equi-accent); }
html body .inv-item .nm{ margin-top:6px; font-family:var(--equi-display); font-weight:600; color:var(--equi-text); }
html body .inv-item .cat{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--equi-faint); margin-top:2px; }
html body .inv-item .st{ font-size:.85em; color:var(--equi-good); margin-top:3px; }
html body .inv-item .xp{ font-size:.85em; color:var(--equi-accent); margin-top:2px; }
html body .inv-item .setname{ font-size:.85em; color:var(--equi-accent-2); margin-top:2px; }
html body .inv-imgbox{ background:var(--equi-ink); border-radius:6px; }

/* ---- profile bio editor: easy image/text toolbar + live preview --------- */
html body .bio-toolbar{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
html body .bio-toolbar button{ font-size:.8rem; padding:6px 11px; background:var(--equi-panel); color:var(--equi-dim); border:1px solid var(--equi-line); border-radius:6px; cursor:pointer; font-family:var(--equi-serif); }
html body .bio-toolbar button:hover{ color:var(--equi-brass-light); border-color:var(--equi-accent); }
html body .bio-toolbar button.on{ background:var(--equi-gold-solid); color:#20180f; border-color:var(--equi-gold-solid); font-weight:600; }
html body .bio-preview{ margin-top:8px; border:1px solid var(--equi-line); border-radius:8px; padding:14px 16px; background:var(--equi-ink); }
html body .bio-preview:empty::before{ content:"Nothing to preview yet."; color:var(--equi-faint); font-style:italic; }
html body .profile-about-body img, html body .bio-preview img{ max-width:100%; height:auto; border-radius:8px; }

/* ---- avatar / banner upload drop-zone (profile editor) ------------------ */
html body .up-zone{ display:flex; align-items:center; gap:14px; border:1.5px dashed var(--equi-line); border-radius:12px; background:var(--equi-ink); padding:14px; transition:border-color .12s ease, background .12s ease; }
html body .up-zone.drag{ border-color:var(--equi-accent); background:rgba(202,155,59,.08); }
html body .up-zone .up-preview{ width:88px; height:88px; flex:0 0 auto; border-radius:8px; border:1px solid var(--equi-line); background:#241a12 center/cover no-repeat; display:grid; place-items:center; color:var(--equi-faint); font-size:1.7rem; }
html body .up-zone--wide .up-preview{ width:140px; height:70px; }
html body .up-zone .up-body{ flex:1; min-width:0; }
html body .up-zone .up-title{ color:var(--equi-brass-light); font-family:var(--equi-serif); }
html body .up-zone .up-hint{ color:var(--equi-faint); font-size:.78rem; margin-top:4px; }
html body .up-zone .up-btn{ margin-top:6px; }

/* ---- friends list as avatar chips (icon + name) ------------------------- */
html body .friend-grid{ display:flex; flex-wrap:wrap; gap:10px; }
html body .friend-chip{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--equi-text); background:var(--equi-ink); border:1px solid var(--equi-line); border-radius:22px; padding:4px 13px 4px 4px; transition:border-color .12s ease; }
html body .friend-chip:hover{ border-color:var(--equi-accent); }
html body .friend-av{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; overflow:hidden; border:1px solid var(--equi-accent); background:#241a12; display:grid; place-items:center; font-size:.95rem; }
html body .friend-av img{ width:100%; height:100%; object-fit:cover; display:block; }
html body .friend-nm{ font-size:.9em; white-space:nowrap; }

/* ---- Message Center: clean tabbed feed --------------------------------- */
html body .mc-head{ border-bottom:1px solid var(--equi-line-2); padding:20px 4px 0; margin-bottom:18px; background-image:repeating-linear-gradient(45deg,rgba(236,208,138,.05) 0 1px,transparent 1px 11px),repeating-linear-gradient(-45deg,rgba(236,208,138,.03) 0 1px,transparent 1px 11px); }
html body .mc-tabs{ display:flex; gap:24px; margin-top:12px; }
html body .mc-tab{ padding:8px 2px 12px; font-family:var(--equi-serif); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--equi-dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
html body .mc-tab:hover{ color:var(--equi-brass-light); }
html body .mc-tab.on{ color:var(--equi-brass-light); border-bottom-color:var(--equi-accent); }
html body .mc-subrow{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
html body .mc-seg, html body .mc-chip, html body .mc-btn{ padding:5px 12px; font-size:.8rem; }
html body .mc-seg.on, html body .mc-chip.on{ background:var(--equi-gold-solid); color:#20180f; border-color:var(--equi-gold-solid); font-weight:600; }
html body .mc-count{ color:var(--equi-dim); font-size:.85em; }
html body .mc-row{ border:1px solid var(--equi-line); border-radius:10px; background:var(--equi-panel); padding:12px 16px; margin-bottom:10px; cursor:pointer; transition:border-color .12s ease; }
html body .mc-row:hover{ border-color:var(--equi-line-2); }
html body .mc-row.unread{ border-left:3px solid var(--equi-accent); }
html body .mc-rowtop{ display:flex; align-items:center; gap:14px; }
html body .mc-ic{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--equi-ink); border:1px solid var(--equi-accent); font-size:1.05rem; }
html body .mc-main{ flex:1; min-width:0; }
html body .mc-title{ font-family:var(--equi-display); font-weight:700; color:var(--equi-brass-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .mc-prev{ color:var(--equi-dim); font-style:italic; font-size:.88em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .mc-time{ color:var(--equi-faint); font-size:.72rem; letter-spacing:.08em; flex:0 0 auto; }
html body .mc-actions{ display:flex; gap:6px; flex:0 0 auto; }
html body .mc-full{ display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--equi-line); color:var(--equi-text); }
html body .mc-row.open .mc-full{ display:block; }
html body .mc-row.open .mc-prev{ white-space:normal; }
html body .mc-empty{ color:var(--equi-faint); font-style:italic; padding:22px; text-align:center; border:1px dashed var(--equi-line); border-radius:10px; }
html body .mc-section{ margin-top:20px; }
html body .mc-seclabel{ font-family:var(--equi-serif); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--equi-accent); }
html body .mc-pane{ background:var(--equi-panel); border:1px solid var(--equi-line); border-radius:12px; padding:18px 20px; }
html body blockquote.mq{ margin:6px 0; padding:5px 12px; border-left:3px solid var(--equi-line-2); background:rgba(202,155,59,.05); color:var(--equi-dim); border-radius:0 6px 6px 0; font-size:.95em; }
html body blockquote.mq blockquote.mq{ border-left-color:var(--equi-accent); margin-left:2px; }

/* ==========================================================================
   TRACKER → HUB HARMONISATION
   The Stable Manager grew its own tab bar and page frame before the Hub
   existed. Both already use `.tab` / `.tabs`, so the two only needed to agree
   on the details. The Manager scopes its rules as `#app .tab` (id + class), so
   these carry `html body #app` to outrank them — same trick as the rest of
   this file, no markup changes.
   ========================================================================== */
html body #app .tabs{
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 0;
  border-bottom: 1px solid var(--equi-line);
}
html body #app .tab{
  background: transparent;
  color: var(--equi-dim);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 16px;
  font-family: var(--equi-serif);
  font-size: .97rem;
  margin-bottom: -1px;
  cursor: pointer;
}
html body #app .tab:hover{
  color: var(--equi-text);
  background: rgba(201,138,58,.06);
}
html body #app .tab.active{
  background: var(--equi-panel);
  color: var(--equi-accent);
  border-color: var(--equi-line);
  font-weight: 600;
}

/* Match the Hub's page frame: same max width, same gutters, so the two pages
   line up instead of one being noticeably wider than the other. */
html body #app{
  max-width: min(1700px, 94vw);
  margin: 0 auto;
  padding: 0 clamp(16px, 2vw, 32px);
}

/* The Hub's headings are Playfair and brass; the tracker's were mixed. */
html body #app h2,
html body #app h3{
  font-family: var(--equi-display);
  color: var(--equi-accent);
}

/* Hub-style link tiles, so lists of horses/riders read the same in both. */
html body .linkbox{
  display: block;
  background: var(--equi-ink);
  border: 1px solid var(--equi-line);
  border-radius: 8px;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--equi-text);
}
html body .linkbox:hover{ border-color: var(--equi-accent); }
