/* Soc Console — the admin on the design chosen from the orders prototypes (variant 11, 2026-09-16). Three surfaces instead of one flat ground, zone accents (teal = our parser, indigo = the panels) and a single state palette used everywhere: green delivered, amber sent-and-waiting, red trouble, blue working, grey closed. Bootstrap 5 stays underneath for the grid, modals and tabs. The orders screen is built on these components. Every other screen still uses the previous class names; they are kept working by the compatibility section at the bottom and will move over one screen at a time. */ :root { /* three surfaces: page -> panel -> row/zone, plus the recessed drawer well */ --bg:#E9EDF3; --surface:#FFFFFF; --surface-2:#F4F7FB; --surface-3:#E9EEF6; --well:#E3E9F2; --line:#DEE5EF; --line-2:#C7D2E0; --line-3:#AAB8CA; /* graphite ink */ --ink:#0F1822; --text:#354356; --muted:#65758A; --faint:#8B99AB; /* interactive accent (cold blue) — the same hue as the "working" state */ --accent:#1C67CE; --accent-ink:#FFFFFF; --accent-soft:#E4EEFB; --accent-line:#B7D0EE; /* zone accents: two subject colours (teal = our parser, indigo = panels) and two quiet graphite ones (customer, order) */ --z-del:#0B7C90; --z-del-soft:#E0F3F6; --z-del-line:#A9D9E1; --z-del-tint:rgba(11,124,144,.055); --z-pan:#3C51A6; --z-pan-soft:#E7EAF8; --z-pan-line:#BFC8EC; --z-pan-tint:rgba(60,81,166,.045); --z-cus:#4D6073; --z-cus-soft:#EAEFF4; --z-cus-line:#C4D0DB; --z-ord:#59627A; --z-ord-soft:#ECEEF4; --z-ord-line:#C9CFDE; /* state palette — one meaning per colour, everywhere on the page */ --ok:#0C7A52; --ok-soft:#E1F4EC; --ok-line:#A5DCC5; /* delivered */ --amber:#A5620E; --amber-soft:#FBEFDC; --amber-line:#E8C795; /* sent, waiting */ --bad:#B63126; --bad-soft:#FCEAE8; --bad-line:#EEB3AD; /* trouble */ --run:#1C67CE; --run-soft:#E4EEFB; --run-line:#B7D0EE; /* working */ --off:#6B7A8D; --off-soft:#EBEFF5; --off-line:#CCD5E0; /* closed / quiet */ --warn-row:#FCF5E9; --bad-row:#FCF1EF; --star:#E9A100; /* dark rail */ --rail:#101720; --rail-2:#18202B; --rail-text:#BCC7D5; --rail-muted:#76849A; --rail-active:#222D3C; --rail-line:#1D2732; /* effects */ --sh-1:0 1px 2px rgba(16,24,34,.05); --sh-2:0 1px 2px rgba(16,24,34,.06), 0 10px 24px -14px rgba(16,24,34,.35); --sh-3:0 18px 44px -18px rgba(16,24,34,.45); --ring:0 0 0 3px rgba(28,103,206,.22); /* shape + type */ --r-lg:11px; --r:8px; --r-sm:6px; --f-body:'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-head:'Poppins', var(--f-body); --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-nano:9.5px; --fs-micro:10.5px; --fs-xs:11.5px; --fs-s:12px; --fs:13px; --fs-m:14px; --fs-l:16px; --fs-xl:21px; --rail-w:218px; --row-y:6px; --row-h:62px; } :root[data-theme="dark"] { --bg:#080B10; --surface:#131A23; --surface-2:#19212B; --surface-3:#212B38; --well:#0C121A; --line:#242F3C; --line-2:#32404F; --line-3:#455467; --ink:#E7EDF5; --text:#BCC8D6; --muted:#8190A3; --faint:#647386; --accent:#5AA1FF; --accent-ink:#05101E; --accent-soft:#132339; --accent-line:#2A4666; --z-del:#3EC6DB; --z-del-soft:#0C262C; --z-del-line:#1D4C57; --z-del-tint:rgba(62,198,219,.06); --z-pan:#93A6F2; --z-pan-soft:#161B33; --z-pan-line:#2E3866; --z-pan-tint:rgba(147,166,242,.05); --z-cus:#A3B5C7; --z-cus-soft:#1A222C; --z-cus-line:#33414F; --z-ord:#AAB3C6; --z-ord-soft:#1B2029; --z-ord-line:#353C4C; --ok:#2FC891; --ok-soft:#0A2620; --ok-line:#1B5142; --amber:#EFA859; --amber-soft:#2D1F0D; --amber-line:#5A3E1C; --bad:#F4796D; --bad-soft:#2F1917; --bad-line:#61312C; --run:#5AA1FF; --run-soft:#132339; --run-line:#2A4666; --off:#7C8BA0; --off-soft:#1B232E; --off-line:#33404F; --warn-row:#1D1810; --bad-row:#201513; --star:#F4BC45; --rail:#05080D; --rail-2:#0D131B; --rail-text:#BCC7D5; --rail-muted:#6F7E93; --rail-active:#18212C; --rail-line:#141C26; --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.8); --sh-3:0 18px 44px -18px rgba(0,0,0,.85); --ring:0 0 0 3px rgba(90,161,255,.28); } *, *::before, *::after { box-sizing: border-box; } html, body { margin:0; padding:0; } body { -webkit-font-smoothing: antialiased; } a { text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } .mono { font-family: var(--f-mono); font-size: .93em; font-variant-ligatures: none; } .tnum { font-variant-numeric: tabular-nums; } /* ---- frame ------------------------------------------------------------- */ .app { display:flex; min-height:100vh; align-items:stretch; } .rail { width: var(--rail-w); flex: 0 0 var(--rail-w); background: var(--rail); color: var(--rail-text); position: sticky; top:0; height:100vh; display:flex; flex-direction:column; border-right: 1px solid var(--rail-line); z-index: 40; } .rail .brand { display:flex; align-items:center; gap:10px; padding:15px 15px 12px; color:#fff; font-family: var(--f-head); font-weight:600; font-size:14px; } .rail .brand:hover { text-decoration:none; } .rail .brand .mark { width:27px; height:27px; border-radius:8px; display:grid; place-items:center; flex:0 0 27px; background: linear-gradient(140deg, var(--z-del), var(--accent)); color:#fff; box-shadow: 0 6px 14px -7px rgba(28,103,206,.9); } .rail .brand small { display:block; font-family: var(--f-body); font-weight:400; font-size:10px; color:var(--rail-muted); letter-spacing:.05em; text-transform:uppercase; } .rail nav { flex:1; overflow-y:auto; padding:2px 9px 12px; scrollbar-width:thin; } .rail nav::-webkit-scrollbar { width:6px; } .rail nav::-webkit-scrollbar-thumb { background:var(--rail-active); border-radius:6px; } .rail .lbl { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--rail-muted); padding:12px 8px 4px; font-weight:700; } .rail nav a { display:flex; align-items:center; gap:9px; padding:5px 9px; border-radius:7px; color:var(--rail-text); font-size:12.5px; line-height:1.3; margin-bottom:1px; } .rail nav a svg { width:15px; height:15px; flex:0 0 15px; opacity:.7; } .rail nav a:hover { background: var(--rail-2); color:#fff; text-decoration:none; } .rail .foot { border-top:1px solid var(--rail-line); padding:9px 13px; display:flex; align-items:center; gap:9px; font-size:12px; } .rail .foot small { display:block; color:var(--rail-muted); font-size:10px; } .main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } .topbar { position: sticky; top:0; z-index:35; display:flex; align-items:center; gap:9px; padding:0 14px; height:50px; background: var(--surface); border-bottom:1px solid var(--line); } .topbar .crumbs { font-family:var(--f-head); font-weight:600; color:var(--ink); font-size:14px; } .screen { padding:12px 14px 24px; flex:1; min-width:0; } /* ---- page head --------------------------------------------------------- */ .phead { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:10px; } .phead h1 { font-family:var(--f-head); font-weight:600; font-size:var(--fs-xl); color:var(--ink); margin:0 0 1px; letter-spacing:-.01em; } .phead .sub { font-size:var(--fs-s); color:var(--muted); } .phead .kpis { margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; } .kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:4px 11px 5px; min-width:86px; box-shadow:var(--sh-1); border-left:3px solid var(--line-2); } .kpi b { display:block; font-family:var(--f-head); font-weight:600; font-size:16px; color:var(--ink); line-height:1.25; } .kpi span { text-transform:uppercase; font-weight:700; } .kpi.alarm { border-left-color:var(--bad); background:var(--bad-soft); border-color:var(--bad-line); } .kpi.alarm b { color:var(--bad); } .kpi.run { border-left-color:var(--run); } .kpi.del { border-left-color:var(--z-del); } .kpi.mon { border-left-color:var(--ok); } .kpi.amber { border-left-color:var(--amber); } .kpi.bad { border-left-color:var(--bad); } /* an amber tile that holds something, and the tile whose filter is on */ .kpi.warn { border-left-color:var(--amber); background:var(--amber-soft); border-color:var(--amber-line); } .kpi.warn b { color:var(--amber); } .kpi.on { box-shadow:var(--sh-1), 0 0 0 2px var(--accent-line); } a.kpi, a.kpi:hover { color:inherit; text-decoration:none; } a.kpi { transition:box-shadow .12s, border-color .12s; } a.kpi:hover { border-color:var(--accent-line); box-shadow:var(--sh-2); } .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); } /* ---- filters ----------------------------------------------------------- */ .filters { margin-bottom:9px; padding:8px 10px 9px; } .views { display:flex; gap:3px; background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:3px; flex-wrap:wrap; } .view { border:0; background:transparent; cursor:pointer; border-radius:6px; padding:4px 9px; font-size:var(--fs-s); font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px; transition: background .12s, color .12s, box-shadow .12s; white-space:nowrap; } .view:hover { color:var(--ink); background:var(--surface); } .view .n { font-size:10.5px; font-weight:700; color:var(--faint); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:0 5px; min-width:17px; text-align:center; font-variant-numeric:tabular-nums; } .view.on { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); } .view.on .n { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .view.alarm { color:var(--bad); } .view.alarm .n { color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft); } .view.alarm.on { background:var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad-line); } .view.alarm.on .n { background:var(--bad); border-color:var(--bad); color:#fff; } .omni { flex:1 1 300px; min-width:190px; position:relative; display:flex; align-items:center; } .omni svg { position:absolute; left:9px; width:14px; height:14px; color:var(--faint); pointer-events:none; } .omni input { width:100%; border:1px solid var(--line); background:var(--surface-2); border-radius:7px; padding:5px 10px 5px 28px; font: inherit; font-size:var(--fs-s); color:var(--ink); transition: box-shadow .12s, border-color .12s, background .12s; } .omni input::placeholder { color:var(--faint); } .omni input:focus { outline:none; border-color:var(--accent-line); background:var(--surface); box-shadow:var(--ring); } .btn { border:1px solid var(--line-2); background:var(--surface); color:var(--text); cursor:pointer; border-radius:6px; padding:3px 9px; font-size:var(--fs-s); font-weight:600; line-height:1.5; transition: background .12s, border-color .12s, color .12s, transform .06s; white-space:nowrap; } .btn:hover { background:var(--surface-3); border-color:var(--line-3); color:var(--ink); } .btn:active { transform:translateY(1px); } .btn.pri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .btn.pri:hover { background:var(--ink); border-color:var(--ink); color:var(--surface); } .btn.danger { color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft); } .btn.danger:hover { background:var(--bad); border-color:var(--bad); color:#fff; } .btn.good { color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft); } .btn.good:hover { background:var(--ok); border-color:var(--ok); color:#fff; } .btn.xs { padding:1px 6px; font-size:var(--fs-xs); border-radius:5px; } .btn[disabled] { opacity:.45; cursor:default; } /* ---- the filter header of the orders list (владелец, 2026-09-30) ---------- No drop-downs: every choice on the page, one click each. A row per group with its caption in a band on the left; one choice is a joined track (.fx-seg / .fx-s), several are separate buttons with a tick box (.fx-c). Blue ("pick") marks only what differs from the default view. Every class of the kit starts with fx-, so nothing above is reused by accident. */ .panel.fx { padding:0; margin-bottom:9px; } .fx .sp { flex:1; } .fx a:hover { text-decoration:none; } .fx-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:7px 10px; border-bottom:1px solid var(--line); } .fx-top .omni { flex:1 1 420px; max-width:760px; } .fx .omni input { background:var(--surface-2); } .fx-state { font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; } .fx-state b { color:var(--accent); font-weight:700; } .fx-state.none { color:var(--faint); } /* the caption of a row; blue with its own reset once the row is changed */ .fx-lab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; line-height:18px; } .fx-lab.set { color:var(--accent); } .fx-x { display:inline-block; background:var(--accent-soft); color:var(--accent); border-radius:20px; font-size:12px; font-weight:700; line-height:15px; padding:0 5px; } .fx-x:hover { background:var(--accent); color:var(--accent-ink); } /* one choice: buttons joined in a recessed track */ .fx-seg { display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px; padding:2px; max-width:100%; background:var(--surface-3); border:1px solid var(--line); border-radius:8px; } .fx-s { font-size:var(--fs-s); font-weight:600; color:var(--muted); line-height:18px; padding:2px 8px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:background .12s, color .12s, box-shadow .12s; } .fx-s:hover { background:var(--surface); color:var(--ink); } .fx-s.on { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1), 0 0 0 1px var(--line-2); } .fx-s.on.pick { color:var(--accent); box-shadow:var(--sh-1), 0 0 0 1px var(--accent-line); } /* several choices: separate buttons, each with its own tick box */ .fx-c { font-size:var(--fs-s); font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--line-2); border-radius:7px; padding:2px 8px 2px 6px; line-height:18px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:background .12s, color .12s, border-color .12s; } .fx-c:hover { border-color:var(--line-3); background:var(--surface-2); color:var(--ink); } .fx-c.all { padding-left:8px; } .fx-c.on { background:var(--surface-3); border-color:var(--line-3); color:var(--ink); } .fx-c.on.pick { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); } .fx-c .brandtag { margin-right:0; } .fx-cb { width:13px; height:13px; flex:0 0 13px; border-radius:3.5px; border:1.5px solid var(--line-3); background:var(--surface); display:grid; place-items:center; } .fx-cb svg { width:9px; height:9px; color:var(--accent-ink); opacity:0; } .on > .fx-cb { background:var(--accent); border-color:var(--accent); } .on > .fx-cb svg { opacity:1; } /* the number on a button: how many orders the list holds after the click */ .fx-n { font-size:var(--fs-micro); font-weight:700; color:var(--faint); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:0 5px; min-width:18px; text-align:center; line-height:15px; font-variant-numeric:tabular-nums; white-space:nowrap; } .on > .fx-n { color:var(--ink); border-color:var(--line-2); } .pick > .fx-n { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .fx-zero:not(.on) { color:var(--faint); } .fx-zero:not(.on) > .fx-n { opacity:.75; } /* "Need attention" with something in it */ .fx-s.fx-alarm { color:var(--bad); } .fx-alarm > .fx-n { color:var(--bad); background:var(--bad-soft); border-color:var(--bad-line); } .fx-s.fx-alarm.on { background:var(--bad-soft); box-shadow:0 0 0 1px var(--bad-line); color:var(--bad); } .fx-alarm.on > .fx-n { background:var(--bad); border-color:var(--bad); color:var(--accent-ink); } /* a status wears the colour of its pill on the lines */ .fx-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--off); } .fx-dot.ok { background:var(--ok); } .fx-dot.run { background:var(--run); } .fx-dot.amber { background:var(--amber); } .fx-dot.bad { background:var(--bad); } .fx-dot.off { background:var(--off); } /* a network with its services; its name chooses them all */ .fx-net { display:inline-flex; align-items:center; flex-wrap:wrap; gap:3px; padding:2px 3px 2px 2px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; } .fx-neth { display:inline-flex; align-items:center; gap:5px; padding:2px 6px 2px 5px; border-radius:6px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; line-height:18px; } .fx-neth:hover { color:var(--accent); background:var(--surface); } .fx-neth svg { width:13px; height:13px; flex:0 0 13px; } .fx-neth.full { color:var(--accent); } .fx-net .fx-c { background:var(--surface); } .fx-net .fx-c.on.pick { background:var(--accent-soft); } /* the sub-tariffs of a service that has several */ .fx-subg { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; } .fx-subh { font-size:var(--fs-xs); font-weight:600; color:var(--muted); white-space:nowrap; } .fx-seg.sm .fx-s { font-size:var(--fs-xs); padding:1px 7px; line-height:17px; } .fx-gloss { font-weight:400; color:var(--faint); } .on > .fx-gloss { color:var(--muted); } .fx .omni.set input { border-color:var(--accent-line); background:var(--surface); padding-right:30px; } .omni .omx { position:absolute; right:5px; top:50%; transform:translateY(-50%); color:var(--accent); font-weight:700; font-size:14px; line-height:1; padding:2px 6px; border-radius:5px; } .omni .omx:hover { background:var(--accent-soft); text-decoration:none; } /* the typed fields: the caption sits inside the box */ .fx-exact { display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; min-width:0; } .fx-in { display:inline-flex; align-items:stretch; height:26px; border:1px solid var(--line-2); border-radius:6px; background:var(--surface); overflow:hidden; min-width:0; max-width:100%; } .fx-in > .cap { display:flex; align-items:center; padding:0 7px; font-size:var(--fs-xs); font-weight:600; color:var(--muted); background:var(--surface-2); border-right:1px solid var(--line); white-space:nowrap; } .fx-in input { border:0; background:transparent; font:inherit; font-size:var(--fs-s); color:var(--ink); padding:0 7px; min-width:0; width:118px; outline:none; } .fx-in input.w-l { width:210px; } .fx-in input.w-s { width:84px; } .fx-in input[type="date"] { width:124px; font-family:var(--f-mono); font-size:var(--fs-xs); padding:0 4px; } .fx-in .dash { align-self:center; color:var(--faint); padding:0 1px; } .fx-in:focus-within { border-color:var(--accent-line); box-shadow:var(--ring); } .fx-in.set { border-color:var(--accent-line); } .fx-in.set > .cap { color:var(--accent); background:var(--accent-soft); border-right-color:var(--accent-line); } .fx-in .clr { display:flex; align-items:center; color:var(--accent); padding:0 7px; font-weight:700; font-size:13px; } .fx-in .clr:hover { background:var(--accent-soft); } /* the rows: a caption band on the left, the buttons on the right */ .fx.v1 .fx-body { display:grid; grid-template-columns:minmax(0,1fr); border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; } .fx.v1 .fx-blk { display:grid; grid-template-columns:118px minmax(0,1fr); align-content:start; min-width:0; } .fx.v1 .fx-lh { padding:6px 8px 6px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-right:1px solid var(--line); display:flex; align-items:flex-start; gap:5px; flex-wrap:wrap; min-width:0; } .fx.v1 .fx-lh .fx-lab { padding-top:2px; } .fx.v1 .fx-lh .fx-x { margin-top:3px; } .fx.v1 .fx-rc { padding:5px 10px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; min-width:0; } .fx.v1 .fx-blk > .fx-lh:first-child, .fx.v1 .fx-blk > .fx-lh:first-child + .fx-rc { border-top:0; } .fx.v1 .fx-blk + .fx-blk > .fx-lh:first-child, .fx.v1 .fx-blk + .fx-blk > .fx-lh:first-child + .fx-rc { border-top:1px solid var(--line); } .fx.v1 .fx-lh.pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .fx.v1 .fx-lh.pan .fx-lab:not(.set) { color:var(--z-pan); } .fx.v1 .fx-rc.fx-subrow { gap:5px 14px; } @media (min-width:2000px) { /* left: the state, the time and the money; right: the site, what was bought and where; the typed fields under both */ .fx.v1 .fx-body { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } .fx.v1 .fx-blk.side { border-left:1px solid var(--line-2); } .fx.v1 .fx-blk.side > .fx-lh:first-child, .fx.v1 .fx-blk.side > .fx-lh:first-child + .fx-rc { border-top:0; } .fx.v1 .fx-blk.wide { grid-column:1 / -1; border-top:1px solid var(--line-2); } .fx.v1 .fx-blk.wide > .fx-lh:first-child, .fx.v1 .fx-blk.wide > .fx-lh:first-child + .fx-rc { border-top:0; } } /* a narrow window: the caption stands over its buttons */ @media (max-width:700px) { .fx.v1 .fx-blk { grid-template-columns:minmax(0,1fr); } .fx.v1 .fx-lh { border-right:0; padding:5px 10px 2px; } .fx.v1 .fx-blk > .fx-rc, .fx.v1 .fx-blk + .fx-blk > .fx-lh:first-child + .fx-rc { border-top:0; padding:3px 10px 7px; } .fx-top .omni { flex-basis:100%; max-width:none; } } /* ---- table shell ------------------------------------------------------- */ .tablewrap { overflow: visible; } .tbar { flex-wrap:wrap; } .tbar .count b { color:var(--ink); font-weight:700; } .legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--faint); } .legend i { display:inline-block; width:10px; height:7px; border-radius:2px; vertical-align:-1px; margin-right:4px; } table.grid { width:100%; border-collapse:collapse; } table.grid.orders-grid { table-layout:fixed; } /* two-level head: the group captions, then the sortable column names */ table.grid thead th { text-align:left; font-weight:700; color:var(--faint); background:var(--surface-2); white-space:nowrap; position:sticky; top:50px; z-index:20; } /* a one-row head sticks right under the top bar; the 71px below is for the column names under a row of group captions (владелец, 2026-09-19: the head of the sub-orders table on the card floated 21px below the bar) */ thead > tr.chead:first-child th { top:50px; } tr.ghead th { top:50px; height:21px; padding:0 9px; font-size:var(--fs-nano); letter-spacing:.13em; text-transform:uppercase; border-bottom:1px solid var(--line); } tr.chead th { top:71px; height:24px; padding:0 9px; font-size:var(--fs-micro); letter-spacing:.07em; text-transform:uppercase; border-bottom:1px solid var(--line-2); } /* `table.grid thead th` above outweighs `tr.chead th`, and both rows of a two-row head stuck at 50px: the column names covered the group captions while scrolling (found by the prototypes of 2026-09-30) */ table.grid thead tr.ghead + tr.chead th { top:71px; } tr.ghead th.g-del { color:var(--z-del); background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } tr.ghead th.g-pan { color:var(--z-pan); background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } tr.chead th.gs, tr.ghead th.gs { border-left:1px solid var(--line-2); } tr.chead th.c-delivery { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } tr.chead th.c-panels { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .sortb { border:0; background:transparent; cursor:pointer; padding:0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; font-weight:inherit; border-radius:4px; } .sortb:hover { color:var(--accent); } .sortb.on { color:var(--accent); } .sortb .ar { font-size:9px; } /* the separator of two names in a heading; the on/off disc of the services is also called .dot and turned it into a grey disc (found 2026-09-30) */ th .dot { color:var(--line-2); margin:0 3px; display:inline; width:auto; height:auto; border-radius:0; background:none; } /* one per order: the row and its drawer are one htmx-swappable chunk */ tbody.orow { border-bottom:1px solid var(--line); } tbody.orow:hover > tr.r > td { background-color:var(--surface-2); } tbody.orow.open > tr.r > td { background-color:var(--surface-3); } tbody.orow.flash > tr.r > td { animation: flashrow .8s ease-out; } @keyframes flashrow { 0% { background-color:var(--accent-soft); } 100% { background-color:transparent; } } tr.r { cursor:pointer; height:var(--row-h); } tr.r > td { padding:var(--row-y) 9px; vertical-align:top; overflow:hidden; transition: background-color .1s; } /* the group hairlines carry through the body, so the eye keeps the columns apart */ tr.r > td.gs { border-left:1px solid var(--line); } tr.r > td.c-delivery { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } tr.r > td.c-panels { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } tbody.orow.warnrow > tr.r > td { background-color: var(--warn-row); } tbody.orow.slarow > tr.r > td { background-color: var(--bad-row); } tbody.orow.warnrow > tr.r > td:first-child { box-shadow: inset 3px 0 0 var(--amber); } tbody.orow.slarow > tr.r > td:first-child { box-shadow: inset 3px 0 0 var(--bad); } tbody.orow.warnrow:hover > tr.r > td, tbody.orow.warnrow.open > tr.r > td { background-color: var(--amber-soft); } tbody.orow.slarow:hover > tr.r > td, tbody.orow.slarow.open > tr.r > td { background-color: var(--bad-soft); } .l1 { display:block; color:var(--ink); font-size:var(--fs); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .l2 { display:block; color:var(--muted); font-size:var(--fs-xs); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .l2 a { color:var(--muted); } .l2 a:hover { color:var(--accent); } .l2 .k { color:var(--faint); } /* expander + how many sub-orders hang under the row */ td.c-exp { padding-left:6px; padding-right:0; } .exp { width:19px; height:19px; border-radius:5px; border:1px solid transparent; background:transparent; color:var(--faint); display:grid; place-items:center; cursor:pointer; margin-top:1px; } .exp svg { width:11px; height:11px; transition:transform .16s ease; } tbody.orow:hover .exp { color:var(--accent); background:var(--surface); border-color:var(--line); } tbody.orow.open .exp { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); } tbody.orow.open .exp svg { transform:rotate(90deg); } /* pills — the state palette, nothing decorative */ .pill { display:inline-flex; align-items:center; gap:4px; border-radius:20px; padding:0 7px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.035em; line-height:16px; border:1px solid transparent; white-space:nowrap; text-transform:lowercase; } .pill.ok { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); } .pill.run { background:var(--run-soft); color:var(--run); border-color:var(--run-line); } .pill.amber { background:var(--amber-soft); color:var(--amber); border-color:var(--amber-line); } .pill.bad { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); } .pill.off { background:var(--off-soft); color:var(--off); border-color:var(--off-line); } .pill.teal { background:var(--z-del-soft); color:var(--z-del); border-color:var(--z-del-line); } .pill.up { text-transform:uppercase; letter-spacing:.07em; } .brandtag { display:inline-block; width:15px; height:15px; border-radius:4px; font-size:9px; font-weight:700; line-height:15px; text-align:center; vertical-align:1px; margin-right:5px; } .brandtag.soc { background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); } .brandtag.take { background:var(--z-del-soft); color:var(--z-del); border:1px solid var(--z-del-line); } .vmark { color:var(--ok); font-weight:700; } .vmark.no { color:var(--faint); } /* ---- delivery cell: two bars + the six last parser scans ---------------- */ .dwrap { display:flex; gap:8px; align-items:flex-start; } .dqty { flex:0 0 auto; min-width:50px; } .dqty b { display:block; font-family:var(--f-mono); font-weight:500; font-size:var(--fs); color:var(--ink); line-height:1.3; font-variant-numeric:tabular-nums; } .dqty span { display:block; font-size:var(--fs-micro); color:var(--faint); line-height:1.3; white-space:nowrap; } .dbars { flex:1 1 auto; min-width:0; } .dline { display:flex; align-items:center; gap:6px; line-height:1.3; } .dline + .dline { margin-top:2px; } .dtag { flex:0 0 auto; font-size:var(--fs-nano); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); width:44px; } .bar { flex:1 1 auto; min-width:30px; height:7px; border-radius:20px; overflow:hidden; display:flex; background:var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); } .bar.striped { background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--line-2) 3px 4px); } .bar i { display:block; height:100%; } .bar i.c { background:var(--z-del); } .bar i.g { background:var(--ok); } .bar i.a { background:var(--amber); } .dpc { flex:0 0 auto; width:32px; text-align:right; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); font-variant-numeric:tabular-nums; } .dnote { flex:0 0 auto; font-size:var(--fs-micro); color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums; } .dnote.up { color:var(--ok); font-weight:700; } .dnote.flat { color:var(--amber); font-weight:700; } .dnote.over { color:var(--amber); font-weight:700; } .dmiss { font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); border:1px dashed var(--line-2); border-radius:5px; padding:0 5px; } .dmiss.hid { color:var(--amber); border-color:var(--amber-line); } /* the six scan cells: growth per scan, the freshest one on the right */ .strip { display:flex; align-items:stretch; gap:2px; margin-top:3px; } /* The four limits of an order in one row: used/limit, no words (the title says which is which) - green untouched, amber counting, red hit. */ .lims { display:flex; align-items:center; gap:3px; margin-top:4px; flex-wrap:wrap; } .lim { display:inline-block; font-family:var(--f-mono); font-size:var(--fs-nano); font-variant-numeric:tabular-nums; line-height:1.5; padding:0 5px; border:1px solid var(--line-2); border-radius:5px; color:var(--faint); white-space:nowrap; cursor:default; } .lim.ok { color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft); } .lim.amber { color:var(--amber); border-color:var(--amber-line); background:var(--amber-soft); font-weight:700; } .lim.bad { color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft); font-weight:700; } .lim.off { border-style:dashed; background:transparent; } .fields .lim { font-size:var(--fs-xs); margin-right:4px; } .sc { flex:1 1 0; min-width:0; height:16px; padding:0 2px; border-radius:4px; border:1px solid var(--line); background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:var(--fs-micro); font-variant-numeric:tabular-nums; color:var(--muted); overflow:hidden; white-space:nowrap; } .sc.up { color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft); } .sc.zero { color:var(--amber); border-color:var(--amber-line); background:var(--amber-soft); } .sc.last { box-shadow: 0 0 0 1px var(--z-del); } .sc.empty { color:var(--faint); border-style:dashed; background:transparent; } .strip .refresh { flex:0 0 18px; width:18px; height:16px; border-radius:4px; border:1px solid var(--line); background:var(--surface); color:var(--z-del); cursor:pointer; display:grid; place-items:center; padding:0; font-size:11px; line-height:1; } .strip .refresh:hover { background:var(--z-del-soft); border-color:var(--z-del-line); } /* ---- panels cell: the last sub-orders, one line each -------------------- */ .subs-mini { display:flex; flex-direction:column; gap:2px; } .smini { display:flex; align-items:center; gap:7px; font-size:var(--fs-xs); line-height:1.28; min-width:0; } .smini .who { display:flex; align-items:center; gap:5px; min-width:0; flex:1 1 auto; color:var(--text); } .smini .nums, .smini .word, .smini .more-subs { flex:0 0 auto; } .smini .who b { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .smini .who em { font-style:normal; font-family:var(--f-mono); font-size:.92em; color:var(--faint); white-space:nowrap; } .sdot { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--off); box-shadow:0 0 0 2px var(--surface); } .sdot.ok { background:var(--ok); } .sdot.run { background:var(--run); } .sdot.amber { background:var(--amber); } .sdot.bad { background:var(--bad); } .smini .nums { font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; font-size:.96em; } .smini .nums em { font-style:normal; color:var(--faint); } .smini .age { flex:0 0 auto; font-style:normal; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:.9em; color:var(--faint); white-space:nowrap; } .smini .word { max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; font-size:var(--fs-micro); color:var(--muted); } .smini .word.ok { color:var(--ok); } .smini .word.run { color:var(--run); } .smini .word.amber { color:var(--amber); font-weight:700; } .smini .word.bad { color:var(--bad); font-weight:700; } /* the panel word carries the same state colours wherever it is printed */ .mut { color:var(--faint); } .word.ours { font-style:italic; } .word.ok { color:var(--ok); } .word.run { color:var(--run); } .word.amber { color:var(--amber); font-weight:700; } .word.bad { color:var(--bad); font-weight:700; } .word.off { color:var(--off); } .word.mute { color:var(--faint); font-style:italic; } .more-subs { font-size:var(--fs-micro); font-weight:700; color:var(--z-pan); background:var(--z-pan-soft); border:1px solid var(--z-pan-line); border-radius:20px; padding:0 5px; white-space:nowrap; } .nosub { font-size:var(--fs-xs); color:var(--faint); line-height:1.32; } .nosub b { color:var(--amber); font-weight:700; } .nosub.bad b { color:var(--bad); } /* ---- status cell ------------------------------------------------------- */ .stline { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow:hidden; } .errline { display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--bad); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---- row actions ------------------------------------------------------- */ td.c-act { position:relative; overflow:visible; } .acts { display:flex; gap:4px; align-items:center; justify-content:flex-end; } /* ====================================================================== DRAWER — its own full-width panel, one step below the row, with a rail on the left and four named zones. ====================================================================== */ tr.d > td { padding:0; background:var(--well); box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--line-2); } .drawer { padding:11px 12px 13px 16px; animation: slidein .16s ease-out; } @keyframes slidein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } .dtitle { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; font-size:var(--fs-s); color:var(--muted); } .dtitle b { font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); color:var(--ink); } .dtitle .sp { flex:1; } .dgrid { display:grid; gap:10px; grid-template-columns:1fr; grid-template-areas:"del" "pan" "cus" "ord"; } @media (min-width:1000px) { .dgrid { grid-template-columns:1fr 1fr; grid-template-areas:"del cus" "pan pan" "ord ord"; } } @media (min-width:1560px) { .dgrid { grid-template-columns:minmax(330px, 24%) minmax(0,1fr); grid-template-areas:"del pan" "cus ord"; } } .z-del { grid-area:del; } .z-pan { grid-area:pan; } .z-cus { grid-area:cus; } .z-ord { grid-area:ord; } .zone { background:var(--surface); border:1px solid var(--line); border-radius:10px; min-width:0; box-shadow:var(--sh-1); overflow:hidden; } .zone > h4 { margin:0; padding:5px 11px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--f-head); font-weight:600; font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase; border-bottom:1px solid var(--line); } .zone > h4 .sp { flex:1; } .zone > h4 .zn { font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.02em; text-transform:none; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:0 6px; } .zone > h4 .zt { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:400; letter-spacing:0; text-transform:none; } .zbody { padding:9px 11px 11px; } .z-del > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .z-pan > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .z-cus > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .z-ord > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .z-del { border-left:2px solid var(--z-del); } .z-pan { border-left:2px solid var(--z-pan); } .z-cus { border-left:2px solid var(--z-cus); } .z-ord { border-left:2px solid var(--z-ord); } /* delivery zone: both bars large, then every scan */ .bigbar + .bigbar { margin-top:9px; } .bigbar .bh { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; } .bigbar .bh b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .bigbar .bh .v { margin-left:auto; font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); font-variant-numeric:tabular-nums; } .bigbar .bar { height:12px; } .bigbar .bf { display:flex; gap:9px; flex-wrap:wrap; margin-top:5px; font-size:var(--fs-xs); color:var(--text); } .bigbar .bf .k { color:var(--faint); text-transform:uppercase; font-size:var(--fs-nano); letter-spacing:.07em; font-weight:700; } .bigbar .bf b { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; } .bigbar .note { font-size:var(--fs-xs); color:var(--muted); margin-top:4px; } .spark { display:block; width:100%; height:30px; margin:2px 0 6px; } .spark path { fill:none; stroke:var(--z-del); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } table.scant { width:100%; border-collapse:collapse; font-size:var(--fs-s); } table.scant th { text-align:left; font-size:var(--fs-nano); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:2px 6px; border-bottom:1px solid var(--line); white-space:nowrap; } table.scant td { padding:3px 6px; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; } table.scant tr:last-child td { border-bottom:0; } table.scant tr:hover td { background:var(--surface-2); } table.scant .t { color:var(--muted); font-family:var(--f-mono); font-size:var(--fs-xs); } table.scant .v { font-family:var(--f-mono); color:var(--ink); text-align:right; } table.scant .d { font-family:var(--f-mono); text-align:right; font-weight:600; } table.scant .d.up { color:var(--ok); } table.scant .d.zero { color:var(--amber); } table.scant .d.base { color:var(--faint); font-weight:400; } table.scant .hid { color:var(--amber); font-style:italic; } table.scant tr.fresh td { background:var(--z-del-soft); } /* the labelled pairs used by CUSTOMER and ORDER */ .fields { display:grid; gap:7px 14px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); } .fields.wide { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); } .f { min-width:0; } .f .k { display:block; font-size:var(--fs-nano); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); } .f .v { display:block; font-size:var(--fs-s); color:var(--ink); overflow-wrap:anywhere; } .f .v .mut { color:var(--muted); } .f .v b { font-weight:700; } .f.full { grid-column:1/-1; } .money { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } /* sub-orders: a real table with a header row and controls in the last column */ table.subs { width:100%; border-collapse:collapse; table-layout:auto; font-size:var(--fs-s); } table.subs th { text-align:left; font-size:var(--fs-nano); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); padding:3px 6px; border-bottom:1px solid var(--line-2); white-space:nowrap; background:var(--surface-2); } table.subs td { padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:middle; } table.subs tr:last-child td { border-bottom:0; } table.subs tbody tr:nth-child(even) td { background:var(--surface-2); } table.subs tbody tr:hover td { background:var(--surface-3); } table.subs td:first-child { box-shadow: inset 2px 0 0 var(--off); } table.subs tr.s-completed td:first-child { box-shadow: inset 2px 0 0 var(--ok); } table.subs tr.s-working td:first-child { box-shadow: inset 2px 0 0 var(--run); } table.subs tr.s-sending td:first-child { box-shadow: inset 2px 0 0 var(--amber); } table.subs tr.s-partial td:first-child { box-shadow: inset 2px 0 0 var(--amber); } table.subs tr.s-canceled td:first-child { box-shadow: inset 2px 0 0 var(--bad); } table.subs tr.s-sending td { background:var(--amber-soft) !important; } table.subs tr.s-canceled td { background:var(--bad-soft) !important; } table.subs .sid { font-family:var(--f-mono); color:var(--muted); white-space:nowrap; } table.subs .pn { color:var(--ink); white-space:nowrap; font-weight:600; } table.subs .pn small { display:block; color:var(--faint); font-size:var(--fs-micro); font-family:var(--f-mono); font-weight:400; } table.subs .nums { font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; text-align:right; } table.subs .nums.g { color:var(--ok); } table.subs .nums .mut { color:var(--faint); } table.subs .sbar { min-width:74px; } table.subs .sbar .bar { height:5px; margin-top:3px; } table.subs .when { font-size:var(--fs-micro); color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; } table.subs .when .mut { color:var(--faint); } table.subs .word { white-space:nowrap; font-size:var(--fs-xs); } table.subs .word.mute { color:var(--faint); font-style:italic; } table.subs .sacts { display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-end; } table.subs thead th:last-child, table.subs td.subacts { text-align:right; } /* a second line in a time cell: when the sub-order closed, when it is read next */ table.subs .when small { display:block; font-size:var(--fs-micro); color:var(--faint); } table.subs .when small.bad-text { color:var(--bad); } /* the sub-orders of the drawer never lose their last columns to the zone's edge: a narrow screen scrolls the table itself, the page stays where it is */ .drawer .subswrap { overflow-x:auto; } /* the drawer sits inside the orders table, whose sticky head rule (table.grid thead th) reaches this nested head too; inside a box that scrolls it would stick 50px down over the first row */ .subswrap table.subs thead th { position:static; } /* our counter at the sub-order's start → at its last scan, the growth under it */ table.subs .nums small { display:block; font-size:var(--fs-micro); color:var(--faint); } table.subs .nums small.up { color:var(--ok); } /* the guarantee of an order's target in one line: the drawer and the card */ .gline { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:var(--fs-s); } .gline .k { color:var(--faint); } .gline a.pill { text-decoration:none; } /* a word about whose sub-order it is (a refill: by hand or by the calculation) */ table.subs .sid small { display:block; font-family:var(--f-body); font-size:var(--fs-micro); color:var(--faint); white-space:nowrap; } .subfoot { margin-top:7px; display:flex; gap:10px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); align-items:center; } .subfoot b { font-family:var(--f-mono); color:var(--ink); font-variant-numeric:tabular-nums; } .nosubs { font-size:var(--fs-s); color:var(--muted); padding:4px 0 2px; } .nosubs b { color:var(--amber); } /* order zone */ .errbox { border:1px solid var(--bad-line); background:var(--bad-soft); border-radius:8px; padding:6px 9px; margin-bottom:9px; } .errbox .ec { font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--bad); display:block; margin-bottom:2px; } .errbox p { margin:0; font-size:var(--fs-s); color:var(--text); overflow-wrap:anywhere; } .hidegrp { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:9px; font-size:var(--fs-xs); color:var(--muted); } .hidegrp .hl { font-size:var(--fs-nano); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .actgrid { display:flex; gap:4px; flex-wrap:wrap; } .zsep { border:0; border-top:1px solid var(--line); margin:9px 0 8px; } /* ---- footer ------------------------------------------------------------ */ /* The one pager of every list (admin.partials.pager): the range on the left, the pages on the right, the current page in the accent. */ .pgr { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .pgr .sum { margin-right:auto; color:var(--muted); font-size:var(--fs-s); font-variant-numeric:tabular-nums; } .pgr a, .pgr span.pg { display:inline-flex; align-items:center; justify-content:center; min-width:27px; height:27px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-decoration:none; line-height:1; } .pgr a:hover { border-color:var(--line-3); background:var(--surface-3); color:var(--ink); } .pgr span.pg.cur { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; } .pgr span.pg.dis { opacity:.4; } .pgr span.pg.gap { border-color:transparent; background:transparent; color:var(--faint); min-width:18px; padding:0; } /* ---- 4K ---------------------------------------------------------------- */ @media (min-width:2100px) { :root { --fs:13.5px; --fs-s:12.5px; --fs-m:14.5px; --row-h:66px; --row-y:7px; --rail-w:240px; } .screen { padding:14px 20px 28px; } .smini .word { max-width:150px; } .sc { height:17px; } } /* below a wide desktop the calm notes step aside; the trouble notes stay */ @media (max-width:1560px) { .dtag { width:38px; } .dnote { display:none; } .dnote.over, .dnote.flat { display:inline; } .smini .word { max-width:70px; } } /* On a 1440-wide laptop the six cells would cut a six-digit growth in half, so the two oldest step aside — the drawer still lists every scan. */ @media (max-width:1440px) and (min-width:561px) { .strip .scw:nth-of-type(1), .strip .scw:nth-of-type(2) { display:none; } } /* ---- narrow desktop / tablet ------------------------------------------- */ @media (max-width:1180px) { .rail { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; } } /* Fifteen columns need about 1030px; below that the sub-orders table turns into cards instead of being squeezed — no side scrolling, nothing clipped. */ @media (max-width:1340px) { table.subs, table.subs tbody, table.subs tr, table.subs td { display:block; width:auto; } table.subs thead { display:none; } table.subs tr { border:1px solid var(--line); border-radius:9px; padding:7px 9px; margin-bottom:7px; background:var(--surface-2); display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:5px 12px; } table.subs tbody tr:nth-child(even) td, table.subs tbody tr:hover td { background:transparent; } table.subs tr.s-completed { border-left:3px solid var(--ok); } table.subs tr.s-working { border-left:3px solid var(--run); } table.subs tr.s-sending { border-left:3px solid var(--amber); background:var(--amber-soft); } table.subs tr.s-partial { border-left:3px solid var(--amber); } table.subs tr.s-canceled { border-left:3px solid var(--bad); background:var(--bad-soft); } table.subs td { border:0; padding:0; text-align:left !important; box-shadow:none !important; } table.subs td::before { content: attr(data-l); display:block; font-size:var(--fs-nano); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } table.subs .nums { text-align:left; } table.subs td.subacts { grid-column:1/-1; } table.subs .sacts { justify-content:flex-start; } } /* ---- MOBILE: a vertical feed, the same accordion ------------------------ */ @media (max-width:560px) { :root { --fs-nano:11px; --fs-micro:11px; --fs-xs:12px; --fs-s:12.5px; --fs:13px; } .screen { padding:9px 9px 20px; } .phead h1 { font-size:18px; } .phead .kpis { margin-left:0; width:100%; } .kpi { flex:1 1 0; min-width:0; padding:4px 8px 5px; } .tablewrap { background:transparent; border:0; box-shadow:none; } .tbar { border:0; } .legend { display:none; } .views { width:100%; } .view { flex:1 1 auto; justify-content:center; } table.grid, table.grid tbody, table.grid tr, table.grid td { display:block; width:auto; } table.grid colgroup, table.grid thead { display:none; } tbody.orow { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:11px; margin:0 0 8px; box-shadow:var(--sh-1); overflow:hidden; } tbody.orow.warnrow { border-color:var(--amber-line); } tbody.orow.slarow { border-color:var(--bad-line); } table.grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 10px; padding:9px 34px 10px 11px; height:auto; } tr.r > td { padding:0; background-color:transparent !important; background-image:none !important; min-width:0; border:0 !important; box-shadow:none !important; } td.c-exp { position:absolute; top:8px; right:8px; padding:0; } .exp { border:1px solid var(--line); background:var(--surface-2); width:22px; height:22px; } .exp svg { width:12px; height:12px; } td.c-order { order:1; flex:1 1 auto; } td.c-status { order:2; flex:0 0 auto; margin-left:auto; text-align:right; } td.c-status .stline { justify-content:flex-end; } td.c-status .errline { white-space:normal; text-align:left; } td.c-service { order:3; flex:1 1 100%; } td.c-target { order:4; flex:1 1 100%; } td.c-delivery { order:5; flex:1 1 100%; margin-top:2px; } tr.r > td.c-panels { order:6; flex:1 1 100%; margin-top:5px; padding-top:6px !important; border-top:1px dashed var(--line-2) !important; } td.c-customer, td.c-money { display:none; } /* both live in the drawer zones */ td.c-act { order:7; flex:1 1 100%; margin-top:6px; } .acts { justify-content:flex-start; } .dtag { width:46px; } .dnote { display:inline; } .sc { height:18px; } .smini .word { max-width:110px; } tr.d > td { box-shadow: inset 0 1px 0 var(--line-2); border-top:2px solid var(--accent); } .drawer { padding:9px; } .dgrid { gap:9px; } .zone { border-radius:9px; } .zbody { padding:9px; } .fields { grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); } table.scant { font-size:var(--fs-s); } table.subs tr { grid-template-columns:repeat(auto-fill, minmax(112px,1fr)); } } /* ========================================================================= Compatibility: the screens that are not rebuilt yet ====================================================================== */ /* ---- Names the rest of the admin still uses ------------------------------ The orders screen is the first page on the new system; every other screen keeps its old class names and is restyled through the aliases below until it is rebuilt in its turn. */ /* buttons: the bootstrap-shaped names map onto the three real variants */ .btn-brand:hover { border-color: var(--ink); } .btn-sm { border-radius: var(--r-sm); } .btn-x { border: 0; background: transparent; color: var(--faint); cursor: pointer; } .btn-x:hover { color: var(--bad); } /* tables of the old pages */ table.grid td.bad { color: var(--bad); } table.grid th.sub { font-weight: 600; color: var(--muted); background: var(--surface-2); } table.grid code { font-family: var(--f-mono); font-size: .92em; color: var(--muted); } table.grid th code { color: var(--faint); } table.grid.compact th, table.grid.compact td { padding: 4px 8px; font-size: var(--fs-s); } /* page heading of the pages that are not rebuilt yet */ .page-head { margin: 0 0 14px; } .page-head h1 { font: 600 var(--fs-xl)/1.2 var(--f-head); } /* the mobile rail of the old layout keeps working next to the new scrim */ .rail.open { transform: translateX(0); } /* Bootstrap components (modal, tabs, close button) follow the same tokens. */ body { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--line); --bs-tertiary-bg: var(--surface-2); --bs-secondary-color: var(--muted); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent); margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: .875rem; line-height: 1.45; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a { color: var(--accent); } code { font-family: var(--f-mono); font-size: .92em; color: var(--muted); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .rail .avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; background: var(--rail-2); display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 12px; } .rail-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 22, 34, .45); z-index: 15; } .rail-backdrop.show { display: block; } .icon-btn { padding: 0; } .page-head h1 { text-wrap: balance; } .page-head .sub { margin-top: 2px; } .page-head .sub code, .sub code, .kv dd code, .page-head code { font-family: var(--f-mono); font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } .btn-brand { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; } .btn-brand:hover, .btn-brand:focus-visible { filter: brightness(1.06); background: var(--accent); color: var(--accent-ink); } .btn-quiet { background: var(--surface); color: var(--text); border: 1px solid var(--line-3); } .btn-quiet:hover, .btn-quiet:focus-visible { background: var(--surface-2); color: var(--ink); border-color: var(--line-3); } .btn-bad { background: var(--surface); color: var(--bad); border: 1px solid var(--line-3); } .btn-bad:hover, .btn-bad:focus-visible { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } .btn-x { padding: 1px 8px; line-height: 1.4; font-size: 14px; } .btn.w-100 { width: 100%; } .panel-narrow { max-width: 520px; } .panel-wide { max-width: 820px; } .panel .pb + .pb { border-top: 1px solid var(--line); } /* A table is shown whole and the page scrolls; a box of its own with a scroll bar inside was the owner's first complaint after the move (2026-09-19). Overflow stays visible: a wrapper that scrolls is a box again. Only a narrow window gets a sideways scroll inside the panel. */ .grid-scroll { overflow: visible; } @media (max-width: 1100px) { .grid-scroll { overflow-x: auto; } } .panel .grid-scroll { border-radius: var(--r-lg); } table.grid th.center { text-align: center; } /* The cell the guarantee took its number from: of the two candidates on a refill row, the winner is painted rather than explained. */ table.grid td.chosen { background: var(--ok-soft); color: var(--ok); font-weight: 600; box-shadow: inset 2px 0 0 var(--ok-line); } /* A row that took no part in the arithmetic beside the rows that did. */ table.grid tr.muted td { color: var(--faint); } table.grid tr.muted td.strong { color: var(--muted); } table.grid .num { text-align: right; } table.grid td.wrap { white-space: normal; max-width: 40rem; } table.grid .sep { border-left: 1px solid var(--line); } table.grid td .form-control { min-width: 72px; } table.grid td.num .form-control { width: 92px; margin-left: auto; text-align: right; } table.grid td .form-check-input { margin: 0; vertical-align: middle; } table.grid.compact th, table.grid.compact td { padding-left: 8px; padding-right: 8px; } table.grid.compact td.num .form-control { width: 84px; } .link-edit { color: var(--accent); font-weight: 600; text-decoration: none; } .link-edit:hover { text-decoration: underline; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; margin: 0; } .kv dt { color: var(--muted); font-weight: 400; } .kv dd { margin: 0; color: var(--ink); font-weight: 600; } /* ---- Tabs --------------------------------------------------------------- */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; } .tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font-weight: 600; font-size: 13px; padding: 9px 12px; margin-bottom: -1px; white-space: nowrap; background: transparent; } .tabs .nav-link:hover { color: var(--ink); } .tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); background: transparent; } /* ---- Forms -------------------------------------------------------------- */ .form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--muted); } .form-control::placeholder { color: var(--faint); } .form-check-input { width: 16px; height: 16px; margin-top: .15em; border: 1px solid var(--line-3); background-color: var(--surface); border-radius: 4px; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-switch .form-check-input { width: 34px; height: 20px; margin-top: 0; border: 0; border-radius: 999px; background-color: var(--line-3); --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); transition: background-position .15s, background-color .15s; } .form-switch .form-check-input:checked { background-color: var(--accent); } .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } .sw:last-child { border-bottom: 0; } .sw .form-switch { margin: 0; padding: 0; min-height: 0; flex: 0 0 34px; } .sw .form-switch .form-check-input { margin-left: 0; float: none; } .sw .t { color: var(--text); } .saved { display: inline-flex; align-items: center; gap: 8px; } .saved svg { width: 14px; height: 14px; } .alert-bad ul { margin: 0; padding-left: 18px; } .notice { margin: 0 0 9px; line-height:1.5; } .notice b { color: var(--ink); } /* ---- Stats -------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; text-decoration: none; display: block; } .stat .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .stat .v { font-family: var(--f-head); font-weight: 600; font-size: 22px; color: var(--ink); line-height: 1.15; margin-top: 2px; } .stat .v.bad { color: var(--bad); } .stat .d { font-size: 11.5px; color: var(--muted); } /* ---- Visual editor ------------------------------------------------------ */ .tox-tinymce { border-radius: var(--r) !important; border-color: var(--line-3) !important; } .tox .tox-toolbar__primary { background: var(--surface-2) !important; } /* ---- Modal, exception, preview ------------------------------------------ */ .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } .modal-header { border-color: var(--line); padding: 10px 16px; } .modal-title { font-family: var(--f-head); font-weight: 600; font-size: 15px; color: var(--ink); } .modal-body { padding: 14px 16px; } pre.exception { font-family: var(--f-mono); font-size: 11.5px; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--text); margin: 0; } /* ---- Login -------------------------------------------------------------- */ .login { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login-panel { width: 100%; max-width: 380px; padding: 26px 26px 22px; } .login-panel .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--f-head); font-weight: 600; font-size: 16px; color: var(--ink); } .login-panel .brand .mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #1B62C4, #00B67A); display: grid; place-items: center; color: #fff; } .login-panel .brand small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--muted); } .login-panel .form-control { padding: 8px 11px; } .login-panel .btn { padding: 8px 12px; } .login-panel .hint { font-size: 12px; color: var(--muted); margin: 14px 0 0; } /* ---- Small screens ------------------------------------------------------ */ @media (max-width: 991.98px) { .rail { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; z-index: 20; box-shadow: var(--sh-2); } } /* ---- text tones ---------------------------------------------------------- */ .bad-text { color: var(--bad); font-weight: 600; } .warn-text { color: var(--amber); font-weight: 600; } /* the translations page: a language with gaps */ .stat.is-warn { border-color: var(--amber); } /* Stage 8.4: the order card */ .cc-wrap { max-width: 720px; } .counter-chart { width: 100%; height: auto; display: block; } .counter-chart .cc-bg { fill: var(--surface-2); } .counter-chart .cc-dot { fill: var(--accent); } .counter-chart .cc-start { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; } .counter-chart .cc-goal { stroke: var(--ok); stroke-width: 1; stroke-dasharray: 4 3; } .counter-chart .cc-label { fill: var(--muted); font-size: 11px; font-family: var(--f-mono); } /* Stage 8.4: the orders list */ .nav-badge { margin-left: auto; background: var(--bad); color: #fff; border-radius: 999px; font-size: 10.5px; padding: 0 6px; line-height: 16px; } table.orders-grid td.wrap { max-width: 26rem; } /* ---- Shell aliases: the layout keeps its own class names ------------------ The rail, the topbar and the mobile drawer are shared by every screen, so they are styled here against the markup the layout already writes, rather than by rewriting thirty templates. */ .rail nav a.active { background: var(--rail-active); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--z-del); } .rail nav a.active svg { opacity: 1; color: var(--z-del); } .rail .nav-badge { margin-left: auto; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 0 6px; min-width: 18px; text-align: center; } .rail .foot .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--rail-active); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11.5px; flex: none; } .rail .foot .who { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail .foot .who small { display: block; color: var(--rail-muted); font-size: 10px; } .icon-btn { width: 27px; height: 27px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .icon-btn svg { width: 15px; height: 15px; } .icon-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-2); } .icon-btn:active { transform: translateY(1px); } .topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 7px; } .topbar .crumbs b { font-weight: 600; color: var(--ink); } .topbar .crumbs span { color: var(--faint); font-weight: 500; margin: 0 5px; } /* the mobile drawer of the layout (admin.js toggles .open and .show) */ .menu-btn { display: none; } @media (max-width: 1180px) { .rail { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s ease; z-index: 60; } .rail.open { transform: none; } .rail-backdrop { display: none; } .rail-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(8, 12, 20, .5); z-index: 38; } .menu-btn { display: grid; } } /* ---- The orders line: every action visible --------------------------------- The prototype kept all but one action behind a "…" menu; the owner asked for the opposite — nothing to open first. So the cell lays them out compactly and lets a flagged order be the taller line, which is the line worth seeing. */ td.c-act .acts { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-start; justify-content: flex-end; } td.c-act .acts .btn { padding: 1px 6px; font-size: var(--fs-xs); } td.c-act .hidegrp { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: flex-end; width: 100%; margin: 1px 0 0; } td.c-act .hidegrp .btn { padding: 0 4px; min-width: 22px; } td.c-act .hidegrp .hl { font-size: var(--fs-nano); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .ok-text { font-weight: 600; } /* ---- The line, second pass (2026-09-16) ----------------------------------- The figures the drawer prints under its bars now stand under the small bars of the line too; the link carries its own search; and the delivery cell says what else is going on at the same target. */ .bf.mini { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0 0 2px 50px; line-height: 1.2; font-size: var(--fs-nano); color: var(--muted); font-variant-numeric: tabular-nums; } .bf.mini + .dline { margin-top: 3px; } /* every order on the same link, in one line */ .tgt { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 2px; line-height: 1.25; font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; text-decoration: none; border-radius: 5px; padding: 0 3px; } .tgt .k { font-size: var(--fs-nano); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tgt em { font-style: normal; color: var(--faint); } .tgt b { font-weight: 700; color: var(--ink); } .tgt:hover { background: var(--accent-soft); color: var(--accent); } .tgt:hover b, .tgt:hover .k { color: var(--accent); } .tgt.alone { opacity: .62; } /* the small search next to the target link */ .tline { display: flex; align-items: center; gap: 5px; min-width: 0; } .tline > a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .findt { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; color: var(--faint); border: 1px solid transparent; } .findt svg { width: 11px; height: 11px; } .findt:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); } /* the panel's word is a button: it asks the panel and shows the raw answer */ .smini .word.ask, .word.ask { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; border-bottom: 1px dashed currentColor; } .smini .word.ask:hover, .word.ask:hover { color: var(--accent); border-bottom-style: solid; } /* a sub-order's panel service id: the sub-orders of that panel service, the last 7 days, in a new tab */ a.psl { color: var(--accent); text-decoration: none; } a.psl:hover { text-decoration: underline; } /* the raw answer in the window over the list */ .jsonbox { margin: 0; padding: 8px 10px; background: var(--well); border: 1px solid var(--line); border-radius: var(--r); font-family: var(--f-mono); font-size: var(--fs-s); color: var(--text); max-height: 46vh; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* the line can fold its figures away for a session (the toolbar above the table) */ .tbar { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--line); } .tbar .sp { flex: 1; } table.orders-grid.short .bf.mini, table.orders-grid.short .tgt { display: none; } /* ---- The screens that moved over next (2026-09-16) ------------------------ Sub-orders, payments, auto-likes and blocked use the same components as the orders line; these are the few things they need on top of it. */ .of { color: var(--faint); font-weight: 400; } .dqty b .of { font-size: .86em; } /* a labelled field standing in a filter row (the add form of the blocked list) */ .fld { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; } .fld.grow { flex: 1 1 220px; } .fld input, .fld select { padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); font: inherit; min-width: 0; } .fld input:focus, .fld select:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--ring); } /* the toolbar of a table may carry a legend on its right */ .tbar .hint b { font-weight: 700; } /* the target picture of an order card: the picture, or a plain word instead */ .pic-frame { width: 96px; height: 96px; flex: 0 0 96px; border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; } .pic-frame img { width: 100%; height: 100%; object-fit: cover; display: block; grid-area: 1/1; } .pic-frame .pic.blank { grid-area: 1/1; display: none; font-size: var(--fs-nano); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; } .pic-frame.blank .pic.blank, .pic-frame:not(:has(img)) .pic.blank { display: block; } /* ====================================================================== ELEMENT PAGES (2026-09-16) The list screens are built of rows; the page of one element - an order, a customer, a payment, a ticket - is built of panels standing side by side. Same tokens, same density: a titled panel, a two-column fact list, a compact inner table, and every action of the operator in the open, as on the line. ====================================================================== */ /* ---- page head of an element page ---------------------------------------- */ .phead .marks { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:3px; } .phead .pacts { margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; align-items:center; } .phead h1 .pill { vertical-align:3px; margin-left:6px; text-transform:none; } /* ---- the panel grid ------------------------------------------------------ */ .cgrid { display:grid; gap:9px; align-items:start; margin-bottom:9px; } .cgrid.c2 { grid-template-columns:repeat(2, minmax(0,1fr)); } .cgrid.c3 { grid-template-columns:repeat(3, minmax(0,1fr)); } .cgrid.c21 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); } .cgrid.c53 { grid-template-columns:minmax(0,5fr) minmax(0,3fr); } .cgrid .stack { display:grid; gap:9px; align-items:start; } .panel + .panel, .cgrid + .panel, .panel + .cgrid { margin-top:9px; } /* the margin above is for panels one under another; in a grid the gap does it */ .cgrid > .panel + .panel, .cgrid .stack > .panel + .panel { margin-top:0; } /* ---- a titled panel ------------------------------------------------------ */ .pt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 11px; border-bottom:1px solid var(--line); background:var(--surface-2); border-radius:var(--r-lg) var(--r-lg) 0 0; } .pt b { font-weight:700; text-transform:uppercase; } .pt .hint { font-weight:400; letter-spacing:0; text-transform:none; } .pt .sp { flex:1; } .pt.del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .pt.del b { color:var(--z-del); } .pt.pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .pt.pan b { color:var(--z-pan); } .pt.mon { background-image:linear-gradient(rgba(12,122,82,.05), rgba(12,122,82,.05)); } .pt.mon b { color:var(--ok); } .subhead { font-weight:700; text-transform:uppercase; margin:0 0 3px; } .pbd { padding:8px 11px 9px; } .pbd.p0 { padding:0; } .pbd > :last-child { margin-bottom:0; } /* ---- the fact list ------------------------------------------------------- */ .facts { display:grid; grid-template-columns:auto minmax(0,1fr); margin:0; } .facts dt { padding:4px 10px 4px 0; border-top:1px solid var(--line); white-space:nowrap; line-height:1.45; } .facts dd { margin:0; padding:4px 0; border-top:1px solid var(--line); color:var(--text); line-height:1.45; min-width:0; overflow-wrap:anywhere; } .facts dt:first-of-type, .facts dt:first-of-type + dd { border-top:0; } .facts dd b, .facts dd .strong { color:var(--ink); font-weight:600; } .facts dd .mono, .facts dd code { font-family:var(--f-mono); font-size:var(--fs-xs); } .facts dd .tnum { font-variant-numeric:tabular-nums; } .facts.wide dt { min-width:112px; } /* ---- a compact table inside a panel -------------------------------------- */ table.grid.inner thead th { position:static; top:auto; height:22px; padding:0 9px; text-transform:uppercase; border-bottom:1px solid var(--line-2); } table.grid.inner tbody td { padding:4px 9px; color:var(--text); border-top:1px solid var(--line); vertical-align:top; line-height:1.4; } table.grid.inner tbody tr:first-child td { border-top:0; } table.grid.inner tbody tr:hover td { background:var(--surface-2); } table.grid.inner td.num, table.grid.inner th.num { font-variant-numeric:tabular-nums; } table.grid.inner td.mono { font-family:var(--f-mono); } table.grid.inner td.nw, table.grid.inner th.nw { white-space:nowrap; } table.grid.inner td.wrap { white-space:normal; overflow-wrap:anywhere; } table.grid.inner td .sub { display:block; line-height:1.35; } table.grid.inner td .sub.mono { font-family:var(--f-mono); } .tscroll { overflow:auto; max-height:460px; } /* inside a scrolling box the head sticks to the box, not to the page: the 50px meant for the top bar put it 50px down and let the rows show above it (владелец, 2026-09-19: the head of the sub-orders table on the card) */ .tscroll table.grid thead th { top:0; } /* ---- the actions of the operator ----------------------------------------- */ .actrow { display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .actrow + .actrow { margin-top:6px; } .actrow .hl { font-size:var(--fs-nano); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .actbox { position:relative; } .actbox > summary { list-style:none; cursor:pointer; display:inline-flex; } .actbox > summary::-webkit-details-marker { display:none; } .actbox[open] > summary .btn { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); } .actbox .abody { margin-top:6px; padding:8px 9px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); display:grid; gap:6px; min-width:min(280px, 100%); } .actbox .abody.wide { min-width:min(430px, 100%); } /* ---- forms on an element page -------------------------------------------- */ .fld.block { display:flex; width:100%; } .fld textarea { padding:5px 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:var(--fs-s); min-width:0; resize:vertical; width:100%; } .fld textarea:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .fld select[multiple] { height:auto; padding:4px 6px; } .fld input[type="file"] { height:auto; padding:3px 6px; } .fld > .note { letter-spacing:0; text-transform:none; font-weight:400; } .fld .sub, table.grid.inner td > .sub { color:var(--faint); } /* the editable tables (canned replies, feedback items, bonus steps) */ table.grid.inner .fld input, table.grid.inner .fld select, table.grid.inner .fld textarea { width:100%; } table.grid.inner .fld textarea { min-height:52px; } .modal-body .fld input, .modal-body .fld select, .modal-body .fld textarea { width:100%; } .modal-body .fld textarea { min-height:70px; } .actbox .abody input, .actbox .abody select, .actbox .abody textarea { height:auto; min-height:26px; padding:4px 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-s); width:100%; } .actbox .abody textarea { resize:vertical; } .check { display:inline-flex; align-items:flex-start; gap:6px; color:var(--text); cursor:pointer; } .check input { margin:2px 0 0; } .inrow { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .inrow .fld { flex:0 0 auto; } .inrow .fld.grow { flex:1 1 160px; } .abody .w6, .inrow .w6 { width:6rem; } .abody .w8, .inrow .w8 { width:8rem; } /* ---- small things -------------------------------------------------------- */ .saved { background:var(--ok-soft); border:1px solid var(--ok-line); color:var(--ok); border-radius:var(--r); padding:5px 10px; font-size:var(--fs-s); font-weight:600; margin-bottom:9px; } .alert-bad { background:var(--bad-soft); border:1px solid var(--bad-line); color:var(--bad); border-radius:var(--r); padding:5px 10px; font-size:var(--fs-s); font-weight:600; margin-bottom:9px; } /* the line the shell prints when a switch holds something back */ .holdbar { background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber); border-radius:var(--r); padding:6px 11px; font-size:var(--fs-s); margin-bottom:9px; line-height:1.45; } .holdbar b { font-weight:700; } .holdbar a { color:var(--amber); text-decoration:underline; } .rowsum { display:flex; flex-wrap:wrap; gap:3px 9px; } .linkline { display:block; font-size:var(--fs-s); line-height:1.5; } .linkline + .linkline { border-top:1px solid var(--line); padding-top:3px; margin-top:3px; } .jsonpre { margin:4px 0 0; padding:6px 8px; background:var(--well); border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); max-height:260px; overflow:auto; white-space:pre-wrap; word-break:break-word; } @media (max-width: 1280px) { .cgrid.c3 { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 1000px) { .cgrid.c2, .cgrid.c3, .cgrid.c21, .cgrid.c53 { grid-template-columns:minmax(0,1fr); } } @media (max-width: 760px) { .facts { grid-template-columns:minmax(0,1fr); } .facts dt { padding-bottom:0; border-top:1px solid var(--line); } .facts dt + dd { border-top:0; padding-top:1px; } .phead .pacts { margin-left:0; width:100%; } } /* ====================================================================== OVERVIEW PAGES (2026-09-16) The dashboard and the statistics are read at a glance: a grid of tiles, each one a label, a number and the line that says what it means, and a heading between the groups. The tones are the same five as everywhere. ====================================================================== */ .sechead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:14px 0 7px; font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); color:var(--ink); } .sechead:first-of-type { margin-top:4px; } .sechead .hint { font-family:var(--f-body); font-weight:400; font-size:var(--fs-xs); color:var(--faint); } .tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:7px; margin-bottom:9px; } .tile { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r); padding:6px 11px 7px; box-shadow:var(--sh-1); display:block; text-decoration:none; color:inherit; min-width:0; } .tile .k { font-weight:700; text-transform:uppercase; } .tile .v { font-family:var(--f-head); font-weight:600; color:var(--ink); line-height:1.3; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tile .d { line-height:1.35; } .ok-text { color:var(--ok); } .up { color:var(--ok); font-weight:600; } .down { color:var(--bad); font-weight:600; } /* the filter row of the statistics pages is the filter panel of the lists */ .filters .fld select, .filters .fld input { min-width:110px; } /* ====================================================================== THE OLDER SCREENS, PULLED ONTO THE SAME DESIGN (2026-09-16) The screens that are still written with the first set of class names - the long forms of the catalogue and the content - keep their markup and borrow the look of the new kit here: the same panel head, the same fact list, the same fields, the same density. A screen rewritten later drops these names; until then it does not look like a different program. ====================================================================== */ /* the head of a page written before .phead */ .page-head { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:10px; } .page-head h1 { font-family:var(--f-head); font-weight:600; font-size:var(--fs-xl); color:var(--ink); margin:0 0 1px; letter-spacing:-.01em; } .page-head .sub { font-size:var(--fs-s); color:var(--muted); } .page-head .right, .page-head .actions { margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; align-items:center; } /* the head and body of a panel written before .pt / .pbd */ .panel > .ph, .panel .ph { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 11px; border-bottom:1px solid var(--line); background:var(--surface-2); font-weight:700; text-transform:uppercase; } .panel > .ph:first-child { border-radius:var(--r-lg) var(--r-lg) 0 0; } .panel .ph .hint { font-weight:400; letter-spacing:0; text-transform:none; } .panel .pb { padding:8px 11px 9px; } .panel .pb.p0 { padding:0; } .panel .pb > :last-child { margin-bottom:0; } /* the fact list written before .facts */ dl.kv { display:grid; grid-template-columns:auto minmax(0,1fr); margin:0; } dl.kv dt { padding:4px 10px 4px 0; border-top:1px solid var(--line); white-space:nowrap; line-height:1.45; } dl.kv dd { margin:0; padding:4px 0; border-top:1px solid var(--line); color:var(--text); line-height:1.45; min-width:0; overflow-wrap:anywhere; } dl.kv dt:first-of-type, dl.kv dt:first-of-type + dd { border-top:0; } /* the tables written before table.grid.inner */ table.grid.compact thead th, table.grid:not(.orders-grid):not(.inner) thead th { position:static; top:auto; height:22px; padding:0 9px; text-transform:uppercase; border-bottom:1px solid var(--line-2); } table.grid.compact tbody td, table.grid:not(.orders-grid):not(.inner) tbody td { padding:4px 9px; font-size:var(--fs-s); color:var(--text); border-top:1px solid var(--line); vertical-align:top; line-height:1.4; } table.grid.compact tbody tr:first-child td, table.grid:not(.orders-grid):not(.inner) tbody tr:first-child td { border-top:0; } table.grid.compact tbody tr:hover td, table.grid:not(.orders-grid):not(.inner) tbody tr:hover td { background:var(--surface-2); } table.grid td.num, table.grid th.num { text-align:right; font-variant-numeric:tabular-nums; } table.grid td.strong, table.grid .strong { font-weight:600; color:var(--ink); } /* the fields written with the Bootstrap names */ .form-label { margin-bottom:2px; } .form-label .lang { font-family:var(--f-mono); font-weight:500; color:var(--faint); font-size:var(--fs-nano); margin-left:4px; letter-spacing:0; } .form-control, .form-select { font-family:var(--f-body); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 8px; } .form-control-sm, .form-select-sm { padding:3px 8px; border-radius:var(--r-sm); } .form-control:focus, .form-select:focus { border-color:var(--accent-line); box-shadow:var(--ring); background:var(--surface); color:var(--ink); } .form-control.mono { font-family:var(--f-mono); font-size:var(--fs-xs); } .sw { display:flex; align-items:center; gap:9px; padding:5px 0; border-bottom:1px solid var(--line); margin:0; cursor:pointer; } .sw .t small { display:block; } .actions-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; } /* the buttons written with the Bootstrap names follow the new ones */ .btn-sm { font-size:var(--fs-xs); padding:2px 8px; } .link-edit { font-size:var(--fs-s); } /* the tab strip of the catalogue */ .nav.tabs { gap:3px; background:var(--surface-3); border:1px solid var(--line); border-radius:9px; padding:3px; margin-bottom:9px; border-bottom:1px solid var(--line); } .nav.tabs .nav-link { border:0; border-radius:7px; padding:3px 10px; font-size:var(--fs-s); font-weight:600; color:var(--muted); background:transparent; } .nav.tabs .nav-link:hover { color:var(--ink); background:var(--surface-2); } .nav.tabs .nav-link.active { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); } /* the on/off dot of the services list */ .dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--line-2); } .dot.on { background:var(--ok); } .center { text-align:center; } /* ====================================================================== READABILITY PASS (2026-09-16, after the owner looked at the beta) The compact type of the orders line was carried over to every screen, and on a big monitor the labels of the forms, the captions of the tiles and the heads of the tables turned into faint 9.5px lines that are hard to read. Density stays; the small print grows one step and gains contrast, and the field grid stops being ragged. ====================================================================== */ /* panel heads: a real caption, not a whisper */ .pt b, .panel > .ph, .panel .ph { font-size: var(--fs-s); letter-spacing: .05em; color: var(--ink); } .pt .hint, .panel .ph .hint { font-size: var(--fs-xs); color: var(--muted); } .tbar { font-size: var(--fs-xs); color: var(--muted); } /* tiles and page-head figures */ .tile .k, .kpi span { font-size: var(--fs-micro); letter-spacing: .05em; color: var(--muted); } .tile .d { font-size: var(--fs-xs); color: var(--muted); } .tile .v { font-size: 20px; } /* the fact lists of the element pages */ .facts dt, dl.kv dt { font-size: var(--fs-xs); letter-spacing: .03em; text-transform: none; color: var(--muted); font-weight: 700; } .facts dd, dl.kv dd { font-size: var(--fs); } .facts dd .k, dl.kv dd .k { color: var(--muted); } /* the fields: a label one can read, and a grid that lines up */ .fld > label, .fld > span:first-child, .form-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--muted); } .fld .note, .form-text, .fld > .note { font-size: var(--fs-xs); color: var(--faint); line-height: 1.4; } .fld input, .fld select, .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: var(--fs); background: var(--surface); border-color: var(--line-2); } .fld input, .fld select { height: 28px; } /* the compact tables inside panels */ table.grid.inner thead th, table.grid.compact thead th, table.grid:not(.orders-grid):not(.inner) thead th { font-size: var(--fs-micro); letter-spacing: .05em; color: var(--muted); } table.grid.inner tbody td { font-size: var(--fs); } table.grid.inner td .sub { font-size: var(--fs-xs); color: var(--muted); } table.grid.inner td .k, table.grid.inner .k { color: var(--muted); } /* the running text of a screen */ .hint { font-size: var(--fs-xs); color: var(--muted); } .notice { font-size: var(--fs-s); color: var(--muted); } .rowsum { font-size: var(--fs-xs); color: var(--muted); } .rowsum .k, .tgt .k, .bf.mini .k { color: var(--faint); } .subhead { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--muted); } /* the switches of the settings */ .sw { font-size: var(--fs); } .sw .t small { font-size: var(--fs-xs); color: var(--muted); } .check { font-size: var(--fs); } /* a tone name that comes from PHP as "warn"/"info"/"good" paints like ours */ .pill.warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); } .pill.info { background: var(--run-soft); color: var(--run); border-color: var(--run-line); } .pill.good { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); } .v.warn { color: var(--amber); } .v.amber { color: var(--amber); } .v.good { color: var(--ok); } .amber-text { color: var(--amber); font-weight: 600; } /* The stars of a review: the rating in gold, the rest of the five faint. The classes were written with the reviews screen and never given a rule, so every review read as five of five. */ .rv-stars { color: var(--star); letter-spacing: 1px; white-space: nowrap; font-size: var(--fs-m); } /* The way to the phone admin: on a phone only (владелец 2026-09-25). */ .topbar .phone-link { display: none; } @media (max-width: 760px) { .topbar .phone-link { display: grid; } } /* ---- Orders → Blocked: the list over the journal of refused attempts ---- (владелец 2026-09-30, the prototype of the Orders section as shown) */ .bl-ptitle { flex:1 1 560px; min-width:0; } #bl-list, #bl-journal, #bl-add { scroll-margin-top:62px; } .bl-lsum { font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; } .bl-lsum b { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; } .bl-lsum .bl-on { color:var(--ink); font-weight:600; } .bl-add { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 11px; border-bottom:1px solid var(--line); } .bl-lab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .bl-add label.fx-s { position:relative; cursor:pointer; margin:0; } .bl-add label.fx-s input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .bl-add label.fx-s:has(input:checked) { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1), 0 0 0 1px var(--line-2); } .bl-add label.fx-s:has(input:focus-visible) { box-shadow:var(--ring); } .bl-add .fx-in { height:28px; } .bl-in-val input { width:230px; font-family:var(--f-mono); font-size:var(--fs-s); } .bl-in-note { flex:1 1 300px; max-width:640px; } .bl-in-note input { flex:1 1 auto; width:auto; } .bl-add .btn.pri { padding:3px 16px; } .bl-addwarn { font-size:var(--fs-xs); color:var(--amber); font-weight:600; } .bl-add.bl-flash { animation:bl-flash 1.8s ease-out; } @keyframes bl-flash { 0%, 35% { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); } 100% { background:transparent; box-shadow:none; } } .bl-addnote { display:flex; flex-wrap:wrap; gap:3px 16px; padding:5px 11px; font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line); } .bl-addnote a { font-weight:600; } /* the entries stand in one, two or three columns by the width (admin.js splits the table) */ .bl-lcols { display:grid; grid-template-columns:repeat(var(--bl-n, 1), minmax(0, 1fr)); } .bl-lcols > .bl-ltab + .bl-ltab { border-left:1px solid var(--line-2); } table.grid.inner.bl-ltab { table-layout:fixed; } table.grid.inner.bl-ltab tbody td { vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-top:3px; padding-bottom:3px; } .bl-ltab th.num, .bl-ltab td.num { text-align:right; } .bl-ltab th.bl-r { text-align:right; } .bl-ltab .bl-val { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .bl-ltab td.bl-l-note.none, .bl-ltab td.bl-l-last.none { color:var(--faint); } .bl-ltab td.bl-l-last { font-size:var(--fs-s); color:var(--muted); font-variant-numeric:tabular-nums; } table.grid.inner.bl-ltab tbody td.bl-l-act { text-align:right; overflow:visible; text-overflow:clip; } .bl-ltab td.bl-l-act form { display:inline; } .bl-ltab td.bl-l-val .bl-kt { margin-right:6px; vertical-align:1px; } .bl-kt { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.02em; color:var(--muted); background:var(--surface-2); border:1px solid var(--line-2); border-radius:5px; padding:0 6px; line-height:17px; white-space:nowrap; } .bl-hits { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--faint); font-variant-numeric:tabular-nums; } a.bl-hits.on { display:inline-block; min-width:28px; text-align:center; color:var(--amber); font-weight:600; background:var(--amber-soft); border:1px solid var(--amber-line); border-radius:5px; padding:0 5px; line-height:17px; } a.bl-hits.on:hover { background:var(--amber); border-color:var(--amber); color:var(--accent-ink); text-decoration:none; } .bl-ltab tr.bl-flash > td { animation:flashrow 2.2s ease-out; } .bl-lempty { padding:12px 11px; color:var(--muted); font-size:var(--fs-s); } /* the journal */ @media (min-width:561px) { table.grid.bl-jgrid tr.r { height:46px; } } .bl-jgrid .l1 .pill { vertical-align:1px; } .bl-until { margin-left:6px; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); font-variant-numeric:tabular-nums; } .bl-until.on { color:var(--amber); font-weight:500; } .bl-st { font-weight:600; color:var(--text); } .bl-cc { font-family:var(--f-mono); font-weight:500; color:var(--text); } .bl-tv { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .l1 .bl-tv { color:var(--ink); } .bl-det { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; font-size:var(--fs-xs); line-height:1.35; color:var(--text); } .bl-det.none { color:var(--faint); } td.bl-c-act { text-align:right; } .bl-jgrid th.bl-r { text-align:right; } .bl-empty { padding:18px 12px !important; color:var(--muted); font-size:var(--fs-s); text-align:center; } .bl-legend { display:flex; flex-wrap:wrap; align-items:center; gap:3px 14px; font-size:var(--fs-xs); color:var(--muted); } .bl-sw { display:inline-block; width:18px; height:11px; border-radius:20px; border:1px solid; vertical-align:-1px; margin-right:5px; } .bl-sw.off { background:var(--off-soft); border-color:var(--off-line); } .bl-sw.amber { background:var(--amber-soft); border-color:var(--amber-line); } .bl-sw.bad { background:var(--bad-soft); border-color:var(--bad-line); } /* the drawer of a refusal: five named zones */ .bl-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0, 1fr); grid-template-areas:"why" "vis" "tgt" "act" "his"; } @media (min-width:1000px) { .bl-dgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-areas:"why vis" "tgt act" "his his"; } } @media (min-width:1560px) { .bl-dgrid { grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"why vis tgt" "his his act"; } } .bl-zw { grid-area:why; } .bl-zv { grid-area:vis; } .bl-zt { grid-area:tgt; } .bl-za { grid-area:act; } .bl-zh { grid-area:his; } .bl-dgrid .fields { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px 14px; } .bl-dgrid .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.07em; } .bl-dgrid .f .v { font-size:var(--fs-s); line-height:1.45; } .bl-dgrid .f .v .mono { font-size:var(--fs-xs); } .bl-dgrid .f .v .pill { vertical-align:1px; } .bl-zw > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .bl-zw.bl-t-off { border-left:2px solid var(--off); } .bl-zw.bl-t-off > h4 { color:var(--off); background:var(--off-soft); border-bottom-color:var(--off-line); } .bl-zw.bl-t-amber { border-left:2px solid var(--amber); } .bl-zw.bl-t-amber > h4 { color:var(--amber); background:var(--amber-soft); border-bottom-color:var(--amber-line); } .bl-zw.bl-t-bad { border-left:2px solid var(--bad); } .bl-zw.bl-t-bad > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .bl-zv { border-left:2px solid var(--z-cus); } .bl-zv > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .bl-zt { border-left:2px solid var(--z-del); } .bl-zt > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .bl-zh { border-left:2px solid var(--z-ord); } .bl-zh > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .bl-za { border-left:2px solid var(--accent); } .bl-za > h4 { color:var(--accent); background:var(--accent-soft); border-bottom-color:var(--accent-line); } .bl-fulldet { margin:0; padding:6px 9px; background:var(--well); border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-s); color:var(--ink); overflow-wrap:anywhere; line-height:1.45; } .bl-note { margin:6px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } table.grid.inner.bl-htab tbody td { white-space:nowrap; font-size:var(--fs-s); vertical-align:middle; } table.grid.inner.bl-htab tbody tr.bl-cur td { background:var(--accent-soft); } table.grid.inner.bl-htab tbody tr.bl-cur td:first-child { box-shadow:inset 3px 0 0 var(--accent); } .bl-hlinks { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:8px; font-size:var(--fs-xs); color:var(--muted); } .bl-hlinks .btn { font-weight:600; } .bl-pre { display:grid; gap:6px; } .bl-prow { display:flex; align-items:center; gap:7px; min-width:0; } .bl-prow .bl-kt { flex:0 0 78px; text-align:center; } .bl-prow .bl-pv { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .bl-prow .bl-pv.bad { color:var(--bad); } .bl-za .actgrid { margin-top:2px; } @media (max-width:560px) { .phead .kpis .kpi { flex:1 1 30%; } .bl-add .fx-in, .bl-in-note { flex:1 1 100%; max-width:none; } .bl-add .fx-in input { flex:1 1 auto; width:auto; } .bl-lsum { white-space:normal; } table.grid.inner.bl-ltab thead, table.grid.inner.bl-ltab colgroup { display:none; } table.grid.inner.bl-ltab tbody tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 8px; align-items:center; padding:6px 4px; border-top:1px solid var(--line); } table.grid.inner.bl-ltab tbody tr:first-child { border-top:0; } table.grid.inner.bl-ltab tbody td { padding:0; border:0; } .bl-ltab td.bl-l-val { grid-column:1; grid-row:1; } .bl-ltab td.bl-l-hits { grid-column:2; grid-row:1; } .bl-ltab td.bl-l-note { grid-column:1; grid-row:2; white-space:normal; } .bl-ltab td.bl-l-last { grid-column:1; grid-row:3; } table.grid.inner.bl-ltab tbody td.bl-l-act { grid-column:2; grid-row:2 / 4; align-self:end; } .bl-jgrid td.bl-c-when { order:1; flex:1 1 auto; } .bl-jgrid td.bl-c-site { order:2; flex:0 1 auto; text-align:right; } .bl-jgrid td.bl-c-why { order:3; flex:1 1 100%; } .bl-jgrid td.bl-c-who { order:4; flex:1 1 100%; } .bl-jgrid td.bl-c-tgt { order:5; flex:1 1 100%; } .bl-jgrid td.bl-c-det { order:6; flex:1 1 100%; } .bl-jgrid td.bl-c-act { order:7; flex:1 1 100%; text-align:left; } .bl-jgrid td.bl-c-by, .bl-jgrid td.bl-c-from { display:none; } table.grid.inner.bl-htab { display:table; width:100%; } table.grid.inner.bl-htab thead { display:table-header-group; } table.grid.inner.bl-htab tbody { display:table-row-group; } table.grid.inner.bl-htab tr { display:table-row; } table.grid.inner.bl-htab th, table.grid.inner.bl-htab td { display:table-cell; } table.grid.inner.bl-htab .bl-hwide, table.grid.inner.bl-htab .bl-until { display:none; } .bl-prow .bl-kt { flex-basis:64px; } } /* ---- Orders → Auto-Likes: the subscriptions and the page of one ---------- (владелец 2026-09-30, the prototype of the Orders section as shown) */ .al-phead > div:first-child { flex:1 1 480px; min-width:0; } /* the scanner's row of the filters wears the scanner's teal, as Panel wears indigo */ .fx.v1 .fx-lh.al-scan { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .fx.v1 .fx-lh.al-scan .fx-lab:not(.set) { color:var(--z-del); } /* the list: captions one can read on a 4K monitor */ .al-grid tr.ghead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.1em; } .al-grid tr.chead th { color:var(--muted); } .al-grid tr.ghead th.al-g-posts { color:var(--z-pan); background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .al-grid tr.ghead th.al-g-scan { color:var(--z-del); background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .al-grid tr.chead th.al-c-posts { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .al-grid tr.chead th.al-c-scan { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .al-grid tr.r > td.al-c-posts { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .al-grid tr.r > td.al-c-scan { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .al-grid th.right { text-align:right; } .al-grid .l1 .k, .al-grid .l2 .k { color:var(--faint); } .l1.al-late, .l2.al-late, .al-late { color:var(--bad); font-weight:700; } .l1.al-soon, .l2.al-soon, .al-soon { color:var(--amber); font-weight:700; } .l1.al-mute, .l2.al-mute { color:var(--faint); } .l1.al-paused { color:var(--amber); } .l2.al-oldtext { color:var(--muted); font-style:italic; } .al-lk { font-family:var(--f-mono); font-weight:500; color:var(--ink); } .al-count b { color:var(--ink); font-weight:700; } /* the posts of a subscription: one cell per post, coloured by its like order */ .al-pw { display:flex; gap:9px; align-items:flex-start; } .al-pq { flex:0 0 auto; min-width:44px; } .al-pq b { display:block; font-family:var(--f-mono); font-weight:500; font-size:var(--fs); color:var(--ink); line-height:1.3; font-variant-numeric:tabular-nums; white-space:nowrap; } .al-pq b .of { font-size:.86em; } .al-pq > span { display:block; font-size:var(--fs-micro); color:var(--muted); line-height:1.3; white-space:nowrap; } .al-pb { flex:1 1 auto; min-width:0; } .al-strip { display:flex; gap:2px; margin:3px 0 4px; } .al-strip i { flex:1 1 0; min-width:0; height:13px; border-radius:3px; border:1px dashed var(--line-2); background:transparent; } .al-strip i.ok { background:var(--ok-line); border:1px solid var(--ok-line); } .al-strip i.run { background:var(--run); border:1px solid var(--run); } .al-strip i.off { background:var(--off-line); border:1px solid var(--line-3); } .al-strip i.amber { background:var(--amber); border:1px solid var(--amber); } .al-strip i.bad { background:var(--bad); border:1px solid var(--bad); } .al-strip.big i { height:16px; } .zone .al-strip.big, .pbd > .al-strip.big { max-width:560px; margin:0 0 8px; } .legend i.al-ok { background:var(--ok-line); } .legend i.al-run { background:var(--run); } .legend i.al-off { background:var(--off-line); border:1px solid var(--line-3); } .legend i.al-amber { background:var(--amber); } .legend i.al-bad { background:var(--bad); } .legend i.al-none { background:transparent; border:1px dashed var(--line-2); } .legend .al-lgk { font-weight:700; letter-spacing:.07em; text-transform:uppercase; font-size:var(--fs-micro); color:var(--muted); } /* the drawer and the page: readable captions */ .al-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .al-drawer .f .v { font-size:var(--fs-s); } .al-drawer .dtitle { font-size:var(--fs-xs); } .al-drawer .dtitle .al-dsub { font-size:var(--fs-s); color:var(--text); } .al-drawer .f.al-row { grid-column:1 / -1; } table.subs.al-posts th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; } table.subs.al-posts th.num { text-align:right; } table.subs.al-posts td { vertical-align:top; } table.subs.al-posts .al-s { display:block; font-family:var(--f-body); font-size:var(--fs-xs); color:var(--muted); font-weight:400; white-space:nowrap; } table.subs.al-posts td.al-post a { font-family:var(--f-mono); font-size:var(--fs-xs); } table.subs.al-posts td.sid a { color:var(--accent); } table.subs.al-posts .sbar { min-width:110px; } table.subs.al-posts .when { font-size:var(--fs-xs); } table.subs.al-posts .al-vw { font-family:var(--f-mono); color:var(--ink); white-space:nowrap; } .al-empty { font-size:var(--fs-s); color:var(--muted); padding:4px 0 2px; } .al-empty b { color:var(--ink); } .al-cap { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 5px; } .al-cap > b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .al-cap .sp { flex:1; } .al-cap .hint a { font-weight:600; } .al-forms { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-end; margin-top:9px; } .al-form { display:inline-flex; align-items:flex-end; gap:6px; min-width:0; max-width:100%; } .al-form.grow { flex:1 1 340px; max-width:620px; } .al-form .fld.grow { flex:1 1 auto; } .al-form .fld.grow input { width:100%; } .al-form .fld input.al-days { width:6.5rem; } .al-form .btn { height:28px; } .al-note { margin:8px 0 0; } /* the events: the whole short table, no box of its own */ table.grid.inner.al-ev { margin-top:2px; } table.grid.inner.al-ev td.al-when { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted); font-size:var(--fs-s); } table.grid.inner.al-ev td.al-kind { white-space:nowrap; } table.grid.inner.al-ev td.al-kind code { font-size:var(--fs-xs); } table.grid.inner.al-ev tr.al-bad td.al-kind code { color:var(--bad); font-weight:600; } table.grid.inner.al-ev tr.al-op td.al-kind code { color:var(--accent); font-weight:600; } table.grid.inner.al-ev td.al-what { white-space:normal; overflow-wrap:anywhere; } /* the page of one subscription */ .al-marks { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin:0 0 9px; } .al-marks .hint { margin-left:4px; } .facts dd .al-late { font-weight:700; } .al-rules { width:auto; border-collapse:collapse; margin-top:2px; } .al-rules td { padding:1px 12px 1px 0; font-size:var(--fs-s); color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; } .al-rules tr.al-now td { color:var(--ink); font-weight:700; } .al-rules tr.al-now td:first-child::before { content:'▸ '; color:var(--accent); } .al-hist .pt .views { margin-left:auto; } .al-hist .view, .al-hist .view:hover { text-decoration:none; } .subfoot.al-sum { margin:0; padding:7px 0 2px; } @media (max-width:560px) { table.grid.al-grid td.al-c-sub { order:1; flex:1 1 auto; } table.grid.al-grid td.c-status { order:2; flex:0 1 auto; max-width:62%; margin-left:auto; text-align:right; } table.grid.al-grid td.c-status .stline { justify-content:flex-end; flex-wrap:wrap; } table.grid.al-grid td.c-status .errline { white-space:normal; text-align:right; } table.grid.al-grid td.c-customer { display:none; } table.grid.al-grid td.al-c-prof { order:3; flex:1 1 100%; } table.grid.al-grid td.al-c-posts { order:4; flex:1 1 100%; } table.grid.al-grid td.al-c-time { order:5; flex:1 1 40%; } table.grid.al-grid td.al-c-scan { order:6; flex:1 1 40%; padding-left:10px !important; border-left:1px dashed var(--line-2) !important; } table.grid.al-grid td.c-act { order:7; flex:1 1 100%; } .al-grid .l1, .al-grid .l2 { white-space:normal; } .al-form, .al-form.grow { flex:1 1 100%; max-width:none; } } /* ---- Orders → Sub-orders: everything sent to the panels ------------------ The prototype of 2026-09-30, taken as shown: seven tiles, the filter header of the orders list with exact numbers, one line per sub-order with every button of its state, a drawer with the panel's own answer. */ .so-kpis .kpi { min-width:94px; } /* the filter header on a wide screen: the state rows and the typed fields on the left, where it went and when on the right — the panels in one line */ @media (min-width:2000px) { .so-fx.fx.v1 .fx-body { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); grid-template-areas:"state side" "exact side"; } .so-fx.fx.v1 .fx-blk.so-state { grid-area:state; } .so-fx.fx.v1 .fx-blk.side { grid-area:side; } .so-fx.fx.v1 .fx-blk.wide { grid-area:exact; border-top:1px solid var(--line); } } /* the panel's numbers pasted as a list (владелец 2026-10-08): a field wide enough to see a dozen of them, how many it holds, and the ones that are not ours on a line of their own */ .fx-in.so-idsf { flex:1 1 360px; max-width:640px; } .fx-in input.so-ids { flex:1 1 auto; width:auto; font-family:var(--f-mono); font-size:var(--fs-xs); } .fx-in .cap .so-idsn { margin-left:4px; font-variant-numeric:tabular-nums; } .so-idsnote { flex:1 1 100%; margin:2px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .so-idsnote b { color:var(--ink); } .so-idsnote .so-miss { font-family:var(--f-mono); color:var(--amber); word-break:break-word; } /* the line: nothing one has to read at 9.5px and faint */ .so-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .so-grid tr.ghead th.g-del { color:var(--z-del); } .so-grid tr.ghead th.g-pan { color:var(--z-pan); } .so-grid tr.chead th { color:var(--muted); letter-spacing:.05em; } .so-grid tr.chead th.so-r { text-align:right; } .so-grid tr.chead th.so-ctrh, .so-grid tr.r > td.so-ctrc { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .so-grid .l1 .k { font-size:var(--fs-xs); color:var(--faint); font-weight:400; } .so-grid .l1 .pill { margin-left:3px; vertical-align:1px; } .so-grid .so-id { font-family:var(--f-mono); font-weight:500; color:var(--ink); } .so-grid .dqty { flex:0 0 66px; min-width:0; } .so-grid .dqty span { color:var(--muted); white-space:normal; } .so-grid .dtag { width:44px; font-size:var(--fs-micro); letter-spacing:.06em; color:var(--muted); } .so-grid .bf.mini { margin:1px 0 0; font-size:var(--fs-micro); color:var(--ink); } .so-grid .bf.mini .k { color:var(--muted); } @media (min-width:2100px) { .so-grid .bf.mini { margin-left:50px; } } .so-grid .bar.striped, .so-drawer .bigbar .bar.striped { background-color:var(--surface-2); } .so-grid .word { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-xs); line-height:1.3; margin-top:1px; text-align:left; } .so-grid button.word.ask { display:inline-block; vertical-align:top; } .so-grid .l2.so-late, .so-grid .l2.so-late .k { color:var(--bad); font-weight:600; } .so-grid td.so-ctrc .l1, .so-grid td.so-ctrc .so-last { font-family:var(--f-mono); font-size:var(--fs-s); } .so-grid td.so-ctrc .so-last { color:var(--ink); } .so-grid td.so-ctrc .l2.up { color:var(--ok); font-weight:700; } .so-grid td.c-money .l1 { font-family:var(--f-mono); } .so-unk { color:var(--amber); font-weight:700; } .so-say { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; text-align:right; white-space:normal; } .so-grid td.c-act .acts + .so-say, .so-say + .so-say { margin-top:3px; } .so-say.ok-text { color:var(--ok); } .so-say.bad-text { color:var(--bad); } .so-empty td { padding:18px 12px; } .so-foot { margin:9px 2px 0; max-width:1180px; line-height:1.5; } /* the drawer of one sub-order */ .so-drawer .facts dt { min-width:88px; } .so-drawer .facts dd .k { color:var(--muted); } .so-drawer .zbody > :last-child { margin-bottom:0; } .so-own { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--fs); color:var(--ink); } .so-own a { font-weight:700; } .so-own2 { margin:3px 0 8px; font-size:var(--fs-s); color:var(--text); line-height:1.45; } .so-own2 .k { color:var(--muted); } .so-call { margin:0 0 9px; } .so-call .mono, .so-call .tnum { color:var(--ink); } .so-ans { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:10px 16px; align-items:start; } @media (max-width:1100px) { .so-ans { grid-template-columns:minmax(0,1fr); } } table.scant.so-t th { font-size:var(--fs-micro); letter-spacing:.06em; color:var(--muted); padding:3px 7px; background:var(--surface-2); } table.scant.so-t td { padding:4px 7px; vertical-align:top; } table.scant.so-t td.so-w { white-space:normal; overflow-wrap:anywhere; line-height:1.4; } table.scant.so-t td.so-f { color:var(--muted); font-weight:600; } table.scant.so-t td.so-v { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); white-space:normal; overflow-wrap:anywhere; } table.scant.so-t td.so-k { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; } .so-drawer .subhead { margin:0 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .so-drawer .subhead .so-shk { font-weight:400; text-transform:none; letter-spacing:0; color:var(--faint); } .so-drawer .jsonbox { font-size:var(--fs-xs); max-height:none; margin-bottom:8px; } .so-drawer .jsonbox:last-child { margin-bottom:0; } .so-drawer .errbox { margin-bottom:9px; } .so-drawer .errbox.so-warn { border-color:var(--amber-line); background:var(--amber-soft); } .so-drawer .errbox.so-warn .ec { color:var(--amber); } .so-drawer .errbox.so-stuck { margin:9px 0 0; } .so-drawer .actgrid { margin:0 0 6px; } .so-note { font-size:var(--fs-xs); color:var(--muted); margin:5px 0 0; line-height:1.45; } .so-asking { margin:0; } .so-drawer .bigbar .bf .k { font-size:var(--fs-micro); color:var(--muted); } .so-drawer .bigbar .bf .up { color:var(--ok); } .so-drawer .bigbar + hr.zsep { margin-top:10px; } .so-drawer .z-cus .actrow { margin-top:8px; } /* a phone: the line becomes a card, the cells in their places */ @media (max-width:560px) { .so-kpis .kpi { flex:1 1 30%; } table.grid.so-grid td.c-order { order:1; flex:1 1 auto; } table.grid.so-grid td.so-whose { order:2; flex:0 1 auto; margin-left:auto; text-align:right; } table.grid.so-grid td.so-pan { order:3; flex:1 1 100%; } table.grid.so-grid td.c-target { order:4; flex:1 1 100%; } table.grid.so-grid td.c-delivery { order:5; flex:1 1 100%; } table.grid.so-grid td.so-ctrc { order:6; flex:1 1 auto; } table.grid.so-grid td.c-money { order:7; flex:0 0 auto; margin-left:auto; text-align:right; } table.grid.so-grid tr.r > td.c-panels { order:8; flex:1 1 100%; } table.grid.so-grid td.c-act { order:9; flex:1 1 100%; } table.grid.so-grid td.c-act .acts { justify-content:flex-start; } .so-say { text-align:left; } .so-drawer .facts dt { min-width:0; } /* the small tables of the drawer stay tables, head and all */ .so-drawer table.scant { display:table; width:100%; } .so-drawer table.scant thead { display:table-header-group; } .so-drawer table.scant tbody { display:table-row-group; } .so-drawer table.scant tr { display:table-row; } .so-drawer table.scant th, .so-drawer table.scant td { display:table-cell; } } /* ---- Orders → Payments: the list, its drawer, the page and the bonuses --- The prototype of 2026-09-30, taken as shown. Its generic rules are scoped here: the money-in table, the inner tables of the drawer and the page, and their phone form never reach the other inner tables of the admin. */ .py-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .py-hrow h1 { margin:0; } .phead .sub.py-sub { max-width:1040px; margin-top:2px; } /* money in and the callbacks nobody placed, side by side on a wide screen */ .py-top { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:start; margin-bottom:9px; } .py-top > .panel + .panel { margin-top:0; } /* side by side only where the callbacks keep room for their words: the prototype's 1 500 px squeezed their details to a letter a line (real texts). Money in grew from 860 px to 1 040 with the tries at Finby (2026-10-10), and the threshold moved with it, so the callbacks keep the room they had */ @media (min-width:2080px) { .py-top.two { grid-template-columns:minmax(0,1040px) minmax(0,1fr); } } .py-top > .panel:first-child { max-width:1040px; } .py-orph td.mono { overflow-wrap:anywhere; } .py-cnt { font-size:var(--fs-micro); font-weight:700; letter-spacing:0; text-transform:none; line-height:16px; padding:0 6px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); color:var(--muted); } .pt.py-pt-bad { background:var(--bad-soft); border-bottom-color:var(--bad-line); } .pt.py-pt-bad b { color:var(--bad); } .pt.py-pt-bad .py-cnt { background:var(--bad); border-color:var(--bad); color:var(--accent-ink); } .panel.py-orph { border-color:var(--bad-line); } .py-lead { padding:6px 11px 7px; font-size:var(--fs-xs); color:var(--muted); border-bottom:1px solid var(--line); line-height:1.45; } table.py-mi th.gs, table.py-mi td.gs { border-left:1px solid var(--line-2); } table.grid.inner thead tr.py-hg th { height:20px; color:var(--muted); border-bottom:0; } table.grid.inner td.py-mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner td.py-mn.now { color:var(--ink); font-weight:600; } table.py-mi td.lab { white-space:nowrap; } table.py-mi td.lab b { color:var(--ink); font-weight:600; } table.py-mi td.lab .k { font-size:var(--fs-xs); margin-left:7px; } table.py-mi td.now.gs { box-shadow:inset 1px 0 0 var(--line-2); border-left:0; } table.py-mi .py-none { color:var(--faint); } .py-chg { display:inline-block; min-width:46px; text-align:right; font-size:var(--fs-xs); font-weight:700; margin-left:8px; color:var(--faint); } .py-chg.up { color:var(--ok); } .py-chg.down { color:var(--bad); } .py-cap .py-chg { margin:0; min-width:0; } .py-cap { display:flex; flex-wrap:wrap; gap:4px 14px; padding:5px 11px 6px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .py-cap b { color:var(--ink); font-weight:600; } /* the list */ .py-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .py-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .py-legend i.bad { background:var(--bad); } .py-legend i.amber { background:var(--amber); } .tbar .py-total { font-size:var(--fs-s); color:var(--muted); } .tbar .py-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .py-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } tr.ghead th.py-gcus { color:var(--z-cus); } .py-grid tr.chead th.py-r { text-align:right; } .py-grid tr.r > td.py-t-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .py-grid tr.r > td.py-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .py-c-pay .l1 a.strong { font-family:var(--f-mono); font-weight:500; font-size:var(--fs); letter-spacing:.01em; } .py-c-pay .l1 .pill { margin-left:4px; vertical-align:1px; } .py-c-site .l1 { display:flex; align-items:center; gap:0; } .py-c-site .pill { margin-left:3px; } .py-c-cus .l1 a { font-weight:600; color:var(--ink); } .py-c-cus .l1 a:hover { color:var(--accent); } .py-c-cus .l1 .k { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); margin-left:5px; } .py-c-amt .l1 { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; } .py-got { color:var(--amber); font-weight:600; } .py-bonus { color:var(--ok); font-weight:600; } .py-c-met .l1 .k { color:var(--muted); } /* "from the balance · no money moved" takes a second line rather than lose its end */ .py-grid td.py-c-met .l2 { white-space:normal; } .py-btns { white-space:nowrap; } .py-btns .y { color:var(--ok); font-weight:600; } .py-btns .n { color:var(--faint); } .py-nobtn { color:var(--bad); font-weight:700; } .py-c-ord .l1 a { font-family:var(--f-mono); font-size:.95em; } .py-c-ord .py-more { font-size:var(--fs-micro); font-weight:700; color:var(--z-del); background:var(--z-del-soft); border:1px solid var(--z-del-line); border-radius:20px; padding:0 5px; margin-left:3px; font-family:var(--f-body); } .py-c-ord .l2 + .l1 { margin-top:3px; } .py-c-st .stline { flex-wrap:wrap; row-gap:2px; } .py-warn { color:var(--amber); } /* a decline reason may take a second line rather than lose its end */ .py-c-st .l2.py-warn { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25; } .py-note { font-size:var(--fs-xs); color:var(--faint); font-style:italic; white-space:nowrap; align-self:center; } td.c-act .acts .py-note { font-size:var(--fs-micro); } .py-noacts { font-size:var(--fs-xs); color:var(--faint); text-align:right; display:block; padding-top:2px; } .py-say { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; text-align:right; white-space:normal; } .py-grid td.c-act .acts + .py-say { margin-top:3px; } .py-say.ok-text { color:var(--ok); } .py-say.bad-text { color:var(--bad); } /* the drawer: four named zones in two columns */ .py-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .py-dgrid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); } } @media (min-width:1560px) { .py-dgrid { grid-template-columns:minmax(0,4fr) minmax(0,7fr); } } .py-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .zone.py-z-pay { border-left:2px solid var(--z-ord); } .zone.py-z-pay > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.py-z-who { border-left:2px solid var(--z-cus); } .zone.py-z-who > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.py-z-ord { border-left:2px solid var(--z-del); } .zone.py-z-ord > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.py-z-jrn { border-left:2px solid var(--z-pan); } .zone.py-z-jrn > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .py-drawer .zbody.p0 { padding:0; } .py-drawer .fields { gap:7px 16px; } .py-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .py-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .py-drawer .errbox { margin:0 0 8px; } .py-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .py-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .py-zfoot .sp { flex:1; } .py-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); } .py-drawer .actgrid { align-items:center; } table.grid.inner.py-t { font-size:var(--fs-s); } table.grid.inner.py-t tbody td { font-size:var(--fs-s); } table.grid.inner.py-t td:first-child, table.grid.inner.py-t th:first-child { padding-left:11px; } table.grid.inner.py-t td:last-child, table.grid.inner.py-t th:last-child { padding-right:11px; } table.grid.inner.py-t td .sub { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.py-t tr.py-rbad td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.py-t tr.py-rok td:first-child { box-shadow:inset 2px 0 0 var(--ok); } table.grid.inner.py-t .mono { font-family:var(--f-mono); font-size:var(--fs-xs); } table.grid.inner.py-t a.py-oid { font-family:var(--f-mono); font-weight:500; } table.grid.inner.py-t td.nw { white-space:nowrap; } .py-pl summary { cursor:pointer; font-size:var(--fs-xs); color:var(--accent); list-style:none; display:inline-block; margin-top:2px; } .py-pl summary::-webkit-details-marker { display:none; } .py-pl summary::before { content:'\25B8 '; } .py-pl[open] summary::before { content:'\25BE '; } .py-sig-ok { color:var(--ok); } .py-sig-bad { color:var(--bad); font-weight:700; } /* the page of a payment */ table.grid.inner th.py-min, table.grid.inner td.py-min { width:1%; white-space:nowrap; } .pt.py-pt-ord { background-image:linear-gradient(var(--z-ord-soft), var(--z-ord-soft)); } .pt.py-pt-ord b { color:var(--z-ord); } .pt.py-pt-cus { background-image:linear-gradient(var(--z-cus-soft), var(--z-cus-soft)); } .pt.py-pt-cus b { color:var(--z-cus); } .panel.py-acts-panel { border-left:3px solid var(--accent); } .py-acts-panel .pbd { display:grid; gap:6px; } .py-none { font-size:var(--fs-s); color:var(--muted); } .py-browser { display:flex; flex-wrap:wrap; gap:3px 16px; padding:6px 11px; border-bottom:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); } .py-browser b { color:var(--ink); font-weight:600; } .py-browser .mono { font-family:var(--f-mono); } /* the top-up bonus scale */ .py-bwrap { max-width:1240px; } .py-bgrid { display:grid; gap:9px; align-items:start; grid-template-columns:repeat(2, minmax(0,1fr)); } .py-bgrid > .panel + .panel { margin-top:0; } .py-bgrid > .py-sees-p { grid-column:1 / -1; } @media (min-width:1800px) { .py-bwrap { max-width:1760px; } .py-bgrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,.72fr); } .py-bgrid > .py-sees-p { grid-column:auto; } } @media (max-width:1000px) { .py-bgrid { grid-template-columns:minmax(0,1fr); } } .py-unit { display:flex; flex-direction:row; align-items:center; gap:6px; } .py-unit i { font-style:normal; color:var(--muted); font-size:var(--fs-s); font-weight:600; flex:0 0 auto; } table.grid.inner.py-steps td { vertical-align:middle; } table.grid.inner.py-steps th.py-cf { width:150px; } table.grid.inner.py-steps th.py-cp { width:118px; } table.grid.inner.py-steps input { width:100%; min-width:0; text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; } table.grid.inner.py-steps input.py-dup { border-color:var(--amber-line); background:var(--amber-soft); } table.grid.inner.py-steps input.py-badv { border-color:var(--bad-line); background:var(--bad-soft); } table.grid.inner.py-steps td.py-rm { width:1%; text-align:right; } table.grid.inner.py-steps td.py-ex { color:var(--muted); font-size:var(--fs-xs); white-space:nowrap; } .py-addrow { display:flex; align-items:center; gap:10px; padding:7px 11px; border-top:1px solid var(--line); flex-wrap:wrap; } .py-addrow .hint { flex:1 1 200px; } .py-savebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px; } .py-dirty { font-size:var(--fs-s); color:var(--amber); font-weight:600; } .py-clean { font-size:var(--fs-s); color:var(--faint); } table.grid.inner.py-sees td.pc { font-family:var(--f-mono); text-align:right; color:var(--ink); font-weight:600; } table.grid.inner.py-sees td.pc.none { color:var(--faint); font-weight:400; } table.grid.inner.py-sees td.fr { font-family:var(--f-mono); white-space:nowrap; } /* a 4K screen shows the words of the amount's head in full */ .py-wide { display:none; } @media (min-width:2100px) { .py-dgrid { gap:12px; } .py-wide { display:inline; } } @media (max-width:700px) { .py-top.two, .py-top { grid-template-columns:minmax(0,1fr); } } /* a phone: the line becomes a card, the inner tables labelled blocks */ @media (max-width:560px) { .py-kpis { flex-wrap:wrap; } .py-kpis .kpi { flex:1 1 30%; } .py-legend { display:none; } table.grid.py-grid tr.r > td.py-c-pay { order:1; flex:1 1 auto; } table.grid.py-grid tr.r > td.py-c-st { order:2; flex:0 0 auto; margin-left:auto; text-align:right; } table.grid.py-grid tr.r > td.py-c-st .stline { justify-content:flex-end; } table.grid.py-grid tr.r > td.py-c-cus { order:3; flex:1 1 100%; } table.grid.py-grid tr.r > td.py-c-amt { order:4; flex:0 0 auto; } table.grid.py-grid tr.r > td.py-c-met { order:5; flex:1 1 40%; } table.grid.py-grid tr.r > td.py-c-site { order:6; flex:0 0 auto; } table.grid.py-grid tr.r > td.py-c-ord { order:7; flex:1 1 100%; margin-top:3px; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } table.grid.py-grid tr.r > td.c-act { order:8; flex:1 1 100%; } table.grid.py-grid td.c-act .acts { justify-content:flex-start; } .py-noacts, .py-say { text-align:left; } :is(table.py-t, table.py-mi, table.py-steps, table.py-sees).grid.inner tr { padding:6px 10px; border-top:1px solid var(--line); } :is(table.py-t, table.py-mi, table.py-steps, table.py-sees).grid.inner tbody tr:first-child { border-top:0; } :is(table.py-t, table.py-mi, table.py-steps, table.py-sees).grid.inner tbody td { border-top:0 !important; padding:1px 0 !important; } :is(table.py-t, table.py-mi, table.py-steps, table.py-sees).grid.inner td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-family:var(--f-body); } :is(table.py-t, table.py-mi, table.py-steps, table.py-sees).grid.inner td.py-mn, :is(table.py-t, table.py-mi, table.py-steps, table.py-sees).grid.inner td.num { text-align:left; } table.grid.inner.py-t tr.py-rbad, table.grid.inner.py-t tr.py-rok { border-left:3px solid var(--line-2); } table.grid.inner.py-t tr.py-rbad { border-left-color:var(--bad); } table.grid.inner.py-t tr.py-rok { border-left-color:var(--ok); } table.grid.inner.py-t tr td:first-child { box-shadow:none !important; padding-left:0 !important; } table.py-mi tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; } table.py-mi tbody td.lab { grid-column:1 / -1; } table.py-mi td.now.gs { box-shadow:none; } table.grid.inner.py-t td.nw { white-space:normal; } table.grid.inner.py-steps tbody tr[data-i] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:3px 10px; align-items:end; } table.grid.inner.py-steps td:nth-child(1) { order:1; } table.grid.inner.py-steps td:nth-child(2) { order:2; } table.grid.inner.py-steps td.py-rm { order:3; padding-bottom:3px !important; } table.grid.inner.py-steps td.py-ex { order:4; grid-column:1 / -1; white-space:normal; } table.grid.inner.py-sees tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; } table.grid.inner.py-sees td.pc { text-align:left; } .py-chg { min-width:0; } .py-note { white-space:normal; } .py-dgrid { gap:9px; } } /* ---- The scans of the counter (владелец, 2026-09-30) ---------------------- How long ago each cell of the strip was, under it; in a drawer the counter at moments back from now, the small curve that opens the whole one, every scan on request; the whole curve in a window almost the size of the screen. */ .scw { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1px; } .scw .sc { flex:0 0 auto; } .sca { font-family:var(--f-mono); font-size:var(--fs-nano); line-height:1.15; color:var(--faint); text-align:center; white-space:nowrap; overflow:hidden; font-variant-numeric:tabular-nums; } .strip .refresh { align-self:flex-start; } .so-strip { margin-top:4px; } table.scant.sh-moments { margin-bottom:6px; } table.scant.sh-moments td.t .k { color:var(--faint); } .sh-spark { display:block; width:100%; margin:4px 0 6px; padding:4px 5px 3px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); cursor:zoom-in; text-align:left; } .sh-spark:hover { border-color:var(--accent-line); background:var(--surface); } .sh-spark svg.spark { height:34px; margin:0; } .sh-spark .sh-open { display:block; margin-top:2px; text-align:right; font-size:var(--fs-micro); font-weight:600; color:var(--accent); } /* a drawer's small heading: the title left, what it says about it right */ .bh.mb-1 { display:flex; align-items:baseline; gap:6px; } .bh.mb-1 > .sp { flex:1; } .bh.mb-1 > span.zt { font-size:var(--fs-xs); color:var(--muted); } .sh-all > summary { cursor:pointer; list-style:none; font-size:var(--fs-xs); font-weight:600; color:var(--accent); } .sh-all > summary::-webkit-details-marker { display:none; } .sh-all > summary::before { content:'\25B8 '; } .sh-all[open] > summary::before { content:'\25BE '; } .sh-list { margin-top:4px; } table.scant th.num { text-align:right; } #modal .modal-dialog.modal-wide { max-width:min(96vw, 1840px); } .sch-sum { display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:8px; font-size:var(--fs-s); color:var(--muted); } .sch-sum .k { color:var(--faint); } .sch-wrap { position:relative; } .scan-chart { display:block; width:100%; height:auto; } .scan-chart .sch-bg { fill:var(--surface-2); } .scan-chart .sch-grid { stroke:var(--line); stroke-width:1; } .scan-chart .sch-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .scan-chart .sch-dot { fill:var(--accent); } .scan-chart line.sch-start { stroke:var(--muted); stroke-width:1; stroke-dasharray:6 4; } .scan-chart line.sch-goal { stroke:var(--ok); stroke-width:1; stroke-dasharray:6 4; } .scan-chart text.sch-label { fill:var(--muted); font-size:12px; font-family:var(--f-mono); } .scan-chart text.sch-goal { fill:var(--ok); } .scan-chart .sch-guide { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; opacity:.55; } .scan-chart .sch-mark { fill:var(--surface); stroke:var(--accent); stroke-width:2.5; } .sch-tip { position:absolute; z-index:2; pointer-events:none; transform:translate(-50%, calc(-100% - 12px)); padding:5px 9px; border:1px solid var(--line-2); border-radius:7px; background:var(--surface); color:var(--ink); box-shadow:var(--sh-2); font-family:var(--f-mono); font-size:12px; line-height:1.4; white-space:nowrap; } .sch-tip .up { color:var(--ok); } .sch-tip .zero { color:var(--amber); } .sch-tip .k { color:var(--faint); } /* ---- Customers (владелец 2026-10-01, the prototype of the second round) ---- Five tiles, the accounts of each site beside the largest balances, the filter header of the orders list with ten rows, one line per account and a drawer of five zones. Every class starts with cu-; colours are the kit's tokens only, so light and dark both hold. */ .cu-headl { flex:1 1 560px; min-width:0; } .cu-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cu-hrow h1 { margin:0; } .phead .sub.cu-sub { max-width:1120px; margin-top:2px; line-height:1.45; } .cu-kpis .kpi { color:inherit; text-decoration:none; display:block; cursor:pointer; transition:box-shadow .12s, border-color .12s; } .cu-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .cu-kpis .kpi b { font-variant-numeric:tabular-nums; white-space:nowrap; } .cu-kpis .kpi b small { font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; color:var(--muted); margin-left:6px; } .cu-kpis .kpi.cu-amber { border-left-color:var(--amber); } .cu-kpis .kpi.cu-amber.cu-hot { background:var(--amber-soft); border-color:var(--amber-line); border-left-color:var(--amber); } .cu-kpis .kpi.cu-amber.cu-hot b { color:var(--amber); } .cu-kpis .kpi.cu-red { border-left-color:var(--bad); } .cu-kpis .kpi.cu-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } /* the accounts by site and the largest balances, side by side */ .cu-top { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:stretch; margin-bottom:9px; } .cu-top > .panel { display:flex; flex-direction:column; min-width:0; } .cu-top > .panel > .cu-cap { margin-top:auto; } .cu-top > .panel + .panel { margin-top:0; } @media (min-width:1500px) { .cu-top { grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); } } table.grid.inner th.gs, table.grid.inner td.gs { border-left:1px solid var(--line-2); } table.grid.inner td.mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner td.num, table.grid.inner th.num { text-align:right; } table.grid.inner td.nw { white-space:nowrap; } table.grid.inner.cu-ov thead tr.cu-hg th { height:20px; border-bottom:0; color:var(--muted); } table.grid.inner.cu-ov thead tr.cu-hg th.cu-gdel { color:var(--z-del); } table.grid.inner.cu-ov thead tr.cu-hg th.cu-grun { color:var(--run); } table.grid.inner.cu-ov td.lab { white-space:nowrap; } table.grid.inner.cu-ov td.lab b { color:var(--ink); font-weight:600; } table.grid.inner.cu-ov td.mn a { color:var(--ink); } table.grid.inner.cu-ov td.mn a:hover { color:var(--accent); } table.grid.inner.cu-ov tr.cu-sum td { background:var(--surface-2); } table.grid.inner.cu-ov tr.cu-sum td.mn a, table.grid.inner.cu-ov tr.cu-sum td.lab b { font-weight:700; } table.grid.inner.cu-ov td:first-child, table.grid.inner.cu-ov th:first-child { padding-left:11px; } table.grid.inner.cu-ov td:last-child, table.grid.inner.cu-ov th:last-child { padding-right:11px; } .cu-sm { font-size:var(--fs-xs); color:var(--muted); } table.cu-toplist td .brandtag { margin-right:6px; } table.cu-toplist code.cu-kind { margin-left:4px; } .cu-cap { display:flex; flex-wrap:wrap; gap:4px 18px; padding:5px 11px 6px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .cu-cap b { color:var(--ink); font-weight:600; font-family:var(--f-mono); } .cu-negcap a { color:var(--bad); font-weight:600; } .cu-plink { font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; } .cu-cnt { font-size:var(--fs-micro); font-weight:700; line-height:16px; padding:0 6px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); color:var(--muted); font-variant-numeric:tabular-nums; } /* the filter rows: ten of them stand in two columns from a 1500 px screen, as the kit puts them from 2000 px (at 1920 the orders header is one column) */ @media (min-width:1500px) { #cu-filters.fx.v1 .fx-body { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } #cu-filters.fx.v1 .fx-blk.side { border-left:1px solid var(--line-2); } #cu-filters.fx.v1 .fx-blk.side > .fx-lh:first-child, #cu-filters.fx.v1 .fx-blk.side > .fx-lh:first-child + .fx-rc { border-top:0; } #cu-filters.fx.v1 .fx-blk.wide { grid-column:1 / -1; border-top:1px solid var(--line-2); } #cu-filters.fx.v1 .fx-blk.wide > .fx-lh:first-child, #cu-filters.fx.v1 .fx-blk.wide > .fx-lh:first-child + .fx-rc { border-top:0; } } .cu-nonum { display:inline-block; margin-left:4px; font-size:var(--fs-micro); letter-spacing:.02em; text-transform:none; font-weight:600; color:var(--faint); border:1px dashed var(--line-2); border-radius:4px; padding:0 4px; line-height:15px; } .cu-rownote { font-size:var(--fs-xs); color:var(--faint); } .cu-miss { font-size:var(--fs-xs); color:var(--amber); font-weight:600; } /* the list. The kit's `table.grid thead th {top:50px}` outweighs its own `tr.chead th {top:71px}`, so the column names would cover the group captions of a two-row head; the ids put them back. */ #cu-grid thead tr.ghead th { top:50px; } #cu-grid thead tr.chead th { top:71px; } #cu-grid thead th.right { text-align:right; } .tbar .cu-total { font-size:var(--fs-s); color:var(--muted); } .tbar .cu-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .cu-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .cu-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .cu-legend i.bad { background:var(--bad); } .cu-legend i.amber { background:var(--amber); } .cu-legend i.off { background:var(--off); } .cu-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } /* the group captions: indigo = money (as the gateways on the payments line), teal = what was bought */ tr.r > td.cu-t-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } tr.r > td.cu-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .cu-c-who .l1 a.cu-login { font-weight:600; color:var(--ink); } .cu-c-who .l1 a.cu-login:hover { color:var(--accent); } .cu-c-who .l1 .k { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); margin-left:6px; } .cu-c-who .l2.cu-pid { font-size:var(--fs-xs); color:var(--muted); } .cu-c-acc .l1 { display:flex; align-items:center; gap:0; } .cu-c-acc .pill { margin-left:6px; } .cu-lang { margin-left:6px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--z-pan); border:1px solid var(--z-pan-line); background:var(--z-pan-soft); border-radius:4px; padding:0 4px; line-height:15px; } .cu-pw.set { color:var(--ok); font-weight:600; } .cu-pw.old { color:var(--text); } .cu-pw.none { color:var(--faint); } .cu-bal { font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums; } .l1.cu-bal.pos { color:var(--ok); font-weight:600; } .l1.cu-bal.neg { color:var(--bad); font-weight:700; } .l1.cu-bal.zero { color:var(--faint); } .cu-paid { font-family:var(--f-mono); font-weight:500; font-variant-numeric:tabular-nums; } .cu-none, .l1.cu-none { color:var(--faint); } .l1.cu-fresh { color:var(--ok); font-weight:600; } .cu-ses { color:var(--run); font-weight:600; } .cu-c-reg .l2 a.mono { font-size:.95em; } .cu-c-ref .l1 a { font-weight:600; } /* a deleted account: grey and quiet, its own mark on the left */ tbody.orow.cu-delrow > tr.r > td { color:var(--muted); } tbody.orow.cu-delrow > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--off); } tbody.orow.cu-delrow .cu-login { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-3); } td.c-act .acts form { display:contents; } td.c-act .acts .btn.cu-refused, .btn.cu-refused { border-style:dashed; color:var(--muted); } .cu-say { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; text-align:right; white-space:normal; margin-top:3px; } .cu-nothing { padding:14px 11px !important; } /* the drawer: its own panel under the line, five named zones */ .cu-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .cu-dgrid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); } } @media (min-width:1560px) { .cu-dgrid { grid-template-columns:minmax(0,4fr) minmax(0,7fr); } } .cu-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .zone.cu-z-acc { border-left:2px solid var(--z-cus); } .zone.cu-z-acc > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.cu-z-ses { border-left:2px solid var(--z-ord); } .zone.cu-z-ses > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.cu-z-ord { border-left:2px solid var(--z-del); } .zone.cu-z-ord > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.cu-z-pay { border-left:2px solid var(--z-pan); } .zone.cu-z-pay > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.cu-z-bal { border-left:2px solid var(--ok); } .zone.cu-z-bal > h4 { color:var(--ok); background:var(--ok-soft); border-bottom-color:var(--ok-line); } .cu-drawer .fields { gap:7px 16px; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); } .cu-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .cu-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .cu-drawer .errbox { margin:0 0 8px; } .cu-drawer .actgrid { align-items:center; } .cu-drawer .actgrid form { display:contents; } .cu-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .cu-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .cu-zfoot .sp { flex:1; } .cu-zfoot a { font-weight:600; } .cu-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); } .cu-zhint { margin-top:7px; font-size:var(--fs-xs); color:var(--muted); } .cu-notes { margin-top:8px; border:1px solid var(--amber-line); background:var(--amber-soft); border-radius:var(--r); padding:5px 9px; display:grid; gap:2px; } .cu-notes p { margin:0; font-size:var(--fs-xs); color:var(--text); line-height:1.45; } .cu-notes p b { color:var(--amber); font-weight:700; } /* the tables inside panels and zones: heads that read, numbers that line up */ table.grid.inner.cu-t { font-size:var(--fs-s); } table.grid.inner.cu-t tbody td { font-size:var(--fs-s); } table.grid.inner.cu-t td:first-child, table.grid.inner.cu-t th:first-child { padding-left:11px; } table.grid.inner.cu-t td:last-child, table.grid.inner.cu-t th:last-child { padding-right:11px; } table.grid.inner.cu-t td .sub { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.cu-t td .k { color:var(--muted); } table.grid.inner.cu-t tr.cu-rbad td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.cu-t tr.cu-ramber td:first-child { box-shadow:inset 2px 0 0 var(--amber); } table.grid.inner.cu-t tr.cu-rok td:first-child { box-shadow:inset 2px 0 0 var(--ok); } table.grid.inner.cu-t tr.cu-rop td { background:var(--run-soft); } table.grid.inner.cu-t tr.cu-rop td:first-child { box-shadow:inset 2px 0 0 var(--run); } table.grid.inner.cu-t .mono, table.grid.inner.cu-t td.mono { font-family:var(--f-mono); font-size:var(--fs-xs); } table.grid.inner.cu-t a.cu-oid { font-family:var(--f-mono); font-weight:500; } table.grid.inner.cu-t td.cu-minus { color:var(--bad); } table.grid.inner.cu-t td.cu-plus { color:var(--ok); } table.grid.inner.cu-t .cu-ua { color:var(--muted); font-size:var(--fs-xs); } code.cu-kind { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } code.cu-kind.deposit, code.cu-kind.bonus, code.cu-kind.order_refund { color:var(--ok); } code.cu-kind.referral_reward { color:var(--z-pan); } code.cu-kind.admin_credit, code.cu-kind.admin_debit { color:var(--run); font-weight:600; } code.cu-kind.other { color:var(--amber); font-weight:600; } table.cu-toplist td b { font-weight:600; } @media (min-width:2100px) { .cu-dgrid { gap:12px; } } /* a phone's width: the page holds together, nothing scrolls sideways */ @media (max-width:560px) { .cu-kpis { flex-wrap:wrap; } .cu-kpis .kpi { flex:1 1 30%; min-width:0; } .cu-kpis .kpi b { white-space:normal; } .cu-kpis .kpi b small { display:block; margin-left:0; } .cu-legend { display:none; } /* The kit's "table.grid tr { display:block }" outranks its own "tr.r { display:flex }", so the card of a line is laid out here with the grid's own class in front. */ table.grid.cu-grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 12px; padding:9px 36px 10px 11px; height:auto; } table.grid.cu-grid td.cu-c-who { order:1; flex:1 1 100%; } table.grid.cu-grid td.cu-c-acc { order:2; flex:1 1 40%; } table.grid.cu-grid td.cu-c-bal { order:3; flex:0 0 auto; } table.grid.cu-grid td.cu-c-paid { order:4; flex:0 0 auto; } table.grid.cu-grid td.cu-c-ord { order:5; flex:1 1 40%; } table.grid.cu-grid td.cu-c-reg { order:6; flex:1 1 40%; } table.grid.cu-grid td.cu-c-act { order:7; flex:1 1 40%; } table.grid.cu-grid td.cu-c-ref { order:8; flex:1 1 100%; } table.grid.cu-grid td.c-act { order:9; flex:1 1 100%; margin-top:4px; } .cu-grid .l1, .cu-grid .l2 { white-space:normal; overflow-wrap:anywhere; } .cu-grid td.c-act .acts { flex-wrap:wrap; justify-content:flex-start; } /* the inner tables turn into labelled blocks instead of being squeezed */ .cu-top table.grid.inner tr, .cu-drawer table.grid.inner tr { padding:6px 10px; border-top:1px solid var(--line); } .cu-top table.grid.inner tbody tr:first-child, .cu-drawer table.grid.inner tbody tr:first-child { border-top:0; } .cu-top table.grid.inner tbody td, .cu-drawer table.grid.inner tbody td { border-top:0 !important; padding:1px 0 !important; } table.grid.inner.cu-t td.mn, table.grid.inner.cu-ov td.mn, table.grid.inner.cu-t td.num { text-align:left; } table.grid.inner.cu-t td.nw { white-space:normal; } table.grid.inner.cu-ov tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px 12px; } table.grid.inner.cu-ov td[data-l]::before { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } table.grid.inner.cu-ov tbody td.lab { grid-column:1 / -1; } table.grid.inner.cu-ov td.gs { border-left:0; } .cu-dgrid { gap:9px; } .cu-drawer .fields { grid-template-columns:minmax(0,1fr); } } /* ---- The customer's card (владелец 2026-10-01): the actions first in rows with their caption in a band on the left, as the rows of the filter header; three panels of facts; the whole tables. ---------------------------------- */ /* panels side by side start on one line (the kit's .panel + .panel margin is for panels one under another; inside a .cgrid it pushed them 9px down) */ .cu-page .cgrid > .panel + .panel, .cu-page .cgrid > .stack > .panel + .panel, .cu-page .cgrid > .panel + .stack { margin-top:0; } .cgrid.cu-c75 { grid-template-columns:minmax(0,7fr) minmax(0,5fr); } @media (max-width:1280px) { .cgrid.cu-c75 { grid-template-columns:minmax(0,1fr); } } .pt.cu-pt-cus { background-image:linear-gradient(var(--z-cus-soft), var(--z-cus-soft)); } .pt.cu-pt-cus b { color:var(--z-cus); } .panel.cu-acts { border-left:3px solid var(--accent); } .cu-arow { display:grid; grid-template-columns:132px minmax(0,1fr); border-top:1px solid var(--line); } .cu-acts > .pt + .cu-arow { border-top:0; } .cu-alab { padding:9px 8px 8px 11px; background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .cu-arow:last-child .cu-alab { border-radius:0 0 0 var(--r-lg); } .cu-alv { display:block; margin-top:3px; font-family:var(--f-mono); font-size:var(--fs); letter-spacing:0; text-transform:none; font-weight:600; } .cu-alv.pos { color:var(--ok); } .cu-alv.neg { color:var(--bad); } .cu-alv.zero { color:var(--faint); } .cu-arc { padding:7px 10px 8px; min-width:0; } .cu-arc .actrow form { display:contents; } .cu-form { display:flex; flex-wrap:wrap; gap:7px 10px; align-items:flex-end; } .cu-form .fld > span:first-child { white-space:nowrap; } .cu-form .fld.grow { flex:1 1 260px; max-width:560px; } .cu-form .fld.grow input { width:100%; } .cu-form .w8 { width:8.5rem; } .cu-w-login { width:13rem; } .cu-w-email { width:17rem; } .cu-w-ref { width:12rem; } .cu-flh { font-weight:400; color:var(--faint); } .cu-ahint { margin-top:6px; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } .cu-ahint b { color:var(--text); font-weight:600; } .cu-ahint code { font-size:var(--fs-xs); } /* a choice of a form: the joined track of the filters, with real radios */ .cu-rseg { height:28px; align-items:center; } .cu-rseg .cu-r { cursor:pointer; position:relative; } .cu-rseg .cu-r input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } .cu-rseg .cu-r:has(input:checked) { background:var(--surface); color:var(--accent); box-shadow:var(--sh-1), 0 0 0 1px var(--accent-line); } .cu-rseg .cu-r:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:1px; } .cu-rseg .cu-r .fx-dot { margin-right:0; } /* a switch */ .cu-sw { display:inline-flex; align-items:center; gap:7px; height:28px; font-size:var(--fs-s); color:var(--text); cursor:pointer; white-space:nowrap; } .cu-sw input { appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:20px; background:var(--line-3); position:relative; margin:0; cursor:pointer; transition:background .12s; flex:0 0 32px; } .cu-sw input::after { content:''; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:var(--sh-1); transition:left .12s; } .cu-sw input:checked { background:var(--accent); } .cu-sw input:checked::after { left:16px; } .cu-sw input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .cu-big { font-family:var(--f-mono); font-size:var(--fs-m); font-weight:600; } .cu-big.pos { color:var(--ok); } .cu-big.neg { color:var(--bad); } .cu-big.zero { color:var(--muted); } .cu-refline { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:7px 11px; border-bottom:1px solid var(--line); font-size:var(--fs-s); } .cu-refline .sp { flex:1; } .cu-refline .k { color:var(--muted); font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .cu-refline .mono.k { text-transform:none; letter-spacing:0; font-weight:400; } .cu-subhead { padding:7px 11px 5px; border-top:1px solid var(--line); font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); } .cu-subhead .k { text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted); font-size:var(--fs-xs); } @media (min-width:2100px) { .cu-arow { grid-template-columns:140px minmax(0,1fr); } } @media (max-width:700px) { .cu-arow { grid-template-columns:minmax(0,1fr); } .cu-alab { border-right:0; border-bottom:1px solid var(--line); padding:6px 10px 5px; } .cu-alab .cu-alv { display:inline; margin:0 0 0 8px; } .cu-form .fld, .cu-form .fld.grow { flex:1 1 100%; max-width:none; } .cu-form .fld input, .cu-w-login, .cu-w-email, .cu-w-ref, .cu-form .w8 { width:100%; } .cu-rseg { height:auto; } .cu-page .phead .pacts { flex-wrap:wrap; } } /* ---- Tickets (владелец 2026-10-01, the prototype of the second round) ---- Three tiles, the filter header of the orders list, one line per ticket with the wait that must never be missed, a drawer of four zones with the conversation as bubbles and a quick reply. The bubbles are drawn with the kit's tokens only, so light and dark both hold. */ .tk-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .tk-hrow h1 { margin:0; } .phead .sub.tk-sub { max-width:1000px; margin-top:2px; } .tk-phead > div:first-child { flex:1 1 520px; min-width:0; } .tk-kpis .kpi { color:inherit; text-decoration:none; display:block; cursor:pointer; min-width:128px; transition:box-shadow .12s, border-color .12s; } .tk-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .tk-kpis .kpi.tk-amber { border-left-color:var(--amber); background:var(--amber-soft); border-color:var(--amber-line); } .tk-kpis .kpi.tk-amber b { color:var(--amber); } .tk-kpis .kpi.tk-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .tk-kpis .kpi b { font-variant-numeric:tabular-nums; } .tk-kpis .kpi .tk-kd { display:block; font-size:var(--fs-xs); font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); line-height:1.3; margin-top:1px; } .tk-kpis .kpi.alarm .tk-kd { color:var(--bad); } /* the filter header: the customer the list is narrowed to */ .tk-cname { font-size:var(--fs-s); color:var(--muted); white-space:nowrap; } .tk-cname b { color:var(--ink); font-weight:600; } .fx.v1 .fx-lh.tk-lh-us { background-image:linear-gradient(var(--accent-soft), var(--accent-soft)); } /* the list. The kit's `table.grid thead th {top:50px}` outweighs its own `tr.chead th {top:71px}`; the id puts the two rows of the head back. */ #tk-grid thead tr.ghead th { top:50px; } #tk-grid thead tr.chead th { top:71px; } #tk-grid tr.ghead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.1em; } #tk-grid tr.chead th { color:var(--muted); } #tk-grid tr.ghead th.tk-g-wait { color:var(--amber); } #tk-grid tr.ghead th.tk-g-talk { color:var(--accent); } #tk-grid tr.ghead th.tk-g-cus { color:var(--z-cus); } #tk-grid th.right { text-align:right; } tr.r > td.tk-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } col.tk-w-exp { width:1.4%; } col.tk-w-id { width:7.6%; } col.tk-w-wait { width:7%; } col.tk-w-talk { width:29.2%; } col.tk-w-cus { width:17.5%; } col.tk-w-ord { width:11%; } col.tk-w-st { width:8.8%; } col.tk-w-act { width:17.5%; } @media (min-width:2100px) { col.tk-w-exp { width:1.2%; } col.tk-w-id { width:6.4%; } col.tk-w-wait { width:5.8%; } col.tk-w-talk { width:37.8%; } col.tk-w-cus { width:17%; } col.tk-w-ord { width:11%; } col.tk-w-st { width:8.3%; } col.tk-w-act { width:12.5%; } } .tk-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .tk-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .tk-legend i.bad { background:var(--bad); } .tk-legend i.amber { background:var(--amber); } .tk-legend i.us { background:var(--accent); } .tbar .tk-total { font-size:var(--fs-s); color:var(--muted); } .tbar .tk-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .tk-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .tk-c-id .l1 { display:flex; align-items:center; gap:0; } .tk-c-id a.tk-id { font-family:var(--f-mono); font-weight:500; font-size:var(--fs); letter-spacing:.01em; margin-right:6px; } .tk-c-id .l2 .tk-pc { color:var(--muted); } /* the wait: the one figure of the line that must never be missed */ .tk-wait { display:block; font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:var(--fs-m); line-height:1.25; white-space:nowrap; font-weight:500; } .tk-wait.amber { color:var(--amber); font-weight:600; } .tk-wait.red { color:var(--bad); font-weight:700; } .l2.tk-late { color:var(--bad); font-weight:600; } .tk-nowait { color:var(--faint); font-size:var(--fs-s); } .tk-c-talk .l1 a.tk-subj { color:var(--ink); font-weight:600; } .tk-c-talk .l1 a.tk-subj:hover { color:var(--accent); } .tk-c-talk .l2.tk-last { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; color:var(--text); } .tk-who { font-weight:700; color:var(--ink); } .tk-who.us { color:var(--accent); } .tk-arr { color:var(--faint); font-weight:700; margin-right:2px; } .tk-arr.us { color:var(--accent); } .tk-c-cus .l1 a { font-weight:600; color:var(--ink); } .tk-c-cus .l1 a:hover { color:var(--accent); } .tk-c-cus .l1 .k { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); margin-left:5px; } .tk-c-cus .l2 b { color:var(--text); font-weight:600; } .tk-c-cus .l2 .tk-cc { font-family:var(--f-mono); color:var(--text); } .tk-c-ord .l1 { display:flex; align-items:center; gap:2px 8px; flex-wrap:nowrap; } .tk-oid { display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:var(--fs-s); white-space:nowrap; } .tk-oid .sdot { box-shadow:none; } .tk-omore { font-size:var(--fs-micro); font-weight:700; color:var(--z-del); background:var(--z-del-soft); border:1px solid var(--z-del-line); border-radius:20px; padding:0 5px; font-family:var(--f-body); } .tk-c-ord .word.ok { color:var(--ok); } .tk-c-ord .word.run { color:var(--run); } .tk-c-ord .word.amber { color:var(--amber); font-weight:700; } .tk-c-ord .word.bad { color:var(--bad); font-weight:700; } .tk-c-ord .word.off { color:var(--muted); } .tk-none { color:var(--faint); font-size:var(--fs-s); } .tk-c-st .stline { flex-wrap:wrap; row-gap:2px; } .tk-say { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; text-align:right; white-space:normal; margin-top:3px; } .tk-nothing { padding:14px 11px !important; } tbody.orow.tk-gone > tr.r > td { color:var(--muted); } tbody.orow.tk-gone > tr.r .tk-subj { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-3); } /* the drawer: its own panel under the line, four named zones */ .tk-drawer .dtitle .tk-dsub { font-size:var(--fs-s); color:var(--text); } .tk-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .tk-dgrid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } } @media (min-width:2100px) { .tk-dgrid { grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr); gap:12px; } } .tk-dcol { display:grid; gap:10px; align-content:start; min-width:0; } @media (min-width:2100px) { .tk-dcol.tk-right { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .tk-dcol.tk-right > .tk-z-ord { grid-column:1 / -1; } } .zone.tk-z-talk { border-left:2px solid var(--accent); } .zone.tk-z-talk > h4 { color:var(--accent); background:var(--accent-soft); border-bottom-color:var(--accent-line); } .zone.tk-z-tick { border-left:2px solid var(--z-ord); } .zone.tk-z-tick > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.tk-z-cus { border-left:2px solid var(--z-cus); } .zone.tk-z-cus > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.tk-z-ord { border-left:2px solid var(--z-del); } .zone.tk-z-ord > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone > h4 .tk-zlink { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; } .tk-drawer .fields { gap:7px 16px; } .tk-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .tk-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .tk-drawer .f .v .k2 { color:var(--muted); } .tk-drawer .actgrid { align-items:center; } .tk-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); } .tk-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .tk-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .tk-earlier { display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted); margin:0 0 7px; } .tk-earlier::after { content:''; flex:1; border-top:1px dashed var(--line-2); } .tk-earlier a { font-weight:600; } /* the conversation: the customer on the left, us on the right */ .tk-thread { display:flex; flex-direction:column; gap:7px; } .tk-msg { display:flex; min-width:0; } .tk-msg.us { justify-content:flex-end; } .tk-bub { max-width:min(80%, 820px); min-width:0; border:1px solid var(--line-2); border-radius:11px; background:var(--surface-2); padding:6px 10px 8px; box-shadow:var(--sh-1); } .tk-msg.them .tk-bub { border-top-left-radius:3px; } .tk-msg.us .tk-bub { background:var(--accent-soft); border-color:var(--accent-line); border-top-right-radius:3px; } .tk-mh { display:flex; align-items:baseline; gap:4px 8px; flex-wrap:wrap; margin-bottom:2px; } .tk-mh b { font-size:var(--fs-s); color:var(--ink); font-weight:700; } .tk-msg.us .tk-mh b { color:var(--accent); } .tk-role { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .tk-mt { font-size:var(--fs-xs); color:var(--muted); } .tk-ip { font-size:var(--fs-xs); color:var(--muted); } .tk-mx { font-size:var(--fs); color:var(--text); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .tk-mx.clamp { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; } .tk-more { font-size:var(--fs-xs); color:var(--muted); font-style:italic; margin-top:2px; } .tk-pic { display:inline-flex; flex-direction:column; align-items:stretch; margin-top:6px; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--surface); max-width:100%; text-decoration:none; } .tk-pic:hover { border-color:var(--accent); text-decoration:none; box-shadow:var(--ring); } .tk-pic img { display:block; height:150px; width:auto; max-width:100%; object-fit:cover; } .tk-pic.sm img { height:128px; } .tk-pic span { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:2px 7px; border-top:1px solid var(--line); background:var(--surface-2); } .tk-day { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-xs); font-weight:600; margin:3px 0; } .tk-day::before, .tk-day::after { content:''; flex:1; border-top:1px solid var(--line); } .tk-trim { background:var(--amber-soft); border:1px solid var(--amber-line); color:var(--amber); border-radius:var(--r); padding:5px 10px; font-size:var(--fs-s); font-weight:600; margin-bottom:8px; } /* the reply: canned texts, the box, a picture, the two buttons */ .tk-reply { display:grid; gap:7px; } .tk-canned { display:flex; flex-wrap:wrap; align-items:center; gap:5px 6px; } .tk-canned .tk-cl { font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-right:2px; } .tk-canned .btn { font-weight:600; } .tk-canned .tk-cedit { font-size:var(--fs-xs); margin-left:4px; } .tk-ta { width:100%; min-height:128px; resize:vertical; padding:7px 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs); line-height:1.5; display:block; } .tk-ta.sm { min-height:70px; } .tk-ta:focus, .tk-in:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .tk-ta.bad, .tk-in.bad { border-color:var(--bad-line); background:var(--bad-soft); } .tk-in { width:100%; height:30px; padding:0 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs); display:block; } .tk-file { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:var(--fs-xs); color:var(--muted); } .tk-file input[type="file"] { font:inherit; font-size:var(--fs-s); color:var(--text); max-width:100%; } .tk-rbar { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; } .tk-rbar .sp { flex:1; } .tk-err { color:var(--bad); font-weight:600; font-size:var(--fs-s); } .tk-count { font-size:var(--fs-xs); color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; } .tk-mailto { font-size:var(--fs-xs); color:var(--muted); } .tk-mailto b { color:var(--text); font-weight:600; } .tk-qr { border-top:1px dashed var(--line-2); margin-top:9px; padding-top:9px; } .tk-qr .tk-qh { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); } .tk-qr .tk-qh .hint { letter-spacing:0; text-transform:none; font-weight:400; } /* a picture over the page */ .tk-lb { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px; } .tk-lb-back { position:absolute; inset:0; background:color-mix(in srgb, var(--rail) 78%, transparent); } .tk-lb-fig { position:relative; margin:0; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-3); padding:10px; max-width:min(92vw, 760px); display:grid; gap:8px; } .tk-lb-fig img { max-height:78vh; max-width:100%; width:auto; display:block; margin:0 auto; border-radius:6px; border:1px solid var(--line); } .tk-lb-fig figcaption { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-s); color:var(--muted); } .tk-lb-fig .sp { flex:1; } table.grid.inner.tk-t td:first-child, table.grid.inner.tk-t th:first-child { padding-left:11px; } table.grid.inner.tk-t td:last-child, table.grid.inner.tk-t th:last-child { padding-right:11px; } table.grid.inner.tk-t td.mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner.tk-t th.num { text-align:right; } table.grid.inner.tk-t td .sub { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.tk-t td .sub a { color:var(--accent); } table.grid.inner.tk-t a.tk-mono, .tk-mono { font-family:var(--f-mono); font-weight:500; } table.grid.inner.tk-t td.tk-bar { min-width:96px; } table.grid.inner.tk-t td.tk-bar .bar { height:5px; margin-top:3px; } @media (max-width:700px) { .tk-bub { max-width:92%; } } @media (max-width:560px) { .tk-kpis { flex-wrap:wrap; } .tk-kpis .kpi { flex:1 1 30%; min-width:0; } .tk-legend { display:none; } table.grid.tk-grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 10px; padding:9px 34px 10px 11px; height:auto; } table.grid.tk-grid td.tk-c-id { order:1; flex:1 1 auto; } table.grid.tk-grid td.tk-c-st { order:2; flex:0 0 auto; margin-left:auto; text-align:right; } table.grid.tk-grid td.tk-c-st .stline { justify-content:flex-end; } table.grid.tk-grid td.tk-c-wait { order:3; flex:1 1 100%; } table.grid.tk-grid td.tk-c-wait .l2 { display:inline; margin-left:6px; } table.grid.tk-grid td.tk-c-talk { order:4; flex:1 1 100%; } table.grid.tk-grid td.tk-c-cus { order:5; flex:1 1 100%; } table.grid.tk-grid td.tk-c-ord { order:6; flex:1 1 100%; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } table.grid.tk-grid td.c-act { order:7; flex:1 1 100%; } table.grid.tk-grid .acts { justify-content:flex-start; flex-wrap:wrap; } .tk-c-talk .l1, .tk-c-cus .l2 { white-space:normal; } .tk-bub { max-width:94%; } .tk-pic img { height:120px; } .tk-dgrid { gap:9px; } } /* ---- The ticket page, the new ticket, the canned replies (2026-10-01) ---- As the owner approved them in the second round: the actions first, the conversation by days with the reply under it, the facts and tables on the right; the new ticket's orders as lines with a tick; the replies with their order, their notes and the menu as it will look. */ .tk-page .cgrid > .panel + .panel, .tk-page .tk-stack > .panel + .panel, .tk-page .tk-cols .panel + .panel { margin-top:0; } .tk-cols { display:grid; gap:9px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1100px) { .tk-cols { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } } @media (min-width:2100px) { .tk-cols { grid-template-columns:minmax(0,1.2fr) minmax(0,1.55fr); } } .tk-main, .tk-stack { display:grid; gap:9px; align-content:start; min-width:0; } .tk-side { display:grid; gap:9px; align-content:start; min-width:0; grid-template-columns:minmax(0,1fr); } @media (min-width:2100px) { .tk-side { grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:start; } } .panel.tk-acts-panel { border-left:3px solid var(--accent); } .tk-acts-panel .pbd { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; } .tk-acts-panel .hint { font-size:var(--fs-xs); } .tk-notice { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; background:var(--run-soft); border:1px solid var(--run-line); color:var(--run); border-radius:var(--r); padding:6px 11px; font-size:var(--fs-s); margin-bottom:9px; } .tk-notice b { font-weight:700; } .tk-notice span { color:var(--text); } .pt .tk-cnt, .tk-cnt { font-size:var(--fs-micro); font-weight:700; letter-spacing:0; text-transform:none; line-height:16px; padding:0 6px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); color:var(--muted); } .pt.tk-pt-talk { background-image:linear-gradient(var(--accent-soft), var(--accent-soft)); } .pt.tk-pt-talk b { color:var(--accent); } .pt.tk-pt-cus { background-image:linear-gradient(var(--z-cus-soft), var(--z-cus-soft)); } .pt.tk-pt-cus b { color:var(--z-cus); } .pt.tk-pt-tick { background-image:linear-gradient(var(--z-ord-soft), var(--z-ord-soft)); } .pt.tk-pt-tick b { color:var(--z-ord); } .pt .tk-ptlink { font-size:var(--fs-xs); font-weight:600; } .tk-talk .pbd { padding:10px 12px 12px; } .tk-subject { font-size:var(--fs-m); color:var(--ink); font-weight:600; margin:1px 0 1px; overflow-wrap:anywhere; } .facts dd b.bad-text { color:var(--bad); font-weight:700; } .facts dd b.amber-text { color:var(--amber); } .phead .marks.tk-marks { margin-top:4px; } .tk-flabel { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-bottom:3px; } .tk-flabel .hint { font-weight:400; } .tk-newgrid { display:grid; gap:9px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1100px) { .tk-newgrid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); } } @media (min-width:2100px) { .tk-newgrid { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); max-width:2100px; } } .tk-newgrid > .panel + .panel, .tk-newgrid .tk-stack > .panel + .panel { margin-top:0; } .tk-form { display:grid; gap:11px; } table.grid.inner.tk-pick td { vertical-align:middle; } table.grid.inner.tk-pick tbody tr { cursor:pointer; } table.grid.inner.tk-pick tbody tr.on td { background:var(--accent-soft); } table.grid.inner.tk-pick td.tk-cb { width:1%; } table.grid.inner.tk-pick input[type="checkbox"] { width:15px; height:15px; margin:0; accent-color:var(--accent); vertical-align:middle; } .tk-pickbar { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); border-radius:0 0 var(--r) var(--r); } .tk-pickbox { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .tk-pickbox .tk-flabel { padding:6px 11px 0; } .tk-rwrap { max-width:1500px; } @media (min-width:2100px) { .tk-rwrap { max-width:2000px; } } .tk-rgrid { display:grid; gap:9px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1300px) { .tk-rgrid { grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); } } .tk-rgrid > .panel + .panel { margin-top:0; } table.grid.inner.tk-rt td { vertical-align:top; } table.grid.inner.tk-rt td.tk-rn { width:1%; white-space:nowrap; font-family:var(--f-mono); color:var(--muted); padding-top:9px; text-align:left; } table.grid.inner.tk-rt td.tk-rtitle { width:24%; } table.grid.inner.tk-rt td.tk-rmv { width:1%; white-space:nowrap; text-align:right; } table.grid.inner.tk-rt .tk-rmv .btn { display:inline-block; margin-left:3px; } table.grid.inner.tk-rt .tk-ta { min-height:96px; } .tk-rnote { margin-top:6px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .tk-rnote b { color:var(--z-del); font-weight:700; } .tk-rnote.warn { color:var(--amber); } .tk-rstate { font-size:var(--fs-xs); color:var(--faint); margin-top:4px; } .tk-rstate.drop { color:var(--amber); font-weight:600; } .tk-rstate[hidden], .tk-rnote[hidden], .tk-prevtext[hidden] { display:none; } .tk-savebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 11px; border-top:1px solid var(--line); } .tk-dirty { font-size:var(--fs-s); color:var(--amber); font-weight:600; } .tk-clean { font-size:var(--fs-s); color:var(--faint); } .tk-menuprev { display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; padding:9px 11px; } .tk-menuprev .tk-cl { font-size:var(--fs-xs); font-weight:600; color:var(--muted); } .tk-prevtext { margin:0 11px 11px; padding:7px 10px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:var(--r); font-size:var(--fs-s); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; } @media (min-width:2100px) { .tk-page .tk-pic img { height:170px; } } @media (max-width:560px) { table.grid.inner.tk-t td.mn { text-align:left; } table.grid.inner.tk-t tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px 12px; align-items:start; padding:6px 10px; border-top:1px solid var(--line); } table.grid.inner.tk-t tbody tr:first-child { border-top:0; } table.grid.inner.tk-t tbody td { border-top:0 !important; padding:1px 0 !important; } table.grid.inner.tk-t tbody tr > td[colspan] { grid-column:1 / -1; } table.grid.inner.tk-pick tbody tr { grid-template-columns:22px repeat(2, minmax(0,1fr)); } table.grid.inner.tk-pick td.tk-cb { grid-row:1 / span 3; padding-top:2px !important; } table.grid.inner.tk-rt td.tk-rtitle, table.grid.inner.tk-rt td.tk-rn, table.grid.inner.tk-rt td.tk-rmv { width:auto; text-align:left; } } /* ---- Balance movements (2026-10-01) --------------------------------------- As the owner approved the screen in the second round: four tiles, the money of the filter by kind beside what the balances hold now, the filter header of the orders list, one line per entry with the money in and out and the balance chain. */ .phead .sub.bm-sub { max-width:1120px; margin-top:2px; } .bm-kpis .kpi { color:inherit; text-decoration:none; display:block; cursor:pointer; transition:box-shadow .12s, border-color .12s; } .bm-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .bm-kpis .kpi span { color:var(--muted); } .bm-kpis .kpi.alarm span { color:var(--bad); } .bm-kpis .kpi.bm-amber { border-left-color:var(--amber); } .bm-kpis .kpi.bm-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .bm-top { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:start; margin-bottom:9px; } .bm-top > .panel + .panel { margin-top:0; } @media (min-width:1500px) { .bm-top { grid-template-columns:minmax(0,1fr) minmax(320px,400px); } } @media (min-width:2100px) { .bm-top { grid-template-columns:minmax(0,1fr) minmax(380px,470px); } } .bm-top .pt b { color:var(--muted); } .bm-top .pt.bm-pt-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .bm-top .pt.bm-pt-pan b { color:var(--z-pan); } .bm-top .pt .hint b { color:var(--ink); font-weight:600; } table.grid.inner.bm-tt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; text-align:right; } table.grid.inner.bm-tt thead th:first-child { text-align:left; } table.grid.inner.bm-tt thead th .bm-kp { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--text); border-bottom:1px dashed var(--line-3); } table.grid.inner.bm-tt thead th .bm-kp:hover { color:var(--accent); border-bottom-color:var(--accent); text-decoration:none; } table.grid.inner.bm-tt thead th.bm-all { color:var(--ink); } table.grid.inner.bm-tt tbody td { text-align:right; white-space:nowrap; font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; color:var(--text); } table.grid.inner.bm-tt tbody td.lab { text-align:left; font-family:var(--f-body); font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } table.grid.inner.bm-tt td.bm-all, table.grid.inner.bm-tt th.bm-all { background:var(--surface-2); border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); } table.grid.inner.bm-tt td.bm-all { font-weight:600; color:var(--ink); } table.grid.inner.bm-tt td.nil { color:var(--faint); } .bm-cap { display:flex; flex-wrap:wrap; gap:4px 14px; padding:6px 11px 7px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); line-height:1.45; } .bm-cap b { color:var(--ink); font-weight:600; font-family:var(--f-mono); } .bm-in { color:var(--ok); } .bm-out { color:var(--bad); } .bm-pos { color:var(--ok); } .bm-negv { color:var(--bad); } .bm-now .facts { padding:0 11px 4px; } .bm-now .facts dt { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .bm-now .facts dd b { font-family:var(--f-mono); font-weight:600; } .bm-now .facts dd .k { font-size:var(--fs-xs); } .bm-now .facts dd a.bm-negv b { color:var(--bad); } #bm-grid thead tr.ghead th { top:50px; font-size:var(--fs-micro); color:var(--muted); } #bm-grid thead tr.chead th { top:71px; color:var(--muted); } #bm-grid thead tr.ghead th.bm-gcus { color:var(--z-cus); } #bm-grid thead tr.chead th.right { text-align:right; } #bm-grid thead tr.chead th .dot { color:var(--faint); } @media (min-width:561px) { #bm-grid tbody.orow > tr.r { height:47px; } } @media (min-width:2100px) { #bm-grid tbody.orow > tr.r { height:50px; } } col.bm-w-exp { width:1.4%; } col.bm-w-when { width:7%; } col.bm-w-cus { width:15.5%; } col.bm-w-kind { width:11.4%; } col.bm-w-ref { width:30.6%; } col.bm-w-in { width:7.2%; } col.bm-w-out { width:7.2%; } col.bm-w-after { width:9.7%; } col.bm-w-by { width:10%; } tr.r > td.bm-t-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } tr.r > td.bm-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .bm-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .bm-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .bm-legend i.bad { background:var(--bad); } .bm-legend i.amber { background:var(--amber); } .bm-legend .bm-in, .bm-legend .bm-out { font-family:var(--f-mono); font-weight:600; } .tbar .bm-total { font-size:var(--fs-s); color:var(--muted); } .tbar .bm-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .bm-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .bm-strip { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; padding:6px 11px; border-bottom:1px solid var(--line); background:var(--accent-soft); font-size:var(--fs-s); color:var(--text); } .bm-strip b { color:var(--ink); } .bm-strip .k { color:var(--muted); } .bm-strip .mono { font-family:var(--f-mono); } .bm-strip.bm-miss { background:var(--bad-soft); color:var(--bad); } .bm-nothing { padding:14px 11px !important; } .bm-c-when .l1 { font-variant-numeric:tabular-nums; } .bm-c-when .l2 { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } .bm-c-cus .l1 { display:flex; align-items:center; gap:5px; } .bm-c-cus .l1 a.bm-login { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .bm-c-cus .l1 a.bm-login:hover { color:var(--accent); } .bm-c-cus .l1 .k { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); flex:0 0 auto; } .bm-c-cus .l1 .pill { flex:0 0 auto; } .bm-c-cus .l2 .mono { font-size:var(--fs-xs); } .bm-find { flex:0 0 auto; width:19px; height:19px; border-radius:5px; display:inline-grid; place-items:center; padding:0; color:var(--faint); border:1px solid transparent; background:transparent; cursor:pointer; vertical-align:middle; } .bm-find svg { width:12px; height:12px; } .bm-find:hover, tbody.orow:hover .bm-find { color:var(--accent); border-color:var(--line); background:var(--surface); } .bm-find:hover { background:var(--accent-soft); border-color:var(--accent-line); } .bm-c-kind .l1 { display:flex; flex-wrap:wrap; align-items:center; gap:2px 5px; } .bm-kw { color:var(--ink); font-weight:600; white-space:nowrap; } .bm-c-ref .l1 a.bm-o, .bm-c-ref .l1 a.bm-p, .bm-c-ref .l2 a.bm-o { font-family:var(--f-mono); font-size:.94em; } .bm-c-ref .l1 .k, .bm-c-ref .l2 .k { color:var(--muted); } .bm-said { color:var(--ink); font-weight:600; } .bm-note { font-style:italic; color:var(--text); } .bm-more { font-size:var(--fs-micro); font-weight:700; color:var(--z-del); background:var(--z-del-soft); border:1px solid var(--z-del-line); border-radius:20px; padding:0 5px; margin-left:4px; font-family:var(--f-body); } .bm-c-in .l1, .bm-c-out .l1, .bm-c-after .l1, .bm-c-after .l2 { text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .bm-c-in .l1, .bm-c-out .l1 { font-weight:500; } .bm-c-after .l1 { color:var(--ink); font-weight:600; } .bm-c-after .l2 { font-size:var(--fs-xs); color:var(--muted); } .bm-c-after .l1.bm-neg { color:var(--bad); } .bm-brk { color:var(--bad) !important; font-weight:700; } .bm-c-by .l1 { color:var(--muted); } .bm-c-by .l1.bm-old { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } .bm-op { display:inline-flex; align-items:center; gap:4px; color:var(--ink); font-weight:700; } .bm-op svg { width:13px; height:13px; color:var(--amber); } .bm-vsep { width:1px; align-self:stretch; background:var(--line-2); margin:0 3px; } .fx-c.bm-but { border-style:dashed; } .fx-c.bm-but.on.pick { border-style:solid; } @media (max-width:560px) { .bm-kpis { flex-wrap:wrap; } .bm-kpis .kpi { flex:1 1 40%; } .bm-legend { display:none; } table.grid.inner.bm-tt { display:table; width:100%; } table.grid.inner.bm-tt thead { display:table-header-group; } table.grid.inner.bm-tt tbody { display:table-row-group; } table.grid.inner.bm-tt tr { display:table-row; padding:0; } table.grid.inner.bm-tt td, table.grid.inner.bm-tt th { display:table-cell; width:auto; } table.grid.inner.bm-tt .bm-k { display:none; } table.grid.inner.bm-tt td.lab { width:40%; } #bm-grid tbody.orow > tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 10px; padding:9px 36px 10px 11px; height:auto; } #bm-grid td.bm-c-when { order:1; flex:1 1 auto; } #bm-grid td.bm-c-in, #bm-grid td.bm-c-out { order:2; flex:0 0 auto; margin-left:auto; } #bm-grid td.bm-empty { display:none; } #bm-grid td.bm-c-after { order:3; flex:0 0 auto; } #bm-grid td.bm-c-kind { order:4; flex:1 1 45%; } #bm-grid td.bm-c-by { order:5; flex:0 0 auto; margin-left:auto; text-align:right; } #bm-grid td.bm-c-cus { order:6; flex:1 1 100%; } #bm-grid td.bm-c-ref { order:7; flex:1 1 100%; margin-top:2px; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } #bm-grid .bm-c-in .l1, #bm-grid .bm-c-out .l1 { font-size:var(--fs-m); } } /* the opened line of Balance movements: the entry and the customer on the left, the ledger around it and what it points to on the right */ .bm-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .bm-dgrid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); } } @media (min-width:1560px) { .bm-dgrid { grid-template-columns:minmax(0,4fr) minmax(0,7fr); } } @media (min-width:2100px) { .bm-dgrid { gap:12px; } } .bm-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .zone.bm-z-ent { border-left:2px solid var(--z-ord); } .zone.bm-z-ent > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.bm-z-cus { border-left:2px solid var(--z-cus); } .zone.bm-z-cus > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.bm-z-led { border-left:2px solid var(--z-pan); } .zone.bm-z-led > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.bm-z-pt { border-left:2px solid var(--z-del); } .zone.bm-z-pt > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .bm-drawer .fields { gap:7px 16px; } .bm-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .bm-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .bm-drawer .f .v .mono { font-size:var(--fs-xs); } .bm-drawer .errbox { margin:0 0 8px; } .bm-drawer .actgrid { align-items:center; } .bm-drawer .mut { color:var(--muted); } .bm-quiet { font-size:var(--fs-xs); color:var(--muted); font-style:italic; } .bm-quiet.bm-qgap { margin-bottom:6px; } .bm-zfoot { display:flex; gap:5px 12px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .bm-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .bm-zfoot .sp { flex:1; } .bm-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); line-height:1.5; } table.grid.inner.bm-t thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } table.grid.inner.bm-t td:first-child, table.grid.inner.bm-t th:first-child { padding-left:11px; } table.grid.inner.bm-t td:last-child, table.grid.inner.bm-t th:last-child { padding-right:11px; } table.grid.inner.bm-t td.mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner.bm-t th.num { text-align:right; } table.grid.inner.bm-t td .sub { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.bm-t .mono { font-family:var(--f-mono); font-size:var(--fs-xs); } table.grid.inner.bm-t tr.bm-cur td { background:var(--accent-soft); } table.grid.inner.bm-t tr.bm-cur td:first-child { box-shadow:inset 3px 0 0 var(--accent); } table.grid.inner.bm-t tr.bm-cur td.mn.aft { color:var(--ink); font-weight:700; } table.grid.inner.bm-t tr.bm-rbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.bm-t tr.bm-ramber td:first-child { box-shadow:inset 3px 0 0 var(--amber); } table.grid.inner.bm-t tr.bm-rok td:first-child { box-shadow:inset 2px 0 0 var(--ok); } table.grid.inner.bm-t td.bm-chk { white-space:nowrap; font-size:var(--fs-xs); } table.grid.inner.bm-t th.bm-min, table.grid.inner.bm-t td.bm-min { width:1%; white-space:nowrap; } table.grid.inner.bm-t a.bm-o { font-family:var(--f-mono); font-weight:500; } .bm-ok { color:var(--ok); font-weight:700; } .bm-bad { color:var(--bad); font-weight:700; } .bm-gap td { text-align:center; font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); } .bm-gap .btn { margin:0 4px; } .bm-formh { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; } .bm-formh .hint { text-transform:none; letter-spacing:0; font-weight:400; } .bm-say { font-size:var(--fs-s); font-weight:600; border-radius:var(--r); padding:5px 9px; margin:0 0 8px; } .bm-say.ok { color:var(--ok); background:var(--ok-soft); border:1px solid var(--ok-line); } .bm-say.bad { color:var(--bad); background:var(--bad-soft); border:1px solid var(--bad-line); } .bm-form { display:grid; gap:8px 12px; grid-template-columns:minmax(120px,160px) minmax(0,1fr); align-items:end; } .bm-form .full { grid-column:1 / -1; } .bm-form .fld > span:first-child { font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); } .bm-form .fld > span:first-child .note { font-weight:400; color:var(--faint); } .bm-form .fld input { width:100%; background:var(--surface); } .bm-form .fld input.bm-amt { font-family:var(--f-mono); text-align:right; } .bm-form .inrow { display:flex; align-items:center; gap:10px; } .bm-form .check { font-size:var(--fs-s); display:inline-flex; align-items:center; gap:5px; } @media (max-width:560px) { table.grid.inner.bm-t tr { padding:6px 10px; border-top:1px solid var(--line); } table.grid.inner.bm-t tbody tr:first-child { border-top:0; } table.grid.inner.bm-t tbody td { border-top:0 !important; padding:1px 0 !important; } table.grid.inner.bm-t td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.bm-t td.mn { text-align:left; } table.grid.inner.bm-t tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; } table.grid.inner.bm-t tbody td.wide { grid-column:1 / -1; } table.grid.inner.bm-t tr.bm-cur { border-left:3px solid var(--accent); background:var(--accent-soft); } table.grid.inner.bm-t tr.bm-cur td { background:transparent; } table.grid.inner.bm-t tr.bm-rbad { border-left:3px solid var(--bad); } table.grid.inner.bm-t tr.bm-ramber { border-left:3px solid var(--amber); } table.grid.inner.bm-t tr td:first-child { box-shadow:none !important; } table.grid.inner.bm-t td.nw { white-space:normal; } .bm-gap td { grid-column:1 / -1; text-align:left; } .bm-form { grid-template-columns:minmax(0,1fr); } } /* ---- Referrals (2026-10-01) ------------------------------------------------ As the owner approved the screen in the second round: five tiles, the rewards and invitations of every period beside the rules, the filter header over the inviters, the line and its drawer, the guard's journal. */ #rf-list, #rf-journal, #rf-jlist { scroll-margin-top:60px; } .rf-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .rf-hrow h1 { margin:0; } .phead .sub.rf-sub { max-width:860px; margin-top:2px; } @media (min-width:2100px) { .phead .sub.rf-sub {max-width:1100px; } } .rf-kpis .kpi { color:inherit; text-decoration:none; display:block; cursor:pointer; transition:box-shadow .12s, border-color .12s; } .rf-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .rf-kpis .kpi.rf-amber { border-left-color:var(--amber); } .rf-kpis .kpi.rf-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .rf-top { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:start; margin-bottom:9px; } .rf-top > .panel + .panel { margin-top:0; } @media (min-width:1500px) { .rf-top {grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); } } @media (min-width:2300px) { .rf-top {grid-template-columns:minmax(0,1220px) minmax(0,1fr); } } table.grid.inner.rf-nt th.gs, table.grid.inner.rf-nt td.gs { border-left:1px solid var(--line-2); } table.grid.inner.rf-nt thead tr.rf-hg th { height:20px; border-bottom:0; } table.grid.inner.rf-nt thead th.rf-gd { color:var(--z-del); } table.grid.inner.rf-nt thead th.rf-gp { color:var(--z-pan); } table.grid.inner.rf-nt thead th.rf-gb { color:var(--bad); } table.grid.inner.rf-nt td.rf-mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink); } table.grid.inner.rf-nt td.rf-mn.rf-z0 { color:var(--faint); } table.grid.inner.rf-nt td.rf-mn.rf-amb { color:var(--amber); } table.grid.inner.rf-nt td.rf-mn.rf-red { color:var(--bad); font-weight:600; } table.grid.inner.rf-nt td.rf-mn.rf-net { font-weight:600; } table.grid.inner.rf-nt td.rf-lab { white-space:nowrap; } table.grid.inner.rf-nt td.rf-lab b { color:var(--ink); font-weight:600; } table.grid.inner.rf-nt td.rf-lab .k { font-size:var(--fs-xs); color:var(--muted); margin-left:7px; } table.grid.inner.rf-nt tr.rf-cur td { background:var(--accent-soft); } table.grid.inner.rf-nt tr.rf-cur td:first-child { box-shadow:inset 3px 0 0 var(--accent); } table.grid.inner.rf-nt tr.rf-cur td.rf-lab b { color:var(--accent); } .rf-cap { display:flex; flex-wrap:wrap; gap:3px 14px; padding:5px 11px 6px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); line-height:1.45; } .rf-cap b { color:var(--ink); font-weight:600; } .rf-rules { padding:2px 11px 5px; } .rf-rules dt { min-width:92px; } .rf-rules dd b { color:var(--ink); font-weight:600; } .rf-code { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:0 4px; white-space:nowrap; } .pt .rf-plink { margin-left:auto; font-size:var(--fs-xs); font-weight:600; } #rf-grid thead tr.ghead th, #rf-jgrid thead tr.ghead th { top:50px; } #rf-grid thead tr.chead th, #rf-jgrid thead tr.chead th { top:71px; } tr.ghead th.rf-g-who { color:var(--z-cus); } tr.ghead th.rf-g-bad { color:var(--bad); } tr.chead th.right, tr.ghead th.right { text-align:right; } tr.r > td.rf-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } tr.r > td.rf-t-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .tbar .rf-total { font-size:var(--fs-s); color:var(--muted); } .tbar .rf-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .rf-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .rf-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; background:var(--bad); } .rf-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .rf-per a:hover { text-decoration:none; } a.rf-login { font-weight:600; color:var(--ink); } a.rf-login:hover { color:var(--accent); } .rf-id { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); margin-left:5px; font-variant-numeric:tabular-nums; font-weight:400; } .l1 .pill.rf-st { margin-left:6px; vertical-align:1px; } .l2.rf-hit, .l2.rf-hit .k { color:var(--accent); } .rf-num { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; } .rf-money { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; } .rf-money.rf-z0 { color:var(--faint); font-weight:400; } .rf-money.rf-neg { color:var(--bad); } .rf-new { display:inline-block; margin-left:6px; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; color:var(--ok); background:var(--ok-soft); border:1px solid var(--ok-line); border-radius:20px; padding:0 6px; line-height:16px; vertical-align:1px; } .rf-backt { color:var(--amber); font-weight:600; } .rf-none { color:var(--faint); } .rf-empty { padding:16px 12px !important; color:var(--muted); font-size:var(--fs-s); text-align:center; } .rf-c-grd .pill, .rf-j-why .pill { vertical-align:1px; } .rf-det { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; font-size:var(--fs-xs); line-height:1.35; color:var(--text); } @media (min-width:561px) { table.grid#rf-jgrid tr.r {height:48px; } } .rf-drawer .fields { gap:7px 16px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .rf-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .rf-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .rf-drawer .actgrid { align-items:center; } .drawer.rf-still { animation:none; } .rf-dg { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } .rf-dcol { display:grid; gap:10px; align-content:start; min-width:0; } @media (min-width:1000px) { .rf-dg {grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (min-width:2100px) { .rf-dg {grid-template-columns:minmax(0,.92fr) minmax(0,1.04fr) minmax(0,1.2fr); grid-template-areas:"who rew inv" "ref rew inv"; grid-template-rows:auto 1fr; } .rf-dcol {display:contents; } .rf-dg .rf-z-who {grid-area:who; } .rf-dg .rf-z-rew {grid-area:rew; } .rf-dg .rf-z-inv {grid-area:inv; } .rf-dg .rf-z-ref {grid-area:ref; } } .rf-jg { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .rf-jg {grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .rf-jg > .rf-z-oth {grid-column:1 / -1; } } @media (min-width:2100px) { .rf-jg {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.95fr); } .rf-jg > .rf-z-oth {grid-column:auto; } } .zone.rf-z-who, .zone.rf-z-two { border-left:2px solid var(--z-cus); } .zone.rf-z-who > h4, .zone.rf-z-two > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.rf-z-rew { border-left:2px solid var(--z-pan); } .zone.rf-z-rew > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.rf-z-inv { border-left:2px solid var(--z-del); } .zone.rf-z-inv > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.rf-z-ref, .zone.rf-z-why { border-left:2px solid var(--bad); } .zone.rf-z-ref > h4, .zone.rf-z-why > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .zone.rf-z-ref.rf-quiet { border-left-color:var(--off); } .zone.rf-z-ref.rf-quiet > h4 { color:var(--off); background:var(--off-soft); border-bottom-color:var(--off-line); } .zone.rf-z-oth { border-left:2px solid var(--z-ord); } .zone.rf-z-oth > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone > h4 .rf-io { font-family:var(--f-body); letter-spacing:0; text-transform:none; } .zone > h4 .rf-hl { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--accent); } .rf-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .rf-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .rf-zfoot .sp { flex:1; } .rf-zfoot a { font-weight:600; } .rf-znote { padding:5px 11px 6px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .rf-znote b { color:var(--ink); font-weight:600; } .rf-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); line-height:1.45; } table.grid.inner.rf-t { font-size:var(--fs-s); } table.grid.inner.rf-t tbody td { font-size:var(--fs-s); } table.grid.inner.rf-t td:first-child, table.grid.inner.rf-t th:first-child { padding-left:11px; } table.grid.inner.rf-t td:last-child, table.grid.inner.rf-t th:last-child { padding-right:11px; } table.grid.inner.rf-t td.rf-mn { font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink); } table.grid.inner.rf-t td .sub { font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.rf-t td.rf-mn .sub { font-family:var(--f-body); } table.grid.inner.rf-t .mono { font-family:var(--f-mono); font-size:var(--fs-xs); } table.grid.inner.rf-t tr.rf-rbad td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.rf-t tr.rf-ramber td:first-child { box-shadow:inset 2px 0 0 var(--amber); } table.grid.inner.rf-t tr.rf-rhit td { background:var(--accent-soft); } table.grid.inner.rf-t tr.rf-rcur td { background:var(--accent-soft); } table.grid.inner.rf-t tr.rf-rcur td:first-child { box-shadow:inset 3px 0 0 var(--accent); } table.grid.inner.rf-mini td.rf-lab { white-space:nowrap; color:var(--ink); font-weight:600; } table.grid.inner.rf-mini tbody tr + tr td { background:var(--surface-2); } .rf-plus { color:var(--ok); } .rf-minus { color:var(--bad); } .rf-detbox { margin:2px 0 0; padding:6px 9px; background:var(--well); border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-s); color:var(--ink); overflow-wrap:anywhere; line-height:1.45; } .rf-match { color:var(--bad); font-weight:700; background:var(--bad-soft); border:1px solid var(--bad-line); border-radius:4px; padding:0 4px; } table.grid.inner.rf-cmp td.rf-lab { color:var(--muted); font-size:var(--fs-xs); font-weight:700; white-space:nowrap; letter-spacing:.02em; } table.grid.inner.rf-cmp th:not(:first-child) { width:40%; } table.grid.inner.rf-cmp td { overflow-wrap:anywhere; } table.grid.inner.rf-chk td.rf-cn { width:1%; white-space:nowrap; color:var(--muted); font-family:var(--f-mono); } table.grid.inner.rf-chk td.rf-cr { width:1%; white-space:nowrap; } table.grid.inner.rf-chk tr.rf-chk-m td { background:var(--bad-soft); } table.grid.inner.rf-chk tr.rf-chk-m td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.rf-chk tr.rf-chk-s td { color:var(--faint); } @media (max-width:700px) { .rf-top {grid-template-columns:minmax(0,1fr); } } @media (max-width:560px) { .rf-kpis {flex-wrap:wrap; } .rf-kpis .kpi {flex:1 1 30%; } .rf-legend {display:none; } #rf-grid tr.r, #rf-jgrid tr.r {display:flex; flex-wrap:wrap; } #rf-grid td.rf-c-who {order:1; flex:1 1 55%; } #rf-grid td.rf-c-grd {order:2; flex:0 0 auto; margin-left:auto; text-align:right; } #rf-grid td.rf-c-site {display:none; } #rf-grid td.rf-c-inv {order:3; flex:1 1 45%; } #rf-grid td.rf-c-per {order:4; flex:1 1 45%; } #rf-grid td.rf-c-all {order:5; flex:1 1 45%; } #rf-grid td.rf-c-last {order:6; flex:1 1 45%; } #rf-grid td.c-act, #rf-jgrid td.c-act {order:9; flex:1 1 100%; } #rf-jgrid td.rf-j-when {order:1; flex:1 1 auto; } #rf-jgrid td.rf-j-why {order:2; flex:0 0 auto; margin-left:auto; text-align:right; } #rf-jgrid td.rf-j-inv {order:3; flex:1 1 45%; } #rf-jgrid td.rf-j-pay {order:4; flex:1 1 45%; } #rf-jgrid td.rf-j-pm {order:5; flex:1 1 45%; } #rf-jgrid td.rf-j-amt {order:6; flex:1 1 45%; } #rf-jgrid td.rf-j-det {order:7; flex:1 1 100%; } .rf-page table.grid.inner tr {padding:6px 10px; border-top:1px solid var(--line); } .rf-page table.grid.inner tbody tr:first-child {border-top:0; } .rf-page table.grid.inner tbody td {border-top:0 !important; padding:1px 0 !important; } .rf-page table.grid.inner td.rf-mn {text-align:left; } table.grid.inner.rf-t tr.rf-rbad, table.grid.inner.rf-t tr.rf-ramber {border-left:3px solid var(--line-2); } table.grid.inner.rf-t tr.rf-rbad {border-left-color:var(--bad); } table.grid.inner.rf-t tr.rf-ramber {border-left-color:var(--amber); } table.grid.inner.rf-t tr td:first-child, table.grid.inner.rf-chk tr td:first-child {box-shadow:none !important; padding-left:0 !important; } table.grid.inner.rf-nt tbody tr, table.grid.inner.rf-mini tbody tr {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; } table.grid.inner.rf-nt tbody td.rf-lab, table.grid.inner.rf-mini tbody td.rf-lab {grid-column:1 / -1; } table.grid.inner.rf-nt td.rf-mn, table.grid.inner.rf-t td.rf-mn {text-align:left; } table.grid.inner.rf-nt td.gs {border-left:0; } table.grid.inner.rf-nt tr.rf-cur {background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); } table.grid.inner.rf-nt tr.rf-cur td, table.grid.inner.rf-nt tr.rf-cur td:first-child {background:transparent; box-shadow:none; } table.grid.inner.rf-chk tbody tr {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; align-items:start; } table.grid.inner.rf-chk td.rf-cn {display:none; } table.grid.inner.rf-chk td[data-l]::before {display:none; } table.grid.inner.rf-chk tr.rf-chk-m {background:var(--bad-soft); border-left:3px solid var(--bad); } table.grid.inner.rf-chk tr.rf-chk-m td, table.grid.inner.rf-chk tr.rf-chk-m td:first-child {background:transparent; box-shadow:none; } table.grid.inner.rf-cmp tbody tr {display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 10px; } table.grid.inner.rf-cmp tbody td.rf-lab {grid-column:1 / -1; } table.grid.inner.rf-cmp tbody td.rf-span {grid-column:1 / -1; } .rf-dg, .rf-jg {gap:9px; } .zone > h4 .rf-io {margin-left:0; } .rf-drawer .fields {grid-template-columns:repeat(2, minmax(0,1fr)); } table.grid.inner.rf-invt tbody tr {display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px 10px; } table.grid.inner.rf-invt tbody td:first-child {grid-column:1 / -1; } table.grid.inner.rf-ents tbody tr {display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 10px; } } col.rf-w-exp { width:1.6%; } col.rf-w-who { width:19.4%; } col.rf-w-site { width:7.4%; } col.rf-w-inv { width:12.6%; } col.rf-w-per { width:11%; } col.rf-w-all { width:13.4%; } col.rf-w-last { width:12.6%; } col.rf-w-grd { width:13.6%; } col.rf-w-act { width:8.4%; } col.rf-w-jwhen { width:7.6%; } col.rf-w-jwhy { width:13.6%; } col.rf-w-jinv { width:15%; } col.rf-w-jpay { width:15%; } col.rf-w-jpm { width:9%; } col.rf-w-jamt { width:8.6%; } col.rf-w-jdet { width:21.2%; } /* ---- Reviews (2026-10-01) ------------------------------------------------- As the owner approved the screen in the second round: five tiles, the filter header of the orders list with the feedback items across the whole width, a line per review with its order, what it delivered, its customer and the decisions; the drawer of four zones; the correction page with the site's own cards; the feedback items. Every class starts with rv-. */ /* ---- the head ---------------------------------------------------------- */ .rv-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .rv-hrow h1 { margin:0; } .phead .sub.rv-sub { max-width:1060px; margin-top:2px; } .rv-kpis .kpi { color:inherit; text-decoration:none; display:block; cursor:pointer; transition:box-shadow .12s, border-color .12s; } .rv-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .rv-kpis .kpi.rv-amber { border-left-color:var(--amber); } .rv-kpis .kpi.rv-grey { border-left-color:var(--off); } .rv-kpis .kpi.rv-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .rv-kpis .kpi.alarm.rv-on { box-shadow:0 0 0 2px var(--bad-line), var(--sh-1); } /* ---- the stars: the digit carries the tone, the five glyphs the picture - */ .rv-rate { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .rv-dg { font-family:var(--f-mono); font-weight:600; font-size:var(--fs); color:var(--ink); min-width:9px; text-align:right; font-variant-numeric:tabular-nums; } .rv-dg.r3 { color:var(--amber); } .rv-dg.r1, .rv-dg.r2 { color:var(--bad); } .rv-stars { line-height:1; } .rv-stars .rv-off { color:var(--line-2); } :root[data-theme="dark"] .rv-stars .rv-off { color:var(--line-3); } .rv-sg { color:var(--star); font-size:1.05em; line-height:1; } /* ---- the ticked items: green positive, red negative, as the site names them */ .rv-its { display:flex; flex-wrap:wrap; gap:3px 4px; margin-top:4px; } .rv-it { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:600; line-height:17px; padding:0 7px; border-radius:20px; border:1px solid var(--line-2); color:var(--text); background:var(--surface-2); white-space:nowrap; } .rv-it::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--off); flex:0 0 6px; } .rv-it.pos { color:var(--ok); background:var(--ok-soft); border-color:var(--ok-line); } .rv-it.pos::before { background:var(--ok); } .rv-it.neg { color:var(--bad); background:var(--bad-soft); border-color:var(--bad-line); } .rv-it.neg::before { background:var(--bad); } .rv-it.off { border-style:dashed; } .rv-it.gone { color:var(--faint); } /* ---- the filters -------------------------------------------------------- */ .fx-s .rv-sg, .fx-c .rv-sg { margin-left:-2px; } .fx-neth .fx-n { letter-spacing:0; text-transform:none; margin-left:2px; } .fx-net.rv-pos .fx-neth { color:var(--ok); } .fx-net.rv-neg .fx-neth { color:var(--bad); } .fx-net.rv-pos .fx-neth.full, .fx-net.rv-neg .fx-neth.full { color:var(--accent); } .fx-net.rv-pos .fx-neth:hover, .fx-net.rv-neg .fx-neth:hover { color:var(--accent); } .fx-net.rv-pos { background-image:linear-gradient(color-mix(in srgb, var(--ok) 5%, transparent), color-mix(in srgb, var(--ok) 5%, transparent)); border-color:var(--ok-line); } .fx-net.rv-neg { background-image:linear-gradient(color-mix(in srgb, var(--bad) 5%, transparent), color-mix(in srgb, var(--bad) 5%, transparent)); border-color:var(--bad-line); } .fx-in.rv-dates input[type="date"] { width:128px; } /* ---- the list ----------------------------------------------------------- */ /* The kit's `table.grid thead th {top:50px}` outweighs its own `tr.chead th {top:71px}`, so both rows of a two-row head stick at 50px and the column names cover the group captions; the ids put them back in their places. */ #rv-grid thead tr.ghead th { top:50px; } #rv-grid thead tr.chead th { top:71px; } .tbar .rv-total { font-size:var(--fs-s); color:var(--muted); } .tbar .rv-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .rv-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .rv-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; background:var(--amber); } .rv-legend .rv-it { font-size:var(--fs-micro); line-height:15px; padding:0 6px; } .rv-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } tr.ghead th.rv-gcus { color:var(--z-cus); } tr.chead th.right, table.grid thead th.right { text-align:right; } tr.r > td.rv-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .rv-c-id .l1 { display:flex; align-items:center; gap:0; } .rv-id { font-family:var(--f-mono); font-weight:500; font-size:var(--fs); color:var(--ink); letter-spacing:.01em; } .rv-c-id .rv-ip { font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--muted); letter-spacing:-.02em; } .rv-c-st .l1 { overflow:visible; } .rv-c-st .rv-stars { font-size:var(--fs-m); } .rv-c-st .l2 .pill { margin-right:3px; } /* the words of the customer: up to three lines here, the whole of it in the drawer */ .rv-txt { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink); font-size:var(--fs); line-height:1.38; white-space:normal; overflow-wrap:anywhere; } .rv-txt.hid { color:var(--muted); } .rv-txt .rv-hidtag, .rv-full .rv-hidtag { font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border:1px dashed var(--line-3); border-radius:4px; padding:0 4px; margin-right:6px; vertical-align:1px; } .rv-notxt { color:var(--faint); font-size:var(--fs-s); font-style:italic; } .rv-c-tx .rv-its { margin-top:5px; } .rv-c-ord .l1 a.rv-oid, .rv-oid { font-family:var(--f-mono); font-size:.95em; font-weight:500; } .rv-c-ord .l1 .pill { margin-left:5px; vertical-align:1px; } .rv-c-del .l1 { display:flex; align-items:center; gap:6px; } .rv-pct { font-family:var(--f-mono); font-weight:600; font-size:var(--fs-s); font-variant-numeric:tabular-nums; } .rv-pct.ok { color:var(--ok); } .rv-pct.amber { color:var(--amber); } .rv-pct.bad { color:var(--bad); } .rv-drop { color:var(--bad); font-weight:600; } .rv-c-cus .l1 a { font-weight:600; color:var(--ink); } .rv-c-cus .l1 a:hover { color:var(--accent); } .rv-c-cus .l1 { display:flex; align-items:center; gap:0; } .rv-c-cus .l1 > a:first-child { overflow:hidden; text-overflow:ellipsis; } .rv-many { display:inline-block; flex:0 0 auto; font-size:var(--fs-micro); font-weight:700; line-height:15px; padding:0 6px; margin-left:6px; border-radius:20px; border:1px solid var(--line-2); color:var(--muted); background:var(--surface); white-space:nowrap; } a.rv-many:hover { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); text-decoration:none; } .rv-many.lot { color:var(--amber); border-color:var(--amber-line); background:var(--amber-soft); } .rv-c-stt .stline { flex-wrap:wrap; row-gap:2px; } .rv-wait { color:var(--amber); font-weight:600; } td.c-act .rv-acts + .rv-acts { margin-top:3px; } td.c-act .acts a.btn { text-decoration:none; } .rv-tk { font-size:var(--fs-xs); font-weight:600; white-space:nowrap; align-self:center; } .rv-empty { padding:16px 11px; font-size:var(--fs-s); color:var(--muted); } .rv-empty a { font-weight:600; } /* ---- the drawer: its own panel under the line, four named zones -------- */ .rv-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .rv-dgrid { grid-template-columns:minmax(0,5fr) minmax(0,6fr); } } .rv-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .zone.rv-z-rev { border-left:2px solid var(--z-ord); } .zone.rv-z-rev > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.rv-z-cus { border-left:2px solid var(--z-cus); } .zone.rv-z-cus > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.rv-z-ord { border-left:2px solid var(--z-del); } .zone.rv-z-ord > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.rv-z-oth { border-left:2px solid var(--z-pan); } .zone.rv-z-oth > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .rv-drawer .fields { gap:7px 16px; } .rv-drawer .f.rv-w2 { grid-column:span 2; } .rv-drawer .f .k, .rv-page .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .rv-drawer .f .v, .rv-page .f .v { font-size:var(--fs-s); line-height:1.4; } .rv-said { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .rv-said .rv-rate .rv-dg { font-size:var(--fs-l); } .rv-said .rv-stars { font-size:19px; letter-spacing:2px; } .rv-said .k { font-size:var(--fs-xs); color:var(--muted); } .rv-full { margin:0 0 8px; padding:8px 11px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--line-3); font-size:var(--fs-m); line-height:1.5; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; } .rv-full.hid { color:var(--muted); border-left-color:var(--off-line); } .rv-nofull { margin:0 0 8px; font-size:var(--fs-s); color:var(--muted); font-style:italic; } .rv-drawer .rv-its { margin:0 0 10px; } .rv-drawer .rv-it, .rv-page .rv-its .rv-it { font-size:var(--fs-s); line-height:19px; } .rv-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .rv-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .rv-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); } .rv-zsub { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:10px 0 4px; } table.grid.inner.rv-t { font-size:var(--fs-s); } table.grid.inner.rv-t tbody td { font-size:var(--fs-s); } table.grid.inner.rv-t td:first-child, table.grid.inner.rv-t th:first-child { padding-left:11px; } table.grid.inner.rv-t td:last-child, table.grid.inner.rv-t th:last-child { padding-right:11px; } table.grid.inner.rv-t td .sub { font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.rv-t td.mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner.rv-t th.num { text-align:right; } table.grid.inner.rv-t tr.rv-rbad td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.rv-t tr.rv-rok td:first-child { box-shadow:inset 2px 0 0 var(--ok); } table.grid.inner.rv-t tr.rv-ramber td:first-child { box-shadow:inset 2px 0 0 var(--amber); } table.grid.inner.rv-t .rv-stars { font-size:var(--fs-s); } table.grid.inner.rv-t .rv-its { margin-top:2px; } table.grid.inner.rv-t .rv-it { font-size:var(--fs-micro); line-height:15px; padding:0 6px; } table.grid.inner th.rv-min, table.grid.inner td.rv-min { width:1%; white-space:nowrap; } .rv-up { color:var(--ok); font-weight:600; } .rv-down { color:var(--bad); font-weight:600; } .rv-drawer .actgrid { align-items:center; } .rv-drawer .actgrid a.btn { text-decoration:none; } /* ---- the element pages -------------------------------------------------- */ .rv-page .cgrid > .panel + .panel, .rv-page .cgrid > .rv-stack > .panel + .panel { margin-top:0; } .rv-stack { display:grid; gap:9px; align-content:start; min-width:0; } .rv-page .phead .marks .rv-stars { font-size:var(--fs-m); } .pt.rv-pt-ord { background-image:linear-gradient(var(--z-del-soft), var(--z-del-soft)); } .pt.rv-pt-ord b { color:var(--z-del); } .pt.rv-pt-cus { background-image:linear-gradient(var(--z-cus-soft), var(--z-cus-soft)); } .pt.rv-pt-cus b { color:var(--z-cus); } .pt.rv-pt-site { background-image:linear-gradient(var(--z-pan-soft), var(--z-pan-soft)); } .pt.rv-pt-site b { color:var(--z-pan); } .panel.rv-formp { border-left:3px solid var(--accent); } /* the correction form: a caption column, then the control, lined up */ .rv-page.rv-edit { max-width:1780px; } .rv-frm { display:grid; grid-template-columns:150px minmax(0,1fr); } .rv-frm > .rv-fl { padding:9px 10px 9px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-xs); font-weight:700; color:var(--muted); line-height:1.35; } .rv-frm > .rv-fl small { display:block; font-weight:400; color:var(--faint); margin-top:2px; } .rv-frm > .rv-fc { padding:8px 11px 9px; border-top:1px solid var(--line); min-width:0; } .rv-frm > .rv-fl:first-child, .rv-frm > .rv-fl:first-child + .rv-fc { border-top:0; } .rv-note { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; margin-top:5px; } .rv-note b { color:var(--ink); font-weight:600; } .rv-starpick .fx-s { font-size:var(--fs); padding:3px 10px; } .rv-starpick .fx-s .rv-sg { font-size:1.1em; } .rv-grp2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } .rv-grpb { border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); padding:6px 8px 7px; min-width:0; } .rv-grpb.pos { border-color:var(--ok-line); } .rv-grpb.neg { border-color:var(--bad-line); } .rv-grph { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:4px; display:flex; gap:8px; align-items:baseline; } .rv-grpb.pos .rv-grph { color:var(--ok); } .rv-grpb.neg .rv-grph { color:var(--bad); } .rv-grph span { font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); } .rv-chk { display:flex; align-items:center; gap:7px; padding:3px 6px; border-radius:6px; cursor:pointer; font-size:var(--fs); color:var(--ink); line-height:1.35; } .rv-chk:hover { background:var(--surface); } .rv-chk input { margin:0; width:15px; height:15px; accent-color:var(--accent); flex:0 0 15px; } .rv-chk .rv-cx { font-size:var(--fs-xs); color:var(--faint); white-space:nowrap; } .rv-chk .rv-cx:not(:empty)::before { content:'· '; color:var(--line-3); } .rv-chk.rv-nope { color:var(--faint); } .rv-chk.rv-nope .rv-nm { text-decoration:line-through; text-decoration-color:var(--line-3); } .rv-chk.rv-nope .rv-cx { color:var(--amber); font-weight:600; } .rv-ta { width:100%; min-height:96px; padding:7px 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-m); line-height:1.5; resize:vertical; } .rv-ta:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .rv-count { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } .rv-count.over { color:var(--amber); font-weight:600; } .rv-prob { display:flex; flex-direction:column; gap:4px; } .rv-prob .alert-bad { margin:0; } .rv-savebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .rv-dirty { font-size:var(--fs-s); color:var(--amber); font-weight:600; } .rv-clean { font-size:var(--fs-s); color:var(--faint); } fieldset.rv-fs { border:0; margin:0; padding:0; min-width:0; } fieldset.rv-fs[disabled] { opacity:.62; } /* what the site will show: the card as the site draws it, per language */ .rv-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:9px 11px 10px; } .rv-card { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:8px 10px 9px; min-width:0; box-shadow:var(--sh-1); } .rv-card.none { background:var(--surface-2); box-shadow:none; border-style:dashed; } .rv-card .rv-cl { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; display:flex; gap:6px; align-items:center; } .rv-card .rv-stars { font-size:var(--fs-m); } .rv-card .rv-ctext { margin-top:5px; font-size:var(--fs); color:var(--ink); line-height:1.45; overflow-wrap:anywhere; } .rv-card .rv-cmeta { margin-top:6px; font-size:var(--fs-xs); color:var(--muted); display:flex; gap:4px 10px; flex-wrap:wrap; } .rv-card .rv-cmeta .mono { color:var(--text); } .rv-card .rv-cnone { font-size:var(--fs-s); color:var(--muted); font-style:italic; } .rv-state { padding:7px 11px; border-top:1px solid var(--line); font-size:var(--fs-s); color:var(--text); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .rv-state b { color:var(--ink); } /* ---- the feedback items -------------------------------------------------- */ .rv-owrap { max-width:1500px; } .rv-ogrid { display:grid; gap:9px; align-items:start; grid-template-columns:minmax(0,1fr); } .rv-ogrid > .panel + .panel { margin-top:0; } @media (min-width:1700px) { .rv-owrap { max-width:2050px; } .rv-ogrid { grid-template-columns:minmax(0,1fr) minmax(360px,.42fr); } } table.grid.inner.rv-otab td { vertical-align:middle; } table.grid.inner.rv-otab th.rv-cn { width:40px; } table.grid.inner.rv-otab th.rv-cc { width:21%; } table.grid.inner.rv-otab th.rv-ca { width:74px; } table.grid.inner.rv-otab th.rv-cu { width:92px; } table.grid.inner.rv-otab th.rv-cm { width:118px; } table.grid.inner.rv-otab input[type="text"] { width:100%; min-width:0; height:28px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs); } table.grid.inner.rv-otab input[type="text"]:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } table.grid.inner.rv-otab input.mono { font-family:var(--f-mono); font-size:var(--fs-s); } table.grid.inner.rv-otab input[readonly] { background:var(--surface-2); color:var(--muted); border-style:dashed; } table.grid.inner.rv-otab input.rv-bad { border-color:var(--bad-line); background:var(--bad-soft); } table.grid.inner.rv-otab input.rv-dup { border-color:var(--amber-line); background:var(--amber-soft); } table.grid.inner.rv-otab tr.rv-new td { background:var(--accent-soft); } table.grid.inner.rv-otab tr.rv-new td:first-child { box-shadow:inset 3px 0 0 var(--accent); } table.grid.inner.rv-otab tr.rv-offrow td { color:var(--muted); } table.grid.inner.rv-otab tr.rv-offrow td:first-child { box-shadow:inset 3px 0 0 var(--off-line); } .rv-pos-n { font-family:var(--f-mono); font-weight:600; color:var(--muted); } .rv-lock { display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:2px; white-space:nowrap; } .rv-typeseg .fx-s { padding:2px 9px; } .rv-typeseg .fx-s.on.pos { color:var(--ok); box-shadow:var(--sh-1), 0 0 0 1px var(--ok-line); } .rv-typeseg .fx-s.on.neg { color:var(--bad); box-shadow:var(--sh-1), 0 0 0 1px var(--bad-line); } .rv-sw { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-s); color:var(--text); cursor:pointer; white-space:nowrap; } .rv-sw input { width:16px; height:16px; margin:0; accent-color:var(--accent); } .rv-sw.rv-held { color:var(--amber); font-weight:600; } .rv-used { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .rv-used.none { color:var(--faint); } .rv-mvb { display:inline-flex; gap:3px; } .rv-mvb .btn { padding:1px 7px; font-size:var(--fs-s); } .rv-addrow { display:flex; align-items:center; gap:10px; padding:7px 11px; border-top:1px solid var(--line); flex-wrap:wrap; } .rv-addrow .hint { flex:1 1 260px; } .rv-offer { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; } .rv-offer > div { padding:8px 10px 10px; border-left:1px solid var(--line); min-width:0; } .rv-offer > div:first-child { border-left:0; } .rv-offer h5 { margin:0 0 5px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .rv-offer h5 .rv-stars { font-size:var(--fs-s); letter-spacing:0; } .rv-offer ul { list-style:none; margin:0; padding:0; display:grid; gap:3px; } .rv-offer li { display:flex; } .rv-offer .rv-it { white-space:normal; line-height:1.3; padding:1px 7px; } .rv-offer .rv-fb { font-size:var(--fs-micro); font-weight:700; color:var(--amber); margin-left:4px; } .rv-offer .rv-fb.bad { color:var(--bad); } .rv-offer .rv-need { margin-top:6px; font-size:var(--fs-xs); color:var(--muted); } .rv-offer .rv-need.bad { color:var(--bad); font-weight:600; } .rv-lsw { margin-left:auto; } /* ---- 4K ------------------------------------------------------------------ */ .rv-wide { display:none; } @media (min-width:2100px) { .rv-dgrid { gap:12px; } .rv-wide { display:inline; } .rv-c-id .rv-ip { font-size:var(--fs-xs); } } /* ---- narrower desktops: the element pages stack --------------------------- */ @media (max-width:1300px) { .rv-page .cgrid.c53 { grid-template-columns:minmax(0,1fr); } } /* ---- a phone's width: the page holds together, nothing scrolls sideways */ @media (max-width:700px) { .rv-frm { grid-template-columns:minmax(0,1fr); } .rv-frm > .rv-fl { border-right:0; padding:6px 10px 2px; } .rv-frm > .rv-fc { border-top:0; padding:3px 10px 9px; } .rv-grp2, .rv-cards { grid-template-columns:minmax(0,1fr); } .rv-offer { grid-template-columns:minmax(0,1fr); } .rv-offer > div { border-left:0; border-top:1px solid var(--line); } .rv-offer > div:first-child { border-top:0; } } @media (max-width:560px) { .rv-kpis { flex-wrap:wrap; } .rv-kpis .kpi { flex:1 1 30%; } .rv-legend { display:none; } /* the kit's phone rule `table.grid tr {display:block}` outweighs `tr.r {display:flex}` */ #rv-grid tr.r { display:flex; flex-wrap:wrap; } tr.r > td.rv-c-id { order:1; flex:1 1 auto; } tr.r > td.rv-c-stt { order:2; flex:0 0 auto; margin-left:auto; text-align:right; } tr.r > td.rv-c-stt .stline { justify-content:flex-end; } tr.r > td.rv-c-st { order:3; flex:1 1 100%; } tr.r > td.rv-c-tx { order:4; flex:1 1 100%; } tr.r > td.rv-c-ord { order:5; flex:1 1 45%; margin-top:3px; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } tr.r > td.rv-c-del { order:6; flex:1 1 45%; margin-top:3px; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } tr.r > td.rv-c-cus { order:7; flex:1 1 100%; } tr.r > td.c-act { order:8; } .rv-c-id .l1, .rv-c-id .l2 { display:inline-block; margin-right:8px; } .rv-c-st .l1, .rv-c-st .l2 { display:inline-flex; margin-right:8px; } td.c-act .acts { justify-content:flex-start; } table.grid.inner tr { padding:6px 10px; border-top:1px solid var(--line); } table.grid.inner tbody tr:first-child { border-top:0; } table.grid.inner tbody td { border-top:0 !important; padding:1px 0 !important; } table.grid.inner td.mn, table.grid.inner td.num { text-align:left; } table.grid.inner.rv-t tr td:first-child { box-shadow:none !important; padding-left:0 !important; } /* the inner tables of the drawer: a compact grid of labelled cells, the words across the whole width */ table.grid.inner.rv-t tbody tr { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:2px 10px; } table.grid.inner.rv-t tbody td.wrap { grid-column:1 / -1; } table.grid.inner.rv-t td.mn, table.grid.inner.rv-t th.num { text-align:left; } table.grid.inner.rv-t tr.rv-rbad { border-left:3px solid var(--bad); } table.grid.inner.rv-t tr.rv-rok { border-left:3px solid var(--ok); } table.grid.inner.rv-t tr.rv-ramber { border-left:3px solid var(--amber); } table.grid.inner.rv-otab tbody tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 10px; } table.grid.inner.rv-otab td.rv-full2 { grid-column:1 / -1; } table.grid.inner.rv-otab td[data-l="#"] { grid-column:1 / -1; } table.grid.inner.rv-otab td[data-l="#"]::before { content:'Item'; display:inline; margin-right:6px; } table.grid.inner.rv-otab tr.rv-new td { background:transparent; } table.grid.inner.rv-otab tr.rv-new { background:var(--accent-soft); } .rv-lock { white-space:normal; } .rv-dgrid { gap:9px; } .rv-drawer .f.rv-w2 { grid-column:1 / -1; } } /* The head's separator dot: the kit's `.dot` is also the on/off disc of the services list (a later rule), and it paints `·` of a table head as a grey disc; our own name keeps it a dot. */ th .rv-sep { color:var(--line-3); margin:0 3px; } /* the page's words after a decision taken from the line */ .rv-say { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; text-align:right; white-space:normal; margin-top:3px; } /* a drawer the page itself opens (open= in the address) does not slide in */ .drawer.rv-still { animation:none; } /* the correction page: a star or a language is a radio inside its button */ .rv-starpick label.fx-s, .rv-langpick label.fx-s { cursor:pointer; position:relative; } .rv-starpick input, .rv-langpick input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .holdbar form.inl { display:inline; margin-left:6px; } /* the feedback items: the type is a radio inside its button, the count stands right */ .rv-typeseg label.fx-s { cursor:pointer; position:relative; } .rv-typeseg input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } table.grid.inner.rv-otab td.rv-un { text-align:right; } .rv-sw input[type="hidden"] { display:none; } .rv-typeseg { flex-wrap:nowrap; } table.grid.inner.rv-otab th.rv-ct { width:168px; } /* ---- Mail templates (2026-10-01) --------------------------------------------- As the owner approved the screen in the third round: four tiles, the filter header, a line per letter of a site with its languages side by side, the drawer of three zones. Every class starts with mtp-. The letters keep their own colours: a mail is white in every mail client, whatever the theme. */ /* admin.css prints these captions at --fs-nano in --faint: too small on 4K */ .mtp-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .mtp-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } table.grid.inner.mtp-t thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.07em; } #mtp-grid tr.ghead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.1em; } #mtp-grid tr.chead th { color:var(--muted); } th .mtp-sep { color:var(--line-3); margin:0 3px; } /* ---- the head ---------------------------------------------------------- */ .mtp-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .mtp-hrow h1 { margin:0; } .phead .sub.mtp-sub { max-width:1100px; margin-top:2px; line-height:1.45; } .mtp-kpis .kpi { color:inherit; text-decoration:none; display:block; cursor:pointer; min-width:118px; transition:box-shadow .12s, border-color .12s; } .mtp-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .mtp-kpis .kpi b { font-variant-numeric:tabular-nums; } .mtp-kpis .kpi.mtp-grey { border-left-color:var(--off); } .mtp-kpis .kpi.mtp-calm { border-left-color:var(--line-3); } .mtp-kpis .kpi.mtp-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } /* ---- the filters --------------------------------------------------------- */ #mtp-filters .mtp-chans .fx-c:not(.all) { font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; } #mtp-filters .mtp-chans .fx-c .fx-n { font-family:var(--f-body); } .fx-net.mtp-opt { background-image:linear-gradient(var(--accent-soft), var(--accent-soft)); } /* this screen's captions ("Placeholders", "Sent · 30 days") are longer than the orders screen's */ #mtp-filters.fx.v1 .fx-blk { grid-template-columns:154px minmax(0,1fr); } /* ---- the list ------------------------------------------------------------ */ #mtp-list { scroll-margin-top:60px; } .tbar .mtp-total { font-size:var(--fs-s); color:var(--muted); } .tbar .mtp-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .mtp-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .mtp-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .mtp-legend i.amber { background:var(--amber); } .mtp-legend i.off { background:var(--off); } .mtp-legend .pill { margin-right:3px; } col.mtp-w-exp { width:1.4%; } col.mtp-w-let { width:16%; } col.mtp-w-ch { width:9.6%; } col.mtp-w-lang { width:24.2%; } col.mtp-w-sent { width:8.2%; } col.mtp-w-upd { width:7.4%; } col.mtp-w-act { width:9%; } @media (min-width:2100px) { col.mtp-w-exp { width:1.2%; } col.mtp-w-let { width:15%; } col.mtp-w-ch { width:9%; } col.mtp-w-lang { width:26%; } col.mtp-w-sent { width:7.6%; } col.mtp-w-upd { width:6.6%; } col.mtp-w-act { width:8.6%; } } #mtp-grid thead th.right { text-align:right; } tr.r > td.mtp-t-lang { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } #mtp-grid tr.ghead th.mtp-g-lang, #mtp-grid tr.chead th.mtp-g-lang { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } #mtp-grid tr.ghead th.mtp-g-lang { color:var(--z-del); } .mtp-c-let .l1 { display:flex; align-items:center; gap:0; } .mtp-key { font-family:var(--f-mono); font-weight:500; font-size:var(--fs); color:var(--ink); letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; } .mtp-c-let .l2.mtp-nm { color:var(--text); font-size:var(--fs-s); font-weight:600; } .mtp-c-ch .l1 .pill { vertical-align:1px; } .mtp-chp { text-transform:none; letter-spacing:.01em; font-family:var(--f-mono); font-weight:500; } .mtp-c-lang .l1 { display:flex; align-items:center; gap:6px; } .mtp-c-lang .l1 .pill { flex:0 0 auto; } .mtp-subj { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; color:var(--ink); } .mtp-subj a { color:var(--ink); } .mtp-subj a:hover { color:var(--accent); } i.mtp-ph, span.mtp-ph { font-style:normal; font-family:var(--f-mono); font-size:.88em; color:var(--z-del); background:var(--z-del-soft); border-radius:4px; padding:0 3px; } .mtp-rem { display:block; font-size:var(--fs-xs); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .mtp-rem .amber, .mtp-amb { color:var(--amber); font-weight:600; } .mtp-rem .bad, .mtp-bad { color:var(--bad); font-weight:600; } .mtp-rem .mut { color:var(--faint); } .mtp-rem code, .mtp-code { font-family:var(--f-mono); font-size:.92em; } td.mtp-c-lang.mtp-miss { background-image:linear-gradient(var(--amber-soft), var(--amber-soft)) !important; } .mtp-miss .l1 { color:var(--amber); font-weight:600; } .mtp-na .l1, .mtp-na .l2 { color:var(--faint); } .mtp-c-sent .l1 { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; } .mtp-c-sent .l1 a { color:var(--ink); } .mtp-c-sent .l1 a:hover { color:var(--accent); } .mtp-c-sent .l1.mtp-zero, .mtp-c-sent .l1.mtp-zero a { color:var(--faint); } .mtp-c-upd .l1 { font-variant-numeric:tabular-nums; } tbody.orow.mtp-offrow > tr.r > td { color:var(--muted); } tbody.orow.mtp-offrow > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--off); } tbody.orow.mtp-offrow .mtp-key, tbody.orow.mtp-offrow .mtp-subj, tbody.orow.mtp-offrow .mtp-subj a { color:var(--muted); } tbody.mtp-grp > tr > td { padding:5px 11px 4px; background:var(--surface-2); border-bottom:1px solid var(--line-2); border-top:1px solid var(--line-2); font-size:var(--fs-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } tbody.mtp-grp > tr > td span { font-weight:400; letter-spacing:0; text-transform:none; font-size:var(--fs-xs); margin-left:6px; } .mtp-empty { padding:16px 11px; font-size:var(--fs-s); color:var(--muted); } .mtp-empty a { font-weight:600; } /* ---- the drawer: its own panel under the line, three named zones --------- */ .drawer.mtp-still { animation:none; } .mtp-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1300px) { .mtp-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } } @media (min-width:2100px) { .mtp-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:12px; } } .mtp-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .zone.mtp-z-ph { border-left:2px solid var(--z-del); } .zone.mtp-z-ph > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.mtp-z-how { border-left:2px solid var(--z-ord); } .zone.mtp-z-how > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.mtp-z-let { border-left:2px solid var(--accent); } .zone.mtp-z-let > h4 { color:var(--accent); background:var(--accent-soft); border-bottom-color:var(--accent-line); } .mtp-drawer .zbody.p0 { padding:0; } .mtp-drawer .fields { gap:7px 16px; } .mtp-drawer .f.mtp-w2 { grid-column:span 2; } .mtp-drawer .actgrid { align-items:center; } .mtp-drawer .actgrid a.btn { text-decoration:none; } .mtp-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .mtp-zfoot b { color:var(--ink); font-weight:600; } .mtp-zfoot code { font-family:var(--f-mono); color:var(--text); } .mtp-letters { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); padding:10px 11px 11px; } .mtp-letter { min-width:0; display:grid; gap:6px; align-content:start; } .mtp-lhead { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .mtp-lhead b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text); } .mtp-lhead .sp { flex:1; } .mtp-lnone { border:1px dashed var(--line-3); border-radius:var(--r); padding:12px 13px; font-size:var(--fs-s); color:var(--muted); line-height:1.5; background:var(--surface-2); } .mtp-lnone.amber { border-color:var(--amber-line); background:var(--amber-soft); color:var(--text); } .mtp-lnone b { color:var(--ink); } /* the envelope of a letter: what the mail client shows above the body */ .mtp-env { display:grid; grid-template-columns:auto minmax(0,1fr); border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); overflow:hidden; } .mtp-env > span { padding:3px 9px; font-size:var(--fs-s); line-height:1.4; border-top:1px solid var(--line); min-width:0; overflow-wrap:anywhere; } .mtp-env > span:nth-child(-n+2) { border-top:0; } .mtp-env > span.k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding-top:5px; white-space:nowrap; border-right:1px solid var(--line); } .mtp-env > span.v { color:var(--text); } .mtp-env > span.v.mtp-sj { color:var(--ink); font-weight:600; font-size:var(--fs); } .mtp-env .mtp-miss-in { color:var(--amber); font-weight:600; font-size:var(--fs-xs); margin-left:6px; } .mtp-frame { border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:#FFFFFF; } .mtp-frame iframe { display:block; width:100%; height:480px; border:0; background:#FFFFFF; } .mtp-ftnote { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } /* the placeholders of a letter, its languages side by side */ table.grid.inner.mtp-t { font-size:var(--fs-s); } table.grid.inner.mtp-t tbody td { font-size:var(--fs-s); } table.grid.inner.mtp-t td:first-child, table.grid.inner.mtp-t th:first-child { padding-left:11px; } table.grid.inner.mtp-t td:last-child, table.grid.inner.mtp-t th:last-child { padding-right:11px; } table.grid.inner.mtp-t td.mtp-nmc { white-space:nowrap; } table.grid.inner.mtp-t td.mtp-nmc code { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); font-weight:500; } table.grid.inner.mtp-t td.mtp-smp { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (min-width:2100px) { table.grid.inner.mtp-t td.mtp-smp { max-width:260px; } } /* a narrow desktop: the table scrolls inside its zone rather than cut its last column */ .zone.mtp-z-ph > .zbody { overflow-x:auto; } table.grid.inner.mtp-t th.mtp-min, table.grid.inner.mtp-t td.mtp-min { width:1%; white-space:nowrap; } table.grid.inner.mtp-t tr.mtp-r-unk td { background:var(--amber-soft); } table.grid.inner.mtp-t tr.mtp-r-unk td:first-child { box-shadow:inset 2px 0 0 var(--amber); } table.grid.inner.mtp-t tr.mtp-r-esc td { background:var(--bad-soft); } table.grid.inner.mtp-t tr.mtp-r-esc td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.mtp-t tr.mtp-r-std td { color:var(--muted); } table.grid.inner.mtp-t tr.mtp-r-sep td { background:var(--surface-2); font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:5px; padding-bottom:4px; } .mtp-st { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:600; white-space:nowrap; } .mtp-st::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--off); flex:0 0 7px; } .mtp-st.used { color:var(--ok); } .mtp-st.used::before { background:var(--ok); } .mtp-st.unused { color:var(--faint); font-weight:400; } .mtp-st.unused::before { background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-3); } .mtp-st.unk { color:var(--amber); } .mtp-st.unk::before { background:var(--amber); } .mtp-st.esc { color:var(--bad); } .mtp-st.esc::before { background:var(--bad); } .mtp-st.std { color:var(--run); font-weight:400; } .mtp-st.std::before { background:var(--run); } .mtp-st.none { color:var(--faint); font-weight:400; } .mtp-st.none::before { display:none; } .mtp-why { font-size:var(--fs-xs); color:var(--muted); line-height:1.35; } .mtp-why.amber { color:var(--amber); font-weight:600; } .mtp-why.bad { color:var(--bad); font-weight:600; } /* ---- 4K, narrower desktops ---------------------------------------------------- */ .mtp-wide { display:none; } @media (min-width:2000px) { #mtp-filters.fx.v1 .fx-body { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } } @media (min-width:2100px) { .mtp-wide { display:inline; } } @media (max-width:1560px) { .mtp-legend .mtp-lg2 { display:none; } } /* ---- a phone's width: the page holds together, nothing scrolls sideways ---- */ @media (max-width:700px) { #mtp-filters.fx.v1 .fx-blk { grid-template-columns:minmax(0,1fr); } .mtp-letters { grid-template-columns:minmax(0,1fr); } } @media (max-width:560px) { .mtp-kpis { flex-wrap:wrap; } .mtp-kpis .kpi { flex:1 1 40%; min-width:0; } .mtp-legend { display:none; } /* the kit's `table.grid tr {display:block}` outweighs `tr.r {display:flex}`: the card is laid out here */ #mtp-grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 10px; padding:9px 34px 10px 11px; height:auto; } #mtp-grid td.mtp-c-let { order:1; flex:1 1 100%; } #mtp-grid td.mtp-c-ch { order:2; flex:1 1 100%; } #mtp-grid td.mtp-c-ch .l1, #mtp-grid td.mtp-c-ch .l2 { display:inline-block; margin-right:8px; } #mtp-grid td.mtp-c-lang { order:3; flex:1 1 100%; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } #mtp-grid td.mtp-c-sent { order:4; flex:1 1 45%; } #mtp-grid td.mtp-c-upd { order:5; flex:1 1 45%; } #mtp-grid td.c-act { order:6; flex:1 1 100%; } #mtp-grid td.mtp-c-sent .l1, #mtp-grid td.mtp-c-upd .l1 { display:inline; } #mtp-grid .acts { justify-content:flex-start; } tbody.mtp-grp > tr, tbody.mtp-grp > tr > td { display:block; } .mtp-c-lang .l1 { flex-wrap:wrap; } .mtp-subj { white-space:normal; } .mtp-rem { white-space:normal; } /* the inner tables turn into labelled blocks instead of being squeezed */ .mtp-drawer table.grid.inner tr { padding:6px 10px; border-top:1px solid var(--line); } .mtp-drawer table.grid.inner tbody tr:first-child { border-top:0; } .mtp-drawer table.grid.inner tbody td { border-top:0 !important; padding:1px 0 !important; } .mtp-drawer table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.mtp-t tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px 12px; } table.grid.inner.mtp-t tbody td.mtp-full { grid-column:1 / -1; } table.grid.inner.mtp-t tbody td.mtp-full:empty { display:none; } table.grid.inner.mtp-t td.mtp-smp { max-width:none; white-space:normal; overflow-wrap:anywhere; } table.grid.inner.mtp-t tr.mtp-r-sep td { grid-column:1 / -1; } .mtp-drawer .f.mtp-w2 { grid-column:1 / -1; } .mtp-env { grid-template-columns:minmax(0,1fr); } .mtp-env > span.k { border-right:0; padding-bottom:0; } .mtp-env > span.v { border-top:0; padding-top:0; } } /* ---- Mail templates: the editor of one language (2026-10-01) ----------------- The fields beside the letter they make, the list of placeholders as a table or as its JSON, the sticky save bar; the preview and the test on the right. */ .mtp-page .phead { align-items:flex-start; } .mtp-page .phead > div:first-child { flex:1 1 640px; min-width:0; } .mtp-page .phead h1 .pill { vertical-align:4px; } .mtp-marks { display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; margin-top:4px; } .mtp-marks .mtp-key { font-size:var(--fs-s); padding:0 6px; border:1px solid var(--line-2); border-radius:5px; background:var(--surface); } .mtp-marks .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .mtp-about { display:flex; flex-wrap:wrap; gap:3px 16px; margin-top:6px; font-size:var(--fs-s); color:var(--text); line-height:1.45; max-width:1500px; } .mtp-about .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-right:5px; } .mtp-about b { color:var(--ink); font-weight:600; } .mtp-lseg .fx-s { padding:3px 10px; font-size:var(--fs-s); } .mtp-lseg .fx-s.mtp-lmiss { color:var(--amber); border:1px dashed var(--amber-line); cursor:default; } .mtp-lseg .fx-s.mtp-lmiss:hover { background:transparent; color:var(--amber); } .mtp-lseg .mtp-ed { width:7px; height:7px; border-radius:50%; background:var(--amber); flex:0 0 7px; } .mtp-egrid { display:grid; gap:9px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1300px) { .mtp-egrid { grid-template-columns:minmax(0,1.05fr) minmax(560px,1fr); } .mtp-right { position:sticky; top:59px; } } @media (min-width:2100px) { .mtp-egrid { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); } } .mtp-egrid > * + * { margin-top:0 !important; } .mtp-left { display:grid; gap:9px; align-content:start; min-width:0; } .mtp-left > .panel + .panel { margin-top:0; } .panel.mtp-formp { border-left:3px solid var(--accent); } .mtp-frm { display:grid; grid-template-columns:150px minmax(0,1fr); } .mtp-frm > .mtp-fl { padding:9px 10px 9px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-xs); font-weight:700; color:var(--muted); line-height:1.35; margin:0; } .mtp-frm > .mtp-fl small { display:block; font-weight:400; color:var(--muted); margin-top:2px; } .mtp-frm > .mtp-fc { padding:8px 11px 9px; border-top:1px solid var(--line); min-width:0; } .mtp-frm > .mtp-fl:first-child, .mtp-frm > .mtp-fl:first-child + .mtp-fc { border-top:0; } .mtp-in { width:100%; height:30px; padding:0 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-m); display:block; min-width:0; } .mtp-ta { width:100%; min-height:520px; padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-family:var(--f-mono); font-size:var(--fs-s); line-height:1.55; resize:vertical; display:block; tab-size:2; white-space:pre-wrap; overflow-wrap:anywhere; } .mtp-ta.mtp-json { min-height:300px; } .mtp-in:focus, .mtp-ta:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .mtp-in.bad, .mtp-ta.bad { border-color:var(--bad-line); background:var(--bad-soft); } .mtp-note { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; margin-top:5px; } .mtp-note b { color:var(--ink); font-weight:600; } .mtp-note code, .mtp-hint code { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:0 4px; } .mtp-note.amber { color:var(--amber); font-weight:600; } .mtp-note.bad { color:var(--bad); font-weight:600; } .mtp-cnt { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .mtp-cnt.over { color:var(--bad); font-weight:600; } .mtp-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .mtp-row > .mtp-in { flex:1 1 280px; width:auto; } .mtp-chseg .fx-s { font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; padding:2px 8px; cursor:pointer; position:relative; } .mtp-chseg input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .mtp-sw { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:var(--fs); color:var(--ink); font-weight:600; position:relative; } .mtp-sw input { position:absolute; opacity:0; width:1px; height:1px; } .mtp-sw .mtp-track { width:34px; height:19px; border-radius:20px; background:var(--line-3); position:relative; flex:0 0 34px; transition:background .12s; } .mtp-sw .mtp-track::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--surface); box-shadow:var(--sh-1); transition:left .12s; } .mtp-sw input:checked + .mtp-track { background:var(--ok); } .mtp-sw input:checked + .mtp-track::after { left:17px; } .mtp-sw input:focus-visible + .mtp-track { box-shadow:var(--ring); } .mtp-sw small { font-weight:400; color:var(--muted); font-size:var(--fs-xs); } .mtp-hint { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } .mtp-savebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 11px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-2); position:sticky; bottom:8px; z-index:15; } .mtp-dirty { font-size:var(--fs-s); color:var(--amber); font-weight:600; } .mtp-clean { font-size:var(--fs-s); color:var(--faint); } .mtp-probs { display:flex; flex-direction:column; gap:3px; flex:1 1 100%; } .mtp-probs:empty { display:none; } .mtp-probs .alert-bad { margin:0; padding:5px 10px; } .mtp-pseg .fx-s { padding:1px 9px; } table.grid.inner.mtp-pt td { vertical-align:top; } table.grid.inner.mtp-pt td.mtp-pn { width:1%; white-space:nowrap; font-family:var(--f-mono); color:var(--muted); padding-top:9px; } table.grid.inner.mtp-pt input[type="text"], table.grid.inner.mtp-pt textarea { width:100%; min-width:0; height:28px; padding:0 7px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-s); } table.grid.inner.mtp-pt textarea { height:auto; min-height:52px; padding:4px 7px; resize:vertical; line-height:1.4; display:block; } table.grid.inner.mtp-pt input.mono, table.grid.inner.mtp-pt textarea.mono { font-family:var(--f-mono); font-size:var(--fs-xs); } table.grid.inner.mtp-pt input:focus, table.grid.inner.mtp-pt textarea:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } table.grid.inner.mtp-pt input.bad { border-color:var(--bad-line); background:var(--bad-soft); } table.grid.inner.mtp-pt input.dup { border-color:var(--amber-line); background:var(--amber-soft); } table.grid.inner.mtp-pt th.mtp-cn { width:20%; } table.grid.inner.mtp-pt th.mtp-cd { width:24%; } table.grid.inner.mtp-pt th.mtp-ch { width:1%; } table.grid.inner.mtp-pt th.mtp-cu { width:14%; } table.grid.inner.mtp-pt td.mtp-chk { text-align:center; padding-top:8px; } table.grid.inner.mtp-pt td.mtp-chk input { width:15px; height:15px; margin:0; accent-color:var(--accent); } table.grid.inner.mtp-pt td.mtp-rm { width:1%; white-space:nowrap; text-align:right; } .mtp-ins { display:flex; align-items:center; gap:4px; } .mtp-ins .btn { padding:0 6px; font-family:var(--f-mono); font-size:var(--fs-xs); } .mtp-addrow { display:flex; align-items:center; gap:10px; padding:7px 11px; border-top:1px solid var(--line); flex-wrap:wrap; } .mtp-addrow .mtp-hint { flex:1 1 260px; } .mtp-std { display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; padding:7px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .mtp-std .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-right:2px; } .mtp-std .btn { padding:0 6px; font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500; } .mtp-std .btn.on { color:var(--run); border-color:var(--run-line); background:var(--run-soft); } .mtp-sum { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; padding:7px 11px; border-bottom:1px solid var(--line); font-size:var(--fs-s); } .mtp-sum .ok { color:var(--ok); font-weight:600; } .mtp-sum code { font-family:var(--f-mono); font-size:var(--fs-xs); } .panel.mtp-prevp > .pt { flex-wrap:wrap; } .mtp-pbody { padding:9px 11px 11px; display:grid; gap:8px; } .mtp-frame.phone { max-width:377px; margin:0 auto; border-radius:18px; border-width:2px; } .mtp-pframe iframe { height:calc(100vh - 480px); min-height:420px; max-height:1060px; } .mtp-testf { display:flex; gap:7px; align-items:center; flex-wrap:wrap; } .mtp-testf .mtp-in { flex:1 1 220px; width:auto; max-width:420px; height:28px; font-size:var(--fs); } .mtp-test { border-top:1px solid var(--line); padding:9px 11px 10px; background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); display:grid; gap:6px; } .mtp-test .mtp-tl { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } @media (min-width:2100px) { .mtp-frm { grid-template-columns:170px minmax(0,1fr); } } /* ---- the letter alone: a strip above it ------------------------------------- */ body.mtp-solo { margin:0; background:var(--bg); font-family:var(--f-body); } .mtp-strip { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:7px 14px; background:var(--surface); border-bottom:1px solid var(--line); font-size:var(--fs-s); color:var(--muted); } .mtp-strip b { color:var(--ink); font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); } .mtp-strip .sp { flex:1; } .mtp-strip .mtp-sj { color:var(--ink); font-weight:600; } .mtp-solo-frame { display:block; width:100%; border:0; background:#FFFFFF; height:calc(100vh - 44px); min-height:600px; } .mtp-solo-frame.phone { width:375px; max-width:100%; margin:12px auto; border:2px solid var(--line-2); border-radius:18px; height:calc(100vh - 80px); } /* ---- the editor at a phone's width ------------------------------------------- */ @media (max-width:700px) { .mtp-frm { grid-template-columns:minmax(0,1fr); } .mtp-frm > .mtp-fl { border-right:0; padding:6px 10px 2px; } .mtp-frm > .mtp-fc { border-top:0; padding:3px 10px 9px; } .mtp-ta { min-height:360px; } .mtp-pframe iframe { height:560px; } .mtp-strip { gap:4px 10px; } } @media (max-width:560px) { /* the kit's crumbs never shorten: on a phone "Mail templates › order_completed · EN" took three lines out of a 50px bar */ .topbar .crumbs { min-width:0; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mtp-page table.grid.inner tr { padding:6px 10px; border-top:1px solid var(--line); } .mtp-page table.grid.inner tbody tr:first-child { border-top:0; } .mtp-page table.grid.inner tbody td { border-top:0 !important; padding:1px 0 !important; } .mtp-page table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.mtp-pt tbody tr[data-i] { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 10px; } table.grid.inner.mtp-pt td.mtp-pn { display:none; } table.grid.inner.mtp-pt td.mtp-full { grid-column:1 / -1; } table.grid.inner.mtp-pt td.mtp-chk { text-align:left; } .mtp-savebar { bottom:4px; } .mtp-solo-frame.phone { width:100%; border-radius:0; border-width:0; margin:0; } } /* ---- Mail log (2026-10-01) ------------------------------------------------------ As the owner approved the screen in the third round: four tiles, the letters of every day of two weeks, the filter header, a line per letter that opens into five zones, the letter's page. Every class starts with mlg-. The letter in its frame keeps its own colours: it is the letter as the customer got it. */ .mlg-lc { display:inline-block; flex:0 0 auto; font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:600; line-height:15px; color:var(--muted); border:1px solid var(--line-2); border-radius:4px; padding:0 4px; letter-spacing:.03em; } .mlg-oid { font-family:var(--f-mono); font-weight:500; } .mlg-drawer .mut, .mlg-page .mut { color:var(--muted); } .mlg-err { color:var(--bad); } .mlg-warnt { color:var(--amber); } .mlg-sline { color:var(--text); } .mlg-sline.bad { color:var(--bad); font-weight:600; } .mlg-sline.amber { color:var(--amber); font-weight:600; } .mlg-offw { color:var(--amber); font-weight:600; } .mlg-dot { color:var(--line-3); } th .mlg-sep { color:var(--line-3); margin:0 3px; } /* ---- the head -------------------------------------------------------------- */ .phead .sub.mlg-sub { max-width:1040px; margin-top:2px; } .mlg-kpis .kpi { display:block; cursor:pointer; color:inherit; text-decoration:none; } .mlg-kpis .kpi:hover { text-decoration:none; box-shadow:var(--sh-2); border-color:var(--accent-line); } .mlg-kpis .kpi span { color:var(--muted); } .mlg-kpis .kpi.alarm span { color:var(--bad); } .mlg-kpis .kpi.warn span { color:var(--amber); } .mlg-kpis .kpi.mlg-grey { border-left-color:var(--off); } .mlg-kpis .kpi.mlg-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .mlg-kpis .kpi.alarm.mlg-on { box-shadow:0 0 0 2px var(--bad-line), var(--sh-1); } /* ---- the letters per day: a compact table of mono numbers ---------------- */ .panel.mlg-days { margin-bottom:9px; } table.grid.inner.mlg-dt { table-layout:fixed; } table.grid.inner.mlg-dt th.mlg-dlab { width:118px; } table.grid.inner.mlg-dt th.mlg-dsum { width:96px; } table.grid.inner.mlg-dt thead th { height:auto; padding:4px 9px 5px; text-align:right; vertical-align:bottom; line-height:1.25; font-family:var(--f-mono); font-size:var(--fs-s); font-weight:500; letter-spacing:0; text-transform:none; color:var(--text); } table.grid.inner.mlg-dt thead th a { color:inherit; display:block; } table.grid.inner.mlg-dt thead th a:hover { color:var(--accent); text-decoration:none; } table.grid.inner.mlg-dt thead th .wd { display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.mlg-dt thead th.today, table.grid.inner.mlg-dt thead th.today .wd { color:var(--accent); } table.grid.inner.mlg-dt thead th.mlg-dsum { font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); } table.grid.inner.mlg-dt tbody td { text-align:right; white-space:nowrap; font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; color:var(--text); padding:3px 9px; } table.grid.inner.mlg-dt tbody td.lab { text-align:left; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } table.grid.inner.mlg-dt td.nil { color:var(--faint); } table.grid.inner.mlg-dt .mlg-dsum { background:var(--surface-2); border-left:1px solid var(--line-2); } table.grid.inner.mlg-dt td.mlg-dsum { font-weight:600; } table.grid.inner.mlg-dt .on { background:var(--accent-soft); } table.grid.inner.mlg-dt thead th.on a { color:var(--accent); } a.mlg-dn { color:var(--ink); } a.mlg-dn:hover { color:var(--accent); } a.mlg-dn.suppressed { color:var(--off); } a.mlg-dn.failed { color:var(--bad); font-weight:700; } a.mlg-dn.queued { color:var(--amber); font-weight:700; } table.grid.inner.mlg-dt tr.mlg-dr-all td { font-weight:600; } table.grid.inner.mlg-dt tr.mlg-dr-op td { border-top:1px solid var(--line-2); color:var(--muted); } /* ---- the filters ------------------------------------------------------------- */ .fx-net.mlg-reason .fx-neth { color:var(--z-pan); } .fx-net.mlg-reason .fx-neth.full, .fx-net.mlg-reason .fx-neth:hover { color:var(--accent); } .fx-in input.mlg-num { width:108px; font-family:var(--f-mono); } .fx-in input.mlg-num.w-l { width:124px; } /* ---- the list ------------------------------------------------------------ */ #mlg-list { scroll-margin-top:60px; } col.mlg-w-exp { width:1.4%; } col.mlg-w-when { width:6.4%; } col.mlg-w-tpl { width:24.6%; } col.mlg-w-to { width:19.6%; } col.mlg-w-ab { width:13%; } col.mlg-w-st { width:21.5%; } col.mlg-w-op { width:13.5%; } #mlg-grid thead tr.ghead th { font-size:var(--fs-micro); color:var(--muted); } #mlg-grid thead tr.ghead th.mlg-gcus { color:var(--z-cus); } #mlg-grid thead tr.chead th { color:var(--muted); } @media (min-width:561px) { #mlg-grid tbody.orow > tr.r { height:46px; } } @media (min-width:2100px) { #mlg-grid tbody.orow > tr.r { height:49px; } } .tbar .mlg-total { font-size:var(--fs-s); color:var(--muted); } .tbar .mlg-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .mlg-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .mlg-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .mlg-legend i.bad { background:var(--bad); } .mlg-legend i.amber { background:var(--amber); } .mlg-legend i.off { background:var(--off); } .mlg-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .mlg-strip { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; padding:6px 11px; border-bottom:1px solid var(--line); background:var(--accent-soft); font-size:var(--fs-s); color:var(--text); } .mlg-strip .k { color:var(--muted); } .mlg-strip .sp { flex:1; } .mlg-strip .btn { text-decoration:none; } .mlg-c-when .l1 { font-variant-numeric:tabular-nums; } .mlg-c-when .l2 a { font-family:var(--f-mono); color:var(--muted); } .mlg-c-when .l2 a:hover { color:var(--accent); } .mlg-c-tpl .l1 { display:flex; align-items:center; gap:5px; } .mlg-c-tpl .l1 .brandtag { margin-right:0; flex:0 0 auto; } .mlg-c-tpl .l1 .pill { flex:0 0 auto; } .mlg-tn { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .mlg-c-tpl .l2 .mlg-key { font-size:var(--fs-xs); color:var(--text); } .mlg-c-to .l1 { display:flex; align-items:center; gap:5px; } .mlg-addr { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .mlg-c-to .mlg-addr { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .mlg-c-to .l2 a { color:var(--text); font-weight:600; } .mlg-c-to .l2 a:hover { color:var(--accent); } .mlg-find { flex:0 0 auto; width:19px; height:19px; border-radius:5px; display:inline-grid; place-items:center; padding:0; color:var(--faint); border:1px solid transparent; background:transparent; cursor:pointer; } .mlg-find svg { width:12px; height:12px; } tbody.orow:hover .mlg-find { color:var(--accent); border-color:var(--line); background:var(--surface); } .mlg-find:hover { background:var(--accent-soft) !important; border-color:var(--accent-line) !important; } /* the kit prints a second line's .k in --faint: too pale to read on a 4K monitor */ #mlg-grid .l2 .k, #mlg-grid .l1 .k { color:var(--muted); } .mlg-c-ab .l1 { color:var(--text); } .mlg-c-ab .l2 a { color:var(--muted); } .mlg-more { font-size:var(--fs-micro); font-weight:700; color:var(--z-pan); background:var(--z-pan-soft); border:1px solid var(--z-pan-line); border-radius:20px; padding:0 5px; margin-left:4px; font-family:var(--f-body); } .mlg-gone { color:var(--muted); font-style:italic; } .mlg-st { display:flex; align-items:center; gap:5px; } .mlg-tries { font-size:var(--fs-xs); font-weight:700; color:var(--bad); } .mlg-late { color:var(--amber); font-weight:600; } .mlg-c-st .l2, .mlg-c-op .l2 { color:var(--text); } .mlg-c-op .l1 { display:flex; align-items:center; gap:5px; color:var(--text); } .mlg-c-op .l1 b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .mlg-none { color:var(--muted) !important; } tbody.orow.mlg-held > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--off); } tbody.orow.mlg-held > tr.r .mlg-tn { color:var(--text); } tbody.mlg-empty td { padding:16px 11px; font-size:var(--fs-s); color:var(--muted); } tbody.mlg-empty a { font-weight:600; } /* ---- one letter: the opened line and the page share the layout ------------- */ .drawer.mlg-still { animation:none; } .mlg-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } .mlg-dl { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; min-width:0; } .mlg-da, .mlg-db, .mlg-dc { display:grid; gap:10px; align-content:start; min-width:0; } .mlg-dgrid .panel + .panel, .mlg-dgrid .panel { margin-top:0; } @media (min-width:1000px) and (max-width:1599px) { .mlg-dl { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (min-width:1600px) { .mlg-dgrid { grid-template-columns:minmax(0,1fr) 640px; } } @media (min-width:2100px) { .mlg-dgrid { grid-template-columns:minmax(0,1fr) 680px; gap:12px; } .mlg-dl { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:12px; } } .mlg-dhint { font-size:var(--fs-xs); color:var(--muted); } .mlg-drawer .dtitle .btn { text-decoration:none; } .zone.mlg-z-let { border-left:2px solid var(--z-ord); } .zone.mlg-z-let > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.mlg-z-ev { border-left:2px solid var(--z-del); } .zone.mlg-z-ev > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.mlg-z-rcp { border-left:2px solid var(--z-cus); } .zone.mlg-z-rcp > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.mlg-z-ab { border-left:2px solid var(--z-pan); } .zone.mlg-z-ab > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.mlg-z-view { border-left:2px solid var(--line-3); } .zone.mlg-z-view > h4 { color:var(--text); background:var(--surface-2); } .zone > h4 .zt .mono { font-size:var(--fs-xs); } .mlg-drawer .zbody.p0, .mlg-page .pbd.p0 { padding:0; } .mlg-drawer .fields { gap:7px 16px; } /* the facts line up: three columns for the letter, two for the recipient and what it is about */ .mlg-drawer .zone.mlg-z-let .fields { grid-template-columns:repeat(3, minmax(0,1fr)); } .mlg-drawer .zone.mlg-z-rcp .fields, .mlg-drawer .zone.mlg-z-ab .fields { grid-template-columns:repeat(2, minmax(0,1fr)); } .mlg-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .mlg-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .mlg-drawer .f .v .mono, .mlg-page .facts dd .mono { font-size:var(--fs-xs); } .mlg-drawer .actgrid { align-items:center; } .mlg-drawer .actgrid .btn, .mlg-pacts .btn { text-decoration:none; } .pt.mlg-pt-let { background-image:linear-gradient(var(--z-ord-soft), var(--z-ord-soft)); } .pt.mlg-pt-let b { color:var(--z-ord); } .pt.mlg-pt-ev { background-image:linear-gradient(var(--z-del-soft), var(--z-del-soft)); } .pt.mlg-pt-ev b { color:var(--z-del); } .pt.mlg-pt-rcp { background-image:linear-gradient(var(--z-cus-soft), var(--z-cus-soft)); } .pt.mlg-pt-rcp b { color:var(--z-cus); } .pt.mlg-pt-ab { background-image:linear-gradient(var(--z-pan-soft), var(--z-pan-soft)); } .pt.mlg-pt-ab b { color:var(--z-pan); } .pt .hint .mono { font-size:var(--fs-xs); } .mlg-pacts { display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:7px; padding-top:7px; border-top:1px solid var(--line); } /* the events: a whole short table */ table.grid.inner.mlg-t td:first-child, table.grid.inner.mlg-t th:first-child { padding-left:11px; } table.grid.inner.mlg-t td:last-child, table.grid.inner.mlg-t th:last-child { padding-right:11px; } table.grid.inner.mlg-t tbody td { font-size:var(--fs-s); } table.grid.inner.mlg-t td.wrap { white-space:normal; overflow-wrap:anywhere; } table.grid.inner th.mlg-min, table.grid.inner td.mlg-min { width:1%; white-space:nowrap; } table.grid.inner.mlg-t tr.mlg-rbad td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.mlg-t tr.mlg-rok td:first-child { box-shadow:inset 2px 0 0 var(--ok); } table.grid.inner.mlg-t tr.mlg-ramber td:first-child { box-shadow:inset 2px 0 0 var(--amber); } .mlg-zfoot { display:flex; gap:4px 12px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); border-radius:0 0 9px 9px; } .mlg-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .mlg-zfoot .sp { flex:1; } .mlg-zfoot .btn { text-decoration:none; } /* the letter as sent: a mail client's head, then the letter at its own height */ .mlg-vhead { display:flex; flex-wrap:wrap; gap:3px 16px; padding:7px 11px 8px; border-bottom:1px solid var(--line); font-size:var(--fs-s); color:var(--text); line-height:1.45; } .mlg-vhead .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-right:4px; } .mlg-vhead .mono { font-size:var(--fs-xs); } .mlg-vhead .mlg-vsubj { flex-basis:100%; } .mlg-vhead b { color:var(--ink); } iframe.mlg-frame { display:block; width:100%; height:620px; border:0; background:var(--surface-2); } .mlg-nohtml { padding:16px 12px; font-size:var(--fs-s); color:var(--muted); background:var(--surface-2); line-height:1.5; } /* ---- the letter's page ------------------------------------------------------ */ .mlg-ph { min-width:0; flex:1 1 640px; } .mlg-ph .sub.mlg-psub { font-size:var(--fs-m); color:var(--text); margin-top:1px; } .mlg-page .phead .marks { display:flex; align-items:center; flex-wrap:wrap; font-size:var(--fs-s); color:var(--muted); gap:6px; margin-top:4px; } .mlg-page .phead .marks .brandtag { margin-right:0; } .mlg-page .phead .marks .mono { font-size:var(--fs-xs); } .mlg-page .phead .pacts .btn { text-decoration:none; } .mlg-banner { margin-bottom:9px; font-size:var(--fs-s); } .mlg-banner b { font-weight:700; } .mlg-held-b, .mlg-wait-b { background:var(--off-soft); border:1px solid var(--off-line); color:var(--text); border-radius:var(--r); padding:5px 10px; line-height:1.45; } .mlg-wait-b { background:var(--amber-soft); border-color:var(--amber-line); } .mlg-wait-b b { color:var(--amber); } .mlg-page .facts dd .pill { vertical-align:1px; } /* ---- 4K, narrower desktops ---------------------------------------------------- */ @media (min-width:2100px) { table.grid.inner.mlg-dt th.mlg-dlab { width:130px; } } @media (max-width:1300px) { table.grid.inner.mlg-dt .mlg-old:nth-child(-n+5) { display:none; } } /* ---- a phone's width: the page holds together, nothing scrolls sideways --- */ @media (max-width:560px) { .mlg-kpis { flex-wrap:wrap; } .mlg-kpis .kpi { flex:1 1 40%; } .mlg-legend { display:none; } .mlg-dhint { display:none; } /* the day panel stays a table: the five newest days and the total */ table.grid.inner.mlg-dt { display:table; width:100%; table-layout:fixed; } table.grid.inner.mlg-dt thead { display:table-header-group; } table.grid.inner.mlg-dt tbody { display:table-row-group; } table.grid.inner.mlg-dt tr { display:table-row; padding:0; } table.grid.inner.mlg-dt td, table.grid.inner.mlg-dt th { display:table-cell; width:auto; padding:3px 4px; } table.grid.inner.mlg-dt .mlg-old { display:none; } table.grid.inner.mlg-dt th.mlg-dlab { width:76px; } table.grid.inner.mlg-dt th.mlg-dsum { width:58px; } table.grid.inner.mlg-dt tbody td.lab { font-size:var(--fs-micro); letter-spacing:.02em; } table.grid.inner.mlg-dt tbody td, table.grid.inner.mlg-dt thead th { font-size:var(--fs-xs); } .mlg-dpt .hint { display:none; } /* the line becomes a card: when and the status on top, then the letter, the address, the rest */ #mlg-grid tbody.orow > tr.r { height:auto; } #mlg-grid td.mlg-c-when { order:1; flex:1 1 auto; } #mlg-grid td.mlg-c-when .l1, #mlg-grid td.mlg-c-when .l2 { display:inline-block; margin-right:8px; } #mlg-grid td.mlg-c-st { order:2; flex:0 0 auto; margin-left:auto; text-align:right; } #mlg-grid td.mlg-c-st .mlg-st { justify-content:flex-end; } #mlg-grid td.mlg-c-tpl { order:3; flex:1 1 100%; } #mlg-grid td.mlg-c-to { order:4; flex:1 1 100%; } #mlg-grid td.mlg-c-ab { order:5; flex:1 1 45%; margin-top:3px; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } #mlg-grid td.mlg-c-op { order:6; flex:1 1 45%; margin-top:3px; padding-top:5px !important; border-top:1px dashed var(--line-2) !important; } #mlg-grid td.mlg-c-st .l2 { white-space:normal; } /* the events: labelled blocks instead of a squeezed table */ table.grid.inner.mlg-t tr { padding:6px 10px; border-top:1px solid var(--line); } table.grid.inner.mlg-t tbody tr:first-child { border-top:0; } table.grid.inner.mlg-t tbody td { border-top:0 !important; padding:1px 0 !important; } table.grid.inner.mlg-t tbody tr { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:2px 10px; } table.grid.inner.mlg-t tbody td.wrap { grid-column:1 / -1; } table.grid.inner.mlg-t td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.mlg-t tr td:first-child { box-shadow:none !important; } table.grid.inner.mlg-t tr.mlg-rbad { border-left:3px solid var(--bad); } table.grid.inner.mlg-t tr.mlg-rok { border-left:3px solid var(--ok); } table.grid.inner.mlg-t tr.mlg-ramber { border-left:3px solid var(--amber); } .mlg-vhead { gap:2px 10px; } .mlg-drawer .zone.mlg-z-let .fields, .mlg-drawer .zone.mlg-z-rcp .fields, .mlg-drawer .zone.mlg-z-ab .fields { grid-template-columns:repeat(2, minmax(0,1fr)); } } /* ---- Proxies (2026-10-01) --------------------------------------------------------- The pool of mobile proxies and a proxy's own page, as the owner approved the third prototype round: a line per proxy with its numbers by request kind, the pool's own line, the actions on the pool, the add form with its preview, the journal of rotations; the page with the settings, the kinds and every call. The tints are mixed from the kit's tokens, so both themes hold. */ :root { --prx-amber-tint:color-mix(in srgb, var(--amber) 9%, transparent); --prx-bad-tint:color-mix(in srgb, var(--bad) 9%, transparent); } .prx-phead > .prx-ptitle { flex:1 1 560px; min-width:0; } .prx-phead .sub { max-width:1180px; line-height:1.5; } .prx-kpis .kpi { min-width:96px; } .prx-kpis .kpi b { font-variant-numeric:tabular-nums; } .prx-kpis .kpi.prx-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .prx-lab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .prx-none { margin:2px 0; } .prx-wrap { overflow-wrap:anywhere; word-break:break-all; } #prx-pool, #prx-rot, #prx-rpanel, #prx-log, #prx-lpanel { scroll-margin-top:62px; } .drawer.prx-still { animation:none; } /* the pool: the window switch on its title */ .prx-pool > .pt { padding-top:5px; padding-bottom:5px; } .prx-wlab { font-size:var(--fs-xs); color:var(--muted); font-weight:600; } .prx-win .fx-s { font-size:var(--fs-s); } .prx-win a:hover { text-decoration:none; } /* the pool: a line per proxy */ col.prx-w-exp { width:28px; } col.prx-w-px { width:12%; } col.prx-w-now { width:8.8%; } col.prx-w-k { width:6.05%; } col.prx-w-all { width:8.9%; } col.prx-w-rot { width:9.3%; } col.prx-w-ip { width:7.2%; } col.prx-w-act { width:9.9%; } .prx-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .prx-grid tr.ghead th.g-del { color:var(--z-del); } .prx-grid tr.chead th { color:var(--muted); } .prx-grid tr.chead th.prx-kh { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; } .prx-grid th.prx-r, .prx-rgrid th.prx-r { text-align:right; } .prx-grid tr.r { height:58px; } .prx-grid tr.r > td { padding-top:7px; padding-bottom:7px; } .prx-grid .l1 .k, .prx-grid .l2 .k { color:var(--faint); } .prx-no { font-family:var(--f-mono); font-weight:600; } .prx-lb { font-weight:700; color:var(--ink); } .prx-c-px .l2.mono { font-size:var(--fs-xs); color:var(--text); } .prx-c-now .l1 { display:flex; align-items:center; gap:6px; } .prx-stn { font-size:var(--fs-s); font-weight:700; white-space:nowrap; } .prx-stn.ok { color:var(--ok); } .prx-stn.bad { color:var(--bad); } /* the streak: six boxes, the sixth takes the proxy out */ .prx-streak { display:inline-flex; align-items:center; gap:2px; vertical-align:-1px; } .prx-streak i { width:6px; height:11px; border-radius:2px; border:1px solid var(--line-3); background:transparent; } .prx-streak.amber i.on { background:var(--amber); border-color:var(--amber); } .prx-streak.bad i.on { background:var(--bad); border-color:var(--bad); } .prx-streak b { font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-left:4px; } .prx-streak.amber b { color:var(--amber); } .prx-streak.bad b { color:var(--bad); } /* the kind cells: the share of errors on top, the calls and the mean time under it */ .prx-grid tr.r > td.prx-k { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); padding-left:7px; padding-right:7px; } .l1.prx-two { display:flex; align-items:baseline; justify-content:space-between; gap:6px; } .prx-two .prx-tm { font-size:var(--fs-s); color:var(--text); } .prx-grid tr.r > td.prx-k.t-amber { background-image:linear-gradient(var(--prx-amber-tint), var(--prx-amber-tint)); box-shadow:inset 0 -2px 0 var(--amber-line); } .prx-grid tr.r > td.prx-k.t-bad { background-image:linear-gradient(var(--prx-bad-tint), var(--prx-bad-tint)); box-shadow:inset 0 -2px 0 var(--bad-line); } .prx-grid tr.r > td.prx-k.off, .prx-grid tr.r > td.prx-k.none { background-image:none; } .prx-pc { font-family:var(--f-mono); font-weight:600; font-size:var(--fs); font-variant-numeric:tabular-nums; } .prx-pc.ok { color:var(--ok); } .prx-pc.amber { color:var(--amber); } .prx-pc.bad { color:var(--bad); } .prx-pc.none { color:var(--faint); } .prx-k .l2, .prx-c-all .l2 { font-variant-numeric:tabular-nums; color:var(--text); } .prx-cn { font-family:var(--f-mono); font-size:.96em; color:var(--ink); } .prx-tm { font-family:var(--f-mono); font-size:.96em; } .prx-tm.amber { color:var(--amber); font-weight:600; } .prx-tm.bad { color:var(--bad); font-weight:600; } .prx-k.none .l1, .prx-k.none .l2, .prx-k.off .l2 { color:var(--faint); } .prx-offp { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); border:1px dashed var(--line-3); border-radius:5px; padding:0 5px; line-height:15px; margin-right:4px; } .prx-sdot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--z-del); margin:0 0 0 5px; vertical-align:2px; flex:0 0 6px; } .prx-legend .prx-sdot { margin:0 5px 0 0; } .prx-kt { display:none; } .prx-c-all .l1 .k { font-size:var(--fs-xs); } .prx-c-rot .l1 .pill { margin-right:2px; vertical-align:1px; } .prx-c-ip .l1 .btn { margin-top:-1px; } .prx-c-ip .l2 { font-size:var(--fs-xs); } td.prx-c-act { overflow:visible; } .prx-grid td.prx-c-act .acts.prx-acts { flex-direction:column; align-items:flex-end; gap:3px; } .prx-ag { display:flex; gap:3px; justify-content:flex-end; flex-wrap:wrap; } .prx-ag:empty { display:none; } .prx-ag form { margin:0; } .prx-said { display:block; max-width:260px; font-size:var(--fs-xs); line-height:1.35; text-align:right; white-space:normal; } .prx-pooln { display:block; text-align:right; font-size:var(--fs-xs); color:var(--faint); } /* Rotate waits up to ten seconds and more: the button says so meanwhile */ .prx-rotb .prx-busy { display:none; } .prx-rotb.htmx-request .prx-idle { display:none; } .prx-rotb.htmx-request .prx-busy { display:inline; } .prx-rotb.htmx-request { border-color:var(--accent-line); color:var(--accent); } /* the pool's own line and a switched-off proxy */ .prx-grid tbody.prx-poolrow { border-top:2px solid var(--line-2); } .prx-grid tbody.prx-poolrow > tr.r > td { background-color:var(--surface-2); } .prx-grid tbody.prx-poolrow:hover > tr.r > td, .prx-grid tbody.prx-poolrow.open > tr.r > td { background-color:var(--surface-3); } .prx-grid tbody.prx-poolrow .l1 b { font-family:var(--f-head); font-weight:600; color:var(--ink); } .prx-grid tbody.prx-offrow > tr.r > td .l1, .prx-grid tbody.prx-offrow > tr.r > td .l2 { opacity:.62; } /* the legend and the actions on the whole pool */ .prx-legend { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:6px 11px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); } .prx-lgk { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .prx-lg { display:inline-block; width:16px; height:10px; border-radius:3px; border:1px solid; vertical-align:-1px; margin-right:5px; } .prx-lg.ok { background:var(--ok-soft); border-color:var(--ok-line); } .prx-lg.amber { background:var(--amber-soft); border-color:var(--amber-line); } .prx-lg.bad { background:var(--bad-soft); border-color:var(--bad-line); } .prx-legend b { font-weight:700; } .prx-bulk { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 11px; border-top:1px solid var(--line); } .prx-bulk form { margin:0; } .prx-bulk .btn { font-size:var(--fs-s); padding:2px 9px; } .prx-bn { display:inline-block; min-width:17px; margin-left:4px; padding:0 5px; border-radius:20px; background:var(--bad); color:var(--accent-ink); font-size:var(--fs-micro); line-height:15px; text-align:center; } .prx-bnote { font-size:var(--fs-xs); color:var(--faint); } /* the add form: the pasted lines on the left, what they become on the right */ .prx-add { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px 16px; padding:9px 11px 11px; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); } @media (min-width:1300px) { .prx-add { grid-template-columns:minmax(0, 640px) minmax(0, 1fr); } } .prx-addh { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px; margin-bottom:5px; } .prx-addh label { font-size:var(--fs-xs); color:var(--muted); } .prx-addh code { font-size:var(--fs-xs); color:var(--ink); } .prx-add textarea { display:block; width:100%; min-height:86px; resize:vertical; padding:6px 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font-family:var(--f-mono); font-size:var(--fs-s); line-height:1.5; } .prx-add textarea:focus { outline:none; border-color:var(--accent-line); background:var(--surface); box-shadow:var(--ring); } .prx-add textarea::placeholder { color:var(--faint); } .prx-addb { display:flex; align-items:center; gap:10px; margin-top:6px; } .prx-addb .btn { padding:3px 18px; } .prx-addb .hint b { color:var(--ink); } .prx-addnote { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; max-width:780px; } .prx-addnote b { color:var(--text); } table.grid.inner.prx-atab tbody td { vertical-align:middle; white-space:nowrap; } .prx-atab td.prx-arot { max-width:320px; overflow:hidden; text-overflow:ellipsis; } .prx-atab tr.prx-askip td { color:var(--muted); } .prx-atab .k { font-size:var(--fs-xs); color:var(--muted); } /* the drawer of a proxy: four named zones */ .prx-dgrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0, 1fr); grid-template-areas:"k" "r" "c" "n"; } @media (min-width:1300px) { .prx-dgrid { grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas:"k r" "c n"; } } .prx-pgrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0, 1fr); } @media (min-width:1300px) { .prx-pgrid { grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); } } .prx-zk { grid-area:k; border-left:2px solid var(--z-del); } .prx-zk > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .prx-zr { grid-area:r; border-left:2px solid var(--accent); } .prx-zr > h4 { color:var(--accent); background:var(--accent-soft); border-bottom-color:var(--accent-line); } .prx-zc { grid-area:c; border-left:2px solid var(--z-ord); } .prx-zc > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .prx-zn { grid-area:n; border-left:2px solid var(--z-cus); } .prx-zn > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .prx-pgrid .prx-zk, .prx-pgrid .prx-zn { grid-area:auto; } .zone > h4 .views.prx-views { padding:2px; gap:2px; border-radius:7px; letter-spacing:0; text-transform:none; } .prx-views .view { padding:1px 8px; font-family:var(--f-body); font-size:var(--fs-xs); } .drawer .prx-dgrid .facts dt, .drawer .prx-pgrid .facts dt, .drawer .prx-cgrid .facts dt { font-size:var(--fs-micro); color:var(--muted); } .drawer .prx-dgrid .facts dd, .drawer .prx-pgrid .facts dd, .drawer .prx-cgrid .facts dd { font-size:var(--fs-s); } .prx-zlinks { margin-top:7px; font-size:var(--fs-xs); } .prx-zacts { margin-top:8px; } .prx-kform { margin:0; } .prx-kfoot { display:flex; align-items:flex-start; gap:10px; margin-top:8px; } .prx-kfoot .btn { flex:0 0 auto; } .prx-kfoot .hint { font-size:var(--fs-xs); line-height:1.45; color:var(--muted); max-width:760px; } .prx-pnote { margin:7px 0 0; font-size:var(--fs-xs); color:var(--muted); } /* the kinds table: a switch per kind, the numbers of the window */ table.grid.inner.prx-ktab th { color:var(--muted); font-size:var(--fs-micro); letter-spacing:.06em; } table.grid.inner.prx-ktab tbody td { vertical-align:middle; white-space:nowrap; } .prx-ktab tr.prx-all td { background:var(--surface-2); } .prx-ktab tr.prx-all td b { color:var(--ink); } .prx-ktab tr.prx-koff td { color:var(--faint); } .prx-ktab tr.prx-koff td .prx-kn { text-decoration:line-through; text-decoration-color:var(--line-3); } .prx-ktab .prx-kn { color:var(--ink); font-weight:600; } .prx-ktab .pill { margin-left:6px; vertical-align:1px; } .prx-ktab td.prx-e-bad, .prx-ltab td.prx-e-bad { color:var(--bad); font-weight:600; } .prx-ktab td.prx-e-amber, .prx-ltab td.prx-e-amber { color:var(--amber); font-weight:600; } .prx-ktab td.prx-t-bad, .prx-ltab td.prx-t-bad { color:var(--bad); font-weight:600; } .prx-ktab td.prx-t-amber, .prx-ltab td.prx-t-amber { color:var(--amber); font-weight:600; } .prx-ep { font-size:var(--fs-xs); color:var(--muted); font-weight:400; margin-left:3px; } .prx-e-bad .prx-ep, .prx-e-amber .prx-ep { color:inherit; } td.prx-lk { text-align:right; } td.prx-lk a { font-size:var(--fs-xs); font-weight:600; } th.prx-swh, td.prx-swc { width:1%; } table.grid.inner.prx-ltab tbody td { vertical-align:middle; white-space:nowrap; } .prx-share { display:inline-block; width:84px; height:7px; border-radius:20px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; vertical-align:1px; margin-right:6px; } .prx-share i { display:block; height:100%; background:var(--z-del); } .prx-sharev { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); } /* a switch: on is green */ .prx-sw { display:inline-flex; align-items:center; gap:6px; cursor:pointer; position:relative; margin:0; } .prx-sw input { position:absolute; opacity:0; width:1px; height:1px; margin:0; } .prx-swt { position:relative; width:27px; height:15px; flex:0 0 27px; border-radius:20px; background:var(--line-3); transition:background .12s; } .prx-swt::after { content:''; position:absolute; left:2px; top:2px; width:11px; height:11px; border-radius:50%; background:var(--surface); box-shadow:var(--sh-1); transition:left .12s; } .prx-sw input:checked + .prx-swt { background:var(--ok); } .prx-sw input:checked + .prx-swt::after { left:14px; } .prx-sw input:focus-visible + .prx-swt { box-shadow:var(--ring); } .prx-swl { font-size:var(--fs-xs); font-weight:700; color:var(--muted); min-width:18px; } .prx-sw input:checked ~ .prx-swl { color:var(--ok); } /* the latest calls and the rotations inside a drawer */ table.grid.inner.prx-ctab { table-layout:fixed; } table.grid.inner.prx-ctab th:nth-child(1) { width:118px; } table.grid.inner.prx-ctab th:nth-child(2) { width:104px; } table.grid.inner.prx-ctab th:nth-child(4) { width:46px; } table.grid.inner.prx-ctab th:nth-child(5) { width:76px; } table.grid.inner.prx-ctab th:nth-child(6) { width:72px; } table.grid.inner.prx-ctab th:nth-child(7) { width:62px; } table.grid.inner.prx-ctab th:nth-child(8) { width:27%; } table.grid.inner.prx-ctab tbody td { vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .prx-ctab td.prx-curl .mono, .prx-ctab td.prx-cinfo span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .prx-ctab td.prx-curl .mono { font-size:var(--fs-xs); } .prx-ctab td.prx-cinfo { font-size:var(--fs-xs); color:var(--bad); } .prx-ctab tr.prx-cbad td { background:var(--bad-row); } .prx-ctab tr.prx-cwarn td { background:var(--warn-row); } .prx-ctab tr.prx-cbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } .prx-ctab tr.prx-cwarn td:first-child { box-shadow:inset 3px 0 0 var(--amber); } .prx-ctab .k { color:var(--faint); font-size:var(--fs-xs); } table.grid.inner.prx-rtab { margin-top:8px; } table.grid.inner.prx-rtab tbody td { vertical-align:middle; } /* the rotations: the journal under the pool */ .prx-rgrid col.prx-rw-when { width:10%; } .prx-rgrid col.prx-rw-px { width:15%; } .prx-rgrid col.prx-rw-ip { width:20%; } .prx-rgrid col.prx-rw-oc { width:22%; } .prx-rgrid col.prx-rw-took { width:9%; } .prx-rgrid col.prx-rw-raw { width:24%; } .prx-rgrid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .prx-rgrid tr.chead th { color:var(--muted); } table.grid.prx-rgrid tr.r.prx-rr { height:46px; cursor:default; } .prx-rgrid tr.r > td { padding-top:5px; padding-bottom:5px; } .prx-rgrid td.num { text-align:right; } .prx-rgrid .l2.mono { font-size:var(--fs-xs); color:var(--faint); } .prx-rgrid .prx-rc-ip .l1 { font-size:var(--fs-s); } .prx-rleg { display:flex; flex-wrap:wrap; gap:3px 14px; font-size:var(--fs-xs); color:var(--muted); } .prx-empty { padding:18px 12px !important; color:var(--muted); font-size:var(--fs-s); text-align:center; } .prx-fxno { font-family:var(--f-mono); font-weight:600; } .tbar .hint b { color:var(--ink); } /* the page of one proxy */ .prx-hrow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .prx-hrow h1 { margin:0; } .prx-hrow .pill { text-transform:none; font-size:var(--fs-xs); line-height:18px; padding:0 9px; } .prx-hl { font-family:var(--f-head); font-weight:600; font-size:var(--fs-l); color:var(--text); } .prx-phead .sub .mono { color:var(--ink); } .prx-marks { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:5px; font-size:var(--fs-s); color:var(--muted); } .prx-switch { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 0 10px; } .prx-swlab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-left:6px; } .prx-switch .fx-seg a:hover { text-decoration:none; } .prx-switch .fx-s { font-size:var(--fs-s); } .prx-actp { margin-bottom:9px; } .prx-actp .actrow .sp { flex:1; } .prx-actp .actrow .btn { font-size:var(--fs-s); padding:2px 10px; } .prx-actp .actrow form { margin:0; } .prx-why { margin:7px 0 0; font-size:var(--fs-xs); color:var(--muted); } .prx-why b { color:var(--text); } p.prx-why.prx-said { max-width:none; text-align:left; font-size:var(--fs-s); font-weight:600; } /* the settings: the fields line up in a grid, the kinds under them in the same form */ .cgrid.prx-cg { grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); } .cgrid.prx-cg > .panel { margin-top:0; } .prx-fgrid { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:9px 12px; align-items:start; } .prx-f { display:flex; flex-direction:column; gap:3px; min-width:0; grid-column:span 2; } .prx-f.w2 { grid-column:span 2; } .prx-f.w3 { grid-column:span 4; } .prx-f.full { grid-column:1 / -1; } .prx-f > label { font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); } .prx-fnote { font-weight:400; color:var(--faint); } .prx-f input, .prx-f textarea { width:100%; height:28px; padding:0 9px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:var(--fs-s); } .prx-f input.mono, .prx-f textarea.mono { font-family:var(--f-mono); } .prx-f textarea { height:auto; min-height:46px; padding:5px 9px; resize:vertical; line-height:1.45; } .prx-f input:focus, .prx-f textarea:focus { outline:none; border-color:var(--accent-line); background:var(--surface); box-shadow:var(--ring); } .prx-f input::placeholder, .prx-f textarea::placeholder { color:var(--faint); } .prx-f input.prx-bad { border-color:var(--bad-line); background:var(--bad-soft); } .prx-fwarn { margin-top:8px; padding:5px 9px; border:1px solid var(--bad-line); background:var(--bad-soft); color:var(--bad); border-radius:var(--r-sm); font-size:var(--fs-s); font-weight:600; } .prx-rseg { display:inline-flex; align-items:center; gap:2px; padding:2px; height:28px; background:var(--surface-3); border:1px solid var(--line); border-radius:8px; align-self:flex-start; } .prx-rseg label { position:relative; cursor:pointer; margin:0; } .prx-rseg input { position:absolute; opacity:0; width:1px; height:1px; margin:0; } .prx-rseg span { display:block; padding:0 11px; line-height:22px; border-radius:6px; font-size:var(--fs-s); font-weight:600; color:var(--muted); } .prx-rseg label:hover span { color:var(--ink); background:var(--surface); } .prx-rseg input:checked + span { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1), 0 0 0 1px var(--line-2); } .prx-rseg input:focus-visible + span { box-shadow:var(--ring); } .prx-fst { flex-direction:row; flex-wrap:wrap; align-items:center; gap:3px 8px; } .prx-fst > label { flex:1 1 100%; } .prx-fstat { font-size:var(--fs-xs); } .prx-form .pt.prx-pt2 { border-radius:0; border-top:1px solid var(--line); } .prx-form .prx-ktab { margin:0; } .prx-ffoot { display:flex; align-items:flex-start; gap:12px; padding:9px 11px 11px; border-top:1px solid var(--line); } .prx-ffoot .btn { padding:3px 20px; flex:0 0 auto; } .prx-ffoot .hint { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } /* the log of calls */ .prx-lgrid col.prx-lw-exp { width:28px; } .prx-lgrid col.prx-lw-id { width:8.4%; } .prx-lgrid col.prx-lw-when { width:8.6%; } .prx-lgrid col.prx-lw-kind { width:9.4%; } .prx-lgrid col.prx-lw-url { width:28%; } .prx-lgrid col.prx-lw-ans { width:10.6%; } .prx-lgrid col.prx-lw-size { width:6.4%; } .prx-lgrid col.prx-lw-took { width:5.4%; } .prx-lgrid col.prx-lw-info { width:21.4%; } .prx-lgrid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .prx-lgrid tr.chead th { color:var(--muted); } .prx-lgrid th.prx-r, .prx-lgrid td.num { text-align:right; } table.grid.prx-lgrid tr.r { height:46px; } .prx-lgrid tr.r > td { padding-top:5px; padding-bottom:5px; } .prx-lgrid .l1 .k, .prx-lgrid .l2 .k { color:var(--faint); } .prx-lc-id .l1 a { font-weight:600; } .prx-lc-url .l1.mono { font-size:var(--fs-s); } .prx-lc-url .l2.mono { font-size:var(--fs-xs); color:var(--muted); } .prx-lc-ans .l1 .pill { vertical-align:1px; } .prx-http { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); margin-left:3px; } .prx-lc-ans .l2.prx-aw { color:var(--bad); } .prx-info { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; overflow-wrap:anywhere; font-family:var(--f-mono); font-size:var(--fs-xs); line-height:1.35; color:var(--text); } .prx-info.bad { color:var(--bad); } /* the drawer of one call: what was sent, what came back, the full text */ .prx-cgrid { display:grid; gap:10px; grid-template-columns:minmax(0, 1fr); align-items:start; } @media (min-width:1300px) { .prx-cgrid { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); } } .prx-cgrid .zone { grid-area:auto; } .prx-zbad { border-left:2px solid var(--bad); } .prx-zbad > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .prx-zwarn { border-left:2px solid var(--amber); } .prx-zwarn > h4 { color:var(--amber); background:var(--amber-soft); border-bottom-color:var(--amber-line); } .prx-mean { margin:8px 0 0; font-size:var(--fs-s); color:var(--text); line-height:1.45; } .prx-mean b { color:var(--ink); } .errbox.prx-infobox { border-color:var(--line-2); background:var(--surface-2); } .errbox.prx-infobox .ec { color:var(--muted); } .prx-cgrid .errbox p.mono { font-size:var(--fs-xs); } .prx-text { margin:0; max-height:none; font-size:var(--fs-xs); line-height:1.5; } /* the two-row sticky head: the kit's 71px leaves a one-pixel slit under the caption row */ table.grid.prx-grid thead tr.ghead + tr.chead th, table.grid.prx-rgrid thead tr.ghead + tr.chead th, table.grid.prx-lgrid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } /* 4K */ @media (min-width:2100px) { .prx-grid tr.r { height:62px; } col.prx-w-px { width:10.4%; } col.prx-w-now { width:8.6%; } col.prx-w-k { width:6.6%; } col.prx-w-all { width:9%; } col.prx-w-rot { width:9.2%; } col.prx-w-ip { width:6.8%; } col.prx-w-act { width:8.6%; } .prx-grid tr.r > td.prx-k { padding-left:9px; padding-right:9px; } } /* a narrower desktop: the line sheds its quieter words, never its numbers */ @media (max-width:1700px) { col.prx-w-px { width:12.4%; } col.prx-w-now { width:9.4%; } col.prx-w-k { width:5.8%; } col.prx-w-all { width:8.6%; } col.prx-w-rot { width:9.6%; } col.prx-w-ip { width:7.4%; } col.prx-w-act { width:10.2%; } .prx-grid .prx-k .l1.prx-two .prx-tm { display:none; } .prx-grid .prx-k .l2 .prx-kc { display:none; } .prx-grid .prx-k .l2 .prx-kt { display:inline; } .prx-lgrid col.prx-lw-id { width:9%; } .prx-lgrid col.prx-lw-when { width:9.6%; } .prx-lgrid col.prx-lw-kind { width:10%; } .prx-lgrid col.prx-lw-url { width:25%; } .prx-lgrid col.prx-lw-ans { width:11.6%; } .prx-lgrid col.prx-lw-size { width:7.2%; } .prx-lgrid col.prx-lw-took { width:6.4%; } .prx-lgrid col.prx-lw-info { width:19%; } } @media (max-width:1400px) and (min-width:561px) { col.prx-w-ip { width:0; } .prx-grid th:nth-last-child(2), .prx-grid tr.r > td.prx-c-ip { display:none; } .prx-grid tr.ghead th:nth-last-child(2) { display:none; } col.prx-w-px { width:13.4%; } col.prx-w-now { width:10.6%; } col.prx-w-k { width:6.1%; } col.prx-w-all { width:10.2%; } col.prx-w-rot { width:10.8%; } col.prx-w-act { width:11.6%; } } @media (max-width:1280px) { .cgrid.prx-cg { grid-template-columns:minmax(0, 1fr); } } @media (max-width:900px) { .prx-fgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .prx-f, .prx-f.w2 { grid-column:span 1; } .prx-f.w3, .prx-f.full { grid-column:1 / -1; } } /* a phone's width: the page holds together, nothing scrolls sideways */ @media (max-width:560px) { .prx-kpis .kpi { flex:1 1 30%; min-width:0; } .prx-pool > .pt { gap:5px 8px; } .prx-pool > .pt .hint { flex:1 1 100%; } .prx-legend { gap:3px 10px; } /* the line becomes a card: the proxy and its state on top, the seven kinds in a grid, the rest under them */ table.grid.prx-grid tr.r { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px 8px; padding:9px 36px 10px 11px; height:auto; } table.grid.prx-grid tr.r > td.prx-c-px, table.grid.prx-grid tr.r > td.prx-c-now { grid-column:1 / -1; } table.grid.prx-grid tr.r > td.prx-k { grid-column:span 1; padding:4px 5px !important; border:1px solid var(--line) !important; border-radius:6px; } table.grid.prx-grid tr.r > td.prx-k::before { content:attr(data-short); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } table.grid.prx-grid tr.r > td.prx-k .l2 { white-space:normal; } table.grid.prx-grid tr.r > td.prx-c-all, table.grid.prx-grid tr.r > td.prx-c-rot { grid-column:span 2; } table.grid.prx-grid tr.r > td.prx-c-ip { grid-column:1 / -1; display:flex; align-items:center; gap:8px; } table.grid.prx-grid tr.r > td.prx-c-ip .l2 { margin:0; } table.grid.prx-grid tr.r > td.prx-c-act { grid-column:1 / -1; } table.grid.prx-grid td.prx-c-act .acts.prx-acts { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:4px 8px; } table.grid.prx-grid td.prx-c-act .prx-ag { justify-content:flex-start; } .prx-said { text-align:left; max-width:none; } table.grid.prx-grid tbody.prx-poolrow > tr.r > td.prx-c-ip { display:none; } .prx-pooln { text-align:left; } .prx-dgrid, .prx-pgrid { grid-template-columns:minmax(0, 1fr); grid-template-areas:"k" "r" "c" "n"; } /* the tables inside a drawer turn into labelled blocks instead of being squeezed */ .drawer table.grid.inner thead, .prx-form table.grid.inner thead, .stack table.grid.inner thead, table.grid.inner.prx-atab thead { display:none; } .drawer table.grid.inner tbody tr, .prx-form table.grid.inner tbody tr, .stack table.grid.inner tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px 10px; padding:6px 2px; border-top:1px solid var(--line); } .prx-form table.grid.inner tbody tr { padding:6px 11px; } .drawer table.grid.inner tbody tr:first-child, .stack table.grid.inner tbody tr:first-child { border-top:0; } .drawer table.grid.inner tbody td, .prx-form table.grid.inner tbody td, .stack table.grid.inner tbody td { padding:0 !important; border:0 !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; box-shadow:none !important; } .drawer table.grid.inner td[data-l]::before, .prx-form table.grid.inner td[data-l]::before, .stack table.grid.inner td[data-l]::before, table.grid.inner.prx-atab td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .drawer table.grid.inner.prx-ktab.prx-ked tbody td.prx-swc { grid-column:1; } .drawer table.grid.inner.prx-ktab.prx-ked tbody td:nth-child(2), .prx-form table.grid.inner.prx-ked tbody td:nth-child(2) { grid-column:2 / -1; } .drawer table.grid.inner.prx-ctab tbody td.prx-curl, .drawer table.grid.inner.prx-ctab tbody td.prx-cinfo, .stack table.grid.inner td[data-l="Before → after"] { grid-column:1 / -1; } .drawer table.grid.inner.prx-ctab { table-layout:auto; } .drawer .zone > h4 .sp { display:none; } .prx-kfoot, .prx-ffoot { flex-direction:column; } .prx-add { padding:9px 10px; } table.grid.inner.prx-atab tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:3px 10px; padding:6px 0; border-top:1px solid var(--line); } table.grid.inner.prx-atab tbody td { padding:0 !important; border:0 !important; white-space:normal; overflow-wrap:anywhere; } /* the rotations and the calls: a card each */ table.grid.prx-rgrid tr.r.prx-rr { display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 11px; height:auto; } .prx-rgrid td.prx-rc-when { order:1; flex:1 1 auto; } .prx-rgrid td.prx-rc-oc { order:2; flex:0 1 auto; text-align:right; } .prx-rgrid td.prx-rc-oc .l2 { display:none; } .prx-rgrid td.prx-rc-px { order:3; flex:1 1 100%; } .prx-rgrid td.prx-rc-ip { order:4; flex:1 1 100%; } .prx-rgrid td.prx-rc-took { order:5; flex:0 0 auto; text-align:left; } .prx-rgrid td.prx-rc-raw { order:6; flex:1 1 60%; } .prx-rleg { display:none; } .prx-hl { font-size:var(--fs-m); } .prx-switch .fx-seg { width:100%; } .prx-switch .fx-s { flex:1 1 45%; justify-content:center; } .prx-actp .actrow .sp { display:none; } .prx-fgrid { grid-template-columns:minmax(0, 1fr); } .prx-f, .prx-f.w2, .prx-f.w3 { grid-column:1 / -1; } .prx-form .pt.prx-pt2 .fx-seg { width:100%; } table.grid.prx-lgrid tr.r { display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 34px 9px 11px; height:auto; } .prx-lgrid td.prx-lc-when { order:1; flex:1 1 auto; } .prx-lgrid td.prx-lc-ans { order:2; flex:0 1 auto; text-align:right; } .prx-lgrid td.prx-lc-kind { order:3; flex:1 1 40%; } .prx-lgrid td.prx-lc-id { order:4; flex:1 1 40%; } .prx-lgrid td.prx-lc-url { order:5; flex:1 1 100%; } .prx-lgrid td.prx-lc-size { order:6; flex:0 0 auto; text-align:left; } .prx-lgrid td.prx-lc-took { order:7; flex:0 0 auto; text-align:left; } .prx-lgrid td.prx-lc-info { order:8; flex:1 1 100%; } .prx-lgrid td.prx-lc-info .mut { display:none; } .prx-cgrid { grid-template-columns:minmax(0, 1fr); } } /* ---- Instagram accounts (2026-10-01) ----------------------------------------------- The list of the Instagram account pool, as the owner approved the third prototype round: five tiles, the whole pool beside its actions, the filter header, a line per account that opens into five zones. The colours are the kit's tokens, so both themes hold. */ .iga-headl { flex:1 1 560px; min-width:0; } .iga-hrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .iga-hrow h1 { margin:0 4px 0 0; } .phead .sub.iga-sub { max-width:1180px; margin-top:3px; line-height:1.45; } .iga-kpis .kpi { min-width:96px; } .iga-kpis .kpi b { font-variant-numeric:tabular-nums; white-space:nowrap; } .iga-kpis .kpi b small { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-left:6px; } .iga-kpis .kpi.iga-red { border-left-color:var(--bad); } .iga-kpis .kpi.iga-red.iga-hot { background:var(--bad-soft); border-color:var(--bad-line); border-left-color:var(--bad); } .iga-kpis .kpi.iga-red.iga-hot b { color:var(--bad); } .iga-kpis .kpi.iga-amber { border-left-color:var(--amber); } .iga-kpis .kpi.iga-amber.iga-hot { background:var(--amber-soft); border-color:var(--amber-line); } .iga-kpis .kpi.iga-amber.iga-hot b { color:var(--amber); } .iga-kpis .kpi.iga-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .drawer.iga-still { animation:none; } /* the pool and its actions */ .iga-top { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:stretch; margin-bottom:9px; } .iga-top > .panel { display:flex; flex-direction:column; min-width:0; margin:0; } @media (min-width:1500px) { .iga-top { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } } @media (min-width:2100px) { .iga-top { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } } @media (min-width:1500px) and (max-width:2099px) { table.grid.inner.iga-pool .iga-since { display:none; } } table.grid.inner.iga-pool { font-size:var(--fs-s); } table.grid.inner.iga-pool thead tr.iga-hg th { height:20px; border-bottom:0; color:var(--muted); } table.grid.inner.iga-pool thead tr.iga-hg th.iga-g-health { color:var(--z-del); } table.grid.inner.iga-pool thead tr.iga-hg th.iga-g-day { color:var(--run); } table.grid.inner.iga-pool th.gs, table.grid.inner.iga-pool td.gs { border-left:1px solid var(--line-2); } table.grid.inner.iga-pool td.mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner.iga-pool th.num { text-align:right; } table.grid.inner.iga-pool td.mn a { color:var(--ink); } table.grid.inner.iga-pool td.mn a:hover { color:var(--accent); } table.grid.inner.iga-pool td.mn.iga-z, table.grid.inner.iga-pool td.mn.iga-z a { color:var(--faint); } table.grid.inner.iga-pool td.mn.iga-bad a, table.grid.inner.iga-pool td.mn.iga-bad { color:var(--bad); font-weight:600; } table.grid.inner.iga-pool td.mn.iga-amb a, table.grid.inner.iga-pool td.mn.iga-amb { color:var(--amber); font-weight:600; } table.grid.inner.iga-pool td.mn.iga-okc a, table.grid.inner.iga-pool td.mn.iga-okc { color:var(--ok); font-weight:600; } table.grid.inner.iga-pool td.lab { white-space:nowrap; } table.grid.inner.iga-pool td.iga-pmk { white-space:nowrap; font-size:var(--fs-s); } table.grid.inner.iga-pool td.iga-pmk a { font-weight:600; } table.grid.inner.iga-pool td.iga-pmk a.iga-mamb { color:var(--amber); } table.grid.inner.iga-pool td.iga-pmk a.iga-mbad { color:var(--bad); } table.grid.inner.iga-pool .iga-e { color:var(--bad); } table.grid.inner.iga-pool td:first-child, table.grid.inner.iga-pool th:first-child { padding-left:11px; } table.grid.inner.iga-pool td:last-child, table.grid.inner.iga-pool th:last-child { padding-right:11px; } .iga-sm { font-size:var(--fs-xs); color:var(--muted); font-family:var(--f-body); } .iga-cap { display:flex; flex-wrap:wrap; gap:4px 18px; padding:5px 11px 6px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); margin-top:auto; } .panel.iga-acts { border-left:3px solid var(--accent); } .iga-arow { display:grid; grid-template-columns:128px minmax(0,1fr); border-top:1px solid var(--line); } .iga-acts > .pt + .iga-arow { border-top:0; } .iga-alab { padding:8px 8px 7px 11px; background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); line-height:1.35; } .iga-alab small { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:400; letter-spacing:0; text-transform:none; color:var(--faint); } .iga-arow:last-child .iga-alab { border-radius:0 0 0 var(--r-lg); } .iga-arc { padding:6px 10px 7px; min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center; } .iga-arc .actrow { gap:5px; } .iga-arc form { margin:0; } .iga-ahint { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .iga-ahint b { color:var(--text); font-weight:600; } .btn .iga-bn { font-family:var(--f-mono); font-weight:600; font-size:var(--fs-xs); margin-left:5px; padding:0 5px; border-radius:20px; background:var(--surface-3); color:var(--muted); } .btn.danger .iga-bn { background:var(--surface); color:var(--bad); } .btn.pri .iga-bn { background:rgba(255,255,255,.18); color:inherit; } .btn .iga-bn.iga-bz { opacity:.7; } /* the filter rows: from a 1500 px screen in two columns */ @media (min-width:1500px) { #iga-filters.fx.v1 .fx-body { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } #iga-filters.fx.v1 .fx-blk.side { border-left:1px solid var(--line-2); } #iga-filters.fx.v1 .fx-blk.side > .fx-lh:first-child, #iga-filters.fx.v1 .fx-blk.side > .fx-lh:first-child + .fx-rc { border-top:0; } #iga-filters.fx.v1 .fx-blk.wide { grid-column:1 / -1; border-top:1px solid var(--line-2); } #iga-filters.fx.v1 .fx-blk.wide > .fx-lh:first-child, #iga-filters.fx.v1 .fx-blk.wide > .fx-lh:first-child + .fx-rc { border-top:0; } } .fx.v1 .fx-lh.iga-ban { background-image:linear-gradient(color-mix(in srgb, var(--bad) 5%, transparent), color-mix(in srgb, var(--bad) 5%, transparent)); } .fx.v1 .fx-lh.iga-ban .fx-lab:not(.set) { color:var(--bad); } .fx.v1 .fx-lh.iga-work { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .fx.v1 .fx-lh.iga-work .fx-lab:not(.set) { color:var(--z-del); } .iga-miss { font-size:var(--fs-xs); color:var(--amber); font-weight:600; } .iga-rownote { font-size:var(--fs-xs); color:var(--faint); } /* the list */ .iga-grid col.iga-w-acc { width:17%; } .iga-grid col.iga-w-st { width:16%; } .iga-grid col.iga-w-px { width:17%; } .iga-grid col.iga-w-req { width:13%; } .iga-grid col.iga-w-now { width:9%; } .iga-grid col.iga-w-used { width:10%; } .iga-grid col.iga-w-act { width:16%; } table.grid.iga-grid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } .iga-grid thead th.right { text-align:right; } .iga-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .iga-grid tr.ghead th.g-del { color:var(--z-del); } .iga-grid tr.chead th { color:var(--muted); } .tbar .iga-total { font-size:var(--fs-s); color:var(--muted); } .tbar .iga-total b { color:var(--ink); font-weight:700; font-size:var(--fs); } .iga-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .iga-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .iga-legend i.bad { background:var(--bad); } .iga-legend i.amber { background:var(--amber); } .iga-legend i.off { background:var(--off); } .iga-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } tr.r > td.iga-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .iga-c-acc .l1 a.iga-user { font-weight:600; color:var(--ink); } .iga-c-acc .l1 a.iga-user:hover { color:var(--accent); } .iga-c-acc .l1 .k { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); margin-left:6px; font-weight:400; } .iga-c-st .l1 { display:flex; align-items:center; gap:4px; } .iga-c-st .l2.iga-why { white-space:nowrap; } .iga-tbad { color:var(--bad); } .iga-tamber { color:var(--amber); } .iga-c-px .l1 { font-family:var(--f-mono); font-size:var(--fs-s); } .iga-c-px .l2 .iga-noua { color:var(--amber); font-weight:600; } .iga-c-req .l1, .iga-c-now .l1 { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; } .iga-c-req .l1 b { font-weight:500; color:var(--ink); } .iga-c-req .l1 .iga-e { color:var(--bad); } .iga-c-req .l1 .iga-u, .iga-c-now .l1 .iga-u { font-family:var(--f-body); font-size:var(--fs-xs); color:var(--faint); margin-left:3px; } .iga-rate.ok { color:var(--ok); font-weight:600; } .iga-rate.amber { color:var(--amber); font-weight:600; } .iga-rate.bad { color:var(--bad); font-weight:600; } .iga-sk0 { color:var(--muted); } .iga-sk1 { color:var(--amber); font-weight:700; } .iga-sk3 { color:var(--bad); font-weight:700; } .l1.iga-fresh { color:var(--ok); font-weight:600; } .l1.iga-never { color:var(--faint); } tbody.orow.iga-delrow > tr.r > td { color:var(--muted); } tbody.orow.iga-delrow > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--off); } tbody.orow.iga-delrow .iga-user { color:var(--muted) !important; } .btn.iga-refused, td.c-act .acts .btn.iga-refused { border-style:dashed; color:var(--muted); background:transparent; opacity:1; } .iga-nothing { padding:14px 11px !important; } .iga-said { display:block; margin-top:4px; font-size:var(--fs-xs); line-height:1.35; text-align:right; white-space:normal; } /* Test waits for Instagram: the button says so meanwhile */ .iga-testb .iga-busy { display:none; } .iga-testb.htmx-request .iga-idle { display:none; } .iga-testb.htmx-request .iga-busy { display:inline; } /* the drawer: five named zones */ .iga-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1000px) { .iga-dgrid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); } } @media (min-width:2100px) { .iga-dgrid { grid-template-columns:minmax(0,4fr) minmax(0,3.6fr) minmax(0,5fr); gap:12px; } } @media (min-width:1000px) and (max-width:2099px) { .iga-dcol.iga-d3 { grid-column:1 / -1; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start; } } .iga-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .zone.iga-z-acc { border-left:2px solid var(--z-cus); } .zone.iga-z-acc > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.iga-z-ban { border-left:2px solid var(--bad); } .zone.iga-z-ban > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .zone.iga-z-work { border-left:2px solid var(--z-del); } .zone.iga-z-work > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.iga-z-ses { border-left:2px solid var(--z-pan); } .zone.iga-z-ses > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.iga-z-calls { border-left:2px solid var(--z-ord); } .zone.iga-z-calls > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone > h4 .zn { font-variant-numeric:tabular-nums; } .iga-drawer .fields { gap:7px 16px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); } .iga-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .iga-drawer .f .v { font-size:var(--fs-s); line-height:1.4; } .iga-drawer .f .v.mono, .iga-drawer .f .v .mono { font-size:var(--fs-xs); overflow-wrap:anywhere; } .iga-drawer .errbox { margin:0 0 8px; } .errbox.iga-warn { border-color:var(--amber-line); background:var(--amber-soft); } .errbox.iga-warn .ec { color:var(--amber); } .errbox.iga-off { border-color:var(--off-line); background:var(--off-soft); } .errbox.iga-off .ec { color:var(--off); } .iga-drawer .actgrid { align-items:center; } .iga-zhint { margin-top:7px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .iga-zfoot { display:flex; gap:4px 14px; flex-wrap:wrap; align-items:center; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .iga-zfoot b { color:var(--ink); font-family:var(--f-mono); font-weight:500; } .iga-zfoot .sp { flex:1; } .iga-zfoot a { font-weight:600; } .iga-zempty { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); } .iga-marks { display:grid; gap:5px; margin:0 0 8px; } .iga-mark { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 9px; align-items:baseline; font-size:var(--fs-s); line-height:1.4; } .iga-mark .pill { justify-self:start; } .iga-nomark { font-size:var(--fs-s); color:var(--muted); margin:0 0 8px; } .iga-say { display:flex; gap:7px; align-items:flex-start; font-size:var(--fs-s); line-height:1.45; color:var(--text); margin-top:5px; } .iga-say i { flex:0 0 7px; width:7px; height:7px; border-radius:50%; margin-top:6px; background:var(--off); } .iga-say i.ok { background:var(--ok); } .iga-say i.amber { background:var(--amber); } .iga-say i.bad { background:var(--bad); } .iga-say i.run { background:var(--run); } .iga-bar { display:flex; height:10px; border-radius:20px; overflow:hidden; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); margin:3px 0 5px; } .iga-bar i { display:block; height:100%; } .iga-bar i.g { background:var(--ok); } .iga-bar i.b { background:var(--bad); } .iga-bh { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; } .iga-bh b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .iga-bh .v { margin-left:auto; font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); font-variant-numeric:tabular-nums; } .iga-nums { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px 12px; margin-top:6px; } .iga-num { min-width:0; } .iga-num .k { display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .iga-num .v { display:block; font-family:var(--f-mono); font-size:var(--fs); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .iga-num .v small { font-family:var(--f-body); font-size:var(--fs-xs); color:var(--muted); } .iga-num .v.bad { color:var(--bad); font-weight:600; } .iga-num .v.amber { color:var(--amber); font-weight:600; } .iga-sesum { margin-bottom:6px; } .iga-json { margin:0; padding:7px 10px; background:var(--well); border:1px solid var(--line); border-radius:var(--r); font-family:var(--f-mono); font-size:var(--fs-xs); line-height:1.5; color:var(--text); white-space:pre-wrap; word-break:break-all; max-height:320px; overflow:auto; } table.grid.inner.iga-t { font-size:var(--fs-s); } table.grid.inner.iga-t tbody td { font-size:var(--fs-s); } table.grid.inner.iga-t td:first-child, table.grid.inner.iga-t th:first-child { padding-left:11px; } table.grid.inner.iga-t td:last-child, table.grid.inner.iga-t th:last-child { padding-right:11px; } table.grid.inner.iga-t td.mn { font-family:var(--f-mono); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } table.grid.inner.iga-t th.num { text-align:right; } table.grid.inner.iga-t td.iga-info { white-space:normal; overflow-wrap:anywhere; color:var(--muted); font-size:var(--fs-xs); } table.grid.inner.iga-t tr.iga-rbad td:first-child { box-shadow:inset 2px 0 0 var(--bad); } table.grid.inner.iga-t tr.iga-ramber td:first-child { box-shadow:inset 2px 0 0 var(--amber); } table.grid.inner.iga-t tr.iga-rok td:first-child { box-shadow:inset 2px 0 0 var(--ok); } /* 4K */ @media (min-width:2100px) { .iga-arow { grid-template-columns:138px minmax(0,1fr); } } /* a phone's width: the page holds together, nothing scrolls sideways */ @media (max-width:700px) { .iga-arow { grid-template-columns:minmax(0,1fr); } .iga-alab { border-right:0; border-bottom:1px solid var(--line); padding:6px 10px 5px; } } @media (max-width:560px) { .iga-kpis { flex-wrap:wrap; } .iga-kpis .kpi { flex:1 1 30%; min-width:0; } .iga-kpis .kpi b { white-space:normal; } .iga-kpis .kpi b small { display:block; margin-left:0; } .iga-legend { display:none; } table.grid.inner.iga-pool .iga-since { display:none !important; } table.grid.iga-grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 12px; padding:9px 36px 10px 11px; height:auto; } table.grid.iga-grid td.iga-c-acc { order:1; flex:1 1 100%; } table.grid.iga-grid td.iga-c-st { order:2; flex:1 1 100%; } table.grid.iga-grid td.iga-c-req { order:3; flex:1 1 45%; } table.grid.iga-grid td.iga-c-now { order:4; flex:1 1 40%; } table.grid.iga-grid td.iga-c-used { order:5; flex:1 1 45%; } table.grid.iga-grid td.iga-c-px { order:6; flex:1 1 100%; } table.grid.iga-grid td.c-act { order:9; flex:1 1 100%; margin-top:3px; } .iga-grid .l1, .iga-grid .l2 { white-space:normal; overflow-wrap:anywhere; } .iga-c-st .l1 { flex-wrap:wrap; } .iga-said { text-align:left; } .iga-top table.grid.inner thead, .iga-drawer table.grid.inner thead { display:none; } .iga-top table.grid.inner tr, .iga-drawer table.grid.inner tr { padding:6px 10px; border-top:1px solid var(--line); } .iga-top table.grid.inner tbody tr:first-child, .iga-drawer table.grid.inner tbody tr:first-child { border-top:0; } .iga-top table.grid.inner tbody td, .iga-drawer table.grid.inner tbody td { border-top:0 !important; padding:1px 0 !important; } .iga-top table.grid.inner td[data-l]::before, .iga-drawer table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } table.grid.inner.iga-t td.mn, table.grid.inner.iga-pool td.mn { text-align:left; } table.grid.inner.iga-pool tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; } table.grid.inner.iga-pool tbody td.lab { grid-column:1 / -1; } table.grid.inner.iga-pool td.gs { border-left:0; } table.grid.inner.iga-pool td.iga-pmk { white-space:normal; } .iga-drawer .fields { grid-template-columns:minmax(0,1fr); } } /* the page of one account: the form, its device, its work, its marks, its calls */ .iga-wrap { overflow-wrap:anywhere; word-break:break-all; } .iga-page .cgrid > .stack > .panel, .iga-page .cgrid > .stack > form.panel { margin:0; } .iga-page .panel + .cgrid, .iga-page .cgrid + .panel { margin-top:9px; } .iga-page #session { margin-bottom:9px; } .cgrid.iga-c75 { grid-template-columns:minmax(0,7fr) minmax(0,5fr); } @media (max-width:1280px) { .cgrid.iga-c75 { grid-template-columns:minmax(0,1fr); } } .pt.iga-pt-ban { background-image:linear-gradient(var(--bad-soft), var(--bad-soft)); } .pt.iga-pt-ban b { color:var(--bad); } .pt.iga-pt-cus { background-image:linear-gradient(var(--z-cus-soft), var(--z-cus-soft)); } .pt.iga-pt-cus b { color:var(--z-cus); } .iga-page .phead h1 .pill { vertical-align:3px; margin-left:6px; text-transform:none; } .iga-page .phead h1 .iga-hid { font-family:var(--f-mono); font-size:var(--fs-l); font-weight:500; color:var(--faint); margin-left:8px; letter-spacing:0; } .iga-frm { display:grid; grid-template-columns:150px minmax(0,1fr); } .iga-frm > .iga-fl { padding:9px 10px 8px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-xs); font-weight:700; color:var(--muted); line-height:1.35; } .iga-frm > .iga-fl small { display:block; font-weight:400; color:var(--faint); margin-top:2px; } .iga-frm > .iga-fc { padding:7px 11px 8px; border-top:1px solid var(--line); min-width:0; } .iga-frm > .iga-fl:first-child, .iga-frm > .iga-fl:first-child + .iga-fc { border-top:0; } .iga-in { height:28px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs); min-width:0; max-width:100%; } .iga-in.mono { font-family:var(--f-mono); font-size:var(--fs-s); } .iga-in:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .iga-in.iga-wide { width:100%; max-width:640px; } .iga-in.iga-w14 { width:15rem; } .iga-in.iga-w8 { width:8.5rem; } input[type="file"].iga-in { height:auto; padding:4px 6px; font-size:var(--fs-s); } .iga-note { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; margin-top:5px; } .iga-note b { color:var(--ink); font-weight:600; } .iga-note.iga-tamber b { color:var(--amber); } .iga-savebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .iga-dirty { font-size:var(--fs-s); color:var(--amber); font-weight:600; } .iga-clean { font-size:var(--fs-s); color:var(--faint); } .iga-rseg { min-height:28px; align-items:center; } .iga-rseg .iga-r { cursor:pointer; position:relative; margin:0; } .iga-rseg .iga-r input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } .iga-rseg .iga-r:has(input:checked) { background:var(--surface); color:var(--accent); box-shadow:var(--sh-1), 0 0 0 1px var(--accent-line); } .iga-rseg .iga-r:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:1px; } .iga-cgrid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .iga-cgrid tr.ghead th.g-pan { color:var(--z-pan); } .iga-cgrid tr.chead th { color:var(--muted); } table.grid.iga-cgrid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } .iga-cgrid tr.r { height:auto; } .iga-cgrid tr.r > td { padding-top:6px; padding-bottom:6px; } .iga-cgrid .iga-cid { font-family:var(--f-mono); font-weight:500; color:var(--ink); } .iga-cgrid td.iga-c-url .l2 { font-family:var(--f-mono); font-size:var(--fs-xs); } .iga-cgrid td.iga-c-info .l1 { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--fs-s); color:var(--text); overflow-wrap:anywhere; } .iga-cgrid tbody.orow.iga-cbad > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--bad); } .iga-cgrid tbody.orow.iga-cnf > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--amber); } .iga-cgrid tbody.orow.iga-cok > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--ok); } .iga-cdgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1100px) { .iga-cdgrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .iga-call .fields { gap:6px 14px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); } .iga-call .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .iga-call .f .v { font-size:var(--fs-s); line-height:1.4; } .iga-call .f .v.mono { font-size:var(--fs-xs); } .iga-pre { margin:0; padding:7px 10px; background:var(--well); border:1px solid var(--line); border-radius:var(--r); font-family:var(--f-mono); font-size:var(--fs-xs); line-height:1.5; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; } .iga-fx { margin-top:8px; padding:6px 9px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-s); color:var(--text); line-height:1.45; } .iga-fx.bad { border-color:var(--bad-line); background:var(--bad-soft); } .iga-fx.ok { border-color:var(--ok-line); background:var(--ok-soft); } .iga-fx.amber { border-color:var(--amber-line); background:var(--amber-soft); } .iga-fx b { color:var(--ink); } /* the import and the batches */ .iga-imp .cgrid > .panel { margin:0; } .iga-imp .cgrid + .panel { margin-top:9px; } .cgrid.iga-c46 { grid-template-columns:minmax(0,5fr) minmax(0,6fr); } @media (max-width:1280px) { .cgrid.iga-c46 { grid-template-columns:minmax(0,1fr); } } .iga-modes { display:grid; gap:3px; } .iga-mode { display:grid; grid-template-columns:auto minmax(0,1fr); gap:1px 8px; align-items:baseline; padding:4px 8px 5px 6px; border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer; margin:0; } .iga-mode:hover { background:var(--surface-2); } .iga-mode:has(input:checked) { background:var(--accent-soft); border-color:var(--accent-line); } .iga-mode input { margin:0; accent-color:var(--accent); transform:translateY(2px); } .iga-mode .iga-mt { min-width:0; } .iga-mode b { font-size:var(--fs); font-weight:600; color:var(--ink); } .iga-mode code { font-size:var(--fs-xs); margin-left:4px; } .iga-mode .iga-mc { grid-column:2; font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } .iga-fmt { margin:0; padding:7px 10px; background:var(--well); border:1px solid var(--line); border-radius:var(--r); font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; } .iga-f1 { color:var(--accent); } .iga-f2 { color:var(--z-del); } .iga-f3 { color:var(--z-pan); } .iga-f4 { color:var(--amber); font-weight:600; } .iga-f5 { color:var(--ok); } table.grid.inner.iga-fields { margin-top:8px; } table.grid.inner.iga-fields td:first-child { white-space:nowrap; font-weight:600; font-family:var(--f-mono); font-size:var(--fs-xs); } .iga-verdicts { display:flex; flex-wrap:wrap; gap:5px 8px; padding:8px 11px; border-bottom:1px solid var(--line); } .iga-verdict { display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 7px; border-radius:20px; border:1px solid var(--line-2); background:var(--surface); font-size:var(--fs-s); } .iga-verdict b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .iga-verdict.ok { border-color:var(--ok-line); background:var(--ok-soft); } .iga-verdict.ok b { color:var(--ok); } .iga-verdict.run { border-color:var(--run-line); background:var(--run-soft); } .iga-verdict.run b { color:var(--run); } .iga-verdict.off { border-color:var(--off-line); background:var(--off-soft); } .iga-verdict.bad { border-color:var(--bad-line); background:var(--bad-soft); } .iga-verdict.bad b { color:var(--bad); } .iga-verdict.amber { border-color:var(--amber-line); background:var(--amber-soft); } .iga-verdict.amber b { color:var(--amber); } .iga-sh { padding:9px 11px 4px; margin:0; } /* the import form shows the fields of the chosen way in */ #iga-import:has(input[name="mode"][value="renew"]:checked) .iga-addonly, #iga-import:has(input[name="mode"][value="add"]:checked) .iga-renewonly { display:none; } .iga-say1 { padding:7px 11px; font-size:var(--fs-s); color:var(--text); border-bottom:1px solid var(--line); background:var(--surface-2); } .iga-say1 b { color:var(--ink); } table.grid.inner.iga-t td .sub { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.iga-batch th.num, table.grid.inner.iga-batch td.mn { text-align:right; } table.grid.inner.iga-batch td.iga-th { font-family:var(--f-mono); font-size:var(--fs-xs); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); } table.grid.inner.iga-batch th.iga-thh { text-align:right; color:var(--z-del); } @media (min-width:2100px) { .iga-frm { grid-template-columns:170px minmax(0,1fr); } } @media (max-width:700px) { .iga-frm { grid-template-columns:minmax(0,1fr); } .iga-frm > .iga-fl { border-right:0; border-bottom:1px solid var(--line); padding:6px 10px 5px; } .iga-frm > .iga-fc { border-top:0; } .iga-in.iga-w14, .iga-in.iga-w8, .iga-in.iga-wide { width:100%; max-width:none; } .iga-rseg { height:auto; flex-wrap:wrap; } .iga-page .phead .pacts, .iga-imp .phead .pacts { flex-wrap:wrap; } } @media (max-width:560px) { table.grid.iga-cgrid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 12px; padding:9px 36px 10px 11px; height:auto; } table.grid.iga-cgrid td.iga-c-id { order:1; flex:1 1 45%; } table.grid.iga-cgrid td.iga-c-when { order:2; flex:1 1 45%; } table.grid.iga-cgrid td.iga-c-url { order:3; flex:1 1 100%; } table.grid.iga-cgrid td.iga-c-out { order:4; flex:1 1 45%; } table.grid.iga-cgrid td.iga-c-size { order:5; flex:1 1 20%; } table.grid.iga-cgrid td.iga-c-took { order:6; flex:1 1 20%; } table.grid.iga-cgrid td.iga-c-info { order:7; flex:1 1 100%; } .iga-cgrid .l1, .iga-cgrid .l2 { white-space:normal; overflow-wrap:anywhere; } .iga-page table.grid.inner thead, .iga-imp table.grid.inner thead { display:none; } .iga-page table.grid.inner tr, .iga-imp table.grid.inner tr { display:block; padding:6px 10px; border-top:1px solid var(--line); } .iga-page table.grid.inner tbody td, .iga-imp table.grid.inner tbody td { display:block; border-top:0 !important; padding:1px 0 !important; text-align:left !important; } .iga-page table.grid.inner td[data-l]::before, .iga-imp table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.iga-batch tbody tr { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:3px 10px; } table.grid.inner.iga-batch tbody td.lab { grid-column:1 / -1; } .iga-call .fields { grid-template-columns:minmax(0,1fr); } } .iga-filepick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .iga-filepick label.btn { position:relative; overflow:hidden; cursor:pointer; margin:0; } .iga-filepick input[type="file"] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; } .iga-filepick label.btn:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; } .iga-filepick .iga-note { margin-top:0; } /* ---- Parser journal (2026-10-01) ------------------------------------------------------ The parser journal as the owner approved the third prototype round: seven tiles that set their view, the filter header, the list in figures, a line per request that opens into five zones (the calls with the chosen one beside them), the request and the call as pages, the clean-up. The colours are the kit tokens, so both themes hold. */ /* ---- the head: what the screen is, seven figures that are filters ---------- */ .phead .sub.pjr-sub { max-width:1060px; margin-top:2px; line-height:1.45; } .pjr-kpis .kpi { min-width:100px; display:block; cursor:pointer; } .pjr-kpis .kpi span { color:var(--muted); } /* the kit's --faint is too pale at 4K */ .pjr-kpis .kpi.alarm span { color:var(--bad); } .pjr-kpis .kpi.pjr-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } /* ---- the filter header ------------------------------------------------------- */ #pjr-filters .fx-lh.pjr-lh-cost .fx-lab:not(.set) { color:var(--z-del); } #pjr-filters .fx-lh.pjr-lh-cost { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .pjr-defnote { font-size:var(--fs-xs); color:var(--muted); margin-left:4px; } .pjr-ico { width:13px; height:13px; flex:0 0 13px; color:var(--muted); } .fx-c.on .pjr-ico { color:currentColor; } @media (min-width:2000px) { #pjr-filters.fx.v1 .fx-body { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } } /* ---- the list ---------------------------------------------------------------- */ .pjr-total { font-size:var(--fs-s); color:var(--muted); } .pjr-total b { color:var(--ink); font-weight:700; font-size:var(--fs); font-family:var(--f-mono); } .pjr-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .pjr-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .pjr-legend i.bad { background:var(--bad); } .pjr-legend i.amber { background:var(--amber); } .pjr-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } /* the list in figures: today's head numbers, for exactly the rows below */ .pjr-sum { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding:6px 11px 7px; border-bottom:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .pjr-fig { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; } .pjr-fig .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .pjr-fig b { font-family:var(--f-mono); font-size:var(--fs-s); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .pjr-fig b i { font-style:normal; font-weight:500; color:var(--muted); margin-left:2px; } .pjr-fig.bad b { color:var(--bad); } .pjr-fig.warn b { color:var(--amber); } .pjr-figh { margin-left:auto; color:var(--faint); } .pjr-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .pjr-grid tr.ghead th.g-del { color:var(--z-del); } .pjr-grid tr.chead th { color:var(--muted); letter-spacing:.05em; } .pjr-grid tr.chead th.pjr-r { text-align:right; } @media (min-width:561px) { .pjr-grid tbody.orow > tr.r { height:48px; } } @media (min-width:2100px) { .pjr-grid tbody.orow > tr.r { height:51px; } } .pjr-grid td.pjr-r .l1, .pjr-grid td.pjr-r .l2 { text-align:right; } .pjr-grid td.pjr-r .l1 { font-family:var(--f-mono); font-size:var(--fs-s); } .pjr-c-when .l1 { font-variant-numeric:tabular-nums; color:var(--ink); } .pjr-c-when .l2 a { color:var(--muted); } .pjr-c-when .l2 a:hover { color:var(--accent); } .pjr-c-who .l1 { display:flex; align-items:center; gap:0; font-weight:600; } .pjr-c-who .l2 .mono, .pjr-c-tgt .l2 .mono { font-size:var(--fs-xs); } .pjr-c-tgt .l1 { gap:5px; } .pjr-net { display:inline-grid; place-items:center; width:15px; height:15px; color:var(--muted); flex:0 0 15px; } .pjr-net svg { width:14px; height:14px; } a.pjr-u { font-family:var(--f-mono); font-weight:600; color:var(--ink); font-size:var(--fs-s); } a.pjr-u:hover { color:var(--accent); } .pjr-c-tgt .findt svg { width:10px; height:10px; } .pjr-c-type .l1 { color:var(--text); } .pjr-more { color:var(--z-del); font-weight:700; } .pjr-c-pics .l1 { font-variant-numeric:tabular-nums; } .pjr-c-pics .l1.k { color:var(--faint); } .pjr-c-out .stline { gap:6px; } .pjr-why { font-weight:600; color:var(--ink); font-size:var(--fs-s); } .pjr-read { color:var(--text); font-size:var(--fs-s); overflow:hidden; text-overflow:ellipsis; } .pjr-err { color:var(--bad) !important; } .pjr-emp { color:var(--amber) !important; } .pjr-run { color:var(--run) !important; } .pjr-empty td { padding:18px 12px; } .pjr-capnote { margin:0; padding:2px 11px 9px; font-size:var(--fs-xs); color:var(--muted); } /* ---- the request opened in place: five named zones ---------------------------- */ .pjr-drawer .dtitle .btn { display:inline-flex; align-items:center; gap:4px; } .pjr-drawer .dtitle .btn svg, .pjr-view .btn svg { width:11px; height:11px; } .pjr-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); grid-template-areas:"out" "calls" "ask" "pics" "near"; align-items:start; } @media (min-width:1100px) { .pjr-dgrid { grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-areas:"out out ask ask ask" "calls calls calls calls calls" "pics pics pics near near"; } } @media (min-width:2100px) { .pjr-dgrid { gap:12px; } } /* who asked: two columns of facts beside the outcome once the screen is wide */ @media (min-width:1500px) { .pjr-facts.pjr-two { grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); } .pjr-facts.pjr-two dt:nth-of-type(2n) { padding-left:14px; border-left:1px solid var(--line); } .pjr-facts.pjr-two dt:nth-of-type(2), .pjr-facts.pjr-two dt:nth-of-type(2) + dd { border-top:0; } .pjr-facts.pjr-two dd { padding-right:12px; } } .pjr-a-out { grid-area:out; } .pjr-a-ask { grid-area:ask; } .pjr-a-calls { grid-area:calls; } .pjr-a-pics { grid-area:pics; } .pjr-a-near { grid-area:near; } .pjr-dgrid > .panel + .panel { margin-top:0; } .pjr-drawer .zbody > :last-child { margin-bottom:0; } .pjr-drawer .errbox, .pjr-page .errbox { margin-bottom:8px; } .errbox.pjr-warnbox { border-color:var(--amber-line); background:var(--amber-soft); } .errbox.pjr-warnbox .ec { color:var(--amber); } .errbox.pjr-runbox { border-color:var(--run-line); background:var(--run-soft); } .errbox.pjr-runbox .ec { color:var(--run); } .pjr-okline { display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:var(--fs); color:var(--ink); } .pjr-okline b { font-weight:600; } .pjr-facts dt { min-width:124px; } .pjr-facts dd .k { color:var(--muted); } .pjr-facts dd code { color:var(--muted); margin-left:3px; } .pjr-facts dd .btn { margin-left:6px; vertical-align:1px; } .pjr-dsub { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.35; } .pjr-facts .pjr-ico { vertical-align:-2px; margin-right:5px; } .pjr-u { font-weight:600; color:var(--ink); } .pjr-ua { margin:6px 0 0; font-family:var(--f-mono); font-size:var(--fs-xs); overflow-wrap:anywhere; } .pjr-none { margin:0; font-size:var(--fs-s); color:var(--muted); } .pjr-none .mono { color:var(--ink); } /* the calls: the table on the left, the chosen call as written on the right */ .pjr-cwrap { display:grid; gap:10px 14px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1500px) { .pjr-cwrap { grid-template-columns:minmax(0,1.75fr) minmax(360px,1fr); } } table.grid.inner.pjr-ct, table.grid.inner.pjr-nt, table.grid.inner.pjr-made { border:1px solid var(--line); border-radius:var(--r); border-collapse:separate; border-spacing:0; overflow:hidden; } table.grid.inner.pjr-ct thead th, table.grid.inner.pjr-nt thead th, table.grid.inner.pjr-made thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; background:var(--surface-2); white-space:nowrap; } table.grid.inner.pjr-ct tbody td, table.grid.inner.pjr-nt tbody td { font-size:var(--fs-s); padding:4px 8px; } table.grid.inner.pjr-ct td .sub { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.pjr-ct tbody tr { cursor:pointer; } table.grid.inner.pjr-ct tbody tr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } table.grid.inner.pjr-ct tr.pjr-rbad td:first-child, table.grid.inner.pjr-nt tr.pjr-rbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.pjr-ct tr.pjr-ramber td:first-child, table.grid.inner.pjr-nt tr.pjr-ramber td:first-child { box-shadow:inset 3px 0 0 var(--amber); } table.grid.inner.pjr-ct tr.pjr-sel td { background:var(--accent-soft); } table.grid.inner.pjr-ct tr.pjr-sel td:first-child { box-shadow:inset 3px 0 0 var(--accent); } table.grid.inner.pjr-ct td.pjr-url { max-width:0; width:34%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); } table.grid.inner.pjr-ct td.pjr-url .k { color:var(--muted); font-family:var(--f-body); font-weight:700; font-size:var(--fs-micro); } table.grid.inner.pjr-ct td.pjr-info { max-width:0; width:22%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-xs); color:var(--muted); } .pjr-chint { margin:7px 2px 0; line-height:1.45; } .pjr-chint b { color:var(--ink); } .pjr-view { border:1px solid var(--z-pan-line); border-radius:var(--r); background:var(--surface); min-width:0; overflow:hidden; } .pjr-vh { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:5px 9px; background:var(--z-pan-soft); border-bottom:1px solid var(--z-pan-line); } .pjr-vh b { font-family:var(--f-head); font-weight:600; font-size:var(--fs-s); color:var(--z-pan); letter-spacing:.02em; } .pjr-vh .k { font-size:var(--fs-xs); color:var(--muted); } .pjr-vh .sp { flex:1; } .pjr-vh .btn { display:inline-flex; align-items:center; gap:4px; } .pjr-vsum { padding:6px 9px 2px; gap:3px 14px; } .pjr-vsum .k { color:var(--muted); } .pjr-vsum b { color:var(--ink); font-weight:600; } .pjr-held { margin:4px 9px 6px; font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } .pjr-held.bad { color:var(--bad); font-weight:600; } .jsonbox.pjr-raw { margin:0 9px 9px; max-height:none; font-size:var(--fs-xs); line-height:1.5; } .pjr-page .jsonbox.pjr-raw, .pjr-z-text .jsonbox.pjr-raw { margin:0; } /* the pictures: the tiles the customer saw */ .pjr-thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:8px; } .pjr-thumb { margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface-2); min-width:0; font-size:var(--fs-xs); } .pjr-thumb.is-bad { border-color:var(--bad-line); } .pjr-pic { display:grid; place-items:center; aspect-ratio:1; color:var(--muted); text-decoration:none; overflow:hidden; } .pjr-pic:hover { text-decoration:none; color:var(--accent); } .pjr-pic.av { border-radius:50%; margin:8px; aspect-ratio:1; } .pjr-pic.blank { background:var(--surface); font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .pjr-thumb figcaption { padding:5px 7px 7px; display:grid; gap:3px; border-top:1px solid var(--line); } .pjr-thumb .id { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pjr-thumb .hint { white-space:normal; line-height:1.3; overflow-wrap:anywhere; } .pjr-pnote { margin:8px 0 0; line-height:1.45; } /* ---- the clean-up ------------------------------------------------------------- */ .pjr-prune { margin-top:9px; max-width:1180px; } .pjr-prune .inrow { gap:8px 12px; align-items:flex-end; } .pjr-prune .fld input { width:6rem; font-family:var(--f-mono); text-align:right; } .pjr-prunesay { font-size:var(--fs-s); color:var(--text); padding-bottom:4px; } .pjr-prunesay b { font-family:var(--f-mono); color:var(--ink); } .pjr-prunehint { margin:6px 0 0; line-height:1.45; } /* ---- the element pages: one request, one call -------------------------------- */ .pjr-page .phead h1 .pill { vertical-align:3px; } .pjr-pgrid { margin-bottom:9px; } .pjr-cgrid { margin-bottom:9px; } .pjr-z-call .pt b { color:var(--z-pan); } .pjr-wrapurl { overflow-wrap:anywhere; word-break:break-all; color:var(--ink); } table.grid.inner.pjr-made { margin-top:2px; } table.grid.inner.pjr-made td { font-size:var(--fs-s); } table.grid.inner.pjr-made td.pjr-f { color:var(--muted); font-weight:600; white-space:nowrap; width:1%; } table.grid.inner.pjr-made td.pjr-v { white-space:nowrap; width:1%; } .pjr-z-made .errbox p.mono { font-size:var(--fs-xs); } /* ---- 4K ----------------------------------------------------------------------- */ @media (min-width:2100px) { .pjr-thumbs { grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); } } /* a narrow desktop: the legend steps aside before the line squeezes */ @media (max-width:1500px) { .pjr-legend { display:none; } .pjr-figh { display:none; } } /* ---- a phone: the page holds together, nothing scrolls sideways ---------------- */ @media (max-width:560px) { .pjr-kpis .kpi { flex:1 1 30%; min-width:0; } .pjr-defnote { display:block; margin:3px 0 0; } .pjr-sum { gap:3px 12px; } /* the line becomes a card: the kit's "table.grid tr {display:block}" outranks "tr.r {display:flex}" */ #pjr-grid tbody.orow > tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 10px; padding:9px 36px 10px 11px; height:auto; } #pjr-grid td.pjr-c-when { order:1; flex:1 1 auto; } #pjr-grid td.pjr-c-out { order:2; flex:1 1 100%; } #pjr-grid td.pjr-c-out .l2 { white-space:normal; } #pjr-grid td.pjr-c-who { order:3; flex:1 1 100%; } #pjr-grid td.pjr-c-tgt { order:4; flex:1 1 55%; } #pjr-grid td.pjr-c-type { order:5; flex:1 1 30%; } #pjr-grid td.pjr-r { order:6; flex:0 0 auto; } #pjr-grid td.pjr-r .l1, #pjr-grid td.pjr-r .l2 { text-align:left; } #pjr-grid td.pjr-c-pics { order:7; flex:1 1 auto; } #pjr-grid td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } #pjr-grid td.pjr-c-when::before { display:none; } /* the tables of the opened request turn into labelled blocks instead of being squeezed */ table.grid.inner.pjr-ct, table.grid.inner.pjr-nt { border:0; } table.grid.inner.pjr-ct tbody tr { grid-template-columns:repeat(4, minmax(0,1fr)) !important; } table.grid.inner.pjr-ct tbody tr, table.grid.inner.pjr-nt tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; padding:7px 9px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:6px; } table.grid.inner.pjr-ct tbody td, table.grid.inner.pjr-nt tbody td { border:0 !important; padding:0 !important; max-width:none; width:auto; box-shadow:none !important; white-space:normal; } table.grid.inner.pjr-ct td.pjr-url, table.grid.inner.pjr-ct td.pjr-info { grid-column:1 / -1; overflow-wrap:anywhere; white-space:normal; max-width:none; width:auto; } table.grid.inner.pjr-ct td[data-l]::before, table.grid.inner.pjr-nt td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.pjr-ct tr.pjr-rbad, table.grid.inner.pjr-nt tr.pjr-rbad { border-left:3px solid var(--bad); } table.grid.inner.pjr-ct tr.pjr-ramber, table.grid.inner.pjr-nt tr.pjr-ramber { border-left:3px solid var(--amber); } table.grid.inner.pjr-ct tr.pjr-sel { border-color:var(--accent-line); background:var(--accent-soft); } table.grid.inner.pjr-ct tr.pjr-sel td { background:transparent; } table.grid.inner.pjr-ct td.num, table.grid.inner.pjr-nt td.num { text-align:left; } table.grid.inner.pjr-made { display:table; width:100%; } table.grid.inner.pjr-made thead { display:table-header-group; } table.grid.inner.pjr-made tbody { display:table-row-group; } table.grid.inner.pjr-made tr { display:table-row; } table.grid.inner.pjr-made th, table.grid.inner.pjr-made td { display:table-cell; } table.grid.inner.pjr-made td.pjr-v { white-space:normal; } table.grid.inner.pjr-made th, table.grid.inner.pjr-made td { padding:4px 7px !important; vertical-align:top; } .pjr-facts dt { min-width:0; } .pjr-thumbs { grid-template-columns:repeat(3, minmax(0,1fr)); } .pjr-drawer .dtitle > span:last-child { display:none; } } /* the pictures themselves, where the prototype drew placeholders */ .pjr-pic img { width:100%; height:100%; object-fit:cover; display:block; } .pjr-pic.av img { border-radius:50%; } .pjr-dhint { font-size:var(--fs-xs); color:var(--muted); } /* ---- the order forms and the parser, over the journal (владелец 2026-10-27) ---- A line per service and form, the networks as named bands; per period the usernames that loaded at least once and all the checks, each a share coloured by the scale, the numbers beside it and a bar under them: green loaded, amber the profile's own answer, red no answer. */ .pfs { margin-bottom:9px; overflow:hidden; } .pfs-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 18px; align-items:end; padding:8px 12px 9px; border-bottom:1px solid var(--line); } .pfs-head h2 { margin:0; font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); color:var(--ink); letter-spacing:-.005em; } .pfs-sub { grid-column:1; margin:0; max-width:980px; font-size:var(--fs-xs); line-height:1.45; color:var(--muted); } .pfs-legend { grid-column:2; grid-row:1 / span 2; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 13px; max-width:600px; font-size:var(--fs-xs); color:var(--muted); } .pfs-legend i { display:inline-block; width:12px; height:5px; border-radius:2px; margin-right:5px; vertical-align:2px; } .pfs-legend i.ok, .pfs-bar i.ok { background:var(--ok); } .pfs-legend i.amber, .pfs-bar i.amber { background:var(--amber); } .pfs-legend i.bad, .pfs-bar i.bad { background:var(--bad); } .pfs-scale { white-space:nowrap; } .pfs-scale b { margin-left:5px; font-family:var(--f-mono); font-weight:600; font-size:var(--fs-micro); } .pfs-scale b.ok { color:var(--ok); } .pfs-scale b.amber { color:var(--amber); } .pfs-scale b.bad { color:var(--bad); } .pfs-scale b.off { color:var(--muted); font-weight:500; } .pfs-wrap { overflow-x:auto; } .pfs-grid { width:100%; min-width:960px; border-collapse:collapse; } .pfs-grid col.pfs-c-svc { width:100px; } .pfs-grid col.pfs-c-form { width:106px; } .pfs-grid thead th { text-align:left; font-weight:700; color:var(--muted); background:var(--surface-2); white-space:nowrap; } .pfs-grid tr.chead th { letter-spacing:.05em; } .pfs-grid th.gs, .pfs-grid td.gs { border-left:1px solid var(--line-2); } .pfs-nh th { padding:3px 10px 2px; text-align:left; font-size:var(--fs-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text); background:var(--surface-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line); } .pfs-net:first-of-type .pfs-nh th { border-top:0; } .pfs-nh .pjr-net { display:inline-grid; vertical-align:-3px; margin-right:7px; color:var(--text); } .pfs-svc, .pfs-r td { padding:3px 10px 4px; border-top:1px solid var(--line); vertical-align:middle; } .pfs-nh + .pfs-r .pfs-svc, .pfs-nh + .pfs-r td { border-top:0; } .pfs-r:not(.pfs-first) td { border-top-style:dashed; } .pfs-svc { text-align:left; font-size:var(--fs-s); font-weight:600; color:var(--ink); white-space:nowrap; } .pfs-form { white-space:nowrap; } .pfs-f { display:inline-block; min-width:38px; padding:0 7px; border-radius:20px; font-size:var(--fs-nano); font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:17px; text-align:center; } .pfs-f.paid { color:var(--accent); background:var(--accent-soft); } .pfs-f.free { color:var(--muted); background:var(--surface-3); } .pfs-offnow { margin-left:6px; font-size:var(--fs-micro); color:var(--faint); } .pfs-c { min-width:118px; } .pfs-v { display:flex; align-items:baseline; gap:8px; white-space:nowrap; } .pfs-p { min-width:38px; font-family:var(--f-mono); font-size:var(--fs-s); font-weight:600; font-variant-numeric:tabular-nums; } .pfs-p.ok { color:var(--ok); } .pfs-p.amber { color:var(--amber); } .pfs-p.bad { color:var(--bad); } .pfs-p.off { color:var(--muted); } .pfs-n { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); font-variant-numeric:tabular-nums; } .pfs-n i { font-style:normal; color:var(--faint); margin:0 1px; } .pfs-bar { display:flex; height:3px; margin-top:3px; border-radius:2px; overflow:hidden; background:var(--surface-3); } .pfs-bar i { display:block; height:100%; } .pfs-none { color:var(--faint); } /* ---- API panels (2026-10-02) ------------------------------------------------------ The panels as the owner approved the fourth prototype round: five tiles, a line per panel with its money against the thresholds, what the orders took in a day, its calls by action over a window and every question to the panel, the line of all the panels; a line opens into four zones (the balance with its seven days, the calls by action, why they failed, the connection). The colours are the kit tokens, so both themes hold. */ :root { --apn-amber-tint:color-mix(in srgb, var(--amber) 9%, transparent); --apn-bad-tint:color-mix(in srgb, var(--bad) 9%, transparent); } .apn-phead > .apn-ptitle { flex:1 1 560px; min-width:0; } .apn-phead .sub { max-width:1180px; line-height:1.5; } .apn-kpis .kpi { min-width:100px; cursor:pointer; } .apn-kpis .kpi span { color:var(--muted); } .apn-kpis .kpi.alarm span { color:var(--bad); } .apn-kpis .kpi b { font-variant-numeric:tabular-nums; } .apn-kpis .kpi.apn-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .apn-lab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .apn-k0 { color:var(--faint); } #apn-pool, #apn-loglist, #apn-slist { scroll-margin-top:62px; } .apn-notice { margin:0 0 9px; } .apn-notice code, .apn-hintkey code { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:0 5px; } /* ---- the panels: the head of the table, the window switch ----------------- */ .apn-pool > .pt { padding-top:5px; padding-bottom:5px; gap:6px 9px; } .apn-pool > .pt .btn { font-size:var(--fs-s); } .btn .apn-bn { margin-left:6px; } .btn.xs .apn-bn { margin-left:5px; padding:0 5px; line-height:14px; } .apn-wlab { font-size:var(--fs-xs); color:var(--muted); font-weight:600; } .apn-win .fx-s { font-size:var(--fs-s); } .apn-win a:hover, .apn-pool .pt a.btn:hover { text-decoration:none; } .apn-bn { display:inline-block; margin-left:5px; padding:0 6px; border-radius:20px; background:var(--surface-3); border:1px solid var(--line); font-size:var(--fs-micro); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:15px; } /* ---- the panels: a line per panel ------------------------------------------ */ col.apn-w-exp { width:28px; } col.apn-w-px { width:10.2%; } col.apn-w-bal { width:10.8%; } col.apn-w-sp { width:6.8%; } col.apn-w-k { width:6.2%; } col.apn-w-kn { width:4.7%; } col.apn-w-all { width:9.2%; } col.apn-w-con { width:9.3%; } col.apn-w-act { width:15.7%; } .apn-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .apn-grid tr.ghead th.g-del { color:var(--z-del); } .apn-grid tr.ghead th.g-pan { color:var(--z-pan); } .apn-grid tr.chead th { color:var(--muted); } .apn-grid tr.chead th.apn-kh { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); letter-spacing:.05em; } .apn-grid th.apn-r { text-align:right; } .apn-grid tbody.orow > tr.r { height:60px; } .apn-grid tr.r > td { padding-top:8px; padding-bottom:8px; } .apn-c-px .l1 b { font-weight:700; color:var(--ink); } .apn-c-px .l2 { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); } /* the balance: the amount in its colour, a meter of the three zones, when it was read */ .apn-c-bal .l1 { display:flex; align-items:center; gap:8px; } .apn-amt { font-family:var(--f-mono); font-weight:600; font-size:var(--fs-m); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .apn-amt.ok { color:var(--ok); } .apn-amt.warn { color:var(--amber); } .apn-amt.bad { color:var(--bad); } .apn-amt.off { color:var(--off); } .apn-meter { position:relative; flex:0 0 64px; width:64px; height:8px; border-radius:20px; overflow:hidden; display:flex; box-shadow:inset 0 0 0 1px var(--line); } .apn-meter i { display:block; height:100%; } .apn-meter .z1 { width:30%; background:var(--bad-soft); } .apn-meter .z2 { width:40%; background:var(--amber-soft); } .apn-meter .z3 { width:30%; background:var(--ok-soft); } .apn-meter b { position:absolute; left:0; top:0; bottom:0; border-radius:20px 0 0 20px; } .apn-meter b.ok { background:var(--ok); } .apn-meter b.warn { background:var(--amber); } .apn-meter b.bad { background:var(--bad); } .apn-meter b.off { background:var(--off); } .apn-meter s { position:absolute; top:0; bottom:0; width:1px; background:var(--surface); opacity:.9; } .apn-meter.lg { flex-basis:150px; width:150px; height:10px; } .apn-c-bal .l2 .apn-late, .apn-late { color:var(--amber); font-weight:700; } .apn-c-bal .l2 .bad-text { font-weight:600; } .apn-c-sp .l1 { font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:var(--fs); } /* the action cells: the calls and the mean time on top, the failures under them */ .apn-grid tr.r > td.apn-k { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); padding-left:7px; padding-right:7px; } .apn-grid tr.r > td.apn-k.t-amber { background-image:linear-gradient(var(--apn-amber-tint), var(--apn-amber-tint)); box-shadow:inset 0 -2px 0 var(--amber-line); } .apn-grid tr.r > td.apn-k.t-bad { background-image:linear-gradient(var(--apn-bad-tint), var(--apn-bad-tint)); box-shadow:inset 0 -2px 0 var(--bad-line); } .apn-grid tr.r > td.apn-k.none, .apn-grid tr.r > td.apn-k.nosuch { background-image:none; } .l1.apn-two { display:flex; align-items:baseline; justify-content:space-between; gap:5px; } /* a count too wide for the time beside it (a week of JustAnotherPanel's status reads at 1920) pushes the time onto a second line out of sight: the number stays, the time is in the title */ .l1.apn-two { flex-wrap:wrap; max-height:1.3em; } .apn-cn { font-family:var(--f-mono); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .apn-tm { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); font-variant-numeric:tabular-nums; } .apn-tm.amber { color:var(--amber); font-weight:600; } .apn-tm.bad { color:var(--bad); font-weight:600; } .apn-k .l2 { font-variant-numeric:tabular-nums; } .apn-fl { color:var(--bad); font-weight:600; } .apn-fl.amber { color:var(--amber); } .apn-nof { color:var(--faint); } .apn-k.none .l1, .apn-k.none .l2, .apn-k.nosuch .l1, .apn-k.nosuch .l2 { color:var(--faint); } .apn-nosp { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); border:1px dashed var(--line-3); border-radius:5px; padding:0 5px; line-height:15px; } .apn-c-all .l2 { font-variant-numeric:tabular-nums; } .apn-c-con .l1 { font-size:var(--fs-s); color:var(--text); } .apn-c-con .l2 .mono { color:var(--text); } /* every question to the panel on its line */ td.apn-c-act { overflow:visible; } .apn-acts { display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .apn-ag { display:flex; gap:3px; justify-content:flex-end; flex-wrap:wrap; } .apn-ask { display:flex; gap:3px; justify-content:flex-end; align-items:center; } .apn-ask input { width:118px; height:22px; padding:0 7px; border:1px solid var(--line-2); border-radius:5px; background:var(--surface-2); color:var(--ink); font-family:var(--f-mono); font-size:var(--fs-xs); } .apn-ask input:focus { outline:none; border-color:var(--accent-line); background:var(--surface); box-shadow:var(--ring); } .apn-ask input::placeholder { color:var(--faint); font-family:var(--f-body); } .apn-hintkey { font-size:var(--fs-xs); color:var(--muted); text-align:right; line-height:1.5; white-space:normal; } /* the line of all the panels and a panel without a key */ .apn-grid tbody.apn-allrow { border-top:2px solid var(--line-2); } .apn-grid tbody.apn-allrow > tr.r > td { background-color:var(--surface-2); } .apn-grid tbody.apn-allrow:hover > tr.r > td, .apn-grid tbody.apn-allrow.open > tr.r > td { background-color:var(--surface-3); } .apn-grid tbody.apn-allrow .l1 b.apn-allb { font-family:var(--f-head); font-weight:600; color:var(--ink); } .apn-grid tbody.apn-offrow > tr.r > td .l1, .apn-grid tbody.apn-offrow > tr.r > td .l2 { opacity:.7; } .apn-tones { display:flex; gap:7px; flex-wrap:wrap; } .apn-tones b { font-weight:700; } .apn-tones .ok { color:var(--ok); } .apn-tones .warn { color:var(--amber); } .apn-tones .bad { color:var(--bad); } .apn-allnote { display:block; text-align:right; font-size:var(--fs-xs); color:var(--faint); } /* the answer of a status lookup, under its panel's line */ tr.apn-look > td { padding:0 !important; background:var(--surface) !important; } .apn-lookbox { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; margin:0 8px 8px 36px; padding:7px 11px; border:1px solid var(--accent-line); border-left:3px solid var(--accent); border-radius:var(--r); background:var(--accent-soft); font-size:var(--fs-s); color:var(--text); } .apn-lookbox.bad { border-color:var(--bad-line); border-left-color:var(--bad); background:var(--bad-soft); } .apn-lookbox .apn-lab { color:var(--accent); } .apn-lookbox.bad .apn-lab { color:var(--bad); } .apn-lookbox .k { color:var(--muted); } .apn-lookbox b { color:var(--ink); font-weight:600; font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .apn-lookbox .sp { flex:1; } .apn-lookbox .apn-x { border:0; background:transparent; color:var(--muted); font-size:15px; line-height:1; cursor:pointer; padding:0 4px; border-radius:5px; } .apn-lookbox .apn-x:hover { color:var(--ink); background:var(--surface); } /* the legend and the footnote of the table */ .apn-legend { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:6px 11px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); background:var(--surface-2); } .apn-lg { display:inline-block; width:16px; height:10px; border-radius:3px; border:1px solid; vertical-align:-1px; margin-right:5px; } .apn-lg.ok { background:var(--ok-soft); border-color:var(--ok-line); } .apn-lg.amber { background:var(--amber-soft); border-color:var(--amber-line); } .apn-lg.bad { background:var(--bad-soft); border-color:var(--bad-line); } .apn-legend b { font-weight:700; } .apn-foot { margin:0; padding:7px 11px 8px; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); } /* ---- the drawer of a panel: four named zones ------------------------------------ */ .apn-dgrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0,1fr); grid-template-areas:"bal" "calls" "fail" "conn"; } @media (min-width:1300px) { .apn-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); grid-template-areas:"bal calls" "bal fail" "bal conn"; } } @media (min-width:2100px) { .apn-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); } } .apn-z-bal { grid-area:bal; border-left:2px solid var(--z-del); } .apn-z-bal > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .apn-z-calls { grid-area:calls; border-left:2px solid var(--z-pan); } .apn-z-calls > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .apn-z-fail { grid-area:fail; border-left:2px solid var(--z-ord); } .apn-z-fail > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .apn-z-conn { grid-area:conn; border-left:2px solid var(--z-cus); } .apn-z-conn > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .apn-agrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1300px) { .apn-agrid { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } } /* the grid of all the panels names no areas: a zone named for the panel's grid would land in an implicit column, on top of the other */ .apn-agrid > .zone { grid-area:auto; } .apn-drawer .zone > h4 .btn { font-family:var(--f-body); letter-spacing:0; text-transform:none; } .apn-drawer .facts dt { font-size:var(--fs-xs); color:var(--muted); } .apn-drawer .facts dd { font-size:var(--fs-s); } .apn-facts dt { min-width:118px; } .apn-facts dd .k { color:var(--muted); } .apn-facts dd .apn-meter { display:inline-flex; vertical-align:-1px; margin:0 8px; } .apn-zlinks { margin-top:8px; font-size:var(--fs-xs); display:flex; flex-wrap:wrap; gap:4px 14px; } .apn-znote { margin:8px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .apn-znote b { color:var(--text); } .apn-sub { margin:10px 0 4px; } table.grid.inner.apn-t th { color:var(--muted); font-size:var(--fs-micro); letter-spacing:.05em; } table.grid.inner.apn-t tbody td { vertical-align:middle; white-space:nowrap; } table.grid.inner.apn-t td.wrap { white-space:normal; } .apn-t tr.apn-all td { background:var(--surface-2); } .apn-t tr.apn-all td b { color:var(--ink); } .apn-t tr.apn-mute td { color:var(--faint); } .apn-t td.apn-e-bad { color:var(--bad); font-weight:600; } .apn-t td.apn-e-amber { color:var(--amber); font-weight:600; } .apn-t td.apn-t-bad { color:var(--bad); font-weight:600; } .apn-t td.apn-t-amber { color:var(--amber); font-weight:600; } .apn-t .apn-ep { font-size:var(--fs-xs); color:var(--muted); font-weight:400; margin-left:5px; } .apn-t .apn-e-bad .apn-ep, .apn-t .apn-e-amber .apn-ep { color:inherit; } .apn-t td.apn-lk { text-align:right; } .apn-t td.apn-lk a { font-size:var(--fs-xs); font-weight:600; } .apn-t .apn-an { font-weight:600; color:var(--ink); } .apn-t tr.apn-top td { background:var(--ok-soft); } .apn-t tr.apn-top td:first-child { box-shadow:inset 3px 0 0 var(--ok); } .apn-t tr.apn-rbad td { background:var(--bad-row); } .apn-t tr.apn-rbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.apn-t tbody td.apn-why { white-space:normal; overflow-wrap:anywhere; max-width:0; width:58%; } .apn-t td.apn-why .mono { font-size:var(--fs-xs); color:var(--text); } .apn-up { color:var(--ok); font-weight:600; } .apn-down { color:var(--bad); } .apn-share { display:inline-block; width:90px; height:7px; border-radius:20px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; vertical-align:1px; margin-right:6px; } /* below 4K the half of the drawer is narrower: a shorter bar keeps the link at the end of the line inside the zone */ @media (max-width:2099px) { .apn-share { width:56px; } } .apn-share i { display:block; height:100%; background:var(--z-pan); } .apn-sharev { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); } /* the balance of the last seven days: one line, the two thresholds, the top-ups */ .apn-chart { position:relative; height:118px; margin:9px 0 4px; padding:0 0 16px 40px; } .apn-chart:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } .apn-plot { position:absolute; left:40px; right:0; top:0; bottom:16px; } .apn-plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .apn-plot .ln { fill:none; stroke:var(--z-del); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; } .apn-plot .ar { fill:var(--z-del); opacity:.09; stroke:none; } .apn-plot .th { stroke:var(--line-3); stroke-width:1; vector-effect:non-scaling-stroke; } .apn-plot .base { stroke:var(--line-2); stroke-width:1; vector-effect:non-scaling-stroke; } .apn-ylab { position:absolute; left:0; width:36px; text-align:right; transform:translateY(-50%); font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--muted); } .apn-xlab { position:absolute; bottom:0; transform:translateX(-50%); font-size:var(--fs-micro); color:var(--muted); white-space:nowrap; } .apn-dot { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 2px var(--surface); } .apn-dot.end { background:var(--z-del); } .apn-cross { position:absolute; top:0; bottom:0; width:1px; background:var(--line-3); pointer-events:none; } .apn-tip { position:absolute; top:-6px; transform:translate(-50%, -100%); padding:4px 8px; border-radius:6px; pointer-events:none; white-space:nowrap; background:var(--ink); color:var(--surface); font-size:var(--fs-xs); box-shadow:var(--sh-2); z-index:3; } :root[data-theme="dark"] .apn-tip { background:var(--surface-3); color:var(--ink); border:1px solid var(--line-2); } .apn-tip b { font-family:var(--f-mono); font-weight:600; margin-right:6px; } .apn-chartcap { display:flex; flex-wrap:wrap; gap:3px 14px; font-size:var(--fs-xs); color:var(--muted); } .apn-chartcap i { display:inline-block; width:14px; height:2px; background:var(--z-del); vertical-align:3px; margin-right:5px; } .apn-chartcap i.th { height:1px; background:var(--line-3); } .apn-chartcap i.dot { width:8px; height:8px; border-radius:50%; background:var(--ok); vertical-align:0; } /* what came back into a line: the balance Check balance read, or why it did not */ .apn-said { display:block; max-width:100%; text-align:right; font-size:var(--fs-xs); line-height:1.35; white-space:normal; overflow-wrap:anywhere; } .apn-said.ok { color:var(--ok); } .apn-said.bad { color:var(--bad); } .apn-ink { color:var(--ink); } .apn-small { font-size:var(--fs-s); } .apn-c-px .l2.apn-plain { font-family:var(--f-body); } .apn-dhint { font-size:var(--fs-xs); color:var(--muted); } /* ---- 4K ---------------------------------------------------------------------------- */ @media (min-width:2100px) { .apn-grid tbody.orow > tr.r { height:64px; } col.apn-w-px { width:9.6%; } col.apn-w-bal { width:9%; } col.apn-w-sp { width:6.4%; } col.apn-w-k { width:6.6%; } col.apn-w-kn { width:5%; } col.apn-w-all { width:9.2%; } col.apn-w-con { width:10%; } col.apn-w-act { width:15%; } .apn-meter { flex-basis:76px; width:76px; } .apn-ask input { width:140px; } } /* a narrower desktop: the line sheds its quieter words, never its numbers */ @media (max-width:1700px) { col.apn-w-px { width:10.8%; } col.apn-w-bal { width:10.6%; } col.apn-w-sp { width:6.6%; } col.apn-w-k { width:6.1%; } col.apn-w-kn { width:4.3%; } col.apn-w-all { width:9.2%; } col.apn-w-con { width:8.6%; } col.apn-w-act { width:17.4%; } .apn-c-con .l2 .apn-wt { display:none; } .apn-meter { flex-basis:48px; width:48px; } } /* a narrow desktop: the connection steps aside (its cell stays, empty, so the columns do not shift), the timings go to the titles */ @media (max-width:1500px) and (min-width:561px) { col.apn-w-px { width:11.4%; } col.apn-w-bal { width:12.4%; } col.apn-w-sp { width:8%; } col.apn-w-k { width:6.6%; } col.apn-w-kn { width:5%; } col.apn-w-all { width:9.6%; } col.apn-w-con { width:0; } col.apn-w-act { width:19.2%; } .apn-grid th.apn-h-con, .apn-grid tr.r > td.apn-c-con { padding:0 !important; overflow:hidden; font-size:0; border-left:0; } .apn-grid tr.r > td.apn-c-con > * { display:none; } .apn-grid .apn-k .l1.apn-two .apn-tm, .apn-grid .apn-c-all .l1.apn-two .apn-tm { display:none; } .apn-c-bal .l2 .apn-age { display:none; } .apn-ag .apn-bn { display:none; } } /* the sticky two-row head: the kit stands the column names a pixel low (as the proxies and accounts screens fix it) */ table.grid.apn-grid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } /* ---- a phone's width: the page holds together, nothing scrolls sideways ---------------- */ @media (max-width:560px) { .apn-kpis .kpi { flex:1 1 30%; min-width:0; } .apn-pool > .pt { gap:5px 8px; } .apn-pool > .pt .hint { flex:1 1 100%; } .apn-legend { gap:3px 10px; } /* the line becomes a card: the panel and its money on top, the six actions in a grid, the rest under them */ table.grid.apn-grid tr.r { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 8px; padding:9px 36px 10px 11px; height:auto; } table.grid.apn-grid tr.r > td.apn-c-px { grid-column:1 / -1; } table.grid.apn-grid tr.r > td.apn-c-bal { grid-column:1 / 3; } table.grid.apn-grid tr.r > td.apn-c-sp { grid-column:3 / 4; } table.grid.apn-grid tr.r > td.apn-k { padding:4px 5px !important; border:1px solid var(--line) !important; border-radius:6px; } table.grid.apn-grid tr.r > td[data-short]::before { content:attr(data-short); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } table.grid.apn-grid tr.r > td.apn-c-all { grid-column:1 / -1; } table.grid.apn-grid tr.r > td.apn-c-con { grid-column:1 / -1; } table.grid.apn-grid tr.r > td.apn-c-act { grid-column:1 / -1; } .apn-acts { align-items:stretch; } .apn-ag, .apn-ask { justify-content:flex-start; } .apn-ask input { flex:1 1 auto; width:auto; } .apn-hintkey { text-align:left; } .apn-allnote { text-align:left; } .apn-lookbox { margin:0 0 8px; } .apn-dgrid, .apn-agrid, .apn-cgrid { grid-template-columns:minmax(0,1fr); grid-template-areas:none; } .apn-z-bal, .apn-z-calls, .apn-z-fail, .apn-z-conn { grid-area:auto; } /* the tables inside an opened line turn into labelled blocks instead of being squeezed */ .apn-drawer table.grid.inner thead { display:none; } .apn-drawer table.grid.inner tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px 10px; padding:6px 2px; border-top:1px solid var(--line); } .apn-drawer table.grid.inner tbody tr:first-child { border-top:0; } .apn-drawer table.grid.inner tbody td { padding:0 !important; border:0 !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; box-shadow:none !important; max-width:none !important; width:auto !important; } .apn-drawer table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .apn-drawer table.grid.inner td.apn-wide { grid-column:1 / -1; } .apn-drawer .zone > h4 .sp { display:none; } .apn-chart { padding-left:34px; } .apn-plot { left:34px; } .apn-ylab { width:30px; } .apn-said { text-align:left; } } /* ---- Panel call log (2026-10-02) --------------------------------------------------- The journal of the calls to the panels, as the owner approved it: the calls of the last fourteen days, the list in figures, a line per call that opens into the call, what was sent and what came back, the clean-up. Every class starts with apn-. */ .panel.apn-days { margin-bottom:9px; } table.apn-dt { width:100%; border-collapse:collapse; table-layout:fixed; } table.apn-dt th, table.apn-dt td { padding:3px 7px; text-align:right; font-variant-numeric:tabular-nums; border-top:1px solid var(--line); white-space:nowrap; } table.apn-dt thead th { border-top:0; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; line-height:1.25; padding-top:5px; } table.apn-dt thead th a { color:var(--muted); display:block; } table.apn-dt thead th a:hover { color:var(--accent); text-decoration:none; } table.apn-dt thead th .wd { display:block; font-weight:600; letter-spacing:.06em; } table.apn-dt thead th.today a { color:var(--accent); } table.apn-dt th.apn-dlab, table.apn-dt td.lab { text-align:left; width:118px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.apn-dt td { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } table.apn-dt td a { color:inherit; font-weight:600; } table.apn-dt td a:hover { color:var(--accent); } table.apn-dt td.nil { color:var(--faint); } table.apn-dt tr.apn-dr-err td:not(.lab) a { color:var(--bad); } table.apn-dt tr.apn-dr-tmo td:not(.lab) a { color:var(--amber); } table.apn-dt tr.apn-dr-pct td { color:var(--muted); font-size:var(--fs-xs); } table.apn-dt .apn-dsum { border-left:1px solid var(--line-2); background:var(--surface-2); font-weight:700; } table.apn-dt th.on, table.apn-dt td.on { background:var(--accent-soft); } .apn-dpt .hint { color:var(--muted); } .apn-total { font-size:var(--fs-s); color:var(--muted); } .apn-total b { color:var(--ink); font-weight:700; font-size:var(--fs); font-family:var(--f-mono); } .apn-llegend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .apn-llegend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .apn-llegend i.bad { background:var(--bad); } .apn-llegend i.amber { background:var(--amber); } .apn-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .apn-sum { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding:6px 11px 7px; border-bottom:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .apn-fig { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; } .apn-fig .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .apn-fig b { font-family:var(--f-mono); font-size:var(--fs-s); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .apn-fig b i { font-style:normal; font-weight:500; color:var(--muted); margin-left:2px; } .apn-fig.bad b { color:var(--bad); } .apn-fig.warn b { color:var(--amber); } .apn-defnote { font-size:var(--fs-xs); color:var(--muted); margin-left:4px; } #apn-filters .fx-lh.apn-lh-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } #apn-filters .fx-lh.apn-lh-pan .fx-lab:not(.set) { color:var(--z-pan); } #apn-filters .apn-arow .fx-c:not(.all) { font-family:var(--f-mono); font-weight:600; } .apn-capnote { margin:0; padding:2px 11px 9px; font-size:var(--fs-xs); color:var(--muted); } #apn-loglist, #apn-days { scroll-margin-top:62px; } .apn-lgrid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .apn-lgrid tr.ghead th.g-pan { color:var(--z-pan); } .apn-lgrid tr.chead th { color:var(--muted); letter-spacing:.05em; } .apn-lgrid tr.chead th.apn-r { text-align:right; } @media (min-width:561px) { .apn-lgrid tbody.orow > tr.r { height:48px; } } @media (min-width:2100px) { .apn-lgrid tbody.orow > tr.r { height:51px; } } .apn-lgrid td.apn-r .l1, .apn-lgrid td.apn-r .l2 { text-align:right; } .apn-lgrid td.apn-r .l1 { font-family:var(--f-mono); font-size:var(--fs-s); } .apn-lc-when .l1 { font-variant-numeric:tabular-nums; color:var(--ink); } .apn-lc-when .l2 a { color:var(--muted); font-family:var(--f-mono); } .apn-lc-when .l2 a:hover { color:var(--accent); } .apn-lc-pan .l1 b { font-weight:600; color:var(--ink); } .apn-act { display:inline-block; font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:600; color:var(--z-pan); background:var(--z-pan-soft); border:1px solid var(--z-pan-line); border-radius:5px; padding:0 5px; line-height:16px; margin-left:6px; vertical-align:1px; } .apn-lc-ask .l1 { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .apn-lc-ask .l1 a { color:var(--ink); } .apn-lc-ask .l1 a:hover { color:var(--accent); } .apn-lc-ask .l2 { font-family:var(--f-mono); } .apn-lc-out .stline { gap:6px; } .apn-ow { color:var(--text); font-size:var(--fs-s); overflow:hidden; text-overflow:ellipsis; } .apn-why2 { font-weight:600; color:var(--ink); } .apn-maybe { font-size:var(--fs-xs); } .apn-err { color:var(--bad) !important; } .apn-empty td { padding:18px 12px !important; color:var(--muted); font-size:var(--fs-s); text-align:center; } /* the sticky two-row head: the kit stands the column names a pixel low */ table.grid.apn-lgrid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } /* one call opened in place: three named zones */ .apn-cgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1300px) { .apn-cgrid { grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.3fr); } } .apn-z-call { border-left:2px solid var(--z-ord); } .apn-z-call > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .apn-z-sent { border-left:2px solid var(--z-pan); } .apn-z-sent > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .apn-z-back { border-left:2px solid var(--z-del); } .apn-z-back > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .apn-z-back.bad { border-left-color:var(--bad); } .apn-z-back.bad > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .apn-req { margin:0 0 7px; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); overflow-wrap:anywhere; } .apn-req .m { display:inline-block; font-weight:700; color:var(--z-pan); margin-right:6px; } .jsonbox.apn-raw { max-height:none; font-size:var(--fs-xs); line-height:1.5; margin:0; } .apn-rawh { display:flex; align-items:baseline; gap:8px; margin:9px 0 4px; } .apn-rawh .hint { margin-left:auto; } .apn-okline { display:flex; align-items:center; gap:7px; margin:0 0 8px; font-size:var(--fs); color:var(--ink); } .apn-okline b { font-weight:600; } .apn-drawer .errbox { margin-bottom:8px; } .apn-drawer .errbox p { font-family:var(--f-mono); font-size:var(--fs-xs); } .apn-drawer .dtitle .btn { display:inline-flex; align-items:center; gap:4px; } /* the clean-up */ .apn-prune { margin-top:9px; max-width:1180px; } .apn-prune .inrow { gap:8px 12px; align-items:flex-end; } .apn-prune .fld input { width:6rem; font-family:var(--f-mono); text-align:right; } .apn-prunesay { font-size:var(--fs-s); color:var(--text); padding-bottom:5px; } .apn-prunesay b { font-family:var(--f-mono); color:var(--ink); } .apn-prunehint { margin:6px 0 0; line-height:1.45; } .apn-pfoot { margin:9px 2px 0; max-width:1180px; line-height:1.5; } /* a phone's width: a card per call, the last four days of the table */ @media (max-width:560px) { .apn-sum { gap:3px 12px; } .apn-defnote { display:block; margin:3px 0 0; } #apn-lgrid tbody.orow > tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 10px; padding:9px 36px 10px 11px; height:auto; } #apn-lgrid td.apn-lc-when { order:1; flex:1 1 auto; } #apn-lgrid td.apn-lc-pan { order:2; flex:1 1 100%; } #apn-lgrid td.apn-lc-ask { order:3; flex:1 1 100%; } #apn-lgrid td.apn-lc-out { order:4; flex:1 1 100%; } #apn-lgrid td.apn-lc-out .l2, #apn-lgrid td.apn-lc-ask .l2 { white-space:normal; overflow-wrap:anywhere; text-overflow:clip; } #apn-lgrid td.apn-r { order:5; flex:0 0 auto; } #apn-lgrid td.apn-r .l1, #apn-lgrid td.apn-r .l2 { text-align:left; } #apn-lgrid td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .apn-days { overflow:hidden; } table.apn-dt { table-layout:auto; } table.apn-dt th.apn-old, table.apn-dt td.apn-old { display:none; } table.apn-dt th, table.apn-dt td { padding:3px 5px; } table.apn-dt th.apn-dlab, table.apn-dt td.lab { width:auto; } } /* ---- A panel's service list (2026-10-02) --------------------------------------------- The panels side by side, when the list was read, the filter rows, the list with the routes of ours that point at a service. Every class starts with apn-. */ .apn-pswitch { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 9px; } .apn-pswitch .fx-s { font-size:var(--fs-s); } .apn-pswitch .fx-s .fx-n { font-family:var(--f-mono); } .apn-pswitch a:hover { text-decoration:none; } .panel.apn-readp { margin-bottom:9px; } .apn-read { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:7px 11px; font-size:var(--fs-s); color:var(--text); } .apn-read b { color:var(--ink); font-weight:600; } .apn-read .k { color:var(--muted); } .apn-read .sp { flex:1; } .apn-refresh { display:inline; margin:0; } col.apn-sw-id { width:5%; } col.apn-sw-name { width:29%; } col.apn-sw-cat { width:14.5%; } col.apn-sw-type { width:8%; } col.apn-sw-rate { width:6.4%; } col.apn-sw-min { width:5%; } col.apn-sw-max { width:6.6%; } col.apn-sw-yn { width:4.4%; } @media (max-width:2000px) { col.apn-sw-id { width:4.6%; } col.apn-sw-name { width:35%; } col.apn-sw-cat { width:13.6%; } col.apn-sw-type { width:8.2%; } col.apn-sw-rate { width:6.6%; } col.apn-sw-min { width:5%; } col.apn-sw-max { width:7.2%; } col.apn-sw-yn { width:4.6%; } } .apn-sgrid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .apn-sgrid tr.ghead th.g-del { color:var(--z-del); } .apn-sgrid tr.chead th { color:var(--muted); letter-spacing:.05em; } .apn-sgrid tr.chead th.apn-r { text-align:right; } table.grid.apn-sgrid tbody.orow > tr.r { cursor:default; height:auto; } .apn-sgrid tr.r > td { padding-top:6px; padding-bottom:6px; } .apn-sgrid td.apn-r, .apn-sgrid td.apn-r .l1 { text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .apn-sgrid .apn-sid { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .apn-sgrid .apn-sname { white-space:normal; overflow:visible; line-height:1.35; } .apn-sgrid .apn-scat { white-space:normal; overflow:visible; line-height:1.35; } .apn-sgrid .apn-scat a { color:var(--text); } .apn-sgrid .apn-scat a:hover { color:var(--accent); } .apn-sgrid tr.r > td.apn-c-price { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .apn-ours { display:block; font-size:var(--fs-xs); color:var(--ink); line-height:1.4; white-space:normal; } .apn-ours .k { color:var(--muted); } .apn-chk { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; color:var(--z-del); border:1px solid var(--z-del-line); background:var(--z-del-soft); border-radius:5px; padding:0 4px; line-height:14px; margin-left:4px; } .apn-sgrid tbody.orow.apn-oursrow > tr.r > td { background-color:var(--accent-soft); } .apn-sgrid tbody.orow.apn-oursrow > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--accent); } .apn-llegend i.ours { background:var(--accent); } .apn-gone { margin:0 0 9px; } #apn-slist { scroll-margin-top:62px; } table.grid.apn-sgrid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } /* a phone's width: a card per service */ @media (max-width:560px) { #apn-sgrid tbody.orow > tr.r { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 10px; padding:9px 11px 10px; } #apn-sgrid td.apn-sc-id, #apn-sgrid td.apn-sc-name, #apn-sgrid td.apn-sc-cat, #apn-sgrid td.apn-sc-ours { grid-column:1 / -1; } #apn-sgrid td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } #apn-sgrid td.apn-r, #apn-sgrid td.apn-r .l1 { text-align:left; } .apn-read .sp { display:none; } } /* ---- Service checker (2026-10-02) ---------------------------------------------------- The list as the owner approved it: the tiles, the filter rows, a table per service of ours with a line per watched panel service that opens in place, the money by panel. Every class starts with ckr-. */ :root { --ckr-bad-tint:color-mix(in srgb, var(--bad) 8%, transparent); --ckr-run-tint:color-mix(in srgb, var(--run) 8%, transparent); } .ckr-mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } #ckr-list, #ckr-money { scroll-margin-top:62px; } /* ---- the head: the title with its two buttons, the figures that are filters ---- */ .ckr-phead > .ckr-ptitle { flex:1 1 560px; min-width:0; } .ckr-hrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ckr-hrow h1 { margin:0 6px 0 0; } .ckr-hrow .btn { font-size:var(--fs-s); padding:2px 10px; } .ckr-phead .sub { max-width:1180px; line-height:1.5; margin-top:4px; } .ckr-kpis .kpi { min-width:104px; } .ckr-kpis .kpi b { font-variant-numeric:tabular-nums; white-space:nowrap; } .ckr-kpis .kpi span { color:var(--muted); } .ckr-kpis .kpi.ckr-quiet b { color:var(--muted); } /* ---- a status, a result, a state: the words and the small tags --------------- */ .ckr-tag { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border:1px dashed var(--line-3); border-radius:5px; padding:0 5px; line-height:15px; white-space:nowrap; vertical-align:1px; } .ckr-tag.hand { border-style:solid; border-color:var(--amber-line); background:var(--amber-soft); color:var(--amber); } .ckr-tag.run { border-style:solid; border-color:var(--run-line); background:var(--run-soft); color:var(--run); } .ckr-t-ok { color:var(--ok); } .ckr-t-bad { color:var(--bad); } .ckr-t-amber { color:var(--amber); } .ckr-t-run { color:var(--run); } .ckr-t-off { color:var(--off); } .ckr-dv { font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums; } .ckr-dv.ok { color:var(--ok); } .ckr-dv.bad { color:var(--bad); } .ckr-dv.amber { color:var(--amber); } .ckr-dv.off { color:var(--off); } .ckr-dv.run { color:var(--run); } /* the last checks of a record as cells, the newest on the right */ .ckr-strip { display:flex; align-items:stretch; gap:2px; height:15px; margin-top:2px; } .ckr-strip i { flex:1 1 0; min-width:3px; max-width:9px; border-radius:2px; background:var(--line-2); } .ckr-strip i.ok { background:var(--ok); } .ckr-strip i.bad { background:var(--bad); } .ckr-strip i.amber { background:var(--amber); } .ckr-strip i.off { background:repeating-linear-gradient(135deg, var(--off) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px var(--off); } .ckr-strip i.run { background:var(--run); box-shadow:0 0 0 1px var(--surface), 0 0 0 2px var(--run-line); } .ckr-strip i.none { background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); } /* ---- the filter header: the one typed field sits on the top line -------------- */ .ckr-fx .fx-top .omni { max-width:520px; } .ckr-fx .fx-state .ckr-scope { color:var(--muted); } /* ---- the summary line over the tables ------------------------------------------ */ .ckr-sumline { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:2px 2px 8px; font-size:var(--fs-s); color:var(--muted); } .ckr-sumline b { color:var(--ink); font-variant-numeric:tabular-nums; } .ckr-sumline .sp { flex:1; } .ckr-legend { display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px 12px; font-size:var(--fs-xs); color:var(--muted); } .ckr-legend .ckr-lgk { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .ckr-legend i { display:inline-block; width:8px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .ckr-legend i.ok { background:var(--ok); } .ckr-legend i.bad { background:var(--bad); } .ckr-legend i.amber { background:var(--amber); } .ckr-legend i.off { background:repeating-linear-gradient(135deg, var(--off) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px var(--off); } .ckr-legend i.run { background:var(--run); } /* ---- a table per service of ours ------------------------------------------------- */ .ckr-group { margin-bottom:10px; } .panel + .ckr-group, .ckr-group + .ckr-group { margin-top:0; } .ckr-group > .pt { padding-top:6px; padding-bottom:6px; } .ckr-group > .pt b.ckr-gname { font-family:var(--f-head); font-size:var(--fs-m); font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); } .ckr-gsum { display:inline-flex; flex-wrap:wrap; gap:3px 12px; font-size:var(--fs-xs); color:var(--muted); } .ckr-gsum b { font-variant-numeric:tabular-nums; } col.ckr-w-exp { width:28px; } col.ckr-w-ps { width:17.5%; } col.ckr-w-use { width:17%; } col.ckr-w-st { width:14%; } col.ckr-w-strip { width:10.5%; } col.ckr-w-last { width:12.5%; } col.ckr-w-rule { width:10%; } col.ckr-w-spent { width:7.5%; } col.ckr-w-act { width:11%; } .ckr-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .ckr-grid tr.chead th { color:var(--muted); } .ckr-grid th.ckr-r, .ckr-grid td.ckr-r { text-align:right; } .ckr-grid tr.r > td { padding-top:8px; padding-bottom:8px; } .ckr-grid .l1 .k, .ckr-grid .l2 .k { color:var(--faint); } .ckr-grid .l2 { font-size:var(--fs-xs); } .ckr-psn { font-weight:700; color:var(--ink); } .ckr-psid { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .ckr-ord { display:inline-block; min-width:16px; margin-right:6px; padding:0 4px; border-radius:4px; font-size:var(--fs-micro); font-weight:700; line-height:15px; text-align:center; color:var(--muted); background:var(--surface-3); vertical-align:1px; } .ckr-rate { font-family:var(--f-mono); color:var(--ink); } .ckr-use { white-space:nowrap; } .ckr-use b { color:var(--ink); font-weight:700; } .ckr-use .ckr-pr { font-family:var(--f-mono); color:var(--text); } .ckr-use.off, .ckr-use.off b, .ckr-use.off .ckr-pr { color:var(--faint); font-weight:400; } .ckr-use + .ckr-use::before { content:'·'; color:var(--line-3); margin:0 5px; } .ckr-c-use .l1 { font-size:var(--fs-s); } /* why it was set by hand: the line worth reading grows to two lines rather than cut the reason short */ .ckr-c-st .l3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:1px; font-size:var(--fs-xs); line-height:1.3; white-space:normal; color:var(--ink); } .ckr-c-st .l1 { display:flex; align-items:center; gap:5px; } .ckr-c-st .l1 .pill { font-size:var(--fs-xs); } .ckr-c-last .l1 { display:flex; align-items:baseline; gap:6px; } .ckr-in { font-size:var(--fs-xs); color:var(--muted); } td.ckr-c-act { overflow:visible; } .ckr-grid td.ckr-c-act .acts.ckr-acts { flex-direction:column; align-items:flex-end; gap:3px; } .ckr-ag { display:flex; gap:3px; justify-content:flex-end; flex-wrap:wrap; } .ckr-ag:empty { display:none; } .ckr-grid tbody.ckr-offrow > tr.r > td .l1, .ckr-grid tbody.ckr-offrow > tr.r > td .l2 { opacity:.66; } .ckr-grid tbody.ckr-archrow > tr.r > td .l1, .ckr-grid tbody.ckr-archrow > tr.r > td .l2 { opacity:.72; } .ckr-empty { padding:18px 12px !important; color:var(--muted); font-size:var(--fs-s); text-align:center; } /* admin.css flaw: the kit's fix of the two-row sticky head ("table.grid thead tr.ghead + tr.chead th { top:71px }") stands the column names a pixel low, and the rows show through a one-pixel slit while the page scrolls (the proxies prototype met it first). 70px closes it; the inset line keeps the hairline. */ table.grid.ckr-grid thead tr.ghead + tr.chead th, table.grid.ckr-tgrid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } /* ---- the opened line: five named zones ---------------------------------------------- */ /* the history on the left (its checks, its log), what decides it on the right (status, rules, routes) */ .ckr-dgrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0, 1fr); } @media (min-width:1300px) { .ckr-dgrid { grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); } } .ckr-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .ckr-zc { border-left:2px solid var(--z-del); } .ckr-zc > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .ckr-zs { border-left:2px solid var(--z-ord); } .ckr-zs > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .ckr-zs.bad { border-left-color:var(--bad); } .ckr-zs.bad > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .ckr-zs.amber { border-left-color:var(--amber); } .ckr-zs.amber > h4 { color:var(--amber); background:var(--amber-soft); border-bottom-color:var(--amber-line); } .ckr-zr { border-left:2px solid var(--z-cus); } .ckr-zr > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .ckr-zu { border-left:2px solid var(--z-pan); } .ckr-zu > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .ckr-zl { border-left:2px solid var(--z-ord); } .ckr-zl > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone > h4 .views.ckr-views { padding:2px; gap:2px; border-radius:7px; letter-spacing:0; text-transform:none; } .ckr-views .view { padding:1px 8px; font-family:var(--f-body); font-size:var(--fs-xs); } .ckr-drawer .zone > h4 .btn, .ckr-group > .pt .btn { font-family:var(--f-body); letter-spacing:0; text-transform:none; } /* admin.css flaw: its fact captions are --fs-nano in --faint, too small and pale on a 4K monitor */ .ckr-drawer .facts dt { font-size:var(--fs-micro); color:var(--muted); } .ckr-drawer .facts dd { font-size:var(--fs-s); } .ckr-zfoot { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:7px; font-size:var(--fs-xs); color:var(--muted); } .ckr-zfoot b { color:var(--ink); font-variant-numeric:tabular-nums; } .ckr-zfoot .sp { flex:1; } .ckr-why { margin:7px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } .ckr-why b { color:var(--text); } .ckr-reason { color:var(--ink); font-style:italic; } /* the compact tables: the captions readable on a 4K monitor */ table.grid.inner.ckr-itab thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } table.grid.inner.ckr-itab tbody td { vertical-align:middle; } table.grid.inner.ckr-itab td.nw, table.grid.inner.ckr-itab th.nw { white-space:nowrap; } table.grid.inner.ckr-itab .sub { display:block; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; } .ckr-runtab tr.ckr-rbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } .ckr-runtab tr.ckr-ramber td:first-child { box-shadow:inset 3px 0 0 var(--amber); } .ckr-runtab tr.ckr-rrun td:first-child { box-shadow:inset 3px 0 0 var(--run); } .ckr-runtab tr.ckr-roff td:first-child { box-shadow:inset 3px 0 0 var(--off); } .ckr-runtab tr.ckr-rrun td { background:var(--ckr-run-tint); } .ckr-runtab tr.ckr-hl td { background:var(--accent-soft); box-shadow:inset 0 1px 0 var(--accent-line), inset 0 -1px 0 var(--accent-line); } /* the checks: fixed columns, so a long note never squeezes the target to nothing */ table.grid.inner.ckr-runtab { table-layout:fixed; } .ckr-runtab col.ckr-rc-id { width:13%; } .ckr-runtab col.ckr-rc-st { width:14%; } .ckr-runtab col.ckr-rc-tgt { width:18%; } .ckr-runtab col.ckr-rc-cnt { width:12%; } .ckr-runtab col.ckr-rc-dlv { width:9%; } .ckr-runtab col.ckr-rc-res { width:11%; } .ckr-runtab col.ckr-rc-cost { width:8%; } .ckr-runtab col.ckr-rc-note { width:15%; } /* the card's table is twice as wide: the note takes what the drawer cannot give it */ .ckr-cardruns col.ckr-rc-id { width:9%; } .ckr-cardruns col.ckr-rc-st { width:12%; } .ckr-cardruns col.ckr-rc-tgt { width:18%; } .ckr-cardruns col.ckr-rc-cnt { width:9%; } .ckr-cardruns col.ckr-rc-dlv { width:8%; } .ckr-cardruns col.ckr-rc-res { width:8%; } .ckr-cardruns col.ckr-rc-cost { width:7%; } .ckr-cardruns col.ckr-rc-note { width:29%; } .ckr-runtab td { overflow:hidden; text-overflow:ellipsis; } .ckr-runtab td.ckr-tgt { white-space:nowrap; } .ckr-runtab td.ckr-tgt a, .ckr-runtab td.ckr-tgt .sub { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ckr-runtab td.ckr-rnote { color:var(--text); white-space:normal; overflow-wrap:anywhere; } .ckr-runtab td.ckr-rnote.bad { color:var(--bad); } .ckr-usetab tr.ckr-skip td { background:var(--ckr-bad-tint); } .ckr-usetab tr.ckr-uoff td { color:var(--faint); } .ckr-logtab td.ckr-lk { white-space:nowrap; } .ckr-logtab td.ckr-lt { overflow-wrap:anywhere; } .ckr-kind { display:inline-block; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); background:var(--surface-3); border:1px solid var(--line); border-radius:4px; padding:0 5px; line-height:16px; } .ckr-kind.manual, .ckr-kind.active { color:var(--amber); border-color:var(--amber-line); background:var(--amber-soft); } .ckr-kind.rebuild { color:var(--z-pan); border-color:var(--z-pan-line); background:var(--z-pan-soft); } /* ---- the forms: the rules and the status by hand ------------------------------------- */ .ckr-fgrid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px 10px; align-items:end; } .ckr-f { display:flex; flex-direction:column; gap:3px; min-width:0; } .ckr-f > label, .ckr-f > .ckr-fl { font-size:var(--fs-xs); font-weight:600; color:var(--muted); line-height:1.3; } .ckr-f input { width:100%; height:28px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font:inherit; font-size:var(--fs-s); font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .ckr-f input.ckr-txt { font-family:var(--f-body); } .ckr-f input:focus { outline:none; border-color:var(--accent-line); background:var(--surface); box-shadow:var(--ring); } .ckr-f input::placeholder { color:var(--faint); } .ckr-f input.ckr-bad { border-color:var(--bad-line); background:var(--bad-soft); } .ckr-f .ckr-cnt { font-size:var(--fs-xs); color:var(--faint); font-weight:400; } .ckr-rule { margin:9px 0 0; padding:7px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-size:var(--fs-s); color:var(--text); line-height:1.55; } .ckr-rule b { color:var(--ink); font-variant-numeric:tabular-nums; } .ckr-rule .ckr-rl { display:block; } .ckr-rule .ckr-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:0; } .ckr-rule .ckr-dot.ok { background:var(--ok); } .ckr-rule .ckr-dot.bad { background:var(--bad); } .ckr-rule .ckr-dot.amber { background:var(--amber); } .ckr-warn { margin:7px 0 0; padding:5px 9px; border:1px solid var(--bad-line); background:var(--bad-soft); color:var(--bad); border-radius:var(--r-sm); font-size:var(--fs-s); font-weight:600; } .ckr-note { margin:7px 0 0; padding:5px 9px; border:1px solid var(--amber-line); background:var(--amber-soft); color:var(--amber); border-radius:var(--r-sm); font-size:var(--fs-xs); font-weight:600; } .ckr-ffoot { display:flex; align-items:flex-start; gap:12px; margin-top:9px; } .ckr-ffoot .btn { padding:3px 18px; flex:0 0 auto; } .ckr-ffoot .hint, .ckr-help { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } /* one choice of four, a joined track of real radio buttons */ .ckr-rseg { display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px; padding:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:8px; } .ckr-rseg label { position:relative; cursor:pointer; } .ckr-rseg input { position:absolute; opacity:0; width:1px; height:1px; margin:0; } .ckr-rseg span { display:inline-flex; align-items:center; gap:6px; padding:0 9px; line-height:22px; border-radius:6px; font-size:var(--fs-s); font-weight:600; color:var(--muted); white-space:nowrap; } .ckr-rseg label:hover span { color:var(--ink); background:var(--surface); } .ckr-rseg input:checked + span { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1), 0 0 0 1px var(--line-2); } .ckr-rseg input:focus-visible + span { box-shadow:var(--ring); } .ckr-mrow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; } .ckr-mrow .ckr-f.grow { flex:1 1 260px; } .ckr-mrow .btn { height:28px; padding:0 18px; } /* ---- the money: the checks and their cost by panel ------------------------------------- */ .ckr-money .pbd { padding:0; } table.grid.inner.ckr-mtab tbody td, table.grid.inner.ckr-mtab thead th { padding-left:11px; padding-right:11px; } .ckr-mtab tr.ckr-tot td { background:var(--surface-2); font-weight:700; color:var(--ink); border-top:1px solid var(--line-2); } .ckr-mtab td.ckr-z { color:var(--faint); } .ckr-mtab a.ckr-pf { font-weight:700; } .ckr-foot { margin:10px 2px 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.55; max-width:1500px; } .ckr-foot b { color:var(--text); } /* what a button of a line answered, under its buttons */ .ckr-said { display:block; max-width:100%; text-align:right; font-size:var(--fs-xs); line-height:1.35; white-space:normal; overflow-wrap:anywhere; } .ckr-said.ok { color:var(--ok); } .ckr-said.bad { color:var(--bad); } .ckr-nil { margin:0; } .ckr-fs { margin-top:9px; } .ckr-mrow { margin-top:7px; } .ckr-help { margin:6px 0 0; } .ckr-pfacts { margin-top:8px; } .ckr-z { color:var(--faint); } /* ---- the card of one panel service: its head, the others of the list, the buttons ---- */ .ckr-ch1 { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .ckr-ch1 h1 { margin:0; } .ckr-ch1 .pill { text-transform:none; font-size:var(--fs-xs); line-height:18px; padding:0 9px; } .ckr-marks { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:5px; font-size:var(--fs-s); color:var(--muted); } .ckr-marks .ckr-reason { font-style:italic; } .ckr-switch { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 0 10px; } .ckr-switch .fx-seg a:hover { text-decoration:none; } .ckr-switch .fx-s { font-size:var(--fs-s); } .ckr-switch .fx-s.ckr-gone { opacity:.6; } .ckr-swlab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-left:6px; } .ckr-actp { margin-bottom:9px; } .ckr-actp .actrow .sp { flex:1; } .ckr-actp .actrow .btn { font-size:var(--fs-s); padding:2px 10px; } .cgrid.ckr-cg { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); } .cgrid.ckr-cg > .panel { margin-top:0; height:100%; } /* admin.css flaw: its fact captions are --fs-nano in --faint, as in the opened line */ .ckr-cg .facts dt { font-size:var(--fs-micro); color:var(--muted); } .ckr-cg .facts dd { font-size:var(--fs-s); } #ckr-setp .ckr-fgrid { grid-template-columns:repeat(3, minmax(0, 1fr)); } #ckr-runs, #ckr-logp { scroll-margin-top:62px; } /* every check: the days of the last thirty, a bar a day, the newest on the right */ .ckr-days { display:flex; align-items:flex-end; gap:6px; padding:10px 11px 4px; border-bottom:1px solid var(--line); } .ckr-day { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:3px; } .ckr-dbar { height:64px; width:100%; max-width:46px; margin:0 auto; display:flex; flex-direction:column-reverse; gap:2px; } .ckr-dbar i { display:block; border-radius:2px; min-height:2px; } .ckr-dbar i.ok { background:var(--ok); } .ckr-dbar i.bad { background:var(--bad); } .ckr-dbar i.amber { background:var(--amber); } .ckr-dbar i.off { background:repeating-linear-gradient(135deg, var(--off) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px var(--off); } .ckr-dbar i.run { background:var(--run); } .ckr-dlab { font-size:var(--fs-micro); color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; } .ckr-dlab b { display:block; color:var(--ink); font-weight:700; } .ckr-dleg { display:flex; flex-wrap:wrap; align-items:center; gap:3px 14px; padding:5px 11px 7px; border-bottom:1px solid var(--line); } table.grid.inner.ckr-cardruns thead th { position:sticky; top:50px; z-index:6; background:var(--surface-2); } .ckr-cardruns tbody td:first-child, .ckr-cardruns thead th:first-child { padding-left:11px; } #ckr-runs .tbar { border-top:1px solid var(--line); } .ckr-views a.view, .ckr-views a.view:hover { text-decoration:none; } /* ---- the target pool: each service of ours, the rule, every target ---- */ .cgrid.ckr-tg { grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); } .cgrid.ckr-tg > .panel { margin-top:0; height:100%; } .ckr-tg .facts dt { font-size:var(--fs-micro); color:var(--muted); } .ckr-tg .facts dd { font-size:var(--fs-s); } #ckr-bysvc, #ckr-filters, #ckr-tlist { scroll-margin-top:62px; } .ckr-bar { display:inline-block; width:96px; height:8px; border-radius:20px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; vertical-align:0; margin-right:7px; } .ckr-bar i { display:block; height:100%; background:var(--ok); } .ckr-bar.amber i { background:var(--amber); } .ckr-bstab td a { font-variant-numeric:tabular-nums; } .ckr-bstab td .ckr-z { color:var(--faint); } .ckr-bstab tr.ckr-tot td { background:var(--surface-2); font-weight:700; color:var(--ink); border-top:1px solid var(--line-2); } .ckr-whytab { margin-top:10px; } /* many services of ours: the two panels stand one under the other, and a long caption wraps rather than push the table out */ .cgrid.ckr-tg.ckr-many { grid-template-columns:minmax(0, 1fr); } .ckr-bstab thead th, .ckr-whytab thead th { white-space:normal; } .ckr-whytab td { vertical-align:top; } col.ckr-tw-id { width:7%; } col.ckr-tw-svc { width:10.5%; } col.ckr-tw-tgt { width:21%; } col.ckr-tw-st { width:10%; } col.ckr-tw-cnt { width:7.5%; } col.ckr-tw-read { width:9%; } col.ckr-tw-used { width:15%; } col.ckr-tw-chk { width:5%; } col.ckr-tw-note { width:15%; } .ckr-tgrid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .ckr-tgrid tr.chead th { color:var(--muted); } .ckr-tgrid th.ckr-r, .ckr-tgrid td.ckr-r { text-align:right; } table.grid.ckr-tgrid tr.r { height:46px; cursor:default; } .ckr-tgrid tr.r > td { padding-top:6px; padding-bottom:6px; } .ckr-tgrid .l2 { font-size:var(--fs-xs); } .ckr-tnote { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; font-size:var(--fs-xs); line-height:1.35; color:var(--text); } .ckr-tnote.bad { color:var(--bad); } .ckr-tnote.amber { color:var(--amber); } .ckr-perw { display:inline-flex; align-items:center; gap:6px; } form[data-once] button.is-busy { opacity:.6; cursor:progress; } /* ---- 4K and the narrower desktops ---- */ @media (min-width:2100px) { .ckr-grid tr.r > td { padding-top:9px; padding-bottom:9px; } .ckr-strip { height:16px; } .ckr-dbar { height:72px; } } @media (max-width:2099px) { col.ckr-w-ps { width:17%; } col.ckr-w-use { width:16.5%; } col.ckr-w-st { width:15.5%; } col.ckr-w-strip { width:10%; } col.ckr-w-last { width:12%; } col.ckr-w-rule { width:10%; } col.ckr-w-spent { width:7.5%; } col.ckr-w-act { width:11.5%; } col.ckr-tw-id { width:7.5%; } col.ckr-tw-svc { width:10%; } col.ckr-tw-tgt { width:18.5%; } col.ckr-tw-st { width:10.5%; } col.ckr-tw-cnt { width:7%; } col.ckr-tw-read { width:9%; } col.ckr-tw-used { width:16.5%; } col.ckr-tw-chk { width:5%; } col.ckr-tw-note { width:16%; } } @media (max-width:1700px) { col.ckr-w-ps { width:17%; } col.ckr-w-use { width:16%; } col.ckr-w-st { width:15.5%; } col.ckr-w-strip { width:9.5%; } col.ckr-w-last { width:13%; } col.ckr-w-rule { width:10.5%; } col.ckr-w-spent { width:7.5%; } col.ckr-w-act { width:11%; } .cgrid.ckr-cg { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .cgrid.ckr-cg > #ckr-uses { grid-column:1 / -1; } } @media (max-width:1400px) and (min-width:561px) { col.ckr-w-strip { width:0; } .ckr-grid th.ckr-hstrip, .ckr-grid tr.r > td.ckr-c-strip { display:none; } .ckr-grid tr.ghead th.ckr-gstrip { display:none; } col.ckr-w-ps { width:19%; } col.ckr-w-use { width:18%; } col.ckr-w-st { width:16%; } col.ckr-w-last { width:14%; } col.ckr-w-rule { width:12%; } col.ckr-w-spent { width:8.5%; } col.ckr-w-act { width:12.5%; } .ckr-fgrid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .cgrid.ckr-tg { grid-template-columns:minmax(0, 1fr); } } @media (max-width:1100px) { .cgrid.ckr-cg { grid-template-columns:minmax(0, 1fr); } } /* ---- a phone's width: the page holds together, nothing scrolls sideways ---------------------- */ @media (max-width:560px) { .ckr-kpis .kpi { flex:1 1 30%; min-width:0; } .ckr-hrow h1 { flex:1 1 100%; } .ckr-sumline .sp { display:none; } .ckr-group > .pt .hint, .ckr-group > .pt .ckr-gsum { flex:1 1 100%; } /* a line becomes a card: the panel service and its state on top, the rest under them */ table.grid.ckr-grid tr.r { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px 10px; padding:9px 36px 10px 11px; } table.grid.ckr-grid tr.r > td.ckr-c-ps, table.grid.ckr-grid tr.r > td.ckr-c-use, table.grid.ckr-grid tr.r > td.ckr-c-act, table.grid.ckr-grid tr.r > td.ckr-c-strip { grid-column:1 / -1; } .ckr-grid .l1, .ckr-grid .l2 { white-space:normal; } .ckr-use { white-space:normal; } table.grid.ckr-grid td.ckr-c-act .acts.ckr-acts { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:4px 6px; } table.grid.ckr-grid td.ckr-c-act .ckr-ag { justify-content:flex-start; } .ckr-grid td.ckr-r { text-align:left; } .ckr-strip { height:16px; } .ckr-strip i { max-width:none; } .ckr-dgrid { grid-template-columns:minmax(0, 1fr); } /* admin.css flaw: at this width it turns every table.grid into blocks, the inner tables of an opened line and of a card included; they become labelled blocks here instead of a heap of loose cells */ table.grid.inner.ckr-itab thead { display:none; } table.grid.inner.ckr-itab tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px 10px; padding:6px 2px; border-top:1px solid var(--line); } table.grid.inner.ckr-itab tbody tr:first-child { border-top:0; } table.grid.inner.ckr-itab tbody td { padding:0 !important; border:0 !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; box-shadow:none !important; max-width:none; } table.grid.inner.ckr-itab td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } table.grid.inner.ckr-itab td.ckr-wide { grid-column:1 / -1; } .ckr-runtab tr.ckr-rbad, .ckr-runtab tr.ckr-ramber, .ckr-runtab tr.ckr-rrun, .ckr-runtab tr.ckr-roff { border-left:3px solid var(--line-2); padding-left:7px !important; } .ckr-runtab tr.ckr-rrun td { background:transparent !important; } .ckr-runtab tr.ckr-rrun { background:var(--ckr-run-tint); } /* the card of a line: its state and its last check first, then the rest */ table.grid.ckr-grid tr.r > td.ckr-c-ps { order:1; } table.grid.ckr-grid tr.r > td.ckr-c-st { order:2; } table.grid.ckr-grid tr.r > td.ckr-c-last { order:3; } table.grid.ckr-grid tr.r > td.ckr-c-strip { order:4; } table.grid.ckr-grid tr.r > td.ckr-c-use { order:5; } table.grid.ckr-grid tr.r > td.ckr-c-rule { order:6; } table.grid.ckr-grid tr.r > td.ckr-c-spent { order:7; } table.grid.ckr-grid tr.r > td.ckr-c-act { order:8; } table.grid.ckr-grid tr.r > td { margin-top:0 !important; } .ckr-runtab tr.ckr-rbad { border-left-color:var(--bad); } .ckr-runtab tr.ckr-ramber { border-left-color:var(--amber); } .ckr-runtab tr.ckr-rrun { border-left-color:var(--run); } .ckr-runtab tr.ckr-roff { border-left-color:var(--off); } table.grid.inner.ckr-itab tr.ckr-tot { background:var(--surface-2); } table.grid.inner.ckr-itab tr.ckr-tot td { background:transparent !important; } .ckr-drawer .zone > h4 .sp { display:none; } .ckr-fgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ckr-ffoot { flex-direction:column; } .ckr-rseg { width:100%; } .ckr-rseg label { flex:1 1 45%; } .ckr-rseg span { justify-content:center; width:100%; } .ckr-mrow .btn { width:100%; } /* the card */ .cgrid.ckr-cg { grid-template-columns:minmax(0, 1fr); } #ckr-setp .ckr-fgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ckr-switch .fx-seg { width:100%; } .ckr-switch .fx-s { flex:1 1 45%; justify-content:flex-start; } .ckr-actp .actrow .sp { display:none; } .ckr-days { gap:3px; padding:8px 8px 4px; } .ckr-dlab { font-size:9px; } .ckr-dlab span { display:none; } /* the pool */ .cgrid.ckr-tg { grid-template-columns:minmax(0, 1fr); } .ckr-whytab tbody tr, .ckr-bstab tbody tr { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } table.grid.ckr-tgrid tr.r { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px 10px; padding:9px 11px 10px; height:auto; } table.grid.ckr-tgrid tr.r > td.ckr-tc-tgt, table.grid.ckr-tgrid tr.r > td.ckr-tc-note, table.grid.ckr-tgrid tr.r > td.ckr-tc-used { grid-column:1 / -1; } table.grid.ckr-tgrid tr.r > td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; } .ckr-tgrid td.ckr-r { text-align:left; } .ckr-tgrid .l1, .ckr-tgrid .l2 { white-space:normal; overflow-wrap:anywhere; } .ckr-perw { flex-wrap:wrap; } } /* ---- Refill tracking (2026-10-02) ------------------------------------------------------ The list as the owner approved it: nine tiles that set their state, the filter header, the queue with its walk kept on the page, a line per tracker that opens in place into six zones. The card shares the zones (.rft-page). Every class starts with rft-; the kit's captions printed at 9.5 px and faint are lifted to --fs-micro in --muted. */ /* ---- the head: what the screen is, the nine states as tiles ------------------ */ .rft-phead { align-items:flex-end; } .rft-headl { flex:1 1 460px; min-width:0; } .phead .sub.rft-sub { max-width:980px; margin-top:3px; line-height:1.45; } .rft-kpis { flex-wrap:wrap; justify-content:flex-end; align-items:stretch; } .rft-kpis .kpi { display:flex; flex-direction:column; min-width:106px; max-width:170px; padding:4px 10px 6px; cursor:pointer; color:inherit; } .rft-kpis .kpi b { font-variant-numeric:tabular-nums; white-space:nowrap; } .rft-kpis .kpi span { color:var(--muted); white-space:nowrap; } .rft-kpis .kpi small { display:block; margin-top:2px; font-size:var(--fs-xs); line-height:1.3; color:var(--muted); } .rft-kpis .kpi.warn span, .rft-kpis .kpi.warn small { color:var(--amber); } .rft-kpis .kpi.rft-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .kpi.rft-k-off { border-left-color:var(--off-line); } /* ---- the filter header: the state on its own line, the rest in two columns ---- */ #rft-filters .fx-subg { gap:6px; } #rft-filters .fx-subh { font-size:var(--fs-xs); color:var(--muted); } .rft-dates input { width:124px; font-family:var(--f-mono); font-size:var(--fs-xs); } .rft-badday { font-size:var(--fs-xs); font-weight:600; color:var(--bad); } .rft-rownote { font-size:var(--fs-xs); color:var(--muted); } .rft-cname { font-size:var(--fs-s); color:var(--muted); white-space:nowrap; } .rft-cname b { color:var(--ink); font-weight:600; } @media (min-width:2000px) { #rft-filters.fx.v1 .fx-body { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); } #rft-filters.fx.v1 .fx-blk.rft-fx-state { border-top:0; } #rft-filters.fx.v1 .fx-blk.side > .fx-lh:first-child, #rft-filters.fx.v1 .fx-blk.side > .fx-lh:first-child + .fx-rc { border-top:1px solid var(--line); } } /* ---- the toolbar of the list, the queue and its walk ------------------------- */ .rft-total { font-size:var(--fs-s); color:var(--muted); } .rft-total b { font-family:var(--f-mono); font-size:var(--fs); font-weight:700; color:var(--ink); } .rft-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .rft-per a:hover { text-decoration:none; } .rft-legend { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .rft-legend i { display:inline-block; width:4px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:5px; } .rft-legend i.amber { background:var(--amber); } .rft-legend i.off { background:var(--off-line); } .rft-legend b { color:var(--ink); } .rft-lgm { display:inline-block; position:relative; width:44px; vertical-align:middle; margin-right:6px; } .rft-lgm .bar { display:flex; height:7px; min-width:0; } .rft-lgm .bar i { width:auto; height:100%; border-radius:0; margin:0; vertical-align:0; } .rft-lgm .rft-mk { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); } .rft-q { display:grid; grid-template-columns:128px minmax(0,1fr); border-bottom:1px solid var(--line); } .rft-qlab { padding:9px 8px 8px 11px; background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); line-height:1.35; } .rft-qlab small { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); } .rft-qc { padding:7px 11px 8px; min-width:0; display:grid; gap:5px; } .rft-qbtns { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .rft-scope { font-size:var(--fs-xs); font-weight:600; color:var(--accent); margin-left:4px; } .rft-qhint { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; max-width:1480px; } .rft-qhint b { color:var(--text); font-weight:700; } .rft-run { display:grid; gap:4px; padding:7px 11px 8px 139px; border-bottom:1px solid var(--line); background:var(--run-soft); } .rft-rh { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .rft-rh b { color:var(--run); font-weight:700; font-size:var(--fs-s); } .rft-run .bar { max-width:560px; height:8px; } .rft-run .bar i { background:var(--run); } .rft-run.done { background:var(--ok-soft); } .rft-run.done .rft-rh b { color:var(--ok); } .rft-run.done .bar i { background:var(--ok); } .rft-step { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); overflow-wrap:anywhere; } /* ---- the list: a line per tracker ------------------------------------------ */ .rft-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .rft-grid tr.ghead th.g-del { color:var(--z-del); } .rft-grid tr.chead th { color:var(--muted); letter-spacing:.05em; } .rft-grid tr.chead th.right { text-align:right; } .rft-grid tr.r > td.rft-t-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } @media (min-width:561px) { .rft-grid tbody.orow > tr.r { height:66px; } } /* the columns: the actions need about 300 px for four buttons whatever the screen */ col.rft-w-exp { width:1.3%; } col.rft-w-tgt { width:15.4%; } col.rft-w-cus { width:9.6%; } col.rft-w-now { width:10.4%; } col.rft-w-drop { width:5.5%; } col.rft-w-read { width:7.3%; } col.rft-w-lim { width:9.1%; } col.rft-w-until { width:7.7%; } col.rft-w-st { width:13.3%; } col.rft-w-act { width:20.4%; } @media (min-width:2100px) { col.rft-w-tgt { width:16%; } col.rft-w-cus { width:11%; } col.rft-w-now { width:12.4%; } col.rft-w-drop { width:6%; } col.rft-w-read { width:7.8%; } col.rft-w-lim { width:7.8%; } col.rft-w-until { width:8%; } col.rft-w-st { width:15.4%; } col.rft-w-act { width:14.3%; } } .rft-grid .l1 .k, .rft-grid .l2 .k { color:var(--muted); } .rft-grid .l1 b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .rft-grid .of { color:var(--muted); font-weight:400; } .rft-c-tgt .l1.tline { gap:7px; } a.rft-id { flex:0 0 auto; font-family:var(--f-mono); font-size:var(--fs-s); font-weight:600; color:var(--ink); } a.rft-id:hover { color:var(--accent); } .rft-c-tgt a.rft-u { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rft-c-now .l1 { font-family:var(--f-mono); font-size:var(--fs-s); } .rft-c-drop .l1 { font-family:var(--f-mono); font-size:var(--fs); font-weight:700; } .rft-c-drop .l1, .rft-c-drop .l2 { text-align:right; } .rft-c-read .l1, .rft-c-until .l1, .rft-c-lim .l1 { font-variant-numeric:tabular-nums; } .rft-c-lim .l1 { font-family:var(--f-mono); font-size:var(--fs-s); } .rft-dw { color:var(--amber); } .rft-db { color:var(--bad); } .rft-d0, .rft-c-drop .l1.rft-d0 { color:var(--faint); font-weight:400; } .rft-late, .rft-grid .l2.rft-late, .rft-grid .l2.rft-late .k { color:var(--bad); font-weight:700; } .rft-never { color:var(--faint); } .rft-over { color:var(--muted); } .rft-grid .l1.rft-over { color:var(--muted); } .rft-owed { color:var(--amber); font-weight:700; } .rft-err { color:var(--bad); } .rft-busy { color:var(--run); } .rft-why { color:var(--muted); } .rft-login { font-weight:600; color:var(--ink); } .rft-login:hover { color:var(--accent); } tbody.orow.rft-endrow > tr.r > td { color:var(--muted); } tbody.orow.rft-endrow > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--off-line); } tbody.orow.rft-endrow .l1 b { color:var(--muted); } .rft-say { display:block; margin-top:4px; font-size:var(--fs-xs); line-height:1.35; text-align:right; white-space:normal; } .rft-say.ok { color:var(--ok); } .rft-say.bad { color:var(--bad); } .rft-nothing td { padding:18px 12px; } .rft-foot { margin:9px 2px 0; max-width:1180px; line-height:1.5; } /* the counter against the expected number, the threshold marked on it */ .rft-meter { position:relative; margin:4px 0 3px; } .rft-meter .bar { display:flex; height:7px; min-width:0; } .rft-meter .bar i.rft-g, .rft-lgm .bar i.rft-g { background:var(--ok); } .rft-meter .bar i.rft-a { background:var(--amber); } .rft-meter .rft-mk { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; border-radius:1px; background:var(--ink); } .rft-meter.big { margin:3px 0 7px; } .rft-meter.big .bar { height:12px; } .rft-meter.big .rft-mk { top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; } .rft-meter.rft-none .bar { background-image:repeating-linear-gradient(135deg, transparent 0 3px, var(--line-2) 3px 4px); } .rft-lbar { display:flex; height:12px; } /* ---- the opened line: six named zones ------------------------------------------ */ .rft-drawer .dtitle { font-size:var(--fs-xs); } .rft-drawer .dtitle .rft-dsub { font-size:var(--fs-s); color:var(--text); } .rft-drawer > .errbox { margin:0 0 9px; } .rft-dgrid { display:flex; flex-direction:column; gap:10px; } /* the kit gives .z-del/.z-cus/.z-ord a grid-area for its own drawer: here they would pile into one cell */ .rft-dgrid .zone { grid-area:auto; } .rft-dcol { display:contents; } .rft-z-cnt { order:1; } .rft-z-calc { order:2; } .rft-z-act { order:3; } .rft-z-ref { order:4; } .rft-z-lim { order:5; } .rft-z-hist { order:6; } @media (min-width:1560px) { .rft-dgrid { display:grid; grid-template-columns:minmax(380px, 27%) minmax(0,1fr); align-items:start; } .rft-dcol { display:grid; gap:10px; align-content:start; min-width:0; } .rft-dgrid > .rft-z-ref { grid-column:1 / -1; } } @media (min-width:2100px) { .rft-dgrid, .rft-dcol { gap:12px; } } .zone.rft-z-calc { border-left:2px solid var(--z-ord); } .zone.rft-z-calc > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .zone.rft-z-act { border-left:2px solid var(--accent); } .zone.rft-z-act > h4 { color:var(--accent); background:var(--accent-soft); border-bottom-color:var(--accent-line); } .zone > h4 .zt { color:var(--muted); } .zone > h4 .btn { letter-spacing:0; text-transform:none; font-family:var(--f-body); } .zbody.p0 { padding:0; } .rft-drawer .f .k { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .rft-drawer .f .v { font-size:var(--fs-s); } .rft-drawer .bigbar .bf .k, .rft-page .bigbar .bf .k { font-size:var(--fs-micro); color:var(--muted); } .rft-drawer .bigbar .bh b, .rft-page .bigbar .bh b { color:var(--muted); } .fields.rft-f2 { margin-top:9px; grid-template-columns:repeat(2, minmax(0,1fr)); } .rft-cap { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 5px; } .rft-cap > b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .rft-cap .k { font-size:var(--fs-xs); color:var(--muted); } .rft-cap .sp { flex:1; } .rft-cap a, a.rft-hl { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; } .rft-zempty { font-size:var(--fs-s); color:var(--muted); padding:2px 0; } .zbody.p0 > .rft-zempty { padding:9px 11px; } .rft-facts dt { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } .rft-facts dd .k { color:var(--muted); } .facts.rft-facts { margin-top:2px; } .errbox.rft-warnbox { border-color:var(--amber-line); background:var(--amber-soft); } .errbox.rft-warnbox .ec { color:var(--amber); } .errbox.rft-offbox { border-color:var(--off-line); background:var(--off-soft); } .errbox.rft-offbox .ec { color:var(--off); } .errbox .ec { font-size:var(--fs-micro); } .zone.rft-z-act .rft-warnbox, .rft-acts .rft-warnbox { margin:9px 11px; } /* the calculation: the orders on the target and the arithmetic of each */ table.grid.inner.rft-calc { font-size:var(--fs-s); } table.grid.inner.rft-calc thead th { color:var(--muted); font-size:var(--fs-micro); letter-spacing:.05em; white-space:normal; background:var(--surface-2); } table.grid.inner.rft-calc thead tr.rft-hg th { height:20px; border-bottom:0; color:var(--muted); } table.grid.inner.rft-calc thead tr.rft-hg th.rft-g-ar { color:var(--ok); } table.grid.inner.rft-calc th.gs, table.grid.inner.rft-calc td.gs { border-left:1px solid var(--line-2); } table.grid.inner.rft-calc td.mn { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; white-space:nowrap; } table.grid.inner.rft-calc td.rft-from { color:var(--ink); font-weight:700; } table.grid.inner.rft-calc tr.muted td.rft-from { color:inherit; } table.grid.inner.rft-calc td.chosen { color:var(--ok); } table.grid.inner.rft-calc td:first-child, table.grid.inner.rft-calc th:first-child { padding-left:11px; } table.grid.inner.rft-calc td:last-child, table.grid.inner.rft-calc th:last-child { padding-right:11px; } table.grid.inner.rft-calc td.rft-mail { max-width:0; width:17%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.rft-calc tr.muted td { color:var(--muted); } table.grid.inner.rft-calc td.rft-whyc { font-style:italic; color:var(--muted); } .rft-hand { font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; color:var(--z-del); margin-left:3px; } .rft-stepbox { padding:8px 11px 10px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } ol.rft-steps { margin:2px 0 0; padding-left:22px; font-size:var(--fs-s); color:var(--text); line-height:1.65; font-variant-numeric:tabular-nums; } ol.rft-steps li::marker { color:var(--muted); } ol.rft-steps li.rft-s-owe { color:var(--amber); font-weight:700; } ol.rft-steps li.rft-s-ok { color:var(--ok); font-weight:600; } ol.rft-steps li.rft-s-bad { color:var(--bad); font-weight:700; } ol.rft-steps li.rft-s-off { color:var(--muted); } .rft-chint { margin:7px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; max-width:1360px; } .rft-chint b { color:var(--text); } /* the actions: a row per kind, its caption in a band on the left */ .rft-arow { display:grid; grid-template-columns:112px minmax(0,1fr); border-top:1px solid var(--line); } .zbody.p0 > .rft-arow:first-child, .rft-acts > .pt + .rft-arow, .rft-warnbox + .rft-arow { border-top:0; } .rft-warnbox + .rft-arow { border-top:1px solid var(--line); } .rft-alab { padding:9px 8px 8px 11px; background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); line-height:1.35; } .rft-alab small { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--text); } .rft-arc { padding:7px 11px 8px; min-width:0; display:grid; gap:5px; align-content:start; } .rft-arc .actrow { gap:6px 8px; align-items:flex-end; } .rft-arc .actrow form { display:contents; } .rft-arc .fld > span:first-child { font-size:var(--fs-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); } .rft-arc .fld input { height:28px; background:var(--surface); } .rft-arc .btn { min-height:28px; } .rft-wq input { width:8rem; font-family:var(--f-mono); } .rft-wb input { width:10rem; font-family:var(--f-mono); } .rft-wd input { width:9rem; font-family:var(--f-mono); } .rft-wr select { max-width:30rem; } .rft-own { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:flex-end; } .rft-own[hidden] { display:none; } .fld.rft-ww { flex:1 1 220px; max-width:560px; } .fld.rft-ww input { width:100%; } .rft-or { font-size:var(--fs-xs); color:var(--muted); padding:0 2px 6px; } .rft-prev { font-size:var(--fs-xs); color:var(--text); line-height:1.45; } .rft-prev b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .rft-prev code { font-size:var(--fs-xs); } .rft-ahint { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .rft-arc .rft-say { text-align:left; margin-top:0; } .zbody > .rft-say { text-align:left; } /* the readings, the history, the refills */ table.scant.rft-reads th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; } table.scant.rft-reads td.t { font-size:var(--fs-xs); color:var(--muted); } table.scant.rft-reads .d.down { color:var(--bad); } table.scant.rft-reads td.rft-by { color:var(--muted); font-size:var(--fs-xs); white-space:nowrap; } table.grid.inner.rft-ev thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; } table.grid.inner.rft-ev td:first-child, table.grid.inner.rft-ev th:first-child { padding-left:11px; } table.grid.inner.rft-ev td:last-child, table.grid.inner.rft-ev th:last-child { padding-right:11px; } table.grid.inner.rft-ev td.nw { color:var(--muted); } table.grid.inner.rft-ev td.rft-ek code { font-size:var(--fs-xs); } table.grid.inner.rft-ev tr.rft-ebad td.rft-ek code { color:var(--bad); font-weight:600; } table.grid.inner.rft-ev tr.rft-eop td.rft-ek code { color:var(--accent); font-weight:600; } table.grid.inner.rft-ev td.wrap { white-space:normal; overflow-wrap:anywhere; } .rft-subs table.subs th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; } .rft-subs table.subs .sid small { white-space:normal; max-width:200px; } /* the captions of the sub-orders table may take two lines: the fifteen columns then fit a 1400 px screen */ .rft-subs table.subs thead th { white-space:normal; } .rft-subs table.subs td.word, .rft-subs table.subs td.when, .rft-subs table.subs td.ctr { white-space:normal; } .rft-orphans { margin-top:9px; font-size:var(--fs-s); } .rft-orphans .rft-cap { display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .rft-orphans ul { margin:4px 0 0; padding-left:18px; color:var(--text); } .rft-rsum { font-family:var(--f-body); font-size:var(--fs-xs); font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); } .rft-rsum b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } /* ---- the card of a tracker ------------------------------------------------------ */ .rft-page .phead { align-items:flex-start; margin-bottom:6px; } .rft-hrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .rft-hrow h1 { margin:0; } .rft-marks { display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin:0 0 9px; } .rft-marks .hint { margin-left:4px; font-size:var(--fs-xs); color:var(--muted); } .rft-page .cgrid + .panel, .rft-page .panel + .cgrid { margin-top:0; } .rft-page .cgrid { margin-bottom:9px; } .rft-page > .panel { margin-bottom:9px; } .rft-page > .panel + .panel { margin-top:0; } .panel.rft-acts { border-left:3px solid var(--accent); } .rft-top { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:start; margin-bottom:9px; } @media (min-width:1600px) { .rft-top { grid-template-columns:minmax(0,7fr) minmax(0,5fr); } } .rft-stack { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; align-content:start; min-width:0; } .rft-top > .panel + .rft-stack, .rft-stack > .panel + .panel, .rft-page .cgrid > .panel + .rft-stack { margin-top:0; } .rft-page .rft-ahint, .rft-page .rft-prev { max-width:1040px; } .rft-flash { margin:0 0 9px; } .cgrid.rft-c21 { grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); } /* a wide screen: the curve, the target and the settings side by side, one row high */ @media (min-width:2200px) { .cgrid.rft-c21 { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.1fr); } .cgrid.rft-c21 > .rft-stack { display:contents; } } .rft-chart { width:100%; } .rft-svg { display:block; width:100%; height:auto; } .rft-svg .rft-exp { stroke:var(--ok); stroke-width:1.3; stroke-dasharray:6 4; } .rft-svg .rft-thr { stroke:var(--amber); stroke-width:1.3; stroke-dasharray:6 4; } .rft-svg text.rft-thrl { fill:var(--amber); } .rft-svg .rft-rmark { fill:var(--z-pan); } .rft-svg .rft-odot { fill:var(--muted); } .rft-csum { margin-top:6px; gap:3px 14px; } .rft-lk { display:inline-flex; align-items:center; gap:5px; } .rft-lk i { display:inline-block; width:16px; height:0; border-top:2px solid var(--accent); } .rft-lk i.rft-lk-e { border-top:2px dashed var(--ok); } .rft-lk i.rft-lk-t { border-top:2px dashed var(--amber); } .rft-lk i.rft-lk-r { width:0; height:0; border-top:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--z-pan); } .rft-all { margin-top:8px; } .rft-all > summary { cursor:pointer; list-style:none; font-size:var(--fs-xs); font-weight:600; color:var(--accent); } .rft-all > summary::-webkit-details-marker { display:none; } .rft-all > summary::before { content:'\25B8 '; } .rft-all[open] > summary::before { content:'\25BE '; } .rft-all table.rft-reads { max-width:680px; margin-top:5px; } table.grid.inner.rft-subt { margin-top:8px; } table.grid.inner.rft-subt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; } table.grid.inner.rft-subt th, table.grid.inner.rft-subt td { white-space:normal; overflow-wrap:anywhere; } .rft-hist .pt .views { margin-left:auto; } .rft-hist .view, .rft-hist .view:hover { text-decoration:none; } /* ---- 4K ---------------------------------------------------------------------- */ @media (min-width:2100px) { .rft-q { grid-template-columns:138px minmax(0,1fr); } .rft-run { padding-left:149px; } .rft-arow { grid-template-columns:122px minmax(0,1fr); } .rft-kpis .kpi { max-width:184px; } } /* a narrower desktop: the legend steps aside before the line squeezes */ @media (max-width:1560px) { .rft-legend { display:none; } } @media (max-width:1280px) { .cgrid.rft-c21 { grid-template-columns:minmax(0,1fr); } } /* ---- a phone's width: the page holds together, nothing scrolls sideways --------- */ @media (max-width:700px) { .rft-q, .rft-arow { grid-template-columns:minmax(0,1fr); } .rft-qlab, .rft-alab { border-right:0; border-bottom:1px solid var(--line); padding:6px 11px 5px; } .rft-qlab small, .rft-alab small { display:inline; margin-left:8px; } .rft-run { padding-left:11px; } .fld.rft-ww, .rft-arc .fld { flex:1 1 100%; max-width:none; } .rft-arc .fld input, .rft-arc .fld select, .rft-wq input, .rft-wb input, .rft-wd input { width:100%; } .rft-wr select { max-width:none; } .rft-own { flex:1 1 100%; } .rft-own .fld { flex:1 1 100%; } .rft-or { display:none; } .rft-page .phead .pacts { flex-wrap:wrap; margin-left:0; } .fields.rft-f2 { grid-template-columns:minmax(0,1fr); } } @media (max-width:560px) { .rft-kpis { justify-content:flex-start; } .rft-kpis .kpi { flex:1 1 30%; min-width:0; max-width:none; } .rft-kpis .kpi span { white-space:normal; } .rft-per { margin-left:auto; } /* the line becomes a card: the kit's "table.grid tr {display:block}" outranks "tr.r {display:flex}" */ table.grid.rft-grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 12px; padding:9px 36px 10px 11px; height:auto; } table.grid.rft-grid td.rft-c-tgt { order:1; flex:1 1 55%; } table.grid.rft-grid td.c-status { order:2; flex:0 1 auto; max-width:44%; margin-left:auto; text-align:right; } table.grid.rft-grid td.c-status .stline { justify-content:flex-end; flex-wrap:wrap; } table.grid.rft-grid td.c-status .pill { white-space:normal; text-align:center; } table.grid.rft-grid td.rft-c-now { order:3; flex:1 1 100%; } table.grid.rft-grid td.rft-c-drop { order:4; flex:1 1 26%; } table.grid.rft-grid td.rft-c-lim { order:5; flex:1 1 60%; } table.grid.rft-grid td.rft-c-read { order:6; flex:1 1 42%; } table.grid.rft-grid td.rft-c-until { order:7; flex:1 1 42%; } table.grid.rft-grid td.rft-c-now .l1, table.grid.rft-grid td.rft-c-drop .l1, table.grid.rft-grid td.rft-c-lim .l1 { white-space:nowrap; } table.grid.rft-grid td.c-customer { order:8; flex:1 1 100%; display:block; } table.grid.rft-grid td.c-act { order:9; flex:1 1 100%; } table.grid.rft-grid td.c-act .acts { justify-content:flex-start; flex-wrap:wrap; } table.grid.rft-grid td.rft-c-drop::before, table.grid.rft-grid td.rft-c-read::before, table.grid.rft-grid td.rft-c-lim::before, table.grid.rft-grid td.rft-c-until::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .rft-grid .l1, .rft-grid .l2 { white-space:normal; overflow-wrap:anywhere; } .rft-c-drop .l1, .rft-c-drop .l2 { text-align:left; } .rft-say { text-align:left; } .rft-drawer .dtitle > span:last-child { display:none; } /* the inner tables of the opened line and of the card: labelled blocks instead of squeezed columns */ .rft-drawer table.grid.inner tr, .rft-page table.grid.inner tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; padding:7px 10px; border-top:1px solid var(--line); } .rft-drawer table.grid.inner tbody tr:first-child, .rft-page table.grid.inner tbody tr:first-child { border-top:0; } .rft-drawer table.grid.inner tbody td, .rft-page table.grid.inner tbody td { border:0 !important; padding:0 !important; max-width:none; width:auto; white-space:normal; box-shadow:none; text-align:left !important; } .rft-drawer table.grid.inner td[data-l]::before, .rft-page table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.rft-calc td.rft-whyc, table.grid.inner.rft-calc td.rft-mail, table.grid.inner.rft-ev td.wrap { grid-column:1 / -1; } table.grid.inner.rft-calc td.chosen { padding:2px 4px !important; border-radius:5px; } table.grid.inner.rft-ev tr { grid-template-columns:minmax(0,1fr) auto; } table.grid.inner.rft-ev td.rft-ek { text-align:right !important; } .rft-drawer table.scant, .rft-page table.scant { display:table; width:100%; } .rft-drawer table.scant thead, .rft-page table.scant thead { display:table-header-group; } .rft-drawer table.scant tbody, .rft-page table.scant tbody { display:table-row-group; } .rft-drawer table.scant tr, .rft-page table.scant tr { display:table-row; } .rft-drawer table.scant th, .rft-drawer table.scant td, .rft-page table.scant th, .rft-page table.scant td { display:table-cell; } table.scant.rft-reads td.rft-by { white-space:normal; } .rft-hist .pt .views { margin-left:0; width:100%; } } /* the answer of a press inside the opened line: over the actions and over the refills */ .rft-say.rft-asay { display:block; margin:9px 11px 0; text-align:left; font-weight:600; } .zbody > .rft-say.rft-asay { margin:0 0 7px; } /* ---- Drop tests (2026-10-02) ------------------------------------------------------ The screen as the owner approved it in round 4: the tiles, the panel services compared at every point of the timetable, the list with its bars and the test opened in place. Every class starts with drt-; the rest is the kit's. */ .drt-fx .fx-lab[title] { cursor:help; } .drt-grid .acts form, .drt-acts form { display:contents; } /* ---- head: what the screen is, the tiles, the button that adds tests ------- */ .drt-phead > div:first-child { flex:1 1 620px; min-width:0; } .phead .sub.drt-sub { max-width:1240px; margin-top:2px; line-height:1.45; } .drt-hacts { margin-left:auto; display:flex; align-items:stretch; gap:7px; flex-wrap:wrap; } .drt-hacts .kpis { margin-left:0; } .drt-kpis .kpi { display:block; cursor:pointer; min-width:96px; } .drt-kpis .kpi span { color:var(--muted); } .drt-kpis .kpi b { font-variant-numeric:tabular-nums; } .drt-kpis .kpi.drt-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .drt-kpis .kpi.drt-zero b { color:var(--muted); } .drt-addbtn { align-self:stretch; display:inline-flex; align-items:center; gap:6px; padding:4px 13px; font-size:var(--fs); border-radius:var(--r); } .drt-addbtn svg { width:14px; height:14px; } .btn.pri.drt-addbtn.drt-open { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); } .btn.pri.drt-addbtn.drt-open:hover { background:var(--surface-3); color:var(--ink); border-color:var(--line-3); } /* ---- the message the page shows after an action ------------------------------ */ .drt-flash .saved, .drt-flash .alert-bad { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .drt-flash .sp { flex:1; } .drt-flash .drt-fx { border:0; background:transparent; color:inherit; cursor:pointer; font-size:15px; font-weight:700; line-height:1; padding:0 2px; } /* ---- the add panel: pick, set, start ---------------------------------------- */ .drt-add { margin-bottom:9px; } .drt-addgrid { display:grid; grid-template-columns:minmax(0,1fr); } @media (min-width:1800px) { .drt-addgrid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; } .drt-addgrid > .drt-frm { position:sticky; top:58px; } .drt-addgrid > .drt-rowsbox { border-left:1px solid var(--line); align-self:stretch; } } .drt-frm { display:grid; grid-template-columns:150px minmax(0,1fr); align-content:start; } .drt-frm > .drt-fl { padding:9px 10px 8px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-right:1px solid var(--line); font-size:var(--fs-xs); font-weight:700; color:var(--muted); line-height:1.35; } .drt-frm > .drt-fl b { display:block; color:var(--ink); font-size:var(--fs-s); } .drt-frm > .drt-fl small { display:block; font-weight:400; color:var(--muted); margin-top:2px; } .drt-frm > .drt-fc { padding:8px 11px 9px; border-top:1px solid var(--line); min-width:0; } .drt-frm > .drt-fl:first-child, .drt-frm > .drt-fl:first-child + .drt-fc { border-top:0; } .drt-row { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; } .drt-lab { display:inline-flex; flex-direction:column; gap:2px; min-width:0; } .drt-lab > span { font-size:var(--fs-xs); font-weight:600; color:var(--muted); } .drt-in { height:28px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs); min-width:0; max-width:100%; } .drt-in.mono { font-family:var(--f-mono); font-size:var(--fs-s); } .drt-in:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .drt-in.drt-w6 { width:6.5rem; } .drt-in.drt-w8 { width:8rem; } .drt-row .btn { height:28px; } .drt-prog { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; } .drt-prog .bar { flex:0 0 240px; max-width:100%; height:9px; } .drt-prog .bar i { background:var(--z-del); transition:width .25s ease; } .drt-prog .bar.drt-done i { background:var(--ok); } .drt-say { font-size:var(--fs-s); color:var(--text); font-variant-numeric:tabular-nums; } .drt-say.drt-busy { color:var(--run); font-weight:600; } .drt-say.drt-badsay { color:var(--bad); font-weight:600; } .drt-note { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; margin-top:7px; } .drt-note b { color:var(--ink); font-weight:600; } .drt-seg button.fx-s { border:0; background:transparent; cursor:pointer; font-family:inherit; } .drt-seg button.fx-s.on { background:var(--surface); color:var(--accent); box-shadow:var(--sh-1), 0 0 0 1px var(--accent-line); } .drt-look { margin-top:7px; padding:6px 9px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); font-size:var(--fs-s); color:var(--text); line-height:1.45; } .drt-look b { color:var(--ink); font-weight:600; } .drt-look .mono { color:var(--ink); } .drt-look.drt-warn { border-color:var(--amber-line); background:var(--amber-soft); } .drt-look.drt-warn b { color:var(--amber); } .drt-look .k { color:var(--muted); } .drt-rowsbox { min-width:0; display:flex; flex-direction:column; } .drt-rowshead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 11px; border-bottom:1px solid var(--line); background:var(--surface-2); } .drt-rowshead b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .drt-rowshead .hint { font-size:var(--fs-xs); color:var(--muted); } .drt-rowshead .sp { flex:1; } .drt-rowsempty { padding:16px 12px; font-size:var(--fs-s); color:var(--muted); line-height:1.5; } table.grid.inner.drt-rt { table-layout:auto; } table.grid.inner.drt-rt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; background:var(--surface); } table.grid.inner.drt-rt td { vertical-align:middle; padding:3px 8px; } table.grid.inner.drt-rt td.drt-rn { color:var(--muted); font-variant-numeric:tabular-nums; width:1%; } table.grid.inner.drt-rt td.drt-ru a { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } table.grid.inner.drt-rt td.drt-ru a:hover { color:var(--accent); } table.grid.inner.drt-rt select.drt-in { height:26px; padding:0 4px; font-size:var(--fs-s); } table.grid.inner.drt-rt input.drt-in { height:26px; } table.grid.inner.drt-rt .drt-svcin { width:6.5rem; } table.grid.inner.drt-rt .drt-qin { width:5.5rem; text-align:right; } table.grid.inner.drt-rt td.drt-ri { font-size:var(--fs-xs); color:var(--muted); line-height:1.35; min-width:150px; white-space:normal; } table.grid.inner.drt-rt td.drt-ri b { color:var(--ink); font-weight:600; } table.grid.inner.drt-rt td.drt-ri .bad-text, table.grid.inner.drt-rt td.drt-ri .amber-text { font-weight:600; } table.grid.inner.drt-rt tr.drt-new td { animation:flashrow .9s ease-out; } table.grid.inner.drt-rt tr.drt-rowbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } .drt-startbar .drt-tot { display:block; font-size:var(--fs-s); color:var(--text); line-height:1.5; margin-bottom:7px; } .drt-startbar .drt-tot b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .drt-startbar .drt-tot .amber-text, .drt-startbar .drt-tot .bad-text { font-size:var(--fs-s); } .drt-formerr { margin:0 0 7px; } /* the pick of 2026-10-11: the service, the seven ways, the line of what the pick did and cost */ .drt-modes { display:grid; gap:1px; margin-top:8px; } .drt-mode { display:flex; align-items:baseline; gap:7px; padding:3px 7px; border-radius:var(--r); cursor:pointer; font-size:var(--fs-s); color:var(--text); line-height:1.35; } .drt-mode:hover { background:var(--surface-2); } .drt-mode input { margin:0; accent-color:var(--accent); align-self:center; flex:none; } .drt-mode .drt-mn { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); flex:none; } .drt-mode .drt-ml { color:var(--ink); } .drt-mode .drt-mx { font-size:var(--fs-xs); color:var(--muted); } .drt-mode.drt-mno .drt-ml { color:var(--muted); } .drt-mode:has(input:checked) { background:var(--accent-soft); } .drt-mode:has(input:checked) .drt-ml { color:var(--accent); font-weight:600; } .drt-params .drt-lab[hidden], .drt-params .drt-chk[hidden] { display:none; } .drt-chk { display:inline-flex; align-items:center; gap:6px; height:28px; font-size:var(--fs-s); color:var(--text); cursor:pointer; } .drt-chk input { margin:0; accent-color:var(--accent); } .drt-in.drt-w10 { width:11rem; } .drt-sid { display:inline-flex; align-items:center; gap:2px; } .drt-sid .drt-in { height:24px; width:8rem; } .drt-sid.set .drt-in { border-color:var(--accent-line); color:var(--accent); } .drt-sid a { color:var(--muted); font-weight:600; padding:0 5px; } .drt-sid a:hover { color:var(--ink); } .drt-in.drt-w20 { width:22rem; max-width:100%; } .drt-make { margin-top:8px; align-items:center; } .drt-make[hidden] { display:none; } .drt-macc { font-size:var(--fs-xs); color:var(--muted); } .drt-pickrow { margin-top:8px; } .drt-tally { margin-top:7px; font-size:var(--fs-xs); color:var(--text); line-height:1.65; font-variant-numeric:tabular-nums; } .drt-tally:empty { display:none; } .drt-tally .drt-tl b { display:inline-block; min-width:74px; margin-right:6px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .drt-tally .drt-tl i { font-style:normal; font-weight:600; font-family:var(--f-mono); color:var(--ink); } .drt-tally .drt-tl .dot { margin:0 6px; color:var(--muted); } table.grid.inner.drt-rt td.drt-ru { white-space:nowrap; } table.grid.inner.drt-rt td.drt-ru .l2 { display:block; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.drt-rt td.drt-ru .l2 a { font-size:var(--fs-xs); } table.grid.inner.drt-rt td.drt-ru .drt-why { display:block; max-width:16rem; font-size:var(--fs-xs); font-weight:600; color:var(--bad); white-space:normal; } table.grid.inner.drt-rt .drt-tin { width:13rem; } table.grid.inner.drt-rt td.drt-rsv { font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; } /* ---- the comparison of the panel services: the heart of the page ---------- */ .drt-sum { margin-bottom:9px; } .drt-sum .pt .hint b { color:var(--muted); font-weight:700; } table.grid.drt-st { table-layout:fixed; } .drt-st col.drt-k0 { width:2.2%; } .drt-st col.drt-k1 { width:13.6%; } .drt-st col.drt-k2 { width:6.4%; } .drt-st col.drt-k3 { width:6.6%; } .drt-st col.drt-k4 { width:4.6%; } .drt-st col.drt-k5 { width:66.6%; } .drt-st tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .drt-st tr.ghead th.g-del { color:var(--z-del); } .drt-st tr.chead th { color:var(--muted); letter-spacing:.05em; } .drt-st th.drt-r, .drt-st td.drt-r { text-align:right; } .drt-st tbody.drt-srow { border-bottom:1px solid var(--line); } .drt-st tbody.drt-srow.drt-sopen { border-bottom:2px solid var(--z-pan-line); } .drt-st tr.r { height:auto; } .drt-st tr.r > td { padding:5px 9px; vertical-align:middle; } .drt-st tr.r > td.c-exp { padding-left:6px; padding-right:0; } .drt-st tbody.drt-srow.drt-sopen > tr.r > td { background-color:var(--surface-3); } .drt-st td.drt-s-name .l1 b { font-weight:600; color:var(--ink); } .drt-st td.drt-s-name .l1 .mono { color:var(--ink); font-weight:500; } .drt-st td.drt-r .l1 { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; } .drt-st tr.drt-tr > td { padding:3px 9px; border-top:1px solid var(--line); background:var(--surface-2); vertical-align:middle; font-size:var(--fs-s); } .drt-st tr.drt-tr > td.drt-tn { padding-left:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .drt-st tr.drt-tr > td.drt-tn a.drt-goto { font-family:var(--f-mono); font-weight:500; color:var(--accent); } .drt-st tr.drt-tr > td.drt-tn .drt-tu { color:var(--text); margin-left:5px; } .drt-st tr.drt-tr:hover > td { background:var(--surface-3); } .drt-st tr.drt-tfoot > td { padding:5px 9px 7px 22px; background:var(--surface-2); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); } /* the 39 points: four phase groups, the same flex everywhere so the columns line up */ .drt-cells { display:flex; gap:4px; align-items:stretch; min-width:0; } .drt-pg { display:flex; gap:1px; min-width:0; } .drt-pg.drt-p0 { flex:8 1 0; } .drt-pg.drt-p1 { flex:8 1 0; } .drt-pg.drt-p2 { flex:12 1 0; } .drt-pg.drt-p3 { flex:11 1 0; } .drt-cell { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 0 1px; border-radius:3px; background:var(--surface-2); overflow:hidden; } .drt-cell b { font-family:var(--f-mono); font-weight:500; font-size:var(--fs-s); color:var(--ink); line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; } .drt-cell i { font-style:normal; font-size:var(--fs-micro); color:var(--muted); line-height:1.15; white-space:nowrap; } .drt-cell.ok { background:var(--ok-soft); } .drt-cell.ok b { color:var(--ok); } .drt-cell.amber { background:var(--amber-soft); } .drt-cell.amber b { color:var(--amber); } .drt-cell.bad { background:var(--bad-soft); } .drt-cell.bad b { color:var(--bad); } .drt-cell.run b { color:var(--run); } .drt-cell.drt-no { background:transparent; box-shadow:inset 0 0 0 1px var(--line); } .drt-cell.drt-err { background:transparent; box-shadow:inset 0 0 0 1px var(--bad-line); } .drt-cell.drt-err b { color:var(--bad); } .drt-cell.drt-miss b { color:var(--muted); } .drt-tr .drt-cell { padding:1px 0; } .drt-tr .drt-cell b { font-size:var(--fs-xs); } .drt-lbls { display:flex; gap:4px; } .drt-lbls .drt-pg > * { flex:1 1 0; min-width:0; text-align:center; font-size:var(--fs-micro); font-weight:700; letter-spacing:0; text-transform:none; color:var(--muted); white-space:nowrap; overflow:hidden; line-height:18px; border-radius:3px; } .drt-lbls .drt-pg > a { line-height:1.15; white-space:normal; overflow-wrap:normal; word-break:keep-all; padding:2px 0; display:flex; align-items:center; justify-content:center; } .drt-lbls .drt-pg > a:hover { color:var(--accent); background:var(--surface); text-decoration:none; } .drt-st thead tr.chead th { height:auto; padding-top:2px; padding-bottom:2px; } .drt-lbls .drt-pg > a.on { color:var(--accent-ink); background:var(--accent); } .drt-phcap { display:flex; gap:4px; } .drt-phcap > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-left:2px solid var(--z-del-line); padding-left:5px; } .drt-phcap > span.drt-p0 { flex:8 1 0; } .drt-phcap > span.drt-p1 { flex:8 1 0; } .drt-phcap > span.drt-p2 { flex:12 1 0; } .drt-phcap > span.drt-p3 { flex:11 1 0; } .drt-sumfoot { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; padding:6px 11px 8px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .drt-sumfoot .drt-sw { display:inline-block; width:12px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:4px; } .drt-sw.ok { background:var(--ok-soft); box-shadow:inset 0 0 0 1px var(--ok-line); } .drt-sw.amber { background:var(--amber-soft); box-shadow:inset 0 0 0 1px var(--amber-line); } .drt-sw.bad { background:var(--bad-soft); box-shadow:inset 0 0 0 1px var(--bad-line); } .drt-sw.run { background:var(--run); } .drt-sw.drt-no { box-shadow:inset 0 0 0 1px var(--line-2); } .drt-outs { display:inline-flex; gap:3px 9px; flex-wrap:wrap; justify-content:flex-end; } .drt-o { display:inline-flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums; color:var(--text); font-weight:600; } .drt-sumfoot .drt-outs { justify-content:flex-start; } .drt-sumfoot .drt-o { font-weight:400; color:var(--muted); } .drt-rem { font-size:var(--fs-xs); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-variant-numeric:tabular-nums; } .drt-rem .k { font-family:var(--f-body); color:var(--muted); } /* below a 4K width the moment of the panel's word keeps its date; the hour is in the title */ @media (max-width:2000px) { .drt-rem .drt-hm { display:none; } } .drt-tok { color:var(--ok); font-weight:700; } .drt-tamber { color:var(--amber); font-weight:700; } .drt-tbad { color:var(--bad); font-weight:700; } .drt-trun { color:var(--run); font-weight:700; } /* the sticky heads: with collapsed borders a head cell's border is the table's, not the cell's, and the rows scrolling under it show through that pixel (the bars of the strip did) - a shadow of the cell itself covers it */ .drt-grid thead th, .drt-st thead th { overflow:hidden; text-overflow:ellipsis; } .drt-grid thead tr.ghead th, .drt-st thead tr.ghead th { border-bottom:0; box-shadow:inset 0 -1px 0 var(--line); } .drt-grid thead tr.chead th, .drt-st thead tr.chead th { border-bottom:0; box-shadow:inset 0 -1px 0 var(--line-2); } .drt-grid thead tr.ghead th.gs, .drt-st thead tr.ghead th.gs { box-shadow:inset 0 -1px 0 var(--line), inset 1px 0 0 var(--line-2); } .drt-grid thead tr.chead th.gs, .drt-st thead tr.chead th.gs { box-shadow:inset 0 -1px 0 var(--line-2), inset 1px 0 0 var(--line-2); } /* ---- the list --------------------------------------------------------------- */ .drt-per { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted); } .drt-per a:hover { text-decoration:none; } .drt-count { font-size:var(--fs-s); color:var(--muted); } .drt-count b { color:var(--ink); font-weight:700; font-family:var(--f-mono); font-size:var(--fs); } .drt-legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .drt-legend i { display:inline-block; width:8px; height:12px; border-radius:2px 2px 0 0; vertical-align:-2px; margin-right:4px; } .drt-legend i.ok { background:var(--ok); } .drt-legend i.amber { background:var(--amber); } .drt-legend i.bad { background:var(--bad); } .drt-legend i.run { background:var(--run); } .drt-legend i.drt-none { border:1px dashed var(--line-3); border-radius:2px; } .drt-legend i.drt-err { background:var(--bad-soft); border:1px solid var(--bad); border-radius:2px; } .drt-legend i.drt-miss { background:repeating-linear-gradient(135deg, transparent 0 2px, var(--line-3) 2px 3px); border-radius:2px; } .drt-figs { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding:6px 11px 7px; border-bottom:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .drt-fig { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; } .drt-fig .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .drt-fig b { font-family:var(--f-mono); font-size:var(--fs-s); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .drt-fig b i { font-style:normal; font-weight:500; color:var(--muted); margin-left:6px; } .drt-fig.bad b { color:var(--bad); } .drt-fig.warn b { color:var(--amber); } .drt-figh { margin-left:auto; color:var(--muted); } .drt-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .drt-grid tr.ghead th.g-del { color:var(--z-del); } .drt-grid tr.ghead th.g-pan { color:var(--z-pan); } .drt-grid tr.chead th { color:var(--muted); letter-spacing:.05em; } .drt-grid tr.chead th.drt-r { text-align:right; } .drt-grid tr.chead th.drt-cpan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .drt-grid tr.chead th.drt-cdel { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } .drt-grid tr.r > td.drt-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .drt-grid tr.r > td.drt-del { background-image:linear-gradient(var(--z-del-tint), var(--z-del-tint)); } @media (min-width:561px) { .drt-grid tbody.orow > tr.r { height:50px; } } @media (min-width:2100px) { .drt-grid tbody.orow > tr.r { height:53px; } } .drt-grid td.drt-r .l1, .drt-grid td.drt-r .l2 { text-align:right; } .drt-grid .drt-r .l1 { font-family:var(--f-mono); font-size:var(--fs-s); } .drt-grid .l1.drt-fl1 { display:flex; align-items:center; gap:6px; } .drt-id { font-family:var(--f-mono); font-weight:500; color:var(--ink); font-size:var(--fs-s); } .drt-c-acc .l1 a { font-family:var(--f-mono); font-size:var(--fs-s); font-weight:500; color:var(--ink); } .drt-c-acc .l1 a:hover { color:var(--accent); } .drt-c-svc .l1 b { font-weight:600; color:var(--ink); } .drt-c-svc .l1 .mono { color:var(--ink); font-weight:500; margin-left:3px; } .drt-c-said .errline { margin-top:2px; } .drt-c-kept .l1, .drt-c-kept .l2 { font-variant-numeric:tabular-nums; } .drt-c-kept b { font-family:var(--f-mono); font-weight:600; } .drt-empty td { padding:18px 12px; } .drt-foot { margin:9px 2px 0; max-width:1240px; line-height:1.5; font-size:var(--fs-xs); color:var(--muted); } .drt-man { color:var(--muted); font-size:var(--fs-xs); margin-top:3px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .drt-man b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } /* the schedule of one test in a strip: a bar per point, its height the share */ .drt-strip { display:flex; gap:3px; height:28px; align-items:stretch; position:relative; margin-top:2px; } /* the dashed line at 90 % of the order (120 % is the top): over the bars, as the phone draws it */ .drt-strip::before { content:''; position:absolute; left:0; right:0; bottom:75%; border-top:1px dashed var(--ok); opacity:.55; z-index:1; pointer-events:none; } .drt-sg { display:flex; gap:1px; align-items:flex-end; min-width:0; } .drt-sg.drt-p0 { flex:8 1 0; } .drt-sg.drt-p1 { flex:8 1 0; } .drt-sg.drt-p2 { flex:12 1 0; } .drt-sg.drt-p3 { flex:11 1 0; } .drt-sg i { flex:1 1 0; min-width:2px; border-radius:2px 2px 0 0; background:var(--run); position:relative; } .drt-sg i.ok { background:var(--ok); } .drt-sg i.amber { background:var(--amber); } .drt-sg i.bad { background:var(--bad); } .drt-sg i.run { background:var(--run); } .drt-sg i.drt-none { height:100%; background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); border-radius:2px; } .drt-sg i.drt-miss { height:100%; background:repeating-linear-gradient(135deg, transparent 0 2px, var(--line-3) 2px 3px); border-radius:2px; } .drt-sg i.drt-err { height:100%; background:var(--bad-soft); box-shadow:inset 0 0 0 1px var(--bad); border-radius:2px; } .drt-sg i.drt-zero { height:2px; } .drt-ticks { display:flex; gap:3px; height:17px; } .drt-ticks .drt-sg { align-items:stretch; } .drt-ticks .drt-sg span { flex:1 1 0; min-width:2px; position:relative; } .drt-ticks .drt-sg span b { position:absolute; left:0; bottom:1px; font-size:var(--fs-micro); font-weight:700; color:var(--muted); letter-spacing:0; text-transform:none; white-space:nowrap; } .drt-ticks .drt-sg span.drt-tend b { left:auto; right:0; } .drt-c-strip { padding-top:7px !important; } /* ---- one test opened in place: four named zones ---------------------------------- */ .drt-drawer .dtitle .drt-dsub { font-size:var(--fs-s); color:var(--text); } .drt-drawer .dtitle .drt-dsub .mono { color:var(--ink); } .drt-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); grid-template-areas:"sched" "chart" "pan" "test"; align-items:start; } @media (min-width:1300px) { .drt-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"sched sched" "chart pan" "test pan"; } } @media (min-width:2100px) { .drt-dgrid { grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); grid-template-areas:"sched chart" "test pan"; gap:12px; } } .drt-dgrid > .drt-a-sched { grid-area:sched; } .drt-dgrid > .drt-a-chart { grid-area:chart; } .drt-dgrid > .drt-a-pan { grid-area:pan; } .drt-dgrid > .drt-a-test { grid-area:test; } .drt-drawer .zone > h4 .zt { color:var(--muted); } .drt-drawer .zbody > :last-child { margin-bottom:0; } .drt-phases { display:grid; gap:10px 12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-items:start; } .drt-phh { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0 0 4px; } .drt-phh b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--z-del); } .drt-phh span { font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.drt-pt { border:1px solid var(--line); border-radius:var(--r); border-collapse:separate; border-spacing:0; overflow:hidden; } table.grid.inner.drt-pt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; background:var(--surface-2); padding:0 7px; } table.grid.inner.drt-pt tbody td { padding:3px 7px; font-size:var(--fs-s); white-space:nowrap; } table.grid.inner.drt-pt td.drt-pl { font-family:var(--f-mono); color:var(--ink); font-weight:500; } table.grid.inner.drt-pt td.drt-at { color:var(--muted); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; } table.grid.inner.drt-pt td.num { font-family:var(--f-mono); font-size:var(--fs-s); } table.grid.inner.drt-pt td.drt-sh.ok { background:var(--ok-soft); color:var(--ok); font-weight:600; } table.grid.inner.drt-pt td.drt-sh.amber { background:var(--amber-soft); color:var(--amber); font-weight:600; } table.grid.inner.drt-pt td.drt-sh.bad { background:var(--bad-soft); color:var(--bad); font-weight:600; } table.grid.inner.drt-pt td.drt-sp.ok { color:var(--ok); font-weight:600; } table.grid.inner.drt-pt td.drt-sp.amber { color:var(--amber); font-weight:600; } table.grid.inner.drt-pt td.drt-sp.bad { color:var(--bad); font-weight:600; } table.grid.inner.drt-pt td.drt-sp.mute { color:var(--muted); } table.grid.inner.drt-pt tr.drt-rdue td { color:var(--muted); } table.grid.inner.drt-pt tr.drt-rdue td.drt-pl { color:var(--muted); font-weight:400; } table.grid.inner.drt-pt td.drt-msg { white-space:normal; font-size:var(--fs-xs); line-height:1.35; } table.grid.inner.drt-pt tr.drt-rerr td.drt-msg { color:var(--bad); font-weight:600; } table.grid.inner.drt-pt tr.drt-rerr td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.drt-pt tr.drt-rmiss td.drt-msg { color:var(--muted); font-style:italic; } table.grid.inner.drt-pt tr.drt-rmiss td:first-child { box-shadow:inset 3px 0 0 var(--off); } table.grid.inner.drt-pt tr.drt-rnext td { background:var(--run-soft); } table.grid.inner.drt-pt tr.drt-rnext td:first-child { box-shadow:inset 3px 0 0 var(--run); } .drt-zlegend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .drt-zlegend b { color:var(--text); font-weight:600; } /* the chart: the share at every point, this test against its service */ .drt-chart { display:grid; grid-template-columns:38px minmax(0,1fr); gap:0 6px; } .drt-ch-y { position:relative; height:190px; } .drt-ch-y span { position:absolute; right:0; transform:translateY(-50%); font-size:var(--fs-micro); color:var(--muted); font-family:var(--f-mono); } .drt-ch-plot { position:relative; height:190px; border-left:1px solid var(--line-2); border-bottom:1px solid var(--line-2); } .drt-ch-plot svg { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; } .drt-ch-x { grid-column:2; position:relative; height:18px; } .drt-ch-x span { position:absolute; top:3px; transform:translateX(-50%); font-size:var(--fs-micro); font-weight:700; color:var(--muted); white-space:nowrap; } .drt-svg .drt-gl { stroke:var(--line); stroke-width:1; } .drt-svg .drt-phl { stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 3; } .drt-svg .drt-g90 { stroke:var(--ok); stroke-width:1.2; stroke-dasharray:5 4; opacity:.75; } .drt-svg .drt-g75 { stroke:var(--amber); stroke-width:1.2; stroke-dasharray:5 4; opacity:.75; } .drt-svg .drt-avg { fill:none; stroke:var(--z-pan); stroke-width:2; stroke-dasharray:6 4; stroke-linejoin:round; } .drt-svg .drt-me { fill:none; stroke:var(--z-del); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; } .drt-svg .drt-dt { stroke:var(--z-del); stroke-width:6; stroke-linecap:round; } .drt-svg .drt-dt.drt-err { stroke:var(--bad); stroke-width:8; } .drt-svg .drt-dt.drt-miss { stroke:var(--off); stroke-width:8; } .drt-svg .drt-done { stroke:var(--z-pan); stroke-width:1.6; stroke-dasharray:3 3; } .drt-svg .drt-mk { stroke:var(--amber); stroke-width:9; stroke-linecap:square; } .drt-ch-tag { position:absolute; top:2px; transform:translateX(4px); font-size:var(--fs-micro); font-weight:700; color:var(--z-pan); background:var(--surface); padding:0 3px; border-radius:3px; white-space:nowrap; } .drt-ch-tag.drt-left { transform:translateX(calc(-100% - 4px)); } .drt-ch-key { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:var(--fs-xs); color:var(--muted); align-items:center; } .drt-ch-key i { display:inline-block; width:18px; height:0; vertical-align:3px; margin-right:5px; } .drt-ch-key i.drt-me { border-top:2.5px solid var(--z-del); } .drt-ch-key i.drt-avg { border-top:2px dashed var(--z-pan); } .drt-ch-key i.drt-g90 { border-top:1.5px dashed var(--ok); } .drt-ch-key i.drt-g75 { border-top:1.5px dashed var(--amber); } .drt-ch-key i.drt-mk { width:8px; height:8px; background:var(--amber); vertical-align:0; } .drt-ch-key i.drt-done { width:0; height:12px; border-left:1.5px dashed var(--z-pan); vertical-align:-2px; margin-right:7px; } .drt-kf { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 8px; font-size:var(--fs-s); color:var(--text); } .drt-kf .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:5px; } .drt-kf b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } /* the facts, readable at 4K: the kit's captions are 9.5px and faint */ .drt-drawer .facts dt { font-size:var(--fs-micro); color:var(--muted); min-width:118px; } .drt-drawer .facts dd .k { color:var(--muted); } .drt-drawer .facts dd .mono { color:var(--ink); } @media (min-width:1500px) { .drt-facts2 { grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); } .drt-facts2 dt:nth-of-type(2n) { padding-left:14px; border-left:1px solid var(--line); } .drt-facts2 dt:nth-of-type(2), .drt-facts2 dt:nth-of-type(2) + dd { border-top:0; } .drt-facts2 dd { padding-right:12px; } } .drt-cap { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 5px; } .drt-cap > b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .drt-cap .hint { font-size:var(--fs-xs); color:var(--muted); } .drt-cap .sp { flex:1; } table.grid.inner.drt-polls, table.grid.inner.drt-mt { border:1px solid var(--line); border-radius:var(--r); border-collapse:separate; border-spacing:0; overflow:hidden; } table.grid.inner.drt-polls thead th, table.grid.inner.drt-mt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; background:var(--surface-2); } table.grid.inner.drt-polls tbody td, table.grid.inner.drt-mt tbody td { font-size:var(--fs-s); padding:3px 8px; white-space:nowrap; } /* why a read by hand failed, under its word */ table.grid.inner.drt-mt small.drt-why { display:block; font-size:var(--fs-micro); color:var(--bad); white-space:normal; } table.grid.inner.drt-polls td.drt-word { font-weight:600; color:var(--ink); } table.grid.inner.drt-polls td.drt-perr { white-space:normal; color:var(--bad); font-weight:600; font-size:var(--fs-xs); } table.grid.inner.drt-polls tr.drt-pbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.drt-polls tr.drt-pgap td { color:var(--muted); font-style:italic; text-align:center; background:var(--surface-2); } .drt-raw { margin:6px 0 0; padding:6px 9px; background:var(--well); border:1px solid var(--line); border-radius:var(--r); font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; } .drt-none { margin:0; font-size:var(--fs-s); color:var(--muted); line-height:1.45; } .drt-none b { color:var(--ink); font-weight:600; } .drt-acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 7px; } .drt-acts .btn { padding:3px 11px; } .drt-acthint { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; margin:0 0 9px; } .drt-acthint b { color:var(--text); font-weight:600; } /* ---- 4K --------------------------------------------------------------------------- */ @media (min-width:2100px) { .drt-frm { grid-template-columns:172px minmax(0,1fr); } .drt-strip { height:30px; } } /* a narrow desktop: the legend steps aside before the line squeezes */ @media (max-width:1700px) { .drt-legend { display:none; } .drt-figh { display:none; } } @media (max-width:1560px) { .drt-cell i { display:none; } .drt-cell b { font-size:var(--fs-nano); letter-spacing:-.02em; } .drt-lbls .drt-pg > * { font-size:var(--fs-nano); } .drt-st col.drt-k1 { width:11%; } .drt-st col.drt-k2 { width:5.4%; } .drt-st col.drt-k3 { width:6%; } .drt-st col.drt-k4 { width:4.2%; } .drt-st col.drt-k5 { width:71.2%; } } /* ---- a phone: the page holds together, nothing scrolls sideways ------------------ */ @media (max-width:700px) { .drt-frm { grid-template-columns:minmax(0,1fr); } .drt-frm > .drt-fl { border-right:0; border-bottom:1px solid var(--line); padding:6px 10px 5px; } .drt-frm > .drt-fc { border-top:0; } .drt-prog .bar { flex:1 1 100%; } } @media (max-width:560px) { .drt-hacts { width:100%; } .drt-kpis { flex-wrap:wrap; width:100%; } .phead .drt-kpis .kpi { flex:1 1 calc(50% - 4px); min-width:0; } .drt-addbtn { flex:1 1 100%; justify-content:center; } .drt-figs { gap:3px 12px; } .drt-sum .pt .hint { display:block; } /* the services: a card each, the 39 points in rows of eight with their names */ table.grid.drt-st colgroup, table.grid.drt-st thead { display:none; } table.grid.drt-st tbody.drt-srow { display:block; border:1px solid var(--line); border-radius:10px; margin:8px; background:var(--surface); overflow:hidden; } table.grid.drt-st tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 14px; padding:8px 34px 9px 10px; position:relative; } table.grid.drt-st tr.r > td { padding:0 !important; border:0; background:transparent !important; } table.grid.drt-st tr.r > td.c-exp { position:absolute; top:8px; right:8px; } table.grid.drt-st td.drt-s-name { flex:1 1 100%; } table.grid.drt-st td.drt-s-name .l2 { white-space:normal; } table.grid.drt-st td.drt-r { text-align:left; } table.grid.drt-st td.drt-s-pts { flex:1 1 100%; } table.grid.drt-st td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .drt-st .drt-cells { flex-direction:column; gap:6px; } .drt-st .drt-pg { flex:none !important; flex-wrap:wrap; gap:3px; } .drt-st .drt-pg::before { content:attr(data-l); flex:1 1 100%; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--z-del); } .drt-st .drt-cell { flex:0 0 calc(12.5% - 3px); } .drt-st .drt-cell::before { content:attr(data-l); font-size:var(--fs-micro); color:var(--muted); line-height:1.2; } .drt-st .drt-cell i { display:none; } table.grid.drt-st tr.drt-tr { display:flex; flex-wrap:wrap; gap:3px 10px; padding:7px 10px; border-top:1px solid var(--line); background:var(--surface-2); } table.grid.drt-st tr.drt-tr > td { padding:0 !important; border:0 !important; background:transparent !important; } table.grid.drt-st tr.drt-tr > td.drt-tn { flex:1 1 100%; } table.grid.drt-st tr.drt-tr > td.drt-s-pts { flex:1 1 100%; } table.grid.drt-st tr.drt-tfoot { display:block; } table.grid.drt-st tr.drt-tfoot > td { display:block; } /* the list: a card per test */ table.grid.drt-grid tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px 12px; padding:9px 36px 10px 11px; height:auto; } table.grid.drt-grid td.drt-c-test { order:1; flex:1 1 auto; } table.grid.drt-grid td.drt-c-said { order:2; flex:0 1 auto; max-width:60%; margin-left:auto; text-align:right; } table.grid.drt-grid td.drt-c-said .l1 { justify-content:flex-end; display:flex; } table.grid.drt-grid td.drt-c-acc { order:3; flex:1 1 45%; } table.grid.drt-grid td.drt-c-svc { order:4; flex:1 1 45%; } table.grid.drt-grid td.drt-c-ord { order:5; flex:1 1 30%; } table.grid.drt-grid td.drt-c-price { order:6; flex:1 1 25%; } table.grid.drt-grid td.drt-c-cnt { order:7; flex:1 1 25%; } table.grid.drt-grid td.drt-c-start { order:8; flex:0 0 auto; } table.grid.drt-grid td.drt-c-strip { order:9; flex:1 1 100%; padding-top:0 !important; } table.grid.drt-grid td.drt-c-kept { order:10; flex:1 1 100%; } table.grid.drt-grid td.c-act { order:11; flex:1 1 100%; } table.grid.drt-grid td.c-act .acts { justify-content:flex-start; } table.grid.drt-grid td.drt-r .l1, table.grid.drt-grid td.drt-r .l2 { text-align:left; } table.grid.drt-grid td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.drt-grid td.drt-c-test::before, table.grid.drt-grid td.drt-c-said::before, table.grid.drt-grid td.c-act::before { display:none; } .drt-man { text-align:left; } .drt-c-strip .drt-strip { height:30px; } /* the opened test: its tables stay tables, they are narrow enough. The kit's phone rules of other sections reach every drawer table (Proxies: a grid per row, no head) and every inner table (Reviews: no padding, !important) - beaten here with a longer selector */ .drt-drawer table.grid.inner.drt-pt, .drt-drawer table.grid.inner.drt-polls, .drt-drawer table.grid.inner.drt-mt { display:table; width:100%; } .drt-drawer table.grid.inner.drt-pt thead, .drt-drawer table.grid.inner.drt-polls thead, .drt-drawer table.grid.inner.drt-mt thead { display:table-header-group; } .drt-drawer table.grid.inner.drt-pt tbody, .drt-drawer table.grid.inner.drt-polls tbody, .drt-drawer table.grid.inner.drt-mt tbody { display:table-row-group; } .drt-drawer table.grid.inner.drt-pt tbody tr, .drt-drawer table.grid.inner.drt-polls tbody tr, .drt-drawer table.grid.inner.drt-mt tbody tr, .drt-drawer table.grid.inner.drt-pt thead tr, .drt-drawer table.grid.inner.drt-polls thead tr, .drt-drawer table.grid.inner.drt-mt thead tr { display:table-row; padding:0; } .drt-drawer table.grid.inner.drt-pt tbody td, .drt-drawer table.grid.inner.drt-polls tbody td, .drt-drawer table.grid.inner.drt-mt tbody td, .drt-drawer table.grid.inner.drt-pt thead th, .drt-drawer table.grid.inner.drt-polls thead th, .drt-drawer table.grid.inner.drt-mt thead th { display:table-cell; padding:3px 5px !important; white-space:nowrap !important; } .drt-drawer table.grid.inner.drt-pt tbody tr + tr td, .drt-drawer table.grid.inner.drt-polls tbody tr + tr td, .drt-drawer table.grid.inner.drt-mt tbody tr + tr td { border-top:1px solid var(--line) !important; } .drt-drawer table.grid.inner.drt-pt td.num, .drt-drawer table.grid.inner.drt-polls td.num, .drt-drawer table.grid.inner.drt-mt td.num { text-align:right !important; } .drt-drawer table.grid.inner.drt-pt td.drt-msg, .drt-drawer table.grid.inner.drt-polls td.drt-perr { white-space:normal !important; } .drt-drawer table.grid.inner.drt-pt tr.drt-rerr td:first-child { box-shadow:inset 3px 0 0 var(--bad) !important; } .drt-drawer table.grid.inner.drt-pt tr.drt-rmiss td:first-child { box-shadow:inset 3px 0 0 var(--off) !important; } .drt-drawer table.grid.inner.drt-pt tr.drt-rnext td:first-child { box-shadow:inset 3px 0 0 var(--run) !important; } .drt-drawer table.grid.inner.drt-polls tr.drt-pbad td:first-child { box-shadow:inset 3px 0 0 var(--bad) !important; } .drt-drawer table.grid.inner.drt-polls td.drt-hide, .drt-drawer table.grid.inner.drt-polls th.drt-hide { display:none; } .drt-drawer table.grid.inner td::before { content:none !important; } /* the rows of the form: a card each, the account on top, its panel, service and quantity under it */ .drt-add table.grid.inner.drt-rt thead { display:none; } .drt-add table.grid.inner.drt-rt tbody tr { display:flex; flex-wrap:wrap; align-items:flex-end; gap:5px 8px; padding:7px 10px; border-top:1px solid var(--line); } .drt-add table.grid.inner.drt-rt tbody tr:first-child { border-top:0; } .drt-add table.grid.inner.drt-rt tbody td { display:block; padding:0 !important; border:0 !important; } .drt-add table.grid.inner.drt-rt td.drt-rn { order:1; } .drt-add table.grid.inner.drt-rt td.drt-ru { order:2; flex:1 1 50%; } .drt-add table.grid.inner.drt-rt td.drt-rf { order:3; } .drt-add table.grid.inner.drt-rt td.drt-rx { order:4; } .drt-add table.grid.inner.drt-rt td.drt-rp { order:5; flex:1 1 40%; } .drt-add table.grid.inner.drt-rt td.drt-rs { order:6; flex:1 1 25%; } .drt-add table.grid.inner.drt-rt td.drt-rq { order:7; flex:1 1 20%; text-align:left !important; } .drt-add table.grid.inner.drt-rt td.drt-ri { order:8; flex:1 1 100%; min-width:0; } .drt-add table.grid.inner.drt-rt .drt-in { width:100%; } .drt-chart { grid-template-columns:30px minmax(0,1fr); } .drt-ch-y, .drt-ch-plot { height:150px; } .drt-drawer .dtitle > span:last-child { display:none; } .drt-rowsbox { border-top:1px solid var(--line); } } /* ---- Dashboard (2026-10-02) ------------------------------------------------------------ The first screen as the owner approved it: the nine tiles of what needs a look with where each leads, the red strip of a late or failing subsystem, the money of four windows against what is usual and its chart (drawn by admin.js at its own width), the panels with how long their money lasts, the system — late and failed lines on top, the rest as a quiet pulse, the figures. Every class starts with dsh-: the kit has a global .bar and .sw, and an unprefixed name inside an SVG is not safe either. */ .dsh-lab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .dsh-mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .dsh-xv { font-family:var(--f-mono); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .dsh-up { color:var(--ok); font-weight:700; } .dsh-down { color:var(--bad); font-weight:700; } .dsh-flat { color:var(--muted); font-weight:700; } .dsh-wide { display:none; } @media (min-width:2100px) { .dsh-wide { display:inline; } } #dsh-att, #dsh-money, #dsh-pan, #dsh-sys { scroll-margin-top:62px; } /* ---- the head: the title, what the page answers, the two buttons ------------ */ .dsh-phead { margin-bottom:9px; } .dsh-ptitle { flex:1 1 620px; min-width:0; } .dsh-phead .sub { max-width:1060px; line-height:1.5; } .dsh-hact { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; } .dsh-counted { font-size:var(--fs-xs); color:var(--muted); margin-right:3px; } .dsh-counted .dsh-ct { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .dsh-hact .btn { font-size:var(--fs-s); padding:3px 11px; } .dsh-hact a.btn:hover { text-decoration:none; } /* ---- a block: a titled panel; its head carries the count on the right -------- */ .dsh-blk { margin-bottom:9px; } .dsh-blk > .pt { padding-top:5px; padding-bottom:5px; } .dsh-blk > .pt a.dsh-plink { font-size:var(--fs-xs); font-weight:600; white-space:nowrap; } .dsh-sum { font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; } .dsh-sum .dsh-sn { font-family:var(--f-mono); font-weight:700; color:var(--ink); } .dsh-sum .dsh-tbad, .dsh-sum .dsh-tbad .dsh-sn { color:var(--bad); } .dsh-sum .dsh-twarn, .dsh-sum .dsh-twarn .dsh-sn { color:var(--amber); } .dsh-sum .dsh-tok .dsh-sn { color:var(--ok); } .dsh-foot { margin:0; padding:6px 11px 8px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } .dsh-foot b { color:var(--text); font-weight:600; } .dsh-foot code { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); } /* ---- needs attention: nine tiles, amber when something is there -------------------- Each tile is a subgrid of four rows (caption, number, hint, where it leads), so the numbers and the links stand on one line however the captions wrap. */ .dsh-att { display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); column-gap:7px; row-gap:0; padding:2px 11px 11px; } .dsh-at { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; margin-top:7px; min-width:0; padding:7px 10px 8px; color:inherit; border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-1); transition:border-color .12s, box-shadow .12s; } a.dsh-at:hover { text-decoration:none; border-color:var(--accent-line); box-shadow:var(--sh-2); } .dsh-at .dsh-k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); line-height:1.3; } .dsh-at .dsh-v { font-family:var(--f-head); font-weight:600; font-size:22px; line-height:1.25; margin-top:1px; color:var(--faint); font-variant-numeric:tabular-nums; } .dsh-at .dsh-d { font-size:var(--fs-xs); color:var(--muted); line-height:1.38; } .dsh-at .dsh-go { align-self:start; margin-top:6px; font-size:var(--fs-xs); font-weight:600; color:var(--accent); line-height:1.35; } a.dsh-at:hover .dsh-go { text-decoration:underline; } .dsh-at.dsh-on { background:var(--amber-soft); border-color:var(--amber-line); border-left-color:var(--amber); } .dsh-at.dsh-on .dsh-k { color:var(--ink); } .dsh-at.dsh-on .dsh-v { color:var(--amber); } .dsh-at.dsh-on .dsh-d { color:var(--text); } /* the system's trouble under the tiles, when there is any: a pointer to its line below */ .dsh-alarm { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0 11px 11px; padding:6px 10px; border:1px solid var(--bad-line); border-left:3px solid var(--bad); border-radius:var(--r); background:var(--bad-soft); font-size:var(--fs-s); color:var(--text); line-height:1.45; } .dsh-alarm.dsh-twarn { border-color:var(--amber-line); border-left-color:var(--amber); background:var(--amber-soft); } .dsh-alarm > .dsh-lab { color:var(--bad); } .dsh-alarm.dsh-twarn > .dsh-lab { color:var(--amber); } .dsh-alarm a { font-weight:700; color:var(--bad); } .dsh-alarm .dsh-ai.dsh-twarn a { color:var(--amber); } .dsh-alarm .dsh-ai b { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; } .dsh-alarm .dsh-ah { color:var(--muted); font-size:var(--fs-xs); } /* ---- money and the panels side by side on a wide screen ------------------------ */ .dsh-mp { display:grid; grid-template-columns:minmax(0,1fr); gap:0 9px; align-items:start; } @media (min-width:1500px) { .dsh-mp { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } } @media (min-width:2100px) { .dsh-mp { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); } } /* the money: four windows, each against what is usual for it */ .dsh-mt { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:7px; row-gap:0; padding:2px 11px 2px; } .dsh-m { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; margin-top:7px; min-width:0; padding:7px 10px 8px; border:1px solid var(--line); border-left:3px solid var(--accent-line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-1); } .dsh-m .dsh-k { display:flex; align-items:baseline; gap:6px; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; } .dsh-m .dsh-w { font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--faint); overflow:hidden; text-overflow:ellipsis; } .dsh-m .dsh-v { font-family:var(--f-head); font-weight:600; font-size:22px; line-height:1.25; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .dsh-m .dsh-n { font-size:var(--fs-s); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dsh-m.dsh-zero .dsh-v { color:var(--faint); } .dsh-cmp { align-self:start; margin-top:5px; padding-top:4px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 8px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .dsh-cmp > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dsh-cmp .dsh-xv { color:var(--text); } .dsh-cmp .dsh-dl { text-align:right; font-family:var(--f-mono); } /* the chart: whole days, the bars of the money, the line of the paid orders */ .dsh-chart { padding:8px 11px 9px; } .dsh-clegend { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-bottom:6px; } .dsh-ckey { display:inline-flex; align-items:center; gap:6px; padding:1px 9px 1px 7px; border:1px solid var(--line-2); border-radius:6px; background:var(--surface); font:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text); cursor:pointer; line-height:19px; } .dsh-ckey:hover { border-color:var(--line-3); background:var(--surface-2); color:var(--ink); } .dsh-ckey[aria-pressed="false"] { color:var(--faint); background:var(--surface-2); text-decoration:line-through; } .dsh-ckey[aria-pressed="false"] i { opacity:.35; } .dsh-ckey i { display:inline-block; flex:0 0 auto; } .dsh-ckey i.dsh-ki-rev { width:9px; height:12px; border-radius:2px; background:var(--accent); } .dsh-ckey i.dsh-ki-cnt { width:16px; height:2px; background:var(--z-del); position:relative; } .dsh-ckey i.dsh-ki-cnt::after { content:''; position:absolute; left:5px; top:-2.5px; width:7px; height:7px; border-radius:50%; background:var(--z-del); } .dsh-ckey i.dsh-ki-med { width:16px; height:0; border-top:2px dashed var(--muted); } .dsh-cnote { margin-left:auto; font-size:var(--fs-xs); color:var(--muted); } .dsh-cbox { position:relative; min-height:180px; } .dsh-cbox:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } .dsh-cwrap { position:relative; } .dsh-csvg { display:block; width:100%; height:auto; overflow:visible; } .dsh-csvg .dsh-cbg { fill:var(--surface-2); } .dsh-csvg .dsh-cwe { fill:var(--surface-3); } .dsh-csvg .dsh-cgrid { stroke:var(--line); stroke-width:1; } .dsh-csvg .dsh-cbase { stroke:var(--line-3); stroke-width:1; } .dsh-csvg text { font-family:var(--f-mono); font-size:11.5px; fill:var(--muted); } .dsh-csvg text.dsh-r2 { fill:var(--z-del); } .dsh-csvg text.dsh-tdy { fill:var(--ink); font-weight:600; } .dsh-csvg .dsh-bar { fill:var(--accent); } .dsh-csvg .dsh-bar.dsh-part { fill:var(--accent); fill-opacity:.4; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:3 2; } .dsh-csvg .dsh-med { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:6 4; } .dsh-csvg .dsh-now { stroke:var(--ink); stroke-width:2.2; } .dsh-csvg .dsh-cnt { fill:none; stroke:var(--z-del); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } .dsh-csvg .dsh-cdot { fill:var(--z-del); } .dsh-csvg .dsh-cdot.dsh-part { fill:var(--surface); stroke:var(--z-del); stroke-width:1.6; } .dsh-csvg .dsh-guide { fill:var(--ink); fill-opacity:.07; } .dsh-csvg .dsh-hit { fill:transparent; cursor:crosshair; } .dsh-cwrap.dsh-no-rev .dsh-s-rev, .dsh-cwrap.dsh-no-cnt .dsh-s-cnt, .dsh-cwrap.dsh-no-med .dsh-s-med { display:none; } .dsh-ctip { position:absolute; z-index:4; pointer-events:none; min-width:200px; padding:6px 10px 7px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--text); box-shadow:var(--sh-2); font-size:var(--fs-xs); line-height:1.5; white-space:nowrap; } .dsh-ctip b { display:block; color:var(--ink); font-size:var(--fs-s); font-weight:700; margin-bottom:1px; } .dsh-ctip .dsh-tk { color:var(--muted); } .dsh-ctip .dsh-sw { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; } .dsh-ctip .dsh-sw.dsh-sw-rev { background:var(--accent); } .dsh-ctip .dsh-sw.dsh-sw-cnt { background:var(--z-del); border-radius:50%; } .dsh-cempty { margin:0; padding:22px 11px; text-align:center; font-size:var(--fs-s); color:var(--muted); } /* the panels: a line per panel — its money against the thresholds, how long it lasts */ table.dsh-ptab { width:100%; border-collapse:collapse; table-layout:fixed; } .dsh-ptab col.dsh-w-n { width:22%; } .dsh-ptab col.dsh-w-b { width:27%; } .dsh-ptab col.dsh-w-s { width:15%; } .dsh-ptab col.dsh-w-p { width:17%; } .dsh-ptab col.dsh-w-r { width:19%; } .dsh-ptab thead th { height:24px; padding:0 10px; text-align:left; background:var(--surface-2); border-bottom:1px solid var(--line-2); font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .dsh-ptab th.dsh-num, .dsh-ptab td.dsh-num { text-align:right; } .dsh-ptab td { padding:6px 10px; border-top:1px solid var(--line); vertical-align:middle; min-width:0; overflow:hidden; } .dsh-ptab tbody tr:first-child td { border-top:0; } .dsh-ptab tr.dsh-prow { cursor:pointer; } .dsh-ptab tr.dsh-prow:hover td { background:var(--surface-2); } .dsh-ptab tr.dsh-tr-bad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } .dsh-ptab tr.dsh-tr-warn td:first-child { box-shadow:inset 3px 0 0 var(--amber); } .dsh-ptab tr.dsh-tr-off td { opacity:.75; } .dsh-ptab .dsh-nm { font-weight:700; color:var(--ink); } .dsh-ptab a.dsh-nm:hover { color:var(--accent); text-decoration:none; } .dsh-pbal { display:flex; align-items:center; gap:9px; } .dsh-amt { font-family:var(--f-mono); font-weight:600; font-size:var(--fs-m); font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--ink); } .dsh-amt.dsh-tok { color:var(--ok); } .dsh-amt.dsh-twarn { color:var(--amber); } .dsh-amt.dsh-tbad { color:var(--bad); } .dsh-amt.dsh-toff { color:var(--off); } .dsh-meter { position:relative; flex:0 0 70px; width:70px; height:8px; border-radius:20px; overflow:hidden; display:inline-flex; box-shadow:inset 0 0 0 1px var(--line); } .dsh-meter i { display:block; height:100%; } .dsh-meter .dsh-z1 { width:30%; background:var(--bad-soft); } .dsh-meter .dsh-z2 { width:40%; background:var(--amber-soft); } .dsh-meter .dsh-z3 { width:30%; background:var(--ok-soft); } .dsh-meter b { position:absolute; left:0; top:0; bottom:0; border-radius:20px 0 0 20px; } .dsh-meter b.dsh-tok { background:var(--ok); } .dsh-meter b.dsh-twarn { background:var(--amber); } .dsh-meter b.dsh-tbad { background:var(--bad); } .dsh-meter b.dsh-toff { background:var(--off); } .dsh-meter s { position:absolute; top:0; bottom:0; width:1px; background:var(--surface); opacity:.9; } .dsh-ptab .dsh-mn { font-family:var(--f-mono); font-size:var(--fs); color:var(--ink); font-variant-numeric:tabular-nums; } .dsh-pace { font-weight:600; color:var(--ink); } .dsh-pace.dsh-twarn { color:var(--amber); } .dsh-pace.dsh-tbad { color:var(--bad); } .dsh-pace.dsh-tnone { color:var(--faint); font-weight:400; } .dsh-ptab .l2 .bad-text { font-weight:600; } .dsh-ptab tr.dsh-perr td { padding-top:0; border-top:0; } .dsh-perrbox { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; margin:0 0 3px; padding:4px 9px; border:1px solid var(--bad-line); border-radius:var(--r-sm); background:var(--bad-soft); font-size:var(--fs-xs); color:var(--text); white-space:normal; overflow-wrap:anywhere; } .dsh-perrbox .dsh-lab { color:var(--bad); } .dsh-perrbox .dsh-ptxt { font-family:var(--f-mono); color:var(--ink); } .dsh-ptab tr.dsh-psum td { background:var(--surface-2); border-top:2px solid var(--line-2); } .dsh-ptab tr.dsh-psum .dsh-nm { font-family:var(--f-head); font-weight:600; } .dsh-tones { display:flex; gap:8px; flex-wrap:wrap; } .dsh-tones .dsh-tok { color:var(--ok); } .dsh-tones .dsh-twarn { color:var(--amber); } .dsh-tones .dsh-tbad { color:var(--bad); } .dsh-tones .dsh-toff { color:var(--off); } .dsh-tones b { font-weight:700; } .dsh-plegend { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .dsh-plegend .dsh-meter { vertical-align:-1px; margin-right:6px; } /* ---- the system: what needs a look, the figures, the pulse of every subsystem ---- */ .dsh-sbody { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"prob" "fig" "pulse" "pdet"; align-items:start; } #dsh-problems { grid-area:prob; min-width:0; } .dsh-sright { grid-area:fig; min-width:0; } .dsh-pulse { grid-area:pulse; } .dsh-pdet { grid-area:pdet; } @media (min-width:2100px) { .dsh-sbody { grid-template-columns:minmax(0,1fr) minmax(540px, 29%); grid-template-areas:"prob fig" "pulse fig" "pdet fig"; grid-template-rows:auto auto 1fr; } .dsh-sright { border-left:1px solid var(--line); align-self:stretch; } } /* what needs a look: a line per late or failed subsystem; it opens in place */ table.grid.dsh-stab { table-layout:fixed; } .dsh-stab col.dsh-w-exp { width:30px; } .dsh-stab col.dsh-w-name { width:17%; } .dsh-stab col.dsh-w-sch { width:13%; } .dsh-stab col.dsh-w-last { width:13%; } .dsh-stab col.dsh-w-ago { width:14%; } .dsh-stab col.dsh-w-took { width:9%; } .dsh-stab col.dsh-w-state { width:15%; } table.grid.dsh-stab thead th { top:50px; height:24px; padding:0 9px; font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-2); } table.grid.dsh-stab tbody.orow > tr.r { height:auto; } table.grid.dsh-stab tr.r > td { padding-top:7px; padding-bottom:7px; } .dsh-stab .l1 b { font-weight:700; color:var(--ink); } .dsh-stab .l2.mono { font-family:var(--f-mono); } .dsh-stab .dsh-agobad { color:var(--bad); font-weight:700; } .dsh-stab td.dsh-c-note .l1 { white-space:normal; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); line-height:1.4; } .dsh-stab td.dsh-c-note .dsh-none { font-family:var(--f-body); color:var(--faint); } .dsh-pills { display:flex; gap:4px; flex-wrap:wrap; } .dsh-calm { display:flex; align-items:center; gap:8px; padding:8px 11px; font-size:var(--fs-s); color:var(--text); background:var(--ok-soft); } .dsh-calm b { color:var(--ok); } /* the drawer of a subsystem: three named zones */ .dsh-dgrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1300px) { .dsh-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr); } } .dsh-z-last { border-left:2px solid var(--z-ord); } .dsh-z-last > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .dsh-z-rec { border-left:2px solid var(--z-pan); } .dsh-z-rec > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .dsh-z-when { border-left:2px solid var(--z-del); } .dsh-z-when > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .dsh-z-last.dsh-tbad { border-left-color:var(--bad); } .dsh-z-last.dsh-tbad > h4 { color:var(--bad); background:var(--bad-soft); border-bottom-color:var(--bad-line); } .dsh-z-last.dsh-twarn { border-left-color:var(--amber); } .dsh-z-last.dsh-twarn > h4 { color:var(--amber); background:var(--amber-soft); border-bottom-color:var(--amber-line); } .drawer .dsh-facts dt { font-size:var(--fs-xs); color:var(--muted); min-width:104px; } .drawer .dsh-facts dd { font-size:var(--fs-s); } .dsh-facts dd .k { color:var(--muted); } .dsh-facts dd .dsh-note { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); } .dsh-znote { margin:7px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .dsh-znote b { color:var(--text); } .dsh-dtitle .dsh-cmd { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } .dsh-dtitle .dsh-what { font-size:var(--fs-s); color:var(--text); } .dsh-x { border:0; background:transparent; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; padding:1px 6px; border-radius:5px; } .dsh-x:hover { color:var(--ink); background:var(--surface-3); } /* the pulse: every subsystem, grouped by how often it runs, one quiet line each */ .dsh-pulse { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); } .dsh-pg { min-width:0; padding:5px 0 7px; border-left:1px solid var(--line); } .dsh-pg:first-child { border-left:0; } .dsh-pgh { display:flex; align-items:baseline; gap:6px; padding:2px 11px 4px; } .dsh-pgh .dsh-pc { font-size:var(--fs-xs); color:var(--muted); } .dsh-pgh .dsh-pc .dsh-sn { font-family:var(--f-mono); font-weight:700; color:var(--ink); } .dsh-pgh .dsh-pc .dsh-tbad { color:var(--bad); font-weight:700; } .dsh-pgh .dsh-pc .dsh-twarn { color:var(--amber); font-weight:700; } .dsh-pe { display:flex; align-items:center; gap:7px; width:100%; min-width:0; padding:3px 11px; border:0; background:transparent; font:inherit; font-size:var(--fs-s); color:var(--text); text-align:left; cursor:pointer; line-height:1.45; } .dsh-pe:hover { background:var(--surface-2); } .dsh-pe.dsh-on { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); } .dsh-pe .dsh-dot { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--ok); } .dsh-pe.dsh-late .dsh-dot { background:var(--bad); } .dsh-pe.dsh-fail .dsh-dot { background:var(--amber); } .dsh-pe .dsh-nm { flex:0 1 auto; min-width:0; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dsh-pe .dsh-cm { flex:1 1 0; min-width:0; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dsh-pe .dsh-ag { flex:0 0 auto; margin-left:auto; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; } .dsh-pe .dsh-tkn { flex:0 0 64px; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; } .dsh-pe.dsh-late .dsh-nm, .dsh-pe.dsh-late .dsh-ag { color:var(--bad); font-weight:700; } .dsh-pe.dsh-fail .dsh-nm, .dsh-pe.dsh-fail .dsh-ag { color:var(--amber); font-weight:700; } .dsh-pdet { border-top:1px solid var(--line-2); background:var(--well); box-shadow:inset 3px 0 0 var(--accent); min-width:0; } /* the system's figures: the queue, the jobs, the parser's two pools, the base, the revision */ .dsh-st { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); column-gap:7px; row-gap:0; padding:2px 11px 10px; } @media (min-width:2100px) { .dsh-st { grid-template-columns:repeat(2, minmax(0,1fr)); } } .dsh-s { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; margin-top:8px; min-width:0; padding:7px 10px 8px; color:inherit; border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh-1); } a.dsh-s:hover { text-decoration:none; border-color:var(--accent-line); box-shadow:var(--sh-2); } .dsh-s .dsh-k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dsh-s .dsh-v { font-family:var(--f-head); font-weight:600; font-size:20px; line-height:1.3; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; } .dsh-s .dsh-v small { font-family:var(--f-body); font-weight:400; font-size:12px; color:var(--muted); } .dsh-s .dsh-v.dsh-vmono { font-family:var(--f-mono); font-weight:500; font-size:15px; padding-top:3px; } .dsh-s .dsh-d { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .dsh-s .dsh-d .dsh-xv { color:var(--text); } .dsh-s .dsh-d .dsh-tbad { color:var(--bad); font-weight:700; } .dsh-s .dsh-d .dsh-twarn { color:var(--amber); font-weight:700; } .dsh-s .dsh-go { align-self:start; padding-top:4px; font-size:var(--fs-xs); font-weight:600; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } a.dsh-s:hover .dsh-go { text-decoration:underline; } .dsh-s.dsh-tok { border-left-color:var(--ok); } .dsh-s.dsh-tok .dsh-v { color:var(--ok); } .dsh-s.dsh-twarn { border-left-color:var(--amber); background:var(--amber-soft); border-color:var(--amber-line); } .dsh-s.dsh-twarn .dsh-v { color:var(--amber); } .dsh-s.dsh-tbad { border-left-color:var(--bad); background:var(--bad-soft); border-color:var(--bad-line); } .dsh-s.dsh-tbad .dsh-v { color:var(--bad); } .dsh-s.dsh-twarn .dsh-v small, .dsh-s.dsh-tbad .dsh-v small, .dsh-s.dsh-tok .dsh-v small { color:var(--muted); } /* ---- 4K --------------------------------------------------------------------------- */ @media (min-width:2100px) { .dsh-at .dsh-v, .dsh-m .dsh-v { font-size:24px; } .dsh-meter { flex-basis:84px; width:84px; } } /* narrower desktops: the quiet words step aside, never the numbers */ @media (max-width:2099px) { .dsh-pe .dsh-cm { display:none; } .dsh-pe .dsh-nm { flex:1 1 auto; } .dsh-sright { border-top:1px solid var(--line); } } @media (max-width:1700px) { .dsh-att { column-gap:6px; padding-left:9px; padding-right:9px; } .dsh-at { padding:6px 8px 7px; } .dsh-at .dsh-v { font-size:20px; } } @media (max-width:1499px) { .dsh-att { grid-template-columns:repeat(5, minmax(0,1fr)); } .dsh-st { grid-template-columns:repeat(3, minmax(0,1fr)); } .dsh-stab col.dsh-w-name { width:20%; } .dsh-stab col.dsh-w-sch { width:14%; } .dsh-stab col.dsh-w-note { width:0; } table.grid.dsh-stab th.dsh-c-note, table.grid.dsh-stab td.dsh-c-note { padding:0 !important; font-size:0; overflow:hidden; } table.grid.dsh-stab td.dsh-c-note > * { display:none; } } @media (max-width:1100px) { .dsh-pulse { grid-template-columns:repeat(2, minmax(0,1fr)); } .dsh-pg:nth-child(3) { border-left:0; } .dsh-pg:nth-child(n+3) { border-top:1px solid var(--line); } .dsh-mt { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:900px) { .dsh-att { grid-template-columns:repeat(3, minmax(0,1fr)); } .dsh-cnote { margin-left:0; flex-basis:100%; } } /* ---- a phone's width: the page holds together, nothing scrolls sideways ---------------- */ @media (max-width:560px) { .dsh-hact { margin-left:0; justify-content:flex-start; } .dsh-counted { flex-basis:100%; } .dsh-blk > .pt .sp { flex-basis:100%; height:0; } .dsh-att { grid-template-columns:repeat(2, minmax(0,1fr)); padding:0 8px 8px; column-gap:6px; } .dsh-at { margin-top:6px; } .dsh-alarm { margin:0 8px 8px; } .dsh-mt { grid-template-columns:repeat(2, minmax(0,1fr)); padding:0 8px 2px; column-gap:6px; } .dsh-m { padding:6px 8px 7px; margin-top:6px; } .dsh-m .dsh-v { font-size:19px; } .dsh-m .dsh-k { flex-wrap:wrap; white-space:normal; } .dsh-cmp { grid-template-columns:minmax(0,1fr); } .dsh-cmp > span { white-space:normal; } .dsh-cmp .dsh-dl { text-align:left; } .dsh-chart { padding:7px 8px 8px; } /* the panels: a card per panel, its money on top */ table.dsh-ptab, .dsh-ptab tbody, .dsh-ptab tr, .dsh-ptab td { display:block; width:auto; } .dsh-ptab colgroup, .dsh-ptab thead { display:none; } .dsh-ptab tr.dsh-prow, .dsh-ptab tr.dsh-psum { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:5px 10px; padding:8px 10px 9px; border-top:1px solid var(--line); } .dsh-ptab tbody tr:first-child { border-top:0; } .dsh-ptab td { padding:0; border:0 !important; box-shadow:none !important; overflow:visible; } .dsh-ptab td.dsh-c-n { grid-column:1 / 2; } .dsh-ptab td.dsh-c-b { grid-column:2 / -1; } .dsh-ptab td.dsh-num { text-align:left; } .dsh-ptab td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .dsh-ptab td.dsh-c-n::before, .dsh-ptab td.dsh-c-b::before { display:none; } .dsh-ptab td.dsh-c-n .l1 { white-space:normal; overflow-wrap:break-word; } .dsh-ptab tr.dsh-psum { background:var(--surface-2); border-top:2px solid var(--line-2); } .dsh-ptab tr.dsh-psum td { background:transparent; } .dsh-ptab tr.dsh-perr { padding:0 10px 8px; } .dsh-ptab tr.dsh-tr-bad { box-shadow:inset 3px 0 0 var(--bad); } .dsh-ptab tr.dsh-tr-warn { box-shadow:inset 3px 0 0 var(--amber); } /* the late lines: a card each */ table.grid.dsh-stab tr.r { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:5px 10px; padding:9px 34px 10px 11px; } table.grid.dsh-stab tr.r > td.dsh-c-name, table.grid.dsh-stab tr.r > td.dsh-c-state, table.grid.dsh-stab tr.r > td.dsh-c-note { grid-column:1 / -1; } table.grid.dsh-stab tr.r > td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } table.grid.dsh-stab td.dsh-c-note { padding:0 !important; font-size:var(--fs-xs); } table.grid.dsh-stab td.dsh-c-note > * { display:block; } .dsh-pulse { grid-template-columns:minmax(0,1fr); } .dsh-pg { border-left:0 !important; border-top:1px solid var(--line); } .dsh-pg:first-child { border-top:0; } .dsh-st { grid-template-columns:repeat(2, minmax(0,1fr)); padding:0 8px 8px; column-gap:6px; } .dsh-s { margin-top:6px; } .drawer .dsh-facts { grid-template-columns:minmax(0,1fr); } } /* ---- Statistics (2026-10-02) ---------------------------------------------------------- The paid statistics as the owner approved them: the filter header with the window it counts on its top line, the tiles in four named groups with the change coloured by what it means, the coverage bar and how the margin is made, six charts drawn by admin.js at the width they are shown at (lines, bars, the band of the panel cost, the hatch before the move, a readout under the mouse), the money tables with shares and the cost known, the top customers opening in place. Every class starts with sts-; the lines of the charts take the kit's tokens only, so light and dark both hold. */ .fx-lab[title] { cursor:help; } .sts-mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .sts-k { color:var(--muted); } .sts-bad { color:var(--bad); } .sts-amb { color:var(--amber); } b.sts-bad, b.sts-amb { font-weight:700; } /* ---- the head: what the screen counts, when it was counted, Refresh ------- */ .sts-phead { align-items:flex-start; } .sts-phead > .sts-hl { flex:1 1 640px; min-width:0; } .phead .sub.sts-sub { max-width:1280px; margin-top:2px; line-height:1.45; } .sts-hr { margin-left:auto; display:flex; align-items:stretch; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .sts-built { display:flex; align-items:center; gap:9px; padding:4px 6px 4px 11px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); } .sts-built .sts-bt { font-size:var(--fs-xs); color:var(--muted); line-height:1.35; } .sts-built .sts-bt b { display:block; color:var(--ink); font-family:var(--f-mono); font-weight:500; font-size:var(--fs-s); } .sts-built .btn { align-self:center; } /* ---- the filter header: the window it counts on the top line ------------- */ .sts-win { display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap; min-width:0; font-size:var(--fs-s); color:var(--text); line-height:1.45; } .sts-win > b { font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); color:var(--ink); } .sts-win .sts-mono { color:var(--ink); font-size:var(--fs-s); } .sts-win .sts-k { font-size:var(--fs-xs); } .sts-win .sts-vs { color:var(--muted); font-size:var(--fs-xs); } .sts-win .sts-vs .sts-mono { color:var(--text); font-size:var(--fs-xs); } .fx-top .sts-win { flex:1 1 520px; } .fx-s.sts-dis { color:var(--faint); cursor:not-allowed; opacity:.7; } .fx-s.sts-dis:hover { background:transparent; color:var(--faint); } .fx-s.sts-cust { font-family:var(--f-mono); font-weight:500; } .sts-rowhint { font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } .sts-rowhint b { color:var(--text); font-weight:600; } .fx-in input.sts-date { width:104px; font-family:var(--f-mono); font-size:var(--fs-xs); } .fx-in input.sts-cc { width:132px; font-family:var(--f-mono); text-transform:uppercase; } .fx-in input.sts-sid { width:104px; font-family:var(--f-mono); } .fx-in input::placeholder { color:var(--faint); text-transform:none; } .sts-exerr { font-size:var(--fs-xs); font-weight:700; color:var(--bad); } .fx-c .sts-cc2 { font-family:var(--f-mono); font-weight:600; } /* ---- the tiles: named groups, the period before and the change ---------- */ .sts-tiles { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:9px; align-items:stretch; } .sts-tg { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); display:flex; flex-direction:column; min-width:0; } .sts-tg > .pt { padding:4px 11px; } .sts-tg > .pt .hint { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .sts-tgb { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); flex:1 1 auto; } .sts-t { padding:7px 11px 8px; border-left:1px solid var(--line); min-width:0; display:flex; flex-direction:column; gap:1px; color:inherit; text-decoration:none; position:relative; } .sts-t:first-child { border-left:0; } a.sts-t:hover { background:var(--surface-2); text-decoration:none; } a.sts-t:hover .sts-tk { color:var(--accent); } .sts-tk { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); line-height:1.3; } .sts-tv { font-family:var(--f-head); font-weight:600; font-size:var(--fs-l); color:var(--ink); line-height:1.3; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sts-tv small { font-family:var(--f-body); font-weight:600; font-size:var(--fs-s); color:var(--muted); margin-left:4px; } .sts-tv.sts-warnv { color:var(--amber); } .sts-td { font-size:var(--fs-xs); color:var(--muted); line-height:1.35; font-variant-numeric:tabular-nums; } .sts-td .sts-mono { font-size:var(--fs-xs); color:var(--text); } .sts-ch { font-weight:700; white-space:nowrap; } .sts-ch.good { color:var(--ok); } .sts-ch.bad { color:var(--bad); } .sts-ch.flat { color:var(--muted); } .sts-t .sts-flag { display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:600; color:var(--amber); line-height:1.3; } .sts-t .sts-flag.bad { color:var(--bad); } @media (min-width:2100px) { .sts-tv { font-size:17px; } } /* ---- how the margin is made: the till, the orders with a known cost ------ */ .sts-mx { display:flex; flex-direction:column; min-width:0; } .sts-mx .pt b { color:var(--muted); } table.grid.inner.sts-mxt { table-layout:auto; } table.grid.inner.sts-mxt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; text-align:right; white-space:nowrap; } table.grid.inner.sts-mxt thead th:first-child { text-align:left; } table.grid.inner.sts-mxt tbody td { text-align:right; white-space:nowrap; font-family:var(--f-mono); font-size:var(--fs-s); color:var(--text); font-variant-numeric:tabular-nums; vertical-align:middle; } table.grid.inner.sts-mxt tbody td.lab { text-align:left; font-family:var(--f-body); font-size:var(--fs-s); color:var(--ink); font-weight:600; white-space:normal; } table.grid.inner.sts-mxt tbody td.lab small { display:block; font-weight:400; font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.sts-mxt td.op { color:var(--faint); font-family:var(--f-body); padding-left:2px; padding-right:2px; width:1%; text-align:center; } table.grid.inner.sts-mxt td.res { color:var(--ink); font-weight:600; } .sts-cov { padding:7px 11px 9px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:5px; } .sts-covh { display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap; font-size:var(--fs-s); color:var(--text); line-height:1.4; } .sts-covh > b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .sts-covh .sts-mono { color:var(--ink); font-weight:600; } .sts-covbar { display:flex; height:10px; border-radius:20px; overflow:hidden; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); } .sts-covbar i { display:block; height:100%; } .sts-covbar i.k1 { background:var(--ok); } .sts-covbar i.k2 { background:var(--amber); } .sts-covbar i.k3 { background:repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 6px); } .sts-covl { display:flex; flex-wrap:wrap; gap:3px 14px; font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } .sts-covl i { display:inline-block; width:10px; height:8px; border-radius:2px; margin-right:4px; vertical-align:0; } .sts-covl i.k1 { background:var(--ok); } .sts-covl i.k2 { background:var(--amber); } .sts-covl i.k3 { background:repeating-linear-gradient(135deg, var(--line-3) 0 2px, transparent 2px 4px); box-shadow:inset 0 0 0 1px var(--line-2); } .sts-covl b { color:var(--ink); font-family:var(--f-mono); font-weight:600; } .sts-costs { display:flex; flex-wrap:wrap; gap:3px 14px; padding:6px 11px 8px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); border-radius:0 0 var(--r-lg) var(--r-lg); line-height:1.45; } .sts-costs > b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--z-pan); } .sts-costs span b { color:var(--ink); font-family:var(--f-mono); font-weight:600; } /* the funnel of Free statistics: a free order to a payment, the tiles' numbers in the order they happen */ .sts-funnel { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:8px 11px 9px; font-size:var(--fs-s); color:var(--text); line-height:1.45; } .sts-funnel .sts-fs { display:inline-flex; flex-direction:column; padding:3px 10px 4px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); min-width:0; } .sts-funnel .sts-fs b { font-family:var(--f-mono); font-weight:600; color:var(--ink); font-size:var(--fs); } .sts-funnel .sts-fs span { font-size:var(--fs-xs); color:var(--muted); } .sts-funnel .sts-fs.ok { border-color:var(--ok-line); background:var(--ok-soft); } .sts-funnel .sts-fs.ok b { color:var(--ok); } .sts-funnel .sts-arr { color:var(--faint); font-weight:700; } /* ---- the charts: drawn at the width they are shown at -------------------- */ .sts-charts { display:grid; gap:9px; margin-bottom:9px; grid-template-columns:minmax(0,1fr); align-items:stretch; } @media (min-width:1300px) { .sts-charts.sts-r1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); } .sts-charts.sts-r2 { grid-template-columns:repeat(3, minmax(0,1fr)); } .sts-charts.sts-rf { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); } } @media (min-width:801px) and (max-width:1299px) { .sts-charts.sts-r1, .sts-charts.sts-r2, .sts-charts.sts-rf { grid-template-columns:repeat(2, minmax(0,1fr)); } .sts-charts.sts-r1 > :first-child, .sts-charts.sts-rf > :first-child { grid-column:1 / -1; } .sts-charts.sts-r2 > :last-child { grid-column:1 / -1; } } .sts-charts > .panel + .panel { margin-top:0; } .sts-chp { display:flex; flex-direction:column; min-width:0; } .sts-chp > .pt .hint { min-width:0; } .sts-chb { padding:6px 11px 7px; flex:1 1 auto; display:flex; flex-direction:column; min-width:0; } .sts-keys { display:flex; flex-wrap:wrap; gap:4px 5px; margin:0 0 5px; align-items:center; } .sts-key { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:1px 7px 1px 6px; line-height:18px; font:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text); display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; } .sts-key:hover { border-color:var(--line-3); background:var(--surface-2); color:var(--ink); } .sts-key b { font-family:var(--f-mono); font-weight:500; color:var(--ink); } .sts-key.off { color:var(--faint); background:transparent; border-style:dashed; } .sts-key.off b { color:var(--faint); } .sts-key.off .sts-sw { opacity:.35; } .sts-sw { display:inline-block; width:16px; height:0; border-top:2.5px solid var(--muted); flex:0 0 16px; } .sts-sw.dash { border-top-style:dashed; } .sts-sw.bar { height:10px; border-top:0; border-radius:2px; width:10px; flex:0 0 10px; } .sts-sw.area { height:9px; border-top:0; border-radius:2px; width:14px; opacity:.6; } .sts-cbox { position:relative; min-height:150px; flex:1 1 auto; } .sts-empty { padding:26px 6px; text-align:center; color:var(--muted); font-size:var(--fs-s); } svg.sts-svg { display:block; width:100%; height:auto; overflow:visible; } .sts-svg .sts-plot { fill:var(--surface-2); } .sts-svg .sts-gl { stroke:var(--line); stroke-width:1; } .sts-svg .sts-base { stroke:var(--line-3); stroke-width:1; } .sts-svg text.sts-ax { fill:var(--muted); font-family:var(--f-mono); font-size:11px; } .sts-svg .sts-ln { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .sts-svg .sts-ln.dash { stroke-dasharray:6 4; stroke-width:1.7; } .sts-svg .sts-dot { stroke-width:1.5; } .sts-svg .sts-bar { opacity:.85; } .sts-svg .sts-bar.hi { opacity:1; } .sts-svg .sts-band { opacity:.13; } .sts-svg .sts-hatchp line { stroke:var(--line-2); stroke-width:1.2; } .sts-svg .sts-mark { stroke:var(--z-pan); stroke-width:1.2; stroke-dasharray:4 3; } .sts-svg text.sts-markl { fill:var(--z-pan); font-family:var(--f-body); font-size:11px; font-weight:700; } .sts-svg text.sts-shl { fill:var(--muted); font-family:var(--f-body); font-size:11px; font-style:italic; } .sts-svg .sts-guide { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; opacity:.5; } /* the colours of the lines: the kit's tokens only */ .sts-svg .c-acc { stroke:var(--accent); } .sts-svg .c-ok { stroke:var(--ok); } .sts-svg .c-pan { stroke:var(--z-pan); } .sts-svg .c-del { stroke:var(--z-del); } .sts-svg .c-amb { stroke:var(--amber); } .sts-svg .c-mut { stroke:var(--muted); } .sts-svg .c-ink { stroke:var(--ink); } .sts-svg .sts-bar.c-acc, .sts-svg .sts-dot.c-acc, .sts-svg .sts-band.c-acc { fill:var(--accent); } .sts-svg .sts-bar.c-ok, .sts-svg .sts-dot.c-ok, .sts-svg .sts-band.c-ok { fill:var(--ok); } .sts-svg .sts-bar.c-pan, .sts-svg .sts-dot.c-pan, .sts-svg .sts-band.c-pan { fill:var(--z-pan); } .sts-svg .sts-dot.c-del { fill:var(--z-del); } .sts-svg .sts-dot.c-amb { fill:var(--amber); } .sts-svg .sts-dot.c-mut { fill:var(--muted); } .sts-svg .sts-dot.c-ink { fill:var(--ink); } .sts-svg .sts-bar, .sts-svg .sts-dot, .sts-svg .sts-band { stroke:none; } .sts-svg .sts-dot { stroke:var(--surface); } .sts-sw.c-acc { border-color:var(--accent); } .sts-sw.c-ok { border-color:var(--ok); } .sts-sw.c-pan { border-color:var(--z-pan); } .sts-sw.c-del { border-color:var(--z-del); } .sts-sw.c-amb { border-color:var(--amber); } .sts-sw.c-mut { border-color:var(--muted); } .sts-sw.c-ink { border-color:var(--ink); } .sts-sw.bar.c-acc, .sts-sw.area.c-acc { background:var(--accent); } .sts-sw.bar.c-pan, .sts-sw.area.c-pan { background:var(--z-pan); } .sts-sw.area.c-ok, .sts-sw.bar.c-ok { background:var(--ok); } .sts-sw.mark { width:0; height:12px; border-top:0; border-left:1.5px dashed var(--z-pan); flex:0 0 8px; margin:0 3px 0 4px; } .sch-tip.sts-tip { white-space:nowrap; font-size:var(--fs-xs); min-width:140px; text-align:left; transform:translate(-50%, calc(-100% - 10px)); } .sch-tip.sts-tip .sts-th { display:block; font-family:var(--f-body); font-weight:700; color:var(--ink); margin-bottom:2px; } .sch-tip.sts-tip .sts-tr { display:flex; align-items:center; gap:6px; } .sch-tip.sts-tip .sts-tr .v { margin-left:auto; padding-left:12px; color:var(--ink); } .sch-tip.sts-tip .sts-tr .p { color:var(--muted); padding-left:6px; } .sch-tip.sts-tip .sts-tn { display:block; margin-top:3px; color:var(--muted); font-family:var(--f-body); white-space:normal; max-width:260px; } .sts-chnote { font-size:var(--fs-xs); color:var(--muted); line-height:1.45; margin-top:4px; } .sts-chnote b { color:var(--text); font-weight:600; } /* ---- the money tables ------------------------------------------------------ */ .sts-sec { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:14px 2px 7px; } .sts-sec > b { font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); color:var(--ink); } .sts-sec .hint { font-size:var(--fs-xs); color:var(--muted); } .sts-tgrid { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); align-items:start; margin-bottom:9px; } @media (min-width:2100px) { .sts-tgrid.sts-two { grid-template-columns:repeat(2, minmax(0,1fr)); } } /* the countries and the top customers side by side only where both fit: at 1920 a country table of nine columns needs ~900 px of its 820 */ @media (min-width:2100px) { .sts-tgrid.sts-two15 { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (min-width:1500px) and (max-width:2099px) { .sts-tgrid .sts-stack.sts-st2 { grid-template-columns:repeat(2, minmax(0,1fr)); } } .sts-tgrid > .panel + .panel, .sts-tgrid .sts-stack > .panel + .panel { margin-top:0; } .sts-stack { display:grid; gap:9px; align-content:start; min-width:0; } .sts-tp > .pt .sp { flex:1; } /* a table wider than its panel scrolls inside it instead of running under the panel beside it */ .sts-tw { overflow-x:auto; border-radius:0 0 var(--r-lg) var(--r-lg); } table.grid.inner.sts-tb { table-layout:auto; } table.grid.inner.sts-tb thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; background:var(--surface-2); white-space:nowrap; vertical-align:bottom; padding-top:3px; padding-bottom:3px; height:auto; } table.grid.inner.sts-tb thead tr.sts-gh th { font-size:var(--fs-micro); letter-spacing:.09em; color:var(--muted); border-bottom:1px solid var(--line); padding-top:2px; padding-bottom:1px; } table.grid.inner.sts-tb thead tr.sts-gh th.g-pan { color:var(--z-pan); background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } table.grid.inner.sts-tb thead tr.sts-gh th.g-mon { color:var(--ok); } table.grid.inner.sts-tb th.num, table.grid.inner.sts-tb td.num { text-align:right; } table.grid.inner.sts-tb th.gs, table.grid.inner.sts-tb td.gs { border-left:1px solid var(--line); } table.grid.inner.sts-tb tbody td { padding:4px 9px; vertical-align:middle; } table.grid.inner.sts-tb tbody td.num { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; } table.grid.inner.sts-tb tbody td.num.strong { color:var(--ink); font-weight:600; } table.grid.inner.sts-tb tbody td.lab { color:var(--ink); font-weight:600; white-space:nowrap; } table.grid.inner.sts-tb tbody td.lab a { color:var(--ink); } table.grid.inner.sts-tb tbody td.lab a:hover { color:var(--accent); } table.grid.inner.sts-tb tbody td.lab small { display:block; font-weight:400; font-size:var(--fs-xs); color:var(--muted); white-space:normal; line-height:1.35; } table.grid.inner.sts-tb tbody td.lab .sts-ccn { font-weight:400; color:var(--muted); margin-left:6px; font-size:var(--fs-xs); } table.grid.inner.sts-tb tbody td.lab .mono { font-family:var(--f-mono); } table.grid.inner.sts-tb tbody tr.sts-child td { background:var(--surface-2); } table.grid.inner.sts-tb tbody tr.sts-child td.lab { font-weight:500; color:var(--text); padding-left:24px; } table.grid.inner.sts-tb tbody tr.sts-child td.lab::before { content:'↳ '; color:var(--faint); } table.grid.inner.sts-tb tbody tr.sts-quiet td { color:var(--muted); background:var(--surface-2); font-style:normal; } table.grid.inner.sts-tb tbody tr.sts-quiet td.lab { color:var(--muted); font-weight:600; } table.grid.inner.sts-tb tbody tr.sts-quiet td.lab small { display:block; font-weight:400; font-size:var(--fs-xs); white-space:normal; } table.grid.inner.sts-tb tbody tr.sts-alarm td { background:var(--bad-row); } table.grid.inner.sts-tb tbody tr.sts-alarm td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.sts-tb tbody tr.sts-alarm td.lab small { display:block; font-weight:600; font-size:var(--fs-xs); color:var(--bad); white-space:normal; } table.grid.inner.sts-tb tbody tr.sts-grey td { color:var(--muted); } table.grid.inner.sts-tb tbody tr.sts-grey td:first-child { box-shadow:inset 3px 0 0 var(--off); } table.grid.inner.sts-tb tbody tr.sts-grey td.lab { color:var(--text); } table.grid.inner.sts-tb tbody tr.sts-grey td.lab small { display:block; font-weight:400; font-size:var(--fs-xs); color:var(--muted); white-space:normal; } table.grid.inner.sts-tb tbody tr.sts-tot td { border-top:1px solid var(--line-2); background:var(--surface-2); font-weight:600; color:var(--ink); } table.grid.inner.sts-tb tbody tr.sts-tot td.num { color:var(--ink); font-weight:600; } table.grid.inner.sts-tb tbody tr.sts-tot td.lab small { display:block; font-weight:400; font-size:var(--fs-xs); color:var(--muted); white-space:normal; } table.grid.inner.sts-tb tbody tr.sts-more td { background:var(--surface-2); color:var(--muted); font-size:var(--fs-xs); } table.grid.inner.sts-tb tbody tr.sts-more td .btn { margin-left:8px; } table.grid.inner.sts-tb td.sts-negv { color:var(--bad) !important; font-weight:600; } table.grid.inner.sts-tb td .sts-dash { color:var(--faint); } table.grid.inner.sts-tb td.sts-low { color:var(--amber) !important; font-weight:600; } table.grid.inner.sts-tb td.sts-shc { min-width:96px; } .sts-share { display:flex; align-items:center; gap:7px; justify-content:flex-end; } .sts-share .sts-sb { flex:1 1 auto; max-width:72px; height:6px; border-radius:20px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; display:block; } .sts-share .sts-sb i { display:block; height:100%; background:var(--accent); border-radius:20px; } .sts-share .sts-sb.pan i { background:var(--z-pan); } .sts-share .sts-sb.amb i { background:var(--amber); } .sts-share .sts-sb.off i { background:var(--off); } .sts-share .sts-sb.bad i { background:var(--bad); } .sts-share span { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); min-width:44px; text-align:right; } th .sortb { color:inherit; } .sts-tfoot { padding:6px 11px 8px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); line-height:1.5; background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .sts-pill { text-transform:none; letter-spacing:0; } .sts-mlink { font-size:var(--fs-xs); font-weight:600; white-space:nowrap; } /* ---- a line that opens in place (top customers, panel services) ----------- */ table.grid.inner.sts-tb tbody tr.sts-opener { cursor:pointer; } table.grid.inner.sts-tb tbody tr.sts-opener:hover td { background:var(--surface-2); } table.grid.inner.sts-tb tbody tr.sts-opener.open td { background:var(--surface-3); } table.grid.inner.sts-tb tbody tr.sts-opener td.c-exp, table.grid.inner.sts-tb thead th.c-exp { width:26px; padding-left:6px; padding-right:0; } tr.sts-opener .exp { margin-top:0; } tr.sts-opener:hover .exp { color:var(--accent); background:var(--surface); border-color:var(--line); } tr.sts-opener.open .exp { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); } tr.sts-opener.open .exp svg { transform:rotate(90deg); } table.grid.inner.sts-tb tbody tr.sts-drow > td { padding:0; background:var(--well); box-shadow:inset 3px 0 0 var(--accent), inset 0 1px 0 var(--line-2); } table.grid.inner.sts-tb tbody tr.sts-drow:hover > td { background:var(--well); } .sts-drawer { padding:10px 12px 12px 16px; animation:slidein .16s ease-out; } /* the zones of an opened line: two side by side for a top customer, three for a panel service on a wide screen */ .sts-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1100px) { .sts-dgrid.sts-d2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (min-width:1500px) { .sts-dgrid.sts-d4 { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } } @media (min-width:2100px) { .sts-dgrid.sts-d4 { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); } .sts-dgrid.sts-d4 > .sts-zwide { grid-row:span 2; } .sts-dgrid.sts-d4 > .sts-zspan { grid-column:span 2; } } /* the kit names the grid areas of .z-del, .z-pan, .z-cus and .z-ord (the order drawer's layout): in a grid of its own a named area makes tracks of its own and the zones land on top of each other — they take the next cell here */ .sts-dgrid > .zone { grid-area:auto; } /* the kit names the grid areas of .z-del, .z-pan, .z-cus and .z-ord (the order drawer's layout): in a grid of its own a named area makes tracks of its own and the zones land on top of each other — they take the next cell here */ .sts-drawer .zone > h4 .zt { color:var(--muted); } .sts-drawer .zbody.p0 { padding:0; } .sts-drawer .dtitle .sts-dsub { font-size:var(--fs-s); color:var(--text); } table.grid.inner.sts-zt { table-layout:auto; } table.grid.inner.sts-zt thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.05em; background:var(--surface-2); white-space:nowrap; } table.grid.inner.sts-zt tbody td { font-size:var(--fs-s); padding:3px 9px; white-space:nowrap; vertical-align:middle; } table.grid.inner.sts-zt td.num, table.grid.inner.sts-zt th.num { text-align:right; font-variant-numeric:tabular-nums; } table.grid.inner.sts-zt td.num { font-family:var(--f-mono); font-size:var(--fs-s); } table.grid.inner.sts-zt td.mono { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); } table.grid.inner.sts-zt tr.sts-zbad td:first-child { box-shadow:inset 3px 0 0 var(--bad); } table.grid.inner.sts-zt tr.sts-zamb td:first-child { box-shadow:inset 3px 0 0 var(--amber); } .sts-zfoot { display:flex; flex-wrap:wrap; gap:4px 12px; padding:6px 11px; border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); align-items:center; } .sts-znone { padding:9px 11px; font-size:var(--fs-s); color:var(--muted); line-height:1.5; } .sts-znone b { color:var(--ink); font-weight:600; } /* ---- the footer ---------------------------------------------------------------- */ .sts-foot { margin:10px 2px 0; max-width:1500px; line-height:1.55; font-size:var(--fs-xs); color:var(--muted); } .sts-foot p { margin:0 0 5px; } .sts-foot b { color:var(--text); font-weight:600; } /* ---- 4K: one more step of air, nothing bigger ------------------------------- */ @media (min-width:2100px) { .sts-chb { padding:7px 12px 8px; } } /* a narrow desktop: the quiet notes step aside first */ @media (max-width:1560px) { .sts-tg > .pt .hint { display:none; } } /* ---- a phone: the page holds together, nothing scrolls sideways ------------ */ @media (max-width:560px) { .sts-hr { width:100%; justify-content:flex-start; } .sts-built { flex:1 1 100%; } .sts-tg { flex:1 1 100% !important; } .sts-tgb { grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-columns:auto; } .sts-t { border-left:0; border-top:1px solid var(--line); } .sts-t:nth-child(-n+2) { border-top:0; } .sts-t:nth-child(2n) { border-left:1px solid var(--line); } .sts-mx { flex:1 1 100% !important; } .sts-win { flex-basis:100%; } /* the kit turns every inner table into labelled blocks at this width (its captions come from data-l): here a line is a card — the name across, its figures under it three to a row */ table.grid.inner.sts-tb thead, table.grid.inner.sts-mxt thead, table.grid.inner.sts-zt thead { display:none; } table.grid.inner.sts-tb tbody tr, table.grid.inner.sts-mxt tbody tr, table.grid.inner.sts-zt tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3px 10px; padding:7px 10px; border-top:1px solid var(--line); } table.grid.inner.sts-tb tbody tr:first-child, table.grid.inner.sts-mxt tbody tr:first-child, table.grid.inner.sts-zt tbody tr:first-child { border-top:0; } table.grid.inner.sts-tb tbody td, table.grid.inner.sts-mxt tbody td, table.grid.inner.sts-zt tbody td { min-width:0; text-align:left !important; white-space:normal; background:transparent !important; box-shadow:none !important; border-left:0 !important; } table.grid.inner.sts-tb tbody td.lab, table.grid.inner.sts-mxt tbody td.lab, table.grid.inner.sts-zt tbody td:first-child, table.grid.inner.sts-tb tbody td[colspan] { grid-column:1 / -1; } table.grid.inner .sts-ph, table.grid.inner.sts-tb tbody td:empty { display:none !important; } table.grid.inner.sts-tb tbody tr.sts-child { padding-left:24px; } table.grid.inner.sts-tb tbody tr.sts-child td.lab { padding-left:0 !important; } table.grid.inner.sts-tb tbody tr.sts-alarm { box-shadow:inset 3px 0 0 var(--bad); background:var(--bad-row); } table.grid.inner.sts-tb tbody tr.sts-grey { box-shadow:inset 3px 0 0 var(--off); } table.grid.inner.sts-tb tbody tr.sts-quiet, table.grid.inner.sts-tb tbody tr.sts-tot, table.grid.inner.sts-tb tbody tr.sts-more { background:var(--surface-2); } table.grid.inner.sts-tb tbody tr.sts-opener { position:relative; padding-right:38px; } table.grid.inner.sts-tb tbody tr.sts-opener td.c-exp { position:absolute; top:7px; right:8px; width:auto; padding:0 !important; } table.grid.inner.sts-tb tbody tr.sts-drow { display:block; padding:0; } table.grid.inner.sts-tb tbody tr.sts-drow > td { display:block; } table.grid.inner.sts-mxt td.op { display:none !important; } table.grid.inner.sts-tb tbody td, table.grid.inner.sts-zt tbody td { overflow-wrap:anywhere; } table.grid.inner.sts-tb tbody td.sts-email { grid-column:span 2; } table.grid.inner.sts-tb tbody td.lab::before { display:none; } .sts-tw { overflow-x:visible; } .sts-share { justify-content:flex-start; } .sts-share .sts-sb { display:none; } .sts-share span { min-width:0; text-align:left; } .sts-drawer { padding:8px; } .sts-sec { margin-top:10px; } .sts-funnel { flex-direction:column; align-items:stretch; } .sts-funnel .sts-arr { align-self:center; transform:rotate(90deg); line-height:1; } } /* ---- Panel delivery (2026-10-02): the kpis of the head, the panel services compared ------ A line per panel service with its grouped heads, the fill bar, red and amber lines, the totals and the figures over the table; on a phone a line is a card. */ .sts-hr .kpis { margin-left:0; } .sts-kpis .kpi { display:block; cursor:pointer; min-width:96px; } .sts-kpis .kpi span { color:var(--muted); } .sts-kpis .kpi b { font-variant-numeric:tabular-nums; white-space:nowrap; } .sts-kpis .kpi.sts-on { box-shadow:0 0 0 2px var(--accent-line), var(--sh-1); } .sts-kpis .kpi.sts-zero b { color:var(--muted); } .sts-dp > .pt .hint b { color:var(--muted); font-weight:700; } table.grid.sts-dg { table-layout:fixed; } .sts-dg col.sts-cw1 { width:2%; } .sts-dg col.sts-cw2 { width:19%; } .sts-dg col.sts-cw3 { width:8%; } .sts-dg col.sts-cw4 { width:8%; } .sts-dg col.sts-cw5 { width:7.5%; } .sts-dg col.sts-cw6 { width:10%; } .sts-dg col.sts-cw7 { width:8%; } .sts-dg col.sts-cw8 { width:7%; } .sts-dg col.sts-cw9 { width:7.5%; } .sts-dg col.sts-cw10 { width:8%; } .sts-dg col.sts-cw11 { width:9%; } @media (min-width:2100px) { .sts-dg col.sts-cw2 { width:17%; } .sts-dg col.sts-cw3 { width:9%; } .sts-dg col.sts-cw5 { width:8%; } .sts-dg col.sts-cw9 { width:8%; } } .sts-dg .l2.sts-kinds { white-space:normal; overflow:visible; text-overflow:clip; } .sts-dg thead tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .sts-dg thead tr.chead th { color:var(--muted); letter-spacing:.05em; } .sts-dg th.sts-r, .sts-dg td.sts-r { text-align:right; } .sts-dg thead th { overflow:hidden; text-overflow:ellipsis; } .sts-dg thead tr.ghead th { border-bottom:0; box-shadow:inset 0 -1px 0 var(--line); } .sts-dg thead tr.chead th { border-bottom:0; box-shadow:inset 0 -1px 0 var(--line-2); } .sts-dg thead tr.ghead th.gs { box-shadow:inset 0 -1px 0 var(--line), inset 1px 0 0 var(--line-2); } .sts-dg thead tr.chead th.gs { box-shadow:inset 0 -1px 0 var(--line-2), inset 1px 0 0 var(--line-2); } .sts-dg tr.chead th.sts-cpan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .sts-dg tr.r > td.sts-pan { background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } @media (min-width:561px) { .sts-dg tbody.orow > tr.r { height:46px; } } @media (min-width:2100px) { .sts-dg tbody.orow > tr.r { height:49px; } } .sts-dg tr.r > td { vertical-align:middle; padding-top:5px; padding-bottom:5px; } .sts-dg td.sts-r .l1, .sts-dg td.sts-r .l2 { text-align:right; } .sts-dg .sts-r .l1 { font-family:var(--f-mono); font-size:var(--fs-s); font-variant-numeric:tabular-nums; } .sts-dg .sts-c-svc .l1 b { font-weight:600; color:var(--ink); } .sts-dg .sts-c-svc .l1 .mono { color:var(--ink); font-weight:500; margin-left:4px; } .sts-dg .sts-c-svc .l2 .sts-noroute { color:var(--faint); font-style:italic; } .sts-dg .l1 .sts-t-ok { color:var(--ok); font-weight:600; } .sts-dg .l1 .sts-t-amb { color:var(--amber); font-weight:700; } .sts-dg .l1 .sts-t-bad { color:var(--bad); font-weight:700; } .sts-fillc { display:flex; flex-direction:column; align-items:stretch; gap:3px; } .sts-fillc .l1 { text-align:right; } .sts-fbar { height:6px; border-radius:20px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; display:flex; } .sts-fbar i { display:block; height:100%; } .sts-fbar i.ok { background:var(--ok); } .sts-fbar i.amber { background:var(--amber); } .sts-fbar i.bad { background:var(--bad); } .sts-dg tbody.orow.sts-rbad > tr.r > td { background-color:var(--bad-row); } .sts-dg tbody.orow.sts-rbad > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--bad); } .sts-dg tbody.orow.sts-ramb > tr.r > td:first-child { box-shadow:inset 3px 0 0 var(--amber); } .sts-dg tbody.orow.sts-rbad:hover > tr.r > td, .sts-dg tbody.orow.sts-rbad.open > tr.r > td { background-color:var(--bad-soft); } .sts-dg tbody.sts-dtot > tr > td { padding:6px 9px; background:var(--surface-2); border-top:1px solid var(--line-2); font-weight:600; color:var(--ink); vertical-align:middle; } .sts-dg tbody.sts-dtot td.sts-r { font-family:var(--f-mono); font-size:var(--fs-s); } .sts-dg tbody.sts-dtot td .l2 { font-weight:400; } .sts-dg tbody.sts-empty td { padding:18px 12px; } .sts-figs { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding:6px 11px 7px; border-bottom:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); } .sts-fig { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; } .sts-fig .k { font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .sts-fig b { font-family:var(--f-mono); font-size:var(--fs-s); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .sts-fig b i { font-style:normal; font-weight:500; color:var(--muted); margin-left:6px; } .sts-fig.bad b { color:var(--bad); } .sts-fig.warn b { color:var(--amber); } .sts-figh { margin-left:auto; color:var(--muted); } @media (max-width:1560px) { .sts-figh { display:none; } } @media (max-width:560px) { .sts-kpis { flex-wrap:wrap; width:100%; } .phead .sts-kpis .kpi { flex:1 1 calc(50% - 4px); min-width:0; } table.grid.sts-dg colgroup, table.grid.sts-dg thead { display:none; } table.grid.sts-dg tbody.orow > tr.r { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 12px; padding:9px 34px 10px 11px; height:auto; } table.grid.sts-dg tbody.orow > tr.r > td { padding:0 !important; } table.grid.sts-dg td.sts-c-svc { flex:1 1 100%; } table.grid.sts-dg td.sts-r .l1, table.grid.sts-dg td.sts-r .l2 { text-align:left; } table.grid.sts-dg td[data-l] { flex:1 1 28%; min-width:0; } table.grid.sts-dg td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.sts-dg tbody.sts-dtot tr { display:flex; flex-wrap:wrap; gap:4px 12px; padding:8px 11px; } table.grid.sts-dg tbody.sts-dtot td { padding:0 !important; border:0 !important; flex:1 1 28%; } table.grid.sts-dg tbody.sts-dtot td.sts-c-svc { flex:1 1 100%; } .sts-dg .sts-fillc { max-width:160px; } .sts-figs { gap:3px 12px; } } /* ---- Search Console (2026-10-02): the overview, the position history, the two cards -------- Ported from the fifth round's prototype. Everything is the kit's; what this screen adds starts with gsc-. A chart's line takes its colour from a class (--gc), never a literal, so light and dark both hold. */ .gsc-fx .fx-lh[title] { cursor:help; } /* ---- the head ------------------------------------------------------------ */ .gsc-phead { align-items:flex-end; margin-bottom:8px; } .gsc-hl { flex:1 1 640px; min-width:0; } .gsc-phead .sub { max-width:1320px; margin-top:3px; line-height:1.45; color:var(--muted); font-size:var(--fs-s); } .gsc-phead h1 { overflow-wrap:anywhere; } .gsc-phead .pacts { gap:6px; } .btn.gsc-go { font-size:var(--fs); padding:5px 13px; border-radius:var(--r); } .gsc-oi { width:12px; height:12px; vertical-align:-1px; margin-left:2px; } .gsc-kind { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; } h1.gsc-urlh { font-family:var(--f-mono); font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere; } h1.gsc-urlh .gsc-host { font-size:var(--fs-m); font-weight:500; } .gsc-fxsite b { color:var(--ink); font-weight:600; } /* ---- the collector line, and the band of a stale site ------------------- */ .gsc-coll { display:flex; flex-wrap:wrap; align-items:center; gap:5px 18px; padding:7px 12px; margin-bottom:9px; font-size:var(--fs-s); } .gsc-ch { display:inline-flex; align-items:center; gap:7px; } .gsc-ch b { font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .gsc-cf { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; } .gsc-cf .k { color:var(--muted); font-size:var(--fs-xs); } .gsc-cf b { font-family:var(--f-mono); font-weight:600; color:var(--ink); font-size:var(--fs-s); } .gsc-cf code { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:0 5px; } .gsc-cnote { margin-left:auto; color:var(--muted); font-size:var(--fs-xs); } .panel.gsc-stale { display:block; padding:9px 13px 10px; border-color:var(--bad-line); border-left:3px solid var(--bad); background:var(--bad-soft); } .gsc-sh { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--bad); } .gsc-sh svg { width:17px; height:17px; flex:0 0 17px; } .gsc-sh b { font-size:var(--fs-m); font-weight:700; } .gsc-sp { margin:5px 0 8px; color:var(--text); line-height:1.55; max-width:1500px; font-size:var(--fs); } .gsc-sp b { color:var(--ink); } .gsc-sp code { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--bad); background:var(--surface); border:1px solid var(--bad-line); border-radius:5px; padding:0 5px; } .gsc-sfacts { display:flex; flex-wrap:wrap; gap:4px 18px; padding-top:7px; border-top:1px solid var(--bad-line); } .gsc-stale .gsc-cf code { background:var(--surface); } /* ---- the filter rows ------------------------------------------------------- */ .gsc-fx { margin-bottom:9px; } .gsc-cc { font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin-right:1px; } .fx-s.on .gsc-cc, .fx-s:hover .gsc-cc { color:inherit; } .gsc-gl { font-weight:400; color:var(--muted); } .fx-s.on .gsc-gl { color:var(--muted); } .gsc-rnote { font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } .gsc-rnote b { color:var(--ink); font-family:var(--f-mono); font-weight:600; } .gsc-rnote .mono { color:var(--text); font-size:var(--fs-xs); } .gsc-stag { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.02em; color:var(--bad); background:var(--bad-soft); border:1px solid var(--bad-line); border-radius:20px; padding:0 6px; line-height:15px; white-space:nowrap; } .gsc-fixed { display:inline-flex; align-items:center; gap:2px; font-weight:600; color:var(--ink); font-size:var(--fs-s); padding:2px 9px 2px 6px; border:1px dashed var(--line-3); border-radius:7px; background:var(--surface-2); } .gsc-fxsite { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-s); color:var(--ink); min-width:0; } .gsc-fxsite .k { color:var(--muted); font-size:var(--fs-xs); margin-left:6px; } .gsc-fx .fx-in input.mono { font-family:var(--f-mono); font-size:var(--fs-s); text-transform:lowercase; } @media (min-width:2000px) { #gsc-filters.fx.v1 .fx-body { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } } /* ---- the tiles ------------------------------------------------------------- */ .gsc-tiles-wrap { margin-bottom:9px; } .gsc-tcap { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 14px; margin:0 2px 6px; font-size:var(--fs-s); color:var(--muted); } .gsc-tcap b { font-family:var(--f-mono); color:var(--ink); font-weight:600; } .gsc-tcmp b { font-family:var(--f-mono); color:var(--text); font-weight:600; } .tiles.gsc-tiles { grid-template-columns:repeat(7, minmax(0,1fr)); margin-bottom:0; } .gsc-tile .v { display:flex; align-items:baseline; gap:9px; flex-wrap:nowrap; } .gsc-tile .gsc-tv { overflow:hidden; text-overflow:ellipsis; } .gsc-tile .d { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gsc-chg { font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:600; white-space:nowrap; } .gsc-chg.up { color:var(--ok); } .gsc-chg.down { color:var(--bad); } .gsc-chg.flat { color:var(--muted); } .tile.gsc-tile.run { border-left-color:var(--accent); } .tile.gsc-tile { cursor:default; } /* ---- charts: panes over one time axis ------------------------------------------ */ .gsc-crow { display:grid; gap:9px; grid-template-columns:minmax(0,1fr); margin-bottom:9px; align-items:stretch; } @media (min-width:1500px) { .gsc-crow { grid-template-columns:repeat(2, minmax(0,1fr)); } } .gsc-crow > .panel + .panel, .cgrid > .panel + .panel { margin-top:0; } .gsc-cp { margin-bottom:9px; display:flex; flex-direction:column; } .gsc-crow > .gsc-cp { margin-bottom:0; } /* side by side, a header that wraps would push one chart lower: the legend and the chart sit at the bottom of both */ .gsc-crow > .gsc-cp > .gsc-legend { margin-top:auto; } .gsc-crow > .gsc-cp > .gsc-chart { flex:0 0 auto; } .gsc-cp .pt .hint { flex:1 1 300px; min-width:0; } .gsc-c-clicks { --gc:var(--accent); } .gsc-c-imp { --gc:var(--amber); } .gsc-c-ctr { --gc:var(--z-del); } .gsc-c-pos { --gc:var(--z-pan); } .gsc-c-kw { --gc:var(--ink); } .gsc-c-up { --gc:var(--ok); } .gsc-c-down { --gc:var(--bad); } .gsc-legend { display:flex; flex-wrap:wrap; align-items:center; gap:3px 16px; padding:6px 12px 0; } .gsc-key { border:0; background:none; padding:2px 0; font:inherit; font-size:var(--fs-s); font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:4px; } .gsc-key:hover { color:var(--accent); } .gsc-key.off { color:var(--muted); font-weight:400; text-decoration:line-through; } .gsc-key.off .gsc-sw { opacity:.3; } .gsc-kn { color:var(--muted); font-weight:400; font-size:var(--fs-xs); } .gsc-legend .sp { flex:1; } .gsc-lnote { font-size:var(--fs-xs); color:var(--muted); } .gsc-sw { display:inline-block; width:15px; height:3px; border-radius:2px; background:var(--gc); flex:0 0 auto; } .gsc-sw.gsc-swb { width:9px; height:11px; border-radius:2px; } .gsc-chart { position:relative; padding:4px 12px 2px; flex:1 1 auto; } .gsc-cwrap { position:relative; } .gsc-svg { display:block; width:100%; height:auto; overflow:visible; } .gsc-svg .gsc-line { fill:none; stroke:var(--gc); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; } .gsc-svg .gsc-dot { fill:var(--gc); } .gsc-svg .gsc-hollow { fill:var(--surface); stroke:var(--gc); stroke-width:1.8; } .gsc-svg .gsc-bar { fill:var(--gc); fill-opacity:.82; } .gsc-svg .gsc-pbar { fill-opacity:.45; } .gsc-svg .gsc-grid { stroke:var(--line); stroke-width:1; } .gsc-svg .gsc-zero { stroke:var(--line-3); } .gsc-svg .gsc-yl, .gsc-svg .gsc-xl { fill:var(--muted); font-family:var(--f-mono); font-size:11.5px; } .gsc-svg .gsc-xp { fill:var(--faint); font-style:italic; } .gsc-svg .gsc-xs { fill:var(--bad); } .gsc-svg .gsc-pt { fill:var(--ink); font-family:var(--f-body); font-size:12.5px; font-weight:700; } .gsc-svg .gsc-ptk { fill:var(--gc); font-size:11px; } .gsc-svg .gsc-ptn { fill:var(--muted); font-weight:400; font-size:11.5px; } .gsc-svg .gsc-part { fill:var(--surface-2); } .gsc-svg .gsc-hl { stroke:var(--bad-line); stroke-width:2.2; } .gsc-svg .gsc-hbg { fill:var(--bad-soft); } .gsc-svg .gsc-zt { fill:var(--bad); font-family:var(--f-body); font-size:12px; font-weight:700; } .gsc-svg .gsc-zt2 { fill:var(--bad); font-family:var(--f-body); font-size:11px; } .gsc-svg .gsc-band { fill:var(--accent); fill-opacity:.1; pointer-events:none; } .gsc-svg .gsc-hit { fill:transparent; cursor:crosshair; } .gsc-svg .gsc-hot { fill:var(--surface); stroke:var(--gc); stroke-width:2.4; pointer-events:none; } .gsc-tip { position:absolute; z-index:5; pointer-events:none; background:var(--surface); border:1px solid var(--line-3); border-radius:var(--r); box-shadow:var(--sh-2); padding:6px 10px 7px; font-size:var(--fs-s); line-height:1.55; white-space:nowrap; min-width:190px; } .gsc-tt { font-weight:700; color:var(--ink); margin-bottom:2px; } .gsc-tpart { font-weight:600; color:var(--amber); font-size:var(--fs-xs); margin-left:4px; } .gsc-tr { display:flex; align-items:center; gap:7px; } .gsc-tr > span { color:var(--text); flex:1 1 auto; } .gsc-tr > b { font-family:var(--f-mono); font-weight:600; color:var(--ink); } .gsc-tr > em { font-style:normal; color:var(--muted); font-size:var(--fs-xs); } .gsc-cfoot { padding:3px 12px 10px; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } .gsc-cempty { padding:30px 0; text-align:center; color:var(--muted); font-size:var(--fs-s); } .gsc-cut { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 12px 0; } .gsc-cut .fx-in input { width:104px; font-family:var(--f-mono); } .gsc-bad { color:var(--bad); font-weight:700; } /* ---- the tables -------------------------------------------------------------- */ .gsc-tops { margin-bottom:9px; } @media (max-width:1199px) { .cgrid.c2.gsc-tops, .cgrid.c2.gsc-zones { grid-template-columns:minmax(0,1fr); } } .gsc-ptot { font-size:var(--fs-xs); color:var(--muted); } table.grid.inner.gsc-tt, table.grid.inner.gsc-ct, table.grid.inner.gsc-rt { table-layout:fixed; } table.grid.inner.gsc-tt thead th, table.grid.inner.gsc-ct thead th, table.grid.inner.gsc-rt thead th { background:var(--surface-2); white-space:nowrap; } table.grid.inner.gsc-tt td, table.grid.inner.gsc-ct td, table.grid.inner.gsc-rt td { vertical-align:middle; } table.grid.inner td.mono { font-size:var(--fs-s); } col.gsc-w-rk { width:44px; } col.gsc-w-n { width:98px; } col.gsc-w-sh { width:150px; } col.gsc-w-p { width:84px; } td.gsc-nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gsc-rk { color:var(--muted); font-variant-numeric:tabular-nums; } a.gsc-kw { color:var(--ink); font-weight:600; } a.gsc-kw:hover { color:var(--accent); } a.gsc-url { color:var(--ink); } a.gsc-url:hover .gsc-path { color:var(--accent); } .gsc-host { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--muted); } .gsc-path { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .gsc-shc { white-space:nowrap; } .gsc-shc .gsc-bar { display:inline-block; width:58px; height:6px; border-radius:3px; background:var(--surface-3); vertical-align:1px; margin-right:7px; overflow:hidden; text-align:left; } .gsc-shc .gsc-bar i { display:block; height:100%; background:var(--accent); border-radius:3px; } .gsc-shc .mono { font-size:var(--fs-s); } tr.gsc-none td { padding:16px 12px !important; color:var(--muted); text-align:center; } a.gsc-ctry { color:var(--ink); font-weight:600; } a.gsc-ctry:hover { color:var(--accent); } a.gsc-ctry .gsc-cc { margin-right:6px; } table.grid.inner.gsc-ct tr.gsc-on td { background:var(--accent-soft); } .gsc-rows { margin-bottom:9px; } .gsc-zstack { display:grid; gap:9px; margin-bottom:9px; } .gsc-zstack > .panel + .panel { margin-top:0; } .gsc-zones { margin-bottom:9px; } @media (max-width:560px) { table.grid.inner.gsc-ct td.gsc-shc { display:none; } } .gsc-rt .gsc-rc-date { width:98px; } .gsc-rt .gsc-rc-country { width:68px; } .gsc-rt .gsc-rc-clicks, .gsc-rt .gsc-rc-impressions { width:100px; } .gsc-rt .gsc-rc-ctr, .gsc-rt .gsc-rc-position { width:84px; } .gsc-rt-8 .gsc-rc-keyword { width:30%; } .gsc-foot { margin:4px 2px 0; max-width:1300px; line-height:1.55; } /* ---- the keyword position history -------------------------------------------- */ .gsc-hp { margin-bottom:9px; } .gsc-hbar { gap:8px 16px; padding:7px 11px; } .gsc-total { font-size:var(--fs-s); color:var(--muted); } .gsc-total b { font-family:var(--f-mono); font-size:var(--fs); color:var(--ink); font-weight:700; } .gsc-ord { display:inline-flex; align-items:center; gap:8px; } .gsc-ordl { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); } .gsc-ord .view:hover { text-decoration:none; } .gsc-legend2 { display:inline-flex; align-items:center; gap:5px 8px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted); } .gsc-lg { display:inline-block; width:14px; height:11px; border-radius:3px; vertical-align:-1px; margin-left:4px; } .gsc-lg.up { background:var(--ok-soft); box-shadow:inset 0 0 0 1px var(--ok-line); } .gsc-lg.down { background:var(--bad-soft); box-shadow:inset 0 0 0 1px var(--bad-line); } .gsc-lg.new { background:var(--run-soft); box-shadow:inset 0 0 0 1px var(--run-line); } .gsc-lg.none { box-shadow:inset 0 0 0 1px var(--line-2); } .gsc-explain { margin:0; padding:6px 11px 7px; border-bottom:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } table.grid.gsc-hg { table-layout:fixed; } .gsc-hg col.gsc-k0 { width:28px; } .gsc-hg col.gsc-k1 { width:17%; } .gsc-hg col.gsc-k2 { width:6.2%; } .gsc-hg col.gsc-k3 { width:5%; } .gsc-hg col.gsc-k4 { width:5%; } .gsc-hg col.gsc-k5 { width:6.4%; } @media (min-width:2100px) { .gsc-hg col.gsc-k1 { width:15.5%; } .gsc-hg col.gsc-k2 { width:5.4%; } .gsc-hg col.gsc-k3, .gsc-hg col.gsc-k4 { width:4.4%; } .gsc-hg col.gsc-k5 { width:5.2%; } } .gsc-hg tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .gsc-hg tr.ghead th.g-del { color:var(--z-pan); background-image:linear-gradient(var(--z-pan-tint), var(--z-pan-tint)); } .gsc-hg tr.chead th { color:var(--muted); letter-spacing:.05em; vertical-align:bottom; } .gsc-hg tr.chead th.gsc-r, .gsc-hg td.gsc-r { text-align:right; } .gsc-hg thead tr.chead th { height:auto; padding-top:3px; padding-bottom:3px; } .gsc-hg thead tr.ghead th { border-bottom:0; box-shadow:inset 0 -1px 0 var(--line); } .gsc-hg thead tr.chead th { border-bottom:0; box-shadow:inset 0 -1px 0 var(--line-2); } .gsc-hg thead tr.chead th.gs, .gsc-hg thead tr.ghead th.gs { box-shadow:inset 0 -1px 0 var(--line-2), inset 1px 0 0 var(--line-2); } .gsc-hg tbody.orow > tr.r { height:auto; } .gsc-hg tbody.orow > tr.r > td { padding:6px 9px; vertical-align:middle; } .gsc-hg tbody.orow > tr.r > td.c-exp { padding:6px 0 6px 6px; } .gsc-hg td.gsc-r .l1 { font-family:var(--f-mono); font-size:var(--fs-s); color:var(--ink); } .gsc-hg td.gsc-r .l2 { font-family:var(--f-mono); font-size:var(--fs-micro); } .gsc-hg td.gsc-r .delta { font-size:var(--fs-s); } .gsc-hg .delta.gsc-new { color:var(--run); font-weight:600; } .gsc-hg .gsc-c-kw .l2 .gsc-path { font-size:var(--fs-xs); color:var(--muted); } .gsc-hg tbody.orow.gsc-gone > tr.r > td { color:var(--muted); } .gsc-hg tbody.orow.gsc-gone a.gsc-kw { color:var(--text); font-weight:400; } .gsc-hg td.gsc-strip { padding:4px 9px !important; } .gsc-shead { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; margin:0 0 3px; text-transform:none; letter-spacing:0; } .gsc-stt { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--z-pan); } .gsc-win { display:inline-flex; align-items:center; gap:6px; margin-left:auto; } .gsc-win .btn { font-weight:600; } .gsc-dis { opacity:.4; cursor:default; } .gsc-wtxt { font-size:var(--fs-xs); font-weight:600; color:var(--muted); font-family:var(--f-body); letter-spacing:0; text-transform:none; } .gsc-wtxt b { color:var(--ink); } .gsc-lbls { display:flex; gap:2px; } .gsc-lbls > span { flex:1 1 0; min-width:0; text-align:center; font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:600; letter-spacing:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-transform:none; } .gsc-lbls > span.gsc-lp { font-style:italic; color:var(--faint); } .gsc-cells { display:flex; gap:2px; align-items:stretch; } .gsc-cell { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 1px 1px; border-radius:4px; background:var(--surface-2); overflow:hidden; white-space:nowrap; line-height:1.2; } .gsc-cell b { font-family:var(--f-mono); font-weight:600; font-size:var(--fs-xs); color:var(--ink); font-variant-numeric:tabular-nums; } .gsc-cell b em { font-style:normal; font-weight:600; font-size:var(--fs-micro); } .gsc-cell i { font-style:normal; font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--muted); } .gsc-cell.up { background:var(--ok-soft); } .gsc-cell.up b, .gsc-cell.up em { color:var(--ok); } .gsc-cell.down { background:var(--bad-soft); } .gsc-cell.down b, .gsc-cell.down em { color:var(--bad); } .gsc-cell.new { background:var(--run-soft); } .gsc-cell.new b, .gsc-cell.new em { color:var(--run); } .gsc-cell.flat b { color:var(--ink); } .gsc-cell.none { background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--faint); font-size:var(--fs-xs); min-height:31px; } /* the opened line: its own panel under the line, three named zones */ .gsc-drawer .dtitle span { color:var(--muted); font-size:var(--fs-s); } .gsc-drawer .dtitle .btn { font-size:var(--fs-s); } .gsc-dgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1400px) { .gsc-dgrid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } .gsc-z-pos { grid-row:span 2; } } .gsc-zone > h4 { color:var(--muted); background:var(--surface-2); font-size:var(--fs-micro); } .gsc-zone > h4 .zt { color:var(--muted); } .gsc-z-pos > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.gsc-z-pos { border-left:2px solid var(--z-pan); } .gsc-cp-in { margin:0 0 6px; } .gsc-cp-in > .pt { display:none; } .gsc-cp-in .gsc-legend { padding:0 0 2px; } .gsc-cp-in .gsc-chart { padding:2px 0 0; } .gsc-all { display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:4px; margin-top:4px; } .gsc-ap { display:flex; flex-direction:column; gap:1px; min-width:0; } .gsc-al { font-family:var(--f-mono); font-size:var(--fs-micro); font-weight:600; color:var(--muted); text-align:center; } .gsc-ap .gsc-cell { flex:0 0 auto; padding:3px 2px; } .gsc-zh { margin:0; padding:5px 11px 8px; border-top:1px solid var(--line); } .gsc-drawer table.grid.inner thead th { position:static; } .gsc-mlbls { display:none; } .gsc-mwin { display:none; } @media (max-width:560px) { /* the line of the history becomes a card: the keyword across, four figures with captions, the strip under them */ .gsc-hp .gsc-hbar { gap:6px 10px; } table.grid.gsc-hg tbody.orow > tr.r { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:5px 8px; padding:9px 36px 10px 11px; height:auto; } table.grid.gsc-hg tbody.orow > tr.r > td { padding:0 !important; text-align:left !important; } table.grid.gsc-hg td.gsc-c-kw { grid-column:1 / -1; } table.grid.gsc-hg td.gsc-c-kw .l1, table.grid.gsc-hg td.gsc-c-kw .l2 { white-space:normal; overflow-wrap:anywhere; } table.grid.gsc-hg td.gsc-r .l1, table.grid.gsc-hg td.gsc-r .l2 { text-align:left; } table.grid.gsc-hg td.gsc-r::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; text-transform:uppercase; color:var(--muted); white-space:nowrap; } table.grid.gsc-hg td.gsc-strip { grid-column:1 / -1; padding:3px 0 0 !important; border:0 !important; } .gsc-hg .gsc-mlbls { display:flex; margin-bottom:2px; } .gsc-hg .gsc-mlbls > span { overflow:visible; } .gsc-hg .gsc-mlbls > span:nth-child(even) { visibility:hidden; } table.grid.gsc-hg td.gsc-r::before { letter-spacing:.02em; } .gsc-mwin { display:inline-flex !important; flex-basis:100%; } .gsc-mwin .gsc-win { margin-left:0; flex-wrap:wrap; } .gsc-dgrid { grid-template-columns:minmax(0,1fr); } .gsc-hg tr.d > td { display:block; } } /* ---- 4K ---------------------------------------------------------------------- */ @media (min-width:2100px) { col.gsc-w-n { width:110px; } col.gsc-w-sh { width:170px; } col.gsc-w-p { width:92px; } .gsc-shc .gsc-bar { width:70px; } .gsc-svg .gsc-yl, .gsc-svg .gsc-xl { font-size:12px; } .gsc-svg .gsc-pt { font-size:13px; } } @media (max-width:1300px) { .tiles.gsc-tiles { grid-template-columns:repeat(4, minmax(0,1fr)); } .gsc-cnote { margin-left:0; } } /* ---- a phone's width: the page holds together, nothing scrolls sideways ---------- */ @media (max-width:700px) { .tiles.gsc-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); } .gsc-legend .sp, .gsc-lnote { display:none; } .gsc-cf { white-space:normal; } } @media (max-width:560px) { .gsc-phead .pacts { margin-left:0; } .gsc-coll { gap:4px 12px; } .gsc-chart { padding:4px 6px 2px; } .gsc-cp .pt .hint { flex-basis:100%; } /* admin.css flaw: at this width every table.grid turns into blocks; these become labelled cards instead of a heap of loose cells */ table.grid.inner.gsc-tt tr, table.grid.inner.gsc-ct tr, table.grid.inner.gsc-rt tr { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:3px 10px; padding:7px 10px; border-top:1px solid var(--line); } table.grid.inner.gsc-tt tbody tr:first-child, table.grid.inner.gsc-ct tbody tr:first-child, table.grid.inner.gsc-rt tbody tr:first-child { border-top:0; } table.grid.inner.gsc-tt td, table.grid.inner.gsc-ct td, table.grid.inner.gsc-rt td { border:0 !important; padding:0 !important; text-align:left !important; white-space:normal; overflow:visible; min-width:0; } table.grid.inner td[data-l]::before { content:attr(data-l); display:block; font-family:var(--f-body); font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } table.grid.inner.gsc-tt td.gsc-nm, table.grid.inner.gsc-ct td:first-child, table.grid.inner.gsc-rt td.gsc-nm { grid-column:1 / -1; overflow-wrap:anywhere; } table.grid.inner.gsc-tt td.gsc-rk { display:none; } table.grid.inner.gsc-tt td.gsc-shc { display:none; } .gsc-key { text-align:left; } tr.gsc-none td { grid-column:1 / -1; } } /* ---- what the server version adds: the cells' two widths, the window of the strip --------- */ /* .delta.up and .delta.down are painted by the global .up and .down */ .delta.flat { color:var(--muted); } /* a cell is drawn with both its short and its full figures; a strip wide enough (96 px a cell) shows the full ones */ .gsc-cell .gsc-cw { display:none; } .gsc-wide .gsc-cell .gsc-cn { display:none; } .gsc-wide .gsc-cell .gsc-cw { display:inline; } /* the periods a narrow strip has no room for: admin.js hides them from the left */ .gsc-cells > .gsc-cell.gsc-x, .gsc-lbls > span.gsc-x { display:none; } .gsc-win a.btn.xs, .gsc-win span.btn.xs { text-decoration:none; } .gsc-rnote.gsc-bad { color:var(--bad); font-weight:600; } /* ---- Services (2026-10-02): the list of services, the round-5 prototype ported -------------- Every class of this screen starts with svc-; the kit's own (.phead/.kpis, the fx filter header, the orders line and its drawer with named zones, .facts, table.grid.inner) is touched only under this screen's roots. Only the kit's tokens, so both themes hold. */ :root { --svc-amber-tint:color-mix(in srgb, var(--amber) 8%, transparent); --svc-run-tint:color-mix(in srgb, var(--run) 7%, transparent); } .svc-mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; } .svc-code { font-family:var(--f-mono); font-size:.93em; color:var(--ink); background:var(--surface-3); border:1px solid var(--line); border-radius:4px; padding:0 4px; white-space:nowrap; } .svc-q { color:var(--faint); } .svc-cap { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .svc-t-ok { color:var(--ok); } .svc-t-bad { color:var(--bad); } .svc-t-amber { color:var(--amber); } b.svc-t-ok, b.svc-t-bad, b.svc-t-amber { font-weight:700; } .svc-dot { display:inline-block; width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--off); vertical-align:0; } .svc-dot.ok { background:var(--ok); } .svc-dot.bad { background:var(--bad); } .svc-dot.amber { background:var(--amber); } .svc-dot.idle, .svc-dot.few { background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-3); } /* admin.css flaw: its fact captions are --fs-nano in --faint, too small and pale on a 4K monitor */ .svc-dgrid .facts dt { font-size:var(--fs-micro); color:var(--muted); } .svc-dgrid .facts dd { font-size:var(--fs-s); } /* the tiles carry a second, quieter line: today's words under each figure */ .svc-kpis .kpi { min-width:112px; } .svc-kpis .kpi b { font-variant-numeric:tabular-nums; white-space:nowrap; } .svc-kpis .kpi span { color:var(--muted); } .svc-kpis .kpi .svc-kd { display:block; font-size:var(--fs-xs); font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); line-height:1.3; margin-top:1px; white-space:nowrap; } .svc-kpis .kpi.warn .svc-kd { color:var(--amber); } .svc-kpis .kpi.alarm .svc-kd { color:var(--bad); } .svc-kpis a.kpi { cursor:pointer; } /* ---- the form parts every page uses ---------------------------------------------------- */ .svc-in { width:100%; height:28px; padding:0 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-s); min-width:0; } .svc-in.num { font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; padding-right:6px; } .svc-in.mono { font-family:var(--f-mono); font-size:var(--fs-s); } .svc-in:focus, .svc-ta:focus { outline:none; border-color:var(--accent-line); box-shadow:var(--ring); } .svc-in::placeholder, .svc-ta::placeholder { color:var(--faint); } .svc-in:disabled { background:var(--surface-2); color:var(--faint); border-style:dashed; } .svc-in.svc-chg, .svc-ta.svc-chg { border-color:var(--amber-line); box-shadow:inset 3px 0 0 var(--amber); } .svc-ta { width:100%; padding:5px 8px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:var(--fs-s); line-height:1.45; resize:vertical; min-width:0; display:block; } .svc-ta.mono { font-family:var(--f-mono); font-size:var(--fs-xs); line-height:1.5; } /* no spinners: a six-digit quantity needs the room; the arrow keys still step */ input[type="number"].svc-in { -moz-appearance:textfield; appearance:textfield; } input[type="number"].svc-in::-webkit-inner-spin-button, input[type="number"].svc-in::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } input[type="checkbox"].svc-cb { width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer; vertical-align:-2px; } /* an on/off switch: a real check box under a drawn track */ .svc-sw { display:inline-flex; align-items:center; gap:8px; cursor:pointer; position:relative; min-width:0; } .svc-sw input { position:absolute; opacity:0; width:1px; height:1px; margin:0; } .svc-swt { position:relative; width:30px; height:17px; flex:0 0 30px; border-radius:20px; background:var(--line-3); transition:background .12s; } .svc-swt::after { content:''; position:absolute; left:2px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--surface); box-shadow:var(--sh-1); transition:left .12s; } .svc-sw input:checked + .svc-swt { background:var(--ok); } .svc-sw input:checked + .svc-swt::after { left:15px; } .svc-sw input:focus-visible + .svc-swt { box-shadow:var(--ring); } .svc-swl { font-size:var(--fs-xs); font-weight:700; color:var(--muted); min-width:20px; } .svc-sw input:checked ~ .svc-swl { color:var(--ok); } .svc-sw .svc-swx { font-size:var(--fs-s); color:var(--text); line-height:1.35; } .svc-sw .svc-swx small { display:block; font-size:var(--fs-xs); color:var(--muted); } /* one choice of a few: a joined track of real radio buttons */ .svc-rseg { display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px; padding:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:8px; max-width:100%; } .svc-rseg label { position:relative; cursor:pointer; } .svc-rseg input { position:absolute; opacity:0; width:1px; height:1px; margin:0; } .svc-rseg span { display:inline-flex; align-items:center; gap:6px; padding:0 9px; line-height:22px; border-radius:6px; font-size:var(--fs-s); font-weight:600; color:var(--muted); white-space:nowrap; } .svc-rseg label:hover span { color:var(--ink); background:var(--surface); } .svc-rseg input:checked + span { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1), 0 0 0 1px var(--line-2); } .svc-rseg input:checked + span.amber { color:var(--amber); box-shadow:var(--sh-1), 0 0 0 1px var(--amber-line); } .svc-rseg input:focus-visible + span { box-shadow:var(--ring); } .svc-rseg.sm span { padding:0 7px; line-height:20px; font-size:var(--fs-xs); } .svc-rseg.svc-chg { border-color:var(--amber-line); box-shadow:inset 3px 0 0 var(--amber); } .svc-cnt { font-size:var(--fs-xs); color:var(--faint); font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; } .svc-cnt.over { color:var(--bad); font-weight:700; } .svc-cnt.near { color:var(--amber); } .svc-help { font-size:var(--fs-xs); color:var(--muted); line-height:1.5; margin:5px 0 0; } .svc-help b { color:var(--text); } /* the tags of a sub-tariff: base for a site, default */ .svc-tag { display:inline-block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); border-radius:5px; padding:0 5px; line-height:15px; white-space:nowrap; vertical-align:1px; background:var(--surface); } .svc-tag.soc { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); } .svc-tag.take { color:var(--z-del); border-color:var(--z-del-line); background:var(--z-del-soft); } .svc-tag.def { color:var(--z-pan); border-color:var(--z-pan-line); background:var(--z-pan-soft); } /* a site chip: on or off */ .svc-site { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-s); font-weight:600; color:var(--ink); white-space:nowrap; } .svc-site.off { color:var(--faint); font-weight:400; text-decoration:line-through; text-decoration-color:var(--line-3); } .svc-site + .svc-site { margin-left:10px; } /* the free orders by week: a strip of bars, the newest on the right */ .svc-weeks { display:flex; align-items:flex-end; gap:2px; height:30px; } .svc-weeks i { flex:1 1 0; min-width:4px; max-width:20px; background:var(--z-del); border-radius:2px 2px 0 0; opacity:.85; } .svc-weeks i.z { background:transparent; box-shadow:inset 0 -2px 0 var(--line-2); opacity:1; } .svc-weeks.closed i { background:var(--amber); } .svc-wlab { display:flex; justify-content:space-between; font-size:var(--fs-micro); color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; } /* a bar of what was given against the limit */ .svc-bar { display:inline-block; width:100%; max-width:160px; height:7px; border-radius:20px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; vertical-align:1px; } .svc-bar i { display:block; height:100%; background:var(--z-del); border-radius:20px; } .svc-bar.amber i { background:var(--amber); } .svc-bar.bad i { background:var(--bad); } /* the footer notes of a page */ .svc-foot { margin:10px 2px 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.55; max-width:1500px; } .svc-foot b { color:var(--text); } /* a route in one line: the order, the panel service, how it stands */ .svc-rt { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:var(--fs-s); } .svc-rt .svc-rn { display:inline-block; min-width:15px; padding:0 3px; border-radius:4px; font-size:var(--fs-micro); font-weight:700; line-height:15px; text-align:center; color:var(--muted); background:var(--surface-3); } .svc-rt b { font-family:var(--f-mono); font-weight:500; color:var(--ink); } .svc-rt.bad b { color:var(--bad); } .svc-rt.amber b { color:var(--amber); } .svc-rt.idle b, .svc-rt.few b { color:var(--muted); } .svc-rt .svc-kinds { font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; color:var(--muted); } .svc-chain { display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; } .svc-chain .svc-arr { color:var(--faint); } @media (max-width:560px) { .svc-kpis .kpi { flex:1 1 30%; min-width:0; } .svc-kpis .kpi .svc-kd { white-space:normal; } } /* ---- named zones in the kit's colours; the kit's own .z-del/.z-pan/.z-cus/.z-ord also carry grid-area names (the orders drawer) and would break any other grid, so this screen has its own ---- */ .zone.svc-zd { border-left:2px solid var(--z-del); } .zone.svc-zd > h4 { color:var(--z-del); background:var(--z-del-soft); border-bottom-color:var(--z-del-line); } .zone.svc-zp { border-left:2px solid var(--z-pan); } .zone.svc-zp > h4 { color:var(--z-pan); background:var(--z-pan-soft); border-bottom-color:var(--z-pan-line); } .zone.svc-zc { border-left:2px solid var(--z-cus); } .zone.svc-zc > h4 { color:var(--z-cus); background:var(--z-cus-soft); border-bottom-color:var(--z-cus-line); } .zone.svc-zo { border-left:2px solid var(--z-ord); } .zone.svc-zo > h4 { color:var(--z-ord); background:var(--z-ord-soft); border-bottom-color:var(--z-ord-line); } .svc-dgrid .zone > h4 .zt { font-size:var(--fs-xs); } .svc-dgrid .zone > h4 .btn { font-family:var(--f-body); letter-spacing:0; text-transform:none; } .svc-wbox { margin-top:9px; max-width:310px; } .svc-tags { display:inline-flex; flex-wrap:wrap; gap:2px 3px; } .svc-tag.sm { font-size:var(--fs-micro); padding:0 4px; letter-spacing:.02em; text-transform:lowercase; } th small.svc-rg { display:block; font-size:var(--fs-micro); font-weight:400; letter-spacing:0; text-transform:none; color:var(--faint); } /* ---- the list: the head ------------------------------------------------------------------------ */ .svc-phead > .svc-ptitle { flex:1 1 640px; min-width:0; } .svc-phead .sub { max-width:1180px; line-height:1.5; margin-top:3px; } .svc-phead .sub b { color:var(--text); } .svc-fx .fx-top .omni { max-width:620px; } #svc-filters.fx.v1 .fx-blk { grid-template-columns:132px minmax(0,1fr); } .svc-fx .fx-c .brandtag, .svc-fx .fx-s .brandtag { margin-right:0; } /* ---- the list: a line per service ------------------------------------------------------------- */ .svc-listp .tbar { gap:8px 14px; } .svc-listp .tbar .count { font-size:var(--fs-s); color:var(--muted); } .svc-listp .tbar .count b { color:var(--ink); font-size:var(--fs); } .svc-legend { display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px 12px; font-size:var(--fs-xs); color:var(--muted); } .svc-legend > span { display:inline-flex; align-items:center; gap:5px; } table.grid.svc-grid { table-layout:fixed; } col.svc-w-exp { width:30px; } col.svc-w-svc { width:15.5%; } col.svc-w-sell { width:12%; } col.svc-w-sub { width:11.5%; } col.svc-w-pk { width:10.5%; } col.svc-w-free { width:13.5%; } col.svc-w-rt { width:16.5%; } col.svc-w-gt { width:7.5%; } col.svc-w-30 { width:7.5%; } col.svc-w-act { width:5.5%; } .svc-grid tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .svc-grid tr.chead th { color:var(--muted); } .svc-grid th.svc-r, .svc-grid td.svc-r { text-align:right; } .svc-grid tr.r > td { padding-top:9px; padding-bottom:9px; } .svc-grid .l1 { font-size:var(--fs); } .svc-grid .l2 { font-size:var(--fs-xs); } .svc-grid .l1 b { color:var(--ink); } a.svc-sname { font-family:var(--f-head); font-weight:600; font-size:var(--fs-m); color:var(--ink); } a.svc-sname:hover { color:var(--accent); } .svc-grid .svc-c-sell .l1 .pill { margin-right:3px; } .svc-grid .svc-c-sub .l1 .pill { margin-left:3px; vertical-align:1px; } .svc-grid .l2 .svc-code { font-size:var(--fs-xs); } td.svc-c-act { overflow:visible; } .svc-grid td.svc-c-act .acts { justify-content:flex-end; } .svc-grid td.svc-c-act .btn { font-size:var(--fs-s); padding:2px 12px; } .svc-empty { padding:18px 12px; color:var(--muted); font-size:var(--fs-s); text-align:center; } /* admin.css flaw: the kit's fix of the two-row sticky head stands the column names a pixel low (the proxies prototype met it first); 70px closes the slit, the inset line keeps the hairline */ table.grid.svc-grid thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } /* ---- the opened line: four named zones ------------------------------------------------------------ */ .svc-dgrid { display:grid; gap:10px; align-items:start; grid-template-columns:minmax(0,1fr); } @media (min-width:1300px) { .svc-dgrid { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); } } .svc-dgrid .zone { min-width:0; } .svc-zfoot { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; margin-top:9px; font-size:var(--fs-xs); color:var(--muted); } .svc-zfoot.svc-pad { padding:0 11px 10px; } .svc-dgrid .zbody.p0 { padding:0; } .svc-dgrid .zbody.p0 table.grid.inner td:first-child, .svc-dgrid .zbody.p0 table.grid.inner th:first-child { padding-left:11px; } .svc-dgrid .zbody.p0 table.grid.inner td:last-child, .svc-dgrid .zbody.p0 table.grid.inner th:last-child { padding-right:11px; } table.grid.inner.svc-itab thead th { font-size:var(--fs-micro); color:var(--muted); letter-spacing:.06em; } table.grid.inner.svc-itab tbody td { vertical-align:middle; } table.grid.inner.svc-itab tr.svc-tot td { background:var(--surface-2); font-weight:700; color:var(--ink); } .svc-warnline { margin:0 0 8px; padding:5px 9px; border:1px solid var(--amber-line); background:var(--amber-soft); color:var(--amber); border-radius:var(--r-sm); font-size:var(--fs-s); font-weight:600; line-height:1.45; } .svc-wbox .svc-weeks { margin-top:4px; } .svc-rgrp { display:grid; grid-template-columns:minmax(150px, 210px) minmax(0,1fr); gap:4px 12px; align-items:baseline; padding:6px 0; border-top:1px solid var(--line); } .svc-rgrp:first-child { border-top:0; padding-top:0; } .svc-rgh { font-size:var(--fs-s); color:var(--text); } .svc-rgh b { color:var(--ink); } .svc-rgh .svc-q { display:block; font-size:var(--fs-xs); } /* ---- 4K, the narrower desktops ------------------------------------------------------------------- */ @media (min-width:2100px) { col.svc-w-svc { width:13.5%; } col.svc-w-rt { width:19.5%; } col.svc-w-free { width:13%; } .svc-grid tr.r > td { padding-top:10px; padding-bottom:10px; } } @media (max-width:1700px) { col.svc-w-svc { width:14.5%; } col.svc-w-sell { width:12%; } col.svc-w-sub { width:11%; } col.svc-w-pk { width:10.5%; } col.svc-w-free { width:14%; } col.svc-w-rt { width:17.5%; } col.svc-w-gt { width:7%; } col.svc-w-30 { width:7.5%; } col.svc-w-act { width:6%; } } @media (max-width:1400px) and (min-width:561px) { col.svc-w-gt { width:0; } .svc-grid th:nth-child(8), .svc-grid tr.r > td.svc-c-gt { display:none; } .svc-grid tr.ghead th:nth-child(6) { display:none; } col.svc-w-svc { width:16%; } col.svc-w-rt { width:19%; } } /* ---- a phone's width: the page holds together, nothing scrolls sideways ---------------------------- */ @media (max-width:560px) { .svc-legend { display:none; } .svc-listp .tbar .fx-seg { width:100%; } .svc-listp .tbar .fx-s { flex:1 1 30%; justify-content:center; white-space:normal; text-align:center; } /* a line becomes a card: the service on top, the rest under it in two columns */ table.grid.svc-grid tr.r { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px 10px; padding:9px 36px 10px 11px; } table.grid.svc-grid tr.r > td.svc-c-svc, table.grid.svc-grid tr.r > td.svc-c-rt, table.grid.svc-grid tr.r > td.svc-c-free, table.grid.svc-grid tr.r > td.svc-c-act { grid-column:1 / -1; } table.grid.svc-grid tr.r > td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; } table.grid.svc-grid tr.r > td[data-l=""]::before { display:none; } .svc-grid .l1, .svc-grid .l2 { white-space:normal; } .svc-grid td.svc-r { text-align:left; } .svc-grid td.svc-c-act .acts { justify-content:flex-start; } table.grid.svc-grid tr.r > td.svc-c-gt { display:block; } /* admin.css orders the delivery and panels cells of a line card (5, 6): this card keeps its own order */ table.grid.svc-grid tr.r > td.svc-c-svc { order:1; } table.grid.svc-grid tr.r > td.svc-c-sell { order:2; } table.grid.svc-grid tr.r > td.svc-c-sub { order:3; } table.grid.svc-grid tr.r > td.svc-c-pk { order:4; } table.grid.svc-grid tr.r > td.svc-c-free { order:5; } table.grid.svc-grid tr.r > td.svc-c-rt { order:6; } table.grid.svc-grid tr.r > td.svc-c-gt { order:7; } table.grid.svc-grid tr.r > td.svc-c-30 { order:8; } table.grid.svc-grid tr.r > td.svc-c-act { order:9; } /* admin.css flaw: at this width every table.grid turns into blocks, the inner tables of an opened line included; they become labelled blocks here instead of a heap of loose cells */ table.grid.inner.svc-itab thead { display:none; } table.grid.inner.svc-itab tbody tr { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px 10px; padding:6px 2px; border-top:1px solid var(--line); } table.grid.inner.svc-itab tbody tr:first-child { border-top:0; } table.grid.inner.svc-itab tbody td { padding:0 !important; border:0 !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; } table.grid.inner.svc-itab td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } table.grid.inner.svc-itab td:first-child { grid-column:1 / -1; } .svc-dgrid .zbody.p0 table.grid.inner.svc-itab tbody tr { padding-left:11px; padding-right:11px; } .svc-rgrp { grid-template-columns:minmax(0,1fr); } .svc-grid .drawer .dtitle span:last-child { display:none; } } .svc-grid .svc-tech { color:var(--text); font-size:var(--fs-xs); } /* ---- Services (2026-10-02): the service page — one sheet of parts instead of nine tabs ------------ The head with its figures, the neighbours, a sticky row of the parts, and each part its own form with the same address and field names as before (the phone posts to them too). */ /* ---- the service page: the head, the neighbours, the row of parts --------------------------------------- */ .svc-shead { align-items:flex-start; } .svc-shead > .svc-ptitle { flex:1 1 620px; min-width:0; } .svc-h1row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .svc-h1row h1 { margin:0; } .svc-h1row .pill { text-transform:none; font-size:var(--fs-xs); line-height:18px; padding:0 9px; } .svc-shead .sub { margin-top:4px; font-size:var(--fs-s); color:var(--muted); } .svc-shead .sub a { color:var(--text); } .svc-shead .sub a b { color:var(--ink); } .svc-marks { display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin-top:6px; font-size:var(--fs-s); } .svc-shead .svc-kpis { margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; } .svc-shead .svc-kpis .kpi { min-width:116px; } .svc-switch { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 0 9px; } .svc-switch .fx-seg a:hover { text-decoration:none; } .svc-switch .fx-s { font-size:var(--fs-s); } .svc-swlab { font-size:var(--fs-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-left:6px; } /* the parts of the page, sticky under the top bar */ .svc-nav { position:sticky; top:50px; z-index:30; display:flex; flex-wrap:wrap; gap:2px; padding:4px; margin:0 0 10px; background:var(--surface-3); border:1px solid var(--line); border-radius:9px; box-shadow:var(--sh-2); } .svc-ni { position:relative; display:inline-flex; flex-direction:column; justify-content:center; padding:3px 12px 4px; border-radius:6px; min-width:0; text-decoration:none !important; } .svc-ni:hover { background:var(--surface); } .svc-ni.on { background:var(--surface); box-shadow:var(--sh-1), 0 0 0 1px var(--line-2); } .svc-nl { font-size:var(--fs-s); font-weight:700; color:var(--ink); white-space:nowrap; line-height:1.3; } .svc-ni.on .svc-nl { color:var(--accent); } .svc-ns { font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; line-height:1.3; } .svc-nd { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--amber); } .svc-sec { margin-top:10px; scroll-margin-top:118px; } .svc-secs > .svc-sec:first-child { margin-top:0; } .svc-spt { position:relative; } .svc-spt > b { font-size:var(--fs-s); letter-spacing:.08em; color:var(--ink); } .svc-dirty { font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber-line); background:var(--amber-soft); border-radius:5px; padding:0 6px; line-height:16px; } .svc-top { font-size:var(--fs-xs); color:var(--muted); } .svc-psum { font-size:var(--fs-xs); color:var(--muted); } .svc-psum b { color:var(--ink); font-variant-numeric:tabular-nums; } /* ---- a form: its answer on top, its zones, its foot with Save and what changed ---------------------------- */ .svc-form { margin:0; } .svc-answer:empty { display:none; } .svc-answer { padding:9px 11px 0; } .svc-answer .saved, .svc-answer .alert-bad { margin:0; display:flex; align-items:center; gap:7px; } .svc-answer .saved svg { width:14px; height:14px; flex:0 0 14px; } .svc-answer .alert-bad ul { margin:0; padding-left:18px; } .svc-ffoot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 11px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); } .svc-ffoot .btn { padding:3px 16px; } .svc-chgs { font-size:var(--fs-xs); color:var(--faint); } .svc-chgs.on { color:var(--amber); font-weight:700; } .svc-ffhelp { flex:1 1 420px; font-size:var(--fs-xs); color:var(--muted); line-height:1.45; } .svc-pbd { padding:9px 11px 4px; } .svc-pnote { margin:0 0 8px; max-width:1500px; } .svc-m0 { margin:0 !important; } .svc-mt { margin-top:10px; } .svc-z { margin:0; } .svc-ggrid, .svc-fgrid2, .svc-g2, .svc-p2, .svc-a3 { display:grid; gap:10px; padding:10px 11px; align-items:start; grid-template-columns:minmax(0,1fr); } .svc-gcol { display:grid; gap:10px; align-content:start; min-width:0; } .svc-sec > form > .zone.svc-z, .svc-sec > form > .svc-z { margin:0 11px 10px; } @media (min-width:1000px) { .svc-ggrid { grid-template-columns:repeat(2, minmax(0,1fr)); } .svc-fgrid2, .svc-g2, .svc-p2 { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } .svc-a3 { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (min-width:1500px) { .svc-ggrid { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.1fr); } .svc-a3 { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.9fr); } } @media (min-width:2100px) { .svc-fgrid2 { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); } } /* fields: a label over its box, its limits and its hint */ .svc-f { display:flex; flex-direction:column; gap:3px; min-width:0; } .svc-fl { font-size:var(--fs-xs); font-weight:600; color:var(--text); line-height:1.3; } .svc-fh { font-size:var(--fs-xs); color:var(--muted); line-height:1.4; } .svc-f2 { display:grid; gap:9px 12px; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; } .svc-f3 { display:grid; gap:9px 12px; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:start; } .svc-inl { flex-direction:row; align-items:center; gap:7px; } .svc-lang { font-family:var(--f-mono); font-weight:500; color:var(--muted); font-size:var(--fs-xs); margin-left:3px; } .svc-swlist { display:flex; flex-direction:column; } .svc-swlist > .svc-sw, .svc-swlist > .svc-f { padding:6px 0; border-bottom:1px solid var(--line); } .svc-swlist > :last-child { border-bottom:0; } .svc-swsm .svc-swx { font-size:var(--fs-s); } .svc-sw.svc-chg .svc-swt { box-shadow:0 0 0 2px var(--amber-line); } td.svc-chg { background:var(--svc-amber-tint) !important; box-shadow:inset 0 -2px 0 var(--amber-line); } tr.svc-newrow > td:first-child { box-shadow:inset 3px 0 0 var(--run); } tr.svc-newrow > td { background:var(--svc-run-tint); } .svc-now { margin-top:8px; padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); font-size:var(--fs-s); } .svc-now b { font-weight:700; } .svc-read { margin-top:8px; padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); font-size:var(--fs-s); color:var(--text); line-height:1.6; } .svc-read b { color:var(--ink); } .svc-rd { margin-right:12px; white-space:nowrap; } .svc-addrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:7px; } .svc-chrow { display:grid; grid-template-columns:118px minmax(0,1fr); gap:3px 8px; align-items:baseline; padding:2px 0; } /* the form tables: captions readable, every field lined up */ table.svc-ftab { width:100%; border-collapse:collapse; } table.svc-ftab thead th { text-align:left; font-size:var(--fs-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:4px 6px; border-bottom:1px solid var(--line-2); white-space:nowrap; background:var(--surface-2); } table.svc-ftab tbody td { padding:4px 6px; border-top:1px solid var(--line); vertical-align:middle; } table.svc-ftab tbody tr:first-child td { border-top:0; } table.svc-ftab th.num, table.svc-ftab td.num { text-align:right; } table.svc-ftab .svc-c { text-align:center; } table.svc-ftab .sep { border-left:1px solid var(--line-2); } table.svc-ftab td.svc-rl { font-size:var(--fs-s); color:var(--text); } table.svc-ftab td.svc-rl small { display:block; font-size:var(--fs-xs); color:var(--muted); } table.svc-ftab td.svc-ra { width:1%; white-space:nowrap; text-align:right; } table.svc-ftab tr.svc-tot td { background:var(--surface-2); } .svc-mv, .svc-x { min-width:24px; padding:1px 5px !important; } .svc-ord { white-space:nowrap; width:1%; } .svc-prio, .svc-ln { display:inline-block; min-width:18px; margin-right:4px; padding:0 4px; border-radius:4px; font-size:var(--fs-micro); font-weight:700; line-height:16px; text-align:center; color:var(--muted); background:var(--surface-3); } td.svc-ln { background:transparent; text-align:right; } .svc-dash { display:inline-block; width:100%; text-align:center; } /* General */ table.svc-names td .svc-in { min-width:120px; } table.svc-names td { position:relative; } table.svc-names .svc-cnt { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; } table.svc-names .svc-in { padding-right:62px; } table.svc-lims td .svc-in { width:96px; margin-left:auto; display:block; } /* Free */ .svc-closed { margin:10px 11px 0; padding:7px 11px; border:1px solid var(--amber-line); background:var(--amber-soft); color:var(--amber); border-radius:var(--r); font-size:var(--fs-s); line-height:1.45; } .svc-closed b { font-weight:700; } table.svc-ftbl td .svc-in { width:96px; margin-left:auto; display:block; } td.svc-given { white-space:nowrap; font-size:var(--fs-s); color:var(--muted); } td.svc-given b { color:var(--ink); } td.svc-gbar { width:120px; } td.svc-sees { font-size:var(--fs-s); } table.svc-acc td .svc-cb { display:block; margin:0 auto; } table.svc-waits td .svc-in { width:66px; margin-left:auto; display:block; } .svc-zbuck .svc-wbox { margin-top:10px; } /* Packages & prices */ table.svc-pgrid thead tr.svc-gh th { font-size:var(--fs-micro); text-transform:none; letter-spacing:0; color:var(--text); background:var(--surface-3); } table.svc-pgrid thead tr.svc-gh th:first-child { text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } table.svc-pgrid th.svc-sth { white-space:normal; } table.svc-pgrid th.svc-sth b { font-size:var(--fs-s); color:var(--ink); } table.svc-pgrid td .svc-in { width:74px; margin-left:auto; display:block; } table.svc-pgrid td.svc-qty .svc-in { width:104px; } table.svc-pgrid td.svc-pc .svc-in { width:92px; } .svc-pk, .svc-pst { display:block; text-align:right; font-size:var(--fs-xs); color:var(--muted); line-height:1.3; margin-top:2px; white-space:nowrap; font-variant-numeric:tabular-nums; } table.svc-pgrid tr.svc-soon > td:first-child { box-shadow:inset 3px 0 0 var(--amber); } table.svc-pgrid tr.svc-hid > td { opacity:.62; } table.svc-pgrid tr.svc-hid > td:first-child { box-shadow:inset 3px 0 0 var(--off); } table.svc-pgrid td .svc-cb { display:block; margin:0 auto; } /* Execution */ .svc-eblk { border:1px solid var(--line); border-radius:var(--r); margin:0 0 10px; overflow:hidden; background:var(--surface); } .svc-ehead { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:6px 9px; background:var(--surface-2); border-bottom:1px solid var(--line); } .svc-ename { font-size:var(--fs-s); } .svc-ename b { font-size:var(--fs); color:var(--ink); } .svc-ehead .sp { flex:1; } .svc-chains { padding:5px 9px 6px; border-bottom:1px solid var(--line); background:var(--svc-run-tint); } .svc-chains .svc-chain { gap:3px 8px; } .svc-rt.svc-skip b { text-decoration:line-through; text-decoration-color:var(--bad); } table.svc-routes thead th { background:var(--surface); } table.svc-routes td .svc-in { width:72px; } table.svc-routes td.svc-psid .svc-in { width:92px; } table.svc-routes td.svc-trio .svc-in { width:66px; } table.svc-routes td.svc-pair, table.svc-routes td.svc-trio, table.svc-routes td.svc-psid { white-space:nowrap; } table.svc-routes td.svc-pair .svc-in + .svc-in, table.svc-routes td.svc-trio .svc-in + .svc-in { margin-left:3px; } table.svc-routes td.svc-pctc .svc-in { width:74px; } table.svc-routes td .svc-in { display:inline-block; vertical-align:middle; } .svc-ids { margin-left:5px; font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; } .svc-ids:hover { color:var(--accent); } td.svc-health { min-width:170px; font-size:var(--fs-xs); color:var(--muted); line-height:1.35; } .svc-rh { display:flex; align-items:center; gap:5px; font-size:var(--fs-s); } .svc-rh b { color:var(--ink); font-weight:600; } .svc-rh.bad b { color:var(--bad); } .svc-rh.amber b { color:var(--amber); } .svc-rh.ok b { color:var(--ok); } .svc-rh.idle b, .svc-rh.few b { color:var(--muted); font-weight:400; } .svc-rh2 { display:block; } .svc-mixsum { font-size:var(--fs-s); color:var(--muted); } .svc-noroute { padding:6px 9px; margin:0; } .svc-eblk .svc-addrow { padding:0 9px 8px; } .svc-pan .svc-rseg { flex-wrap:nowrap; } /* Sub-tariffs */ .svc-modeline { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:6px; } .svc-mode { margin:0; font-size:var(--fs-s); } table.grid.svc-stgrid-t { table-layout:fixed; } col.svc-sw-exp { width:30px; } col.svc-sw-name { width:13%; } col.svc-sw-st { width:11%; } col.svc-sw-sla { width:8%; } col.svc-sw-take { width:9%; } col.svc-sw-pr { width:10%; } col.svc-sw-free { width:12%; } col.svc-sw-rt { width:13%; } col.svc-sw-gt { width:7.5%; } col.svc-sw-30 { width:7%; } col.svc-sw-act { width:9%; } .svc-stgrid-t tr.ghead th { font-size:var(--fs-micro); letter-spacing:.1em; color:var(--muted); } .svc-stgrid-t tr.chead th { color:var(--muted); } .svc-stgrid-t th.svc-r, .svc-stgrid-t td.svc-r { text-align:right; } .svc-stgrid-t tr.r > td { padding-top:8px; padding-bottom:8px; } .svc-stgrid-t .l2 { font-size:var(--fs-xs); } .svc-stgrid-t td .acts { justify-content:flex-end; flex-wrap:wrap; gap:3px; } b.svc-stn { color:var(--ink); } .svc-fb { display:inline-block; margin-right:4px; padding:0 5px; border-radius:4px; font-size:var(--fs-xs); font-weight:600; line-height:16px; border:1px solid var(--line-2); } .svc-fb.on { color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft); } .svc-fb.shown { color:var(--amber); border-color:var(--amber-line); background:var(--amber-soft); } .svc-fb.off { color:var(--faint); text-decoration:line-through; } table.grid.svc-stgrid-t thead tr.ghead + tr.chead th { top:70px; box-shadow:inset 0 1px 0 var(--line); } .svc-stdgrid { display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-items:start; } @media (min-width:1500px) { .svc-stdgrid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); } } .svc-stdcol { display:grid; gap:10px; align-content:start; min-width:0; } .svc-stform { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .svc-stform .svc-stgrid { display:grid; gap:10px; padding:10px; } .svc-flags { display:flex; flex-wrap:wrap; gap:4px 14px; } .svc-qcard { margin-top:7px; } .svc-qc { display:flex; gap:9px; align-items:flex-start; margin-top:3px; padding:9px 11px; border:1px solid var(--accent-line); border-radius:10px; background:var(--accent-soft); } .svc-qr { width:16px; height:16px; flex:0 0 16px; border-radius:50%; border:2px solid var(--accent); box-shadow:inset 0 0 0 3px var(--surface); background:var(--accent); margin-top:2px; } .svc-qb { min-width:0; flex:1; } .svc-qn { display:flex; align-items:baseline; gap:8px; } .svc-qn b { color:var(--ink); font-size:var(--fs); } .svc-qp { margin-left:auto; font-family:var(--f-mono); font-weight:600; color:var(--accent); } .svc-qd { font-size:var(--fs-s); color:var(--text); line-height:1.45; overflow-wrap:anywhere; } .svc-qd ul { margin:4px 0; padding-left:18px; } .svc-qd p { margin:4px 0 0; } .svc-tk { font-size:var(--fs-s); color:var(--ink); padding:5px 0; } .svc-newhead b { color:var(--accent); } table.grid.inner.svc-stp td, table.grid.inner.svc-stp th { white-space:nowrap; } /* Guarantees, Parsing, Auto-Likes */ .svc-gfields { display:grid; gap:9px 14px; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:9px; } .svc-gfields .svc-in { max-width:180px; } table.svc-gsubs td .svc-in { width:96px; margin-left:auto; display:block; } td.svc-glim { font-size:var(--fs-s); color:var(--text); white-space:nowrap; } table.svc-gsubs td .svc-cb { display:block; margin:0 auto; } table.svc-scan td .svc-in, table.svc-alr td .svc-in { width:120px; margin-left:auto; display:block; } table.svc-scan td .svc-cb { display:block; margin:0 auto; } .svc-f3 .svc-in, .svc-f2 .svc-in { max-width:100%; } /* Content */ .svc-cfacts { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:var(--fs-s); color:var(--text); margin-bottom:8px; } .svc-cfacts .svc-cap { margin-right:5px; } .svc-ctrack { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:6px; } .svc-ctrack .fx-s { font-size:var(--fs-s); } .svc-cpages { padding:0 11px 10px; } .svc-cpage { display:grid; gap:10px; } table.svc-chead td { vertical-align:top; position:relative; } table.svc-chead td .svc-cnt { display:block; text-align:right; margin-top:2px; } table.svc-chead td.svc-rl { width:170px; padding-top:9px; } .svc-serp { padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); display:grid; gap:1px; font-family:Arial, var(--f-body); } .svc-serp-u { font-size:var(--fs-xs); color:var(--muted); } .svc-serp-t { font-size:16px; color:var(--accent); line-height:1.3; } .svc-serp-t.cut { box-shadow:inset 0 -2px 0 var(--amber-line); } .svc-serp-d { font-size:var(--fs-s); color:var(--text); line-height:1.45; } table.svc-list td .svc-in, table.svc-list td .svc-ta { min-width:120px; } table.svc-list td { vertical-align:top; } table.svc-list td.svc-c { vertical-align:middle; } table.svc-list td .svc-cb { display:block; margin:0 auto; } /* ---- 4K ----------------------------------------------------------------------------------------------- */ @media (min-width:2100px) { .svc-sec { scroll-margin-top:124px; } table.svc-routes td .svc-in { width:80px; } table.svc-routes td.svc-psid .svc-in { width:100px; } table.svc-routes td.svc-trio .svc-in { width:72px; } table.svc-pgrid td .svc-in { width:84px; } table.svc-pgrid td.svc-pc .svc-in { width:104px; } } /* a narrower desktop: the quieter columns step aside, never the fields */ @media (max-width:1700px) { col.svc-sw-name { width:14%; } col.svc-sw-take { width:0; } .svc-stgrid-t th:nth-child(5), .svc-stgrid-t tr.r > td:nth-child(5) { display:none; } .svc-stgrid-t tr.ghead th:nth-child(5) { display:none; } col.svc-sw-rt { width:15%; } col.svc-sw-free { width:13%; } } @media (max-width:1400px) and (min-width:561px) { table.svc-routes td.svc-health { min-width:0; } .svc-rh2 { display:none; } } /* ---- a phone's width: the page holds together, nothing scrolls sideways -------------------------------------- */ @media (max-width:560px) { .svc-nav { position:static; } .svc-ni { padding:3px 8px; } .svc-ns { display:none; } .svc-shead .svc-kpis .kpi { min-width:0; } .svc-f2, .svc-f3, .svc-gfields { grid-template-columns:minmax(0,1fr); } .svc-chrow { grid-template-columns:minmax(0,1fr); } .svc-rd { white-space:normal; display:block; } /* every form table becomes labelled blocks: a row is a card */ table.svc-ftab, table.svc-ftab tbody, table.svc-ftab tr, table.svc-ftab td { display:block; width:auto; } table.svc-ftab thead { display:none; } table.svc-ftab tbody tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 10px; padding:8px 0; border-top:1px solid var(--line); } table.svc-ftab tbody td { border:0 !important; padding:0 !important; text-align:left !important; white-space:normal !important; } table.svc-ftab td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:1px; } table.svc-ftab td[data-l=""]::before { display:none; } table.svc-ftab td.svc-rl, table.svc-ftab td.svc-pan, table.svc-ftab td.svc-health { grid-column:1 / -1; } table.svc-ftab td .svc-in { width:100% !important; margin:0 !important; display:block !important; } table.svc-ftab td.svc-pair .svc-in + .svc-in, table.svc-ftab td.svc-trio .svc-in + .svc-in { margin-top:3px !important; } table.svc-ftab td .svc-cb { margin:0 !important; } table.svc-ftab td.svc-ra { text-align:right !important; } .svc-pan .svc-rseg { flex-wrap:wrap; } table.svc-names .svc-cnt { position:static; transform:none; display:block; text-align:right; } table.svc-names .svc-in { padding-right:8px; } .svc-stgrid-t tr.r { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 10px; padding:9px 36px 10px 11px !important; } .svc-stgrid-t tr.r > td[data-l]::before { content:attr(data-l); display:block; font-size:var(--fs-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .svc-stgrid-t tr.r > td[data-l=""]::before { display:none; } .svc-stgrid-t tr.r > td:nth-child(2), .svc-stgrid-t tr.r > td:last-child { grid-column:1 / -1; } .svc-stgrid-t .l1, .svc-stgrid-t .l2 { white-space:normal; } .svc-stgrid-t tr.r > td:nth-child(5) { display:block; } .svc-stgrid-t td.svc-r { text-align:left; } .svc-stgrid-t td .acts { justify-content:flex-start; } .svc-secs table.grid.inner.svc-itab tbody tr { grid-template-columns:repeat(2, minmax(0, 1fr)); } .svc-ehead { flex-direction:column; align-items:flex-start; } } /* leaving with changes not saved */ .svc-leave { position:sticky; top:50px; z-index:31; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px; padding:7px 11px; border:1px solid var(--amber-line); background:var(--amber-soft); color:var(--amber); border-radius:var(--r); font-size:var(--fs-s); box-shadow:var(--sh-2); } .svc-leave b { font-weight:700; } .svc-leave a { color:var(--amber); text-decoration:underline; font-weight:600; } /* what the last Save got, next to the button */ .svc-said { font-size:var(--fs-xs); font-weight:700; border-radius:5px; padding:1px 7px; border:1px solid; } .svc-said.ok { color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft); } .svc-said.bad { color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft); } /* what the port adds: the head and the row of parts are drawn again after a Save (#svc-head, #svc-nav), the readable facts and zone captions of the list on this page too, the wide tables scroll inside their part, a new sub-tariff opens above the list, a changed route dims its figures */ .svc-secs .facts dt { font-size:var(--fs-micro); color:var(--muted); } .svc-secs .facts dd { font-size:var(--fs-s); } .svc-secs .zone > h4 .zt { font-size:var(--fs-xs); } .svc-secs .zone > h4 .btn { font-family:var(--f-body); letter-spacing:0; text-transform:none; } .svc-scroll { overflow-x:auto; } .svc-stale { font-size:var(--fs-xs); color:var(--amber); } td.svc-health.svc-hstale > * { opacity:.45; } .svc-stnew:empty { display:none; } .svc-stnew { margin-top:8px; } .drawer.svc-newst { border:1px solid var(--accent-line); border-radius:10px; padding:0; overflow:hidden; } .svc-newst > .svc-newhead { padding:6px 11px; background:var(--accent-soft); color:var(--accent); font-size:var(--fs-s); } .svc-newst > .svc-stform { border:0; border-radius:0; } .svc-dcol { min-width:0; } .svc-stgrid-t tbody.orow.svc-loading tr.r { opacity:.7; cursor:progress; } .svc-cfacts a { font-weight:600; } table.svc-chead td.svc-rl .svc-q { white-space:nowrap; } /* the preview of a sub-tariff's description: a page of its own, with the other language, the other sub-tariffs and its card */ body.svc-solo { background:var(--bg); } .svc-pstrip { position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 16px; background:var(--surface); border-bottom:1px solid var(--line); font-size:var(--fs-s); color:var(--muted); } .svc-pstrip b { color:var(--ink); } .svc-pstrip .sp { flex:1; } .svc-pstrip .fx-seg a:hover { text-decoration:none; } .svc-pbrand { font-family:var(--f-head); font-weight:600; color:var(--ink); font-size:var(--fs-m); } .svc-pwrap { padding:28px 16px 40px; } .svc-ppanel { max-width:760px; margin:0 auto; } .svc-ppanel .pt b { color:var(--ink); } .svc-ppanel h1 { font-family:var(--f-head); font-weight:600; font-size:18px; color:var(--ink); margin:2px 0 8px; } .sub-tariff-description { font-size:var(--fs); color:var(--text); line-height:1.55; overflow-wrap:anywhere; } .sub-tariff-description ul { margin:4px 0; padding-left:20px; } .sub-tariff-description p { margin:6px 0 0; } .svc-pempty { padding:9px 11px; border:1px dashed var(--line-3); border-radius:var(--r); color:var(--muted); font-size:var(--fs-s); background:var(--surface-2); margin:0 0 8px; } .svc-pcard .svc-pnote { margin:8px 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.5; } .svc-pcard { max-width:760px; margin:12px auto 0; } .svc-qc.off .svc-qr { background:var(--surface); } .svc-qc.off { background:var(--surface); border-color:var(--line-2); } .svc-qp small { font-family:var(--f-body); font-weight:600; font-size:var(--fs-xs); } @media (max-width:560px) { .svc-pwrap { padding:14px 9px 30px; } .svc-pstrip { padding:7px 9px; } } /* ---- Failed jobs: the figures and the buttons of all of them in the head, the words of a button, the newest 200 ---- */ .fj-right { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; } .fj-right form { display:inline-flex; margin:0; } .fj-said:empty { display:none; } .fj-said > div { margin:0 0 9px; } .fj-note { margin:0 0 7px; font-size:var(--fs-s); color:var(--muted); }