/* =========================================================================
   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, .appmain .dot.broken { background:var(--err); }
.appmain .dot.reconnecting, .appmain .dot.simulated { background:var(--warn); }
.appmain .dot.off { background:transparent; border:1px solid var(--faint); }

.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 .assign { display:flex; gap:5px; margin-top:6px; }
.appmain .viol .tgsend { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.appmain .viol .tgsend .btn { padding:5px 10px; font-size:12px; }
.appmain .viol .tgsend .muted { font-size:11.5px; }
.appmain .viol .assign select { flex:1; min-width:0; font:inherit; font-size:12px; padding:4px 6px; }
.appmain .viol .assigned { font-size:12px; margin-top:4px; }
.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; }
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; }
/* The form on the left, the App's picture beside it - or its colour - with
   Tepegoz's mark, white and quiet, in the picture's corner. On a phone the
   picture is a band above the form, and the mark sits under the form. */
body.appbody.login .page.signin { display:grid; grid-template-columns:minmax(380px, 40%) 1fr;
  align-items:stretch; justify-content:stretch; max-width:none; min-height:100vh;
  margin:0; padding:0; }
body.appbody.login .signin-side { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:22px; padding:40px 28px; min-width:0; }
body.appbody.login .signin-side .loginbox { width:min(380px, 100%); }
body.appbody.login .signin-art { order:2; position:relative; overflow:hidden; min-height:100vh;
  background:radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--acc) 55%, var(--sw-light)) 0%,
    transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--acc) 85%, var(--screen)) 0%,
    color-mix(in srgb, var(--acc) 35%, var(--screen)) 100%); }
body.appbody.login .signin-cover { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
body.appbody.login .signin-art::after { content:""; position:absolute; left:0; right:0; bottom:0;
  height:40%; background:linear-gradient(to top, rgba(6,12,22,.50), rgba(6,12,22,0));
  pointer-events:none; }
body.appbody.login .tzmark { position:absolute; right:28px; bottom:24px; z-index:1;
  display:flex; align-items:center; gap:10px; color:var(--sw-light); opacity:.8;
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.03em; }
body.appbody.login .tzmark img { display:block; width:56px; height:auto; }
body.appbody.login .tzmark.small { display:none; position:static; color:var(--faint); opacity:1;
  font-size:12px; font-weight:500; }
body.appbody.login .tzmark.small img { width:30px; filter:brightness(0) invert(.55); }
@media (max-width:900px) {
  body.appbody.login .page.signin { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  body.appbody.login .signin-art { order:0; min-height:0; height:32vh; }
  body.appbody.login .signin-art:not(.with-cover) { display:none; }
  body.appbody.login .signin-art .tzmark { display:none; }
  body.appbody.login .signin-art.with-cover + .signin-side { margin-top:-36px; }
  body.appbody.login .signin-side { justify-content:flex-start; padding:24px 16px 32px;
    position:relative; z-index:1; }
  body.appbody.login .signin-art:not(.with-cover) + .signin-side { justify-content:center;
    min-height:100vh; }
  body.appbody.login .tzmark.small { display:flex; }
}

/* ----------------------------------------------- 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; }
}

/* =========================================================================
   THE TEPEGÖZ APP (the owner, 19-20 Oct 2026)

   "It still looks old styled, no footprint of Tepegöz and simply empty",
   and on the first draft: "a lot better, not empty, and the phone is
   broken". One App every customer wears; this layer is its dress, over the
   two above. The customer's colour stays theirs (--acc, set per App by
   brand_style); the top of every page is theirs too (--hero-bg and
   --hero-ink, set per App by look_style from the App editor's "Top of every
   page"). Every colour here is a token, so Day and Night both read.
   ========================================================================= */

/* the camera's own ground - dark in Day and in Night - and the ink on it */
:root, :root[data-tz="platform"], :root:has(main.page) {
  --screen:color-mix(in srgb, var(--text) 92%, var(--panel)); --screen-ink:var(--panel);
  --app-pad:32px;
  --app-lift:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
}
:root[data-theme="dark"], :root:has(main.page)[data-theme="dark"],
:root[data-tz="platform"][data-theme="dark"] {
  --screen:var(--sunken); --screen-ink:var(--text);
  --app-lift:0 1px 0 rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.40);
}
body.appbody .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; }

/* ------------------------------------------------------------- the rail -- */
body.appbody #apprail { padding:14px 12px 12px; gap:12px; }
body.appbody #apprail .brand { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  column-gap:11px; padding:6px 6px 14px; border-bottom:1px solid var(--rail-line); }
body.appbody #apprail .brand .logotile { height:48px; min-width:48px; max-width:112px; padding:3px;
  border-radius:12px; background:var(--sw-light); border:1px solid var(--line); display:flex;
  align-items:center; justify-content:center; overflow:hidden; }
body.appbody #apprail .brand .logotile img.logo { display:block; height:100%; width:auto; max-width:100%;
  max-height:none; margin:0; border-radius:0; object-fit:contain; }
body.appbody #apprail .brand .logotile.letter { width:48px; padding:0; background:var(--acc);
  border-color:transparent; color:var(--acc-ink); font-size:21px; font-weight:700; }
body.appbody #apprail .brand .bn { display:flex; flex-direction:column; gap:2px; min-width:0; }
body.appbody #apprail .brand b { font-size:16px; font-weight:700; }
body.appbody #apprail .brand small { margin:0; font-size:12px; }
body.appbody #apprail .tab .ico, body.appbody #apprail .tab .ico svg { width:18px; height:18px; }
body.appbody #apprail .tab.here .ico { color:var(--acc-text); }
body.appbody #apprail .tab.here::before { left:-12px; }
body.appbody #apprail .railfoot { padding:0; display:flex; flex-direction:column; gap:12px; }
body.appbody #apprail .titleblock { border-radius:12px; box-shadow:none; }
body.appbody #apprail .titleblock:empty { display:none; }
body.appbody #apprail .whoami { display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:10px; }
body.appbody #apprail .whoami > span { width:auto; margin:0; font-size:inherit; letter-spacing:0;
  text-transform:none; color:inherit; }
body.appbody #apprail .whoami .ava { width:32px; height:32px; border-radius:50%; display:grid;
  place-items:center; background:var(--acc); color:var(--acc-ink); font-size:13px; font-weight:700; }
body.appbody #apprail .whoami .who { display:flex; flex-direction:column; min-width:0; }
body.appbody #apprail .whoami .who b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.appbody #apprail .whoami a { margin:0; }

/* Tepegöz's footprint: the riders, quiet, and "Made with Tepegöz" */
body.appbody .tzmade { display:flex; align-items:center; gap:9px; padding:2px 8px; color:var(--faint);
  font-size:12px; line-height:1.3; }
body.appbody .tzmade b { color:var(--dim); font-weight:650; }
body.appbody .tzglyph { width:36px; aspect-ratio:942/563; flex:none; background:var(--dim);
  -webkit-mask:url(/app/assets/x/tepegoz.svg) center/contain no-repeat;
  mask:url(/app/assets/x/tepegoz.svg) center/contain no-repeat; }
body.appbody .appmain > .tzmade { display:none; justify-content:center; padding:22px 0 0; }
body.appbody .printfoot { display:none; }

/* ----------------------------------------------------------- the top bar -- */
body.appbody .apptop { position:sticky; top:0; z-index:800; display:flex; align-items:center;
  flex-wrap:wrap; gap:8px 12px; min-height:58px; padding:8px var(--app-pad);
  background:var(--panel); border-bottom:1px solid var(--line); }
@media (min-width:901px) {
  body.appbody .apptop, body.appbody .appnotes { margin-left:var(--rail-w); }
}
body.appbody .apptop .pick { display:inline-flex; align-items:center; gap:7px; height:34px;
  padding:0 4px 0 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel);
  color:var(--dim); }
body.appbody .apptop .pick .ico, body.appbody .apptop .pick .ico svg { width:16px; height:16px; }
body.appbody .apptop .pick select { height:32px; border:none; background:transparent; color:var(--text);
  font-family:var(--sans); font-size:13.5px; font-weight:650; padding:0 6px 0 0; cursor:pointer;
  max-width:220px; }
body.appbody .apptop .pick select:focus { outline:none; }
body.appbody .apptop .pick.zone select { max-width:240px; }
body.appbody .apptop .pick.lang select { max-width:150px; }
body.appbody .apptop .pick:focus-within { border-color:var(--acc); box-shadow:0 0 0 3px var(--focus); }
body.appbody .apptop .today { font-size:13.5px; color:var(--dim); white-space:nowrap; }
body.appbody .apptop .live { display:inline-flex; align-items:center; gap:8px; min-height:30px;
  padding:0 12px; border-radius:15px; font-size:13px; font-weight:650; text-decoration:none;
  white-space:nowrap; background:var(--ok-soft); color:var(--ok); }
body.appbody .apptop .live.warn { background:var(--warn-soft); color:var(--warn); }
body.appbody .apptop .live.err { background:var(--err-soft); color:var(--err); }
body.appbody .apptop .live i { width:7px; height:7px; border-radius:50%; flex:none; background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
body.appbody .apptop a.live:hover { text-decoration:underline; }
body.appbody .apptop .grow { flex:1; }
body.appbody .apptop .lookbtn { width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--dim);
  cursor:pointer; padding:0; }
body.appbody .apptop .lookbtn:hover { color:var(--text); background:var(--bg2); }
body.appbody .apptop .lookbtn svg { width:18px; height:18px; display:block; }
body.appbody .apptop .lookbtn .mk-night { display:none; }
:root[data-theme="dark"] body.appbody .apptop .lookbtn .mk-day { display:none; }
:root[data-theme="dark"] body.appbody .apptop .lookbtn .mk-night { display:block; }
body.appbody .appnotes { padding:12px var(--app-pad) 0; }
body.appbody .appnotes .previewribbon { margin:0; }

/* --------------------------------------------------- the top of the page --
   The page's own head (ui.head) is the band: the customer's picture behind
   it, or Tepegöz's pattern in their colour with the riders in its corner,
   or plain - the App editor's "Top of every page". */
body.appbody .appmain { padding:22px var(--app-pad) 48px; }
body.appbody .appmain > .pagehead { position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end; flex-wrap:wrap; gap:14px 16px;
  margin:-22px calc(-1 * var(--app-pad)) 22px; padding:30px var(--app-pad) 24px; min-height:132px;
  border-bottom:none; color:var(--hero-ink, var(--text)); background:var(--hero-bg, none); }
body.appbody .appmain > .pagehead > div:first-child { min-width:0; flex:1 1 360px; }
body.appbody .appmain > .pagehead h1.title { color:inherit; font-size:28px; font-weight:700;
  letter-spacing:-.02em; line-height:1.15; }
body.appbody .appmain > .pagehead p.lede { color:inherit; opacity:.88; max-width:780px; }
body.appbody .appmain > .pagehead .actions { margin-left:auto; }
body.appbody.head-picture .appmain > .pagehead::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, color-mix(in srgb, var(--screen) 82%, transparent) 0%,
    color-mix(in srgb, var(--screen) 48%, transparent) 55%,
    color-mix(in srgb, var(--screen) 12%, transparent) 100%); }
body.appbody.head-pattern.tz-on .appmain > .pagehead::after { content:""; position:absolute; z-index:-1;
  right:-14px; bottom:-44px; width:340px; aspect-ratio:942/563; background:currentColor; opacity:.15;
  pointer-events:none; -webkit-mask:url(/app/assets/x/tepegoz.svg) center/contain no-repeat;
  mask:url(/app/assets/x/tepegoz.svg) center/contain no-repeat; }
body.appbody.head-plain .appmain > .pagehead { min-height:0; padding-bottom:6px; color:var(--text);
  background:none; }
body.appbody:not(.head-plain) .appmain > .pagehead .btn {
  background:color-mix(in srgb, var(--hero-ink, var(--text)) 14%, transparent);
  border-color:color-mix(in srgb, var(--hero-ink, var(--text)) 32%, transparent);
  color:inherit; box-shadow:none; }

/* ------------------------------------------- numbers: one strip, not tiles */
body.appbody .page .kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:0; margin-bottom:20px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--app-lift); }
body.appbody .page .kpi { border:none; border-radius:0; background:transparent; padding:15px 18px 16px;
  gap:3px; min-width:0; box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line); }
body.appbody .page .kpi b.value { font-size:30px; font-weight:700; }
body.appbody .page .kpi .why { font-size:12px; color:var(--faint); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.appbody .page .kpi.accent { background:var(--acc-soft); }
body.appbody .page .kpi.accent b.value { color:var(--acc-text); }

/* ---------------------------------------------------------------- cards -- */
body.appbody .page .card { border-radius:16px; box-shadow:var(--app-lift); }
body.appbody .page .card > header.cardhead { border-bottom:1px solid var(--line); }
body.appbody .page .card > .cardbody { padding:16px 18px; }

/* ------------------------------------------------- nothing yet, said well --
   A sign in the customer's colour, the heading, and the sentence that says
   what will appear and why there is nothing yet. */
body.appbody .page .empty { position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:6px; background:transparent; border:none; padding:102px 20px 22px; }
body.appbody .page .empty::before { content:""; position:absolute; top:24px; left:50%; width:62px;
  height:62px; margin-left:-31px; border-radius:50%; background:var(--acc-soft); }
body.appbody .page .empty::after { content:""; position:absolute; top:40px; left:50%; width:30px;
  height:30px; margin-left:-15px; background:var(--acc-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
body.appbody .page .empty h3 { font-size:18px; font-weight:700; margin:0; }
body.appbody .page .empty p { max-width:540px; margin:0; }
body.appbody .page .empty .more { justify-content:center; margin-top:8px; }
body.appbody .page .empty.bad { border:1px solid color-mix(in srgb, var(--err) 40%, transparent);
  border-radius:14px; background:var(--err-soft); }
body.appbody .page .empty.bad::before { background:var(--panel); }
body.appbody .page .empty.bad::after { background:var(--err);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.2M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.2M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; }
body.appbody .page .empty.bad .detail { text-align:left; }

/* -------------------------------------- the queue beside its one picture --
   Violations and Alerts: app.js gathers their cards into a queue and shows
   the one chosen large, with its answers on keys 1, 2 and 3. */
body.appbody .appmain .review { display:grid; grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:16px; align-items:start; }
body.appbody .appmain .review .queue { display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:14px; overflow:auto; max-height:min(76vh, 900px); background:var(--panel); }
body.appbody .appmain .qrow { display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:11px;
  align-items:center; padding:10px 12px; border:none; border-left:3px solid transparent;
  background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
body.appbody .appmain .qrow + .qrow { border-top:1px solid var(--line); }
body.appbody .appmain .qrow:hover { background:var(--bg2); }
body.appbody .appmain .qrow.sel { background:var(--acc-soft); border-left-color:var(--acc); }
body.appbody .appmain .qrow:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }
body.appbody .appmain .qpic { width:76px; aspect-ratio:16/9; border-radius:7px; overflow:hidden;
  background:var(--screen); display:block; }
body.appbody .appmain .qpic img { width:100%; height:100%; object-fit:cover; display:block; }
body.appbody .appmain .qtext { display:flex; flex-direction:column; min-width:0; }
body.appbody .appmain .qtext b { font-size:13.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.appbody .appmain .qtext small { font-size:12px; color:var(--faint); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
body.appbody .appmain .violgrid.one { display:block; }
body.appbody .appmain .violgrid.one > .viol { display:none; }
body.appbody .appmain .violgrid.one > .viol.on { display:flex; border-radius:14px; }
body.appbody .appmain .violgrid.one > .viol.on .ev { aspect-ratio:16/9; background:var(--screen); }
body.appbody .appmain .violgrid.one > .viol.on .meta { padding:16px 18px 18px; gap:10px; }
body.appbody .appmain .violgrid.one > .viol.on .who b { font-size:18px; }
/* Who it was (decision/faces.py): the face cut from the picture beside the
   employee's photo, then the name and how alike - or why nobody is named. */
/* TODAY (solutions/today.py): the head leaves room at its foot for the card
   that waits, which sits over it; one card per task with its week; the day
   hour by hour against yesterday; the latest; the zones. */
body.appbody[data-screen="today"] .appmain > .pagehead { padding-bottom:64px; }
body.appbody .appmain > .pagehead + .todaywait { margin-top:-58px; position:relative; z-index:2; }
body.appbody .appmain .todaywait { margin-bottom:18px; }
body.appbody .appmain .todaywait .calmline { display:flex; align-items:center; gap:10px; padding:16px 18px;
  font-size:14px; color:var(--text); }
body.appbody .appmain .todaywait .calmline .ok { display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:var(--ok-soft); color:var(--ok); font-weight:700; flex:none; }
body.appbody .appmain .waitrow { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px; padding:12px 16px 16px; }
body.appbody .appmain .witem { display:flex; flex-direction:column; gap:2px; min-width:0;
  text-decoration:none; color:var(--text); }
body.appbody .appmain .witem .wpic { aspect-ratio:16/10; border-radius:10px; overflow:hidden;
  background:var(--screen); color:var(--screen-ink); display:grid; place-items:center; }
body.appbody .appmain .witem .wpic img { width:100%; height:100%; object-fit:cover; display:block; }
body.appbody .appmain .witem:hover .wpic { outline:2px solid var(--acc); outline-offset:-2px; }
body.appbody .appmain .witem b { font-size:13px; margin-top:5px; }
body.appbody .appmain .witem small { font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
body.appbody .appmain .todaycards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px; margin:0 0 18px; }
body.appbody .appmain .tcard { display:flex; flex-direction:column; gap:4px; padding:14px 16px; min-width:0;
  border-radius:14px; background:var(--panel); border:1px solid var(--line); text-decoration:none;
  color:var(--text); }
body.appbody .appmain .tcard:hover { border-color:var(--acc); }
body.appbody .appmain .tcard .tlab { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--dim); }
body.appbody .appmain .tcard .tlab .ico { display:inline-flex; color:var(--acc-text); }
body.appbody .appmain .tcard .tlab .ico svg { width:16px; height:16px; }
body.appbody .appmain .tcard .tnum { font-size:28px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
body.appbody .appmain .tcard .tnum.none { font-size:15px; font-weight:600; color:var(--acc-text); }
body.appbody .appmain .tcard .thint { font-size:12px; color:var(--dim); }
body.appbody .appmain .tcard .tweek { display:flex; align-items:flex-end; justify-content:space-between;
  gap:8px; margin-top:6px; }
body.appbody .appmain .weekbars { width:80px; height:24px; flex:none; }
body.appbody .appmain .weekbars rect { fill:var(--acc-soft); }
body.appbody .appmain .weekbars rect.now { fill:var(--acc); }
body.appbody .appmain .tcard .vs { font-size:11.5px; color:var(--faint); text-align:right; }
body.appbody .appmain .tcard .vs.up, body.appbody .appmain .tcard .vs.down { color:var(--dim); }
body.appbody .appmain .tcard .vs.same { color:var(--faint); }
body.appbody .appmain .todaywait.calm { background:var(--panel); }
body.appbody .appmain .daychart { width:100%; height:auto; display:block; padding:6px 10px 0; }
body.appbody .appmain .daychart .today rect { fill:var(--acc); }
body.appbody .appmain .daychart .yday { fill:none; stroke:var(--dim); stroke-width:1.5; stroke-dasharray:4 3; }
body.appbody .appmain .daychart .nowl { stroke:var(--acc); stroke-width:1; stroke-dasharray:2 3; }
body.appbody .appmain .daychart .ticks text { font-size:10px; fill:var(--faint); text-anchor:middle;
  font-family:var(--mono); }
body.appbody .appmain .daylegend { display:flex; gap:16px; flex-wrap:wrap; padding:4px 16px 14px;
  font-size:12px; color:var(--dim); }
body.appbody .appmain .daylegend .k.today::before { content:""; display:inline-block; width:10px; height:10px;
  border-radius:2px; background:var(--acc); margin-right:6px; vertical-align:-1px; }
body.appbody .appmain .daylegend .k.yday::before { content:""; display:inline-block; width:14px;
  border-top:2px dashed var(--dim); margin-right:6px; vertical-align:3px; }
body.appbody .appmain .latest { list-style:none; margin:0; padding:2px 16px 10px; }
body.appbody .appmain .latest li { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:10px;
  align-items:center; padding:8px 0; }
body.appbody .appmain .latest li + li { border-top:1px solid var(--line); }
body.appbody .appmain .latest .lpic { width:56px; height:36px; border-radius:8px; overflow:hidden;
  background:var(--screen); color:var(--screen-ink); display:grid; place-items:center; }
body.appbody .appmain .latest .lpic img { width:100%; height:100%; object-fit:cover; display:block; }
body.appbody .appmain .latest .ltext { display:flex; flex-direction:column; min-width:0; }
body.appbody .appmain .latest .ltext small { color:var(--dim); font-size:11.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
body.appbody .appmain .latest .lwhen { font-family:var(--mono); font-size:11.5px; color:var(--faint); }
body.appbody .appmain .nopic svg { width:20px; height:20px; }
body.appbody .appmain .todayzones { padding:4px 0 0; }
body.appbody .appmain .viol .who { display:flex; align-items:center; gap:10px; min-width:0; }
body.appbody .appmain .viol .who .nm { display:flex; flex-direction:column; min-width:0; }
body.appbody .appmain .viol .who .faces { display:flex; gap:4px; flex:none; }
body.appbody .appmain .viol .who .fc { width:44px; height:44px; border-radius:10px; object-fit:cover;
  background:var(--screen); border:1px solid var(--line); }
body.appbody .appmain .viol .who .key { font-family:var(--sans); font-size:12px; }
body.appbody .appmain .viol .who.byface .key { color:var(--ok); }
body.appbody .appmain .violgrid.one > .viol.on .who .fc { width:64px; height:64px; border-radius:12px; }
body.appbody .appmain .violgrid.one > .viol.on .verdicts { gap:10px; margin-top:6px; }
body.appbody .appmain .violgrid.one > .viol.on .verdicts .btn { height:46px; font-size:14px;
  border-radius:11px; }

/* --------------------------------------------- pictures: a dark screen -- */
body.appbody .appmain .tile .pic, body.appbody .appmain .tile img,
body.appbody .appmain .viol .ev { background:var(--screen); }
body.appbody .appmain .tile .liveb { position:absolute; left:8px; top:8px; z-index:1; display:inline-flex;
  align-items:center; gap:5px; padding:2px 7px; border-radius:4px; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; background:var(--err); color:var(--screen-ink); }
body.appbody .appmain .tile .liveb::before { content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; }
body.appbody .appmain .tile .nopic { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; padding:10px; text-align:center;
  color:color-mix(in srgb, var(--screen-ink) 70%, transparent); font-size:12.5px; font-weight:650; }
body.appbody .appmain .tile .nopic svg { width:26px; height:26px; }
body.appbody .appmain .tile .pic img[src] ~ .nopic { display:none; }
body.appbody .appmain .wallzone + .wallzone { margin-top:16px; }
body.appbody .appmain .wallzone > h3 { display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:14px; font-weight:650; }
body.appbody .appmain .wallzone > h3 small { font-size:12.5px; font-weight:600; color:var(--faint); }

/* ------------------------------------- never an empty page: steps, cameras */
body.appbody .appmain .howsteps { list-style:none; margin:16px 0 4px; padding:0; display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
body.appbody .appmain .howsteps li { display:flex; align-items:flex-start; gap:10px; padding:11px 12px;
  border-radius:12px; background:var(--panel2); font-size:13px; font-weight:600; text-align:left; }
body.appbody .appmain .howsteps i { flex:none; width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; background:var(--acc); color:var(--acc-ink); font-style:normal; font-size:12px;
  font-weight:700; }
body.appbody .appmain .wall.watchstrip { gap:12px; }

/* ------------------------------------------------------- a person's day -- */
body.appbody .appmain .dayline { position:relative; display:block; min-width:140px; height:12px;
  border-radius:6px; background:var(--panel2); }
body.appbody .appmain .dayline .shift { position:absolute; top:0; bottom:0; border-radius:6px;
  background:var(--acc-soft); outline:1px dashed color-mix(in srgb, var(--acc) 35%, transparent); }
body.appbody .appmain .dayline .seen { position:absolute; top:0; bottom:0; min-width:6px; border-radius:6px;
  background:var(--acc); }
body.appbody .appmain .dayline .seen.unclear { background:var(--warn); }
body.appbody .appmain .dayline .nowl { position:absolute; top:-5px; bottom:-5px; width:2px;
  border-radius:1px; background:var(--text); opacity:.45; }

/* -------------------------------------------- settings: plain, as at HQ -- */
body.appbody :is(.page, .drawer) .field label { font-size:13px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--dim); }
body.appbody .appmain .branchset { border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:16px 18px 18px; box-shadow:var(--app-lift); }
body.appbody .appmain .branchset legend { float:left; width:100%; padding:0 0 10px; font-size:15px;
  font-weight:650; color:var(--text); }
body.appbody .appmain .branchset legend + * { clear:both; }

/* ---------------------------------------------------- a phone's own bar -- */
body.appbody .bnav { display:none; }
body.appbody .moresheet { position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-end;
  background:var(--scrim); }
body.appbody .moresheet[hidden] { display:none; }
body.appbody .moresheet .sheet { width:100%; max-height:82vh; overflow:auto; display:flex;
  flex-direction:column; gap:14px; padding:14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background:var(--panel); border-radius:18px 18px 0 0; box-shadow:var(--shadow-2); }
body.appbody .moresheet .sheethead { display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:15px; }
body.appbody .moresheet .sheetlinks { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
body.appbody .moresheet .sheetlinks a { display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px; border-radius:12px; background:var(--panel2); color:var(--text);
  text-decoration:none; font-size:12.5px; font-weight:600; text-align:center; min-width:0; }
body.appbody .moresheet .sheetlinks a .lbl { max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
body.appbody .moresheet .sheetlinks a.here { background:var(--acc-soft); color:var(--acc-text); }
body.appbody .moresheet .sheetlinks .ico svg { width:22px; height:22px; }
body.appbody .moresheet .sheetlangs { display:flex; gap:8px; }
body.appbody .moresheet .sheetlangs a { flex:1; text-align:center; padding:9px 6px; border:1px solid var(--line);
  border-radius:10px; text-decoration:none; color:var(--dim); font-size:13px; font-weight:600; }
body.appbody .moresheet .sheetlangs a.here { border-color:var(--acc); color:var(--text); background:var(--acc-soft); }
body.appbody .moresheet .sheetfoot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
body.appbody .moresheet .sheetfoot .tzmade { padding:0; }

/* ------------------------------------------------- a tablet, a narrow window */
@media (max-width:900px) {
  body.appbody { --app-pad:16px; }
  body.appbody .apptop { position:static; }
  body.appbody .appmain > .tzmade { display:flex; }
  body.appbody .appmain .review { grid-template-columns:minmax(0,260px) minmax(0,1fr); }
}

/* -------------------------------------------------------------- a phone --
   A real phone screen: the name at the top, the places in a bar under the
   thumb, cards sized for a thumb, one event at a time with big answers. */
@media (max-width:560px) {
  /* Today on a phone: two task cards to a row, their week under the number. */
  body.appbody .appmain .todaycards { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  body.appbody .appmain .tcard { padding:12px 13px; }
  body.appbody .appmain .tcard .tnum { font-size:24px; }
  body.appbody .appmain .tcard .tweek { flex-direction:column; align-items:flex-start; gap:4px; }
  body.appbody .appmain .tcard .vs { text-align:left; }
  body.appbody { --app-pad:12px; padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px)); }
  body.appbody #apprail { position:sticky; top:0; z-index:900; flex-direction:row; align-items:center;
    gap:10px; padding:8px 12px; border-bottom:1px solid var(--rail-line); }
  body.appbody #apprail .brand { flex:1; min-width:0; padding:0; border:none; }
  body.appbody #apprail .brand .logotile { height:38px; min-width:38px; max-width:96px; border-radius:10px; }
  body.appbody #apprail .brand .logotile.letter { width:38px; font-size:17px; }
  body.appbody #apprail .brand b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.appbody #apprail .brand small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.appbody #apprail .tabs, body.appbody #apprail .railfoot { display:none; }
  body.appbody .apptop { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px; min-height:0;
    padding:8px 12px; background:transparent; border-bottom:none; }
  body.appbody .apptop::-webkit-scrollbar { display:none; }
  body.appbody .apptop .today, body.appbody .apptop .lang, body.appbody .apptop .grow,
  body.appbody .apptop .lookbtn { display:none; }
  body.appbody .apptop .pick, body.appbody .apptop .live { flex:none; }
  body.appbody .appmain { padding:14px 12px 24px; }
  body.appbody .appmain > .pagehead { margin-top:-14px; padding:20px 16px 18px; min-height:112px; }
  body.appbody .appmain > .pagehead h1.title { font-size:23px; }
  body.appbody.head-pattern.tz-on .appmain > .pagehead::after { width:230px; bottom:-28px; }
  body.appbody .appmain > .pagehead .actions { display:none; }
  body.appbody .page .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  body.appbody .page .kpi { padding:12px 14px; }
  body.appbody .page .kpi b.value { font-size:24px; }
  body.appbody .appmain .review { grid-template-columns:minmax(0,1fr); }
  body.appbody .appmain .review .detail { order:-1; }
  body.appbody .appmain .howsteps { grid-template-columns:minmax(0,1fr); }
  body.appbody .appmain .wall.watchstrip { grid-template-columns:repeat(2, minmax(0,1fr)); }
  body.appbody .appmain .review .queue { max-height:none; }
  body.appbody .appmain .violgrid.one > .viol.on .verdicts .btn { height:52px; }
  body.appbody .bnav { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); position:fixed; left:0;
    right:0; bottom:0; z-index:950; background:var(--panel); border-top:1px solid var(--line);
    padding:6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.appbody .bnav a, body.appbody .bnav button { display:flex; flex-direction:column; align-items:center;
    gap:3px; min-width:0; padding:0; border:none; background:none; font:inherit; font-size:10.5px;
    font-weight:600; color:var(--faint); text-decoration:none; cursor:pointer; }
  body.appbody .bnav .ico { width:52px; height:28px; border-radius:14px; display:grid; place-items:center; }
  body.appbody .bnav .ico svg { width:21px; height:21px; }
  body.appbody .bnav .lbl { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    padding:0 2px; }
  body.appbody .bnav .here { color:var(--text); }
  body.appbody .bnav .here .ico { background:var(--acc-soft); color:var(--acc-text); }
  body.appbody .bnav .moreb[aria-expanded="true"] .ico { background:var(--bg2); }
}

@media print {
  body.appbody .apptop, body.appbody .appnotes, body.appbody .bnav, body.appbody .moresheet,
  body.appbody .tzmade { display:none !important; }
  body.appbody .appmain > .pagehead { margin:0 0 12px; padding:0; min-height:0; background:none;
    color:CanvasText; }
  body.appbody .appmain > .pagehead::before, body.appbody .appmain > .pagehead::after { display:none; }
  body.appbody .printfoot { display:block; margin-top:14px; padding-top:6px; border-top:1px solid GrayText;
    font-size:9pt; color:GrayText; }
  body.appbody .page .kpis { box-shadow:none; }
}