/* v25 · D-manager: quick handoffs and lively, always-visible daily tools.
   Load after readability.css. The edition palettes and pose atlas stay in their
   existing owners; this stylesheet is excluded from palette conversion. */
body[data-visual-edition] #manager-story {
  --manager-ink:var(--edition-ink,var(--read-ink,#183764));
  --manager-muted:var(--read-muted,#4f617a);
  --manager-strong:var(--edition-strong,var(--hero-tone,#15469c));
  --manager-deep:var(--edition-deep,#102b56);
  --manager-accent:var(--edition-accent,var(--hero-accent,#e4ba5a));
  --manager-highlight:color-mix(in srgb,var(--manager-accent) 55%,white);
  --manager-paper:var(--edition-card,var(--hero-paper,#fffdf8));
  --manager-tint:var(--edition-tint,var(--hero-soft,#e7eefb));
  --manager-line:color-mix(in srgb,var(--manager-strong) 23%,white);
  --manager-on-dark:var(--edition-on-dark,#f5f7fc);
  --manager-dark-muted:var(--edition-dark-muted,#d0dbee);
  --manager-scene-cycle:2800ms;
  --manager-motion-state:paused;
  container:manager-story / inline-size;
  position:relative;
  isolation:isolate;
  margin-top:28px;
  border:1px solid var(--manager-line);
  border-radius:23px;
  background:var(--manager-paper);
  color:var(--manager-ink);
  box-shadow:0 5px 0 color-mix(in srgb,var(--manager-accent) 22%,transparent),0 22px 42px #13263e12;
  overflow:hidden;
  font-size:14px;
  line-height:1.75;
}
body[data-visual-edition="cabaret"] #manager-story {--manager-deep:#3e2433;--manager-on-dark:#fff5ed;--manager-dark-muted:#e7d2d7}
body[data-visual-edition="concafe"] #manager-story {--manager-deep:#442f5d;--manager-on-dark:#fff6fc;--manager-dark-muted:#e8d9ee}
body[data-visual-edition="host"] #manager-story {--manager-deep:#202832;--manager-on-dark:#f5f7fa;--manager-dark-muted:#d6dee8}
body[data-visual-edition="girlsbar"] #manager-story {--manager-deep:#123a40;--manager-on-dark:#f1f9f5;--manager-dark-muted:#cce5df}

#manager-story :where(p,h3,h4,figure,dl,dd) {margin:0}
#manager-story :where(button,a,summary) {-webkit-tap-highlight-color:transparent}
#manager-story :where(button,summary) {font-family:var(--sans);font-size:14px;line-height:1.5}
#manager-story :where(a,button,summary):focus-visible {
  outline:3px solid var(--manager-strong);
  outline-offset:4px;
}
#manager-story [hidden] {display:none!important}
#manager-story :where(strong,dd,time) {font-variant-numeric:tabular-nums}
#manager-story .manager-story-topline {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 12px;
  padding:15px 18px 0;
  color:var(--manager-muted);
  font-size:12px;
  line-height:1.7;
}
#manager-story .manager-story-topline>strong {
  color:var(--manager-strong);
  font:800 24px/1.2 var(--display);
  letter-spacing:.025em;
}
#manager-story .manager-story-topline>span {font-size:12px}

/* The three names remain visible while the large screen changes. */
#manager-story .manager-story-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  padding:15px 15px 17px;
}
#manager-story .manager-story-choice {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:77px;
  padding:11px 13px 12px;
  border:1px solid var(--manager-line);
  border-radius:10px;
  background:var(--manager-paper);
  color:var(--manager-ink);
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
#manager-story .manager-story-choice>small,
#manager-story .manager-story-choice .manager-story-choice-number {
  color:var(--manager-muted);
  font:700 12px/1.2 var(--display);
  letter-spacing:.08em;
}
#manager-story .manager-story-choice>strong {font-size:15px;line-height:1.5;font-weight:800}
#manager-story .manager-story-choice>span {font-size:12px;line-height:1.5}
#manager-story .manager-story-choice[aria-selected="true"],
#manager-story .manager-story-choice[aria-pressed="true"] {
  border-color:var(--manager-strong);
  background:var(--manager-strong);
  color:#fff;
  box-shadow:0 3px 0 color-mix(in srgb,var(--manager-strong) 13%,transparent);
}
#manager-story .manager-story-choice:is([aria-selected="true"],[aria-pressed="true"])>small,
#manager-story .manager-story-choice:is([aria-selected="true"],[aria-pressed="true"]) .manager-story-choice-number {color:#fff;opacity:.88}
/* The actual scene clock owns each fill, including a paused fraction. */
#manager-story .manager-story-choice-progress {
  position:absolute;
  inset:auto 0 0;
  display:block;
  height:4px;
  margin:0;
  background:#ffffff21;
  opacity:0;
  pointer-events:none;
}
#manager-story .manager-story-choice-progress>i {
  display:block;
  width:100%;
  height:100%;
  background:var(--manager-accent);
  transform:scaleX(0);
  transform-origin:left center;
}
#manager-story .manager-story-choice:is([aria-selected="true"],[aria-pressed="true"])>.manager-story-choice-progress {opacity:1}
#manager-story[data-manager-running="false"] .manager-story-choice:is([aria-selected="true"],[aria-pressed="true"])>.manager-story-choice-progress {opacity:.42}
#manager-story .manager-story-quick-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 12px;
  margin:0 17px 16px;
  padding-top:8px;
  border-top:1px solid var(--manager-line);
  color:var(--manager-muted);
}
#manager-story .manager-story-quick-links>span {font-size:12px;line-height:1.6;margin-right:auto}
#manager-story .manager-story-quick-links>a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:6px 2px;
  color:var(--manager-strong);
  font-size:13px;
  line-height:1.6;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--manager-strong) 35%,transparent);
  text-underline-offset:5px;
}
#manager-story .manager-story-quick-links>a>span {font-size:17px;line-height:1}
@media(hover:hover) {
  #manager-story .manager-story-choice:not([aria-selected="true"]):not([aria-pressed="true"]):hover {
    background:var(--manager-tint);
    border-color:var(--manager-strong);
  }
}

/* A dark, quiet stage makes the light screen the first point of attention. */
#manager-story .manager-story-stage {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,290px) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  gap:20px 24px;
  align-items:start;
  padding:28px 23px 30px;
  border-block:1px solid color-mix(in srgb,var(--manager-accent) 50%,var(--manager-deep));
  background:radial-gradient(ellipse at 12% 12%,color-mix(in srgb,var(--manager-strong) 62%,transparent),transparent 62%),linear-gradient(145deg,var(--manager-deep),color-mix(in srgb,var(--manager-deep) 85%,black));
  color:var(--manager-on-dark);
}
#manager-story .manager-story-stage::before {
  content:"";
  position:absolute;
  inset:12px;
  z-index:-1;
  border:1px solid color-mix(in srgb,var(--manager-accent) 25%,transparent);
  border-radius:15px;
  pointer-events:none;
}
#manager-story .manager-story-stage::after {
  content:"";
  position:absolute;
  inset:auto 8% 17px;
  z-index:-1;
  height:18px;
  border-radius:50%;
  background:radial-gradient(ellipse,#0005,transparent 72%);
  pointer-events:none;
}
#manager-story .manager-story-phone {
  grid-area:1 / 1 / 3 / 2;
  position:relative;
  width:100%;
  max-width:290px;
  min-width:0;
  justify-self:center;
  padding:7px;
  border:1px solid #c6d0d3;
  border-radius:32px;
  background:linear-gradient(125deg,#d6dde1,#566576 5%,#142130 10%,#101c2c 88%,#748596 98%);
  color:var(--manager-ink);
  box-shadow:inset 0 0 0 1px #f9fbff40,0 4px 0 #081220,0 20px 26px #020b1c40;
}
#manager-story .manager-story-phone::before {
  content:"";
  position:absolute;
  top:70px;
  left:-3px;
  width:2px;
  height:35px;
  border-radius:2px 0 0 2px;
  background:#aebac5;
  box-shadow:0 44px 0 #aebac5;
}
#manager-story .manager-story-phone::after {
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin:8px auto 2px;
  border-radius:5px;
  background:#c6d2dd;
}
#manager-story .manager-story-phone-inner {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  align-items:start;
  min-width:0;
  border:1px solid #0b1422;
  border-radius:24px;
  overflow:hidden;
  background:var(--manager-paper);
  color:var(--manager-ink);
}
#manager-story .manager-story-view {
  grid-area:3 / 1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  min-width:0;
  min-height:470px;
  padding:0 15px 18px;
  background:var(--manager-paper);
  color:var(--manager-ink);
}
/* Hidden views still reserve the tallest screen, so autoplay cannot move the
   phone or the content below it. Runtime also sets aria-hidden and inert. */
#manager-story .manager-story-phone-inner>.manager-story-view[hidden] {
  display:flex!important;
  visibility:hidden;
  pointer-events:none;
}
#manager-story .manager-story-speaker {
  grid-area:1 / 1;
  justify-self:center;
  width:47px;
  height:4px;
  margin:9px auto 5px;
  border-radius:8px;
  background:#25394d;
}
#manager-story .manager-story-appbar {
  grid-area:2 / 1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 8px;
  min-height:49px;
  margin:0;
  padding:10px 15px 12px;
  border-bottom:1px solid var(--manager-line);
  background:var(--manager-tint);
  color:var(--manager-ink);
  font-size:12px;
}
#manager-story .manager-story-appbar>strong {font:800 21px/1.2 var(--display);letter-spacing:.02em}
#manager-story .manager-story-appbar>span {font-size:12px;font-weight:700}
#manager-story .manager-story-person {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 8px;
  margin-top:9px;
  color:var(--manager-muted);
  font-size:12px;
  line-height:1.65;
}
#manager-story .manager-story-person>strong {color:var(--manager-ink);font-size:14px}
#manager-story .manager-story-person .cast-portrait {width:34px;border-radius:9px;background-color:var(--manager-tint)}
#manager-story .manager-story-screen-title {
  margin-top:12px;
  color:var(--manager-ink);
  font:800 21px/1.5 var(--sans);
  letter-spacing:-.035em;
}
#manager-story .manager-story-period {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 8px;
  margin-top:6px;
  color:var(--manager-muted);
  font-size:12px;
  line-height:1.7;
  font-variant-numeric:tabular-nums;
}
#manager-story .manager-story-period-controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  margin:13px 0 0;
}
#manager-story .manager-story-period-controls button {
  min-width:0;
  min-height:44px;
  padding:9px 8px;
  border:1px solid var(--manager-line);
  border-radius:7px;
  background:var(--manager-paper);
  color:var(--manager-ink);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
#manager-story .manager-story-period-controls button:is([aria-pressed="true"],[aria-selected="true"]) {
  border-color:var(--manager-strong);
  background:var(--manager-strong);
  color:#fff;
}
#manager-story .manager-story-summary {
  position:relative;
  margin-top:17px;
  padding:16px 0 17px;
  border-top:1px solid var(--manager-line);
  border-bottom:1px solid var(--manager-line);
}
#manager-story .manager-story-summary>span {display:block;font-size:14px;font-weight:700}
#manager-story .manager-story-summary>strong {
  display:block;
  width:100%;
  margin-top:5px;
  color:var(--manager-strong);
  font:800 clamp(37px,7.5cqw,48px)/1.12 var(--display);
  letter-spacing:-.025em;
  white-space:nowrap;
}
#manager-story .manager-story-summary>small {display:block;margin-top:8px;color:var(--manager-muted);font-size:12px;line-height:1.7}
#manager-story .manager-story-metrics {margin-top:12px}
#manager-story .manager-story-metrics>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:7px;
  padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--manager-line) 65%,white);
}
#manager-story .manager-story-metrics>div:last-child {border-bottom:0}
#manager-story .manager-story-metrics dt {min-width:0;font-size:14px;line-height:1.55}
#manager-story .manager-story-metrics dd {font-size:19px;line-height:1.4;font-weight:800;white-space:nowrap}
#manager-story .manager-story-metrics dd>small {font-size:12px;font-weight:700;margin-left:3px}
#manager-story .manager-story-metrics dd.manager-story-personal {font-family:var(--sans);font-size:14px;line-height:1.6}
#manager-story .manager-story-screen-note,
#manager-story .manager-story-view>p:last-child {
  margin-top:14px;
  color:var(--manager-muted);
  font-size:12px;
  line-height:1.8;
}
#manager-story .manager-story-view>p:last-child {padding-top:3px}

/* Published salary: the three totals stay still; the detail can be read at will. */
#manager-story .manager-story-published {
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:fit-content;
  padding:3px 8px;
  border:1px solid var(--manager-line);
  border-radius:5px;
  background:var(--manager-tint);
  color:var(--manager-ink);
  font-size:12px;
  font-weight:700;
}
#manager-story .manager-story-salary-totals {margin-top:19px}
#manager-story .manager-story-salary-totals>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:6px;
  padding:13px 0;
  border-bottom:1px solid var(--manager-line);
}
#manager-story .manager-story-salary-totals dt {font-size:14px;font-weight:700;line-height:1.6}
#manager-story .manager-story-salary-totals dd {font:800 28px/1.2 var(--display);letter-spacing:-.015em;white-space:nowrap}
#manager-story .manager-story-salary-totals>div.manager-story-salary-net {
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  margin:12px -2px 0;
  padding:16px 12px;
  border:1px solid color-mix(in srgb,var(--manager-accent) 65%,var(--manager-line));
  border-radius:10px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--manager-accent) 22%,var(--manager-paper)),var(--manager-tint));
  color:var(--manager-ink);
}
#manager-story .manager-story-salary-net dd {color:var(--manager-strong);font-size:41px;line-height:1.13}
#manager-story .manager-story-salary-details {margin-top:17px;border-top:1px solid var(--manager-line)}
#manager-story .manager-story-salary-details>summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:10px 1px;
  color:var(--manager-ink);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
#manager-story .manager-story-salary-details>summary::-webkit-details-marker {display:none}
#manager-story .manager-story-salary-details>summary::after {content:"＋";flex:none;font-size:18px;line-height:1}
#manager-story .manager-story-salary-details[open]>summary::after {content:"−"}
#manager-story .manager-story-salary-details :is(dl,table) {width:100%;font-size:14px;line-height:1.75}
#manager-story .manager-story-salary-details dl>div {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:7px;padding:8px 0;border-top:1px solid var(--manager-line)}
#manager-story .manager-story-salary-details dd {font-weight:700;white-space:nowrap}
/* Keep an opened statement ready for the reader without reserving its expanded
   detail height while a different phone screen is selected. */
#manager-story .manager-story-view[hidden] .manager-story-salary-details[open]>:not(summary) {display:none!important}
#manager-story .manager-story-salary-details table {border-collapse:collapse}
#manager-story .manager-story-salary-details :is(th,td) {padding:9px 1px;border-top:1px solid var(--manager-line);text-align:left;vertical-align:top}
#manager-story .manager-story-salary-details th {font-weight:500}
#manager-story .manager-story-salary-details td {font-weight:700;text-align:right;white-space:nowrap}
#manager-story .manager-story-salary-details p {margin:9px 0 3px;color:var(--manager-muted);font-size:12px;line-height:1.8}

/* The QR is on the personal phone. The shop's camera remains outside it. */
#manager-story .manager-story-qr {
  display:grid;
  place-items:center;
  width:100%;
  margin:22px auto 8px;
  padding:5px 0;
  color:#15263b;
}
#manager-story .manager-story-qr :is(svg,img) {
  display:block;
  width:min(100%,174px);
  height:auto;
  max-width:100%;
  aspect-ratio:1;
  padding:12px;
  border:1px solid var(--manager-line);
  border-radius:13px;
  background:#fff;
  box-shadow:0 5px 0 color-mix(in srgb,var(--manager-tint) 80%,white);
}
#manager-story .manager-story-qr>strong {margin-top:17px;text-align:center;font-size:14px;line-height:1.75;color:var(--manager-ink)}
#manager-story .manager-story-qr>span {margin-top:5px;text-align:center;font-size:12px;line-height:1.75;color:var(--manager-muted)}
#manager-story .manager-story-qr-caption {text-align:center;font-size:14px;font-weight:700;line-height:1.75;color:var(--manager-ink)}
#manager-story .manager-story-attendance-bridge {
  grid-area:2 / 2 / 3 / 3;
  align-self:end;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:10px 12px;
  align-items:center;
  min-width:0;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--manager-accent) 40%,transparent);
  color:var(--manager-on-dark);
}
#manager-story .manager-story-attendance-bridge[hidden] {display:grid!important;visibility:hidden;pointer-events:none}
#manager-story .manager-story-attendance-bridge>p {font-size:12px;line-height:1.75;color:var(--manager-dark-muted)}
#manager-story .manager-story-transfer {grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;line-height:1.7;color:var(--manager-dark-muted)}
#manager-story .manager-story-transfer>b {font-size:22px;line-height:1;color:var(--manager-highlight);rotate:-90deg}
#manager-story .manager-story-tablet {
  position:relative;
  min-width:0;
  max-width:194px;
  min-height:91px;
  padding:13px 8px 12px;
  border:5px solid #a7b3bd;
  border-radius:13px;
  outline:1px solid #e7eff84d;
  background:linear-gradient(140deg,#e6edf2,#f8fbff);
  color:#20364a;
  text-align:center;
  box-shadow:inset 0 0 0 1px #526473,0 7px 14px #0002;
}
#manager-story .manager-story-tablet::before {content:"";position:absolute;left:4px;top:50%;width:3px;height:3px;border-radius:50%;background:#455f73}
#manager-story .manager-story-tablet>strong {display:block;font-size:13px;line-height:1.6}
#manager-story .manager-story-tablet>span {display:block;margin-top:5px;font-size:12px;line-height:1.6}
#manager-story .manager-story-tablet :is(svg,img) {display:block;width:40px;height:40px;margin:0 auto 5px;object-fit:contain}
#manager-story .manager-story-tablet>div>strong {display:block;font-size:13px;line-height:1.65}
#manager-story .manager-story-tablet>div>span {display:block;margin-top:4px;font-size:12px;line-height:1.65}
#manager-story .manager-story-tablet>.manager-story-camera {
  display:grid;
  place-items:center;
  position:relative;
  width:30px;
  height:22px;
  margin:3px auto 9px;
  border:2px solid #32506a;
  border-radius:4px;
}
#manager-story .manager-story-camera::before {content:"";position:absolute;top:-6px;left:6px;width:12px;height:4px;border:2px solid #32506a;border-bottom:0;border-radius:3px 3px 0 0}
#manager-story .manager-story-camera>i {width:10px;height:10px;border:2px solid #32506a;border-radius:50%}
#manager-story .manager-story-attendance-record {
  min-width:0;
  padding:8px 0 1px;
  color:var(--manager-on-dark);
  font-size:14px;
  line-height:1.8;
}
#manager-story .manager-story-attendance-record>strong {display:block;color:var(--manager-highlight);font-size:14px;line-height:1.7}
#manager-story .manager-story-attendance-record>span {display:block}
#manager-story .manager-story-attendance-record time {white-space:nowrap}
#manager-story .manager-story-attendance-record>p {font-size:13px;font-weight:700;line-height:1.7;color:var(--manager-highlight)}
#manager-story .manager-story-attendance-record>p>span {display:block;color:var(--manager-dark-muted);font-size:12px;font-weight:500}
#manager-story .manager-story-attendance-record dl {margin-top:6px}
#manager-story .manager-story-attendance-record dl>div {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--manager-on-dark) 20%,transparent)}
#manager-story .manager-story-attendance-record dt {font-size:12px;line-height:1.6}
#manager-story .manager-story-attendance-record dd {font:700 22px/1.3 var(--display);white-space:nowrap;color:var(--manager-on-dark)}

/* A familiar cast member joins the explanation, away from every figure. */
#manager-story .manager-story-aside {
  position:relative;
  grid-area:1 / 2 / 2 / 3;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  justify-items:start;
  min-width:0;
  padding-top:6px;
}
#manager-story .manager-story-scene-copy {grid-area:1 / 1;min-width:0;color:var(--manager-on-dark)}
#manager-story .manager-story-scene-copy[hidden] {display:block!important;visibility:hidden;pointer-events:none}
#manager-story .manager-story-scene-copy>small,
#manager-story .manager-story-scene-copy>span,
#manager-story .manager-story-scene-copy>.manager-story-scene-tag {
  display:block;
  margin-bottom:10px;
  color:var(--manager-highlight);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
}
#manager-story .manager-story-scene-copy>h3 {
  color:var(--manager-on-dark);
  font:800 23px/1.65 var(--sans);
  letter-spacing:-.04em;
  text-wrap:balance;
}
#manager-story .manager-story-scene-copy>h3>.manager-story-phrase {
  display:inline-block;
  max-width:100%;
  vertical-align:top;
  overflow-wrap:anywhere;
  white-space:normal;
  text-wrap:balance;
}
#manager-story .manager-story-scene-copy>p {
  margin-top:13px;
  color:var(--manager-dark-muted);
  font-size:14px;
  line-height:1.95;
}
#manager-story .manager-story-actor {
  grid-area:2 / 1;
  position:relative;
  inset:auto;
  display:block;
  width:160px;
  max-width:100%;
  height:auto;
  aspect-ratio:1;
  margin:14px 0 -2px;
  justify-self:center;
  transform-origin:50% 94%;
  filter:drop-shadow(1px 1px 0 #ffffff2b) drop-shadow(4px 8px 4px #0004);
  animation:none;
  pointer-events:none;
}
#manager-story .manager-story-actor::after {content:"";position:absolute;inset:auto 17% 1%;height:5%;border-radius:50%;background:#0003;filter:blur(3px);z-index:-1}
#manager-story[data-manager-scene="performance"] .manager-story-actor {--visual-pose-x:0%;--visual-pose-y:100%}
#manager-story[data-manager-scene="salary"] .manager-story-actor {--visual-pose-x:33.333333%;--visual-pose-y:100%}
#manager-story[data-manager-scene="attendance"] .manager-story-actor {--visual-pose-x:100%;--visual-pose-y:100%}

/* Controls and the real-screen links remain outside the demonstration device. */
#manager-story .manager-story-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:8px 10px;
  padding:16px 17px;
  background:var(--manager-paper);
  color:var(--manager-muted);
}
#manager-story .manager-story-controls button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  min-height:46px;
  padding:10px 13px;
  border:1px solid var(--manager-line);
  border-radius:8px;
  background:var(--manager-paper);
  color:var(--manager-ink);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
#manager-story .manager-story-controls :is(p,span,output) {font-size:12px;line-height:1.7;color:var(--manager-muted)}
#manager-story .manager-story-controls>p {flex:1 1 100%;margin-top:1px}
#manager-story .manager-story-controls>div {grid-column:1/-1}
#manager-story .manager-story-motion-toggle {background:var(--manager-tint)}
#manager-story .manager-story-controls button:disabled {color:var(--manager-muted);cursor:default;opacity:.8}
#manager-story .manager-story-controls [data-manager-step-label] {display:block;margin-top:5px;font-weight:700;color:var(--manager-strong)}
#manager-story .manager-story-controls button>span {font-size:15px;color:inherit}
#manager-story .manager-story-owner-note {
  margin:2px 17px 17px;
  padding:14px 15px;
  border-left:3px solid var(--manager-accent);
  background:var(--manager-tint);
  color:var(--manager-ink);
  font-size:13px;
  line-height:1.9;
}
#manager-story .manager-story-owner-note>strong {display:block;margin-bottom:4px;font-size:14px;line-height:1.75}
#manager-story .manager-story-owner-note :is(p,span) {font-size:13px;line-height:1.9}
#manager-story .manager-story-owner-note>small {display:block;margin-top:9px;font-size:12px;line-height:1.9;color:var(--manager-muted)}
#manager-story .manager-story-proof {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  margin:20px 17px 17px;
  padding-top:19px;
  border-top:1px solid var(--manager-line);
}
#manager-story .manager-story-proof>h3,
#manager-story .manager-story-proof>p {grid-column:1/-1}
#manager-story .manager-story-proof>h3 {font-size:17px;line-height:1.6;color:var(--manager-ink)}
#manager-story .manager-story-proof>p {font-size:12px;line-height:1.85;color:var(--manager-muted)}
#manager-story .manager-story-proof-card {
  grid-area:1 / 1;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:17px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--manager-ink);
  text-decoration:none;
}
#manager-story .manager-story-proof-card[hidden] {display:grid!important;visibility:hidden;pointer-events:none}
#manager-story .manager-story-proof-card :is(button,a) {
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:0;
  border:1px solid var(--manager-line);
  border-radius:9px;
  background:var(--manager-tint);
  color:var(--manager-ink);
  text-decoration:none;
  overflow:hidden;
  cursor:zoom-in;
}
#manager-story .manager-story-proof-card img {
  display:block;
  width:100%;
  height:164px;
  padding:8px;
  object-fit:contain;
  object-position:center top;
  background:linear-gradient(150deg,var(--manager-tint),var(--manager-paper));
}
#manager-story .manager-story-proof-card :is(figcaption,figcaption>strong) {font-size:15px;line-height:1.75;color:var(--manager-ink)}
#manager-story .manager-story-proof-card figcaption {margin:0;padding:0;border:0;background:transparent;text-align:left}
#manager-story .manager-story-proof-card figcaption>strong {display:block;font-weight:800}
#manager-story .manager-story-proof-card :is(small,figcaption>span) {display:block;margin-top:3px;font-size:12px;line-height:1.7;color:var(--manager-muted)}
#manager-story .manager-story-proof-card .screen-zoom-label {font-size:12px;color:#fff}
#manager-story .manager-story-proof-zoom {position:absolute;bottom:6px;left:5px;right:5px;padding:4px 2px;background:#112d50eb;border:1px solid #ffffff40;border-radius:5px;color:#fff;font-size:12px;line-height:1.6;font-weight:700;text-align:center}
#manager-story .manager-story-proof-card>.image-fallback {grid-column:1/-1;padding:12px;font-size:13px;line-height:1.8;background:var(--manager-tint);color:var(--manager-ink)}
#manager-story .manager-story-cta {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:19px 17px 21px;
  min-height:50px;
  padding:13px 15px;
  border:1px solid var(--manager-strong);
  border-radius:8px;
  background:var(--manager-strong);
  color:#fff;
  font-size:14px;
  line-height:1.8;
  font-weight:800;
  text-decoration:none;
}
#manager-story .manager-story-cta>span {color:#fff;flex:none;font-size:20px}
#manager-story .manager-story-cta a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:11px 15px;
  border:1px solid var(--manager-strong);
  border-radius:7px;
  background:var(--manager-strong);
  color:#fff;
  font-size:14px;
  line-height:1.6;
  font-weight:800;
  text-decoration:none;
}
#manager-story .manager-story-note {padding:0 17px 19px;color:var(--manager-muted);font-size:12px;line-height:1.9}

/* These are explicitly labelled LP explanations beside the product image.
   Their values come from the same sample model as the phone. */
#manager-story .manager-story-explanations {
  position:relative;
  grid-area:2 / 2 / 3 / 3;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-self:end;
  align-items:start;
  min-width:0;
}
#manager-story .manager-story-explanations>.manager-story-explanation {
  grid-area:1 / 1;
  display:grid;
  min-width:0;
  align-self:start;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--manager-highlight) 37%,transparent);
  color:var(--manager-on-dark);
}
#manager-story .manager-story-explanations>.manager-story-explanation[hidden] {
  display:grid!important;
  visibility:hidden;
  pointer-events:none;
}
#manager-story .manager-story-explanation-label {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:4px 8px;
  margin-bottom:12px;
}
#manager-story .manager-story-explanation-label>strong {font-size:14px;line-height:1.75;color:var(--manager-on-dark)}
#manager-story .manager-story-explanation-label>span {font-size:12px;line-height:1.7;color:var(--manager-dark-muted)}
#manager-story .manager-story-trend {min-width:0;margin:0}
#manager-story .manager-story-trend figcaption>strong {display:block;font-size:14px;line-height:1.75;color:var(--manager-on-dark)}
#manager-story .manager-story-trend figcaption>span {display:block;margin-top:3px;font-size:12px;line-height:1.75;color:var(--manager-dark-muted)}
#manager-story .manager-story-trend-chart {margin-top:12px}
#manager-story .manager-story-trend-bars {
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--manager-trend-count,7),minmax(0,1fr));
  align-items:stretch;
  gap:6px;
  height:78px;
  padding-top:4px;
  border-bottom:1px solid color-mix(in srgb,var(--manager-on-dark) 40%,transparent);
  overflow:hidden;
}
/* Stable presentation classes also survive the inert outgoing panel copy. */
#manager-story .manager-story-trend-bars.is-month {gap:2px}
#manager-story .manager-story-trend-column {display:block;min-width:0;position:relative}
#manager-story .manager-story-trend-track {display:block;position:relative;width:100%;height:100%;border-radius:3px 3px 0 0;background:#ffffff0e;overflow:hidden}
#manager-story .manager-story-trend-bar {
  display:block;
  position:absolute;
  inset:0;
  border-radius:3px 3px 0 0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--manager-strong) 42%,white),color-mix(in srgb,var(--manager-strong) 18%,white));
  box-shadow:inset 1px 0 0 #ffffff61;
  transform:scaleY(var(--manager-bar-scale,1));
  transform-origin:center bottom;
}
#manager-story .manager-story-trend-column.is-current .manager-story-trend-bar {background:linear-gradient(0deg,var(--manager-accent),var(--manager-highlight));box-shadow:inset 1px 0 0 #fff8}
#manager-story .manager-story-trend-axis {position:relative;height:23px;margin-top:6px;color:var(--manager-on-dark);font-size:12px;line-height:1.7;font-weight:700;font-variant-numeric:tabular-nums}
#manager-story .manager-story-trend-axis>span {position:absolute;left:var(--manager-tick-x);top:0;translate:-50% 0;white-space:nowrap}
#manager-story .manager-story-trend-axis>.manager-story-tick-start {left:0;translate:0 0}
#manager-story .manager-story-trend-axis>.manager-story-tick-end {left:auto;right:0;translate:0 0}
#manager-story .manager-story-trend-total {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:3px 9px;padding-top:8px;margin-top:4px;border-top:1px solid #ffffff23}
#manager-story .manager-story-trend-total>span {font-size:12px;line-height:1.75;color:var(--manager-dark-muted)}
#manager-story .manager-story-trend-total>strong {font:800 27px/1.3 var(--display);color:var(--manager-highlight);white-space:nowrap;font-variant-numeric:tabular-nums}
#manager-story .manager-story-trend-note {margin-top:8px;color:var(--manager-dark-muted);font-size:12px;line-height:1.8}
#manager-story .manager-story-trend-note>span {display:block;margin-top:4px}
#manager-story .manager-story-pay-flow {display:grid;gap:9px;margin:0;padding:0;list-style:none}
#manager-story .manager-story-pay-flow>li {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  gap:7px;
  align-items:baseline;
  min-width:0;
  min-height:53px;
  padding:12px 11px;
  border:1px solid #ffffff3d;
  border-radius:9px;
  background:#ffffff0d;
  color:var(--manager-on-dark);
}
#manager-story .manager-story-pay-step-number {font:800 14px/1.5 var(--display);color:var(--manager-highlight)}
#manager-story .manager-story-pay-flow>li>span:nth-child(2) {font-size:13px;line-height:1.8;font-weight:700}
#manager-story .manager-story-pay-flow>li>strong {font:800 25px/1.3 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
#manager-story .manager-story-pay-flow>li.manager-story-pay-net {background:var(--manager-paper);color:var(--manager-ink);border-color:var(--manager-highlight)}
#manager-story .manager-story-pay-flow>li.manager-story-pay-net>strong {color:var(--manager-strong)}
#manager-story .manager-story-pay-flow>li.manager-story-pay-net>.manager-story-pay-step-number {color:var(--manager-strong)}
#manager-story .manager-story-pay-step-trace {position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:4px;background:var(--manager-highlight);transform-origin:center top;opacity:0;pointer-events:none}
#manager-story .manager-story-pay-flow-note {margin-top:12px;font-size:12px;line-height:1.85;color:var(--manager-dark-muted)}
#manager-story .manager-story-pay-flow-note>span {display:block;margin-top:6px}
#manager-story .manager-story-explanations>.manager-story-attendance-bridge {max-width:none;width:100%;margin:0}
#manager-story .manager-story-transfer>b {position:relative;display:grid;place-items:center;flex:none;width:42px;height:28px;font-size:28px}
#manager-story .manager-story-transfer-pulse {position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--manager-highlight);box-shadow:0 0 9px var(--manager-highlight);opacity:0;pointer-events:none}
#manager-story .manager-story-qr-graphic {position:relative;width:min(100%,174px);aspect-ratio:1;isolation:isolate;border-radius:14px;overflow:hidden}
#manager-story .manager-story-qr-graphic>svg {width:100%;height:100%;max-height:none}
#manager-story .manager-story-scan-line {position:absolute;left:13px;right:13px;top:14px;height:3px;border-radius:3px;background:var(--manager-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--manager-strong) 12%,transparent),0 -4px 13px color-mix(in srgb,var(--manager-strong) 25%,transparent);opacity:0;pointer-events:none}

/* CSS owns the illustrations; JS owns visibility, pauses and the
   2.8 / 3.6 / 3.2 second scene clocks. Values stay settled and readable. */
#manager-story[data-manager-scene="salary"] {--manager-scene-cycle:3600ms}
#manager-story[data-manager-scene="attendance"] {--manager-scene-cycle:3200ms}
#manager-story[data-manager-motion-running="true"] [data-manager-zone-visible="true"] {--manager-motion-state:running}
#manager-story .manager-story-actor {
  animation-name:manager-pose-performance,manager-gesture-performance;
  animation-duration:var(--manager-scene-cycle),var(--manager-scene-cycle);
  animation-timing-function:steps(1,end),cubic-bezier(.4,0,.2,1);
  animation-iteration-count:infinite;
  animation-play-state:var(--manager-motion-state,paused);
}
#manager-story[data-manager-scene="salary"] .manager-story-actor {animation-name:manager-pose-salary,manager-gesture-salary}
#manager-story[data-manager-scene="attendance"] .manager-story-actor {animation-name:manager-pose-attendance,manager-gesture-attendance}
#manager-story .manager-story-summary {isolation:isolate}
#manager-story .manager-story-summary::before {
  content:"";
  position:absolute;
  inset:0 -7px;
  z-index:-1;
  border-radius:10px;
  background:linear-gradient(115deg,color-mix(in srgb,var(--manager-accent) 25%,var(--manager-paper)),var(--manager-tint));
  opacity:0;
  animation:manager-summary-highlight var(--manager-scene-cycle) ease-in-out infinite;
  animation-play-state:var(--manager-motion-state,paused);
  pointer-events:none;
}
#manager-story .manager-story-trend-bar {
  animation:manager-trend-build var(--manager-scene-cycle) cubic-bezier(.25,.8,.25,1) infinite;
  animation-delay:calc(var(--manager-bar-index,0) * 12ms);
  animation-play-state:var(--manager-motion-state,paused);
}
#manager-story .manager-story-trend-bars::after {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  background:linear-gradient(105deg,transparent,#ffffff22,transparent);
  opacity:0;
  pointer-events:none;
  animation:manager-trend-glint var(--manager-scene-cycle) linear infinite;
  animation-play-state:var(--manager-motion-state,paused);
}
#manager-story [data-manager-pay-step="gross"] {--manager-pay-delay:0ms}
#manager-story [data-manager-pay-step="deductions"] {--manager-pay-delay:calc(var(--manager-scene-cycle) * .12)}
#manager-story [data-manager-pay-step="net"] {--manager-pay-delay:calc(var(--manager-scene-cycle) * .24)}
#manager-story .manager-story-salary-totals>[data-manager-pay-step] {position:relative;isolation:isolate}
#manager-story .manager-story-salary-totals>[data-manager-pay-step]::before {
  content:"";
  position:absolute;
  inset:3px -7px;
  z-index:-1;
  border-radius:7px;
  background:color-mix(in srgb,var(--manager-accent) 30%,var(--manager-paper));
  box-shadow:inset 3px 0 0 var(--manager-strong);
  opacity:0;
  animation:manager-pay-highlight var(--manager-scene-cycle) ease-in-out infinite;
  animation-delay:var(--manager-pay-delay);
  animation-play-state:var(--manager-motion-state,paused);
  pointer-events:none;
}
#manager-story .manager-story-salary-totals>.manager-story-salary-net::before {inset:0;box-shadow:inset 0 0 0 2px var(--manager-strong);background:color-mix(in srgb,var(--manager-accent) 40%,var(--manager-paper))}
#manager-story .manager-story-pay-flow>li {
  animation:manager-pay-card-highlight var(--manager-scene-cycle) ease-in-out infinite;
  animation-delay:var(--manager-pay-delay);
  animation-play-state:var(--manager-motion-state,paused);
}
#manager-story .manager-story-pay-step-trace {
  animation:manager-pay-trace var(--manager-scene-cycle) cubic-bezier(.22,1,.36,1) infinite;
  animation-delay:var(--manager-pay-delay);
  animation-play-state:var(--manager-motion-state,paused);
}
#manager-story .manager-story-scan-line {animation:manager-qr-scan var(--manager-scene-cycle) ease-in-out infinite;animation-play-state:var(--manager-motion-state,paused)}
#manager-story .manager-story-qr-graphic::after {content:"";position:absolute;inset:2px;border:2px solid var(--manager-strong);border-radius:12px;opacity:0;pointer-events:none;animation:manager-qr-recognise var(--manager-scene-cycle) ease-in-out infinite;animation-play-state:var(--manager-motion-state,paused)}
#manager-story .manager-story-transfer-pulse {animation:manager-qr-transfer var(--manager-scene-cycle) cubic-bezier(.45,0,.25,1) infinite;animation-play-state:var(--manager-motion-state,paused)}
#manager-story .manager-story-tablet::after {content:"";position:absolute;inset:-5px;border:2px solid var(--manager-highlight);border-radius:13px;opacity:0;pointer-events:none;animation:manager-camera-recognise var(--manager-scene-cycle) ease-in-out infinite;animation-play-state:var(--manager-motion-state,paused)}
#manager-story .manager-story-camera>i {animation:manager-camera-lens var(--manager-scene-cycle) ease-in-out infinite;animation-play-state:var(--manager-motion-state,paused)}
#manager-story .manager-story-attendance-record dl>div {position:relative;isolation:isolate}
#manager-story .manager-story-attendance-record dl>div::before {content:"";position:absolute;inset:0 -4px;z-index:-1;border-left:2px solid var(--manager-highlight);border-radius:3px;background:#ffffff18;opacity:0;pointer-events:none;animation:manager-attendance-record var(--manager-scene-cycle) ease-in-out infinite;animation-play-state:var(--manager-motion-state,paused)}
#manager-story .manager-story-attendance-record dl>div:nth-child(2)::before {animation-delay:170ms}
#manager-story [data-manager-view][hidden] *,
#manager-story [data-manager-view][hidden] *::before,
#manager-story [data-manager-view][hidden] *::after,
#manager-story [data-manager-period-view][hidden] *,
#manager-story [data-manager-period-view][hidden] *::before,
#manager-story [data-manager-period-view][hidden] *::after {animation:none!important}

@keyframes manager-pose-performance {0%{--visual-pose-x:0%}16%{--visual-pose-x:33.333333%}54%{--visual-pose-x:100%}82%{--visual-pose-x:33.333333%}96%,100%{--visual-pose-x:0%}}
@keyframes manager-pose-salary {0%{--visual-pose-x:33.333333%}18%{--visual-pose-x:0%}53%{--visual-pose-x:100%}84%,100%{--visual-pose-x:33.333333%}}
@keyframes manager-pose-attendance {0%{--visual-pose-x:0%}12%{--visual-pose-x:33.333333%}50%{--visual-pose-x:100%}82%{--visual-pose-x:33.333333%}96%,100%{--visual-pose-x:0%}}
@keyframes manager-gesture-performance {0%,100%{translate:0 -2px;rotate:-.4deg}16%{translate:-3px -8px;rotate:-1.4deg}37%{translate:3px -11px;rotate:1.4deg}59%{translate:-2px -4px;rotate:-.6deg}78%{translate:3px -8px;rotate:1.6deg}95%{translate:0 -4px;rotate:-.3deg}}
@keyframes manager-gesture-salary {0%,100%{translate:0 -2px;rotate:0deg}18%{translate:-5px -9px;rotate:-2deg}42%{translate:3px -5px;rotate:.6deg}65%{translate:6px -10px;rotate:2deg}85%{translate:1px -4px;rotate:-.5deg}}
@keyframes manager-gesture-attendance {0%,100%{translate:-1px -2px;rotate:-.4deg}18%{translate:6px -6px;rotate:2deg}42%{translate:9px -10px;rotate:2.6deg}64%{translate:1px -5px;rotate:.3deg}81%{translate:-4px -9px;rotate:-1.6deg}}
@keyframes manager-summary-highlight {0%,100%{opacity:.28}14%,48%{opacity:1}76%{opacity:.15}}
@keyframes manager-trend-build {0%{transform:scaleY(calc(var(--manager-bar-scale,1) * .04));opacity:.28}18%,79%{transform:scaleY(var(--manager-bar-scale,1));opacity:1}94%{transform:scaleY(var(--manager-bar-scale,1));opacity:.12}100%{transform:scaleY(calc(var(--manager-bar-scale,1) * .04));opacity:.12}}
@keyframes manager-trend-glint {0%{translate:-120% 0;opacity:0}10%{opacity:.8}74%{translate:340% 0;opacity:.8}86%,100%{translate:340% 0;opacity:0}}
@keyframes manager-pay-highlight {0%,100%{opacity:.12}10%,30%{opacity:1}49%{opacity:.25}72%{opacity:0}}
@keyframes manager-pay-card-highlight {0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--manager-highlight) 25%,transparent)}12%,32%{box-shadow:0 0 0 2px var(--manager-highlight),0 7px 16px #0002}65%{box-shadow:0 0 0 0 transparent}}
@keyframes manager-pay-trace {0%{transform:scaleY(.15);opacity:.4}11%{opacity:1}24%,43%{transform:scaleY(1);opacity:1}62%,100%{transform:scaleY(1);opacity:0}}
@keyframes manager-qr-scan {0%{translate:0 0;opacity:.7}7%{translate:0 0;opacity:1}39%{translate:0 142px;opacity:1}47%,100%{translate:0 142px;opacity:0}}
@keyframes manager-qr-recognise {0%,35%,87%,100%{opacity:0}43%,72%{opacity:1}}
@keyframes manager-qr-transfer {0%{translate:-50% -24px;opacity:0;scale:.7}15%{translate:-50% -21px;opacity:.85;scale:1}42%{translate:-50% 21px;opacity:1;scale:1}52%,100%{translate:-50% 24px;opacity:0;scale:.7}}
@keyframes manager-camera-recognise {0%,28%,87%,100%{opacity:0;scale:1}41%,65%{opacity:1;scale:1.045}76%{opacity:.45;scale:1}}
@keyframes manager-camera-lens {0%,29%,88%,100%{box-shadow:0 0 0 0 transparent;background:transparent}42%,65%{box-shadow:0 0 0 5px #32506a22;background:#32506a}}
@keyframes manager-attendance-record {0%,43%,100%{opacity:0}54%,87%{opacity:1}}

/* The daily tools are visible together. No accordion and no tab-hidden panel. */
body[data-visual-edition] #manager-more {
  --manager-ink:var(--edition-ink,var(--read-ink,#183764));
  --manager-muted:var(--read-muted,#4f617a);
  --manager-strong:var(--edition-strong,var(--hero-tone,#15469c));
  --manager-accent:var(--edition-accent,var(--hero-accent,#e4ba5a));
  --manager-paper:var(--edition-card,var(--hero-paper,#fffdf8));
  --manager-tint:var(--edition-tint,var(--hero-soft,#e7eefb));
  --manager-line:color-mix(in srgb,var(--manager-strong) 23%,white);
  container:manager-everyday / inline-size;
  margin-top:39px;
  padding:27px 0 0;
  border-top:1px solid var(--manager-line);
  border-bottom:0;
  color:var(--manager-ink);
}
body[data-visual-edition] #manager-more>.manager-everyday-title {
  margin:0 0 20px;
  color:var(--manager-ink);
  font:800 25px/1.65 var(--sans);
  letter-spacing:-.035em;
  text-wrap:balance;
}
body[data-visual-edition] #manager-more>.manager-everyday-title>span {display:inline-block;max-width:100%}
body[data-visual-edition] #manager-more .manager-demo[data-manager-layout="expanded"] {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  margin:4px 0 21px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body[data-visual-edition] #manager-more .manager-demo>.feature-demo-bar {
  grid-area:1 / 1;
  padding:0 0 12px;
  border-bottom:1px solid var(--manager-line);
  background:transparent;
  color:var(--manager-ink);
}
body[data-visual-edition] #manager-more .feature-demo-bar>strong {font-size:20px}
body[data-visual-edition] #manager-more .feature-demo-bar>span:last-child {color:var(--manager-muted);font-size:12px;white-space:normal}
body[data-visual-edition] #manager-more .feature-demo-dots {display:none}
body[data-visual-edition] #manager-more .manager-demo>.demo-sample-context {
  grid-area:2 / 1;
  padding:11px 0;
  border:0;
  background:transparent;
  color:var(--manager-muted);
  font-size:12px;
  line-height:1.8;
}
body[data-visual-edition] #manager-more .demo-sample-context>strong {color:var(--manager-ink);font-size:12px;letter-spacing:.03em}
body[data-visual-edition] #manager-more .manager-tabs {
  grid-area:3 / 1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:4px 0 17px;
}
body[data-visual-edition] #manager-more .manager-tabs>a {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  min-width:0;
  min-height:48px;
  padding:10px 8px;
  border:1px solid var(--manager-line);
  border-radius:8px;
  background:var(--manager-paper);
  color:var(--manager-strong);
  font-size:14px;
  line-height:1.6;
  font-weight:800;
  text-align:center;
}
body[data-visual-edition] #manager-more .manager-tabs>a>span {font:700 12px/1.3 var(--display);color:var(--manager-muted)}
body[data-visual-edition] #manager-more .manager-tabs>a:is(:hover,:focus-visible) {background:var(--manager-tint);border-color:var(--manager-strong)}
body[data-visual-edition] #manager-more .manager-everyday-grid {
  grid-area:4 / 1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
body[data-visual-edition] #manager-more .manager-everyday-grid>.manager-panel {
  position:relative;
  grid-area:auto;
  display:block;
  min-width:0;
  min-height:0;
  height:100%;
  padding:18px 17px;
  border:1px solid var(--manager-line);
  border-radius:16px;
  background:linear-gradient(150deg,var(--manager-paper),color-mix(in srgb,var(--manager-tint) 58%,var(--manager-paper)));
  color:var(--manager-ink);
  box-shadow:0 5px 0 color-mix(in srgb,var(--manager-strong) 7%,transparent),0 13px 25px #172c4610;
  scroll-margin-top:100px;
}
body[data-visual-edition] #manager-more #manager-panel-rank {grid-column:1/-1}
body[data-visual-edition] #manager-more .manager-panel-heading {gap:9px;margin-bottom:15px;align-items:center}
body[data-visual-edition] #manager-more .manager-panel-heading h3 {font-size:17px;line-height:1.6;color:var(--manager-ink)}
body[data-visual-edition] #manager-more .manager-heading-art {width:58px;margin:-3px -5px -3px 0}
body[data-visual-edition] #manager-more .feature-mini-label {font-size:12px;line-height:1.4;color:var(--manager-strong);letter-spacing:.06em}
body[data-visual-edition] #manager-more .feature-example-tag {font-size:12px;line-height:1.5;color:var(--manager-muted);background:var(--manager-paper);border-color:var(--manager-line)}
body[data-visual-edition] #manager-more .manager-conversation {min-height:0;gap:13px}
body[data-visual-edition] #manager-more .manager-message {padding-right:9px;gap:6px}
body[data-visual-edition] #manager-more .manager-message-mine {padding-left:16px;padding-right:0}
body[data-visual-edition] #manager-more .manager-message p {padding:11px 12px;line-height:1.85}
body[data-visual-edition] #manager-more .manager-message-icon {width:27px;height:29px;font-size:12px}
body[data-visual-edition] #manager-more .manager-talk-footer {flex-wrap:wrap;gap:7px;margin-top:13px;padding-top:13px;border-color:var(--manager-line)}
body[data-visual-edition] #manager-more .feature-replay {font-size:12px;min-height:44px}
body[data-visual-edition] #manager-more .manager-week-grid {
  grid-template-columns:repeat(4,minmax(44px,1fr));
  gap:8px 7px;
  margin:18px 0;
}
body[data-visual-edition] #manager-more .manager-week-grid>button {min-width:44px;min-height:67px;padding:8px 5px}
body[data-visual-edition] #manager-more .manager-week-grid>button>span {font-size:15px}
body[data-visual-edition] #manager-more .manager-week-grid>button>small {font-size:12px}
body[data-visual-edition] #manager-more .manager-shift-detail {padding:15px 12px;border-color:color-mix(in srgb,var(--manager-accent) 65%,var(--manager-line));color:var(--manager-ink)}
body[data-visual-edition] #manager-more .manager-shift-detail>div {flex-wrap:wrap;gap:5px 7px}
body[data-visual-edition] #manager-more .manager-shift-detail b {font-size:12px}
body[data-visual-edition] #manager-more .manager-shift-detail>strong {font-size:clamp(25px,4.8cqw,31px)}
body[data-visual-edition] #manager-more .manager-rank-toolbar>span {font-size:13px;line-height:1.7;color:var(--manager-muted)}
body[data-visual-edition] #manager-more .manager-rank-toolbar button {font-size:13px;min-height:44px}
body[data-visual-edition] #manager-more .manager-rank-list li {grid-template-columns:24px 46px minmax(0,1fr) auto;column-gap:10px;padding-block:13px}
body[data-visual-edition] #manager-more .manager-rank-avatar {width:46px}
body[data-visual-edition] #manager-more .manager-rank-name {font-size:14px}
body[data-visual-edition] #manager-more .manager-rank-list [data-rank-value] {font-size:29px;font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-visual-edition] #manager-more .manager-rank-track {height:6px;margin-top:7px}
body[data-visual-edition] #manager-more :is(.feature-record-origin,.feature-insight) {font-size:12px;line-height:1.85}
body[data-visual-edition] #manager-more .feature-insight {padding:12px 13px}
body[data-visual-edition] #manager-more :is(.manager-message small,.manager-talk-footer>span,.manager-shift-detail>p,.feature-interaction-hint) {font-size:12px;line-height:1.8}
body[data-visual-edition] #manager-more :is(.manager-message p,.manager-shift-detail>div) {font-size:14px}

/* Each open card keeps its own short, visible-only demonstration. The JS
   controller owns the fill, bubble lift, weekday marker and ranking geometry. */
body[data-visual-edition] #manager-more .manager-loop-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px 8px;
  margin-top:17px;
  padding-top:13px;
  border-top:1px solid var(--manager-line);
  color:var(--manager-muted);
}
body[data-visual-edition] #manager-more .manager-loop-controls[hidden] {display:none!important}
body[data-visual-edition] #manager-more .manager-loop-controls>p {min-width:0;margin:0;font-size:12px;line-height:1.65}
body[data-visual-edition] #manager-more [data-manager-loop-status] {display:block;position:relative;padding-left:13px;color:var(--manager-ink);font-size:12px;line-height:1.7;font-weight:700}
body[data-visual-edition] #manager-more [data-manager-loop-status]::before {
  content:"";
  position:absolute;
  left:1px;
  top:.57em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--manager-strong);
  opacity:.4;
}
body[data-visual-edition] #manager-more [data-manager-loop-step] {display:block;margin:3px 0 0 13px;color:var(--manager-muted);font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
body[data-visual-edition] #manager-more [data-manager-loop-toggle] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:44px;
  padding:9px 10px;
  border:1px solid var(--manager-line);
  border-radius:8px;
  background:var(--manager-paper);
  color:var(--manager-strong);
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  line-height:1.65;
  cursor:pointer;
}
body[data-visual-edition] #manager-more [data-manager-loop-toggle]:is(:hover,:focus-visible) {background:var(--manager-tint);border-color:var(--manager-strong)}
body[data-visual-edition] #manager-more [data-manager-loop-toggle]:focus-visible {outline:3px solid var(--manager-strong);outline-offset:3px}
body[data-visual-edition] #manager-more [data-manager-loop-toggle]:disabled {color:var(--manager-muted);cursor:default}
body[data-visual-edition] #manager-more .manager-loop-progress {
  grid-column:1/-1;
  display:block;
  width:100%;
  height:3px;
  overflow:hidden;
  border-radius:4px;
  background:color-mix(in srgb,var(--manager-strong) 10%,var(--manager-paper));
}
body[data-visual-edition] #manager-more [data-manager-loop-progress] {display:block;width:100%;height:100%;background:var(--manager-strong);transform:scaleX(0);transform-origin:left center}
body[data-visual-edition] #manager-more [data-manager-loop-running="true"] [data-manager-loop-progress] {background:linear-gradient(90deg,var(--manager-strong),var(--manager-accent))}
body[data-visual-edition] #manager-more [data-manager-loop-running="true"] [data-manager-loop-status]::before {opacity:1;animation:manager-loop-pulse var(--manager-loop-duration,1250ms) ease-in-out infinite}
body[data-visual-edition] #manager-more .manager-message p {position:relative}
body[data-visual-edition] #manager-more .manager-message p::after {
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid var(--manager-accent);
  border-radius:inherit;
  box-shadow:0 4px 12px color-mix(in srgb,var(--manager-strong) 13%,transparent);
  opacity:0;
  scale:.98;
  transition:opacity .22s ease,scale .36s cubic-bezier(.22,.72,.24,1);
  pointer-events:none;
}
body[data-visual-edition] #manager-more [data-manager-message-active="true"] p::after {opacity:1;scale:1}
body[data-visual-edition] #manager-more [data-manager-loop-running="true"] .manager-heading-art {
  transform-origin:center 90%;
  animation:manager-talk-guide var(--manager-loop-duration,1250ms) cubic-bezier(.4,0,.2,1) infinite;
}
body[data-visual-edition] #manager-more .manager-week-grid {position:relative}
body[data-visual-edition] #manager-more .manager-shift-marker {
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  box-sizing:border-box;
  width:0;
  height:0;
  border:2px solid var(--manager-accent);
  border-radius:11px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--manager-accent) 28%,transparent),0 5px 11px color-mix(in srgb,var(--manager-strong) 13%,transparent);
  opacity:0;
  pointer-events:none;
}
body[data-visual-edition] #manager-more .manager-shift-marker[style] {opacity:1}
body[data-visual-edition] #manager-more .manager-rank-track {position:relative;overflow:hidden}
body[data-visual-edition] #manager-more .manager-rank-track::after {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:38%;
  background:linear-gradient(90deg,transparent,#ffffff8c,transparent);
  opacity:0;
  pointer-events:none;
}
body[data-visual-edition] #manager-more #manager-panel-rank[data-manager-loop-running="true"] .manager-rank-list li:first-child .manager-rank-track::after {animation:manager-rank-glint var(--manager-loop-duration,3000ms) linear infinite}
body[data-visual-edition] #manager-more #manager-panel-rank[data-manager-loop-running="true"] .manager-rank-list li:first-child .manager-rank-avatar {transform-origin:center 90%;animation:manager-rank-acknowledge var(--manager-loop-duration,3000ms) ease-in-out infinite}
@keyframes manager-loop-pulse {0%,100%{scale:1;opacity:.7}45%{scale:1.5;opacity:1}}
@keyframes manager-talk-guide {0%,100%{translate:0 -1px;rotate:-.4deg}32%{translate:2px -5px;rotate:2deg}66%{translate:-1px -3px;rotate:-1.5deg}}
@keyframes manager-rank-glint {0%{translate:-120% 0;opacity:0}12%{opacity:.9}62%{translate:380% 0;opacity:.9}75%,100%{translate:380% 0;opacity:0}}
@keyframes manager-rank-acknowledge {0%,100%{translate:0 0;rotate:0deg}22%{translate:0 -3px;rotate:-2deg}42%{translate:0 -1px;rotate:1deg}62%,84%{translate:0 0;rotate:0deg}}

@container manager-story (max-width:560px) {
  #manager-story .manager-story-stage {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:19px;
    padding:22px 16px 24px;
  }
  #manager-story .manager-story-stage::before {inset:9px;border-radius:12px}
  #manager-story .manager-story-phone {grid-area:2 / 1 / 3 / 2;max-width:302px}
  #manager-story .manager-story-aside {
    grid-area:1 / 1 / 2 / 2;
    grid-template-columns:minmax(0,1fr) 86px;
    align-items:center;
    column-gap:9px;
    padding:0 2px;
  }
  #manager-story .manager-story-scene-copy {grid-area:1 / 1}
  #manager-story .manager-story-scene-copy>h3 {font-size:20px;line-height:1.65;text-wrap:pretty}
  #manager-story .manager-story-scene-copy>p {font-size:14px;line-height:1.8;margin-top:8px}
  #manager-story .manager-story-scene-copy>small,
  #manager-story .manager-story-scene-copy>span,
  #manager-story .manager-story-scene-copy>.manager-story-scene-tag {margin-bottom:6px}
  #manager-story .manager-story-actor {grid-area:1 / 2;width:96px;max-width:none;margin:0 -5px;align-self:center}
  #manager-story .manager-story-explanations {
    grid-area:3 / 1 / 4 / 2;
    width:100%;
    max-width:360px;
    justify-self:center;
    align-self:start;
  }
  #manager-story .manager-story-explanations>.manager-story-explanation {grid-area:1 / 1;align-self:start}
  #manager-story .manager-story-explanations>.manager-story-explanation[hidden] {display:none!important}
  #manager-story .manager-story-attendance-bridge {
    grid-area:3 / 1 / 4 / 2;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:8px 13px;
    align-items:center;
    width:100%;
    max-width:360px;
    justify-self:center;
    padding-top:13px;
  }
  /* On a narrow page, show the shop-side explanation only when it is useful.
     The common heading and phone keep their rows and reserved screen height. */
  #manager-story .manager-story-attendance-bridge[hidden] {display:none!important}
  #manager-story .manager-story-attendance-bridge>p {grid-column:1/-1}
  #manager-story .manager-story-tablet {width:100%;min-height:85px;padding:11px 9px;border-width:4px;border-radius:11px}
  #manager-story .manager-story-attendance-record {padding:0;font-size:13px}
  #manager-story .manager-story-attendance-record>strong {font-size:13px}
  #manager-story .manager-story-choice {min-height:75px;padding:10px 9px}
  #manager-story .manager-story-choice>strong {font-size:14px}
  #manager-story .manager-story-proof-card img {height:151px;padding:6px}
  #manager-story .manager-story-quick-links {column-gap:15px}
}
@container manager-story (max-width:350px) {
  #manager-story .manager-story-topline {padding:14px 11px 0;gap:5px}
  #manager-story .manager-story-topline>strong {font-size:23px}
  #manager-story .manager-story-tabs {gap:5px;padding:12px 9px 14px}
  #manager-story .manager-story-quick-links {margin-inline:11px;gap:0 13px;padding-top:8px}
  #manager-story .manager-story-quick-links>span {flex:1 1 100%;margin-bottom:4px}
  #manager-story .manager-story-quick-links>a {font-size:13px;gap:4px}
  #manager-story .manager-story-choice {min-height:75px;align-items:center;text-align:center;padding:9px 4px;gap:5px;border-radius:7px}
  #manager-story .manager-story-choice>strong {font-size:14px;letter-spacing:-.03em}
  #manager-story .manager-story-choice>span {font-size:12px}
  #manager-story .manager-story-stage {padding:19px 11px 22px;gap:17px}
  #manager-story .manager-story-aside {grid-template-columns:minmax(0,1fr) 64px;column-gap:5px;padding:0 3px}
  #manager-story .manager-story-actor {width:79px;margin-right:-5px;margin-left:-6px}
  #manager-story .manager-story-scene-copy>h3 {font-size:18px;line-height:1.65}
  #manager-story .manager-story-scene-copy>p {font-size:14px;line-height:1.8}
  #manager-story .manager-story-phone {padding:6px;border-radius:29px}
  #manager-story .manager-story-view {padding-inline:12px;min-height:488px}
  #manager-story .manager-story-appbar {padding-inline:12px}
  #manager-story .manager-story-screen-title {font-size:20px}
  #manager-story .manager-story-summary>strong {font-size:42px}
  #manager-story .manager-story-salary-totals dd {font-size:25px}
  #manager-story .manager-story-salary-net dd {font-size:39px}
  #manager-story .manager-story-metrics dd {font-size:18px}
  #manager-story .manager-story-controls {padding:14px 11px;gap:8px}
  #manager-story .manager-story-controls button {padding-inline:11px;font-size:13px}
  #manager-story .manager-story-owner-note {margin-inline:11px;padding:12px}
  #manager-story .manager-story-proof {margin-inline:11px;grid-template-columns:minmax(0,1fr);gap:15px}
  #manager-story .manager-story-proof-card {display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center}
  #manager-story .manager-story-proof-card img {height:114px;padding:5px}
  #manager-story .manager-story-proof-card figcaption {margin:0;font-size:14px}
  #manager-story .manager-story-proof-card figcaption>strong {font-size:14px}
  #manager-story .manager-story-cta {margin-inline:11px}
  #manager-story .manager-story-cta a {width:100%;padding-inline:10px}
  #manager-story .manager-story-note {padding-inline:11px}
}
@container manager-everyday (max-width:560px) {
  body[data-visual-edition] #manager-more .manager-everyday-grid {grid-template-columns:minmax(0,1fr);gap:18px}
  body[data-visual-edition] #manager-more .manager-everyday-grid>.manager-panel {padding:19px 17px}
  body[data-visual-edition] #manager-more .manager-tabs>a {flex-direction:column;gap:3px;padding:8px 4px;font-size:13px;min-height:57px}
  body[data-visual-edition] #manager-more .manager-rank-toolbar {flex-wrap:wrap;gap:8px}
  body[data-visual-edition] #manager-more .manager-rank-toolbar>span {flex:1 1 100%}
  body[data-visual-edition] #manager-more .manager-rank-toolbar>div {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px}
  body[data-visual-edition] #manager-more .manager-rank-toolbar button {font-size:12px}
}
@container manager-everyday (max-width:350px) {
  body[data-visual-edition] #manager-more .manager-everyday-grid>.manager-panel {padding-inline:14px}
  body[data-visual-edition] #manager-more .manager-rank-list li {grid-template-columns:20px 36px minmax(0,1fr) auto;column-gap:6px}
  body[data-visual-edition] #manager-more .manager-rank-avatar {width:36px}
  body[data-visual-edition] #manager-more .manager-rank-name {font-size:13px}
  body[data-visual-edition] #manager-more .manager-rank-list [data-rank-value] {font-size:23px}
  body[data-visual-edition] #manager-more .manager-shift-detail>strong {font-size:25px}
}
@media(max-width:540px) {
  body[data-visual-edition] #manager-story {margin-inline:-10px;border-radius:18px}
  body[data-visual-edition] #manager-more>.manager-everyday-title {font-size:23px;line-height:1.7}
  body[data-visual-edition] #manager-more .manager-panel {padding-inline:14px}
  body[data-visual-edition] #manager-more .feature-tab-row button>span {display:none}
  body[data-visual-edition] #manager-more .manager-rank-list li {grid-template-columns:20px 36px minmax(0,1fr) auto;column-gap:6px}
  body[data-visual-edition] #manager-more .manager-rank-avatar {width:36px}
  body[data-visual-edition] #manager-more .manager-rank-name {font-size:13px}
  body[data-visual-edition] #manager-more .manager-rank-list [data-rank-value] {font-size:23px}
}
@media(prefers-reduced-motion:reduce) {
  #manager-story *,#manager-story *::before,#manager-story *::after,
  #manager-more *,#manager-more *::before,#manager-more *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
body.motion-off #manager-story *,html[data-motion="off"] #manager-story *,
#manager-story[data-manager-state="motion-off"] *,
body.motion-off #manager-story *::before,html[data-motion="off"] #manager-story *::before,
#manager-story[data-manager-state="motion-off"] *::before,
body.motion-off #manager-story *::after,html[data-motion="off"] #manager-story *::after,
#manager-story[data-manager-state="motion-off"] *::after {animation:none!important;transition:none!important}
body.motion-off #manager-more *,html[data-motion="off"] #manager-more *,
body.motion-off #manager-more *::before,html[data-motion="off"] #manager-more *::before,
body.motion-off #manager-more *::after,html[data-motion="off"] #manager-more *::after {animation:none!important;transition:none!important}
/* A stopped chart must show the exact final proportions, never an entrance
   frame. Reading a statement or pausing locally also settles the decorations. */
#manager-story[data-manager-motion-running="false"] *,
#manager-story[data-manager-motion-running="false"] *::before,
#manager-story[data-manager-motion-running="false"] *::after {animation:none!important}
#manager-story .manager-story-explanations:not([data-manager-zone-visible="true"]) .manager-story-trend-bar {animation:none!important}