/* ==========================================================================
   Defter :: demo app styles
   The chrome around the demo is dark; the app inside is light, tinted with
   the colour of the business type. The app reads its own width, so the same
   screens become the phone layout inside the phone frame or on a real phone.
   ========================================================================== */

:root {
  --pd-top: 60px;
  --bg: #f4f3f0;
  --sf: #ffffff;
  --ln: #e7e3dc;
  --ln-2: #f0ede7;
  --tx: #17160f;
  --tx-2: #3d3a33;
  --soft: #6d675e;
  --faint: #9a948a;
  --ok: #138a4b; --ok-w: #e4f5ea;
  --warn: #a15c00; --warn-w: #fff1d6;
  --bad: #c0262d; --bad-w: #fde7e7;
  --info: #1d5fc4; --info-w: #e5eefc;
  --n-w: #efede8;
  --c: #ff5a00; --c-ink: #b23f00; --c-on: #000; --c-w: #fff1e8;
  --r: 14px;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.pd-body { background: #0b0b0c; color: var(--tx); font-family: var(--sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m { font-variant-numeric: tabular-nums; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: 6px; }
.noscript { color: #fff; padding: 40px; }

/* ---------------------------------------------------------------- chrome */
#pd { height: 100%; display: flex; flex-direction: column; }
.pd-top {
  height: var(--pd-top); flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: #0b0b0c; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; z-index: 5;
}
.pd-back { display: flex; align-items: center; gap: 8px; text-decoration: none; padding-right: 10px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.pd-back .i { width: 16px; height: 16px; opacity: 0.7; }
.pd-back span { display: flex; flex-direction: column; line-height: 1.15; }
.pd-back b { font-size: 0.95rem; letter-spacing: -0.01em; }
.pd-back small { font-size: 0.75rem; color: var(--c); font-weight: 600; }
.pd-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
.pd-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: rgba(255, 255, 255, 0.72); padding: 7px 13px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pd-seg button .i { width: 15px; height: 15px; }
.pd-seg button:hover { color: #fff; }
.pd-seg button[aria-pressed="true"] { background: var(--c); color: var(--c-on); }
.pd-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.pd-sel select { background: rgba(255, 255, 255, 0.07); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; }
.pd-sel option { color: #000; }
.pd-role-sel { display: none; }
.pd-sp { flex: 1; }
.pd-ghost { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); padding: 7px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.pd-ghost .i { width: 15px; height: 15px; }
.pd-ghost:hover { border-color: #fff; color: #fff; }
.pd-price { background: #fff; color: #000; text-decoration: none; font-weight: 700; font-size: 0.85rem; padding: 9px 15px; border-radius: 999px; white-space: nowrap; }
.pd-price:hover { background: var(--c); color: var(--c-on); }

.pd-stage { flex: 1; min-height: 0; position: relative; display: flex; }
.pd-device { flex: 1; min-width: 0; display: flex; }
.pd-screen { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--bg); container-type: inline-size; container-name: app; }
.app { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.layer > * { pointer-events: auto; }

/* phone frame */
.pd-stage[data-device="phone"] { background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), #0b0b0c; align-items: center; justify-content: center; gap: 48px; padding: 20px; }
.pd-stage[data-device="phone"] .pd-device { flex: none; width: 400px; height: min(860px, calc(100vh - var(--pd-top) - 40px)); padding: 11px; border-radius: 52px; background: #1a1a1c; box-shadow: 0 0 0 1px #2d2d30, 0 0 0 7px #0f0f10, 0 60px 120px -40px rgba(0, 0, 0, 0.9); position: relative; }
.pd-stage[data-device="phone"] .pd-device::before { content: ""; position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 30; }
.pd-stage[data-device="phone"] .pd-screen { border-radius: 41px; }
.pd-stage[data-device="phone"] .app { top: 0; }
.pd-stage[data-device="phone"] .ap-head { padding-top: 54px; }
.pd-stage[data-real-phone] { padding: 0; gap: 0; background: var(--bg); }
.pd-stage[data-real-phone] .pd-device { width: 100%; height: 100%; padding: 0; border-radius: 0; box-shadow: none; background: none; }
.pd-stage[data-real-phone] .pd-device::before { display: none; }
#pd[data-phone-only] .pd-dev { display: none; }
.pd-stage[data-real-phone] .pd-device { max-width: 480px; margin: 0 auto; }
.pd-stage[data-real-phone] .pd-screen { border-radius: 0; }
.pd-stage[data-real-phone] .ap-head { padding-top: 14px; }

/* the walkthrough */
.pd-guide { position: absolute; left: 16px; bottom: 16px; z-index: 40; width: 330px; max-height: calc(100% - 32px); display: flex; flex-direction: column; background: #111113; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); overflow: hidden; }
.pd-guide-t { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: #fff; padding: 13px 16px; cursor: pointer; text-align: left; font-weight: 700; }
.pd-guide-t .i { color: var(--c); }
.pd-guide-t small { margin-left: auto; color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.pd-steps, .pd-gnote { display: none; }
.pd-guide.open .pd-steps { display: grid; gap: 6px; padding: 0 10px 8px; overflow: auto; }
.pd-guide.open .pd-gnote { display: block; padding: 4px 16px 14px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.pd-steps button { display: flex; gap: 11px; width: 100%; text-align: left; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.86); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 0.86rem; line-height: 1.4; }
.pd-steps button:hover { border-color: var(--c); }
.pd-steps .gs-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.75rem; font-weight: 700; }
.pd-steps .gs-t b { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); margin-bottom: 2px; }
.pd-steps li.done .gs-n { background: rgba(255, 255, 255, 0.14); border-color: transparent; }
.pd-steps li.cur button { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pd-steps li.cur .gs-n { background: var(--c); color: var(--c-on); border-color: var(--c); }
.pd-stage[data-device="phone"]:not([data-real-phone]) .pd-guide { position: relative; left: auto; bottom: auto; width: 330px; max-height: min(860px, calc(100vh - var(--pd-top) - 40px)); }
.pd-stage[data-device="phone"]:not([data-real-phone]) .pd-guide .pd-steps { display: grid; padding: 0 10px 8px; }
.pd-stage[data-device="phone"]:not([data-real-phone]) .pd-guide .pd-gnote { display: block; padding: 4px 16px 14px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.pd-stage[data-device="phone"]:not([data-real-phone]) .pd-guide-t { pointer-events: none; }

@media (max-width: 1100px) {
  .pd-reg span, .pd-roles + .pd-sel span { display: none; }
  .pd-dev button span { display: none; }
}
@media (max-width: 960px) {
  .pd-roles { display: none; }
  .pd-role-sel { display: inline-flex; }
}
@media (max-width: 759px) {
  :root { --pd-top: 54px; }
  .pd-top { gap: 8px; padding: 0 10px; }
  .pd-back { border: 0; padding-right: 0; }
  .pd-back b { font-size: 0.88rem; }
  .pd-dev, .pd-reg, .pd-ghost span, .pd-role-sel span { display: none; }
  .pd-ghost { padding: 7px; }
  .pd-price { padding: 8px 11px; font-size: 0.78rem; }
  .pd-sel select { padding: 6px 8px; max-width: 128px; }
  .pd-guide { left: 10px; right: 10px; bottom: 78px; width: auto; }
  .pd-guide:not(.open) { left: auto; right: 10px; width: auto; }
  .pd-guide:not(.open) .pd-guide-t span, .pd-guide:not(.open) .pd-guide-t small { display: none; }
  .pd-guide:not(.open) .pd-guide-t { padding: 11px; }
}

/* ------------------------------------------------------------ app shell */
.ap { height: 100%; display: grid; grid-template-columns: 236px minmax(0, 1fr); background: var(--bg); color: var(--tx); }
.ap-side { display: flex; flex-direction: column; gap: 6px; background: var(--sf); border-right: 1px solid var(--ln); padding: 16px 12px 14px; min-height: 0; }
.ap-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; border-bottom: 1px solid var(--ln-2); margin-bottom: 8px; }
.ap-brand b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--c); color: var(--c-on); font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; flex: none; }
.ap-brand span { display: flex; flex-direction: column; min-width: 0; }
.ap-brand strong { font-size: 0.92rem; line-height: 1.2; letter-spacing: -0.01em; }
.ap-brand small { font-size: 0.75rem; color: var(--soft); }
.ap-navs { display: grid; gap: 2px; overflow: auto; }
.ap-nav { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--tx-2); font-weight: 600; font-size: 0.9rem; }
.ap-nav:hover { background: var(--bg); }
.ap-nav.on { background: var(--c-w); color: var(--c-ink); }
.ap-nav.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.ap-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c); color: var(--c-on); font-style: normal; font-size: 0.72rem; font-weight: 800; display: inline-grid; place-items: center; }
.ap-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--ln-2); }
.ap-me span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ap-me strong { font-size: 0.86rem; }
.ap-me small { font-size: 0.74rem; color: var(--soft); }
.ap-shift { display: flex; align-items: center; gap: 5px; }
.ap-shift .ok { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }

.ap-main { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.ap-head { position: sticky; top: 0; z-index: 9; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 26px 14px; background: var(--bg); box-shadow: 0 1px 0 transparent; transition: box-shadow 0.2s; }
.ap-main.scrolled .ap-head { box-shadow: 0 1px 0 var(--ln), 0 10px 20px -18px rgba(0, 0, 0, 0.35); }
.ap-head-t p { font-size: 0.78rem; color: var(--soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-head-t h1 { font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.15; margin-top: 2px; }
.ap-head-a { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-body { padding: 4px 26px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.ap-body > * { min-width: 0; }
.ap-tabs { display: none; }

/* ------------------------------------------------------------- pieces */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ln); background: var(--sf); color: var(--tx); font-weight: 650; font-size: 0.87rem; cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color 0.15s, background-color 0.15s, transform 0.15s; }
.b:hover { border-color: #cfc9bf; }
.b:active { transform: translateY(1px); }
.b .i { width: 16px; height: 16px; }
.b-pri { background: var(--c); border-color: var(--c); color: var(--c-on); }
.b-pri:hover { border-color: var(--c); filter: brightness(1.05); }
.b-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.b-sm { min-height: 30px; padding: 0 10px; font-size: 0.8rem; border-radius: 8px; }
.b-big { min-height: 56px; padding: 0 28px; font-size: 1.05rem; border-radius: 16px; }
.b-full { width: 100%; }
.b[disabled] { opacity: 0.45; pointer-events: none; }

.card { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); padding: 16px 18px; min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-h h2 { font-size: 0.98rem; letter-spacing: -0.01em; }
.card-h .aside, .aside { font-size: 0.78rem; color: var(--soft); }
.card.flat { padding: 0; overflow: hidden; }
.card.flat .card-h { padding: 14px 18px 0; }
.empty { color: var(--soft); font-size: 0.88rem; padding: 6px 0; }
.card.empty { padding: 24px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.grid2e { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.kpi p { font-size: 0.75rem; font-weight: 700; color: var(--soft); letter-spacing: 0.02em; }
.kpi b { display: block; font-size: 1.6rem; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi small { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--soft); }
.kpi small.up { color: var(--ok); }
.kpi small.warn { color: var(--warn); }
.kpi small.bad { color: var(--bad); }
.kpi.hi { background: var(--tx); color: #fff; border-color: var(--tx); }
.kpi.hi p, .kpi.hi small { color: rgba(255, 255, 255, 0.65); }
.kpi.hi small.up { color: #7be2a5; }

.bd { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; background: var(--n-w); color: var(--tx-2); }
.bd i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bd-ok { background: var(--ok-w); color: var(--ok); }
.bd-warn { background: var(--warn-w); color: var(--warn); }
.bd-bad { background: var(--bad-w); color: var(--bad); }
.bd-info { background: var(--info-w); color: var(--info); }
.bd-c { background: var(--c-w); color: var(--c-ink); }

.av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--av); color: #fff; font-size: 0.74rem; font-weight: 800; flex: none; letter-spacing: 0.02em; }
.av-s { width: 26px; height: 26px; font-size: 0.64rem; }
.av-l { width: 52px; height: 52px; font-size: 1rem; }
.who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.who b { font-size: 0.88rem; }
.who small { font-size: 0.75rem; color: var(--soft); }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.tbl th { text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--soft); letter-spacing: 0.04em; text-transform: uppercase; padding: 0 10px 8px; border-bottom: 1px solid var(--ln); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--ln-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl td.st { text-align: right; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--bg); }
.tbl tr.hl td { background: var(--warn-w); }
.num { font-variant-numeric: tabular-nums; }

.rows { display: grid; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ln-2); min-width: 0; }
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { font-size: 0.78rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { display: flex; align-items: center; gap: 8px; flex: none; }
.row.click { cursor: pointer; border-radius: 10px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.row.click:hover { background: var(--bg); }
.row-link { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--ln-2); text-decoration: none; font-weight: 650; }
.row-link .go { margin-left: auto; color: var(--faint); }
.tm { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.84rem; color: var(--tx-2); min-width: 44px; }

.feed { display: grid; }
.feed li { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ln-2); font-size: 0.86rem; }
.feed li:last-child { border-bottom: 0; }
.feed time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--soft); font-size: 0.8rem; }
.fd-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--n-w); color: var(--tx-2); }
.fd-ic .i { width: 14px; height: 14px; }
.fd-t { min-width: 0; color: var(--tx-2); }
.fd-t b { color: var(--tx); }
.fd-a { font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-ok .fd-ic { background: var(--ok-w); color: var(--ok); }
.fd-warn .fd-ic { background: var(--warn-w); color: var(--warn); }
.fd-bad .fd-ic { background: var(--bad-w); color: var(--bad); }
.fd-info .fd-ic { background: var(--info-w); color: var(--info); }
.fd-warn .fd-a, .fd-bad .fd-a { color: var(--bad); }

.chart { width: 100%; height: 190px; display: block; }
.chart .gl { stroke: var(--ln-2); stroke-width: 1; }
.chart .ba { fill: color-mix(in srgb, var(--c) 55%, #fff); }
.chart .ba.now { fill: var(--c); }
.chart .bb { fill: color-mix(in srgb, var(--tx) 80%, #fff); }
.chart text { font-size: 11px; fill: var(--soft); text-anchor: middle; font-family: var(--sans); font-weight: 600; }
.legend { font-size: 0.76rem; color: var(--soft); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hb { display: grid; gap: 10px; }
.hb li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; }
.hb-l { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; min-width: 0; }
.hb-v { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-t { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: var(--ln-2); overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.hb-s { grid-column: 1 / -1; font-size: 0.74rem; color: var(--soft); margin-top: -2px; }

/* boards */
.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr); gap: 9px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.kb-col { min-width: 0; background: color-mix(in srgb, var(--ln) 40%, var(--bg)); border-radius: 14px; padding: 10px; min-height: 140px; transition: background-color 0.15s, box-shadow 0.15s; }
.kb-col.drop-on { background: var(--c-w); box-shadow: inset 0 0 0 2px var(--c); }
.kb-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; font-size: 0.8rem; font-weight: 750; color: var(--tx-2); }
.kb-h span { font-size: 0.75rem; color: var(--soft); background: var(--sf); border-radius: 999px; padding: 1px 8px; }
.kb-cards { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.kc { min-width: 0; overflow: hidden; background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; padding: 11px 12px; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.kc:hover { border-color: #cfc9bf; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.35); }
.kc.dragging { opacity: 0.45; }
.kc[draggable="true"] { cursor: grab; }
.kc-t { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.kc-t b { min-width: 0; overflow-wrap: anywhere; }
.kc-t b { font-size: 0.9rem; letter-spacing: -0.01em; }
.kc-t small { flex: none; white-space: nowrap; font-size: 0.72rem; color: var(--soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.kc p { font-size: 0.8rem; color: var(--soft); margin-top: 3px; overflow-wrap: anywhere; }
.kc-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; }
.kc-f > * { min-width: 0; }
.kc-flag { border-color: color-mix(in srgb, var(--warn) 40%, var(--ln)); box-shadow: inset 3px 0 0 var(--warn); }
.plate { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; border: 1.5px solid var(--tx); border-radius: 5px; padding: 1px 6px; background: #fff; }

/* calendar: one column per person or room */
.av-xs { width: 18px; height: 18px; font-size: 0.5rem; }

/* ------------------------------------------- the day calendar, on a computer */
.c2 { --bar: var(--c); display: flex; flex-direction: column; min-height: 440px; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; box-shadow: 0 18px 40px -34px rgba(0, 0, 0, 0.35); }
.c2-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.c2-head { flex: none; position: relative; z-index: 6; display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(0, 1fr)); background: var(--sf); border-bottom: 1px solid var(--ln); box-shadow: 0 8px 16px -14px rgba(0, 0, 0, 0.25); }
.c2-corner { border-right: 1px solid var(--ln-2); }
.c2-hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px; row-gap: 8px; padding: 12px 14px 11px; border-right: 1px solid var(--ln-2); min-width: 0; }
.c2-hd:last-child { border-right: 0; }
.c2-hd-t { min-width: 0; }
.c2-hd-t b, .c2-hd-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-hd-t b { font-size: 0.86rem; letter-spacing: -0.01em; }
.c2-hd-t small { font-size: 0.72rem; color: var(--soft); font-weight: 600; }
.c2-cnt { grid-row: 1; grid-column: 3; font-size: 0.72rem; font-weight: 800; color: var(--soft); background: var(--n-w); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.c2-load { grid-row: 2; grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--ln-2); overflow: hidden; }
.c2-load i { display: block; height: 100%; border-radius: inherit; background: var(--av); }
.c2-grid { position: relative; margin-top: 6px; display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(0, 1fr)); }
.c2-times { position: relative; border-right: 1px solid var(--ln-2); }
.c2-t { position: absolute; right: 10px; transform: translateY(-50%); font-size: 0.7rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.c2-t:first-child { transform: translateY(4px); }
.c2-col { position: relative; border-right: 1px solid var(--ln-2);
  background-image: linear-gradient(to bottom, var(--ln-2) 1px, transparent 1px), linear-gradient(to bottom, transparent calc(var(--row) - 1px), color-mix(in srgb, var(--ln-2) 60%, transparent) calc(var(--row) - 1px), color-mix(in srgb, var(--ln-2) 60%, transparent) var(--row), transparent var(--row));
  background-size: 100% calc(var(--row) * 2); }
.c2-col:last-child { border-right: 0; }
.c2-ev { --bar: var(--c); position: absolute; left: 5px; right: 5px; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; padding: 7px 10px 6px 12px; border: 0; border-radius: 10px; background: var(--c-w); color: var(--tx); font: inherit; cursor: pointer; overflow: hidden; box-shadow: inset 3px 0 0 var(--bar); transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.18s; }
.c2-ev:hover, .c2-ev:focus-visible { z-index: 3; transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--bar), 0 12px 24px -14px rgba(0, 0, 0, 0.45); outline: 0; }
/* a long visit keeps its name in view while the day scrolls past it */
.c2-ev { overflow: clip; }
.c2-ev-in { position: sticky; top: 6px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.c2-ev.short .c2-ev-in { position: static; flex-direction: row; align-items: center; gap: 7px; width: 100%; }
.c2-ev-t { display: flex; gap: 6px; font-size: 0.7rem; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.c2-ev-t i { font-style: normal; font-weight: 600; opacity: 0.7; }
.c2-ev b { font-size: 0.84rem; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-ev small { font-size: 0.74rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-ev-s { padding-top: 6px; }
.c2-ev.short { flex-direction: row; align-items: center; gap: 7px; padding: 0 10px 0 12px; }
.c2-ev.short .c2-ev-t { flex: none; }
.c2-ev.short .c2-ev-t i { display: none; }
.c2-ev.short b { flex: 0 1 auto; min-width: 0; }
.c2-ev.short small { flex: 1 1 0; min-width: 0; }
.c2-ev.short small::before { content: "· "; }
.c2-ev.s-inroom, .c2-ev.s-arrived { --bar: var(--ok); background: var(--ok-w); }
.c2-ev.s-inroom .c2-ev-t, .c2-ev.s-arrived .c2-ev-t { color: var(--ok); }
.c2-ev.s-done { --bar: #c9c4bb; background: #f4f3f0; }
.c2-ev.s-done b, .c2-ev.s-done .c2-ev-t { color: var(--soft); }
.c2-ev.s-pending { --bar: var(--warn); background: repeating-linear-gradient(135deg, var(--warn-w) 0 8px, #fffaf0 8px 16px); }
.c2-ev.s-pending .c2-ev-t { color: var(--warn); }
.c2-ev.s-noshow { --bar: var(--bad); background: var(--bad-w); }
.c2-ev.s-noshow b { color: var(--bad); text-decoration: line-through; }
.c2-free { position: absolute; left: 5px; right: 5px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed transparent; border-radius: 10px; background: none; color: var(--c-ink); font: inherit; font-size: 0.74rem; font-weight: 800; cursor: pointer; opacity: 0; transition: opacity 0.15s, border-color 0.15s, background-color 0.15s; }
.c2-free:hover, .c2-free:focus-visible { opacity: 1; outline: 0; border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.c2-now { position: absolute; left: 52px; right: 0; height: 0; border-top: 2px solid var(--bad); z-index: 0; pointer-events: none; }
.c2-now span, .c2-now::after { z-index: 5; }
.c2-now::after { content: ""; position: absolute; left: 2px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.c2-now span { position: absolute; left: -50px; top: -10px; padding: 2px 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 0.66rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.c2-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 12px; }
.c2-foot .aside { margin: 0; }
.c2-leg { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.74rem; font-weight: 650; color: var(--soft); }
.c2-leg span { display: inline-flex; align-items: center; gap: 7px; }
.c2-leg span::before { content: ""; flex: none; width: 18px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--c) 30%, #fff); box-shadow: inset 3px 0 0 var(--c); }
.c2-leg .lg-inroom::before { background: color-mix(in srgb, var(--ok) 25%, #fff); box-shadow: inset 3px 0 0 var(--ok); }
.c2-leg .lg-done::before { background: #e6e3dd; box-shadow: inset 3px 0 0 #c9c4bb; }
.c2-leg .lg-pending::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--warn) 30%, #fff) 0 3px, #fffaf0 3px 6px); box-shadow: inset 3px 0 0 var(--warn); }
.c2-leg .lg-noshow::before { background: color-mix(in srgb, var(--bad) 22%, #fff); box-shadow: inset 3px 0 0 var(--bad); }

/* ---------------------------------------------- the day calendar, on a phone */
.c2m { display: none; }
.c2m-res { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px 14px; padding: 2px 14px 4px; scrollbar-width: none; }
.c2m-res::-webkit-scrollbar { display: none; }
.c2m-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--ln); background: var(--sf); color: var(--tx); font: inherit; font-size: 0.84rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.c2m-chip:first-child { padding-left: 14px; }
.c2m-chip .av { width: 24px; height: 24px; font-size: 0.58rem; }
.c2m-chip .c2m-n { font-size: 0.7rem; font-weight: 800; color: var(--soft); background: var(--n-w); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.c2m-chip.on { background: var(--tx); border-color: var(--tx); color: #fff; }
.c2m-chip.on .c2m-n { background: rgba(255, 255, 255, 0.18); color: #fff; }
.c2m-list, .c2m-past { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.c2m-it, .c2m-gap { --bar: var(--c); position: relative; display: grid; grid-template-columns: 48px 18px minmax(0, 1fr); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.c2m-tm { display: grid; align-content: start; gap: 1px; padding-top: 12px; }
.c2m-tm b { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.c2m-tm small { font-size: 0.68rem; font-weight: 650; color: var(--faint); }
.c2m-dot { position: relative; }
.c2m-dot::before { content: ""; position: absolute; left: 8px; top: -8px; bottom: -8px; width: 2px; background: var(--ln); }
.c2m-dot::after { content: ""; position: absolute; left: 4px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--bar); box-shadow: 0 0 0 3px var(--bg); }
.c2m-card { display: grid; gap: 3px; min-width: 0; padding: 11px 13px 12px 14px; border: 1px solid var(--ln); border-radius: 14px; background: var(--sf); box-shadow: inset 3px 0 0 var(--bar); transition: transform 0.15s; }
.c2m-it:active .c2m-card { transform: scale(0.985); }
.c2m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.c2m-top { flex-wrap: wrap; row-gap: 4px; }
.c2m-top b { min-width: 0; font-size: 0.95rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.c2m-card > small { font-size: 0.8rem; color: var(--soft); }
.c2m-who { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 0.76rem; font-weight: 650; color: var(--tx-2); }
.c2m-it.s-inroom, .c2m-it.s-arrived { --bar: var(--ok); }
.c2m-it.s-done { --bar: #c9c4bb; }
.c2m-it.s-done .c2m-card { background: #f8f7f4; }
.c2m-it.s-pending { --bar: var(--warn); }
.c2m-it.s-pending .c2m-card { background: repeating-linear-gradient(135deg, var(--warn-w) 0 8px, #fffaf0 8px 16px); }
.c2m-it.s-noshow { --bar: var(--bad); }
.c2m-it.s-noshow .c2m-top b { text-decoration: line-through; color: var(--bad); }
.c2m-gap .c2m-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 9px 9px 9px 14px; background: transparent; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--ln)); box-shadow: none; }
.c2m-gap .c2m-card b { font-size: 0.86rem; color: var(--c-ink); }
.c2m-gap .c2m-card small { font-size: 0.74rem; color: var(--soft); grid-column: 1; }
.c2m-gap em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 0.8rem; font-weight: 800; padding: 8px 13px; border-radius: 999px; background: var(--c); color: var(--c-on); }
.c2m-gap .c2m-dot::after { background: var(--bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, var(--ln)), 0 0 0 3px var(--bg); }
.c2m-gap .c2m-tm b { color: var(--soft); font-weight: 650; }
.c2m-now { display: grid; grid-template-columns: 48px 18px minmax(0, 1fr); align-items: center; height: 12px; }
.c2m-now span { justify-self: start; padding: 1px 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 0.68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.c2m-now i { grid-column: 2 / -1; position: relative; height: 2px; background: var(--bad); }
.c2m-now i::before { content: ""; position: absolute; left: 4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.c2m-past { margin-bottom: 12px; }
.c2m-past summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid var(--ln); border-radius: 12px; background: var(--sf); font-size: 0.84rem; font-weight: 700; color: var(--soft); list-style: none; cursor: pointer; }
.c2m-past summary::-webkit-details-marker { display: none; }
.c2m-past summary b { color: var(--tx-2); }
.c2m-past summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--soft); border-bottom: 2px solid var(--soft); transform: rotate(45deg); margin: -4px 2px 0 auto; transition: transform 0.2s; }
.c2m-past[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.c2m-past[open] summary { margin-bottom: 4px; }
.c2m-past .c2m-it { opacity: 0.8; }

/* forms */
.fm { display: grid; gap: 12px; }
.fm-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 5px; font-size: 0.8rem; font-weight: 700; color: var(--tx-2); }
.fld input, .fld select, .fld textarea, .inp { width: 100%; border: 1px solid var(--ln); background: #fff; border-radius: 10px; padding: 9px 11px; font-size: 0.92rem; font-weight: 500; color: var(--tx); }
.fld textarea { min-height: 76px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .inp:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.search { position: relative; }
.search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.search .inp { padding-left: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span, button.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ln); background: var(--sf); font-size: 0.84rem; font-weight: 650; cursor: pointer; }
.chip input:checked + span, button.chip.on { background: var(--tx); color: #fff; border-color: var(--tx); }
.chip input:focus-visible + span { outline: 2px solid var(--c); outline-offset: 2px; }
.seg { display: inline-flex; background: var(--ln-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 0.82rem; font-weight: 700; color: var(--soft); cursor: pointer; }
.seg button.on { background: var(--sf); color: var(--tx); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; }
.stepper button { width: 34px; height: 34px; border: 0; background: var(--bg); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.stepper b { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

/* detail blocks */
.dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.87rem; }
.dl dt { color: var(--soft); }
.dl dd { margin: 0; font-weight: 600; }
.lines { display: grid; }
.ln { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ln-2); font-size: 0.88rem; }
.ln:last-child { border-bottom: 0; }
.ln small { display: block; color: var(--soft); font-size: 0.76rem; }
.ln-tot { display: flex; justify-content: space-between; padding: 12px 0 0; font-weight: 800; font-size: 1rem; border-top: 2px solid var(--tx); margin-top: 6px; }
.tl { display: grid; gap: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 0 0 12px; font-size: 0.84rem; }
.tl li::before { content: ""; position: absolute; left: 52px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tl li::after { content: ""; position: absolute; left: 55px; top: 16px; bottom: 0; width: 1px; background: var(--ln); }
.tl li:last-child::after { display: none; }
.tl time { font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.tl span { padding-left: 18px; color: var(--tx-2); }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: var(--c-w); color: var(--c-ink); font-size: 0.85rem; font-weight: 600; }
.note .i { margin-top: 1px; }
.note.warn { background: var(--warn-w); color: var(--warn); }
.note.ok { background: var(--ok-w); color: var(--ok); }
.note.bad { background: var(--bad-w); color: var(--bad); }
.progress { height: 8px; border-radius: 999px; background: var(--ln-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { text-align: left; border: 1px solid var(--ln); background: var(--sf); border-radius: 12px; padding: 12px; cursor: pointer; display: grid; gap: 4px; min-width: 0; }
.tile:hover { border-color: var(--c); }
.tile b { font-size: 0.88rem; }
.tile small { color: var(--soft); font-size: 0.76rem; }
.tile.on { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); background: var(--c-w); }
.tile.off { opacity: 0.5; }
.big-n { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tabs-in { display: flex; gap: 4px; border-bottom: 1px solid var(--ln); margin-bottom: 12px; overflow-x: auto; }
.tabs-in button { border: 0; background: none; padding: 9px 12px; font-weight: 700; font-size: 0.85rem; color: var(--soft); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs-in button.on { color: var(--tx); border-color: var(--c); }

/* the shift clock */
.clockbox { background: var(--sf); border: 1px solid var(--ln); border-radius: 20px; padding: 28px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.clockbox.on { background: var(--tx); color: #fff; border-color: var(--tx); }
.clk-t { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; line-height: 1; }
.clk-s { color: var(--soft); font-weight: 600; }
.clockbox.on .clk-s { color: rgba(255, 255, 255, 0.7); }
.clk-n { font-size: 0.78rem; color: var(--faint); max-width: 34ch; }

/* ----------------------------------------------------- modals, sheets */
.lay { position: absolute; inset: 0; background: rgba(15, 14, 12, 0.42); display: grid; place-items: center; padding: 20px; animation: fade 0.16s ease; }
.lay.out { opacity: 0; transition: opacity 0.16s; }
.md { width: min(520px, 100%); max-height: calc(100% - 20px); overflow: auto; background: var(--sf); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5); animation: pop 0.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lay.wide .md { width: min(760px, 100%); }
.md-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; background: var(--sf); border-bottom: 1px solid var(--ln-2); }
.md-h h2 { font-size: 1.08rem; letter-spacing: -0.02em; }
.md-x { border: 0; background: var(--bg); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.md-b { padding: 16px 18px 18px; display: grid; gap: 14px; }
.md-f { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.md-f-l { justify-content: flex-start; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; background: var(--tx); color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 0.86rem; font-weight: 600; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5); animation: pop 0.2s ease; white-space: nowrap; max-width: calc(100% - 24px); }
.toast .i { color: #7be2a5; }
.toast.out { opacity: 0; transition: opacity 0.3s; }

/* checkout and receipt */
.co { display: grid; gap: 12px; }
.co-who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.co-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ln-2); font-size: 0.9rem; }
.co-lines small { color: var(--soft); }
.co-row { display: flex; gap: 14px; flex-wrap: wrap; }
.co-row label { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; color: var(--tx-2); }
.co-row select { border: 1px solid var(--ln); border-radius: 8px; padding: 6px 8px; background: #fff; }
.co-sub { font-size: 0.9rem; color: var(--soft); text-align: right; }
.co-note { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--soft); }
.co-note .i { width: 15px; height: 15px; color: var(--c-ink); }
.rc { background: var(--bg); border-radius: 14px; padding: 18px; display: grid; place-items: center; }
.rc-paper { width: min(320px, 100%); background: #fff; padding: 18px 18px 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.4); position: relative; }
.rc-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 4px, #fff 0) 0 0 / 10px 8px, linear-gradient(45deg, transparent 4px, #fff 0) 0 0 / 10px 8px; }
.rc-biz { text-align: center; display: grid; margin-bottom: 10px; }
.rc-biz b { font-size: 0.92rem; }
.rc-biz small, .rc-meta { color: #666; }
.rc-meta { display: flex; justify-content: space-between; border-bottom: 1px dashed #bbb; padding-bottom: 8px; margin-bottom: 6px; }
.rc-lines li, .rc-l, .rc-tot { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.rc-tot { font-weight: 800; font-size: 0.95rem; border-top: 1px dashed #bbb; margin-top: 6px; padding-top: 8px; }
.rc-fis { display: flex; gap: 12px; align-items: center; border-top: 1px dashed #bbb; margin-top: 10px; padding-top: 10px; }
.rc-fis p { display: grid; gap: 2px; }
.rc-fis small { color: #777; font-size: 0.7rem; }
.qr { width: 64px; height: 64px; flex: none; fill: #111; shape-rendering: crispEdges; }

/* a chat with the customer */
.chat { border-radius: 14px; overflow: hidden; border: 1px solid var(--ln); }
.chat-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; }
.chat-h span { display: grid; }
.chat-h small { opacity: 0.8; font-size: 0.74rem; }
.chat-wa .chat-h { background: #1f6f5c; }
.chat-tg .chat-h { background: #2f7fb8; }
.chat-b { padding: 14px 12px; display: grid; gap: 8px; min-height: 140px; align-content: start; }
.chat-wa .chat-b { background: #efe8de; }
.chat-tg .chat-b { background: #dfe9f2; }
.bub { max-width: 86%; padding: 8px 10px 6px; border-radius: 12px; font-size: 0.86rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.bub small { display: block; text-align: right; font-size: 0.68rem; color: #6b7a72; margin-top: 3px; }
.bub.out { justify-self: end; background: #d9fdd3; border-top-right-radius: 4px; }
.chat-tg .bub.out { background: #e2f6ce; }
.bub.in { justify-self: start; background: #fff; border-top-left-radius: 4px; animation: pop 0.25s ease; }
.bub ul { margin: 4px 0; padding-left: 16px; list-style: disc; }
.chat-q { font-size: 0.78rem; font-weight: 700; color: var(--soft); }

/* scanning on a phone */
.scan { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #3a3d42, #16171a); overflow: hidden; display: grid; place-items: center; color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; font-weight: 600; }
.scan::before { content: ""; position: absolute; inset: 22% 14%; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 14px; }
.scan::after { content: ""; position: absolute; left: 16%; right: 16%; height: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); top: 30%; animation: scanline 1.6s ease-in-out infinite alternate; }
@keyframes scanline { to { top: 68%; } }
.scan span { position: relative; z-index: 1; margin-top: 62%; }

/* --------------------------------------------- the phone layout */
@container app (max-width: 759px) {
  .ap { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ap-side { display: none; }
  .ap-head { padding: 14px 16px 10px; align-items: center; }
  .ap-head-t h1 { font-size: 1.3rem; }
  .ap-head-a .b span { display: none; }
  .ap-head-a .b { padding: 0 10px; }
  .ap-head-a .b.keep span { display: inline; }
  .ap-body { padding: 2px 14px 24px; gap: 12px; }
  .ap-tabs { display: grid; grid-template-columns: repeat(var(--n), 1fr); background: var(--sf); border-top: 1px solid var(--ln); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .ap-tab { position: relative; display: grid; justify-items: center; gap: 3px; padding: 5px 2px; text-decoration: none; color: var(--soft); font-size: 0.68rem; font-weight: 700; border: 0; background: none; cursor: pointer; }
  .ap-tab .i { width: 22px; height: 22px; }
  .ap-tab.on { color: var(--c-ink); }
  .ap-tab.on .i { stroke-width: 2.2; }
  .ap-tab .ap-badge { position: absolute; top: 0; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; font-size: 0.64rem; padding: 0 4px; }
  .grid2, .grid2e, .grid3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 13px; }
  .kpi b { font-size: 1.3rem; }
  .card { padding: 14px; }
  .fm-2 { grid-template-columns: 1fr; }
  .kb { grid-auto-columns: 82%; scroll-snap-type: x mandatory; }
  .kb-col { scroll-snap-align: start; }
  .c2-desk { display: none; }
  .c2m { display: block; }
  .feed li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .feed .fd-ic { display: none; }
  /* tables become stacked rows */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--ln-2); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { padding: 0; border: 0; font-size: 0.82rem; }
  .tbl td:first-child { grid-column: 1; }
  .tbl td.st, .tbl td.r:last-child { grid-column: 2; grid-row: 1; text-align: right; }
  .tbl td[data-l]::before { content: attr(data-l) " "; color: var(--soft); font-weight: 600; }
  .tbl td[data-l]:empty { display: none; }
  .lay { padding: 0; place-items: end stretch; }
  .md { width: 100%; max-height: 88%; border-radius: 22px 22px 0 0; animation: up 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .lay.wide .md { width: 100%; }
  .toast { bottom: 84px; }
  .clk-t { font-size: 3rem; }
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .md, .lay, .bub.in, .toast { animation: none; }
  .scan::after { animation: none; }
}

/* ------------------------------------------------------------------ AI */
.ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.ai-doc { position: relative; aspect-ratio: 3 / 4; max-height: 330px; background: #fff; border: 1px solid var(--ln); border-radius: 10px; padding: 16px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.68rem; color: #555; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.5); }
.ai-doc p { padding: 2px 0; border-bottom: 1px dotted #e5e5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-doc-h { font-weight: 800; color: #222; font-size: 0.76rem; border-bottom: 1px solid #ccc !important; margin-bottom: 6px; }
.ai-doc::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 28%, transparent), transparent); animation: aiscan 1.3s ease-in-out infinite; }
.ai-done .ai-doc::after { display: none; }
@keyframes aiscan { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
.ai-photo { background: radial-gradient(circle at 40% 35%, #6b6f76, #2b2d31 70%); padding: 0; aspect-ratio: 4 / 3; }
.ai-obj { position: absolute; border: 2px solid transparent; border-radius: 8px; transition: border-color 0.3s; }
.ai-obj b { position: absolute; left: -2px; top: -22px; background: var(--c); color: var(--c-on); font-family: var(--sans); font-size: 0.66rem; padding: 2px 6px; border-radius: 6px 6px 6px 0; white-space: nowrap; opacity: 0; transition: opacity 0.3s; }
.ai-obj::before { content: ""; position: absolute; inset: 14%; border-radius: 6px; background: rgba(255, 255, 255, 0.16); }
.ai-done .ai-obj { border-color: var(--c); }
.ai-done .ai-obj b { opacity: 1; }
.ai-src { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.76rem; color: var(--soft); }
.ai-src .i { width: 15px; height: 15px; }
.ai-st { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 0.88rem; margin-bottom: 10px; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); animation: aipulse 0.9s ease-in-out infinite alternate; }
@keyframes aipulse { to { opacity: 0.25; } }
.ai-ok { display: none; }
.ai-done .ai-run { display: none; }
.ai-done .ai-ok { display: inline; }
.ai-done .ai-dot { animation: none; background: var(--ok); }
.ai-out ul { display: grid; gap: 6px; }
.ai-out li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; transition-delay: calc(var(--i) * 0.09s); }
.ai-out li span { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 700; color: var(--soft); letter-spacing: 0.03em; text-transform: uppercase; }
.ai-out li b { font-size: 0.88rem; }
.ai-out li em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--ok); align-self: center; }
.ai-done .ai-out li { opacity: 1; transform: none; }
.ai-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.76rem; color: var(--soft); line-height: 1.45; }
.ai-note .i { width: 15px; height: 15px; color: var(--c-ink); margin-top: 1px; }
.b-ai { border-color: color-mix(in srgb, var(--c) 45%, var(--ln)); background: linear-gradient(180deg, #fff, var(--c-w)); }
.b-ai .i { color: var(--c-ink); }
.ask { display: grid; gap: 14px; }
.ask-t { display: grid; gap: 10px; background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r); padding: 16px; min-height: 260px; max-height: 460px; overflow: auto; align-content: start; }
.ask .bub { max-width: 80%; }
.ask .bub.out { background: var(--tx); color: #fff; }
.ai-a { background: var(--c-w) !important; color: var(--tx); line-height: 1.55; }
@container app (max-width: 759px) {
  .ai { grid-template-columns: 1fr; }
  .ai-doc { max-height: 170px; aspect-ratio: auto; height: 170px; }
  .ai-photo { height: 190px; }
  .ask .bub { max-width: 92%; }
}

/* the counter */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.pos-l { display: grid; gap: 12px; min-width: 0; }
.pos-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pos-t { position: relative; min-height: 92px; align-content: space-between; }
.pos-t span { font-weight: 800; font-size: 0.9rem; }
.pos-q { font-weight: 600; color: var(--faint); }
.pos-n { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--c); color: var(--c-on); font-style: normal; font-size: 0.74rem; font-weight: 800; display: grid; place-items: center; }
.pos-r { position: sticky; top: 92px; display: grid; gap: 12px; }
.pos-r .ln { grid-template-columns: minmax(0, 1fr) auto 70px; }
.pos-r .ln > .m:last-child, .pos-r .ln > span.m { text-align: right; }
@container app (max-width: 759px) {
  .pos { grid-template-columns: 1fr; }
  .pos-tiles { grid-template-columns: 1fr 1fr; }
  .pos-r { position: static; }
}

/* small pieces used by several verticals */
.bays { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bay { border: 1.5px dashed var(--ln); border-radius: 12px; padding: 11px 12px; display: grid; gap: 4px; align-content: start; min-height: 84px; }
.bay small { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.bay b { font-size: 0.88rem; }
.bay.busy { border-style: solid; border-color: color-mix(in srgb, var(--c) 50%, var(--ln)); background: var(--c-w); cursor: pointer; }
.bay .bd { justify-self: start; }
.mcard { padding: 14px; }
.mcard .kc-t b { font-size: 1rem; }
.kc-st { font-size: 0.74rem !important; font-weight: 700; color: var(--c-ink) !important; margin-top: 8px !important; }
.chk { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.tick { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--ln); display: grid; place-items: center; flex: none; }
.tick .i { width: 15px; height: 15px; opacity: 0; }
.chk.ok .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.chk.ok .tick .i { opacity: 1; }
.chk.ok b { color: var(--soft); text-decoration: line-through; }
.timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ln-2); }

/* the walkthrough pill: the current step and a Next button */
.pd-gh { display: flex; align-items: center; }
.pd-gh .pd-guide-t { flex: 1; }
.pd-next { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; border: 0; background: var(--c); color: var(--c-on); font-weight: 750; font-size: 0.82rem; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.pd-next .i { width: 15px; height: 15px; }
.pd-cur { padding: 0 16px 14px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); line-height: 1.45; }
.pd-cur b { color: var(--c); margin-right: 4px; }
.pd-guide.open .pd-cur { display: none; }
.pd-stage[data-device="phone"]:not([data-real-phone]) .pd-cur { display: none; }
@media (max-width: 759px) {
  .pd-guide:not(.open) .pd-cur { display: none; }
  .pd-guide:not(.open) .pd-next { margin: 0 6px 0 0; padding: 7px 10px; }
}
.pd-guide-t span, .pd-guide-t small { white-space: nowrap; }
.pd-ps { display: none; }
@media (max-width: 759px) {
  .pd-pl { display: none; }
  .pd-ps { display: inline; }
  .pd-top { overflow: hidden; }
  .pd-back small { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .pd-sel select { max-width: 116px; }
}
@media (max-width: 360px) {
  .pd-back small { display: none; }
  .pd-sel select { max-width: 104px; }
}
.pd-next[hidden], .pd-cur[hidden] { display: none !important; }
button.chip { white-space: nowrap; flex: none; }

/* a new screen rises in; redraws of the same screen after an action stay still */
.ap-body.enter > * { animation: enter 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ap-body.enter > *:nth-child(2) { animation-delay: 0.04s; }
.ap-body.enter > *:nth-child(3) { animation-delay: 0.08s; }
.ap-body.enter > *:nth-child(n+4) { animation-delay: 0.12s; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .ap-body.enter > * { animation: none; } }

/* on a phone: the computer view is not offered, and one line says where to find it */
.pd-hint { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 14px; background: var(--c); color: var(--c-on); font-size: 0.8rem; font-weight: 700; line-height: 1.35; }
.pd-hint[hidden] { display: none; }
.pd-hint > .i { flex: none; width: 18px; height: 18px; }
.pd-hint span { flex: 1; min-width: 0; }
.pd-hint button { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.12); color: inherit; cursor: pointer; }
.pd-hint button .i { width: 16px; height: 16px; }

/* phones: list rows never cut a name; buttons drop to their own line instead of squeezing the text */
@container app (max-width: 759px) {
  .row { flex-wrap: wrap; row-gap: 8px; align-items: flex-start; }
  .row > .av, .row > .tm { margin-top: 2px; }
  .row-main { flex: 1 1 150px; }
  .row-main b, .row-main small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .row-end { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  .row:has(.row-end .b) .row-end { width: 100%; }
}