/* ================================================================================================
   THE LIFE LAYER — Forged Brands Customer Portal.

   Kyle, 2026-08-30: "We tell people we are the most creative company in our space and this just
   looks blah."

   He was right. The first version opened with four identical grey tiles counting things — the
   opening move of every admin panel ever built — and buried the artwork, which is the actual
   reason anyone finds Forged Brands interesting.

   Four rules, and they are why this reads as different rather than merely darker:

     1. THE WORK LEADS. Artwork gets size and presence, not a thumbnail in a table.
     2. ONE THING IS URGENT. The proof waiting on them is the only urgent thing, so it is the only
        thing that looks urgent. Four equal boxes make everything equally ignorable.
     3. DARK CHROME MAKES THE PRODUCT SING. Indiana crimson and Auburn navy go muddy on bone; on
        charcoal they carry. The ground is dark so the graphics do not have to compete with it.
     4. IT MOVES — a drifting ember glow, cards that lift, figures that count up. All of it off
        under prefers-reduced-motion.

   Loaded AFTER portal.css so it can override the sober version deliberately.
   ================================================================================================ */

:root{
  --ember:#C2703D;        /* the heat of the forge — energy, used sparingly */
  --charcoal:#1A1C1E;
}

/* ---------- the top bar goes dark, so it and the hero read as one piece ---------- */
.topbar{ background:var(--charcoal); border-bottom-color:rgba(255,255,255,.08); }
.topbar .who b{ color:#E9ECEE; }
.topbar .who span{ color:#7D868F; }
.topbar .iconbtn{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#C6CDD3; }
.topbar .iconbtn:hover{ background:rgba(255,255,255,.13); }

/* ---------- THE HERO ---------- */
.hero{
  position:relative; overflow:hidden; color:#E9ECEE; padding:26px 16px 24px;
  background:radial-gradient(120% 90% at 15% 0%, #2A3340 0%, #1A1C1E 55%, #141618 100%);
}
/* The forge glow. One warm light source, off to the side, never centred. */
.hero::after{
  content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(194,112,61,.42), rgba(194,112,61,0) 68%);
}
@media (prefers-reduced-motion:no-preference){
  .hero::after{ animation:emberdrift 7s ease-in-out infinite alternate; }
  @keyframes emberdrift{
    from{ transform:translate(0,0) scale(1); opacity:.85; }
    to  { transform:translate(-16px,14px) scale(1.14); opacity:1; }
  }
}
/* Contour lines, straight off the Forged Brands board — mountains and topography. */
.topo{ position:absolute; inset:0; opacity:.15; pointer-events:none; }
.hero-in{ position:relative; z-index:1; max-width:900px; margin:0 auto; }

.greet{
  font-family:var(--display); font-weight:500; font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; color:#98A2AC;
}
.hero-acct{
  font-family:var(--display); font-weight:600; font-size:clamp(26px,7vw,34px);
  letter-spacing:.02em; text-transform:uppercase; margin:2px 0 16px; line-height:1.05;
}
.hero-verdict{ font-size:16.5px; line-height:1.4; margin:0; max-width:24ch; color:#C6CDD3; }
.hero-verdict b{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(30px,9vw,38px); line-height:1.03; letter-spacing:.01em; margin-bottom:2px;
}
.hero-verdict.up b{ color:#7FB08C; }
.hero-verdict.down b{ color:#DE9A6E; }
.hero-verdict.flat b{ color:#C6CDD3; }

.hero-figs{
  display:flex; flex-wrap:wrap; gap:20px 26px; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-figs b{
  display:block; font-family:var(--display); font-weight:600; font-size:19px; color:#E9ECEE;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.hero-figs span{ display:block; font-size:10.5px; color:#7D868F; letter-spacing:.05em; margin-top:2px; }

/* ---------- lookbook rails — the work, at a size worth looking at ---------- */
.rail{ display:flex; gap:11px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.rail::-webkit-scrollbar{ height:5px; }
.rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:9px; }
.rail .art{
  flex:none; width:160px; scroll-snap-align:start; border-radius:10px; overflow:hidden;
  text-align:left; background:var(--surface); border:1px solid var(--line); padding:0; cursor:pointer;
}
@media (prefers-reduced-motion:no-preference){
  .rail .art{ transition:transform .18s ease, box-shadow .18s ease; }
  .rail .art:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -16px rgba(0,0,0,.45); }
}
.rail .art:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.art-im{ aspect-ratio:1/1; width:100%; background:var(--surface-2); display:grid; place-items:center; overflow:hidden; }
.art-im img{ width:100%; height:100%; object-fit:cover; }
.art-im .none{ font-family:var(--display); font-size:13px; letter-spacing:.06em; color:var(--ink-3); padding:10px; text-align:center; }
.art-cap{ padding:9px 11px 11px; }
.art-cap b{ display:block; font-size:13px; font-weight:700; line-height:1.25; }
.art-cap span{ display:block; font-size:11px; color:var(--ink-3); margin-top:2px; }
.art-tag{
  display:inline-block; margin-top:7px; font-family:var(--display); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; background:var(--surface-2);
  border-radius:999px; padding:2px 8px; color:var(--ink-2);
}
.art-tag.miss{ background:var(--ember); color:#FFFFFF; }

/* ---------- the big proof — the single most valuable thing on the screen ---------- */
.bigproof{
  border-radius:12px; overflow:hidden; background:var(--surface); border:2px solid var(--ember);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.5); width:100%; text-align:left; padding:0; cursor:pointer;
}
.bigproof:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
.bigproof-im{ width:100%; aspect-ratio:4/3; background:var(--surface-2); display:grid; place-items:center; overflow:hidden; }
.bigproof-im img{ width:100%; height:100%; object-fit:contain; }
.bigproof-im .none{ font-size:12.5px; color:var(--ink-3); padding:40px 20px; text-align:center; }
.bigproof-bd{ padding:13px 15px 15px; }
.bigproof-bd b{ display:block; font-size:16px; font-weight:700; }
.bigproof-bd span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* ---------- section heads ---------- */
.sec-h{ display:flex; align-items:baseline; gap:9px; margin:22px 0 11px; }
.sec-h h2{
  font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; margin:0; color:var(--ink);
}
.sec-h em{ font-style:normal; font-size:12px; color:var(--ink-3); }
.sec-h .more{
  margin-left:auto; font-size:12px; color:var(--ember); font-weight:600;
  background:none; border:none; cursor:pointer; padding:6px 2px; min-height:32px;
}

/* The trend chart is supporting evidence now, not the opening move. It sits quieter and lower. */
.band.quiet{ margin-top:22px; background:var(--surface-2); border-color:var(--line-soft); box-shadow:none; }
.band.quiet .verdict{ font-size:15px; font-family:var(--body); font-weight:500; margin-bottom:12px; }

/* Content eases in rather than snapping. Small, and it is most of what "alive" means. */
@media (prefers-reduced-motion:no-preference){
  main > *{ animation:rise .32s ease-out both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
}

/* ---------- the chrome is one dark block ----------
   Top bar, tabs and hero read as a single piece. A light tab strip between two dark bands cuts
   the header in half and makes the hero look like a banner someone pasted in.
   The lockup switches to its CREAM version here — the navy one all but disappears on charcoal. */
.tabs{
  background:var(--charcoal);
  border-bottom-color:rgba(255,255,255,.08);
}
.tab{ color:#98A2AC; }
.tab:hover{ color:#C6CDD3; }
.tab[aria-current="page"]{ background:rgba(255,255,255,.10); color:#E9ECEE; }
.tab .pill{ background:var(--ember); color:#FFFFFF; }
.tab[aria-current="page"] .pill{ background:var(--ember); color:#FFFFFF; }
.tab .soon{ color:#69717A; }

/* `.art-cap span` (0,2,0) was beating `.art-tag` (0,1,0) and forcing the pill to display:block,
   so it stretched the full width of the tile. Scoped selector wins it back. */
.art-cap .art-tag{ display:inline-block; width:auto; }

/* On a phone the proof filling the screen is right — it is the thing they came to do. On a desktop
   the same rule makes a 4:3 image nearly 800px tall, which is not presence, it is shouting. So it
   becomes a side-by-side: artwork on the left at a sane size, the detail and the point of it on
   the right. */
@media (min-width:720px){
  .bigproof{ display:flex; align-items:stretch; }
  .bigproof-im{ flex:0 0 58%; aspect-ratio:4/3; }
  .bigproof-bd{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:20px 22px; }
  .bigproof-bd b{ font-size:20px; line-height:1.25; }
  .bigproof-bd span{ font-size:13.5px; margin-top:6px; }
}

/* The customer's own mark, beside ours. Explicit height and object-fit:contain — never cropped,
   never squashed, never spilling. A logo we do not hold falls back to their name in text. */
.acct-logo{ display:block; height:30px; width:auto; max-width:150px; object-fit:contain; }
@media (min-width:640px){ .acct-logo{ height:34px; max-width:200px; } }

/* The quiet half of a down year. The figure they HAVE spent gets the big type; how it compares
   sits underneath in a normal weight. Honest, not shouted. */
.hero-sub{
  display:block; font-style:normal; font-size:13px; color:#98A2AC; margin-top:6px;
  letter-spacing:.02em;
}

/* ================================================================================================
   THE HERO WEARS THE CUSTOMER'S COLOURS — and the page comes back into the light.

   Two corrections in one, both Kyle's:
     · "I still think there is way too much black and darkness all over."
     · "We put brand colors in for each customer in their customer profile — what if we worked some
        of the customers brand colors in so it looks more like them?"

   Making the whole portal dark was an overcorrection. What was actually good was the CONTRAST: one
   deep, considered band at the top and clean, legible content beneath it. Dark everywhere threw the
   contrast away and left a page with no shape.

   So: the content returns to a light COOL ground (never the tan), and the dark band becomes THEIR
   dark band. The Foundry already stores primaryColor and secondaryColor on every customer — the
   same fields the internal school and customer pages theme from — so the hero can be the customer's own
   red rather than a generic charcoal. Every account's portal looks like itself, and none of it is
   a colour someone had to pick by hand.

   Ember stays for Forged Brands' own moments (the urgent bar, section rules) so the two brands are
   never confused: THEIR colour sets the stage, OUR colour asks for the action.
   ================================================================================================ */

/* Content is light again. These win over the token block in portal.css because life.css loads
   after it — the values are the cool ramp, never bone or stone. */
:root{
  --bg:#EDEFF2;
  --surface:#FFFFFF;
  --surface-2:#E3E7EB;
  --line:#D2D8DE;
  --line-soft:#E1E6EA;
  --ink:#181B1E;
  --ink-2:#495159;
  --ink-3:#78818A;
  --accent:#415469;
  --on-accent:#FFFFFF;
  --good:#3F7A54;
  --warn:#B4532A;
  --shadow:0 1px 2px rgba(20,24,28,.06), 0 10px 28px -18px rgba(20,24,28,.32);

  /* Fallbacks, used only until a customer's own colours arrive from their profile. */
  --brand-1:#2A3340;
  --brand-2:#C2703D;
}

/* The chrome takes the customer's dark; the hero takes their gradient. Both are set inline from
   the projected colours, so these are only the shape of it. */
.topbar{ background:var(--brand-deep, #1A1C1E); border-bottom-color:rgba(255,255,255,.10); }
.tabs{ background:var(--brand-deep, #1A1C1E); border-bottom-color:rgba(255,255,255,.10); }
.tab{ color:rgba(255,255,255,.62); }
.tab:hover{ color:#fff; }
.tab[aria-current="page"]{ background:rgba(255,255,255,.14); color:#fff; }
.tab .pill{ background:var(--ember); color:#fff; }
.tab .soon{ color:rgba(255,255,255,.4); }
.topbar .who b{ color:#fff; }
.topbar .who span{ color:rgba(255,255,255,.55); }
.topbar .iconbtn{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:#fff; }
.topbar .iconbtn:hover{ background:rgba(255,255,255,.18); }

.hero{
  background:linear-gradient(150deg, var(--brand-1) 0%, var(--brand-deep, #16181A) 72%);
}
/* The glow is their SECOND colour — their red over their charcoal. */
.hero::after{
  background:radial-gradient(circle,
    color-mix(in srgb, var(--brand-2) 42%, transparent),
    color-mix(in srgb, var(--brand-2) 0%, transparent) 68%);
}
.topo{ opacity:.13; }
.topo g{ stroke:var(--brand-2); }

/* Their logo needs room to breathe on their own colour. */
.acct-logo{ height:34px; max-width:170px; }
@media (min-width:640px){ .acct-logo{ height:40px; max-width:220px; } }


/* Artwork on white cards reads clean; the school colours in the art do the work. */
.rail .art{ background:var(--surface); border-color:var(--line); }
.art-im{ background:var(--surface-2); }
.art-cap b{ color:var(--ink); }
.art-cap span{ color:var(--ink-3); }
.plate{ background:var(--surface); box-shadow:0 20px 42px -26px rgba(20,24,28,.5); }
.plate-im{ background:#F4F6F8; }
.plate-name{ color:var(--ink); }
.plate-meta{ color:var(--ink-2); }
.plate-cta{ color:#fff; }
.bigproof-bd b{ color:var(--ink); }
.sec-h h2{ color:var(--ink-3); }
.signin-wrap{ background:var(--bg); }