/* =========================================================================
   THE GENERATED APP — the customer's own product, on the same sheet.

   It borrows platform.css's tokens, so the paper, the ink, the type scale
   and the dark/light switch are one instrument across the whole system. It
   borrows NOTHING else: no rail of build steps, no engine chrome, no
   Tepegöz wordmark. What sits where the platform's rail sits is the
   customer's own name, in their own accent, above the screens their blocks
   provide and nothing more.

   The furniture is a drawing's, because the thing being run is a building:
   a brand plate at the head of the rail, the screen list as a ruled index,
   and a TITLE BLOCK at the foot whose cells — site, language, user — are
   the live pickers. A shop manager with forty branches changes branch in
   the same cell that tells them which branch they are reading.
   ========================================================================= */

body.appbody { margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); }
body.appbody.bare { display:block; }
body.appbody.bare .page { margin-left:0; max-width:860px; padding:40px 30px 70px; }
body.appbody.login .page { display:flex; align-items:center;
  justify-content:center; min-height:100vh; }
body.appbody.login .loginbox { width:min(400px, 92vw); box-shadow:var(--shadow); }
body.appbody.login .loginbox .cardhead { display:block; padding:22px 22px 16px; }
body.appbody.login .loginbox .cardhead h2 { display:block; font-family:var(--serif);
  font-size:27px; font-weight:400; letter-spacing:-.01em; line-height:1.15;
  text-transform:none; color:var(--text); }
body.appbody.login .loginbox .cardhead .bn { display:block; }
body.appbody.login .loginbox .cardhead .logo { display:block; max-width:132px;
  max-height:46px; margin-bottom:12px; }
body.appbody.login .loginbox .cardhead small { display:block; margin-top:7px;
  font-family:var(--sans); font-size:12px; color:var(--faint);
  letter-spacing:.01em; line-height:1.5; }
body.appbody.login .loginbox .cardbody { padding:18px 22px 22px;
  border-top:1px solid var(--line); }
body.appbody.login .loginbox .btn { width:100%; justify-content:center;
  margin-top:6px; }

/* ------------------------------------------------------------- the rail -- */
/* One hairline separates it from the sheet; the accent is a single rule down
   the outer edge, which is the only place the brand colour is allowed to be
   a block of colour at all. */

#apprail { position:fixed; inset:0 auto 0 0; width:248px; z-index:900;
  box-sizing:border-box; display:flex; flex-direction:column; gap:18px;
  padding:24px 0 14px; background:var(--rail-bg);
  border-right:1px solid var(--rail-line);
  box-shadow:inset 3px 0 0 var(--acc);
  overflow:hidden auto; scrollbar-width:thin; }
#apprail * { box-sizing:border-box; }

#apprail .brand { display:block; padding:0 18px 16px; text-decoration:none;
  border-bottom:1px solid var(--rail-line); }
#apprail .brand .logo { display:block; max-width:154px; max-height:52px;
  margin-bottom:10px; }
#apprail .brand b { display:block; font-family:var(--serif); font-size:22px;
  font-weight:400; letter-spacing:-.012em; color:var(--text); line-height:1.18; }
#apprail .brand small { display:block; margin-top:6px; font-size:11px;
  color:var(--faint); line-height:1.5; }
/* Where this App stands - "<Company> · <Branch> · <Site>" - once head office
   has told the box: names, so it wraps at a name rather than overflowing. */
#apprail .brand small.place { color:var(--dim); overflow-wrap:anywhere; }
#apprail .brand:hover b { color:var(--acc); }

/* The screen index. A tab is a line in a list, not a button: the mark, the
   word, and — on the one you are standing on — the red pencil down its left
   and the mark picked out in the same colour. */
#apprail .tabs { display:flex; flex-direction:column; padding:0 10px; }
#apprail .tab { display:flex; align-items:center; gap:11px;
  padding:9px 10px 9px 12px; text-decoration:none; color:var(--dim);
  font-size:13.5px; position:relative; letter-spacing:.005em; }
#apprail .tab + .tab { border-top:1px solid var(--rail-line); }
#apprail .tab:hover { color:var(--text); }
#apprail .tab .ico { width:17px; height:17px; flex:none; color:var(--faint);
  display:flex; align-items:center; justify-content:center; }
#apprail .tab .ico svg { width:17px; height:17px; display:block; }
/* A screen label is one line. Twelve Cyrillic characters must not push the
   mark out of the column, so the word truncates and the title attribute is
   not needed to read the rail - the words in it are short by construction. */
#apprail .tab .lbl { min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
/* `ui.icon()` emits .mk, and a screen may put one in its own content (a
   legend, an empty state). One rule sizes it wherever it lands. */
.mk { width:1em; height:1em; vertical-align:-.12em; }
#apprail .tab:hover .ico { color:var(--dim); }
#apprail .tab.here { color:var(--text); font-weight:600; }
#apprail .tab.here .ico { color:var(--acc); }
#apprail .tab.here::before { content:""; position:absolute; left:-10px; top:0;
  bottom:0; width:2px; background:var(--acc); }

/* ---------------------------------------------------------- title block -- */
/* Ruled cells, monospace values, tiny uppercase captions: the block in the
   corner of a drawing, except every cell here is a control. */
#apprail .railfoot { margin-top:auto; padding:14px 10px 0; }
#apprail .titleblock { border:1px solid var(--rail-line); background:var(--panel); }
#apprail .titleblock > * + * { border-top:1px solid var(--rail-line); }
#apprail .cell { display:block; padding:7px 9px 8px; }
#apprail .cell > span { display:block; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
#apprail .pick select { width:100%; padding:3px 2px; font-family:var(--mono);
  font-size:12px; background:transparent; color:var(--text); border:none;
  border-radius:0; cursor:pointer; }
#apprail .pick select:focus { outline:none; color:var(--acc); }
#apprail .whoami { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  font-size:12px; color:var(--faint); }
#apprail .whoami > span { width:100%; }
#apprail .whoami b { font-family:var(--mono); font-size:12px; color:var(--text);
  font-weight:500; }
#apprail .whoami i { font-style:normal; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); }
#apprail .whoami a { margin-left:auto; color:var(--acc); text-decoration:none;
  font-size:11px; border-bottom:1px solid transparent; }
#apprail .whoami a:hover { border-bottom-color:var(--acc); }

.appmain { margin-left:248px; padding:34px 34px 64px; max-width:1500px; }
.appmain .tablewrap { overflow-x:auto; }
.appmain h4.sub { margin:18px 0 8px; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); font-weight:600; }
.appmain .caveats { margin:0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:7px; }
.appmain .caveats li { position:relative; padding-left:16px; font-size:12.5px;
  line-height:1.55; color:var(--warn); }
.appmain .caveats li::before { content:"▲"; position:absolute; left:0;
  font-size:9px; top:3px; }

/* -- the wall ------------------------------------------------------------ */
.appmain .wall { display:grid; gap:10px;
  grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); }
.appmain .tile { margin:0; background:var(--panel2); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--line); }
.appmain .tile img { display:block; width:100%; aspect-ratio:16/9;
  object-fit:cover; background:var(--panel2); }
.appmain .tile .pic { position:relative; }
.appmain .tile .pic img:not([src]) { visibility:hidden; }
/* A kept picture (the camera does not stream) says when it was taken. */
.appmain .tile .when { position:absolute; left:6px; bottom:6px; font-size:10.5px;
  color:#fff; background:rgba(0,0,0,.62); border-radius:4px; padding:2px 6px;
  pointer-events:none; font-variant-numeric:tabular-nums; }
.appmain .tile .when:empty { display:none; }
.appmain .tile figcaption { display:flex; align-items:center; gap:7px;
  padding:7px 9px; font-size:12px; flex-wrap:wrap; }
.appmain .tile figcaption b { color:var(--text); font-weight:600; }
.appmain .tile .detail { font-size:10.5px; color:var(--faint); width:100%; }
.appmain .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); }
.appmain .dot.offline, .appmain .dot.error { background:var(--err); }
.appmain .dot.reconnecting, .appmain .dot.simulated { background:var(--warn); }

.appmain .alertswitches { display:flex; flex-direction:column; gap:2px; }
.appmain .alertrow { display:grid; grid-template-columns:24px 200px 1fr;
  align-items:center; gap:8px; padding:7px 6px; border-radius:var(--radius);
  font-size:12.5px; cursor:pointer; }
.appmain .alertrow:hover { background:var(--panel2); }
.appmain .alertrow .k { font-family:var(--mono); font-size:11.5px;
  color:var(--text); }
.appmain .alertrow .w { color:var(--faint); font-size:11.5px; }

/* -- violations ---------------------------------------------------------- */
.appmain .violgrid { display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.appmain .viol { display:flex; flex-direction:column; margin:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel2); }
.appmain .viol .ev { display:block; width:100%; aspect-ratio:16/9;
  object-fit:cover; background:var(--panel2); }
.appmain .viol .ev.noev { display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:4px;
  color:var(--faint); font-size:11.5px; padding:10px; }
.appmain .viol .meta { padding:10px 11px; display:flex; flex-direction:column;
  gap:7px; }
.appmain .viol .top { display:flex; align-items:center; gap:6px;
  flex-wrap:wrap; }
.appmain .viol .top .when { margin-left:auto; font-family:var(--mono);
  font-size:10.5px; color:var(--faint); }
.appmain .viol .who b { font-size:13.5px; }
.appmain .viol .who .key, .appmain .viol .cam { display:block;
  font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.appmain .viol .hist { margin:0; padding:0; list-style:none; font-size:10.5px;
  color:var(--faint); }
.appmain .viol .verdicts { display:flex; gap:5px; margin-top:2px; }
.appmain .viol .verdicts .btn { flex:1; padding:5px 6px; font-size:11.5px; }
.appmain .btn.ok { background:var(--ok); color:var(--acc-ink);
  border-color:var(--ok); }

/* -- footfall hours ------------------------------------------------------ */
.appmain .hours { display:flex; align-items:flex-end; gap:3px; height:132px; }
.appmain .hbar { flex:1; display:flex; align-items:flex-end; gap:1px;
  height:100%; position:relative; }
.appmain .hbar i { flex:1; display:block; min-height:1px;
  border-radius:2px 2px 0 0; }
.appmain .hbar i.in { background:var(--acc); }
.appmain .hbar i.out { background:var(--line2); }
.appmain .hbar span { position:absolute; bottom:-16px; left:0; right:0;
  text-align:center; font-family:var(--mono); font-size:9px;
  color:var(--faint); }
.appmain .hours + p { margin-top:22px !important; }

/* -- HQ overview --------------------------------------------------------- */
.appmain .sitegrid { display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.appmain .sitecard { display:block; padding:13px 14px; text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel2); color:var(--text); }
.appmain .sitecard:hover { border-color:var(--acc); }
.appmain .sitecard.fault { box-shadow:inset 3px 0 0 var(--err); }
.appmain .sitecard.waiting { box-shadow:inset 3px 0 0 var(--warn); }
.appmain .sitecard.ok { box-shadow:inset 3px 0 0 var(--ok); }
.appmain .sitecard .top { display:flex; align-items:center; gap:8px; }
.appmain .sitecard .top b { font-size:14px; }
.appmain .sitecard .why { margin:8px 0 10px; font-size:12px; line-height:1.55;
  color:var(--dim); }
.appmain .sitecard .nums { display:flex; gap:12px; font-family:var(--mono);
  font-size:10.5px; color:var(--faint); }

/* -- forms --------------------------------------------------------------- */
.appmain .branchset { border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px 14px; margin:0 0 14px; }
.appmain .branchset legend { padding:0 6px; font-size:12px; color:var(--acc); }
.appmain .addemp { display:flex; gap:6px; }
.appmain .addemp input { padding:6px 8px; font-size:12.5px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:var(--radius); }
.appmain .rulelist { margin:14px 0 0; padding:0; list-style:none; }
.appmain .rulelist li { padding:6px 0; border-bottom:1px solid var(--line);
  font-size:12px; }
.appmain .rulelist li .why { display:block; color:var(--faint);
  font-size:11.5px; margin-top:2px; }
.appmain .rulelist li.none { color:var(--faint); }

/* -- the three states a list has, and the fourth a screen has ------------ */
/* `empty` is ruled dashed by platform.css already. What is added here is the
   row of next moves under it, the ERROR variant — which must never be
   mistaken for "nothing happened" — and the loading state, which is drawn in
   the shape of the thing that is coming so the page does not jump. */

.appmain .empty .more { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.appmain .empty.bad { border-style:solid; border-color:var(--err); }
.appmain .empty.bad h3 { color:var(--err); }
.appmain .empty.bad .detail { display:block; margin-top:4px; padding:8px 10px;
  font-family:var(--mono); font-size:11.5px; line-height:1.55;
  color:var(--dim); background:var(--panel2); border-radius:var(--radius);
  max-width:100%; overflow-x:auto; white-space:pre-wrap;
  overflow-wrap:anywhere; }

.appmain .loadstate { display:flex; flex-direction:column; gap:9px;
  padding:26px 22px; border:1px dashed var(--line); border-radius:var(--radius); }
.appmain .loadstate p { margin:0; font-size:13px; color:var(--dim); }
.appmain .loadstate .sk { display:block; height:9px; border-radius:2px;
  background:var(--panel2); border:1px solid var(--line); }
.appmain .loadstate .sk:nth-child(3) { width:82%; }
.appmain .loadstate .sk:nth-child(4) { width:61%; }
/* A card waiting on a write it has sent. Not a spinner over the page: the
   rows stay readable and only stop being clickable, because a manager
   re-reading the number they just judged is the normal thing to do. */
.appmain .card.busy { position:relative; }
.appmain .card.busy .cardbody { opacity:.55; pointer-events:none; }
.appmain .card.busy .cardhead::after { content:""; width:9px; height:9px;
  border-radius:50%; background:var(--acc); margin-left:8px; flex:none;
  animation:tzpulse 1s ease-in-out infinite; }
@keyframes tzpulse { 50% { opacity:.25; } }

/* A KPI whose number is a link to the rows it was added up from. It must not
   look like prose: same ink, same mono, a hairline that appears on hover. */
.appmain .kpi .drill { color:inherit; text-decoration:none;
  border-bottom:1px solid transparent; }
.appmain .kpi .drill:hover { color:var(--acc); border-bottom-color:var(--acc); }
.appmain .kpi .fx { text-decoration:none; }

/* Language chosen before signing in, on the login sheet. */
.appmain .langswitch, body.appbody.login .langswitch {
  display:flex; gap:12px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line); font-size:12px; }
body.appbody.login .langswitch a { color:var(--faint); text-decoration:none;
  border-bottom:1px solid transparent; }
body.appbody.login .langswitch a:hover { color:var(--acc); }
body.appbody.login .langswitch a.here { color:var(--text);
  border-bottom-color:var(--acc); }

.appmain .langboxes { display:flex; gap:16px; flex-wrap:wrap; }
.appmain .langbox { display:flex; align-items:center; gap:7px; font-size:13px;
  cursor:pointer; }

/* A table that is not inside a card still gets its tools; they are ruled to
   the right above it rather than floated into somebody else's header. */
.appmain .cardtools.looseTools { display:flex; gap:6px; justify-content:flex-end;
  margin:0 0 6px; }
.appmain .muted.bad { color:var(--err); }

/* The masthead of the printed sheet: invisible here, first thing on paper. */
.appmain .printhead { display:none; }

/* A gate tablet held in one hand. The rail stops being a column and becomes
   a header strip; the title block goes back to one row of cells. */
@media (max-width:900px) {
  #apprail { position:static; width:auto; border-right:none; gap:12px;
    border-bottom:1px solid var(--rail-line); padding:16px 0 10px;
    box-shadow:inset 0 3px 0 var(--acc); }
  #apprail .brand { padding-bottom:12px; }
  #apprail .brand b { font-size:19px; }
  #apprail .tabs { flex-direction:row; flex-wrap:wrap; gap:0 4px; }
  #apprail .tab { padding:7px 10px; }
  #apprail .tab + .tab { border-top:none; }
  #apprail .tab.here::before { left:0; top:auto; bottom:-1px; right:0;
    width:auto; height:2px; }
  #apprail .titleblock { display:flex; flex-wrap:wrap; }
  #apprail .titleblock > * { flex:1 1 140px; }
  #apprail .titleblock > * + * { border-top:none;
    border-left:1px solid var(--rail-line); }
  .appmain { margin-left:0; padding:20px 16px 54px; }
}

/* ------------------------------------------------------------- a phone -- */
/* A shop manager opens this on the way to the shop. At 390 px the rail is a
   strip whose tabs scroll sideways rather than stacking into six rows and
   pushing the actual screen below the fold; every grid becomes one column;
   and the only thing allowed to scroll horizontally is a table, INSIDE its
   own box. The body never does — a page that slides sideways under a thumb
   reads as broken software. */
@media (max-width:560px) {
  #apprail { padding:14px 0 8px; gap:10px; }
  #apprail .brand { padding:0 14px 10px; }
  #apprail .brand b { font-size:17px; }
  #apprail .brand .logo { max-width:112px; max-height:38px; }
  #apprail .tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; padding:0 8px; }
  #apprail .tabs::-webkit-scrollbar { display:none; }
  #apprail .tab { flex:none; padding:8px 9px; font-size:13px; }
  #apprail .tab .lbl { max-width:11ch; }
  #apprail .railfoot { padding:10px 8px 0; }
  #apprail .titleblock > * { flex:1 1 50%; }

  .appmain { padding:16px 14px 46px; }
  .appmain .printhead { display:none; }
  .page .pagehead h1.title { font-size:29px; }
  .page .pagehead .actions { width:100%; }

  /* One column, everywhere. Each of these sets its own minimum track wide
     enough to overflow a 390 px screen, so each is named rather than hoping
     auto-fill notices. */
  .appmain .wall { grid-template-columns:minmax(0,1fr); }
  .appmain .violgrid { grid-template-columns:minmax(0,1fr); }
  .appmain .sitegrid { grid-template-columns:minmax(0,1fr); }
  .appmain .grid.cols-2, .appmain .grid.cols-3, .appmain .grid.cols-4 {
    grid-template-columns:minmax(0,1fr); gap:14px; }

  /* The table keeps its own scroll box and is told it may be wider than the
     phone. Squashing six columns into 358 px produces a column of single
     letters, which is worse than a swipe. */
  .appmain .tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--line); border-radius:var(--radius); }
  .appmain .tablewrap > table.data { min-width:520px; }

  .appmain .alertrow { grid-template-columns:24px 1fr; row-gap:2px; }
  .appmain .alertrow .w { grid-column:2; }
  .appmain .branchset { padding:10px 11px 12px; }
  .appmain .hours { height:104px; }
  .appmain .empty { padding:22px 16px; }
  .appmain .empty .btn, .appmain .empty .more { width:100%; }
  .appmain .empty .more .btn { flex:1; justify-content:center; }
  .tz-toasts { left:12px; right:12px; bottom:12px; align-items:stretch; }
  .tz-toast { max-width:none; }
}

/* -------------------------------------------------------- on paper ------ */
/* An HR department prints the timesheet and files it; a manager prints the
   violation report and walks it to a meeting. So the sheet that comes out
   carries the product, the branch, the screen and the moment it was taken,
   and nothing that only works on a screen: no rail, no buttons, no camera
   tiles, no toasts.

   The tokens are redefined for print rather than colours being written
   here — the same page must print black-on-white whether it was read in
   Light or in Dark, and a browser does not print backgrounds by default, so
   a light ink on an unprinted ground would come out blank. The values are
   the CSS system colours, which is what the printer already understands and
   is not a literal. The selectors match platform.css's own look selectors
   one for one, and this sheet is linked after that one, so print wins over
   either look. */
@media print {
  :root, :root[data-tz="platform"], :root:has(main.page),
  :root[data-theme], :root[data-tz="platform"][data-theme], :root:has(main.page)[data-theme] {
    /* Canvas and CanvasText follow the colour scheme, and Dark's is dark:
       paper is light, whichever look the page was read in. */
    color-scheme: light;
    --bg:Canvas; --bg2:Canvas; --panel:Canvas; --panel2:Canvas; --sunken:Canvas;
    --text:CanvasText; --dim:CanvasText; --faint:GrayText;
    --line:GrayText; --line2:GrayText; --edge:GrayText; --acc:CanvasText;
    --acc-soft:Canvas; --acc-ink:Canvas;
    --ok:CanvasText; --warn:CanvasText; --err:CanvasText; --info:CanvasText;
    --shadow:none;
  }
  body.appbody { background:Canvas; color:CanvasText; }
  #apprail, .tz-toasts, .tz-confirm { display:none !important; }
  .appmain { margin-left:0; padding:0; max-width:none; }

  .appmain .printhead { display:flex; flex-wrap:wrap; gap:4px 14px;
    align-items:baseline; margin:0 0 14px; padding-bottom:8px;
    border-bottom:1px solid CanvasText; font-size:10pt; }
  .appmain .printhead b { font-size:13pt; font-family:var(--serif);
    font-weight:400; }
  .appmain .printhead span { color:GrayText; }

  /* Controls print as ink on paper that nobody can press. */
  .appmain .btn, .appmain .actions, .appmain .cardtools,
  .appmain .verdicts, .appmain .addemp, .appmain .kpi .fx,
  .appmain .loadstate { display:none !important; }
  .appmain form button, .appmain input, .appmain select { display:none; }

  /* A page break through the middle of a row loses the row. */
  .appmain .card { break-inside:avoid; page-break-inside:avoid;
    box-shadow:none; margin-bottom:12px; }
  .appmain table.data tr { break-inside:avoid; page-break-inside:avoid; }
  .appmain table.data thead { display:table-header-group; }
  .appmain .tablewrap { overflow:visible; border:none; }
  .appmain .tablewrap > table.data { min-width:0; width:100%; }

  /* A wall of live video is nothing on paper. */
  .appmain .wall, .appmain .tile img { display:none; }
  .appmain .kpis { break-inside:avoid; }
  .page .pagehead h1.title { font-size:20pt; }
  a[href]::after { content:""; }
}

/* =========================================================================
   THE SAME FOOTPRINT AS HEAD OFFICE AND THE LITE (15 Oct 2026)

   The owner: "THE APP STYLE IS ... NO SAME FOOTPRINT AS LITE OR HQ OR
   ANYTHING" - and "make it smarter". Head office and the Lite are drawn to
   the redesign (dash/static/redesign.css, DESIGN.md section 4.6): a quiet
   rail of rounded places, sans titles, cards with a plain header, chips for
   states, tables with sentence-case heads. The App kept the first look - a
   drawing sheet: serif titles, an accent edge, ruled cells, capitals at
   9 px. This layer dresses the App's own parts in the redesign, so the
   customer's product reads as the same product as the one that built it.

   Only the dress changes: every class the blocks emit (ui.py) is the one it
   was, so no screen's markup moves. Every colour is a platform.css token;
   the customer's own colour stays theirs - it is --acc, set per App - and
   marks where you are, as head office's accent does. Scoped to
   body.appbody, so no page of head office or the Lite is touched.
   ========================================================================= */

/* ------------------------------------------------------------- the rail -- */
body.appbody #apprail { box-shadow:none; gap:8px; padding:0 0 14px;
  background:var(--rail-bg); border-right:1px solid var(--rail-line);
  font-family:var(--sans); }
@media (min-width:901px) {
  body.appbody #apprail { width:var(--rail-w); }
  body.appbody .appmain { margin-left:var(--rail-w); }
}
body.appbody #apprail .brand { display:flex; flex-direction:column; gap:3px;
  padding:18px 18px 12px; border-bottom:none; }
body.appbody #apprail .brand .logo { max-width:132px; max-height:40px; margin-bottom:8px;
  width:auto; height:auto; object-fit:contain; align-self:flex-start; }
/* A customer's logo beside its name, never stretched: the mark at the left,
   the name and its line stacked at its right (a round emblem stays round). */
body.appbody #apprail .brand:has(.logo) { display:grid; grid-template-columns:auto 1fr;
  column-gap:12px; row-gap:2px; align-items:center; }
body.appbody #apprail .brand:has(.logo) .logo { grid-row:1 / span 3; width:52px; height:52px;
  max-width:none; max-height:none; margin:0; object-fit:contain; border-radius:50%; }
body.appbody #apprail .brand:has(.logo) > :not(.logo) { grid-column:2; min-width:0; }
body.appbody #apprail .brand b { font-family:var(--sans); font-size:16px; font-weight:650;
  letter-spacing:-.01em; line-height:1.2; color:var(--text); }
body.appbody #apprail .brand small { margin-top:0; font-size:11.5px; color:var(--faint);
  line-height:1.4; }
body.appbody #apprail .brand:hover b { color:var(--text); }
body.appbody #apprail .tabs { gap:2px; padding:4px 10px; }
body.appbody #apprail .tab { height:36px; padding:0 10px; gap:11px;
  border-radius:var(--radius); font-size:14px; line-height:1.2; letter-spacing:0;
  color:var(--dim); transition:color .14s, background .14s; }
body.appbody #apprail .tab + .tab { border-top:none; }
body.appbody #apprail .tab:hover { background:var(--bg2); color:var(--text); }
body.appbody #apprail .tab .ico, body.appbody #apprail .tab .ico svg { width:18px; height:18px; }
body.appbody #apprail .tab .ico { color:currentColor; }
body.appbody #apprail .tab.here { background:var(--acc-soft); color:var(--text); font-weight:600; }
body.appbody #apprail .tab.here .ico { color:var(--acc); }
body.appbody #apprail .tab.here::before { left:-10px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--acc); }
body.appbody #apprail .tab:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }

/* The pickers at the foot: a card of plain fields, as head office's own
   "This computer" block - not a drawing's title block in capitals. */
body.appbody #apprail .railfoot { padding:12px 12px 0; }
body.appbody #apprail .titleblock { border:1px solid var(--rail-line); background:var(--panel);
  border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow); overflow:hidden; }
body.appbody #apprail .titleblock > * + * { border-top:1px solid var(--rail-line); }
body.appbody #apprail .cell { padding:9px 12px 10px; }
body.appbody #apprail .cell > span { font-size:11.5px; letter-spacing:0; text-transform:none;
  color:var(--faint); font-weight:500; margin-bottom:4px; }
body.appbody #apprail .pick select { font-family:var(--sans); font-size:13.5px; font-weight:600;
  height:30px; padding:0 8px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); color:var(--text); }
body.appbody #apprail .pick select:hover { border-color:var(--line2); }
body.appbody #apprail .pick select:focus { outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--focus); color:var(--text); }
body.appbody #apprail .whoami { font-size:12.5px; gap:6px; }
body.appbody #apprail .whoami b { font-family:var(--sans); font-size:13.5px; font-weight:600; }
body.appbody #apprail .whoami i { font-size:11.5px; letter-spacing:0; text-transform:none;
  color:var(--faint); }
body.appbody #apprail .whoami a { font-size:12.5px; font-weight:600; color:var(--acc); }

/* ------------------------------------------------------------- the page -- */
body.appbody .appmain { padding:22px 32px 48px; font-size:14px; line-height:1.45; }
body.appbody .page .pagehead { align-items:center; gap:16px; padding-bottom:0;
  margin-bottom:22px; border-bottom:none; }
body.appbody .page .pagehead h1.title { font-family:var(--sans); font-size:24px;
  font-weight:650; letter-spacing:-.015em; line-height:1.15; }
body.appbody .page .pagehead p.lede { margin-top:6px; font-size:14px; line-height:1.5;
  color:var(--dim); }
body.appbody .appmain h4.sub { font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--text); font-weight:650; margin:20px 0 10px; }

/* ----------------------------------------------------- numbers that count -- */
body.appbody .page .kpis { gap:12px; margin-bottom:22px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
body.appbody .page .kpi { border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow);
  padding:14px 16px 15px; gap:4px; }
body.appbody .page .kpi b.value { font-family:var(--sans); font-size:26px; font-weight:650;
  letter-spacing:-.02em; line-height:1.1; }
body.appbody .page .kpi b.value small { font-size:14px; font-weight:500; }
body.appbody .page .kpi span.label { order:-1; margin:0 0 2px; font-size:12.5px;
  letter-spacing:0; text-transform:none; color:var(--dim); font-weight:500; }
body.appbody .page .kpi i.delta { font-family:var(--sans); font-size:12px; font-weight:600; }

/* ----------------------------------------------------------------- cards -- */
body.appbody .page .card { border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow); }
body.appbody .page .card > header.cardhead { padding:13px 18px; min-height:0;
  background:transparent; }
body.appbody .page .card > header.cardhead h2 { font-family:var(--sans); font-size:15px;
  font-weight:650; letter-spacing:0; text-transform:none; color:var(--text); }
body.appbody .page .card > header.cardhead .cardtools { font-size:12.5px; }
body.appbody .page .card > .cardbody { padding:14px 18px; }
body.appbody .page .grid { gap:16px; }

/* ---------------------------------------------------------------- tables -- */
body.appbody .page table.data, body.appbody .page .table { font-size:13.5px; }
body.appbody .page table.data th { font-size:12px; letter-spacing:0; text-transform:none;
  color:var(--faint); font-weight:600; padding:10px 14px; background:var(--panel);
  border-bottom:1px solid var(--line); }
body.appbody .page table.data td { padding:11px 14px; }
body.appbody .page table.data td.mono { font-size:12.5px; }

/* ------------------------------------------------- states: a soft chip -- */
body.appbody .page .pill { height:22px; padding:0 9px; border-radius:11px; gap:6px;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:0;
  text-transform:none; border:1px solid var(--line); background:var(--panel2); color:var(--dim); }
body.appbody .page .pill.ok   { background:var(--ok-soft);   color:var(--ok);   border-color:transparent; }
body.appbody .page .pill.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
body.appbody .page .pill.err  { background:var(--err-soft);  color:var(--err);  border-color:transparent; }
body.appbody .page .pill.info { background:var(--info-soft); color:var(--info); border-color:transparent; }
body.appbody .page .pill.acc  { background:var(--acc-soft);  color:var(--acc);  border-color:transparent; }
body.appbody .page .pill.dim  { background:transparent; color:var(--faint); }
body.appbody .page .chip { border-radius:11px; font-size:12.5px; padding:3px 10px; }

/* --------------------------------------------------------------- buttons -- */
body.appbody :is(.page, .drawer) .btn { height:34px; padding:0 14px; gap:7px;
  font-size:13.5px; font-weight:600; letter-spacing:0; line-height:1;
  border-radius:var(--radius); box-shadow:var(--shadow); justify-content:center; }
body.appbody :is(.page, .drawer) .btn:hover { background:var(--bg2); border-color:var(--line2); }
body.appbody :is(.page, .drawer) .btn.primary { background:var(--acc); color:var(--acc-ink);
  border-color:var(--acc); }
body.appbody :is(.page, .drawer) .btn.primary:hover {
  background:color-mix(in srgb, var(--acc) 88%, var(--text)); border-color:var(--acc); }
body.appbody :is(.page, .drawer) .btn.ghost { background:transparent; border-color:transparent;
  box-shadow:none; color:var(--dim); }
body.appbody :is(.page, .drawer) .btn.ghost:hover { background:var(--bg2); color:var(--text); }
body.appbody :is(.page, .drawer) .btn.ok { background:var(--ok-soft); color:var(--ok);
  border-color:transparent; }
body.appbody :is(.page, .drawer) .btn.small { height:28px; padding:0 10px; font-size:12.5px; }
body.appbody .appmain .viol .verdicts .btn { height:30px; padding:0 6px; font-size:12.5px; }

/* ---------------------------------------------------- nothing, said well --
   No dashed box: a soft panel, as head office says "nothing yet". */
body.appbody .page .empty { border:none; background:var(--panel2);
  border-radius:calc(var(--radius) + 2px); padding:20px 22px; font-size:14px; }
body.appbody .page .empty h3 { font-family:var(--sans); font-size:16px; font-weight:650;
  letter-spacing:-.005em; margin:0 0 6px; color:var(--text); }
body.appbody .page .empty p { font-size:13.5px; line-height:1.55; color:var(--dim); }
body.appbody .page .card > .cardbody > .empty:only-child { margin:0; }

/* --------------------------------- the App's own: tiles, sites, alerts -- */
body.appbody .appmain .tile { border-radius:calc(var(--radius) + 4px); overflow:hidden;
  border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); }
/* A tile with no picture yet is a soft grey frame, not a white hole. */
body.appbody .appmain .tile .pic { background:var(--panel2); }
body.appbody .appmain .tile figcaption { padding:9px 12px; font-size:13px; }
body.appbody .appmain .tile .detail { font-size:12px; }
body.appbody .appmain .sitecard { border-radius:calc(var(--radius) + 4px); padding:14px 16px;
  box-shadow:var(--shadow); }
body.appbody .appmain .viol { border-radius:calc(var(--radius) + 4px); overflow:hidden;
  box-shadow:var(--shadow); }
body.appbody .appmain .viol .who b { font-size:14px; }
body.appbody .appmain .viol .hist { font-size:12px; }
body.appbody .appmain .alertrow { border-radius:var(--radius); }
body.appbody .appmain .alertrow .k { font-family:var(--sans); font-size:12.5px; font-weight:600; }
body.appbody .appmain .alertrow .w { font-size:12.5px; }

/* ------------------------------------------ a person's profile (Employees) -- */
body.appbody .appmain .backlink { margin:0 0 12px; font-size:13.5px; }
body.appbody .appmain .backlink a { color:var(--dim); text-decoration:none; font-weight:600; }
body.appbody .appmain .backlink a:hover { color:var(--text); }
body.appbody .appmain .profilehead { display:flex; align-items:flex-start; gap:16px; }
body.appbody .appmain .profilehead > div { flex:1; min-width:0; }
body.appbody .appmain .profilephoto { width:64px; height:64px; border-radius:50%; flex:none;
  object-fit:cover; border:1px solid var(--line); background:var(--panel2); }
body.appbody .page table.data td a { color:var(--acc); text-decoration:none; font-weight:600; }
body.appbody .page table.data td a:hover { text-decoration:underline; }

/* ---------------------------------------------------------------- sign in -- */
body.appbody.login .loginbox { border-radius:calc(var(--radius) + 6px); }
body.appbody.login .loginbox .cardhead h2 { font-family:var(--sans); font-size:24px;
  font-weight:650; letter-spacing:-.015em; }
body.appbody.login .loginbox .btn { height:38px; }

/* ----------------------------------------------- a narrow window, a tablet -- */
@media (max-width:900px) {
  body.appbody #apprail { box-shadow:none; border-bottom:1px solid var(--rail-line);
    padding:0 0 10px; }
  body.appbody #apprail .tabs { flex-direction:row; flex-wrap:wrap; gap:4px; padding:0 10px; }
  body.appbody #apprail .tab { height:34px; }
  body.appbody #apprail .tab.here::before { display:none; }
  body.appbody .appmain { padding:18px 16px 40px; }
}
@media print {
  body.appbody .page .pagehead h1.title { font-size:20pt; }
  body.appbody .page .card, body.appbody .page .kpi { box-shadow:none; }
}