/* R5 Systems - device scene styles (appended per scene during integration) */

/* === scene:booking === */
/* R5 Systems - "booking" scene: Mane Studio salon diary (300x640, light UI) */

.scene-booking{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */
.scene-booking-head{
  display:flex;align-items:center;gap:10px;
  padding:20px 16px 14px;
}
.scene-booking-mark{
  width:34px;height:34px;flex:none;
  border-radius:11px;
  background:var(--obsidian);
  color:var(--volt);
  font-family:var(--font-display);
  font-size:15px;font-weight:800;
  display:grid;place-items:center;
  letter-spacing:-.02em;
}
.scene-booking-headtxt{flex:1;min-width:0;}
.scene-booking-title{
  font-family:var(--font-display);
  font-size:15px;font-weight:750;
  letter-spacing:-.01em;line-height:1.15;
}
.scene-booking-date{
  font-size:10.5px;font-weight:500;
  color:var(--ink-soft);
  margin-top:2px;
}
.scene-booking-owner{
  width:30px;height:30px;flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  color:var(--ink-soft);
  font-size:11px;font-weight:700;
  display:grid;place-items:center;
}

/* ---------- summary card ---------- */
.scene-booking-summary{
  margin:0 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px 15px;
  display:flex;align-items:flex-start;justify-content:space-between;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--ink) 5%, transparent),
    0 1px 2px  color-mix(in srgb, var(--ink) 3%, transparent);
}
.scene-booking-eyebrow{
  font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}
.scene-booking-total{
  font-family:var(--font-display);
  font-size:28px;font-weight:800;
  letter-spacing:-.02em;line-height:1.05;
  margin-top:6px;
  will-change:transform;
}
.scene-booking-count{
  display:inline-block;
  margin-top:8px;
  padding:3px 8px 3.5px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  font-size:10px;font-weight:600;
  color:var(--ink-soft);
}
.scene-booking-sumright{text-align:right;padding-top:1px;}
.scene-booking-nextlbl{
  font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);
}
.scene-booking-nexttime{
  font-size:13px;font-weight:700;
  margin-top:4px;
}

/* ---------- section row ---------- */
.scene-booking-secrow{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:18px 18px 9px;
}
.scene-booking-seclbl{
  font-family:var(--font-display);
  font-size:12px;font-weight:750;
  letter-spacing:-.005em;
}
.scene-booking-seclink{
  font-size:10.5px;font-weight:600;
  color:var(--ink-soft);
}

/* ---------- appointment cards ---------- */
.scene-booking-list{
  display:flex;flex-direction:column;gap:9px;
  padding:0 16px;
}
.scene-booking-card{
  position:relative;
  display:flex;align-items:center;gap:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  will-change:transform;
}
.scene-booking-ava{
  width:34px;height:34px;flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--slate) 16%, transparent);
  color:var(--ink-soft);
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  display:grid;place-items:center;
}
.scene-booking-ava--new{
  background:color-mix(in srgb, var(--volt) 30%, transparent);
  color:var(--ink);
}
.scene-booking-info{flex:1;min-width:0;}
.scene-booking-name{
  font-size:12.5px;font-weight:650;
  line-height:1.2;
}
.scene-booking-svc{
  font-size:10.5px;font-weight:500;
  color:var(--ink-soft);
  margin-top:2.5px;
}
.scene-booking-side{text-align:right;flex:none;}
.scene-booking-time{
  font-size:12px;font-weight:700;
  line-height:1.2;
}
.scene-booking-status{
  display:flex;align-items:center;justify-content:flex-end;gap:3px;
  margin-top:3.5px;
  font-size:9.5px;font-weight:600;
  color:var(--ink-soft);
}
.scene-booking-status svg{width:9px;height:9px;}

/* ---------- new request card ---------- */
.scene-booking-hl{
  position:absolute;inset:-1px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--volt) 75%, transparent);
  background:color-mix(in srgb, var(--volt) 8%, transparent);
  box-shadow:0 10px 24px color-mix(in srgb, var(--volt-dim) 28%, transparent);
  opacity:0; /* transient highlight: shown mid-timeline only */
}
.scene-booking-hl::before{
  content:"";
  position:absolute;left:-1px;top:11px;bottom:11px;width:3px;
  border-radius:3px;
  background:var(--volt);
}
.scene-booking-slot{
  position:relative;
  height:18px;width:88px;
  margin-top:3px;
}
.scene-booking-newpill{
  position:absolute;right:0;top:1px;
  display:inline-flex;align-items:center;
  padding:3px 7px 3.5px;
  border-radius:999px;
  background:var(--volt);
  color:var(--obsidian);
  font-size:9px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
  opacity:0; /* transient: shown mid-timeline only */
  will-change:transform;
}
.scene-booking-confirmed{
  position:absolute;right:0;top:1.5px;
  display:flex;align-items:center;gap:5px;
}
.scene-booking-chkwrap{
  position:relative;
  width:15px;height:15px;flex:none;
}
.scene-booking-ring{
  position:absolute;inset:-2.5px;
  border:1.5px solid var(--volt);
  border-radius:50%;
  opacity:0; /* transient pulse */
}
.scene-booking-chk{
  position:absolute;inset:0;
  border-radius:50%;
  background:var(--volt);
  color:var(--obsidian);
  display:grid;place-items:center;
  box-shadow:0 2px 6px color-mix(in srgb, var(--volt-dim) 45%, transparent);
  will-change:transform;
}
.scene-booking-chk svg{width:9px;height:9px;}
.scene-booking-conftxt{
  font-size:9.5px;font-weight:700;
  color:var(--ink);
}

/* ---------- ghost open slot ---------- */
.scene-booking-ghost{
  border:1.2px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius:14px;
  height:38px;
  display:grid;place-items:center;
  font-size:10.5px;font-weight:600;
  color:color-mix(in srgb, var(--ink-soft) 80%, transparent);
}

/* ---------- FAB ---------- */
.scene-booking-fab{
  position:absolute;right:16px;bottom:74px;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--volt);
  color:var(--obsidian);
  display:grid;place-items:center;
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--volt-dim) 45%, transparent),
    0 2px 6px  color-mix(in srgb, var(--ink) 14%, transparent);
  will-change:transform;
}
.scene-booking-fab svg{width:20px;height:20px;}

/* ---------- bottom nav ---------- */
.scene-booking-nav{
  position:absolute;left:0;right:0;bottom:0;
  height:58px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:flex;align-items:stretch;
  padding:7px 8px 9px;
}
.scene-booking-navitem{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:color-mix(in srgb, var(--ink-soft) 85%, transparent);
}
.scene-booking-navitem svg{width:17px;height:17px;}
.scene-booking-navlbl{font-size:9px;font-weight:600;}
.scene-booking-navitem--active{color:var(--ink);position:relative;}
.scene-booking-navitem--active .scene-booking-navlbl{font-weight:700;}
.scene-booking-navitem--active::after{
  content:"";
  position:absolute;bottom:1px;left:50%;
  width:4px;height:4px;margin-left:-2px;
  border-radius:50%;
  background:var(--volt-dim);
}

/* === scene:store === */
/* R5 Systems - "store" scene: Karoo Roast Coffee Co. online store (640x400, light UI) */

.scene-store{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

/* ---------- announcement strip ---------- */
.scene-store-announce{
  height:24px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--obsidian);
  color:var(--slate);
  font-size:9px;font-weight:600;
  letter-spacing:.07em;
}
.scene-store-anndot{
  width:3px;height:3px;flex:none;
  border-radius:50%;
  background:var(--volt-dim);
}

/* ---------- header ---------- */
.scene-store-head{
  height:54px;
  display:flex;align-items:center;gap:20px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.scene-store-brand{
  display:flex;align-items:center;gap:9px;
  flex:none;
}
.scene-store-mark{
  width:28px;height:28px;flex:none;
  border-radius:9px;
  background:var(--obsidian);
  color:var(--volt);
  display:grid;place-items:center;
}
.scene-store-mark svg{width:16px;height:16px;}
.scene-store-brandname{
  font-family:var(--font-display);
  font-size:13.5px;font-weight:800;
  letter-spacing:-.01em;line-height:1.05;
}
.scene-store-brandsub{
  font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}
.scene-store-nav{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:18px;
}
.scene-store-navitem{
  position:relative;
  font-size:10.5px;font-weight:550;
  color:var(--ink-soft);
  line-height:1;
  padding:4px 0;
  will-change:transform;
}
.scene-store-navitem--active{
  color:var(--ink);font-weight:700;
}
.scene-store-navitem--active::after{
  content:"";
  position:absolute;left:50%;bottom:-3px;
  width:4px;height:4px;margin-left:-2px;
  border-radius:50%;
  background:var(--volt-dim);
}
.scene-store-cart{
  position:relative;
  width:34px;height:34px;flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  color:var(--ink);
  display:grid;place-items:center;
  will-change:transform;
}
.scene-store-cart svg{width:17px;height:17px;margin-top:1px;}
.scene-store-badge{
  position:absolute;top:-3px;right:-4px;
  min-width:15px;height:15px;
  padding:0 3px;
  border-radius:999px;
  display:grid;place-items:center;
  font-size:9px;font-weight:800;line-height:1;
  will-change:transform;
}
.scene-store-badge--zero{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-soft);
  opacity:0; /* start state; JS reveals (end state shows "1") */
}
.scene-store-badge--one{
  background:var(--volt);
  color:var(--obsidian);
  box-shadow:0 3px 8px color-mix(in srgb, var(--volt-dim) 55%, transparent);
}
.scene-store-cartring{
  position:absolute;top:-3px;right:-4px;
  width:15px;height:15px;
  border:1.5px solid var(--volt);
  border-radius:50%;
  opacity:0; /* transient pulse: shown mid-timeline only */
}

/* ---------- section row ---------- */
.scene-store-secrow{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:17px 26px 11px;
}
.scene-store-seclbl{
  font-family:var(--font-display);
  font-size:13.5px;font-weight:750;
  letter-spacing:-.008em;
}
.scene-store-seclink{
  font-size:10px;font-weight:600;
  color:var(--ink-soft);
}

/* ---------- product grid ---------- */
.scene-store-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  padding:0 26px;
}
.scene-store-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px 13px;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--ink) 4%, transparent),
    0 1px 2px  color-mix(in srgb, var(--ink) 3%, transparent);
  will-change:transform;
}
.scene-store-tile{
  position:relative;
  height:138px;
  border-radius:11px;
  background:color-mix(in srgb, var(--ink) 4%, var(--white));
  display:grid;place-items:center;
  overflow:hidden;
}
.scene-store-tag{
  position:absolute;top:8px;left:8px;
  padding:3px 7px 3.5px;
  border-radius:999px;
  font-size:9px;font-weight:700;
  letter-spacing:.04em;
  line-height:1;
}
.scene-store-tag--dark{
  background:var(--obsidian);
  color:var(--white);
}
.scene-store-tag--light{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-soft);
}

/* ---------- CSS-drawn coffee bags ---------- */
.scene-store-bagwrap{
  position:relative;
  width:60px;height:84px;
}
.scene-store-bagshadow{
  position:absolute;left:50%;bottom:-2px;
  width:48px;height:8px;margin-left:-24px;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 14%, transparent);
  filter:blur(3px);
}
.scene-store-bag{
  position:absolute;left:0;top:0;
  width:60px;height:80px;
  border-radius:7px 7px 12px 12px;
}
.scene-store-bag::after{ /* bottom gusset shading */
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:12px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(to top, color-mix(in srgb, var(--ink) 14%, transparent), transparent);
}
.scene-store-bagfold{
  position:absolute;top:0;left:0;right:0;height:13px;
  border-radius:7px 7px 3px 3px;
}
.scene-store-bagfold::after{ /* tin-tie */
  content:"";
  position:absolute;left:50%;top:5px;
  width:26px;height:3px;margin-left:-13px;
  border-radius:2px;
}
.scene-store-baglabel{
  position:absolute;left:50%;top:31px;
  width:40px;height:28px;margin-left:-20px;
  border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.scene-store-bagdot{width:7px;height:7px;border-radius:50%;}
.scene-store-bagline{height:2.5px;border-radius:2px;}
.scene-store-bagline--a{width:22px;}
.scene-store-bagline--b{width:13px;}

/* charcoal bag */
.scene-store-bag--charcoal{
  background:linear-gradient(160deg, var(--coal3), var(--charcoal) 52%, var(--obsidian));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 12%, transparent);
}
.scene-store-bag--charcoal .scene-store-bagfold{
  background:color-mix(in srgb, var(--white) 9%, var(--charcoal));
  box-shadow:0 1.5px 3px color-mix(in srgb, var(--obsidian) 55%, transparent);
}
.scene-store-bag--charcoal .scene-store-bagfold::after{background:color-mix(in srgb, var(--white) 22%, var(--charcoal));}
.scene-store-bag--charcoal .scene-store-baglabel{background:var(--paper);}
.scene-store-bag--charcoal .scene-store-bagdot{background:var(--charcoal);}
.scene-store-bag--charcoal .scene-store-bagline{background:color-mix(in srgb, var(--ink) 28%, transparent);}

/* white bag */
.scene-store-bag--white{
  background:linear-gradient(160deg, var(--paper), color-mix(in srgb, var(--ink) 6%, var(--paper)));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--paper);
}
.scene-store-bag--white .scene-store-bagfold{
  background:color-mix(in srgb, var(--ink) 5%, var(--paper));
  box-shadow:0 1.5px 3px color-mix(in srgb, var(--ink) 10%, transparent);
}
.scene-store-bag--white .scene-store-bagfold::after{background:color-mix(in srgb, var(--ink) 16%, var(--paper));}
.scene-store-bag--white .scene-store-baglabel{background:var(--obsidian);}
.scene-store-bag--white .scene-store-bagdot{background:var(--volt);}
.scene-store-bag--white .scene-store-bagline{background:color-mix(in srgb, var(--white) 45%, transparent);}

/* volt bag */
.scene-store-bag--volt{
  background:linear-gradient(160deg, color-mix(in srgb, var(--white) 18%, var(--volt)), var(--volt) 45%, var(--volt-dim));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 45%, transparent);
}
.scene-store-bag--volt .scene-store-bagfold{
  background:color-mix(in srgb, var(--obsidian) 10%, var(--volt));
  box-shadow:0 1.5px 3px color-mix(in srgb, var(--volt-dim) 70%, transparent);
}
.scene-store-bag--volt .scene-store-bagfold::after{background:color-mix(in srgb, var(--obsidian) 30%, var(--volt));}
.scene-store-bag--volt .scene-store-baglabel{background:var(--obsidian);}
.scene-store-bag--volt .scene-store-bagdot{background:var(--volt);}
.scene-store-bag--volt .scene-store-bagline{background:color-mix(in srgb, var(--white) 45%, transparent);}

/* ---------- product text + price row ---------- */
.scene-store-pname{
  margin-top:11px;
  font-size:12px;font-weight:700;
  letter-spacing:-.005em;line-height:1.2;
}
.scene-store-pnote{
  margin-top:3px;
  font-size:9.5px;font-weight:500;
  color:var(--ink-soft);
  white-space:nowrap;
}
.scene-store-prow{
  margin-top:10px;
  display:flex;align-items:center;justify-content:space-between;
}
.scene-store-price{
  font-size:12.5px;font-weight:750;
  letter-spacing:-.01em;
}
.scene-store-btn{
  position:relative;
  padding:6px 11px 7px;
  border-radius:999px;
  background:var(--obsidian);
  color:var(--white);
  font-size:9.5px;font-weight:700;
  line-height:1;
  will-change:transform;
}
.scene-store-btnlbl{
  display:block;
  opacity:0; /* start state; JS reveals ("Added" is the end state) */
}
.scene-store-btnadded{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:9.5px;font-weight:700;
}
.scene-store-btnadded svg{width:9px;height:9px;color:var(--volt);}

/* ---------- confirmation bar ---------- */
.scene-store-confirm{
  position:absolute;top:90px;left:0;right:0;
  margin:0 auto;
  width:max-content;
  z-index:5;
  display:flex;align-items:center;gap:9px;
  padding:6px 7px 6px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--obsidian) 94%, transparent);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--ink) 30%, transparent),
    0 2px 6px  color-mix(in srgb, var(--ink) 18%, transparent);
  will-change:transform;
}
.scene-store-cchk{
  width:18px;height:18px;flex:none;
  border-radius:50%;
  background:var(--volt);
  color:var(--obsidian);
  display:grid;place-items:center;
  will-change:transform;
}
.scene-store-cchk svg{width:10px;height:10px;}
.scene-store-ctxt{
  font-size:10.5px;font-weight:500;
  color:color-mix(in srgb, var(--white) 78%, transparent);
  white-space:nowrap;
}
.scene-store-ctxt strong{font-weight:700;color:var(--white);}
.scene-store-cbtn{
  padding:5px 10px 6px;
  border-radius:999px;
  background:var(--volt);
  color:var(--obsidian);
  font-size:9.5px;font-weight:800;
  line-height:1;
  white-space:nowrap;
}

/* ---------- flying mini-bag chip ---------- */
.scene-store-chip{
  position:absolute;top:0;left:0;
  z-index:6;
  opacity:0; /* transient: shown mid-flight only */
  will-change:transform;
}
.scene-store-chipin{
  position:relative;
  width:24px;height:30px;
  margin:-15px 0 0 -12px;
  border-radius:4px 4px 7px 7px;
  background:linear-gradient(160deg, var(--paper), color-mix(in srgb, var(--ink) 6%, var(--paper)));
  border:1px solid var(--line);
  box-shadow:0 10px 20px color-mix(in srgb, var(--ink) 26%, transparent);
  will-change:transform;
}
.scene-store-chipfold{
  position:absolute;top:0;left:0;right:0;height:6px;
  border-radius:4px 4px 2px 2px;
  background:color-mix(in srgb, var(--ink) 6%, var(--paper));
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}
.scene-store-chiplabel{
  position:absolute;left:50%;top:11px;
  width:14px;height:10px;margin-left:-7px;
  border-radius:2.5px;
  background:var(--obsidian);
}

/* === scene:dashboard === */
/* R5 Systems - "dashboard" scene (Mzansi Couriers · Operations, dark UI 760×430) */

.scene-dashboard{
  width:100%;height:100%;overflow:hidden;position:relative;
  display:flex;
  background:var(--charcoal);
  color:var(--white);
  font-family:var(--font-body);
  font-size:11px;line-height:1.35;
  cursor:default;user-select:none;pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

/* ============ Sidebar ============ */
.scene-dashboard-side{
  width:150px;flex:none;
  background:var(--obsidian);
  border-right:1px solid var(--line-dark);
  display:flex;flex-direction:column;
  padding:16px 12px 14px;
}
.scene-dashboard-brand{display:flex;align-items:center;gap:9px;padding:0 4px;}
.scene-dashboard-brandmark{
  width:26px;height:26px;flex:none;border-radius:8px;
  background:var(--volt);color:var(--obsidian);
  font-family:var(--font-display);font-weight:800;font-size:10.5px;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.scene-dashboard-brandname{
  display:flex;flex-direction:column;gap:1px;
  font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--white);
}
.scene-dashboard-brandname em{font-style:normal;font-family:var(--font-body);font-weight:500;font-size:9px;color:var(--slate);}

.scene-dashboard-nav{margin-top:20px;display:flex;flex-direction:column;gap:3px;}
.scene-dashboard-navitem{
  position:relative;display:flex;align-items:center;gap:9px;
  height:29px;padding:0 9px;border-radius:8px;
  color:var(--slate);font-size:10.5px;font-weight:500;
}
.scene-dashboard-navitem svg{width:14px;height:14px;flex:none;}
.scene-dashboard-navitem--active{
  background:var(--coal2);color:var(--white);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(245,246,248,.04);
}
.scene-dashboard-navbar{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:13px;border-radius:2px;background:var(--volt);
}
.scene-dashboard-navcount{
  margin-left:auto;font-weight:600;font-size:9px;color:var(--slate);
  background:var(--coal2);border:1px solid var(--line-dark);
  border-radius:999px;padding:1.5px 6px;
  font-variant-numeric:tabular-nums;
}

.scene-dashboard-user{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  padding:10px 4px 0;border-top:1px solid var(--line-dark);
}
.scene-dashboard-useravatar{
  width:24px;height:24px;flex:none;border-radius:50%;
  background:var(--coal3);color:var(--white);
  font-size:9px;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.scene-dashboard-username{display:flex;flex-direction:column;gap:1px;font-size:10px;font-weight:600;color:var(--white);}
.scene-dashboard-username em{font-style:normal;font-weight:500;font-size:9px;color:var(--slate);}

/* ============ Main column ============ */
.scene-dashboard-main{
  flex:1;min-width:0;display:flex;flex-direction:column;
  padding:14px 16px;
}

/* Header */
.scene-dashboard-head{display:flex;align-items:center;justify-content:space-between;}
.scene-dashboard-title h2{
  margin:0;font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.01em;color:var(--white);
}
.scene-dashboard-title p{margin:2px 0 0;font-size:9.5px;color:var(--slate);}
.scene-dashboard-headtools{display:flex;align-items:center;gap:8px;}
.scene-dashboard-search{
  display:flex;align-items:center;gap:6px;
  height:26px;padding:0 8px;border-radius:8px;
  background:var(--coal2);border:1px solid var(--line-dark);
  color:var(--slate);font-size:9.5px;
}
.scene-dashboard-search svg{width:11px;height:11px;}
.scene-dashboard-search kbd{
  font-family:var(--font-body);font-size:8.5px;letter-spacing:.04em;color:var(--slate);
  border:1px solid var(--line-dark);border-radius:4px;padding:1px 4px;margin-left:2px;
  background:var(--coal3);
}
.scene-dashboard-live{
  display:flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;border-radius:999px;
  background:var(--coal2);border:1px solid var(--line-dark);
  color:var(--white);font-size:9.5px;font-weight:600;
}
.scene-dashboard-live i{width:6px;height:6px;border-radius:50%;background:var(--volt);}

/* KPI tiles */
.scene-dashboard-kpis{display:flex;gap:12px;margin-top:12px;}
.scene-dashboard-kpi{
  position:relative;
  flex:1;min-width:0;height:82px;
  background:var(--coal2);border:1px solid var(--line-dark);
  border-radius:14px;padding:12px 14px 11px;
  box-shadow:inset 0 1px 0 rgba(245,246,248,.04);
  display:flex;flex-direction:column;
}
.scene-dashboard-kpilabel{font-size:9.5px;font-weight:500;color:var(--slate);}
.scene-dashboard-kpirow{
  margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
}
.scene-dashboard-kpicol{display:flex;flex-direction:column;gap:3px;min-width:0;}
.scene-dashboard-kpivalue{
  font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1;
  letter-spacing:-.01em;color:var(--white);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.scene-dashboard-kpidelta{font-size:9px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Sparkline (inside first KPI tile, clear of the delta text row) */
.scene-dashboard-sparkwrap{position:absolute;right:13px;bottom:26px;width:66px;height:30px;}
.scene-dashboard-spark{display:block;overflow:visible;}
.scene-dashboard-sparkline{
  stroke:var(--volt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;
}
.scene-dashboard-sparkdot{
  position:absolute;left:57px;top:1px;      /* centres on polyline end (61,5) */
  width:8px;height:8px;border-radius:50%;
  background:var(--volt);border:2px solid var(--coal2);
}

/* ============ Bottom row ============ */
.scene-dashboard-bottom{flex:1;min-height:0;display:flex;gap:12px;margin-top:12px;}
.scene-dashboard-card{
  background:var(--coal2);border:1px solid var(--line-dark);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(245,246,248,.04);
  display:flex;flex-direction:column;
}
.scene-dashboard-cardhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 0;
}
.scene-dashboard-cardhead h3{margin:0;font-size:11px;font-weight:600;color:var(--white);letter-spacing:-.005em;}
.scene-dashboard-cardhead > span:not(.scene-dashboard-delayed){
  font-size:9.5px;color:var(--slate);font-variant-numeric:tabular-nums;
}

/* Bar chart card */
.scene-dashboard-chartcard{width:252px;flex:none;}
.scene-dashboard-plotarea{position:relative;flex:1;min-height:0;margin:10px 14px 10px;}
.scene-dashboard-tick{
  position:absolute;left:0;right:0;height:1px;background:rgba(245,246,248,.05);
}
.scene-dashboard-tick em{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:9px;color:var(--slate);opacity:.75;
  font-variant-numeric:tabular-nums;background:var(--coal2);padding-right:5px;
}
/* baseline sits above the 13px label band; ticks scale to the 88%-max plot */
.scene-dashboard-tick--1{bottom:calc(13px + (100% - 13px) * .822);}
.scene-dashboard-tick--2{bottom:calc(13px + (100% - 13px) * .411);}
.scene-dashboard-baseline{
  position:absolute;left:0;right:0;bottom:13px;height:1px;
  background:rgba(245,246,248,.12);
}
.scene-dashboard-plot{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:flex-end;gap:2px;
  padding-bottom:13px;box-sizing:border-box;
}
.scene-dashboard-barcol{
  position:relative;width:24px;flex:none;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
}
.scene-dashboard-bar{
  display:block;width:100%;border-radius:4px 4px 0 0;
  background:rgba(138,149,165,.26);
}
.scene-dashboard-bar--today{background:var(--volt);}
.scene-dashboard-barcol > span{
  position:absolute;bottom:-13px;left:0;right:0;text-align:center;
  font-size:9px;color:var(--slate);
}
.scene-dashboard-barcol--today > span{color:var(--white);font-weight:600;}
.scene-dashboard-caplabel{
  position:absolute;bottom:calc(88% + 5px);left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:600;color:var(--white);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Live orders card */
.scene-dashboard-orderscard{flex:1;min-width:0;}
.scene-dashboard-delayed{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--slate);}
.scene-dashboard-delayed i{width:5px;height:5px;border-radius:50%;background:var(--red);}
.scene-dashboard-orders{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 14px 0;}
.scene-dashboard-order{
  flex:1;display:flex;align-items:center;gap:9px;
  border-bottom:1px solid rgba(245,246,248,.055);
}
.scene-dashboard-order:last-child{border-bottom:0;}
.scene-dashboard-orderavatar{
  width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--coal3);color:var(--white);
  font-size:9px;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
}
.scene-dashboard-orderwho{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:10.5px;font-weight:600;color:var(--white);
}
.scene-dashboard-orderwho em{
  font-style:normal;font-weight:400;font-size:9px;color:var(--slate);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.scene-dashboard-chipslot{position:relative;margin-left:auto;flex:none;width:76px;height:20px;}
.scene-dashboard-chip{
  position:absolute;right:0;top:0;height:20px;padding:0 9px;border-radius:999px;
  display:flex;align-items:center;
  font-size:9px;font-weight:600;letter-spacing:.01em;
  background:var(--coal3);border:1px solid var(--line-dark);color:var(--slate);
  white-space:nowrap;
}
.scene-dashboard-chip--done{
  background:var(--volt);border-color:var(--volt);color:var(--obsidian);font-weight:700;
}
/* static (no-JS) view shows the finished story: Delivered on top, En route hidden */
.scene-dashboard-chip--enroute{opacity:0;visibility:hidden;}
.scene-dashboard-orderfoot{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px 10px;border-top:1px solid rgba(245,246,248,.055);
  font-size:9px;color:var(--slate);font-variant-numeric:tabular-nums;
}

/* === scene:portal === */
/* R5 Systems - "portal" scene: Atlas Plumbing & Gas client portal
   Two roots: .scene-portal-desktop (600x380) + .scene-portal-phone (240x510), light UI. */

/* ============================== shared ============================== */

.scene-portal-desktop,
.scene-portal-phone{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

/* status chips (shared between the two screens) */
.scene-portal-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px 3.5px;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  color:var(--ink-soft);
  font-size:9px;font-weight:650;
  white-space:nowrap;
  will-change:transform;
}
.scene-portal-chipdot{
  width:4.5px;height:4.5px;border-radius:50%;
  background:var(--volt-dim);
}
.scene-portal-chip--done svg{width:8px;height:8px;}
.scene-portal-chip--ok{
  position:relative;
  background:var(--volt);
  color:var(--obsidian);
  font-weight:750;
  box-shadow:0 3px 8px color-mix(in srgb, var(--volt-dim) 40%, transparent);
}
.scene-portal-chip--ok svg{width:8px;height:8px;}
.scene-portal-chipring{
  position:absolute;inset:-3px;
  border-radius:999px;
  border:1.5px solid var(--volt);
  opacity:0; /* transient pulse: shown mid-timeline only */
}
.scene-portal-chip--wait{
  opacity:0; /* pre-approval state: timeline rewinds it visible */
}

/* stacked chip pair (waiting -> approved crossfade) */
.scene-portal-chipstack{
  position:relative;
  height:19px;margin-top:8px;
}
.scene-portal-chipstack .scene-portal-chip{
  position:absolute;left:0;top:0;
}
.scene-portal-chipstack--right .scene-portal-chip{
  left:auto;right:0;
}

/* ============================== desktop ============================== */

.scene-portal-desktop{display:flex;}

/* ----- sidebar (obsidian band) ----- */
.scene-portal-d-side{
  width:150px;flex:none;
  background:var(--obsidian);
  color:var(--white);
  display:flex;flex-direction:column;
  padding:14px 10px 12px;
  will-change:transform;
}
.scene-portal-d-brand{
  display:flex;align-items:center;gap:8px;
  padding:0 4px 14px;
}
.scene-portal-d-mark{
  width:26px;height:26px;flex:none;
  border-radius:8px;
  background:var(--volt);
  color:var(--obsidian);
  font-family:var(--font-display);
  font-size:13px;font-weight:800;
  display:grid;place-items:center;
}
.scene-portal-d-brandname{
  font-family:var(--font-display);
  font-size:9.5px;font-weight:750;
  line-height:1.2;letter-spacing:-.005em;
}
.scene-portal-d-brandsub{
  font-size:9px;font-weight:500;
  color:var(--slate);
  margin-top:1px;
}
.scene-portal-d-nav{
  display:flex;flex-direction:column;gap:2px;
  margin-top:2px;
  border-top:1px solid var(--line-dark);
  padding-top:10px;
}
.scene-portal-d-navitem{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;
  border-radius:8px;
  color:var(--slate);
  font-size:10px;font-weight:600;
  will-change:transform;
}
.scene-portal-d-navitem svg{width:12px;height:12px;flex:none;}
.scene-portal-d-navitem--active{
  background:var(--coal2);
  color:var(--white);
}
.scene-portal-d-navitem--active::before{
  content:"";
  position:absolute;left:2.5px;top:7px;bottom:7px;width:2.5px;
  border-radius:2px;
  background:var(--volt);
}
.scene-portal-d-navnum{
  margin-left:auto;
  font-size:9px;font-weight:700;
  color:var(--slate);
}
.scene-portal-d-navnum--due{
  background:var(--coal2);
  color:var(--white);
  padding:1px 5.5px 1.5px;
  border-radius:999px;
}
.scene-portal-d-user{
  margin-top:auto;
  display:flex;align-items:center;gap:8px;
  border-top:1px solid var(--line-dark);
  padding:10px 4px 2px;
}
.scene-portal-d-ava{
  width:24px;height:24px;flex:none;
  border-radius:50%;
  background:var(--coal3);
  color:var(--white);
  font-size:9px;font-weight:700;letter-spacing:.02em;
  display:grid;place-items:center;
}
.scene-portal-d-username{font-size:10px;font-weight:650;line-height:1.2;}
.scene-portal-d-userrole{font-size:9px;color:var(--slate);margin-top:1px;}

/* ----- main column ----- */
.scene-portal-d-main{
  flex:1;min-width:0;
  position:relative;
  display:flex;flex-direction:column;
  padding:14px 16px;
}
.scene-portal-d-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:0 1px 12px;
}
.scene-portal-d-title{
  font-family:var(--font-display);
  font-size:15px;font-weight:775;
  letter-spacing:-.015em;line-height:1.15;
}
.scene-portal-d-date{
  font-size:9.5px;font-weight:500;
  color:var(--ink-soft);
  margin-top:3px;
}
.scene-portal-d-sync{
  display:flex;align-items:center;gap:5px;
  margin-top:1px;
  padding:4px 9px 4.5px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  font-size:9px;font-weight:650;
  color:var(--ink-soft);
}
.scene-portal-d-syncdot{
  width:5px;height:5px;border-radius:50%;
  background:var(--volt-dim);
  will-change:transform;
}

.scene-portal-d-cols{
  flex:1;min-height:0;
  display:flex;gap:12px;
}
.scene-portal-d-colL{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:10px;
}

/* stat tiles */
.scene-portal-d-stats{display:flex;gap:10px;}
.scene-portal-d-stat{
  flex:1;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 11px 9px;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent);
  will-change:transform;
}
.scene-portal-d-statlbl{
  font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
}
.scene-portal-d-statval{
  font-family:var(--font-display);
  font-size:14px;font-weight:800;
  letter-spacing:-.01em;
  margin-top:3px;
}

/* jobs card */
.scene-portal-d-jobs{
  flex:1;min-height:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px 4px;
  display:flex;flex-direction:column;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--ink) 4%, transparent),
    0 1px 2px  color-mix(in srgb, var(--ink) 3%, transparent);
  will-change:transform;
}
.scene-portal-d-cardhead{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:6px;
}
.scene-portal-d-cardtitle{
  font-family:var(--font-display);
  font-size:11px;font-weight:750;
  letter-spacing:-.005em;
}
.scene-portal-d-cardlink{
  font-size:9px;font-weight:600;
  color:var(--ink-soft);
}
.scene-portal-d-jobrow{
  flex:1;
  display:flex;align-items:center;gap:9px;
  border-top:1px solid var(--line);
  will-change:transform;
}
.scene-portal-d-cardhead + .scene-portal-d-jobrow{border-top:0;}
.scene-portal-d-jobico{
  width:26px;height:26px;flex:none;
  border-radius:8px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  color:var(--ink-soft);
  display:grid;place-items:center;
}
.scene-portal-d-jobico svg{width:13px;height:13px;}
.scene-portal-d-jobinfo{flex:1;min-width:0;}
.scene-portal-d-jobname{
  font-size:10.5px;font-weight:650;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scene-portal-d-jobsub{
  font-size:9px;font-weight:500;
  color:var(--ink-soft);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* next visit strip */
.scene-portal-d-visit{
  display:flex;align-items:center;gap:9px;
  border:1.2px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius:12px;
  padding:8px 12px;
  will-change:transform;
}
.scene-portal-d-visitico{
  width:22px;height:22px;flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  color:var(--ink-soft);
  display:grid;place-items:center;
}
.scene-portal-d-visitico svg{width:12px;height:12px;}
.scene-portal-d-visitmain{font-size:10px;font-weight:650;line-height:1.2;}
.scene-portal-d-visitsub{font-size:9px;color:var(--ink-soft);margin-top:2px;}

/* invoice panel */
.scene-portal-d-inv{
  width:172px;flex:none;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 12px 11px;
  display:flex;flex-direction:column;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--ink) 4%, transparent),
    0 1px 2px  color-mix(in srgb, var(--ink) 3%, transparent);
  will-change:transform;
}
.scene-portal-d-due{
  position:relative;
  height:12px;min-width:56px;
}
.scene-portal-d-due1,
.scene-portal-d-due0{
  position:absolute;right:0;top:0;
  display:flex;align-items:center;gap:4px;
  font-size:9px;font-weight:650;
  color:var(--ink-soft);
  white-space:nowrap;
}
.scene-portal-d-due1{opacity:0;} /* pre-approval state: timeline rewinds it visible */
.scene-portal-d-duedot{
  width:4px;height:4px;border-radius:50%;
  background:var(--red);
}
.scene-portal-d-invno{
  display:flex;align-items:center;gap:5px;
  margin-top:6px;
  font-size:10.5px;font-weight:700;
}
.scene-portal-d-invno svg{width:11px;height:11px;color:var(--ink-soft);}
.scene-portal-d-invdesc{
  font-size:9px;color:var(--ink-soft);
  margin-top:2.5px;
}
.scene-portal-d-amount{
  font-family:var(--font-display);
  font-size:21px;font-weight:800;
  letter-spacing:-.02em;line-height:1;
  margin-top:8px;
}
.scene-portal-d-btnwrap{
  position:relative;
  height:28px;margin-top:12px;
}
.scene-portal-d-btn{
  position:absolute;inset:0;
  border-radius:9px;
  background:var(--volt);
  color:var(--obsidian);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 6px 14px color-mix(in srgb, var(--volt-dim) 35%, transparent);
  opacity:0; /* pre-approval state: timeline rewinds it visible */
  will-change:transform;
}
.scene-portal-d-btnripple{
  position:absolute;inset:-5px;
  border-radius:13px;
  border:1.5px solid var(--volt-dim);
  opacity:0; /* transient pulse: shown mid-timeline only */
}
.scene-portal-d-sent{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:9.5px;font-weight:650;
  color:var(--ink-soft);
}
.scene-portal-d-sentchk{
  width:13px;height:13px;flex:none;
  border-radius:50%;
  background:var(--volt);
  color:var(--obsidian);
  display:grid;place-items:center;
}
.scene-portal-d-sentchk svg{width:7px;height:7px;}
.scene-portal-d-spacer{flex:1;}
.scene-portal-d-paidrow{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:8px;
  font-size:9px;font-weight:550;
  color:var(--ink-soft);
}
.scene-portal-d-paidtag{
  font-size:9px;font-weight:700;
  background:color-mix(in srgb, var(--ink) 6%, transparent);
  padding:2px 6px 2.5px;
  border-radius:999px;
}

/* the "hand" that approves */
.scene-portal-d-cursor{
  position:absolute;left:0;top:0;
  width:15px;height:15px;
  z-index:5;
  opacity:0; /* transient: shown mid-timeline only */
  filter:drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 30%, transparent));
  will-change:transform;
}
.scene-portal-d-cursor svg{width:100%;height:100%;display:block;}
.scene-portal-d-cursor path{fill:var(--paper);stroke:var(--ink);}

/* ============================== phone ============================== */

.scene-portal-phone{
  display:flex;flex-direction:column;
  padding:16px 14px 0;
}

.scene-portal-p-head{
  display:flex;align-items:center;gap:8px;
  padding:0 2px;
}
.scene-portal-p-mark{
  width:26px;height:26px;flex:none;
  border-radius:9px;
  background:var(--volt);
  color:var(--obsidian);
  font-family:var(--font-display);
  font-size:13px;font-weight:800;
  display:grid;place-items:center;
}
.scene-portal-p-brand{
  flex:1;min-width:0;
  font-family:var(--font-display);
  font-size:11px;font-weight:750;
  letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scene-portal-p-bell{
  position:relative;
  width:28px;height:28px;flex:none;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  display:grid;place-items:center;
}
.scene-portal-p-bell svg{width:13px;height:13px;}
.scene-portal-p-belldot{
  position:absolute;right:4.5px;top:4.5px;
  width:6.5px;height:6.5px;border-radius:50%;
  background:var(--volt);
  box-shadow:0 0 0 1.5px var(--paper);
  will-change:transform;
}

.scene-portal-p-greet{padding:16px 2px 0;}
.scene-portal-p-hi{
  font-family:var(--font-display);
  font-size:17px;font-weight:800;
  letter-spacing:-.02em;line-height:1.1;
}
.scene-portal-p-sub{
  font-size:9.5px;font-weight:500;
  color:var(--ink-soft);
  margin-top:3px;
}

.scene-portal-p-seclbl{
  font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:15px 2px 7px;
}

/* notification slot: ghost placeholder is replaced by the pushed card */
.scene-portal-p-notifslot{
  position:relative;
  height:56px;flex:none;
}
.scene-portal-p-ghost{
  position:absolute;inset:0;
  border:1.2px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius:14px;
  display:grid;place-items:center;
  font-size:9.5px;font-weight:600;
  color:color-mix(in srgb, var(--ink-soft) 80%, transparent);
  opacity:0; /* pre-approval state: timeline rewinds it visible */
}
.scene-portal-p-notif{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:9px;
  background:var(--paper);
  border:1px solid color-mix(in srgb, var(--volt-dim) 45%, var(--line));
  border-radius:14px;
  padding:0 11px;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--volt-dim) 20%, transparent),
    0 2px 5px  color-mix(in srgb, var(--ink) 6%, transparent);
  will-change:transform;
}
.scene-portal-p-notifpulse{
  position:absolute;inset:-4px;
  border-radius:18px;
  border:1.5px solid var(--volt);
  opacity:0; /* transient pulse: shown mid-timeline only */
}
.scene-portal-p-notifico{
  width:24px;height:24px;flex:none;
  border-radius:50%;
  background:var(--volt);
  color:var(--obsidian);
  display:grid;place-items:center;
  will-change:transform;
}
.scene-portal-p-notifico svg{width:11px;height:11px;}
.scene-portal-p-notiftxt{flex:1;min-width:0;}
.scene-portal-p-notiftitle{
  display:flex;align-items:baseline;gap:6px;
  font-size:10.5px;font-weight:700;line-height:1.2;
}
.scene-portal-p-notiftime{
  font-size:9px;font-weight:550;
  color:var(--ink-soft);
}
.scene-portal-p-notifsub{
  font-size:9px;font-weight:500;
  color:var(--ink-soft);
  margin-top:2px;
}

/* current job card */
.scene-portal-p-job{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:11px 12px;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--ink) 4%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent);
  will-change:transform;
}
.scene-portal-p-jobhead{display:flex;align-items:center;gap:8px;}
.scene-portal-p-jobico{
  width:26px;height:26px;flex:none;
  border-radius:8px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  color:var(--ink-soft);
  display:grid;place-items:center;
}
.scene-portal-p-jobico svg{width:13px;height:13px;}
.scene-portal-p-jobname{
  flex:1;min-width:0;
  font-size:11px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scene-portal-p-jobhead .scene-portal-chip{padding:3px 7px 3.5px;}

.scene-portal-p-steps{
  display:flex;align-items:flex-start;
  margin-top:13px;
  padding:0 3px;
}
.scene-portal-p-step{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:50px;flex:none;
}
.scene-portal-p-stepdot{
  width:15px;height:15px;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  display:grid;place-items:center;
}
.scene-portal-p-stepdot svg{width:8px;height:8px;}
.scene-portal-p-step--done .scene-portal-p-stepdot{
  background:var(--volt);
  color:var(--obsidian);
}
.scene-portal-p-step--now .scene-portal-p-stepdot{
  background:var(--paper);
  border:1.5px solid var(--volt-dim);
}
.scene-portal-p-step--now .scene-portal-p-stepdot i{
  width:5px;height:5px;border-radius:50%;
  background:var(--volt-dim);
}
.scene-portal-p-steplbl{
  font-size:9px;font-weight:600;
  color:var(--ink-soft);
}
.scene-portal-p-step--done .scene-portal-p-steplbl,
.scene-portal-p-step--now .scene-portal-p-steplbl{
  color:var(--ink);font-weight:700;
}
.scene-portal-p-stepline{
  flex:1;height:2px;
  border-radius:2px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  margin:6.5px -8px 0;
}
.scene-portal-p-stepline--done{background:var(--volt-dim);}

.scene-portal-p-jobfoot{
  display:flex;align-items:center;gap:7px;
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:9px;
}
.scene-portal-p-jobava{
  width:20px;height:20px;flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--slate) 18%, transparent);
  color:var(--ink-soft);
  font-size:9px;font-weight:700;
  display:grid;place-items:center;
}
.scene-portal-p-jobfoottxt{
  font-size:9px;font-weight:550;
  color:var(--ink-soft);
}

/* invoice row */
.scene-portal-p-inv{
  display:flex;align-items:center;gap:9px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 11px;
  margin-top:10px;
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  will-change:transform;
}
.scene-portal-p-invico{
  width:26px;height:26px;flex:none;
  border-radius:8px;
  background:color-mix(in srgb, var(--ink) 5%, transparent);
  color:var(--ink-soft);
  display:grid;place-items:center;
}
.scene-portal-p-invico svg{width:13px;height:13px;}
.scene-portal-p-invtxt{flex:1;min-width:0;}
.scene-portal-p-invno{font-size:10.5px;font-weight:700;line-height:1.2;}
.scene-portal-p-invdesc{
  font-size:9px;font-weight:500;
  color:var(--ink-soft);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scene-portal-p-invside{
  flex:none;
  display:flex;flex-direction:column;align-items:flex-end;
}
.scene-portal-p-invamt{
  font-family:var(--font-display);
  font-size:11.5px;font-weight:800;
  letter-spacing:-.01em;line-height:1.2;
}
.scene-portal-p-invside .scene-portal-chipstack{margin-top:3px;}

/* bottom nav */
.scene-portal-p-nav{
  position:absolute;left:0;right:0;bottom:0;
  height:52px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:flex;align-items:stretch;
  padding:6px 8px 8px;
}
.scene-portal-p-navitem{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:color-mix(in srgb, var(--ink-soft) 85%, transparent);
}
.scene-portal-p-navitem svg{width:16px;height:16px;}
.scene-portal-p-navlbl{font-size:9px;font-weight:600;}
.scene-portal-p-navitem--active{color:var(--ink);position:relative;}
.scene-portal-p-navitem--active .scene-portal-p-navlbl{font-weight:700;}
.scene-portal-p-navitem--active::after{
  content:"";
  position:absolute;bottom:0;left:50%;
  width:4px;height:4px;margin-left:-2px;
  border-radius:50%;
  background:var(--volt-dim);
}