/* Blackforge: dashboard hero + reusable black/gold action card.
   Loaded after app.css. The hero lives under its own .bf-hero namespace so none of the older,
   fragmented .welcome-hero/.welcome-copy breakpoint rules in app.css can reach it. All text is
   live DOM; the only raster assets are the wave background and the logo mark. */

@font-face{
  font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/dm-serif-display-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{--bf-serif:'DM Serif Display',Georgia,"Times New Roman",serif}

/* =====================================================================
   Action card
   ===================================================================== */
.bf-card{
  --bf-card-height:100px;--bf-card-radius:20px;--bf-icon-size:56px;--bf-icon-radius:14px;
  --bf-gap:18px;--bf-pad-x:22px;--bf-pad-y:18px;--bf-title-size:18px;--bf-subtitle-size:14px;
  --bf-trail:22px;--bf-glow-alpha:.34;
  position:relative;isolation:isolate;box-sizing:border-box;width:100%;min-height:var(--bf-card-height);
  padding:var(--bf-pad-y) var(--bf-pad-x);display:grid;
  grid-template-columns:var(--bf-icon-size) minmax(0,1fr) var(--bf-trail);align-items:center;gap:var(--bf-gap);
  overflow:hidden;border-radius:var(--bf-card-radius);border:1px solid rgba(255,196,96,.62);
  background:
    radial-gradient(120% 160% at 18% -60%,rgba(255,186,64,.24) 0%,rgba(255,176,40,.07) 38%,transparent 60%),
    radial-gradient(80% 140% at 100% 130%,rgba(255,158,20,.20) 0%,rgba(255,150,10,.06) 42%,transparent 68%),
    linear-gradient(112deg,rgba(38,27,15,.97) 0%,rgba(17,13,9,.985) 36%,rgba(9,8,7,.99) 64%,rgba(30,19,8,.97) 100%);
  color:#fff9ee;text-decoration:none;text-align:left;font:inherit;
  box-shadow:0 12px 32px rgba(0,0,0,.26),0 0 22px rgba(255,150,20,calc(var(--bf-glow-alpha) * .6)),0 0 6px rgba(255,190,70,calc(var(--bf-glow-alpha) * .8)),inset 0 1px 0 rgba(255,236,176,.16);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform 190ms cubic-bezier(.2,.7,.2,1),box-shadow 190ms ease,border-color 190ms ease,opacity 190ms ease;
}
.bf-card::before{content:"";position:absolute;z-index:-1;inset:3px;border-radius:calc(var(--bf-card-radius) - 3px);border:1px solid rgba(255,196,64,.10);pointer-events:none}
.bf-card__ambient{position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.bf-card__ambient--top{width:60%;height:80%;right:-8%;top:-58%;transform:rotate(8deg);background:linear-gradient(180deg,rgba(255,180,30,.16),rgba(255,180,30,0))}
.bf-card__ambient--bottom{width:46%;height:70%;right:-6%;bottom:-54%;transform:rotate(-8deg);background:linear-gradient(0deg,rgba(255,150,0,.20),rgba(255,150,0,0))}
.bf-card__icon{position:relative;z-index:2;width:var(--bf-icon-size);height:var(--bf-icon-size);border-radius:var(--bf-icon-radius);display:grid;place-items:center;color:#6e3b00;
  background:radial-gradient(110% 90% at 26% 12%,rgba(255,255,255,.66) 0%,rgba(255,255,255,.14) 30%,transparent 52%),linear-gradient(150deg,#ffe8a0 0%,#ffd064 38%,#f5b01d 76%,#dc9a0b 100%);
  border:1px solid rgba(255,240,190,.7);
  box-shadow:0 6px 16px rgba(240,150,0,.22),0 0 10px rgba(255,190,40,.26),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(140,80,0,.22)}
.bf-card__icon svg{width:50%;height:50%;display:block;stroke-width:1.9}
.bf-card__copy{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
/* Titles and subtitles wrap in full: a work item title carries the fact (who, what, how much), and clipped text hides what the card asks for. */
.bf-card__title{font-size:var(--bf-title-size);line-height:1.22;font-weight:620;letter-spacing:-.012em;color:#fffaf1;
  display:block;overflow-wrap:break-word;text-wrap:pretty}
.bf-card__subtitle{font-size:var(--bf-subtitle-size);line-height:1.35;font-weight:450;color:#e4ddd1;overflow-wrap:break-word}
.bf-card__trailing{position:relative;z-index:2;width:var(--bf-trail);height:var(--bf-trail);display:grid;place-items:center;color:#f3bd55;transition:transform 190ms cubic-bezier(.2,.7,.2,1)}
.bf-card__trailing svg{width:100%;height:100%;stroke-width:2.1}

.bf-card--compact{--bf-card-height:82px;--bf-card-radius:17px;--bf-icon-size:46px;--bf-icon-radius:12px;--bf-gap:14px;--bf-pad-x:18px;--bf-pad-y:14px;--bf-title-size:16px;--bf-subtitle-size:13px;--bf-trail:18px}
.bf-card--large{--bf-card-height:124px;--bf-card-radius:24px;--bf-icon-size:68px;--bf-icon-radius:17px;--bf-gap:22px;--bf-pad-x:28px;--bf-pad-y:22px;--bf-title-size:22px;--bf-subtitle-size:16px;--bf-trail:24px}
.bf-card--glow-quiet{--bf-glow-alpha:.18}
.bf-card--glow-normal{--bf-glow-alpha:.34}
.bf-card--glow-strong{--bf-glow-alpha:.56}

@media(hover:hover){
  .bf-card:hover:not(.is-disabled):not(:disabled){transform:translateY(-2px);border-color:rgba(255,218,130,.95);
    box-shadow:0 18px 40px rgba(0,0,0,.32),0 0 30px rgba(255,150,20,calc(var(--bf-glow-alpha) * .95)),0 0 10px rgba(255,200,80,calc(var(--bf-glow-alpha) * 1.1)),inset 0 1px 0 rgba(255,240,190,.22)}
  .bf-card:hover:not(.is-disabled):not(:disabled) .bf-card__trailing{transform:translateX(3px)}
}
.bf-card:active:not(.is-disabled):not(:disabled){transform:translateY(0) scale(.995)}
.bf-card:focus-visible{outline:2px solid #ffe29a;outline-offset:3px}
.bf-card.is-selected{border-color:#ffe19a;box-shadow:0 12px 32px rgba(0,0,0,.3),0 0 0 1px rgba(255,225,154,.5),0 0 30px rgba(255,160,20,.42)}
.bf-card.is-disabled,.bf-card:disabled:not(.bf-card--state-loading){opacity:.5;filter:saturate(.6);cursor:not-allowed;box-shadow:0 8px 20px rgba(0,0,0,.18)}

.bf-card--state-warning{border-color:rgba(255,150,80,.78)}
.bf-card--state-warning .bf-card__icon{color:#4a1700;background:radial-gradient(110% 90% at 26% 12%,rgba(255,255,255,.58) 0%,rgba(255,255,255,.12) 30%,transparent 52%),linear-gradient(150deg,#ffd2a2 0%,#ff9d50 40%,#ee6813 76%,#c84802 100%);border-color:rgba(255,215,180,.7)}
.bf-card--state-warning .bf-card__trailing{color:#ff9f55}
.bf-card--state-completed{--bf-glow-alpha:.12;border-color:rgba(214,208,150,.42)}
.bf-card--state-completed .bf-card__icon{color:#2b3710;background:radial-gradient(110% 90% at 26% 12%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.1) 30%,transparent 52%),linear-gradient(150deg,#eef3c9 0%,#cfdc8f 40%,#9fb45b 76%,#78913d 100%);border-color:rgba(236,244,200,.6)}
.bf-card--state-completed .bf-card__trailing{color:#c9da93}
.bf-card--state-loading{cursor:progress}
.bf-card--state-loading::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,236,190,.10) 50%,transparent 70%);background-size:240% 100%;animation:bf-shimmer 1.5s linear infinite}
@keyframes bf-shimmer{from{background-position:240% 0}to{background-position:-240% 0}}
.bf-card__spinner{width:72%;height:72%;border-radius:50%;border:2px solid rgba(255,214,140,.28);border-top-color:#ffcf6e;animation:bf-spin .8s linear infinite}
@keyframes bf-spin{to{transform:rotate(360deg)}}
.bf-card__badge{position:absolute;top:-6px;right:-6px;z-index:3;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:#2a1400;background:linear-gradient(150deg,#ffe38f,#ffb223);border:2px solid #120d08;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.bf-card__badge--warning{background:linear-gradient(150deg,#ffb783,#e5561a);color:#2a0c00}
.bf-card__badge--completed{background:linear-gradient(150deg,#dcebab,#8fae4c);color:#1f2d08}
@media(max-width:640px){.bf-card{--bf-glow-alpha:.22}}
@media(prefers-reduced-motion:reduce){.bf-card,.bf-card__trailing{transition:none}.bf-card--state-loading::after,.bf-card__spinner{animation:none}}

/* =====================================================================
   Hero
   ===================================================================== */
.bf-hero{
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(296px,332px);align-items:center;
  column-gap:clamp(28px,3vw,44px);min-height:clamp(420px,34vw,470px);margin:14px 0 26px;
  padding:48px clamp(36px,3.6vw,52px);border-radius:26px;color:#f5efe4;
  background:#070605 url('/hero-banner-bg.jpg') 72% 38%/cover no-repeat;
  box-shadow:0 24px 60px -24px rgba(40,24,6,.55),inset 0 0 0 1px rgba(255,190,90,.07);
}
.bf-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,5,4,.9) 0%,rgba(6,5,4,.72) 22%,rgba(6,5,4,.3) 46%,rgba(6,5,4,.04) 70%,rgba(6,5,4,0) 100%),
             linear-gradient(0deg,rgba(6,5,4,.3) 0%,rgba(6,5,4,0) 36%)}

.bf-hero__logo{position:relative;width:clamp(196px,16.4vw,240px);aspect-ratio:1;border-radius:50%;flex:none;
  box-shadow:0 0 26px 0 rgba(255,136,24,.44),0 0 140px 0 rgba(255,120,10,.18)}
.bf-hero__logo::before{content:"";position:absolute;inset:-4px;border-radius:50%;padding:3px;pointer-events:none;
  background:conic-gradient(from 200deg,#ffe3a6 0deg,#ffab45 45deg,#d56a06 110deg,#8c4300 175deg,#d97008 235deg,#ffb04a 295deg,#ffe3a6 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(255,160,50,.95)) drop-shadow(0 0 14px rgba(255,130,20,.55))}
.bf-hero__logo::after{content:"";position:absolute;inset:-18%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(38% 30% at 22% 20%,rgba(255,176,70,.28),transparent 70%),radial-gradient(40% 26% at 74% 88%,rgba(255,140,30,.22),transparent 70%)}
.bf-hero__logo img{display:block;width:100%;height:100%;border-radius:50%;user-select:none}

.bf-hero__copy{min-width:0}
.bf-hero__eyebrow{margin:0 0 18px;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.22em;color:#e0ae62}
.bf-hero__title{margin:0;font-family:var(--bf-serif);font-weight:400;font-size:clamp(50px,5vw,74px);line-height:1.02;letter-spacing:-.014em;color:#f7f0e4;text-wrap:balance}
.bf-hero__title[data-long]{font-size:clamp(44px,4.15vw,62px)}
.bf-hero__name{background:linear-gradient(96deg,#c78a3c 0%,#f1c887 50%,#d79c52 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-hero__spark{display:inline-block;margin-left:.26em;font-family:system-ui,sans-serif;font-size:.42em;line-height:1;vertical-align:.42em;color:#eaae52;text-shadow:0 0 16px rgba(255,170,60,.6)}
.bf-hero__lede{margin:20px 0 0;max-width:52ch;font-size:18px;line-height:1.55;color:#cdc4b5}
.bf-hero__status{margin:22px 0 0;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:400;color:#ddd6c8}
.bf-hero__status i{width:8px;height:8px;border-radius:50%;background:#5fd07b;box-shadow:0 0 0 4px rgba(95,208,123,.16),0 0 10px rgba(95,208,123,.5)}
.bf-hero__status[data-state="off"] i{background:#f0b44a;box-shadow:0 0 0 4px rgba(240,180,74,.16)}
.bf-hero__card.bf-card{--bf-glow-alpha:.3}

/* Tablet: logo + copy share the first row, card takes a full second row. */
@media(max-width:1179px){
  .bf-hero{grid-template-columns:auto minmax(0,1fr);row-gap:28px;min-height:0;padding:44px 40px}
  .bf-hero__logo{width:clamp(150px,19vw,200px);grid-row:span 2;align-self:center}
  .bf-hero__title{font-size:clamp(42px,5.8vw,60px)}
  .bf-hero__title[data-long]{font-size:clamp(38px,5vw,54px)}
  .bf-hero__lede{font-size:17px}
  .bf-hero__card.bf-card{grid-column:2;justify-self:start;width:100%;max-width:440px}
}
/* Phone: logo, copy, status, full-width card. */
@media(max-width:640px){
  .bf-hero{grid-template-columns:minmax(0,1fr);row-gap:24px;padding:28px 22px 24px;border-radius:22px;margin-top:8px;
    background-position:62% 30%}
  .bf-hero::before{background:linear-gradient(180deg,rgba(6,5,4,.55) 0%,rgba(6,5,4,.86) 55%,rgba(6,5,4,.94) 100%)}
  .bf-hero__logo{width:112px;box-shadow:0 0 18px 0 rgba(255,128,20,.34),0 0 70px 0 rgba(255,120,10,.12)}
  .bf-hero__logo::before{inset:-5px;padding:2px}
  .bf-hero__eyebrow{font-size:12px;margin-bottom:12px}
  .bf-hero__logo{grid-row:auto}
  .bf-hero__title,.bf-hero__title[data-long]{font-size:clamp(34px,10.5vw,44px)}
  .bf-hero__lede{font-size:16px;margin-top:14px}
  .bf-hero__card.bf-card{grid-column:1;max-width:none;--bf-icon-size:48px;--bf-icon-radius:12px;--bf-pad-x:16px;--bf-gap:14px;--bf-title-size:17px;--bf-subtitle-size:13.5px;--bf-trail:18px}
  .bf-hero__status{font-size:14px;margin-top:16px}
  .bf-hero__card.bf-card{--bf-glow-alpha:.2}
}
@media(prefers-contrast:more){
  .bf-hero::before{background:rgba(6,5,4,.9)}
  .bf-hero p,.bf-hero__eyebrow,.bf-hero__lede,.bf-hero__status{color:#fff6e8!important}
}
@media(forced-colors:active){.bf-hero__name{color:CanvasText;background:none}}

/* =====================================================================
   Needs-attention row + module card
   ===================================================================== */
.bf-attention{margin:0 0 26px}
.bf-attention__head{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:12px;font-weight:650;letter-spacing:.18em;color:#7e6845}
.bf-attention__count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums;color:#6b4300;background:#fbe7bf;border:1px solid #efd29a}
.bf-attention__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
/* On the cream page (outside the dark hero) a black drop shadow reads as mud -- use a warm, lighter lift. */
.bf-attention .bf-card,.dashboard-document-card.bf-card{box-shadow:0 10px 24px -8px rgba(92,56,10,.32),0 0 16px rgba(255,150,20,calc(var(--bf-glow-alpha) * .5)),inset 0 1px 0 rgba(255,236,176,.14)}
@media(hover:hover){.bf-attention .bf-card:hover:not(.is-disabled):not(:disabled),.dashboard-document-card.bf-card:hover:not(.is-disabled):not(:disabled){box-shadow:0 16px 32px -10px rgba(92,56,10,.4),0 0 22px rgba(255,150,20,calc(var(--bf-glow-alpha) * .9)),inset 0 1px 0 rgba(255,240,190,.2)}}
@media(max-width:640px){
  .bf-attention .bf-card{--bf-icon-size:42px;--bf-pad-x:16px;--bf-gap:12px}
  .dashboard-document-card.bf-card{--bf-icon-size:46px;--bf-icon-radius:12px;--bf-pad-x:16px;--bf-gap:14px;--bf-title-size:16px;--bf-subtitle-size:13px;--bf-trail:18px;min-height:84px}
  .dashboard-document-card .bf-card__subtitle{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.dashboard-document-card.bf-card{min-height:103px;height:100%}