/* The back office film, in the "Your back office" section: the Merchant Portal in a browser window, drawn in code like
   the POS films (idea B of design/sections/portal, chosen 18 September 2026). Three screens, switched by the three
   benefits beside it: the Dashboard, Products, and the Employees page on its Timesheets tab. Every label and panel is
   the real portal's (design/sections/portal/reference/README.md); the café, the staff and the figures are made up.
   The drawing is the film's own reading of the tokens: teal for Path's green, square corners,
   sentence-case labels. office.js draws the screens and runs them.
   Every class starts bo- or office-; see the class-name note in hero.css. 1em = 1% of the window's width, and the real
   portal is 1440 px wide, so a size in its px divided by 14.4 is the size here. ---- */
.office { position: relative; container-type: inline-size; aspect-ratio: 100 / 64; }
.office-panel { position: absolute; inset: 0; animation: office-in var(--pp-slow) var(--pp-ease); }
.office-panel[hidden] { display: none; }
@keyframes office-in { from { opacity: 0; transform: translateY(6px); } }

.bo-win { width: 100%; height: 100%; font-size: 1cqw; --brand: var(--pp-teal-deep); --brand-soft: var(--pp-teal-soft); --bar: #A9DADB; --ink: var(--pp-ink); --t2: var(--pp-text-2); --t3: var(--pp-text-3); --t4: var(--pp-text-4); --line: var(--pp-line); --line2: var(--pp-line-field); --sunk: var(--pp-sunken);
  --amber: #9A6419; --amber-soft: #FBF1DE; --blue: #2C6E8F; --blue-soft: #E8F1F7; --pink: var(--pp-pink-deep); --pink-soft: var(--pp-pink-soft);
  box-sizing: border-box; background: #fff; border: 1px solid var(--line2); border-radius: 1em; overflow: hidden; box-shadow: 0 28px 56px -28px rgba(11,12,12,.38), 0 2px 6px rgba(11,12,12,.06); color: var(--t2); line-height: 1.3; font-family: var(--pp-font-body); display: flex; flex-direction: column; }
.bo-win * { box-sizing: border-box; }
.bo-win b, .bo-win .pop { font-family: var(--pp-font-display); }
.bo-ic { width: 1.25em; height: 1.25em; flex: none; display: block; }
.bo-chrome { flex: none; height: 3.2em; background: var(--sunk); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .55em; padding: 0 1.2em; }
.bo-chrome i { width: .85em; height: .85em; border-radius: 50%; background: var(--line2); display: block; }
.bo-chrome span { margin: 0 auto; transform: translateX(-1.6em); width: 34em; height: 1.9em; border-radius: .45em; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: .85em; color: var(--t3); }
.bo-app { flex: 1; min-height: 0; display: flex; }

.bo-side { flex: none; width: 16.67em; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.bo-logo { flex: none; height: 6.4em; display: flex; align-items: center; padding: 0 1.5em; }
.bo-logo img { height: 2.35em; width: auto; display: block; }
.bo-nav { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .1em; padding: .4em .7em; }
.bo-nav a, .bo-foot a { display: flex; align-items: center; gap: .85em; height: 2.75em; padding: 0 .9em; border-radius: .45em; color: var(--t2); font: 500 .97em/1 var(--pp-font-display); position: relative; white-space: nowrap; flex: none; }
.bo-nav a.on { background: var(--brand-soft); color: var(--brand); }
.bo-nav a.on::before { content: ''; position: absolute; left: -.72em; top: .35em; bottom: .35em; width: .22em; background: var(--brand); }
.bo-nav small { font: 500 .78em/1 var(--pp-font-display); color: var(--t4); padding: 1.1em 1.1em .45em; flex: none; }
.bo-foot { flex: none; border-top: 1px solid var(--line); padding: .5em .7em .7em; display: flex; flex-direction: column; gap: .1em; background: #fff; }
.bo-foot a.out { color: #B3261E; }

.bo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bo-top { flex: none; height: 6.4em; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 2.2em 0 4.45em; gap: 1.1em; }
.bo-top .ttl { display: flex; flex-direction: column; gap: .3em; margin-right: auto; }
.bo-top .ttl small { font: 500 .78em/1 var(--pp-font-display); color: var(--t3); }
.bo-top .ttl b { font-size: 1.8em; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.bo-btn { height: 2.7em; padding: 0 1.05em; border-radius: .42em; border: 1px solid var(--line2); background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; flex: none; }
.bo-btn b { font-size: .9em; font-weight: 500; }
.bo-btn .bo-ic { width: 1.05em; height: 1.05em; }
.bo-btn.go { background: var(--brand); border-color: var(--brand); color: #fff; }
.bo-bell { color: var(--t2); }
.bo-rule { width: 1px; height: 2.2em; background: var(--line); }
.bo-me { display: flex; align-items: center; gap: .8em; }
.bo-av { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--pink-soft); color: var(--pink); display: grid; place-items: center; flex: none; }
.bo-av b { font-size: .85em; font-weight: 600; }
.bo-me div { display: flex; flex-direction: column; gap: .2em; }
.bo-me div b { font-size: .85em; font-weight: 600; color: var(--ink); }
.bo-me div span { font-size: .78em; color: var(--t3); }
.bo-page { flex: 1; min-height: 0; overflow: hidden; padding: 2.2em 4.45em 0; display: flex; flex-direction: column; gap: 1.1em; }

.bo-row { display: flex; align-items: center; gap: .8em; flex: none; }
.bo-seg { display: inline-flex; padding: .25em; gap: .15em; border: 1px solid var(--line); border-radius: .5em; background: #fff; }
.bo-seg span { height: 2.3em; padding: 0 1em; border-radius: .35em; display: inline-flex; align-items: center; font: 500 .9em/1 var(--pp-font-display); color: var(--ink); white-space: nowrap; }
.bo-seg span.on { background: var(--brand); color: #fff; }
.bo-pill { height: 2.85em; padding: 0 1em; border: 1px solid var(--line); border-radius: .5em; display: inline-flex; align-items: center; gap: .5em; background: #fff; color: var(--ink); white-space: nowrap; font-size: .9em; }
.bo-pill .bo-ic { width: 1em; height: 1em; color: var(--t3); }
.bo-live { margin-left: auto; font-size: .8em; color: var(--t3); display: inline-flex; align-items: center; gap: .5em; }
.bo-live i { width: .55em; height: .55em; border-radius: 50%; background: var(--brand); display: block; }

.bo-hero { flex: none; background: var(--brand); color: #fff; border-radius: .85em; padding: 1.9em 2.2em; display: flex; align-items: center; gap: 1em; }
.bo-hero .l { display: flex; flex-direction: column; gap: .55em; margin-right: auto; }
.bo-hero small { font: 500 .8em/1 var(--pp-font-display); opacity: .85; }
.bo-hero .big { font: 700 3.9em/1 var(--pp-font-display); letter-spacing: -.02em; }
.bo-hero .s1 { font-size: .97em; } .bo-hero .s1 b { font-weight: 600; font-family: var(--pp-font-body); }
.bo-hero .s2 { font-size: .8em; opacity: .85; }
.bo-glass { width: 11.8em; border-radius: .55em; background: rgba(255,255,255,.14); padding: 1.1em 1.2em; display: flex; flex-direction: column; gap: .45em; flex: none; }
.bo-glass b { font-size: 1.95em; font-weight: 700; line-height: 1; }
.bo-glass span { font-size: .78em; opacity: .85; }

.bo-regs { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: .82em; color: var(--t3); }
.bo-regs span { height: 2.5em; padding: 0 .9em; border: 1px solid var(--line); border-radius: .42em; display: inline-flex; align-items: center; gap: .55em; color: var(--ink); background: #fff; }
.bo-regs span b { font-weight: 600; font-family: var(--pp-font-body); }
.bo-regs span.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

.bo-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.1em; align-items: start; }
.bo-col { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.bo-card { border: 1px solid var(--line); border-radius: .6em; background: #fff; padding: 1.4em 1.6em; display: flex; flex-direction: column; gap: .9em; }
.bo-card.flush { padding: 0; gap: 0; }
.bo-h { display: flex; align-items: center; gap: .7em; }
.bo-h b { font-size: 1.22em; font-weight: 600; color: var(--ink); margin-right: auto; }
.bo-h span { font-size: .8em; color: var(--t3); }
.bo-h em { font-style: normal; font-size: .78em; padding: .3em .7em; border-radius: .3em; background: var(--sunk); color: var(--t2); }
.bo-bars { height: 9.6em; display: flex; align-items: flex-end; gap: .55em; border-bottom: 1px solid var(--line); }
.bo-bars i { flex: 1; display: block; background: var(--bar); border-radius: .25em .25em 0 0; }
.bo-bars i.peak { background: var(--brand); }
.bo-axis { display: flex; gap: .55em; font-size: .72em; color: var(--t4); }
.bo-axis span { flex: 1; text-align: center; }
.bo-order { display: flex; align-items: center; gap: 1em; padding: .95em 1.6em; border-top: 1px solid var(--line); }
.bo-order .tile { width: 2.5em; height: 2.5em; border-radius: .45em; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.bo-order .tile .bo-ic { width: 1.15em; height: 1.15em; }
.bo-order div { display: flex; flex-direction: column; gap: .25em; margin-right: auto; }
.bo-order div b { font-size: .97em; font-weight: 500; color: var(--ink); }
.bo-order div span { font-size: .8em; color: var(--t3); }
.bo-order > b { font-size: 1.15em; font-weight: 600; color: var(--ink); }
.bo-money { font: 700 2em/1 var(--pp-font-display); color: var(--ink); }
.bo-sub { font-size: .8em; color: var(--t3); margin-top: -.5em; }
.bo-note { border-radius: .42em; background: var(--amber-soft); color: var(--amber); font-size: .82em; padding: .7em .9em; display: flex; align-items: center; gap: .6em; }
.bo-note .bo-ic { width: 1.05em; height: 1.05em; }
.bo-line { display: flex; align-items: center; gap: .8em; padding-top: .85em; border-top: 1px solid var(--line); font-size: .97em; color: var(--ink); }
.bo-line > span:first-child { margin-right: auto; }
.bo-line b { font-weight: 600; font-family: var(--pp-font-body); }
.bo-chip { font-size: .78em; padding: .32em .65em; border-radius: .3em; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em; }
.bo-chip::before { content: ''; width: .42em; height: .42em; border-radius: 50%; background: currentColor; }
.bo-chip.plain::before { display: none; }
.bo-chip.amber { background: var(--amber-soft); color: var(--amber); } .bo-chip.blue { background: var(--blue-soft); color: var(--blue); }
.bo-chip.teal { background: var(--brand-soft); color: var(--brand); } .bo-chip.pink { background: var(--pink-soft); color: var(--pink); } .bo-chip.grey { background: var(--sunk); color: var(--t2); }
.bo-meter { display: flex; flex-direction: column; gap: .45em; font-size: .97em; color: var(--ink); }
.bo-meter div { display: flex; } .bo-meter div span { margin-right: auto; } .bo-meter div span small { color: var(--t3); font-size: .85em; } .bo-meter div b { font-weight: 600; font-family: var(--pp-font-body); }
.bo-meter i { display: block; height: .45em; border-radius: .25em; background: var(--sunk); position: relative; overflow: hidden; }
.bo-meter i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--brand); border-radius: .25em; }
.bo-meter i.soft::after { background: var(--bar); }

/* Products and Timesheets */
.bo-tabs { display: inline-flex; padding: .25em; gap: .15em; border: 1px solid var(--line); border-radius: .5em; }
.bo-tabs span { height: 2.3em; padding: 0 1em; border-radius: .35em; display: inline-flex; align-items: center; font: 500 .9em/1 var(--pp-font-display); color: var(--ink); }
.bo-tabs span.on { background: var(--brand); color: #fff; }
.bo-hint { font-size: .82em; color: var(--t3); }
.bo-filter { flex: none; border: 1px solid var(--line); border-radius: .6em; padding: .8em; display: flex; align-items: center; gap: .7em; }
.bo-input { flex: 1; height: 2.85em; border: 1px solid var(--line); border-radius: .42em; display: flex; align-items: center; gap: .6em; padding: 0 .9em; color: var(--t4); font-size: .9em; }
.bo-input .bo-ic { width: 1em; height: 1em; }
.bo-table { flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: .6em; overflow: hidden; display: flex; flex-direction: column; }
.bo-tr { display: grid; align-items: center; gap: 1em; padding: 0 1.4em; border-top: 1px solid var(--line); height: 4.1em; font-size: .97em; color: var(--ink); flex: none; }
.bo-tr.head { height: 2.9em; border-top: 0; font: 500 .76em/1 var(--pp-font-display); color: var(--t3); background: #fff; }
.bo-tr.cat { height: 2.4em; background: var(--sunk); font: 500 .76em/1 var(--pp-font-display); color: var(--t2); display: flex; gap: .6em; }
.bo-tr.cat i { width: .5em; height: .5em; border-radius: 50%; display: block; }
.bo-tr.cat em { font-style: normal; color: var(--t4); }
.bo-tr .nm { display: flex; flex-direction: column; gap: .2em; min-width: 0; } .bo-tr .nm b { font-weight: 500; } .bo-tr .nm span { font-size: .82em; color: var(--t3); white-space: nowrap; }
.bo-tr .ph { width: 2.75em; height: 2.75em; border-radius: .42em; background: var(--sunk) center / cover no-repeat; display: block; }
.bo-tr .r { text-align: right; } .bo-tr .pr { text-align: right; font: 600 1.05em/1 var(--pp-font-display); } .bo-tr .mute { color: var(--t3); } .bo-tr .bad { color: #B3261E; font-size: .82em; }
.bo-tr .bo-ic { width: 1em; height: 1em; color: var(--t4); }
.bo-prod { grid-template-columns: 2.75em minmax(0, 1fr) 7em 5em 5em 5.5em 1em; }
.bo-time { grid-template-columns: 5.2em minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) 5.5em 10em; }
.bo-time .who { display: flex; align-items: center; gap: .8em; }
.bo-time .face { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; } .bo-time .face b { font-size: .8em; font-weight: 600; }
.bo-stats { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.bo-stat { border: 1px solid var(--line); border-radius: .6em; padding: 1.2em 1.4em; display: flex; flex-direction: column; gap: .5em; }
.bo-stat small { font: 500 .76em/1 var(--pp-font-display); color: var(--t3); } .bo-stat b { font-size: 1.9em; font-weight: 700; color: var(--ink); line-height: 1; } .bo-stat span { font-size: .8em; color: var(--t3); }
.bo-stat b.amber, .bo-stat span.amber { color: var(--amber); }

/* The dashboard comes alive: a new order drops into Live orders and the figures follow */
.bo-order.bo-new { animation: bo-drop .5s var(--pp-ease); background: var(--brand-soft); }
.bo-order { transition: background 1.2s var(--pp-ease); }
@keyframes bo-drop { from { opacity: 0; margin-top: -4.4em; } }
.bo-bars i { transition: height .7s var(--pp-ease); }

/* The three benefits are the controls */
.office-steps { gap: 6px; }
.office-step { appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; margin: 0 -14px; width: calc(100% + 28px); background: transparent; border: 1px solid transparent; border-radius: var(--pp-r-lg); transition: border-color var(--pp-fast) var(--pp-ease), background var(--pp-fast) var(--pp-ease); }
.office-step:hover { border-color: var(--pp-line-field); }
.office-step[aria-selected="true"] { background: var(--pp-surface); border-color: var(--pp-ink); }
.office-step:focus-visible { border-radius: var(--pp-r-lg); }

/* On a phone the portal has no side menu either: the window loses it and the type grows, so the figures still read */
@media (max-width: 700px) {
  .office { aspect-ratio: 100 / 112; }
  .bo-win { font-size: 1.95cqw; }
  .bo-side, .bo-top .bo-btn:not(.go), .bo-top .bo-rule, .bo-me div, .bo-chrome span { display: none; }
  .bo-top, .bo-page { padding-left: 1.6em; padding-right: 1.6em; }
  .bo-top { height: 5.4em; gap: .7em; }
  .bo-cols { grid-template-columns: minmax(0, 1fr); }
  .bo-glass:last-child, .bo-regs, .bo-live { display: none; }
  .bo-prod { grid-template-columns: 2.75em minmax(0, 1fr) 5.5em 1em; }
  .bo-prod > :nth-child(3), .bo-prod > :nth-child(4), .bo-prod > :nth-child(5) { display: none; }
  .bo-time { grid-template-columns: 3.6em minmax(0, 1fr) 4.6em 7.4em; }
  .bo-time > :nth-child(3), .bo-time > :nth-child(4) { display: none; }
  .bo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-filter .bo-pill:nth-of-type(n+4), .bo-tabs span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .office-panel, .bo-order.bo-new { animation: none; } .bo-bars i, .bo-order { transition: none; } }