/* ============================================================
   After Life — shared design system
   ------------------------------------------------------------
   ONE stylesheet, linked by every page, so the whole app shares
   the dashboard's look and re-themes from one place.

   THE WHITE-LABEL SURFACE IS THE FIVE TOKENS AT THE TOP OF :root.
   A new client supplies those five colours and the font; every
   other colour is derived from them with color-mix, so a five-
   value change re-skins the entire product. Do NOT hard-code
   colours in a page — reach for a token, or add a derived one
   here, so white-labelling keeps working.
   ============================================================ */

@font-face {
  font-family: "Sniglet";
  src: url("/sniglet-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

  :root {
    /* ===== BRAND TOKENS — the five that skin a tenant's reader embed =====
       This is the entire white-label surface. These values are the DEFAULT
       (and The Beans, tenant one); at serve time the embed injects the
       current tenant's five over the top (see the theme script in the reader
       pages, and /admin/settings/theme). Everything below is derived, so a
       five-value change re-skins the whole reader embed. */
    --brand:   #5DB1AD;   /* 1 · accent text & big titles */
    --ink:     #2D2D2A;   /* 2 · main text */
    --bg:      #F0F0F0;   /* 3 · app background */
    --comp-1:  #B1CF5F;   /* 4 · complementary one */
    --comp-2:  #3A77B6;   /* 5 · complementary two */

    /* brand font, for labels and titles */
    --title: "Sniglet", "Iowan Old Style", Palatino, Georgia, sans-serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* ===== DERIVED — computed from the five; not brand-settable =========
       Roles the app needs beyond the five are mixed from them, so the whole
       interface re-themes from a five-colour change. */
    --card:      #ffffff;
    --ink-soft:  color-mix(in srgb, var(--ink) 46%, var(--bg));
    --rule:      color-mix(in srgb, var(--ink) 13%, var(--bg));
    --paper:     color-mix(in srgb, var(--ink) 4%,  var(--card));
    --paper-2:   color-mix(in srgb, var(--ink) 8%,  var(--card));

    /* legacy role names kept so every existing var() re-themes for free.
       Text accents collapse onto the brand; two-tone artwork uses the
       complementaries explicitly (see the icons). */
    --green:      var(--brand);
    --green-soft: color-mix(in srgb, var(--brand) 68%, var(--ink));
    --gold:       var(--brand);
    --gold-soft:  color-mix(in srgb, var(--brand) 32%, #fff);
    --water:      var(--comp-2);
    --grass:      color-mix(in srgb, var(--comp-1) 22%, #fff);
    --grass-line: color-mix(in srgb, var(--comp-1) 40%, #fff);
    --grass-edge: color-mix(in srgb, var(--comp-1) 56%, #fff);

    /* functional — fixed, deliberately NOT brand-settable, so a client can't
       accidentally make an error look calm or a warning look like success. */
    --warn:      #c98a3c;
    --water-dry: var(--warn);
    --stop:      #b23b2c;

    --radius: 12px;
    --disc: var(--brand);

    /* ===== SKELETON PRELOADER — the READER surface's own shades =====
       Two custom properties do the work: a resting block colour and a
       travelling sheen. Both derive from the TENANT theme (--ink / --bg,
       which the embed injects per tenant), so a warm, a dark and a teal
       tenant each get a skeleton in their own colours — nothing here is
       a fixed brand. The author app defines its OWN pair off the fixed
       Afterlife brand in afterlife-app.css; no shared token path. */
    --skeleton-base:  color-mix(in srgb, var(--ink) 12%, var(--bg));
    --skeleton-sheen: color-mix(in srgb, var(--bg) 65%, transparent);
    --skeleton-sweep: 1.15s;
  }

/* ============================================================
   SKELETON PRELOADER — mechanism (reader surface)
   ------------------------------------------------------------
   A resting-coloured block with a light band sweeping across on a
   loop. The gradient is twice the block's width; animating its
   position slides the band. Colour comes only from the two tokens
   above, so the shimmer follows whatever tenant theme the embed has
   injected. Per-page geometry is cut to each reader page in that
   page's own <style>; this file carries only the shimmer itself.
   ============================================================ */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: 8px;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--skeleton-sheen) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: skeleton-sweep var(--skeleton-sweep) linear infinite;
}
@keyframes skeleton-sweep { to { background-position: -200% 0; } }

/* Motion is a courtesy. If the reader has asked for less, the block
   still says "loading" — it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- page shell -----------------------------------------------------
   .wrap is the wide dashboard shell; .page is the narrower reading
   column the forms and documents use. Both centre and share padding, so
   page width behaves consistently everywhere. */
.wrap  { max-width: var(--reader-max, 1224px); margin: 0 auto; padding: 26px 22px 40px; }
.page  { max-width: var(--reader-max, 640px);  margin: 0 auto; padding: 28px 20px 48px; }
.page.narrow { max-width: var(--reader-max, 560px); }

/* ---- headings & text ------------------------------------------------ */
h1 { font-family: var(--title); font-size: 1.7rem; color: var(--brand); margin: 0 0 6px; letter-spacing: .01em; }
h2 { font-family: var(--title); font-size: 1.2rem; margin: 26px 0 10px; }
h3 { font-family: var(--title); font-size: 1.02rem; margin: 18px 0 8px; }
p  { margin: 0 0 12px; }
a  { color: var(--brand); }
.muted   { color: var(--ink-soft); font-size: .9rem; }
.lead    { color: var(--ink-soft); margin: 0 0 20px; }
.mono    { font-family: var(--mono); }

/* ---- cards & panels ------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card.paper { background: var(--paper); }

.note {
  background: var(--paper);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  font-size: .92rem;
  margin: 14px 0;
}
.note.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.note.stop { border-left-color: var(--stop); background: color-mix(in srgb, var(--stop) 8%, var(--card)); }

/* ---- forms ---------------------------------------------------------- */
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: .9rem; }
input[type=text], input[type=email], input[type=number], select, textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: var(--sans);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--water);
  outline-offset: -1px;
}
fieldset { border: 1px solid var(--rule); border-radius: var(--radius); margin: 18px 0; padding: 14px 16px; }
legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }

/* ---- buttons -------------------------------------------------------- */
.btn, button.btn {
  display: inline-block;
  padding: 10px 18px;
  font-size: 15px;
  font-family: var(--sans);
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.btn.ghost { background: var(--card); color: var(--brand); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.hidden { display: none; }

/* ---- the currency, shared so berries look identical everywhere ------ */
.disc { border-radius: 50%; flex: none; display: inline-block; }

/* ---- shared components promoted from the dashboard ------------------
   .pill and the .door-btn family were defined inline in index.html.
   admin.html is the third page to need them, which is the point at which
   duplication stops being tolerable — so they live here now and both
   pages consume one definition.

   NAME NOTE: "door-btn" is inherited from the dashboard's three doorways.
   It's a poor name for a shared component, but renaming means touching
   every call site, so it keeps the name it earned. Note this is the
   REDESIGNED button; `.btn` above is the older plain one still used by
   the form pages (register/claim/wallet/verify). Unifying the two means
   re-checking those pages, so it's deliberately left as a follow-up. */

.pill {
  background: var(--card);
  border-radius: 13px;
  padding: 8px 18px;
  text-align: center;
  min-width: 96px;
  box-shadow: 0 1px 2px rgba(40,44,28,.05), 0 6px 16px rgba(40,44,28,.05);
}
.pill .pill-k { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.2; }
.pill .pill-v { display: block; font-family: var(--title); font-size: 17px; color: var(--ink); line-height: 1.2; margin-top: 1px; }

.door-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--title); font-weight: 400; font-size: 15px; line-height: 1.15;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .04s ease;
}
.door-btn:active { transform: translateY(1px); }
.door-btn:focus-visible { outline: 2px solid var(--comp-2); outline-offset: 2px; }
.door-btn.brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.door-btn.brand:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
.door-btn.lime  { background: var(--comp-1); color: color-mix(in srgb, var(--ink) 66%, var(--comp-1)); border-color: var(--comp-1); }
.door-btn.lime:hover { background: color-mix(in srgb, var(--comp-1) 90%, #000); }
.door-btn.blue  { background: var(--comp-2); color: #fff; border-color: var(--comp-2); }
.door-btn.blue:hover { background: color-mix(in srgb, var(--comp-2) 88%, #000); }
.door-btn.ghost { background: var(--card); color: var(--comp-2); border-color: color-mix(in srgb, var(--comp-2) 34%, var(--card)); }
.door-btn.ghost:hover { background: color-mix(in srgb, var(--comp-2) 8%, var(--card)); border-color: var(--comp-2); }
.door-btn.quiet { background: var(--card); color: var(--ink-soft); border-color: var(--rule); }
.door-btn.quiet:hover { background: var(--paper); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 24%, var(--bg)); }
.door-btn.danger { background: var(--card); color: var(--stop); border-color: color-mix(in srgb, var(--stop) 34%, var(--card)); }
.door-btn.danger:hover { background: color-mix(in srgb, var(--stop) 7%, var(--card)); border-color: var(--stop); }
.door-btn.sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.door-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- the reader form CTA — ONE primary button for every reader form ----
   register / claim / wallet sign-in / reader-register all end in this same
   full-width primary, so a reader meets the same button on every form. It is
   deliberately distinct from .door-btn above: a doorway button navigates the
   dashboard, a form button submits — different jobs, so they may look
   different, but each job now has exactly one style. This retires the old
   plain `.btn` (still defined above for anything legacy) and the three
   bespoke per-page form buttons that had drifted apart.

   Full-width by default: on a form the primary action should be a large,
   easy target (Fitts). Sans + heavy weight to match the newer reader pages.
   Colour is all token-derived, so it re-skins per tenant like everything else. */
.form-btn {
  display: block; width: 100%;
  padding: 14px 20px;
  font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1.2;
  color: #fff; background: var(--brand);
  border: 0; border-radius: 12px; cursor: pointer;
  text-align: center; text-decoration: none;
  transition: filter .15s ease, transform .04s ease;
}
.form-btn:hover { filter: brightness(.94); }
.form-btn:active { transform: translateY(1px); }
.form-btn:focus-visible { outline: 2px solid var(--comp-2); outline-offset: 2px; }
.form-btn[disabled], .form-btn:disabled { opacity: .5; cursor: default; filter: none; }
/* a compact, inline variant for secondary in-flow actions (e.g. the claim
   page's "let me know" button), so those match too without going full-width. */
.form-btn.sm { display: inline-block; width: auto; padding: 10px 16px; font-size: .92rem; }