/* ScreenSign — admin design system.
   The subject is screens: a wall of remote panels someone has to keep alive. So the panel is the
   object on the page (true orientation, live thumbnail, state written on it), and everything around
   it stays quiet — hairlines instead of shadows, one accent, two radii, no decoration.
   Palette is taken from the ScreenSign logo: brass on warm white, near-black wordmark. */

:root {
  /* brand */
  --brand:#bb9862;          /* the logo's brass — marks, selection, fills */
  --brand-deep:#8a6522;     /* the same hue at AA contrast — accent text, primary buttons */
  --brand-tint:#faf6ef;
  --brand-line:#e7d9c0;

  /* ink & ground (warm neutrals, so the brass never reads as a stray colour) */
  --ink:#1c1b19; --ink-2:#3a372f; --muted:#5f5c55; --faint:#7a746b;
  --paper:#fff; --wash:#f6f5f3; --wash-2:#efedea; --wash-3:#e9e6e1;
  --line:#e7e4df; --line-2:#d9d5ce;

  /* screen states — each one also gets a word and an icon, never colour alone */
  --live:#186c3c;  --live-tint:#e8f4ed;  --live-line:#bfdfcd;
  --down:#b23b32;  --down-tint:#fbecea;  --down-line:#f0cdc9;
  --wait:#93641a;  --wait-tint:#fbf3e3;  --wait-line:#ecdcb8;
  --rest:#5b6673;  --rest-tint:#eef1f4;  --rest-line:#d5dce3;

  --r-xs:7px; --r-sm:10px; --r:13px; --r-lg:17px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(28,27,25,.05);
  --sh-2:0 1px 3px rgba(28,27,25,.08), 0 12px 30px -14px rgba(28,27,25,.32);
  --sh-3:0 24px 60px -20px rgba(28,27,25,.34), 0 2px 8px rgba(28,27,25,.08);
  --side:250px;
  --fast:.14s cubic-bezier(.32,.72,0,1);
  --panel-bg:#15161a;       /* what an unlit screen looks like */
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--wash); color:var(--ink); min-height:100vh; font-size:16px; line-height:1.45;
  font-family:'IBM Plex Sans Hebrew','Heebo',system-ui,-apple-system,'Segoe UI','Noto Sans Hebrew',Arial,sans-serif;
  font-feature-settings:'tnum' 0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
[hidden] { display:none !important; }
a { color:var(--brand-deep); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--brand-deep); outline-offset:2px; border-radius:4px; }
::selection { background:var(--brand-tint); }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- icons: one family, 24px box, 1.6 stroke, currentColor ---------- */
.i { width:20px; height:20px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.i.sm { width:16px; height:16px; stroke-width:1.75; }
.i.lg { width:26px; height:26px; stroke-width:1.5; }

/* ---------- form primitives ---------- */
button, input, select, textarea { font:inherit; color:inherit; }
input, select, textarea {
  width:100%; min-height:42px; padding:9px 12px; background:var(--paper); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm); transition:border-color var(--fast), box-shadow var(--fast);
}
input::placeholder, textarea::placeholder { color:var(--faint); }
input:hover, select:hover, textarea:hover { border-color:#c6c1b9; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--brand-deep); box-shadow:0 0 0 3px rgba(138,101,34,.14); }
input:disabled, select:disabled, textarea:disabled { background:var(--wash-2); color:var(--muted); border-color:var(--line); cursor:not-allowed; }
textarea { min-height:92px; resize:vertical; line-height:1.5; }
select { appearance:none; padding-inline-end:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6a64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px; background-position:left 10px center; }
input[type="color"] { padding:3px; height:42px; cursor:pointer; }
input[type="time"], input[type="date"], input[type="number"], input[type="url"], input[type="email"], input[type="tel"] { direction:ltr; text-align:left; font-variant-numeric:tabular-nums; }
input[type="checkbox"] { width:18px; height:18px; min-height:0; accent-color:var(--brand-deep); margin-inline-end:8px; vertical-align:-3px; }
label { display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:5px; letter-spacing:.005em; }
.field { margin-bottom:14px; }
.row { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.row > * { flex:1; min-width:130px; }
.row > .auto { flex:0 0 auto; min-width:0; }

/* ---------- a picker you can type into: same field, a searchable list under it ---------- */
.combo { position:relative; }
.combo-ctl { position:relative; display:flex; align-items:center; }
.combo-ctl > .i { position:absolute; inset-inline-start:11px; color:var(--faint); pointer-events:none; }
.combo-in { padding-inline-start:35px; padding-inline-end:40px; text-overflow:ellipsis; }
.combo-x { position:absolute; inset-inline-end:5px; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--faint); cursor:pointer; }
.combo-x:hover { background:var(--wash-2); color:var(--ink); }
.combo-list { position:absolute; z-index:20; inset-inline-start:0; inset-inline-end:0; top:calc(100% + 6px);
  max-height:min(44vh, 320px); overflow-y:auto; -webkit-overflow-scrolling:touch; list-style:none; padding:4px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-sm); box-shadow:var(--sh-2); }
.combo.up .combo-list { top:auto; bottom:calc(100% + 6px); }
.combo-list li { display:flex; align-items:baseline; gap:8px; padding:10px; border-radius:var(--r-xs); cursor:pointer; line-height:1.3; }
.combo-list li b { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.combo-list li span { color:var(--muted); font-size:13.5px; }
.combo-list li em { margin-inline-start:auto; color:var(--faint); font-size:12.5px; font-style:normal; white-space:nowrap; }
.combo-list li.blank { color:var(--muted); }
.combo-list li.act { background:var(--wash-2); }
.combo-list li.on { background:var(--brand-tint); color:var(--brand-deep); }
.combo-list li.on.act { box-shadow:inset 0 0 0 1px var(--brand-line); }
.combo-none { padding:16px 10px; color:var(--muted); text-align:center; cursor:default; }
.rowacts { white-space:nowrap; display:flex; gap:6px; justify-content:flex-end; }
@media (max-width:560px) { .rowacts { flex-direction:column; align-items:stretch; } }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 16px;
  border:1px solid transparent; border-radius:var(--r-sm); background:var(--brand-deep); color:#fff;
  font-weight:600; font-size:15px; letter-spacing:.005em; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--fast), border-color var(--fast), transform var(--fast), box-shadow var(--fast);
}
.btn:hover { background:#75551c; }
.btn:active { transform:scale(.985); }
.btn.ghost { background:var(--paper); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1); }
.btn.ghost:hover { background:var(--wash); border-color:#c6c1b9; }
.btn.quiet { background:transparent; color:var(--ink-2); border-color:transparent; box-shadow:none; font-weight:500; }
.btn.quiet:hover { background:var(--wash-2); }
.btn.danger { background:var(--paper); color:var(--down); border-color:var(--down-line); box-shadow:var(--sh-1); }
.btn.danger:hover { background:var(--down-tint); }
.btn.warn { background:var(--wait); color:#fff; }
.btn.warn:hover { background:#7d5514; }
.btn.sm { min-height:34px; padding:5px 12px; font-size:14px; border-radius:var(--r-xs); }
.btn.block { width:100%; }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
.btn .i { margin-inline-start:-2px; }
.linkish { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }

/* ---------- app shell: sidebar on a desktop, top bar + tab bar on a phone ----------
   One DOM, two shapes. `.side` and `.sbar` swap which of them is display:contents so the same
   markup can be a column beside the page or a bar above it - no duplicate ids, no second nav. */
.app { min-height:100vh; }
.side { display:contents; }
.sbar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 16px calc(8px + env(safe-area-inset-top)); background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.lockup { display:flex; align-items:center; gap:9px; min-width:0; }
.lockup .logo { height:34px; width:auto; display:block; }
.lockup .mark { display:none; width:30px; height:29px; flex:0 0 auto; }
.foot { display:flex; align-items:center; gap:9px; min-width:0; }
/* switching customer is how a super starts every task - it sits under the logo, not in a corner */
.switch { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--paper); border-bottom:1px solid var(--line); }
.switch label { flex:0 0 auto; margin:0; font-size:13px; font-weight:600; color:var(--muted); }
.switch select { flex:1 1 auto; width:auto; min-width:0; min-height:38px; font-size:14.5px; font-weight:600; border-radius:var(--r-sm); }
.switch .acct { flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main { padding:8px 16px 92px; }
.wrap { max-width:1200px; margin:0 auto; }

/* page header */
.phead { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:20px 0 14px; }
.phead h1 { font-size:25px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.phead .sub { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); margin-top:5px; }
.pending { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--wait);
  background:var(--wait-tint); border:1px solid var(--wait-line); border-radius:99px; padding:2px 10px 2px 8px; }
.pending .i { color:var(--wait); }
.phead .acts { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* publish state */
.pub { display:flex; align-items:center; gap:8px; }
.pub .ver { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); text-align:start;
  line-height:1.25; white-space:nowrap; padding:5px 8px; border-radius:var(--r-xs); transition:background var(--fast); }
.pub .ver .i { color:var(--faint); }
button.ver:hover { background:var(--wash-2); }
button.ver:hover .i { color:var(--ink-2); }
.pub .ver b { display:block; font-weight:600; color:var(--ink-2); font-size:12.5px; }
.pub .btn.dirty { background:var(--brand-deep); color:#fff; }
.pub .btn.dirty::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.9; }
.pub .btn.clean { background:transparent; color:var(--muted); border-color:var(--line-2); box-shadow:none; font-weight:500; }
.pub .btn.clean .i { color:var(--live); }

/* tab bar (phone) */
.nav {
  position:fixed; inset-inline:0; bottom:0; z-index:30; display:flex; justify-content:space-around;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line); padding:5px 4px max(5px, env(safe-area-inset-bottom));
}
.nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:50px; padding:6px 2px;
  background:none; border:0; border-radius:var(--r-xs); font-size:11px; font-weight:500; color:var(--muted); cursor:pointer;
  transition:color var(--fast); }
.nav button .i { width:21px; height:21px; flex:0 0 auto; }
/* A label longer than its ~48px of bar wraps, and because the buttons stretch, ONE long label sets
   the height of the whole bar: "Customers - all products" ran to three lines and took 95px of an
   844px phone (Shimi, 10/09/2026, with a photo). Two lines is the ceiling. */
.nav button span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  line-height:1.15; text-align:center; overflow-wrap:break-word; }
/* An equal split gives every tab the same ~47px whatever its label needs, which is what snapped
   "Customers" in half. Sizing from the content and letting the row shrink proportionally hands the
   long labels the room the short ones do not use. */
@media (max-width:767px) { .nav button { flex:1 1 auto; min-width:0; padding-inline:1px; letter-spacing:-.1px; } }
.nav button.on { color:var(--brand-deep); font-weight:600; }

/* phone: the bar carries the brand, the publish action and a way into history - nothing else */
@media (max-width:767px) {
  .sbar { flex-wrap:wrap; row-gap:8px; }
  .lockup { flex:1 1 auto; }
  .lockup .logo { height:30px; }
  .foot { flex:0 0 auto; margin-inline-start:auto; gap:6px; }
  .pub .ver .vt { display:none; }
  .switch { position:sticky; top:47px; z-index:29; }
}
@media (min-width:768px) {
  .app { display:grid; grid-template-columns:var(--side) 1fr; align-items:start; }
  .side { display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; padding:26px 12px 16px;
    background:var(--paper); border-inline-start:1px solid var(--line); overflow:auto; }
  .sbar { display:contents; }
  .side > .langs { order:0; margin:0 4px 14px; }
  .lockup { order:1; justify-content:center; padding:6px 8px 22px; }
  .lockup .logo { height:46px; }
  .nav { position:static; flex-direction:column; justify-content:flex-start; background:none; backdrop-filter:none;
    -webkit-backdrop-filter:none; border:0; padding:0; gap:2px; }
  .nav button { flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:11px; width:100%; min-height:38px;
    padding:7px 10px; border-radius:var(--r-sm); font-size:14.5px; color:var(--ink-2); }
  .nav button .i { width:19px; height:19px; color:var(--muted); transition:color var(--fast); }
  .nav button:hover { background:var(--wash-2); }
  .nav button.on { background:var(--brand-tint); color:var(--brand-deep); font-weight:600; box-shadow:inset 0 0 0 1px var(--brand-line); }
  .nav button.on .i { color:var(--brand-deep); }
  .cust { order:2; }
  .switch { order:3; flex-direction:column; align-items:stretch; gap:5px; padding:0 4px 14px; background:none; border-bottom:0; }
  .switch label { padding-inline-start:6px; }
  .nav { order:4; }
  .foot { order:5; margin-top:auto; flex-direction:column; align-items:stretch; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
  .foot .pub { flex-direction:column; align-items:stretch; gap:8px; }
  .foot .pub .btn { width:100%; }
  .main { padding:14px 32px 48px; }
  .phead { padding:26px 0 20px; }
  .phead h1 { font-size:30px; }
}
/* ---------- surfaces ---------- */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:14px; }
.card h2 { font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:12px; }
.card h3 { font-size:14px; font-weight:600; color:var(--ink-2); margin:18px 0 9px; }
.card.tap { cursor:pointer; transition:border-color var(--fast), box-shadow var(--fast); }
.card.tap:hover { border-color:var(--line-2); box-shadow:var(--sh-1); }

.list-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:26px 0 12px; }
.list-head:first-child { margin-top:0; }
/* Layout presets, under the layouts list. Wraps on a phone rather than pushing the note off-screen. */
.preset-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.preset-row .meta { flex:1 1 12rem; min-width:0; }
.list-head h2 { font-size:20px; font-weight:600; letter-spacing:-.014em; }
.list-head .btns { display:flex; gap:7px; }
/* the licence is full: say so where the add button used to be, instead of hiding it silently */
.phead .acts .cap { max-width:22ch; text-align:start; line-height:1.35; }
/* Picture field: drop a file, click to pick one, or paste a URL underneath. */
.imgfield .imgdrop { display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer;
  border:1.5px dashed var(--line-2); border-radius:var(--r); background:var(--wash); transition:border-color var(--fast), background var(--fast); }
.imgfield .imgdrop:hover, .imgfield .imgdrop:focus-visible { border-color:var(--brand); background:var(--brand-tint); outline:none; }
.imgfield .imgdrop.over { border-color:var(--brand-deep); background:var(--brand-tint); }
.imgfield .imgdrop.busy { opacity:.6; pointer-events:none; }
.imgfield .imgprev { width:56px; height:56px; object-fit:cover; border-radius:var(--r-sm); background:var(--paper); border:1px solid var(--line); flex:0 0 auto; }
.imgfield .imghint { font-size:13px; color:var(--muted); line-height:1.4; }
/* the doctor's one control: three big targets, thumb-sized on a phone */
.statusbtns { display:flex; gap:10px; flex-wrap:wrap; }
.statusbtns .btn { flex:1 1 140px; min-height:52px; font-size:16px; }
.empty-state { text-align:center; color:var(--muted); padding:44px 18px; background:var(--paper); border:1px dashed var(--line-2); border-radius:var(--r-lg); font-size:15px; }
.empty-state b { display:block; color:var(--ink); font-size:16px; font-weight:600; margin-bottom:4px; }
.help { font-size:13.5px; line-height:1.55; color:var(--muted); background:var(--wash-2); border-radius:var(--r-sm); padding:10px 12px; margin:0 0 14px; }
.meta { font-size:14px; color:var(--muted); line-height:1.5; }
/* Numbers used to force direction:ltr + text-align:left, which pushed them to the opposite edge
   from their right-aligned headers and made every column look shifted by one. Digits already
   render left-to-right inside an RTL line, so alignment is all that was needed. */
.num { text-align:start; font-variant-numeric:tabular-nums; }
.err { color:var(--down); font-size:13.5px; min-height:19px; margin:6px 0; }
.ok { color:var(--live); font-size:13.5px; margin:6px 0; }

/* ---------- the screen panel: the one place the design is loud ---------- */
.group-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:26px 0 12px; }
.group-head h2 { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.group-head .gmeta { font-size:13px; color:var(--muted); }
.group-head .sp { flex:1; }

/* ---------- chips & dots (used across the app) ---------- */
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; line-height:1.5; padding:2px 9px;
  border-radius:99px; background:var(--wash-2); color:var(--ink-2); border:1px solid transparent; }
.chip .i { width:13px; height:13px; }
.chip.ok { background:var(--live-tint); color:var(--live); border-color:var(--live-line); }
.chip.bad { background:var(--down-tint); color:var(--down); border-color:var(--down-line); }
.chip.warn { background:var(--wait-tint); color:var(--wait); border-color:var(--wait-line); }
.chip.rest { background:var(--rest-tint); color:var(--rest); border-color:var(--rest-line); }
.chip.src { background:transparent; color:var(--muted); border-color:var(--line-2); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--faint); vertical-align:middle; margin-inline-end:6px; }
.dot.on { background:var(--live); box-shadow:0 0 0 3px rgba(28,127,71,.16); }

/* ---------- emergency broadcast: an operational alarm, not a card ---------- */
.bcast { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:14px; overflow:hidden; }
.bcast > details > summary { display:flex; align-items:center; gap:10px; padding:13px 16px; cursor:pointer; list-style:none; font-size:14.5px; color:var(--ink-2); }
.bcast > details > summary::-webkit-details-marker { display:none; }
.bcast > details > summary .i { color:var(--down); }
.bcast > details > summary b { font-weight:600; color:var(--ink); }
.bcast > details > summary:hover { background:var(--wash); }
.bcast > details[open] > summary { border-bottom:1px solid var(--line); }
.bcast .inner { padding:14px 16px 16px; }
.bcast-on { border-color:var(--down-line); background:var(--down-tint); }
.bcast-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 14px; }
.bcast-row .bmain { min-width:0; flex:1 1 240px; }
.bcast-row + .bcast-row { border-top:1px solid var(--down-line); }
.bcast-row .hd { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--down); font-size:14.5px; }
.bcast-msg { margin:6px 0 2px; font-size:15px; color:var(--ink); }

/* ---------- pills / segmented control ---------- */
.pills { display:flex; gap:4px; flex-wrap:wrap; padding:3px; background:var(--wash-2); border-radius:var(--r-sm); }
.pills button { flex:1; min-height:34px; padding:0 12px; border:0; border-radius:var(--r-xs); background:transparent; color:var(--ink-2);
  font-size:14px; font-weight:500; cursor:pointer; transition:background var(--fast), color var(--fast); }
.pills button:hover { color:var(--ink); }
.pills button.on { background:var(--paper); color:var(--ink); font-weight:600; box-shadow:var(--sh-1); }
.pills.sm button { min-height:34px; font-size:13.5px; flex:0 0 auto; }

/* ---------- media library ---------- */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); gap:12px; }
.media-item { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer;
  transition:border-color var(--fast), box-shadow var(--fast); }
.media-item:hover { border-color:var(--line-2); box-shadow:var(--sh-1); }
.media-item.sel { border-color:var(--brand-deep); box-shadow:0 0 0 2px rgba(138,101,34,.2); }
.media-item .th { height:104px; background:var(--panel-bg); display:flex; align-items:center; justify-content:center; color:#5c626c; overflow:hidden; }
.media-item .th img { width:100%; height:100%; object-fit:cover; }
.media-item .nm { font-size:12.5px; padding:8px 9px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:start; }
.media-item .in { font-size:11.5px; color:var(--muted); padding:0 9px 8px; display:flex; justify-content:space-between; gap:6px; }
.bar { height:6px; background:var(--wash-3); border-radius:99px; overflow:hidden; margin:8px 0; }
.bar > i { display:block; height:100%; background:var(--brand-deep); border-radius:99px; transition:width .3s ease; }
.bar.warn > i { background:var(--wait); }
.upl { display:flex; align-items:center; gap:12px; font-size:13.5px; padding:5px 0; }
.upl .bar { flex:1; margin:0; }

/* ---------- rows inside sheets ---------- */
.item-row { display:flex; gap:11px; align-items:center; padding:10px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.item-row .th { flex:0 0 62px; width:62px; height:39px; border-radius:var(--r-xs); background:var(--panel-bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#5c626c; }
.item-row .th img { width:100%; height:100%; object-fit:cover; }
.item-row .nm { flex:1; min-width:120px; font-size:14.5px; }
.item-row .nm small { display:block; color:var(--muted); font-size:12.5px; }
.item-row input[type="number"] { width:78px; min-height:34px; padding:4px 8px; }
.item-row .ib { display:inline-flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-xs); min-width:34px; min-height:34px; color:var(--ink-2); cursor:pointer; transition:background var(--fast); }
.item-row .ib:hover { background:var(--wash); }
.item-row .adv { flex-basis:100%; display:flex; gap:10px; flex-wrap:wrap; align-items:end; padding:8px 0 2px; }
.item-row .adv > * { flex:1; min-width:110px; }
.item-row .adv .pills { flex-basis:100%; }
.zone-row { display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); }
.zone-row .zn { flex:0 0 92px; font-weight:600; font-size:14px; }
.zone-row select { flex:1; }

/* ---------- stats & project cards ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:18px; }
.stat { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px; }
.stat b { display:block; font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat span { display:block; font-size:13px; color:var(--muted); margin-top:3px; }
.projgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:12px; }
.proj { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:start; padding:15px 16px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer; min-height:78px; transition:border-color var(--fast), box-shadow var(--fast); }
.proj:hover { border-color:var(--line-2); box-shadow:var(--sh-1); }
.proj b { font-size:15.5px; font-weight:600; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th { font-size:13px; font-weight:600; color:var(--muted); }
td, th { padding:10px 8px; border-bottom:1px solid var(--line); text-align:start; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tr.tap { cursor:pointer; } tr.tap:hover { background:var(--wash); }

/* ---------- sheets, toast, login ---------- */
.sheet-bg { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(28,27,25,.36); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fade .16s ease-out; }
.sheet { background:var(--wash); width:100%; max-width:780px; max-height:94vh; overflow:auto; border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 16px 32px; box-shadow:var(--sh-3); animation:rise .22s cubic-bezier(.32,.72,0,1); }
.sheet-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin:0 -16px 12px; padding:12px 16px; background:rgba(246,245,243,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); }
.sheet-head h2 { font-size:19px; font-weight:600; letter-spacing:-.014em; }
.sheet-head button { display:inline-flex; align-items:center; justify-content:center; background:var(--wash-2); border:0; border-radius:50%;
  min-width:32px; min-height:32px; color:var(--muted); cursor:pointer; transition:background var(--fast), color var(--fast); }
.sheet-head button:hover { background:var(--wash-3); color:var(--ink); }
@keyframes rise { from { transform:translateY(14px); opacity:.4; } to { transform:none; opacity:1; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@media (min-width:720px) { .sheet-bg { align-items:center; padding:20px; } .sheet { border-radius:var(--r-xl); max-height:88vh; } }

.toast { position:fixed; inset-block-end:88px; inset-inline-start:50%; transform:translateX(50%); z-index:80; max-width:90vw;
  background:rgba(28,27,25,.94); color:#fff; padding:11px 18px; border-radius:99px; font-size:14px; font-weight:500;
  box-shadow:var(--sh-3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:rise .2s cubic-bezier(.32,.72,0,1); }
.toast.err { background:rgba(178,59,50,.96); }
@media (min-width:768px) { .toast { inset-block-end:28px; } }

.login { max-width:396px; margin:11vh auto; padding:30px 28px 26px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); }
.login .lockup { display:flex; align-items:center; gap:11px; margin-bottom:22px; }
.login .lockup .nm { font-size:17px; font-weight:600; letter-spacing:-.014em; line-height:1.15; }
.login .lockup .nm span { display:block; font-size:11px; font-weight:500; color:var(--faint); letter-spacing:.09em; text-transform:uppercase; }
.login h1 { font-size:21px; font-weight:600; letter-spacing:-.016em; margin-bottom:4px; }
.login p { color:var(--muted); font-size:14px; margin-bottom:20px; line-height:1.5; }
.login .center { text-align:center; margin:16px 0 0; font-size:13.5px; }
/* Grouped as „483 920 175” since the code went to nine digits — the gaps between groups do the
   separating, so the letter-spacing that used to carry six digits is dialled back, and the size
   gives way on a narrow card instead of running off it. */
.code-box { font-size:clamp(22px, 6.4vw, 31px); font-weight:600; letter-spacing:.1em; direction:ltr; text-align:center; font-variant-numeric:tabular-nums;
  background:var(--brand-tint); color:var(--brand-deep); border:1px solid var(--brand-line); border-radius:var(--r); padding:12px; margin:10px 0; }

.pv-wrap { background:var(--panel-bg); border-radius:var(--r); padding:9px; display:flex; justify-content:center; }
.pv { border:0; background:#000; width:100%; aspect-ratio:16/9; border-radius:var(--r-xs); }
.pv.portrait { width:auto; height:56vh; max-height:520px; aspect-ratio:9/16; }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }
.actions .btn { flex:1; }

details > summary { cursor:pointer; user-select:none; }
.hist-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.hist-row:first-of-type { border-top:0; }
.hist-row.on { font-weight:600; }

/* ---------- screens toolbar: search, filter, view ---------- */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.tbrow { display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.search { position:relative; flex:1 1 230px; min-width:180px; max-width:340px; display:flex; align-items:center; }
.search .i { position:absolute; inset-inline-start:11px; color:var(--faint); pointer-events:none; }
.search input { padding-inline-start:35px; min-height:38px; border-radius:var(--r-sm); }
.search input::-webkit-search-cancel-button { cursor:pointer; }
.pills.view { flex:0 0 auto; }
.filt-sel { display:none; }
.sel-btn { flex:0 0 auto; }
@media (max-width:660px) {
  .search { flex:1 1 100%; max-width:none; }
  .tbrow { gap:8px; }
  #scFilter { display:none; }
  .filt-sel { display:block; flex:1 1 auto; width:auto; min-height:38px; padding:6px 12px; padding-inline-end:30px;
    border-radius:var(--r-sm); font-size:14px; }
  .sel-btn span { display:none; }
  .sel-btn { min-width:38px; padding:5px 10px; }
  .pills.view button { min-width:36px; }
}
.pills.view button { min-width:38px; padding:0 9px; }
.pills.view button .i { width:17px; height:17px; }

/* selection bar for actions on several screens at once */
.bulk { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; padding:9px 12px;
  background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:var(--r); }
.bulk .cnt { font-size:14px; font-weight:600; color:var(--brand-deep); margin-inline-end:2px; }
.bulk .mv { display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
.bulk .mv select { min-height:34px; width:auto; font-size:14px; padding:4px 10px; padding-inline-end:28px; border-radius:var(--r-xs); }

/* ---------- the screen panel ---------- */
.screens-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap:14px; }
.panel { display:flex; flex-direction:column; text-align:start; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:border-color var(--fast), box-shadow var(--fast), transform var(--fast); }
.panel:hover { border-color:var(--line-2); box-shadow:var(--sh-2); }
.panel:active { transform:scale(.995); }
.panel.picked { border-color:var(--brand); box-shadow:0 0 0 2px rgba(187,152,98,.35); }
/* every card is the same size; the picture inside keeps the screen's real proportion */
.panel .glass { position:relative; aspect-ratio:16/10; background:var(--panel-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.panel .fit { position:relative; width:100%; max-height:100%; aspect-ratio:16/9; background:#0b0c0f; overflow:hidden;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.panel .fit.portrait { width:auto; height:100%; max-width:100%; aspect-ratio:9/16; }
.panel .fit img { width:100%; height:100%; object-fit:cover; }
.panel .ph { display:flex; flex-direction:column; align-items:center; gap:7px; padding:8px; text-align:center;
  font-size:12.5px; line-height:1.35; color:#9aa2ad; }
.panel .ph .i { width:26px; height:26px; }
.panel.is-down .fit, .panel.is-rest .fit { filter:grayscale(1) brightness(.5); }

.panel .state { position:absolute; inset-block-start:8px; inset-inline-start:8px; display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px 3px 7px; border-radius:99px; font-size:11.5px; font-weight:600; line-height:1.4;
  background:rgba(16,17,20,.74); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.panel .state .i { width:13px; height:13px; stroke-width:2; }
.panel.is-live .state { color:#8ce4ab; } .panel.is-down .state { color:#ffaea5; }
.panel.is-wait .state { color:#f2cd84; } .panel.is-rest .state { color:#c0d0e0; }

.pick { position:absolute; inset-block-start:6px; inset-inline-end:6px; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:0; border-radius:9px; background:rgba(16,17,20,.6); color:#fff; cursor:pointer;
  opacity:0; transition:opacity var(--fast), background var(--fast); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* the visible square is 32px; the tappable area is 44px, which is the number that matters */
.pick::after { content:''; position:absolute; inset:-6px; }
.panel:hover .pick, .panel.picked .pick, .pick:focus-visible, .picking .pick { opacity:1; }
.pick:hover { background:rgba(16,17,20,.85); }
.panel.picked .pick { background:var(--brand-deep); }
#scSelect[aria-pressed="true"] { background:var(--brand-tint); color:var(--brand-deep); }

.panel .body { padding:11px 13px 13px; display:flex; flex-direction:column; gap:2px; }
.panel .nm { font-size:15.5px; font-weight:600; letter-spacing:-.008em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel .where { font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* facts wrap rather than clip - a battery reading cut to "1%" is worse than a second line.
   Cards in the same grid row still end level, because grid rows stretch to the tallest card. */
.panel .facts { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; margin-top:9px; font-size:13px; color:var(--muted); }
.panel .body { flex:1; }
.panel .facts span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.panel .facts .i { width:15px; height:15px; color:var(--faint); }
.panel .facts .low, .panel .facts .low .i { color:var(--down); }
.panel .warnrow { display:flex; align-items:center; gap:6px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
  font-size:13px; font-weight:500; color:var(--wait); }
.panel .warnrow .i { width:15px; height:15px; }

/* ---------- the same screens as a compact list ---------- */
.srows { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.srow { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; border-top:1px solid var(--line);
  transition:background var(--fast); }
.srow:first-child { border-top:0; }
.srow:hover { background:var(--wash); }
.srow.picked { background:var(--brand-tint); }
.srow .pick { position:static; opacity:1; width:26px; height:26px; background:transparent; color:var(--faint); border-radius:6px; }
.srow .pick:hover { background:var(--wash-2); color:var(--ink-2); }
.srow.picked .pick { background:transparent; color:var(--brand-deep); }
.srow.shead { padding:9px 14px; background:var(--wash-2); cursor:default; font-size:13px; font-weight:600; color:var(--muted); }
.srow.shead:hover { background:var(--wash-2); }
.srow.shead .nm, .srow.shead .st, .srow.shead .where, .srow.shead .detail, .srow.shead .right { font-size:13px; font-weight:600; color:var(--muted); }
.srow .pick-sp { flex:0 0 26px; }
.srow .st { flex:0 0 132px; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.srow .st .i { width:15px; height:15px; }
.srow.is-live .st { color:var(--live); } .srow.is-down .st { color:var(--down); }
.srow.is-wait .st { color:var(--wait); } .srow.is-rest .st { color:var(--rest); }
.srow .nm { flex:1 1 130px; min-width:0; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srow .where { flex:1 1 120px; min-width:0; font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srow .detail { flex:0 1 190px; font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srow .right { flex:0 0 74px; display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
@media (max-width:720px) { .srow .where, .srow .detail { display:none; } .srow .st { flex-basis:auto; } .srow .right { flex-basis:auto; } }

/* login lockup */
.login .logo { display:block; height:52px; width:auto; margin:0 0 20px; }
.help .i { vertical-align:-2px; color:var(--wait); margin-inline-end:2px; }
.note { display:flex; align-items:flex-start; gap:7px; margin-top:10px; font-size:13px; line-height:1.5; color:var(--muted); }
.note .i { flex:0 0 auto; margin-top:2px; color:var(--wait); }
/* "Saved" is not "on the screen": a signage change waits for publish. Said next to the Save button,
   because the banner at the top of the page is out of sight while a sheet is open. */
.draftnote { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:12px; padding:10px 12px;
  border:1px solid var(--wait-line); background:var(--wait-tint); border-radius:var(--r-sm);
  font-size:13px; line-height:1.5; color:var(--ink-2); }
.draftnote .i { flex:0 0 auto; color:var(--wait); }
.draftnote span { flex:1 1 220px; }
.draftnote .btn { flex:0 0 auto; }
/* on a phone this is the action the notice exists for - give it a real tap target */
@media (max-width:660px) { .draftnote .btn { min-height:42px; width:100%; } }
.shot-full { display:block; width:100%; max-height:260px; object-fit:contain; background:var(--panel-bg);
  border-radius:var(--r-sm); margin-top:10px; }
.pv.portrait { height:44vh; }
.bcast-btn .i { color:var(--down); }
.bcast-btn:hover { border-color:var(--down-line); background:var(--down-tint); }

/* phone: the three header actions fit one row without dropping below a 40px tap target */
@media (max-width:660px) {
  .phead { padding:16px 0 12px; }
  .phead h1 { font-size:23px; }
  .phead .acts { gap:6px; }
  .phead .acts .btn { min-height:40px; padding:8px 11px; font-size:14px; gap:5px; }
}

/* language switch: two words, the current one marked - no flags, no dropdown */
.langs { display:flex; gap:2px; padding:3px; background:var(--wash-2); border-radius:var(--r-sm); }
.langs button { flex:1; min-height:32px; padding:0 10px; border:0; border-radius:var(--r-xs); background:transparent;
  color:var(--muted); font-size:13.5px; font-weight:500; cursor:pointer; transition:background var(--fast), color var(--fast); }
.langs button:hover { color:var(--ink); }
.langs button.on { background:var(--paper); color:var(--ink); font-weight:600; box-shadow:var(--sh-1); }
.login .langs { margin-top:16px; }
@media (max-width:767px) { .sbar > .langs { display:none; } }   /* the phone bar is tight; the switch lives in settings there */
/* the install page belongs to the device, not to this admin - flag it as leaving */
.appbtn { justify-content:flex-start; width:100%; gap:9px; font-size:14px; color:var(--ink-2); }
.appbtn span { flex:1; text-align:start; }
.appbtn .i:last-child { width:14px; height:14px; color:var(--faint); }
.appbtn:hover { background:var(--wash-2); color:var(--ink); }
@media (max-width:767px) { .foot .appbtn span, .foot .appbtn .i:last-child { display:none; } .foot .appbtn { width:auto; padding:8px 10px; } }

/* content: one tile per item, with the icon saying what kind of thing it is */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:12px; }
.tile { display:flex; align-items:center; gap:12px; text-align:start; padding:13px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer; width:100%;
  transition:border-color var(--fast), box-shadow var(--fast); }
.tile:hover { border-color:var(--line-2); box-shadow:var(--sh-1); }
.tile .ti { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:var(--brand-tint); border:1px solid var(--brand-line); color:var(--brand-deep); }
.tile .ti .i { width:19px; height:19px; }
.tile .tb { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tile .tb b { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .tb .meta { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* forms and tables read better in a column than stretched across a wide screen */
@media (min-width:1000px) {
  .form-col { max-width:660px; }
}

/* the customer's own logo: their brand under ours, capped so it cannot dominate */
.cust { display:flex; align-items:center; justify-content:center; padding:0 10px 14px; }
.cust img { max-height:40px; max-width:100%; object-fit:contain; }
@media (max-width:767px) { .cust { display:none; } }

/* ---------- door signs: one card per door, answering "who is in that room right now" ---------- */
.doorgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:12px; margin-bottom:20px; }
.dcard { display:flex; flex-direction:column; align-items:stretch; gap:3px; text-align:start; padding:14px 16px 15px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); cursor:pointer; font:inherit; color:inherit;
  transition:border-color var(--fast), box-shadow var(--fast), transform var(--fast); }
.dcard:hover { border-color:var(--line-2); box-shadow:var(--sh-2); }
.dcard:active { transform:scale(.995); }
.dc-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.dc-room { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--brand-deep);
  background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:99px; padding:2px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.dc-room .i { width:14px; height:14px; flex:0 0 auto; }
.dc-net { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.dc-net .i { width:14px; height:14px; }
.dcard.is-live .dc-net { color:var(--live); } .dcard.is-down .dc-net { color:var(--down); }
.dcard.is-wait .dc-net { color:var(--wait); } .dcard.is-rest .dc-net { color:var(--rest); }
.dc-who { font-size:18px; font-weight:600; letter-spacing:-.012em; line-height:1.25; }
.dc-who.empty { color:var(--muted); font-weight:500; }
.dc-sub { font-size:14px; color:var(--muted); }
.dc-line { margin-top:8px; font-size:13.5px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:8px; }

/* the weekly rota: a short block per day, so an empty day takes no room at all */
.sday { margin-top:14px; }
.sday h4 { font-size:13px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.srow-lite { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:14.5px; }
.srow-lite .tm { flex:0 0 108px; font-variant-numeric:tabular-nums; direction:ltr; text-align:start; color:var(--ink-2); }
.srow-lite .who { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srow-lite .ib { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-xs); color:var(--muted); cursor:pointer; }
.srow-lite .ib:hover { background:var(--down-tint); border-color:var(--down-line); color:var(--down); }

/* who is signed in, and the way out - in the sidebar, where you look for it, not buried in settings */
.me { display:flex; align-items:center; gap:9px; min-width:0; }
.me .mi { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--brand-tint); border:1px solid var(--brand-line); color:var(--brand-deep); }
.me .mt { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.me .mt b { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me .mt > span { font-size:12px; color:var(--muted); }
.me .out { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; min-width:34px; height:34px;
  padding:0 8px; margin-inline-start:auto; border-radius:var(--r-xs); font-size:13px; font-weight:500; color:var(--muted);
  transition:background var(--fast), color var(--fast); }
.me .out span { display:none; }   /* the word appears where there is room for it */
@media (min-width:768px) { .me .out span { display:inline; } }
.me .out:hover { background:var(--wash-2); color:var(--down); }
/* the phone bar has room for one more icon, not for a name */
@media (max-width:767px) { .me .mi, .me .mt { display:none; } .me { flex:0 0 auto; } .me .out { margin-inline-start:0; } }
@media (min-width:768px) { .me { padding:2px 4px 10px; } }   /* first in the footer: identity, then the app link, then publish */

/* the world switch: same control as the language one, because it does the same kind of thing -
   it swaps the whole interface, not a setting inside it */
.langs.worlds button { gap:5px; }
.langs.worlds .i { width:15px; height:15px; }
@media (min-width:768px) { .side > .langs.worlds { order:2; margin:0 4px 14px; } .cust { order:3; } .switch { order:4; } .nav { order:5; } .foot { order:6; } }

/* the clinic heading and its settings link read as one line, not as a stray button on the far side */
.group-head .gedit, .group-head .gadd { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); padding:2px 6px; border-radius:var(--r-xs); }
/* adding a door is the point of the clinic heading, so it reads as the action, not as a note */
.group-head .gadd { color:var(--brand-deep); font-weight:600; }
.group-head .gedit:hover { background:var(--wash-2); color:var(--brand-deep); }

/* The welcome message, shown as it will arrive on the phone: wrapped, not a single long line. */
.pre-wrap { white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:13px; line-height:1.65;
  background:var(--wash); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-top:8px; color:var(--ink-2); }
/* The handover fields are read, copied and dictated — never typed into. Monospace-ish spacing keeps
   a temporary password legible over the phone, and the whole value selects on the first tap. */
.card input[readonly] { background:var(--wash-2); color:var(--ink); cursor:text; letter-spacing:.02em; }
/* "Stay signed in" sits between the password and the button, so it reads as part of the decision
   to log in rather than as a stray line under it. */
.login .login-check { display:flex; align-items:center; margin:-2px 0 14px; font-size:14px; color:var(--muted); cursor:pointer; }
.login .login-check input { flex:0 0 auto; }

/* Licences: one line per product — name, how many, what each costs. A flat row of number inputs
   made it impossible to tell which price belonged to which product (Pablo, 10/09/2026). */
.lic-grid { display:grid; grid-template-columns:1fr 90px 130px; gap:8px 10px; align-items:center; margin-bottom:12px; }
.lic-grid .lic-h { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.lic-grid .lic-name { font-size:14px; color:var(--ink); margin:0; }
.lic-grid input { margin:0; }
@media (max-width:560px) { .lic-grid { grid-template-columns:1fr 72px 96px; gap:6px 8px; } .lic-grid .lic-name { font-size:13px; } }

/* ---- worlds: a colour per product ----------------------------------------------
   Four products behind one switch, and until now all four tabs looked identical — the only clue to
   which one you were in was reading the menu below (Shimi, 10/09/2026). Each keeps a fixed pastel:
   the ink is the AA-contrast version of the same hue, so the words stay readable, and the active
   tab is filled and ringed rather than merely tinted. Colour is never the only signal — the tab
   also carries its icon, its label and aria-current. */
:root {
  --w-signage:#e8f0fb; --w-signage-ink:#1e4fa8; --w-signage-line:#c6dbf5;
  --w-doors:#e7f4ec;   --w-doors-ink:#186c3c;   --w-doors-line:#bfdfcd;
  --w-rooms:#fbf3e3;   --w-rooms-ink:#8a5c14;   --w-rooms-line:#ecdcb8;
  --w-queues:#efeafc;  --w-queues-ink:#5b21b6;  --w-queues-line:#dcd0f7;
}
.langs.worlds button.w-signage.on { background:var(--w-signage); color:var(--w-signage-ink); box-shadow:inset 0 0 0 1px var(--w-signage-line); }
.langs.worlds button.w-doors.on   { background:var(--w-doors);   color:var(--w-doors-ink);   box-shadow:inset 0 0 0 1px var(--w-doors-line); }
.langs.worlds button.w-rooms.on   { background:var(--w-rooms);   color:var(--w-rooms-ink);   box-shadow:inset 0 0 0 1px var(--w-rooms-line); }
.langs.worlds button.w-queues.on  { background:var(--w-queues);  color:var(--w-queues-ink);  box-shadow:inset 0 0 0 1px var(--w-queues-line); }
.langs.worlds button.on { font-weight:700; }
.langs.worlds button.on .i { color:currentColor; }
/* a hint of the same hue before it is chosen, so the four are told apart even inactive */
.langs.worlds button.w-signage:not(.on):hover { background:var(--w-signage); }
.langs.worlds button.w-doors:not(.on):hover   { background:var(--w-doors); }
.langs.worlds button.w-rooms:not(.on):hover   { background:var(--w-rooms); }
.langs.worlds button.w-queues:not(.on):hover  { background:var(--w-queues); }

/* the selected page picks up the world's colour too, so the menu belongs to the product above it */
@media (min-width:768px) {
  .nav[data-nav-world="signage"] button.on { background:var(--w-signage); color:var(--w-signage-ink); box-shadow:inset 0 0 0 1px var(--w-signage-line); }
  .nav[data-nav-world="doors"]   button.on { background:var(--w-doors);   color:var(--w-doors-ink);   box-shadow:inset 0 0 0 1px var(--w-doors-line); }
  .nav[data-nav-world="rooms"]   button.on { background:var(--w-rooms);   color:var(--w-rooms-ink);   box-shadow:inset 0 0 0 1px var(--w-rooms-line); }
  .nav[data-nav-world="queues"]  button.on { background:var(--w-queues);  color:var(--w-queues-ink);  box-shadow:inset 0 0 0 1px var(--w-queues-line); }
  .nav[data-nav-world] button.on .i { color:currentColor; }
  /* the account-wide pages drop to the bottom of the column, just above the sign-out block */
  .nav { flex:1 1 auto; }
  .nav-sep { margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }
}
/* On a phone the menu is a bottom bar, so the separator turns on its side: the same grouping, as a
   hairline between the product pages and the account-wide ones. Hiding it is what made two adjacent
   tabs both reading "Customers" look like the same tab twice. */
@media (max-width:767px) {
  .nav-sep { flex:0 0 1px; align-self:center; width:1px; height:26px; margin:0 3px; background:var(--line); }
}

/* ---- the world switch is four items in a control built for two -----------------
   `.langs` is the language toggle: two words, side by side, flex:1 each. Four Hebrew product names
   in a 250px sidebar do not fit that: the labels wrapped mid-word and the last tab was clipped off
   the edge of the sidebar entirely (Shimi, 10/09/2026, with photos). Two by two gives every product
   a whole line, and lets the pastel fill wrap its label instead of sitting behind half of it. */
.langs.worlds { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
/* the base control never made its buttons flex containers - without this the icon simply sits
   inline beside the label and neither the gap nor the column direction does anything */
.langs.worlds button { display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:46px; padding:6px 4px; font-size:12.5px; line-height:1.15; text-align:center; }
.langs.worlds .i { width:17px; height:17px; flex:0 0 auto; }
@media (max-width:767px) { .langs.worlds { margin:0 16px 8px; } }

/* ---- the free-layout editor -------------------------------------------------
   The preview is the point: four percentage boxes are unreadable as numbers and obvious as a
   picture, and the 16:9 frame is the same shape as the television they describe. */
.lprev { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-sm); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line); }
.lprev.portrait { aspect-ratio:9/16; max-width:300px; margin-inline:auto; }
/* The label sits on a colour the user picked, which may be anything from black to pale blue, so it
   carries its own dark chip rather than trusting a text-shadow to save it. */
.lz { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2px; overflow:hidden; text-align:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.lz > span, .lz > small { color:#fff; background:rgba(17,24,39,.72); padding:1px 6px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lz > span { font-size:12px; font-weight:600; line-height:1.35; border-radius:4px 4px 0 0; }
.lz > small { font-size:10px; font-variant-numeric:tabular-nums; border-radius:0 0 4px 4px; }
.lzrow { border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:10px; background:var(--wash); }
.lzrow .field { margin-bottom:8px; }

/* ---------- publish state: the first thing in the work area, not the last thing in the sidebar ----------
   Shimi asked for it somewhere obvious (11/09/2026). Two voices: brass when the screens are behind what
   is on this page, one quiet hairline when they are not. Sticky, so scrolling a long list never hides it. */
.pubbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:11px clamp(14px, 2.2vw, 22px); border-block-end:1px solid var(--line); }
.pubbar .pi { display:inline-flex; flex:0 0 auto; }
.pubbar .pi .i { width:19px; height:19px; }
.pubbar .pt { display:flex; flex-direction:column; gap:1px; min-width:0; margin-inline-end:auto; }
.pubbar .pt b { font-size:14px; font-weight:700; letter-spacing:-.008em; }
.pubbar .pt > span { font-size:12.5px; }
.pubbar .hist { flex:0 0 auto; font-size:12.5px; display:inline-flex; align-items:center; gap:6px; }
.pubbar .btn { flex:0 0 auto; }

/* work waiting to reach the screens */
.pubbar.act { background:var(--brand-deep); color:#fff; border-block-end-color:color-mix(in srgb, var(--brand-deep) 72%, #000); }
.pubbar.act .pt > span { color:color-mix(in srgb, #fff 78%, var(--brand-deep)); }
.pubbar.act .pi { color:#fff; }
.pubbar.act .hist { color:color-mix(in srgb, #fff 82%, var(--brand-deep)); }
.pubbar.act .hist:hover { color:#fff; }
.pubbar.act .btn.go { background:#fff; color:var(--brand-deep); border-color:#fff; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.14); }
.pubbar.act .btn.go:hover { background:color-mix(in srgb, #fff 92%, var(--brand)); color:var(--brand-deep); }
.pubbar.act .btn.go .i { color:var(--brand-deep); }

/* everything already on the screens: present, quiet, not shouting */
.pubbar.calm { background:var(--paper); color:var(--ink-2); }
.pubbar.calm .pi { color:var(--live); }
.pubbar.calm .pt > span { color:var(--muted); }
.pubbar.calm .hist { color:var(--muted); }
.pubbar.calm .hist:hover { color:var(--ink); }

@media (max-width: 780px) {
  .pubbar { gap:9px; padding:9px 14px; }
  .pubbar .pt > span { display:none; }          /* the headline alone carries it on a phone */
  .pubbar .hist span { display:none; }
}

/* A help note that is a caution: carried by a tint of its own hue and a hairline, not a bar down one side. */
.help.warn { background:var(--wait-tint); border:1px solid var(--wait-line); color:var(--ink-2); }
.help.warn b { color:var(--wait); }

/* The doctors list carries a face per row. Small enough not to turn a working list into a gallery,
   large enough that a missing one is obvious at a glance (Pablo, 14/09/2026). */
.ppl-photo { width: 46px; }
.ppl-photo img {
  width: 36px; height: 36px; object-fit: cover; border-radius: 50%;
  display: block; background: var(--wash);
}
.ppl-photo .chip.warn { white-space: nowrap; font-size: 11px; }
.toolbar .btn.on { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }