/* SVISJ asset pack, selective integration layer. Loaded after app.css and blackforge.css.
   Adopted: hero scenes 49/50 (Invoices, Vakta), accent orbs 11-16 (via <Orb> small/tiny),
   icons 31/32/38 (Icon.jsx), timeline card language 28/29 and the Copilot grain/sparkfield/
   amber-edge layers 41/43/48 -- recreated in CSS wherever the pack file is a picture of a
   control or card. Not adopted: the pre-lightning sparkle logos/app icons 01-06, navy-baked
   Copilot art 18/30/42, cool-tone glows 45-47, and the 21-27 control screenshots. */

/* ---------- Art hero (Invoices, Vakta) ---------- */
.art-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42%);align-items:center;
  min-height:0;margin:8px 0 24px;padding:30px 0 30px 46px;border-radius:26px;border:1px solid #eee4cf;
  background:radial-gradient(ellipse at 78% 40%,rgba(243,222,172,.34),transparent 58%),linear-gradient(180deg,#fffdf8,#fbf7ee)}
.art-hero>.hero-ribbon{z-index:-1;opacity:.3;background-position:72% 64%;background-size:115% auto}
.art-hero-copy{position:relative;min-width:0}
.art-hero-copy .eyebrow{margin-bottom:14px}
.art-hero-copy h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(32px,3.1vw,42px);line-height:1.12;letter-spacing:-.02em;color:#373b32;text-wrap:balance}
.art-hero-copy>p{margin-top:14px;max-width:46ch;font-size:15px;line-height:1.6;color:#6d6c5f}
.art-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.art-hero>.orb.showcase{position:relative;width:100%;height:236px;align-self:stretch}
.art-hero .scene-orb img{width:118%;filter:drop-shadow(0 14px 24px rgba(214,150,40,.12))}
@media(max-width:900px){
  .art-hero{grid-template-columns:minmax(0,1fr) 40%;padding:30px 0 28px 30px;min-height:250px}
  .art-hero>.orb.showcase{height:210px}
  .art-hero .scene-orb img{width:140%}
}
@media(max-width:640px){
  .art-hero{grid-template-columns:minmax(0,1fr);padding:0 22px 26px;min-height:0;border-radius:22px}
  .art-hero>.orb.showcase{order:-1;height:170px;margin:0 -22px -6px;width:calc(100% + 44px)}
  .art-hero .scene-orb img{width:118%}
  .art-hero-copy h1{font-size:clamp(28px,8.4vw,34px)}
  .art-hero-copy>p{font-size:14px}
  .art-hero-actions .button{flex:1 1 auto;justify-content:center}
}

/* ---------- Dashboard "Det som kommer": timeline cards (pack 28 current / 29 future) ---------- */
.dashboard-page .timeline-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 22px 18px}
.dashboard-page .timeline-cards::before{display:none}
.dashboard-page .timeline-card{min-height:0;padding:34px 16px 16px;border-radius:20px;border:1px solid #efe6d3;
  background:linear-gradient(180deg,#fffefa 0%,#fbf6eb 100%);box-shadow:inset 0 1px 0 #fff;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.dashboard-page .timeline-card:hover{transform:translateY(-2px);border-color:#e3cf9f}
.dashboard-page .timeline-card.next{border:1.5px solid #f1b54c;background:linear-gradient(180deg,#fffaf0 0%,#fdf0d6 100%);box-shadow:0 12px 26px -16px rgba(214,140,20,.55),inset 0 1px 0 #fff}
.dashboard-page .timeline-dot{top:14px;left:16px;width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid #e6d4a8;box-shadow:none}
.dashboard-page .timeline-card.next .timeline-dot{background:radial-gradient(circle at 35% 30%,#ffd98a,#f39a14 70%);border-color:#f5b243;box-shadow:0 0 0 4px rgba(245,170,40,.16)}
.dashboard-page .timeline-card>strong{font-size:30px;line-height:1;color:#5d5944}
.dashboard-page .timeline-month{margin-top:3px;font-size:12px;color:#746b54}
.dashboard-page .timeline-card-title{margin-top:12px;font-size:13.5px;font-weight:600;line-height:1.3;color:#3f4339}
.dashboard-page .timeline-card>small{margin-top:4px;max-width:none;font-size:12px;line-height:1.45;color:#6d6d60}
.dashboard-page .timeline-time{padding-top:12px;font-size:12px;font-weight:500;color:#727060}
.dashboard-page .timeline-card.next .timeline-time{font-weight:650;color:#936112}
@media(max-width:640px){
  .dashboard-page .timeline-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(196px,74%);gap:10px;padding:14px 18px 18px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 18px;scrollbar-width:none}
  .dashboard-page .timeline-cards::-webkit-scrollbar{display:none}
  .dashboard-page .timeline-card{scroll-snap-align:start}
}

/* ---------- Frister: the next deadline gets the "current" treatment ---------- */
.deadline-item.next{border:1.5px solid #f1b54c;background:linear-gradient(180deg,#fffaf0,#fdf2da);box-shadow:0 14px 28px -18px rgba(214,140,20,.55)}
.deadline-item.next .deadline-day strong{color:#936112}
.deadline-item.next:hover{border-color:#eba534}

/* ---------- Copilot surfaces: grain (41) + sparkfield (48) + amber edge (43, as CSS) ---------- */
.copilot{
  background:
    url('/art/48_copilot-sparkfield.webp') center/cover no-repeat,
    url('/art/41_copilot-surface-noise-dark.webp') 0 0/256px 256px repeat,
    radial-gradient(ellipse at 30% 0%,#353a3440,transparent 38%),
    #1d231f;
  box-shadow:0 13px 34px #26301d1b,inset 0 0 0 1px rgba(240,186,96,.08),inset 0 1px 0 rgba(255,214,150,.12)}
.copilot.in-drawer{box-shadow:inset 1px 0 0 rgba(240,186,96,.12)}

/* ---------- Brand on documents: the lightning mark, not the retired sparkle wordmark ---------- */
.invoice-brand.brand-mark{margin:0;gap:8px}
.invoice-brand.brand-mark img{border-radius:50%;box-shadow:none}
.invoice-brand.brand-mark b{font-size:15px;letter-spacing:.06em;color:#1f1d19}

/* ---------- Invoices: overdue nudge (had no styles at all before) ---------- */
.invoice-helper.bf-card{max-width:560px;margin-top:18px}