/* The Clan page (views/clan.mjs, docs/CLANS_PLAN.md).

   **A clan's colours live here and nowhere else.** The server stores an id from a fixed palette
   (public/clans.mjs COLOURS) and the client renders it as a class; no value a player chose is ever
   interpolated into markup, which is the one place this feature could have become an injection hole.
   `.clan-c-<id>` paints the banner, `.clan-a-<id>` the edge. Adding a colour means one entry there and one
   rule here — tests/clans.test.mjs checks the two lists agree. */

.clan-c-ember { --clan: #ff8f4f; --clan-deep: #7a2f10; }
.clan-c-moss  { --clan: #6fc76a; --clan-deep: #1e4a22; }
.clan-c-tide  { --clan: #56b4e6; --clan-deep: #143c5c; }
.clan-c-dusk  { --clan: #a98cff; --clan-deep: #2e2159; }
.clan-c-gold  { --clan: #f2c66a; --clan-deep: #6a4a14; }
.clan-c-rose  { --clan: #ff7fa8; --clan-deep: #641f3c; }
.clan-c-ash   { --clan: #9aa6b8; --clan-deep: #2a3444; }
.clan-c-frost { --clan: #8fe6de; --clan-deep: #12484a; }

.clan-a-ember { --clan-edge: #ffb98a; }
.clan-a-moss  { --clan-edge: #a7e5a2; }
.clan-a-tide  { --clan-edge: #a2dcf7; }
.clan-a-dusk  { --clan-edge: #cfbcff; }
.clan-a-gold  { --clan-edge: #ffe7a6; }
.clan-a-rose  { --clan-edge: #ffb6cc; }
.clan-a-ash   { --clan-edge: #cfd7e2; }
.clan-a-frost { --clan-edge: #c8f6f1; }

/* ------------------------------------------------------------------ Badge */
.clan-badge {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: .55rem; border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--clan, var(--gold-2)) 45%, #0a1018), var(--clan-deep, #101828));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 .2rem .5rem rgba(0, 0, 0, .45);
}
.clan-badge .ia-emblem { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.clan-badge.is-large { width: 4.2rem; height: 4.2rem; border-radius: .8rem; }
.clan-badge.is-large .ia-emblem { width: 2.7rem; height: 2.7rem; }
.clan-tag {
  display: inline-block; margin-right: .5rem; padding: .05rem .4rem; vertical-align: .12em;
  border-radius: .3rem; border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 50%, transparent);
  background: color-mix(in srgb, var(--clan, var(--gold-2)) 22%, rgba(0, 0, 0, .45));
  color: var(--clan-edge, var(--gold-1)); font: 800 .62em/1.6 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ Page */
.clan-page .hero { --skill: var(--gold-2); min-height: 5.4rem; }
.clan-hero-emblem { flex: none; width: 3.4rem; height: 3.4rem; }
.clan-hero .hero-copy h1 { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.clan-hero .hero-copy p { color: var(--text-2); }
.clan-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: var(--gap); min-height: 0; }
.clan-columns.is-empty { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
.clan-stack { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.clan-roster, .clan-side, .clan-found, .clan-directory, .clan-invites { display: flex; flex-direction: column; min-height: 0; padding-top: 1.3rem; }
.clan-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .45rem .8rem .3rem; }
.clan-empty { margin: .2rem 0; padding: .5rem .1rem; font-size: .8rem; color: var(--text-3); }
.clan-note { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .4rem .9rem .6rem; font-size: .72rem; color: var(--text-4); }
.clan-note .ia-glyph { flex: none; width: .85rem; height: .85rem; }
.clan-sub { margin: .9rem 0 .35rem; font: 700 .64rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
.clan-sub:first-child { margin-top: 0; }
.clan-sub .sr-badge { position: static; display: inline-grid; margin-left: .3rem; vertical-align: -.2em; }

/* ---------------------------------------------------------------- Roster */
.clan-table { width: 100%; border-collapse: separate; border-spacing: 0 .22rem; font-size: .86rem; }
.clan-table th { padding: 0 .6rem .3rem; text-align: left; font: 700 .62rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
.clan-table td { padding: .34rem .6rem; background: rgba(0, 0, 0, .28); border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); vertical-align: middle; }
.clan-table td:first-child { border-left: 1px solid var(--edge-soft); border-radius: .45rem 0 0 .45rem; }
.clan-table td:last-child { border-right: 1px solid var(--edge-soft); border-radius: 0 .45rem .45rem 0; }
.clan-row.is-you td { background: rgba(242, 198, 106, .12); border-color: rgba(242, 198, 106, .34); }
.clan-rank { width: 6.2rem; }
.rank-pill { display: inline-block; padding: .06rem .45rem; border-radius: .3rem; font: 800 .6rem/1.6 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--edge-soft); color: var(--text-3); background: rgba(0, 0, 0, .35); }
.rank-pill.rank-owner { color: #2b1200; border-color: transparent; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); }
.rank-pill.rank-deputy { color: var(--gold-1); border-color: rgba(242, 198, 106, .45); }
.rank-pill.rank-officer { color: #bcd9f6; border-color: rgba(102, 198, 255, .4); }
.clan-who { min-width: 0; }
.clan-who-in { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.clan-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.clan-dot.is-online { background: var(--emerald); box-shadow: 0 0 .4rem rgba(88, 214, 127, .6); }
.clan-player { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text-1); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-player:hover, .clan-player:focus-visible { color: var(--gold-1); text-decoration: underline; text-underline-offset: .15em; }
.clan-level { width: 6rem; text-align: right; font-weight: 700; color: var(--gold-1); }
.clan-where { width: 11rem; color: var(--text-3); font-size: .78rem; }
/* A roster reads as a roster: the rank buttons and the expulsion come out when the row is pointed at or tabbed
   into, so the panel is calm at rest. On a touch screen there is no hover, so they always show. */
.clan-acts { width: 1%; white-space: nowrap; text-align: right; }
.clan-acts .btn { margin-left: .25rem; opacity: 0; pointer-events: none; transition: opacity .12s; }
.clan-row:hover .clan-acts .btn, .clan-row:focus-within .clan-acts .btn { opacity: 1; pointer-events: auto; }
@media (hover: none) { .clan-acts .btn { opacity: 1; pointer-events: auto; } }

/* ------------------------------------------------------------- Side panel */
.clan-tabs { display: flex; gap: .2rem; padding: .45rem .7rem .25rem; border-bottom: 1px solid var(--edge-soft); }
.clan-tab { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .3rem .5rem; border-radius: .35rem .35rem 0 0; color: var(--text-3); font: 650 .78rem var(--font-ui); transition: color .15s, background .15s; }
.clan-tab:hover { color: var(--text-1); background: rgba(255, 255, 255, .04); }
.clan-tab[aria-pressed="true"] { color: var(--gold-1); background: rgba(242, 198, 106, .12); box-shadow: inset 0 -2px 0 var(--gold-3); }
.clan-tab .sr-badge { position: static; display: inline-grid; min-width: 1.15rem; height: 1.15rem; font-size: .68rem; }
.clan-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: .6rem .8rem .8rem; }

.clan-field { display: grid; gap: .3rem; margin-bottom: .7rem; }
.clan-field > label { font: 650 .72rem var(--font-ui); letter-spacing: .04em; color: var(--text-3); }
.clan-field input[type="text"], .clan-field input[type="search"], .clan-field input[type="number"], .clan-field textarea,
.clan-search input {
  width: 100%; min-height: 2.2rem; padding: .4rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); color: var(--text-1); font: 600 .85rem var(--font-ui); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.clan-field textarea { resize: vertical; min-height: 3.2rem; line-height: 1.45; }
.clan-field input:focus, .clan-field textarea:focus, .clan-search input:focus { border-color: var(--gold-3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 3px rgba(242, 198, 106, .15); }
.clan-field input:disabled, .clan-field textarea:disabled { opacity: .6; }
.clan-field input::placeholder, .clan-field textarea::placeholder, .clan-search input::placeholder { color: var(--text-4); }
.clan-row-input { display: flex; align-items: center; gap: .4rem; }
.clan-row-input input { flex: 1; }
.clan-row-input .clan-hint { flex: 1; }
.clan-hint { font-size: .7rem; color: var(--text-4); line-height: 1.35; }
.clan-hint.is-bad { color: #ffc0a8; }

.clan-picks { display: flex; flex-wrap: wrap; gap: .3rem; }
.clan-pick { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .4rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); color: var(--text-2); transition: border-color .15s, background .15s; }
.clan-pick:hover:not(:disabled) { border-color: var(--edge); background: rgba(255, 255, 255, .05); }
.clan-pick.is-picked { border-color: var(--gold-2); background: rgba(242, 198, 106, .16); }
.clan-pick:disabled { opacity: .45; }
.clan-pick .ia-emblem { width: 1.3rem; height: 1.3rem; }
.clan-swatches { display: flex; flex-wrap: wrap; gap: .35rem; }
.clan-swatch { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(160deg, var(--clan), var(--clan-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .5); transition: border-color .15s, transform .15s; }
.clan-swatch:hover:not(:disabled) { transform: translateY(-1px); }
.clan-swatch.is-picked { border-color: var(--gold-1); }
.clan-swatch:disabled { opacity: .45; }
.clan-joining button { flex: 1; justify-content: center; }
.clan-joining { display: flex; width: 100%; }

/* ------------------------------------------------------------- People, log */
.clan-request { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .55rem; margin-bottom: .3rem; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .28); }
.clan-request.is-quiet { background: rgba(0, 0, 0, .18); }
.clan-request small { display: block; font-size: .7rem; color: var(--text-4); }
.clan-request-acts { display: flex; gap: .3rem; flex: none; }
.clan-log-line { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .5rem; padding: .3rem .1rem; border-bottom: 1px solid var(--edge-soft); font-size: .8rem; color: var(--text-2); }
.clan-log-line:last-child { border-bottom: 0; }
.clan-log-line time { color: var(--text-4); font: 600 .72rem var(--font-num); }
.clan-log-line b { color: var(--text-1); font-weight: 700; }

/* ------------------------------------------------------- Founding, directory */
.clan-found-body { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .8rem .8rem; }
/* "Waiting for you" is the auto-height row of the stack: it sizes to its cards, up to a few of them. A percentage
   cap here would depend on a track whose size depends on it, so the cap is in rem. */
.clan-invites .clan-scroll { flex: 0 1 auto; max-height: 13rem; }
.clan-preview { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; margin-bottom: .8rem; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .3); }
.clan-preview strong { display: flex; align-items: center; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-1); }
.clan-preview small { display: block; font-size: .7rem; color: var(--text-4); }
.clan-cost { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .8rem 0 .5rem; padding: .45rem .6rem; border: 1px solid rgba(242, 198, 106, .3); border-radius: var(--radius-sm); background: rgba(77, 54, 22, .32); }
.clan-cost span { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-1); font: 700 .95rem var(--font-num); }
.clan-cost .ia-emblem { width: 1.1rem; height: 1.1rem; }
.clan-cost small { font-size: .74rem; color: var(--text-3); }
.clan-cost small.is-bad { color: #ffc0a8; }
.clan-search { display: flex; align-items: center; gap: .35rem; padding: .45rem .8rem .2rem; }
.clan-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; padding: .4rem .55rem; margin-bottom: .3rem; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .28); transition: border-color .15s; }
.clan-card:hover { border-color: var(--edge); }
.clan-card-copy { min-width: 0; }
.clan-card-copy strong { display: flex; align-items: center; min-width: 0; font-size: .92rem; color: var(--text-1); }
.clan-card-copy strong > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-card-copy small, .clan-card-meta small { display: block; font-size: .7rem; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-card-meta { text-align: right; }
.clan-card-meta b { font: 700 .9rem var(--font-num); color: var(--gold-1); }
.clan-card-meta b small { display: inline; color: var(--text-4); font-weight: 600; }
.clan-card-acts { display: flex; gap: .3rem; }
.clan-pages { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .3rem .8rem .6rem; font-size: .78rem; color: var(--text-3); }

/* ------------------------------------------- The clanhold: the vault and the projects (wave 3)
   The Store's own card language, so the two pages read as one game: styles/store.css already defines
   .upgrade-card, .uc-*, .upgrade-grid, .ul-head and the hold-to-confirm fill, and this file only says where the
   clan's cards stand and what colour they take. `--tier` is the Store card's accent; here it is the clanhold's
   gold and never anything a player chose, so no player value ever reaches a style attribute.
   Nothing below animates: the panel is static, and the only moving thing on the page stays the hold-to-confirm
   fill on a button somebody is actively pressing. */
/* A panel's plaque hangs half above its own top edge, so the scrolling column keeps a little room for the first
   one; without it the clanhold's plaque is cut in half against the clip edge. */
.clan-main { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; overflow-y: auto; padding-top: .7rem; }
.clan-main > .panel { flex: none; }
.clan-main .clan-roster .clan-scroll { flex: none; overflow: visible; }
.clan-build { padding-top: 1.3rem; }
.clan-build-body { display: flex; flex-direction: column; gap: .7rem; padding: .55rem .8rem .8rem; }

/* The week (clans wave 5) and the hunt (wave 6), which share one set of rules so the two panels read as a pair.
   Nothing here counts down and nothing here empties: the week's bar only ever fills, and so does the hunt's,
   which measures what the clan has taken off its boss and can never be healed. A missed week leaves the panel
   exactly as it was. They are static panels, so nothing on them shimmers or pulses. */
.clan-week, .clan-hunt { padding-top: 1.3rem; }
.clan-week-body, .clan-hunt-body { display: flex; flex-direction: column; gap: .5rem; padding: .55rem .8rem .3rem; }
.clan-week-head, .clan-hunt-head { display: flex; align-items: center; gap: .6rem; }
.clan-week-head .uc-icon, .clan-hunt-head .uc-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .5rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); }
.clan-week-head .uc-icon .ia-emblem, .clan-hunt-head .uc-icon .ia-emblem { width: 1.5rem; height: 1.5rem; }
.clan-week-head .uc-title, .clan-hunt-head .uc-title { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.clan-week-head .uc-title strong, .clan-hunt-head .uc-title strong { font: 700 .98rem var(--font-ui); color: var(--text-1); }
.clan-week-head .uc-title small, .clan-hunt-head .uc-title small { font: 600 .8rem var(--font-ui); color: var(--gold-1); }
.clan-week .uc-effect, .clan-hunt .uc-effect { margin: 0; font-size: .78rem; color: var(--text-3); }
.clan-week-count, .clan-hunt-count { display: flex; align-items: baseline; gap: .4rem; }
.clan-week-count b, .clan-hunt-count b { font: 800 1.45rem var(--font-num); color: var(--gold-1); }
.clan-week-count small, .clan-hunt-count small { font: 600 .78rem var(--font-ui); color: var(--text-3); }
.clan-week-state, .clan-hunt-state { margin: .1rem 0 0; font-size: .8rem; color: var(--text-2); }
.clan-week-facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.clan-week-fact { flex: 1 1 11rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .5rem; padding: .35rem .6rem; border: 1px solid var(--edge-soft); border-radius: .5rem; background: rgba(0, 0, 0, .28); }
.clan-week-fact .ia-glyph, .clan-week-fact .ia-emblem { grid-row: span 2; width: 1.1rem; height: 1.1rem; color: var(--gold-2); }
.clan-week-fact b { font: 700 .82rem var(--font-ui); color: var(--text-1); }
.clan-week-fact b.t-num { font: 800 1rem var(--font-num); color: var(--gold-1); }
.clan-week-fact small { font: 600 .68rem var(--font-ui); color: var(--text-4); }
/* What only the hunt has. Its tier sits on the helmet in the clanhold's gold, as it does on the ladder; `--tier` is
   set on the badge alone, so the helmet's well stays the week's plain one. The one shared bar is the whole panel,
   so it stands a little heavier than the week's, and is still plain and still: no `data-live` and no `is-thick`.
   A count as long as a Dawnkeeper's may take its words onto a second line. And with nothing standing the panel is
   quiet: its line in muted ink instead of gold, beside the dim chip and the dimmed corners. */
.clan-hunt-head .uc-roman { --tier: var(--gold-2); }
.clan-hunt-count { flex-wrap: wrap; }
.clan-hunt .clan-hunt-bar { height: .65rem; }
.clan-hunt-state b { font-weight: 700; color: var(--gold-1); }
.clan-hunt.is-quiet .uc-title small { color: var(--text-3); }

/* The five stages of the hall: names, not a race. The one the clan stands at is lit. */
.clan-stages { display: flex; align-items: flex-start; gap: .2rem; }
.clan-stage { flex: 1; display: grid; justify-items: center; gap: .3rem; min-width: 0; }
.clan-stage i { display: block; width: 100%; height: .38rem; border-radius: .2rem; background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.clan-stage.is-built i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.clan-stage small { font: 650 .66rem var(--font-ui); color: var(--text-4); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.clan-stage.is-built small { color: var(--text-2); }
.clan-stage.is-now small { color: var(--gold-1); }

.clan-project, .clan-line { --tier: var(--gold-2); }
.clan-project.is-idle { --tier: var(--edge); }
.clan-line.is-owned { --tier: var(--emerald); }
.clan-project { max-width: 34rem; }
/* The bill's bar takes the clanhold's gold from here, never from a style attribute, so the page keeps its rule
   that no colour at all is interpolated into markup. It is plain and still: no `data-live` and no `is-thick`,
   which are the two things components.css gives a sheen to. */
.clan-bar { --fill: var(--gold-2); margin-top: .15rem; height: .5rem; }
.clan-cost-row small { color: var(--text-4); font: 600 .74rem var(--font-num); }
.clan-cost-row.is-done { color: #b9f5c8; border-color: rgba(88, 214, 127, .3); background: rgba(23, 80, 44, .3); }
.clan-cost-row .ia-glyph { width: .85rem; height: .85rem; }
.clan-ladder-head { margin-top: .3rem; }
.clan-ladder { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
/* The clan hunt on the ladder holds five bosses, so it takes the ladder's whole width and sets them side by side
   instead of stretching its row five bosses tall. Each boss is a framed row, like the week's facts, wide enough
   that its place, its level and its chip stay on one line. One the hall is not big enough for is greyed the way a
   locked Store card is; one the clan has beaten takes the ladder's green, the colour of a line that is finished. */
.clan-hunt-line { grid-column: 1 / -1; }
.clan-bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr)); gap: .5rem; }
.clan-boss { display: flex; flex-direction: column; gap: .4rem; padding: .5rem .55rem .55rem; border: 1px solid var(--edge-soft); border-radius: .5rem; background: rgba(0, 0, 0, .28); }
.clan-boss .uc-head { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.clan-boss .uc-icon { width: 2.6rem; height: 2.6rem; }
.clan-boss .uc-icon .ia-emblem { width: 1.9rem; height: 1.9rem; }
.clan-boss .uc-title strong { font-size: .95rem; }
.clan-boss.is-locked { background: rgba(0, 0, 0, .18); }
.clan-boss.is-locked .uc-icon { filter: grayscale(.6) brightness(.75); }
.clan-boss.is-beaten { --tier: var(--emerald); border-color: rgba(88, 214, 127, .28); }

/* ---------------------------------------------------------------- The vault */
.clan-vault-head { display: flex; gap: .8rem; padding: 0 .1rem .5rem; border-bottom: 1px solid var(--edge-soft); }
.clan-vault-head .bstat { flex: 1; }
.clan-vault .clan-note { padding: .5rem 0; }
.clan-vault .btn-block + .clan-hint { display: block; margin: .3rem 0 .2rem; }
/* A line of the vault: what it is, what you hold, how much you are giving, and the hold that gives it.
   The amount is chosen before anything moves — 1, 10, 100, all, or a number typed in — because a gift to
   the clan never comes back out, and "how much" has to be a decision rather than a guess. */
/* Three rows to a line, at every width, because the vault sits in a narrow column and a chooser that is
   clipped is a chooser nobody uses: what it is and the hold that gives it, then the three numbers the
   decision rests on — what you hold, what the vault holds, what the project still wants — then the
   chooser itself across the full width of the line. */
.clan-give { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; align-items: center; column-gap: .4rem; row-gap: .2rem;
  padding: .4rem .45rem; margin-bottom: .3rem; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .28); }
.clan-give-img { grid-row: 1; grid-column: 1; }
.clan-give-name { grid-row: 1; grid-column: 2; }
.clan-give .give-go { grid-row: 1; grid-column: 3; }
.clan-give-meta { grid-row: 2; grid-column: 2 / -1; }
.clan-give .give-pick { grid-row: 3; grid-column: 1 / -1; justify-content: space-between; }
.clan-give.is-wanted { border-color: rgba(242, 198, 106, .4); background: rgba(77, 54, 22, .3); }
.clan-give.is-set { border-color: rgba(242, 198, 106, .75); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .2); }
.clan-give-img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.clan-give-name { min-width: 0; font-size: .8rem; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-give-meta { grid-column: 2 / -1; font-size: .67rem; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-give-meta b { color: var(--text-2); font-weight: 700; }
.clan-give-meta b.is-wants { color: var(--gold-1); }

.give-pick { display: flex; align-items: center; gap: .12rem; }
.give-step { min-width: 1.6rem; height: 1.55rem; padding: 0 .22rem; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .35); color: var(--text-3); font: 700 .68rem var(--font-num); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.give-step:hover:not(:disabled) { color: var(--gold-1); border-color: rgba(242, 198, 106, .55); }
.give-step.is-set { color: #1a1206; background: var(--gold-2); border-color: var(--gold-2); }
.give-step:disabled { opacity: .32; cursor: default; }
.give-all { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .02em; }
.give-field { flex: 1; min-width: 2.6rem; height: 1.55rem; margin-left: .25rem; padding: 0 .3rem; border: 1px solid var(--edge-soft); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .45); color: var(--text-1); font: 700 .72rem var(--font-num); text-align: right; }
.give-field:focus { outline: none; border-color: var(--gold-2); }
.give-field::-webkit-outer-spin-button, .give-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.give-field { -moz-appearance: textfield; appearance: textfield; }
.give-go { min-width: 3.4rem; height: 1.55rem; padding: 0 .45rem; font-size: .7rem; }
.give-go .ia-glyph { width: .8rem; height: .8rem; }
.clan-give-gold .clan-give-img { width: 1.5rem; height: 1.5rem; }


/* ------------------------------------------------------------- Narrow room */
@media (max-width: 1180px) {
  .clan-where { display: none; }
  .clan-table th:nth-child(4) { display: none; }
  .clan-ladder { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}
/* The way into the clan's hall (docs/CLAN_HALL.md). It sits at the end of the clan's banner and reads as an
   invitation, not an activity: the stage the hall stands at, the line that describes it, and a door. No
   count, no rate and nothing that moves — the hall itself is where the motion belongs. */
.clan-hall-invite { flex: none; display: flex; align-items: center; gap: .8rem; padding: .5rem .6rem .5rem .85rem; border-radius: .55rem;
  border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 34%, transparent);
  background: color-mix(in srgb, var(--clan, var(--gold-2)) 12%, rgba(0, 0, 0, .34)); }
.clan-hall-invite > div { display: grid; gap: .05rem; min-width: 0; }
.clan-hall-invite .t-caps { color: var(--clan-edge, var(--gold-1)); }
.clan-hall-invite b { font: 600 1rem/1.25 var(--font-display); color: var(--text-1); }
.clan-hall-invite small { color: var(--text-2); max-width: 24ch; }

@media (max-width: 900px) { .clan-hall-invite { width: 100%; justify-content: space-between; } .clan-hall-invite small { max-width: none; } }
/* A tablet, or any window 761 to 1180 pixels across (the band responsive.css sets at a 12px root). Between the
   skill rail and the docks the stage is 373px wide on an iPad Air held upright and 577px on a 1024×768 screen:
   room for one column, not two. Two gave the week, the hunt, the clanhold and the roster 115px beside a 250px
   vault, and pushed the banner's figures over its name and the hall's door out of the screen. So the page stacks
   as it does on a phone — the banner, the clan's own panels, then the vault and its tabs — and scrolls as one
   page, with no box inside it that keeps the finger for itself. The page is a column of boxes at their own height,
   as the phone's is: a grid row of a page this tall would be held to the screen and the panels drawn over each
   other. */
@media (min-width: 761px) and (max-width: 1180px) {
  .clan-page { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: .5rem; }
  .clan-page > * { flex: none; }
  .clan-columns, .clan-columns.is-empty { grid-template-columns: minmax(0, 1fr); }
  .clan-stack { grid-template-rows: auto auto; }
  .clan-main, .clan-side-body, .clan-scroll, .clan-found-body { overflow: visible; }
  .clan-invites .clan-scroll { max-height: none; }
  /* The banner in three lines: the crest and the name, the figures, and the way into the hall. The figures sit two
     to a row until the banner has room for all of them side by side (the container rule below). */
  .clan-hero { flex-wrap: wrap; row-gap: .7rem; container: clan-banner / inline-size; }
  .clan-hero .hero-copy { flex: 1 1 0; }
  .clan-hero .hero-stats { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clan-hero .bstat { min-width: 0; }
  .clan-hero .bstat b { flex-wrap: wrap; }
  .clan-hall-invite { flex: 1 1 100%; flex-wrap: wrap; }
  .clan-hall-invite > div { flex: 1 1 12rem; }
  .clan-hall-invite small { max-width: none; }
  .clan-hall-invite .btn { margin-left: auto; }
  /* The ladder's and the shelf's headings keep their title and their count on one line; the line between them
     wraps instead. */
  .clan-ladder-head h3, .clan-ladder-head .ul-count { flex: none; }
  /* A roster row keeps to the panel: its rank buttons and the expulsion stand side by side while the row has room,
     and wrap under each other instead of pushing the table out of the side of it when it has not. */
  .clan-acts { width: auto; white-space: normal; }
  .clan-acts .btn { margin: .12rem 0 .12rem .25rem; }
}
@container clan-banner (min-width: 36rem) {
  .clan-hero .hero-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .clan-page { grid-template-rows: auto auto; overflow-y: auto; }
  .clan-columns, .clan-columns.is-empty { grid-template-columns: minmax(0, 1fr); }
  .clan-roster, .clan-side, .clan-found, .clan-directory, .clan-invites { max-height: none; }
  .clan-scroll, .clan-side-body, .clan-found { overflow: visible; }
  .clan-invites { max-height: none; }
  .clan-hero .hero-stats { flex-wrap: wrap; }
  .clan-level { width: 4rem; }
  .clan-rank { width: 5rem; }
  /* The roster keeps one line per member and scrolls sideways for the rank buttons, rather than growing a row
     three buttons tall on a phone. */
  .clan-roster .clan-scroll { overflow-x: auto; }
  .clan-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .clan-card-meta { display: none; }
  .clan-main { overflow: visible; }
  .clan-project { max-width: none; }
  .clan-ladder { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the five stage names do not fit side by side; the built ones keep their bar and the names go. */
  .clan-stage small { display: none; }
  /* In the chat rail a tag beside the name of the tab is one word too many on a phone. */
  .chat-tab .chat-tab-place { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Wave 2 — the clan beside a name, and a clan's public profile (docs/CLANS_PLAN.md)

   The same rule as the top of this file: the server sends **ids**, the client turns them into `.clan-c-<id>`
   and `.clan-a-<id>`, and the values live here. Every badge below is **static** — it never shimmers, pulses or
   animates, exactly as the staff badges do not.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The badge beside an adventurer's name in chat and on the leaderboards: the crest in the clan's two colours
   and its tag. A button when it opens the clan's profile, a plain span when it sits inside another button. */
.clan-name-badge {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: .24rem;
  padding: .04rem .38rem .04rem .28rem; border-radius: .3rem;
  font: 800 .6rem/1.55 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--clan-edge, var(--gold-2));
  border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 45%, transparent);
  background: color-mix(in srgb, var(--clan, var(--gold-2)) 22%, rgba(0, 0, 0, .42));
}
.clan-name-badge .ia-emblem { width: .82rem; height: .82rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }
.clan-name-badge b { font: inherit; }
button.clan-name-badge { cursor: pointer; }
button.clan-name-badge:hover, button.clan-name-badge:focus-visible { border-color: var(--clan-edge, var(--gold-2)); filter: brightness(1.14); }
.chat-peek .clan-name-badge { font-size: .55rem; }
.lb-who .clan-name-badge { margin-left: .1rem; }
/* The Clans tab beside the leaderboards (clans wave 5): the boards nav gains a scope switch above its list, and
   a clan row wears its badge in front of its name instead of behind it. The table itself is the leaderboards'. */
.lb-boards .lb-tools { padding: .1rem .45rem .35rem; }
.lb-scopes { width: 100%; }
.lb-scopes button { flex: 1; padding: .3rem .5rem; }
.lb-tab .ia-emblem { flex: none; width: 1.5rem; height: 1.5rem; color: var(--gold-2); }
.lb-name .clan-name-badge { margin-right: .1rem; }
/* The crest alone, where a tag would not fit: the people tooltips. */
.clan-mark { display: inline-flex; align-items: center; color: var(--clan-edge, var(--gold-2)); }
.clan-mark .ia-emblem { width: .85rem; height: .85rem; }

/* Clans wave 4 — a perk, beside the number it moves.
   Where a clan perk changes a figure, this note stands beside the tool or the potion that changes the same figure,
   so a player can see where their luck came from. It is static, like every clan badge: nothing here shimmers,
   pulses or animates, and it carries no rate — the clan's crest in its own colours, what the perk adds, and the
   tier that is adding it. */
.clan-perk-note {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle;
  padding: .1rem .42rem .1rem .3rem; border-radius: .3rem; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 40%, transparent);
  background: color-mix(in srgb, var(--clan, var(--gold-2)) 16%, rgba(0, 0, 0, .3));
}
.clan-perk-note .ia-emblem { flex: none; width: .8rem; height: .8rem; color: var(--clan-edge, var(--gold-2)); }
.clan-perk-note b { font: 800 .74rem/1.5 var(--font-ui); color: var(--clan-edge, var(--gold-2)); }
.clan-perk-note small { font-size: .68rem; color: var(--text-2); }
.clan-perk-note.is-block { display: flex; width: fit-content; margin-top: .35rem; }

/* The clan channel in the chat rail: gold, beside Global's blue and Area's green. */
.chat-line.k-chat.ch-clan .who { color: var(--gold-2); }
.chat-input .chat-say.is-fixed.ch-clan { color: var(--gold-2); }
.chat-empty .clan-badge { width: 2rem; height: 2rem; }
.chat-empty .clan-badge .ia-emblem { width: 1.25rem; height: 1.25rem; }
.chat-empty .clan-tag { margin-right: .35rem; }
.chat-empty .btn { margin-top: .3rem; }

/* The clan block on an adventurer's profile: the whole row is the button that opens the clan. */
.profile-clan {
  width: 100%; display: flex; align-items: center; gap: .7rem; margin-top: .3rem; padding: .5rem .6rem;
  text-align: left; border-radius: .6rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--clan-edge, var(--gold-2)) 34%, transparent);
  background: color-mix(in srgb, var(--clan, var(--gold-2)) 12%, rgba(0, 0, 0, .34));
}
.profile-clan:hover, .profile-clan:focus-visible { border-color: var(--clan-edge, var(--gold-2)); }
.profile-clan .clan-badge { width: 2.1rem; height: 2.1rem; }
.profile-clan .clan-badge .ia-emblem { width: 1.3rem; height: 1.3rem; }
.profile-clan-copy { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.profile-clan-copy strong { font: 600 .98rem/1.3 var(--font-display); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-clan-copy small { font-size: .72rem; color: var(--text-2); }
.profile-clan > .ia-glyph { flex: none; width: 1rem; height: 1rem; color: var(--text-3); }

/* A clan's public profile (views/profile.mjs clanProfile): the card an adventurer's profile already uses. */
.clan-profile-card { width: min(34rem, 100%); }
.clan-profile-head .clan-badge.is-large { width: 3.6rem; height: 3.6rem; }
.clan-profile-head .clan-badge.is-large .ia-emblem { width: 2.3rem; height: 2.3rem; }
.clan-profile-head .profile-name { font-size: 1.6rem; }
.clan-profile-head .clan-tag { vertical-align: .2em; }
.clan-profile-notice { margin: .2rem 0 0; max-width: 34ch; font-size: .86rem; color: var(--text-2); }
.clan-profile-notice.is-quiet { color: var(--text-4); font-style: italic; }
.clan-profile-join { display: grid; gap: .45rem; }
.clan-profile-note { margin: 0; font-size: .82rem; color: var(--text-2); }
.clan-profile-scroll { max-height: 15rem; overflow-y: auto; }

/* ------------------------------------------------- Clans wave 8: the cape, the keepsakes, the trophies

   The cape has no icon file and can never have one: every other item's icon is a PNG rendered from its model,
   and this cape is a different colour for every clan. So it is drawn here, from `--clan` and `--clan-edge` — the
   same two custom properties the badge and the banner already use, set by the class names `.clan-c-<id>` and
   `.clan-a-<id>` above. **No value a player chose is ever interpolated into markup.**

   Nothing here shimmers, pulses or animates: the Equipment window is static and the figure in it holds one
   settled frame. What escalates by stage is the cloth, the braid and — from stage 4 — a steady lit edge. */

.clan-cape-icon {
  position: relative; flex: none; display: grid; place-items: center; width: 2.8rem; height: 3.2rem;
  filter: drop-shadow(0 .15rem .35rem rgba(0, 0, 0, .55));
}
/* The cloth: a cape hanging from the shoulders, its hem clipped to the stage's own silhouette. */
.clan-cape-icon .clan-cape-cloth,
.clan-cape-icon .clan-cape-edge {
  position: absolute; inset: 0; border-radius: .5rem .5rem .35rem .35rem;
  clip-path: polygon(26% 0, 74% 0, 92% 26%, 86% 100%, 50% 90%, 14% 100%, 8% 26%);
}
.clan-cape-icon .clan-cape-cloth {
  background: linear-gradient(168deg, color-mix(in srgb, var(--clan, var(--gold-2)) 88%, #fff 12%) 0%,
    var(--clan, var(--gold-2)) 38%, color-mix(in srgb, var(--clan, var(--gold-2)) 55%, var(--clan-deep, #101828)) 78%,
    var(--clan-deep, #101828) 100%);
  box-shadow: inset 0 .08rem 0 rgba(255, 255, 255, .22);
}
/* The braid down both edges and along the hem, in the clan's second colour. */
.clan-cape-icon .clan-cape-edge {
  background: linear-gradient(90deg, var(--clan-edge, var(--gold-1)) 0 9%, transparent 9% 91%, var(--clan-edge, var(--gold-1)) 91% 100%);
  opacity: .82;
}
.clan-cape-icon .clan-cape-crest {
  position: relative; width: 1.25rem; height: 1.25rem; margin-top: .25rem;
  color: var(--gold-1); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
/* The stages. Higher means wilder: the cloth lengthens, the braid thickens and, from the hall, it is lit. */
.clan-cape-icon.is-stage-1 .clan-cape-cloth, .clan-cape-icon.is-stage-1 .clan-cape-edge { clip-path: polygon(26% 0, 74% 0, 88% 24%, 82% 66%, 50% 60%, 18% 66%, 12% 24%); }
.clan-cape-icon.is-stage-2 .clan-cape-cloth, .clan-cape-icon.is-stage-2 .clan-cape-edge { clip-path: polygon(26% 0, 74% 0, 90% 25%, 85% 84%, 50% 77%, 15% 84%, 10% 25%); }
.clan-cape-icon.is-stage-4 .clan-cape-cloth, .clan-cape-icon.is-stage-4 .clan-cape-edge { clip-path: polygon(24% 0, 76% 0, 94% 27%, 88% 100%, 50% 92%, 12% 100%, 6% 27%); }
.clan-cape-icon.is-stage-5 .clan-cape-cloth, .clan-cape-icon.is-stage-5 .clan-cape-edge { clip-path: polygon(22% 0, 78% 0, 96% 28%, 96% 100%, 62% 88%, 50% 100%, 38% 88%, 4% 100%, 4% 28%); }
.clan-cape-icon.is-stage-3 .clan-cape-edge { opacity: .95; }
.clan-cape-icon.is-stage-4 .clan-cape-edge, .clan-cape-icon.is-stage-5 .clan-cape-edge {
  opacity: 1; box-shadow: 0 0 .5rem color-mix(in srgb, var(--clan, var(--gold-2)) 70%, transparent);
}
.clan-cape-icon.is-stage-5 { filter: drop-shadow(0 .15rem .35rem rgba(0, 0, 0, .55)) drop-shadow(0 0 .55rem color-mix(in srgb, var(--clan, var(--gold-2)) 60%, transparent)); }
.clan-cape-icon.is-stage-4 .clan-cape-crest, .clan-cape-icon.is-stage-5 .clan-cape-crest { width: 1.45rem; height: 1.45rem; }
.clan-cape-icon.is-small { width: 1.9rem; height: 2.2rem; }
.clan-cape-icon.is-small .clan-cape-crest { width: .85rem; height: .85rem; }

/* ------------------------------------------------- The Colours cell (views/docks.mjs)
   It sits under the nine slots and is deliberately not one of them: nothing is equipped into it, so wearing the
   clan's cape never costs an adventurer the cape they are wearing. */
.eq-colours { width: 100%; }
.eq-colours .eq-colours-copy { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.eq-colours .eq-colours-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-colours .eq-colours-copy small { color: var(--text-3); font-size: .7rem; }
.eq-colours .eq-colours-well { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
.eq-colours .eq-colours-well .ia-emblem { width: 1.3rem; height: 1.3rem; color: var(--text-4); }
.eq-colours.is-active { border-color: color-mix(in srgb, var(--clan-edge, var(--gold-2)) 55%, transparent); }
.eq-colours[disabled] { opacity: .6; cursor: default; }

/* ------------------------------------------------- Keepsakes: the capes of clans you were in */
.clan-keepsakes { display: grid; gap: .4rem; }
.clan-keepsake {
  display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem;
  border: 1px solid var(--edge-soft); border-radius: .5rem; background: rgba(0, 0, 0, .28);
}
.clan-keepsake strong { display: block; font-size: .84rem; }
.clan-keepsake small { display: block; color: var(--text-3); font-size: .7rem; }

/* ------------------------------------------------- The trophies
   Five plinths, one a boss, drawn whole whether or not anything stands on them, so the shelf says what is still
   out there as plainly as what has been won. Empty today: the clan boss is wave 6. */
.clan-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: .5rem; }
.clan-trophy {
  display: grid; justify-items: center; gap: .15rem; padding: .6rem .4rem .5rem; text-align: center;
  border: 1px solid var(--edge-soft); border-radius: .55rem; background: rgba(0, 0, 0, .3);
}
.clan-trophy strong { font-size: .78rem; color: var(--text-2); }
.clan-trophy small { font-size: .66rem; color: var(--text-4); }
.clan-trophy-plinth {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .2rem;
  border-radius: .5rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .35);
}
.clan-trophy-plinth .ia-glyph, .clan-trophy-plinth .ia-emblem { width: 1.3rem; height: 1.3rem; color: var(--text-4); }
.clan-trophy.is-won { border-color: color-mix(in srgb, var(--clan-edge, var(--gold-2)) 45%, transparent); background: rgba(242, 198, 106, .08); }
.clan-trophy.is-won strong { color: var(--text-1); }
.clan-trophy.is-won small { color: var(--gold-3); }
.clan-trophy.is-won .clan-trophy-plinth {
  border-color: color-mix(in srgb, var(--clan-edge, var(--gold-2)) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--clan, var(--gold-2)) 40%, #0a1018), var(--clan-deep, #101828));
}
.clan-trophy.is-won .clan-trophy-plinth .ia-emblem { color: var(--gold-1); }
.clan-trophy-clan { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--clan-edge, var(--gold-3)); }

/* ------------------------------------------------- The cape on the Clan page */
/* The card sits in the Store's own `upgrade-card`, which stacks its children; the cape reads as a row instead —
   the cloth beside what it is, the way a piece of gear reads everywhere else in the game. */
.clan-cape-card { display: flex; flex-direction: row; align-items: center; text-align: left; gap: .8rem; padding: .6rem .9rem .8rem; }
.clan-cape-card .clan-cape-copy { flex: 1; min-width: 0; }
.clan-cape-card .clan-cape-copy h4 { margin: 0; font-size: .95rem; }
.clan-cape-card .clan-cape-copy p { margin: .15rem 0 .35rem; font-size: .78rem; color: var(--text-3); }
.clan-cape-card .clan-cape-next { font-size: .72rem; color: var(--text-4); }

/* The cape and the trophies on an adventurer's profile (views/profile.mjs). */
.profile-cape { display: grid; gap: .45rem; width: 100%; margin-top: .4rem; }
.profile-cape .clan-trophies { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }