/* ============================================================
   EventSync — Product Preview (marketing website demo)
   Tokens mirror wave2-handoff/DESIGN_TOKENS.md
   ============================================================ */
:root{
  /* Ink */
  --ink:#0F172A; --ink-2:#1E293B; --ink-3:#334155; --mute:#64748B; --mute-2:#94A3B8;
  /* Surface (warm off-white) */
  --bg:#F6F5F2; --bg-elev:#FBFAF7; --surface:#FFFFFF; --surface-2:#F7F6F4;
  --hair:#E2E8F0; --hair-2:#EEF0F3; --hair-3:#F1F5F9;
  /* Gold — Wedding Day Assistant ONLY */
  --gold:#C4956A; --gold-soft:#F5E9D7; --gold-ink:#8B6840; --gold-line:#E8D2B0;
  /* Semantic */
  --rouge:#C2524C; --rouge-soft:#FCE4E3; --rouge-ink:#8C3935;
  --amber:#D98B3A; --amber-soft:#FAEFE0; --amber-ink:#8B5921;
  --sage:#8FB498;  --sage-soft:#E2EDE4;  --sage-ink:#4B6855;
  --sky:#7EA8C4;   --sky-soft:#DDE9F1;   --sky-ink:#3F6A86;
  /* Type */
  --serif:'Lora',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* Radius */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  /* Shadow */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px -12px rgba(15,23,42,.08);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06),0 24px 48px -20px rgba(15,23,42,.18);
  --shadow-gold:0 0 0 1px rgba(196,149,106,.18),0 10px 30px -12px rgba(196,149,106,.45);
  --sidebar-w:268px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); background:var(--ink); color:var(--ink-3);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5; overflow:hidden;
}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
::selection{background:var(--gold-soft)}

/* ---- Type helpers ---- */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}
.eyebrow.gold{color:var(--gold-ink)} .eyebrow.rouge{color:var(--rouge)}
.eyebrow.sage{color:var(--sage-ink)} .eyebrow.sky{color:var(--sky-ink)}

/* ============================================================
   APP SHELL
   ============================================================ */
#app{height:100%; display:flex; background:var(--bg)}

/* ============================================================
   WEBSITE TOUR WRAPPER
   Desktop keeps a guided website rail beside the interactive app.
   Mobile is intentionally immersive: the user sees only the app shell.
   ============================================================ */
.product-tour-shell {
  height: 100vh;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  background:
    radial-gradient(900px 600px at 12% 16%, rgba(196, 149, 106, .22), transparent 62%),
    linear-gradient(145deg, #0F172A 0%, #111827 52%, #1B2436 100%);
  color: #FBFAF7;
}

.tour-guide {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 28px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, .10);
}

.tour-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #FBFAF7;
  text-decoration: none;
}

.tour-brand .mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FBFAF7;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
}

.tour-brand .name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.tour-brand .sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, .55);
}

.tour-guide h1 {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: .98;
  font-weight: 600;
  letter-spacing: -.03em;
  color: #fff;
}

.tour-guide .lede {
  color: rgba(251, 250, 247, .72);
  font-size: 14.5px;
  line-height: 1.65;
}

.tour-guide .demo-note {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(196, 149, 106, .38);
  background: rgba(196, 149, 106, .12);
  color: rgba(251, 250, 247, .82);
  font-size: 12.5px;
  line-height: 1.55;
}

.tour-guide .demo-note b {
  color: #fff;
}

.tour-steps {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tour-step {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: rgba(251, 250, 247, .86);
  text-align: left;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.tour-step:hover,
.tour-step:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(196, 149, 106, .48);
  background: rgba(255, 255, 255, .08);
  outline: none;
}

.tour-step.is-active {
  border-color: rgba(196, 149, 106, .74);
  background: rgba(196, 149, 106, .16);
  box-shadow: inset 3px 0 0 var(--gold);
}

.tour-step.is-active .num {
  background: #FBFAF7;
}

.tour-step .num {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
}

.tour-step strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
}

.tour-step span:not(.num) {
  display: block;
  margin-top: 3px;
  color: rgba(251, 250, 247, .58);
  font-size: 11.5px;
  line-height: 1.35;
}

.tour-product-boundary {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.tour-product-boundary .boundary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(251, 250, 247, .62);
  font-size: 11.5px;
}

.tour-product-boundary .boundary-item b {
  color: rgba(251, 250, 247, .92);
  font-weight: 700;
}

.demo-app-panel {
  min-width: 0;
  height: 100vh;
  padding: 18px;
  position: relative;
  background:
    radial-gradient(1100px 720px at 55% -10%, rgba(232, 210, 176, .32), transparent 58%),
    linear-gradient(180deg, #E9E2D7 0%, #D8CFBD 100%);
}

.demo-app-panel #app {
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .36);
}

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--bg-elev); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; height:100%;
}
.sb-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 22px 16px;
}
.sb-mark{
  width:34px; height:34px; border-radius:9px; flex:0 0 34px;
  background:var(--ink); color:var(--gold);
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:600; font-size:20px;
}
.sb-brand .wm{font-family:var(--serif); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.01em}
.sb-brand .tag{font-family:var(--mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-top:1px}

/* wedding context card */
.sb-event{
  margin:4px 16px 8px; padding:12px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--hair-2); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:11px; width:calc(100% - 32px); text-align:left;
}
.sb-event:hover{border-color:var(--hair)}
.sb-event .ptr{
  width:42px; height:42px; border-radius:11px; flex:0 0 42px; position:relative; overflow:hidden;
  background:radial-gradient(110% 80% at 30% 18%,rgba(196,149,106,.5),transparent 55%),linear-gradient(135deg,#3D4A6B,#0F172A);
  display:grid; place-items:center;
  font-family:var(--serif); color:#fff; font-size:13px; font-weight:500;
}
.sb-event .nm{flex:1; min-width:0}
.sb-event .nm .c{font-family:var(--serif); font-weight:500; font-size:14.5px; color:var(--ink); line-height:1.15; letter-spacing:-.01em}
.sb-event .nm .d{font-family:var(--mono); font-size:10px; color:var(--mute); margin-top:3px; letter-spacing:.04em}
.sb-event .cd{
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em;
  color:var(--gold-ink); background:var(--gold-soft); padding:3px 6px; border-radius:6px; text-align:center; line-height:1.2;
}
.sb-event .cd b{display:block; font-size:13px}

.sb-nav{flex:1; overflow-y:auto; padding:10px 12px}
.sb-cap{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute-2); padding:14px 10px 8px;
}
.navitem{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 11px; border-radius:var(--r); color:var(--ink-3);
  font-size:13.5px; font-weight:500; position:relative;
}
.navitem:hover{background:var(--hair-3)}
.navitem.active{background:var(--ink); color:#FBFAF7}
.navitem .ni{width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; color:currentColor; opacity:.85}
.navitem.active .ni{opacity:1}
.navitem .nlabel{flex:1}
.navitem .ndot{width:7px; height:7px; border-radius:50%}
.navitem .ndot.rouge{background:var(--rouge)} .navitem .ndot.amber{background:var(--amber)} .navitem .ndot.sage{background:var(--sage)}
.navitem.gold.active{background:linear-gradient(180deg,#2A2419,#0F172A)}
.navitem.gold .ni{color:var(--gold)}

.sb-wda{
  margin:10px 16px; padding:13px; border-radius:var(--r-lg);
  background:linear-gradient(165deg,#FDF6E9 0%,#FAEDD6 100%);
  border:1px solid var(--gold-line);
}
.sb-wda .top{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.sb-wda .spark{width:9px; height:9px; background:var(--gold); transform:rotate(45deg); border-radius:2px}
.sb-wda .lbl{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-ink)}
.sb-wda .ttl{font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink); line-height:1.2}
.sb-wda .rd{display:flex; align-items:baseline; gap:6px; margin-top:7px}
.sb-wda .rd b{font-family:var(--mono); font-size:18px; font-weight:700; color:var(--gold-ink)}
.sb-wda .rd span{font-size:11px; color:var(--gold-ink); opacity:.8}
.sb-wda .bar{height:5px; border-radius:3px; background:rgba(139,104,64,.18); margin-top:8px; overflow:hidden}
.sb-wda .bar>i{display:block; height:100%; background:var(--gold); border-radius:3px}

.sb-foot{
  padding:12px 18px; border-top:1px solid var(--hair-2);
  display:flex; align-items:center; gap:10px;
}
.sb-foot .av{
  width:32px; height:32px; border-radius:50%; flex:0 0 32px;
  background:var(--sage-soft); color:var(--sage-ink); display:grid; place-items:center;
  font-size:11px; font-weight:600;
}
.sb-foot .who{flex:1; min-width:0}
.sb-foot .who .n{font-size:12.5px; font-weight:600; color:var(--ink)}
.sb-foot .who .r{font-size:10.5px; color:var(--mute)}

/* ---------- Main column ---------- */
.main{flex:1; min-width:0; height:100%; display:flex; flex-direction:column; position:relative}

/* top bar */
.topbar{
  flex:0 0 auto; background:rgba(246,245,242,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair); padding:14px 30px;
  display:flex; align-items:center; gap:18px; z-index:20;
}
.tb-left{flex:1; min-width:0}
.tb-left .eb{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.tb-left h1{font-family:var(--serif); font-weight:500; font-size:23px; color:var(--ink); letter-spacing:-.01em; margin-top:2px; line-height:1.1}
.tb-menu{display:none}

/* view-as control */
.viewas{display:flex; align-items:center; gap:9px}
.viewas .vl{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mute-2)}
.va-btn{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--hair); font-size:12.5px; font-weight:600; color:var(--ink);
}
.va-btn:hover{border-color:var(--mute-2)}
.va-btn .dot{width:8px; height:8px; border-radius:50%; background:var(--ink)}
.va-btn svg{color:var(--mute)}

/* role scope banner (when viewing a role packet) */
.previewbar{
  display:flex; align-items:center; gap:12px; padding:10px 30px;
  background:var(--ink); color:#FBFAF7; font-size:12.5px;
}
.previewbar .rb-ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:0 0 26px}
.previewbar .rb-t{flex:1} .previewbar .rb-t b{font-weight:600; color:#fff}
.previewbar .rb-t .priv{color:rgba(255,255,255,.62); margin-left:8px; font-family:var(--mono); font-size:10px; letter-spacing:.04em}
.previewbar .rb-exit{
  background:rgba(255,255,255,.12); color:#fff; padding:7px 13px; border-radius:8px; font-size:12px; font-weight:600;
  display:flex; align-items:center; gap:6px;
}
.previewbar .rb-exit:hover{background:rgba(255,255,255,.2)}

/* scroll region */
.scroll{flex:1; overflow-y:auto; overflow-x:hidden}
.page{max-width:1120px; margin:0 auto; padding:28px 30px 80px}
.page.wide{max-width:1240px}

/* mobile tabbar (hidden on desktop) */
.tabbar{display:none}

/* ============================================================
   GENERIC COMPONENTS
   ============================================================ */
.card{background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card.pad{padding:20px}
.card-h{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px}
.card-h h3{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); letter-spacing:-.01em}
.card-h .meta{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); font-weight:500}

.grid{display:grid; gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.span-2{grid-column:span 2}

.sec-title{display:flex; align-items:baseline; gap:12px; margin:30px 0 14px}
.sec-title:first-child{margin-top:4px}
.sec-title h2{font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink); letter-spacing:-.01em}
.sec-title .line{flex:1; height:1px; background:var(--hair)}
.sec-title .meta{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}

/* pills */
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; font-weight:700; text-transform:uppercase}
.pill.dot::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor}
.pill.gold{background:var(--gold-soft); color:var(--gold-ink)}
.pill.sage{background:var(--sage-soft); color:var(--sage-ink)}
.pill.rouge{background:var(--rouge-soft); color:var(--rouge-ink)}
.pill.amber{background:var(--amber-soft); color:var(--amber-ink)}
.pill.sky{background:var(--sky-soft); color:var(--sky-ink)}
.pill.ink{background:var(--ink); color:#FBFAF7}
.pill.outline{background:transparent; border:1px solid var(--hair); color:var(--mute)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:var(--r);
  font-weight:600; font-size:13.5px; border:1px solid transparent; white-space:nowrap; transition:.14s}
.btn.sm{padding:8px 13px; font-size:12.5px; border-radius:var(--r-sm)}
.btn.block{display:flex; width:100%}
.btn.primary{background:var(--ink); color:#FBFAF7} .btn.primary:hover{background:#1b2742}
.btn.gold{background:var(--gold); color:var(--ink); box-shadow:var(--shadow-gold)} .btn.gold:hover{filter:brightness(1.04)}
.btn.outline{background:var(--surface); border-color:var(--hair); color:var(--ink)} .btn.outline:hover{border-color:var(--mute-2)}
.btn.ghost{background:var(--hair-3); color:var(--ink)} .btn.ghost:hover{background:var(--hair-2)}
.btn.rouge{background:var(--rouge); color:#fff} .btn.rouge:hover{filter:brightness(1.05)}
.btn.sage{background:var(--sage); color:#fff}

/* progress bar */
.bar{height:6px; border-radius:3px; background:var(--hair-3); overflow:hidden}
.bar>i{display:block; height:100%; border-radius:3px; background:var(--ink); transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar.gold>i{background:var(--gold)} .bar.sage>i{background:var(--sage)}
.bar.rouge>i{background:var(--rouge)} .bar.amber>i{background:var(--amber)}

/* stat / metric tile */
.stat{padding:18px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--hair-2); box-shadow:var(--shadow-sm)}
.stat .si{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.stat .si .ic{width:30px; height:30px; border-radius:8px; background:var(--hair-3); color:var(--ink-3); display:grid; place-items:center}
.stat .num{font-family:var(--mono); font-size:26px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1}
.stat .num small{font-size:14px; color:var(--mute); font-weight:500}
.stat .lbl{font-size:12px; color:var(--mute); margin-top:5px}
.stat .sub{font-size:11px; margin-top:8px; display:flex; align-items:center; gap:5px}
.stat.stat-action{
  display:block;
  width:100%;
  text-align:left;
}
.stat.stat-action:hover{
  border-color:var(--gold-line);
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}

.tool-card{
  display:block;
  width:100%;
  min-height:156px;
  padding:18px;
  border-radius:var(--r-lg);
  border:1px solid var(--hair-2);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  text-align:left;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tool-card:hover{
  border-color:var(--gold-line);
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}
.tool-card .tool-ic{
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
}
.tool-card .tool-ic.sage{background:var(--sage-soft); color:var(--sage-ink)}
.tool-card .tool-ic.sky{background:var(--sky-soft); color:var(--sky-ink)}
.tool-card .tool-ic.gold{background:var(--gold-soft); color:var(--gold-ink)}
.tool-card .tool-ic.rouge{background:var(--rouge-soft); color:var(--rouge-ink)}
.tool-card .tool-title{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
}
.tool-card .tool-body{
  margin-top:5px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-3);
}
.tool-card .tool-go{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:13px;
  font-size:11.5px;
  font-weight:700;
  color:var(--gold-ink);
}

/* list rows */
.row{display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--hair-2)}
.row:last-child{border-bottom:0}
.row .av{width:36px; height:36px; border-radius:50%; flex:0 0 36px; display:grid; place-items:center; font-size:12px; font-weight:600; background:var(--hair-3); color:var(--ink-3)}
.row .av.sage{background:var(--sage-soft); color:var(--sage-ink)} .row .av.gold{background:var(--gold-soft); color:var(--gold-ink)}
.row .av.rouge{background:var(--rouge-soft); color:var(--rouge-ink)} .row .av.sky{background:var(--sky-soft); color:var(--sky-ink)}
.row .av.amber{background:var(--amber-soft); color:var(--amber-ink)} .row .av.ink{background:var(--ink); color:#FBFAF7}
.row .rb{flex:1; min-width:0}
.row .rt{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3}
.row .rs{font-size:11.5px; color:var(--mute); margin-top:2px}
.row .rr{margin-left:auto; text-align:right; flex:0 0 auto}
.row .chev{color:var(--mute-2); flex:0 0 auto}
.row.clickable{cursor:pointer; padding-left:8px; padding-right:8px; margin:0 -8px; border-radius:8px}
.row.clickable:hover{background:var(--surface-2)}

/* "Do this next" recommendation */
.donext{
  display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-lg);
  background:linear-gradient(120deg,#FDF6E9,#FBFAF7 70%); border:1px solid var(--gold-line); box-shadow:var(--shadow);
}
.donext .dn-ic{width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:var(--gold); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-gold)}
.donext .dn-b{flex:1; min-width:0}
.donext .dn-b .eb{margin-bottom:3px}
.donext .dn-b .t{font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink); letter-spacing:-.01em}
.donext .dn-b .s{font-size:12.5px; color:var(--ink-3); margin-top:3px}

/* WDA feature card (gold) */
.wda-card{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--gold-line);
  background:linear-gradient(165deg,#FFFCF6 0%,#FBF2E1 100%); box-shadow:var(--shadow);
}
.wda-card .wh{padding:18px 20px 14px; display:flex; align-items:flex-start; gap:13px; border-bottom:1px solid var(--gold-line)}
.wda-card .wbadge{display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:7px; background:var(--ink); color:#FBFAF7;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase}
.wda-card .wbadge .spark{width:8px; height:8px; background:var(--gold); transform:rotate(45deg); border-radius:2px}
.wda-card .wh .wt{flex:1}
.wda-card .wh h3{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); letter-spacing:-.01em; margin-bottom:3px}
.wda-card .wh p{font-size:12.5px; color:var(--gold-ink)}
.wda-card .wbody{padding:16px 20px 18px}
.wda-check{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid rgba(139,104,64,.12); font-size:13px; color:var(--ink-3)}
.wda-check:last-of-type{border-bottom:0}
.wda-check .ck{width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px}
.wda-check .ck.done{background:var(--sage)} .wda-check .ck.wait{background:var(--surface); border:1.5px dashed var(--gold); color:var(--gold-ink)}
.wda-check .ct{flex:1; color:var(--ink); font-weight:500}
.wda-check .cm{font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:.03em}

/* approval / recovery block */
.recovery{border-radius:var(--r-lg); border:1px solid var(--gold-line); overflow:hidden; background:var(--surface); box-shadow:var(--shadow)}
.recovery .rh{padding:14px 18px; display:flex; align-items:center; gap:11px; background:linear-gradient(90deg,#FDF6E9,#FBFAF7)}
.recovery .rh .spark{width:9px; height:9px; background:var(--gold); transform:rotate(45deg); border-radius:2px; flex:0 0 9px}
.recovery .rh .eb{flex:1}
.recovery .rbody{padding:16px 18px}
.recovery .rsuggest{font-family:var(--serif); font-weight:500; font-size:16.5px; color:var(--ink); line-height:1.35; letter-spacing:-.01em}
.recovery .rwhy{margin-top:10px; padding:11px 13px; border-radius:var(--r); background:var(--surface-2); border-left:3px solid var(--gold);
  font-size:12.5px; color:var(--ink-3); line-height:1.5}
.recovery .rwhy b{color:var(--ink); font-weight:600}
.recovery .racts{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.recovery .rnote{display:flex; align-items:center; gap:7px; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--mute); text-transform:uppercase}
.recovery.approved .rh{background:var(--sage-soft)}
.recovery.approved{border-color:var(--sage)}
.recovery.reviewed{border-color:var(--gold-line)}
.smart-delay{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:8px; padding:6px 9px; border-radius:999px;
  background:var(--rouge-soft); color:var(--rouge-ink); font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.smart-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.smart-summary>div{padding:12px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--hair-2)}
.smart-summary b{display:block; font-family:var(--serif); font-size:24px; line-height:1; color:var(--ink)}
.smart-summary span{display:block; margin-top:5px; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.smart-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:14px; margin-top:14px}
.smart-label{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:8px}
.smart-list{display:flex; flex-direction:column; gap:8px}
.smart-adjust{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:11px 12px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--hair-2)}
.smart-adjust div{min-width:0}
.smart-adjust b{display:block; font-size:12.5px; color:var(--ink)}
.smart-adjust span{display:block; margin-top:2px; font-size:11px; color:var(--mute)}
.smart-adjust strong{font-family:var(--mono); font-size:10px; color:var(--gold-ink); align-self:start; white-space:nowrap}
.smart-adjust em{grid-column:1 / -1; font-style:normal; font-size:11.5px; color:var(--sage-ink)}
.smart-protected{display:flex; flex-direction:column; gap:8px}
.smart-protected span{display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:var(--r); background:var(--sage-soft); color:var(--sage-ink); font-size:11.5px; font-weight:600}
.smart-timeline{margin-top:15px; padding:13px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--hair-2)}
.smart-timeline.applied{background:var(--sage-soft); border-color:rgba(143,180,152,.55)}
.smart-time-row{display:grid; grid-template-columns:auto auto auto minmax(0,1fr); align-items:center; gap:8px; padding:6px 0; font-size:12px}
.smart-time-row:first-of-type{padding-top:0}
.smart-time-row:last-child{padding-bottom:0}
.smart-time-row .before,.smart-time-row .after{font-family:var(--mono); font-size:10.5px; font-weight:700; padding:3px 6px; border-radius:999px}
.smart-time-row .before.rouge{background:var(--rouge-soft); color:var(--rouge-ink)}
.smart-time-row .before.amber{background:var(--amber-soft); color:var(--amber-ink)}
.smart-time-row .after.sage{background:var(--sage); color:#fff}
.smart-time-row .arrow{color:var(--mute-2); line-height:0}
.smart-time-row b{font-size:12px; color:var(--ink); font-weight:600}
.smart-impact-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px}
.smart-impact{padding:12px; border-radius:var(--r); background:var(--surface); border:1px solid rgba(143,180,152,.5)}
.smart-impact b{display:block; font-size:12px; color:var(--sage-ink); margin-bottom:3px}
.smart-impact span{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.45}
.smart-mini{display:inline-flex; margin-top:6px; padding:3px 7px; border-radius:999px; background:var(--sage-soft); color:var(--sage-ink); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.smart-role-impact{
  display:flex; gap:13px; align-items:flex-start; margin-bottom:18px; padding:15px 16px; border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--sage-soft),#FBFAF7); border:1px solid rgba(143,180,152,.55); box-shadow:var(--shadow);
}
.smart-role-impact .sri-icon{width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:var(--sage); color:#fff; display:grid; place-items:center}
.smart-role-impact h3{font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink); margin-top:2px; letter-spacing:-.01em}
.smart-role-impact p{font-size:12.5px; color:var(--ink-3); margin-top:4px; line-height:1.45}

/* risk row */
.risk{display:flex; align-items:center; gap:13px; padding:13px 15px; background:var(--surface); border:1px solid var(--hair-2); border-radius:var(--r)}
.risk .d{width:10px; height:10px; border-radius:50%; flex:0 0 10px}
.risk .d.rouge{background:var(--rouge); box-shadow:0 0 0 4px var(--rouge-soft)}
.risk .d.amber{background:var(--amber); box-shadow:0 0 0 4px var(--amber-soft)}
.risk .d.sage{background:var(--sage); box-shadow:0 0 0 4px var(--sage-soft)}
.risk .d.sky{background:var(--sky); box-shadow:0 0 0 4px var(--sky-soft)}
.risk .rk{flex:1}
.risk .rk .t{font-size:13px; font-weight:600; color:var(--ink); line-height:1.3}
.risk .rk .s{font-family:var(--mono); font-size:10.5px; color:var(--mute); margin-top:2px; letter-spacing:.03em}

/* image placeholder (brand-consistent) */
.imgph{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg,rgba(15,23,42,.025) 0 8px,transparent 8px 16px),
    radial-gradient(120% 90% at 30% 15%,rgba(196,149,106,.22),transparent 55%),
    linear-gradient(135deg,#E9E5DC,#DDD8CE);
  display:grid; place-items:center;
}
.imgph .lab{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); text-align:center; padding:6px}
.imgph.dark{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 8px,transparent 8px 16px),linear-gradient(135deg,#3D4A6B,#0F172A)}
.imgph.dark .lab{color:rgba(255,255,255,.5)}

/* empty / calm states */
.empty{
  text-align:center; padding:34px 20px; border:1px dashed var(--hair); border-radius:var(--r-lg); background:var(--surface-2);
}
.empty .ei{width:42px; height:42px; margin:0 auto 12px; border-radius:50%; background:var(--hair-3); color:var(--mute); display:grid; place-items:center}
.empty .et{font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink-3)}
.empty .es{font-size:12px; color:var(--mute); margin-top:4px; max-width:280px; margin-left:auto; margin-right:auto}

/* privacy chip */
.privacy{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px;
  background:var(--hair-3); color:var(--mute); font-size:11px; font-weight:500}
.privacy svg{color:var(--sage-ink)}

/* Day-Of command intro */
.mode-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  margin-bottom:22px;
  border-color:var(--gold-line);
  background:linear-gradient(120deg,#FDF6E9,#FBFAF7 70%);
}
.mode-main{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.mode-icon{
  width:46px;
  height:46px;
  border-radius:12px;
  background:var(--ink);
  color:var(--gold);
  display:grid;
  place-items:center;
  flex:0 0 46px;
}
.mode-copy{
  min-width:0;
}
.mode-title{
  margin-top:2px;
  font-size:20px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0;
  line-height:1.18;
}
.mode-body{
  margin-top:5px;
  max-width:560px;
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.45;
}
.mode-tags{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
}

/* timeline spine (day-of) */
.spine{position:relative; padding-left:30px}
.spine::before{content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--hair)}
.spine-item{position:relative; padding:0 0 18px}
.spine-item:last-child{padding-bottom:0}
.spine-item .node{position:absolute; left:-30px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:2px solid var(--hair); display:grid; place-items:center}
.spine-item .node i{width:7px; height:7px; border-radius:50%; background:var(--hair)}
.spine-item.done .node{border-color:var(--sage)} .spine-item.done .node i{background:var(--sage)}
.spine-item.now .node{border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft)} .spine-item.now .node i{background:var(--gold)}
.spine-item.next .node i{background:var(--ink-3)}
.spine-item .si-t{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--mute); letter-spacing:.04em}
.spine-item.now .si-t{color:var(--gold-ink)}
.spine-item .si-n{font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink); margin-top:1px; letter-spacing:-.01em}
.spine-item .si-m{font-size:11.5px; color:var(--mute); margin-top:2px}
.spine-item.dim .si-n{color:var(--mute)}
.spine-item .si-card{margin-top:8px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--gold-line); background:linear-gradient(120deg,#FDF6E9,#FBFAF7)}

/* cue deck (DJ) */
.cue{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--hair-2)}
.cue:last-child{border-bottom:0}
.cue .ct{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-3); flex:0 0 56px; padding-top:1px}
.cue .cb{flex:1}
.cue .cn{font-size:14px; font-weight:600; color:var(--ink)}
.cue .cs{font-size:12px; color:var(--mute); margin-top:2px; line-height:1.45}
.cue.current{margin:0 -14px; padding:14px; border-radius:var(--r); background:var(--ink); border-bottom:0}
.cue.current .ct{color:var(--gold)} .cue.current .cn{color:#fff} .cue.current .cs{color:rgba(255,255,255,.7)}
.cue.nextup{margin:0 -14px; padding:14px; border-radius:var(--r); background:var(--gold-soft); border-bottom:0}
.cue.nextup .ct,.cue.nextup .cn{color:var(--gold-ink)} .cue.nextup .cs{color:var(--gold-ink); opacity:.85}

/* seating chart */
.seatgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:12px}
.table-card{border:1px solid var(--hair-2); border-radius:var(--r); background:var(--surface); padding:12px; text-align:center; cursor:pointer; transition:.14s}
.table-card:hover{border-color:var(--gold); box-shadow:var(--shadow-sm)}
.table-card .tnum{width:48px; height:48px; margin:0 auto 8px; border-radius:50%; border:2px solid var(--hair); display:grid; place-items:center;
  font-family:var(--serif); font-size:15px; font-weight:500; color:var(--ink); position:relative}
.table-card .tnum::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:1px dotted var(--hair-2)}
.table-card .tname{font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.table-card .tseats{font-family:var(--mono); font-size:9.5px; color:var(--mute); margin-top:3px}
.table-card.flag .tnum{border-color:var(--gold); color:var(--gold-ink)}
.table-card.flag .tnum i{position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--surface)}

/* meal split bars */
.mealrow{display:flex; align-items:center; gap:12px; padding:10px 0}
.mealrow .mk{width:110px; flex:0 0 110px; font-size:12.5px; font-weight:600; color:var(--ink)}
.mealrow .mbar{flex:1; height:22px; border-radius:6px; background:var(--hair-3); overflow:hidden; position:relative}
.mealrow .mbar>i{display:block; height:100%; border-radius:6px}
.mealrow .mv{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); flex:0 0 38px; text-align:right}

/* dietary aggregate chips */
.dietgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.diet{display:flex; align-items:center; gap:11px; padding:12px; border-radius:var(--r); border:1px solid var(--hair-2); background:var(--surface)}
.diet .dn{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink); flex:0 0 auto}
.diet .dl{font-size:12px; font-weight:600; color:var(--ink-3); line-height:1.25}
.diet .dl small{display:block; font-weight:400; color:var(--mute); font-size:10.5px; margin-top:1px}
.diet.crit{border-color:var(--rouge-soft); background:var(--rouge-soft)} .diet.crit .dn,.diet.crit .dl{color:var(--rouge-ink)}

/* team status grid */
.teamgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.team{display:flex; align-items:center; gap:11px; padding:13px; border-radius:var(--r); border:1px solid var(--hair-2); background:var(--surface)}
.team .ta{width:38px; height:38px; border-radius:10px; flex:0 0 38px; display:grid; place-items:center; font-size:13px}
.team .tb{flex:1; min-width:0}
.team .tn{font-size:13px; font-weight:600; color:var(--ink)}
.team .tr{font-size:11px; color:var(--mute); margin-top:1px}
.team .tstat{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:6px}
.tstat.in{background:var(--sage-soft); color:var(--sage-ink)} .tstat.pending{background:var(--amber-soft); color:var(--amber-ink)}
.tstat.late{background:var(--rouge-soft); color:var(--rouge-ink)}

/* role hub cards (handoff) */
.hub{display:block; text-align:left; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair-2); background:var(--surface); box-shadow:var(--shadow-sm); transition:.16s}
.hub:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--hair)}
.hub .hcap{height:70px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:12px 14px}
.hub .hcap .hi{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--ink)}
.hub .hcap .hrole{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#fff; position:relative}
.hub .hbody{padding:13px 15px 15px}
.hub .hname{font-family:var(--serif); font-weight:500; font-size:16px; color:var(--ink); letter-spacing:-.01em}
.hub .hmeta{font-size:11.5px; color:var(--mute); margin-top:2px}
.hub .hstat{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:11px; border-top:1px solid var(--hair-2)}
.hub .hready{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.hub .hready.ok{color:var(--sage-ink)} .hub .hready.wait{color:var(--amber-ink)}
.hub .hgo{font-size:11.5px; font-weight:600; color:var(--gold-ink); display:flex; align-items:center; gap:4px}

/* ============================================================
   DETAIL SHEET (slide-in)
   ============================================================ */
.sheet-scrim{position:absolute; inset:18px; border-radius:22px; background:rgba(15,23,42,.4); backdrop-filter:blur(2px); z-index:90; opacity:0; transition:opacity .22s}
.sheet-scrim.open{opacity:1}
.sheet{
  position:absolute; top:18px; right:18px; bottom:18px; width:min(440px,92vw); background:var(--bg);
  box-shadow:var(--shadow-lg); z-index:91; transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; border-radius:0 22px 22px 0; overflow:hidden;
}
.sheet.open{transform:translateX(0)}
.sheet-h{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--hair); background:var(--bg-elev)}
.sheet-h .sx{width:32px; height:32px; border-radius:8px; background:var(--hair-3); display:grid; place-items:center; color:var(--ink-3)}
.sheet-h .sx:hover{background:var(--hair-2)}
.sheet-h .sh-t{flex:1} .sheet-h .sh-t .eb{margin-bottom:2px} .sheet-h .sh-t h3{font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink)}
.sheet-body{flex:1; overflow-y:auto; padding:20px}

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#FBFAF7; padding:12px 18px; border-radius:var(--r); box-shadow:var(--shadow-lg);
  font-size:13px; font-weight:500; z-index:120; opacity:0; transition:.26s; display:flex; align-items:center; gap:10px; pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast .ti{width:20px; height:20px; border-radius:50%; background:var(--sage); display:grid; place-items:center; color:#fff; flex:0 0 20px}

/* view changes: no opacity animation (keeps content reliably visible) */

/* dropdown menu */
.menu{position:absolute; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:6px; z-index:60; min-width:208px}
.menu .mi{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; font-size:13px; color:var(--ink-3); width:100%; text-align:left; font-weight:500}
.menu .mi:hover{background:var(--hair-3); color:var(--ink)}
.menu .mi.active{background:var(--surface-2)}
.menu .mi .mdot{width:9px; height:9px; border-radius:50%; flex:0 0 9px}
.menu .mi .mck{margin-left:auto; color:var(--gold-ink)}
.menu .msep{height:1px; background:var(--hair-2); margin:5px 4px}
.menu .mcap{font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mute-2); padding:8px 10px 4px}

.hide{display:none !important}

/* ============================================================
   RESPONSIVE — tablet / mobile
   ============================================================ */
@media (max-width:980px){
  .product-tour-shell {
    min-height: 100vh;
    display: block;
  }
  .tour-guide {
    display: none;
  }
  .demo-app-panel {
    height: 100vh;
    padding: 0;
    background: var(--bg);
  }
  .demo-app-panel #app {
    border-radius: 0;
    box-shadow: none;
  }
  .sidebar{display:none}
  .topbar{padding:12px 18px}
  .tb-menu{display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:var(--surface); border:1px solid var(--hair); flex:0 0 38px; color:var(--ink)}
  .tb-left h1{font-size:20px}
  .viewas .vl{display:none}
  .previewbar{padding:9px 18px}
  .page{padding:20px 18px 110px}
  .previewbar .rb-t .priv{display:none}
  /* mobile bottom tab bar */
  .tabbar{
    display:grid; grid-template-columns:repeat(4,1fr); position:absolute; left:0; right:0; bottom:0; z-index:40;
    background:rgba(251,250,247,.95); backdrop-filter:blur(10px); border-top:1px solid var(--hair); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar .tab{display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0; color:var(--mute); font-size:9.5px; font-weight:600}
  .tabbar .tab .ti{width:22px; height:22px; display:grid; place-items:center}
  .tabbar .tab.active{color:var(--ink)}
  .tabbar .tab.active.gold{color:var(--gold-ink)}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .span-2{grid-column:span 2}
  .scroll{padding-bottom:0}
  .sheet-scrim {
    position: fixed;
    inset: 0;
    border-radius: 0;
  }
  .sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
}
@media (max-width:600px){
  body {
    background: var(--bg);
  }
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .donext{
    display:grid;
    grid-template-columns:46px minmax(0, 1fr);
    align-items:start;
  }
  .donext .dn-b{min-width:0}
  .donext .btn{
    grid-column:1 / -1;
    width:100%;
    margin-top:4px;
  }
  .tb-left h1{font-size:18px}
  .va-btn span.valabel{display:none}
  .seatgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .mode-strip{
    display:block;
    padding:16px;
  }
  .mode-main{
    align-items:flex-start;
  }
  .mode-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:11px;
  }
  .mode-title{
    font-size:19px;
  }
  .mode-body{
    font-size:12px;
  }
  .mode-tags{
    justify-content:flex-start;
    margin-top:14px;
    padding-left:56px;
  }
  .smart-summary{grid-template-columns:1fr}
  .smart-grid{grid-template-columns:1fr}
  .smart-impact-grid{grid-template-columns:1fr}
  .smart-time-row{grid-template-columns:auto auto minmax(0,1fr)}
  .smart-time-row .arrow{display:none}
  .smart-adjust{grid-template-columns:1fr}
  .smart-adjust strong{white-space:normal}
  .smart-role-impact{padding:14px; gap:11px}
}

/* mobile drawer */
.drawer-scrim{position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:80; opacity:0; transition:.2s}
.drawer-scrim.open{opacity:1}
.drawer{position:fixed; top:0; left:0; bottom:0; width:280px; background:var(--bg-elev); z-index:81; transform:translateX(-100%); transition:transform .24s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column}
.drawer.open{transform:none}