/* Combined dashboard — one set of tokens for both streams, so the RWSC half and
   the Complaints half read as one product rather than two bolted together. */
:root{
  --brand:#0b4f8a; --brand2:#0e7fb8; --accent:#0891b2;
  --ink:#0f2540; --muted:#5b6b81; --line:#dbe4ee;
  --bg:#eef2f7; --card:#fff;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  /* Ageing runs as one traffic light, so a figure's colour alone says how bad it
     is: green → yellow → orange → dark red. The inks are darkened from the pure
     hues so the text stays readable on its own tint and survives a photocopier. */
  --b0:#15803d;   /* 0-5   green      */
  --b1:#b8860b;   /* 6-15  gold       */
  --b2:#ea580c;   /* 16-30 orange     */
  --b3:#8b0000;   /* >30   dark red   */
  --b0bg:#e7f8ed; --b1bg:#fdf6d8; --b2bg:#ffeede; --b3bg:#fde2e2;
  --radius:12px; --shadow:0 1px 3px rgba(15,37,64,.09),0 6px 20px rgba(15,37,64,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:var(--brand2)}

/* ---- app bar ---- */
.appbar{background:linear-gradient(100deg,var(--brand),var(--brand2));color:#fff;box-shadow:var(--shadow)}
.appbar .in{max-width:1560px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:11px 22px;flex-wrap:wrap}
.appbar .mark{font-size:24px}
.appbar b{font-size:15px;display:block;line-height:1.25}
.appbar .sub{font-size:11.5px;opacity:.85}
.appbar .spacer{flex:1}
.appbar .who{font-size:11.5px;opacity:.85}
.abtn{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:8px;padding:7px 12px;
  font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.abtn:hover{background:rgba(255,255,255,.3)}

/* ---- stream nav: the two main options ---- */
.streamnav{background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.streamnav .in{max-width:1560px;margin:0 auto;display:flex;gap:4px;padding:0 22px;flex-wrap:wrap}
.streamnav a{padding:13px 18px;font-weight:700;font-size:13.5px;color:var(--muted);text-decoration:none;
  border-bottom:3px solid transparent;display:flex;align-items:center;gap:7px}
.streamnav a:hover{color:var(--brand)}
.streamnav a.on{color:var(--brand);border-bottom-color:var(--brand2)}
.streamnav .right{margin-left:auto;display:flex;gap:4px}

.wrap{max-width:1560px;margin:0 auto;padding:22px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.page-h h1{margin:0;font-size:21px;letter-spacing:-.3px}
.page-h .sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px}

/* ---- cards ---- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-h h3{margin:0;font-size:14.5px}
.card-h small{font-size:11.5px;color:var(--muted);font-weight:600}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1100px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---- the two big choice cards on the landing page ---- */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
@media(max-width:900px){.choose{grid-template-columns:1fr}}
.choice{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:26px 28px;text-decoration:none;
  color:inherit;display:block;border-left:6px solid var(--brand2);transition:transform .13s ease,box-shadow .13s ease}
.choice:hover{transform:translateY(-3px);box-shadow:0 10px 34px rgba(15,37,64,.14)}
.choice.c2{border-left-color:var(--accent)}
.choice .ico{font-size:30px}
.choice h2{margin:8px 0 3px;font-size:20px}
.choice .desc{color:var(--muted);font-size:13px;margin-bottom:16px}
.choice .nums{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.choice .nums div .n{font-size:25px;font-weight:800;letter-spacing:-.6px}
.choice .nums div .l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.choice .go{margin-top:15px;font-weight:800;color:var(--brand2);font-size:13px}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 17px;border-left:4px solid var(--brand2)}
.kpi .n{font-size:26px;font-weight:800;letter-spacing:-.6px}
.kpi .l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.kpi .d{font-size:11.5px;font-weight:700;margin-top:5px}
.kpi.bad{border-left-color:var(--bad)} .kpi.warn{border-left-color:var(--b2)}
.kpi.ok{border-left-color:var(--ok)} .kpi.sky{border-left-color:var(--accent)}
/* a compact KPI used on the dense overview — same idea, smaller footprint so a
   whole stream's headline fits in one row */
.kpi.mini{padding:11px 13px}
.kpi.mini .n{font-size:20px}
.kpi.mini .l{font-size:10px}

/* ---- overview: horizontal bars + funnel, computed on the server so the
   landing page carries the shape of both streams without a chart library ---- */
.bars{display:flex;flex-direction:column;gap:9px;margin:2px 0 0}
.bar{display:grid;grid-template-columns:120px 1fr 74px;align-items:center;gap:10px;font-size:12.5px}
.bar .bl{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .bl a{color:inherit;text-decoration:none}
.bar .bt{height:18px;border-radius:5px;background:#edf1f6;position:relative;overflow:hidden}
.bar .bf{position:absolute;left:0;top:0;bottom:0;border-radius:5px;min-width:2px;transition:width .2s}
.bar .bn{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar .bn small{color:var(--muted);font-weight:600;font-size:10.5px}
.bar .bn .r30{color:var(--b3);font-weight:800}
.bar.tot{border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.bar.tot .bl,.bar.tot .bn{font-weight:800}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* small pill list — status / pending-with counts */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pill{display:inline-flex;align-items:baseline;gap:7px;background:#f4f8fd;border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink)}
.pill b{font-variant-numeric:tabular-nums}
.pill .pl{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
/* the heading that names each stream's column, so RWSC stays one side and
   Complaints the other and the eye is never asked to hop between them */
.stream-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink);
  margin:0 2px 12px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.stream-h .rwsc{color:var(--brand2)} .stream-h .cmp{color:var(--accent)}
.stream-h .t{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.3px}
.streamcol{min-width:0}
/* image-2 style status tiles: one colour per bucket, on the left edge, the number
   and a thin progress bar (share of applications received) tinted to match */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{border:1px solid var(--line);border-left:4px solid var(--c,var(--brand2));border-radius:10px;
  padding:11px 13px;background:var(--card)}
.stat .l{font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.stat .n{font-size:24px;font-weight:800;color:var(--c,var(--ink));letter-spacing:-.5px;margin-top:2px;line-height:1}
.stat .s{font-size:11px;color:var(--muted);font-weight:600;margin-top:4px;line-height:1.3}
.stat .mb{height:5px;border-radius:3px;background:#eef2f7;margin-top:9px;overflow:hidden}
.stat .mb i{display:block;height:100%;background:var(--c,var(--brand2));border-radius:3px;min-width:2px}
/* the >15-day pendency table: a coloured dot ties each stage to its tile */
.sdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0;background:var(--c,var(--muted))}
/* the detailed category table earns a couple of quieter columns (share, oldest)
   that are not part of the traffic light and should read as secondary */
.mtx td.dim,.mtx th.dim{color:var(--muted);background:none}
.mtx td.dim{font-weight:600}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:800;border-top:2px solid var(--line);border-bottom:0}
/* a heading that can be clicked to order the table under it — the arrow says
   which column is doing the ordering, and which way */
th.sortable{cursor:pointer;user-select:none;transition:filter .15s}
th.sortable:hover{filter:brightness(.94)}
th .ar{opacity:.32;font-size:9px;margin-left:3px}
th.sorted .ar{opacity:1;color:var(--brand2)}
th.sorted{color:var(--brand2)}
/* long headings over one- and two-digit columns wrap instead of setting the
   column width; the full wording stays available on hover where it is shortened */
.mtx th,.list th{white-space:normal;line-height:1.25}
.mtx tbody tr:hover td{background:#f2f8ff}
.mtx td .cell{display:inline-block;min-width:38px;padding:3px 8px;border-radius:7px;font-weight:700;cursor:zoom-in}
.mtx td .cell:hover{outline:2px solid var(--brand2);outline-offset:1px}
.mtx td .cell.z{color:#b6c2d1;cursor:default;background:none!important}
.mtx td .cell.z:hover{outline:none}
.grp{font-weight:800}
.grp .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
.dot.Sewer{background:#8b5cf6}.dot.Water{background:#0891b2}
.dot.Pollution{background:#d97706}.dot.Others{background:#94a3b8}

.delta{font-weight:800;font-size:12px}
.delta.up{color:var(--bad)}      /* more pendency than last time = bad */
.delta.down{color:var(--ok)}
.delta.flat{color:var(--muted)}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge.b-d0_5 {background:var(--b0bg);color:var(--b0)}
.badge.b-d6_15{background:var(--b1bg);color:var(--b1)}
.badge.b-d16_30{background:var(--b2bg);color:var(--b2)}
.badge.b-gt30 {background:var(--b3bg);color:var(--b3);font-weight:800}

.alert{border-radius:var(--radius);padding:13px 16px;margin-bottom:16px;font-size:13.5px}
.alert.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.alert.bad{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.alert.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.toolbar select,.toolbar input{border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13px;
  font-family:inherit;background:#fff;color:inherit}
.toolbar label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.toolbar .sp{flex:1}
.btn{background:linear-gradient(120deg,var(--brand),var(--brand2));color:#fff;border:0;border-radius:8px;
  padding:9px 15px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:none;color:var(--brand2);border:1px solid var(--line)}
.btn.sm{padding:5px 10px;font-size:11.5px;border-radius:7px}
.btn:hover{filter:brightness(1.07)}
/* the download pair that sits at the right-hand end of a card heading */
.dl{display:flex;gap:6px;margin-left:auto}
.muted{color:var(--muted)}
.hint{font-size:11.5px;color:var(--muted);margin:8px 0 0}

/* ---- drill-down modal ---- */
.ovl[hidden]{display:none}
.ovl{position:fixed;inset:0;background:rgba(15,37,64,.45);z-index:60;display:flex;align-items:flex-start;
  justify-content:center;padding:5vh 16px;backdrop-filter:blur(2px)}
.ovl .modal{background:var(--card);border-radius:var(--radius);box-shadow:0 20px 60px rgba(15,37,64,.35);
  width:min(1100px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.ovl .modal-h{display:flex;align-items:center;gap:12px;padding:14px 20px;color:#fff;
  background:linear-gradient(100deg,var(--brand),var(--brand2))}
.ovl .modal-h h3{margin:0;font-size:15px}
.ovl .modal-h .sub{font-size:11.5px;opacity:.85;font-weight:600}
.ovl .modal-h .close{margin-left:auto;background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:8px;
  width:30px;height:30px;font-size:15px;font-weight:800;cursor:pointer}
.ovl .modal-b{padding:16px 20px;overflow:auto}

/* ==========================================================================
   Matrix tables, calmed down.
   Every figure used to sit in its own coloured pill, so a screen of counts read
   as a screen of colour and the eye had nothing to land on. Colour now marks
   only what needs acting on — the ageing band on a badge, and the >30 column —
   while an ordinary count is just a number and a zero recedes.
   ========================================================================== */
.mtx td .cell{background:none;border-radius:6px;padding:3px 7px;min-width:34px;font-weight:650;
  color:var(--ink);transition:background .12s}
.mtx td .cell:hover{background:#eaf2fd;outline:0}
.mtx td .cell.z{color:#c3ccd8;font-weight:500;cursor:default}
.mtx td .cell.z:hover{background:none}
/* Each ageing column carries its own step of the traffic light, so a row can be
   read across without going back to the heading. Ink AND a faint column wash:
   ink alone left gold and orange looking like the same colour at a glance, and a
   wash behind the whole column tells the four bands apart before you read a
   single figure. The weight climbs with the band, so the oldest reads heaviest.
   Zeros stay grey throughout — an empty cell is not an amber cell. */
.mtx td.bd0{background:var(--b0bg)} .mtx td.bd0 .cell{color:var(--b0);font-weight:650}
.mtx td.bd1{background:var(--b1bg)} .mtx td.bd1 .cell{color:var(--b1);font-weight:700}
.mtx td.bd2{background:var(--b2bg)} .mtx td.bd2 .cell{color:var(--b2);font-weight:750}
.mtx td.bd3{background:var(--b3bg)} .mtx td.bd3 .cell{color:var(--b3);font-weight:800}
.mtx tbody tr:hover td.bd0,.mtx tbody tr:hover td.bd1,
.mtx tbody tr:hover td.bd2,.mtx tbody tr:hover td.bd3{filter:brightness(.965)}
.mtx td .cell.z{color:#b9c3d0!important;font-weight:500}
.mtx td .cell.b{font-weight:800}
/* the serial column: present on every table so a row can be called out by number
   in a meeting, narrow and quiet enough to stay out of the way */
th.sl,td.sl{width:1%;white-space:nowrap;text-align:right;padding-right:10px;
  color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
td.sl{font-size:11.5px}
th.sl{font-size:10px}
/* the heading above each band, tinted and washed the same way as its column */
.mtx th.bd0{color:var(--b0);background:var(--b0bg)}
.mtx th.bd1{color:var(--b1);background:var(--b1bg)}
.mtx th.bd2{color:var(--b2);background:var(--b2bg)}
.mtx th.bd3{color:var(--b3);background:var(--b3bg)}
.mtx tbody tr:hover td{background:#f6f9fe}
.mtx tfoot td{background:#f7fafd}
.mtx th{font-size:10px;letter-spacing:.3px;padding:7px 8px;color:#5b6b80}
.mtx td{padding:7px 10px;font-size:12.5px}
.mtx .grp{font-weight:700}
/* A scrolling matrix keeps its heading visible. z-index has to clear the body
   cells, which paint their own backgrounds (zebra, hover, band tint) — at the
   same level a row scrolling past shows through the heading. */
.mtxwrap thead th{position:sticky;top:0;z-index:5;background:#f2f6fb;
  box-shadow:inset 0 -1px 0 var(--line)}
.mtxwrap tbody td,.mtxwrap tfoot td{position:relative;z-index:0}

/* A cross-tab is read by comparing figures, which means the columns want to sit
   near each other, not be flung to opposite edges of a 1500px card. The label
   column takes what it needs and the count columns stay narrow; the table only
   grows to the full width when it has enough columns to earn it. */
/* width:max-content, not auto — an auto table fills its container and the label
   column swallows all the slack, flinging the counts to the opposite edge. */
.mtx.xtab{width:max-content;max-width:100%}
.mtx.xtab th.num{white-space:normal;line-height:1.25;max-width:96px;vertical-align:bottom}
.mtx.xtab th:first-child,.mtx.xtab td:first-child{text-align:left;white-space:nowrap;padding-right:22px}
.mtx.xtab th.num,.mtx.xtab td.num{width:1%;white-space:nowrap;padding-left:18px}
.mtx.xtab tfoot td{border-top:2px solid var(--line)}

/* ---- long lists ---- */
.list th{font-size:10px;letter-spacing:.3px;padding:7px 8px;color:#5b6b80}
.list td{padding:7px 9px;font-size:12.5px}
.list tbody tr:hover td{background:#f6f9fe}
.wrapcell{white-space:normal;min-width:150px}
.nw{white-space:nowrap}

/* ---- the number that opens the reason editor ---- */
.appbtn{background:none;border:0;padding:0;font:inherit;font-weight:650;color:var(--brand2);
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.appbtn:hover{color:var(--brand)}
td.reason{min-width:160px;font-size:11.5px}
td.reason .norsn{color:var(--muted);font-style:italic}
td.reason .rmeta{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}

/* ---- the editing strip, opened under the row it belongs to ----
   Two fields and a Save, nothing else: everything about the complaint is already
   in the row above it. The inner box is stuck to the left edge of the scroller and
   sized to the visible width, so Save never ends up off the side of a wide table. */
tr.rsnedit>td{background:#f4f8fd;padding:0;border-bottom:2px solid var(--line)}
.rsnwrap{position:sticky;left:0;width:var(--drillw,100%);max-width:100%;
  padding:12px 14px;box-sizing:border-box}
.rsnacts{display:flex;gap:8px;align-items:center;flex-basis:100%;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line)}
.rsnbox{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;text-align:left}
.rsnbox label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.rsnbox label.grow{flex:1;min-width:220px}
.rsnbox select,.rsnbox input{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:inherit;text-transform:none;letter-spacing:0}
.rsnfoot{margin-right:auto;font-size:11px;color:var(--muted)}

/* ---- drill-down modal: search on top, downloads at the foot ---- */
.ovl .modal-b{padding:0;display:flex;flex-direction:column;min-height:0}
.ovl .modal-b .srch{display:flex;gap:8px;align-items:center;padding:11px 20px;
  background:var(--panel,#f7fafd);border-bottom:1px solid var(--line)}
.ovl .modal-b .srch input{border:1px solid var(--line);border-radius:8px;padding:8px 11px;
  font-size:13px;font-family:inherit;background:#fff;color:inherit}
.ovl .modal-b #sec-modal{overflow:auto;padding:0 20px;flex:1;min-height:0}
/* The heading stays put while the list scrolls under it — on a list of two
   hundred you otherwise lose which column you are reading a third of the way
   down. The search bar above and the download bar below are already outside the
   scroller, so they never move. */
.ovl .modal-b #sec-modal thead th{position:sticky;top:0;z-index:2;
  background:#f2f6fb;box-shadow:inset 0 -1px 0 var(--line)}
.ovl .modal-f{display:flex;gap:8px;align-items:center;padding:10px 20px;
  border-top:1px solid var(--line);background:var(--panel,#f7fafd)}
.ftnote{margin-right:auto;font-size:11px;color:var(--muted)}

/* ==========================================================================
   Responsive — tablets and phones.
   The dashboard is laid out for a wide meeting screen; on a narrow one the wide
   cross-tabs have to scroll sideways *inside their card* rather than dragging the
   whole page with them, and the drill-down modal — the table you get after
   clicking a number — has to take the whole screen instead of floating in a
   margin it cannot afford.
   ========================================================================== */
@media(max-width:820px){
  .wrap{padding:14px}
  .appbar .in{padding:10px 14px;gap:10px}
  .appbar b{font-size:14px}
  /* the stream nav scrolls sideways as one strip instead of wrapping to two rows */
  .streamnav .in{padding:0 8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .streamnav a{padding:12px 12px;white-space:nowrap}
  .page-h h1{font-size:18px}
  .card{padding:14px}
  .toolbar{padding:10px 12px;gap:8px}
  .toolbar input[type=search]{min-width:0;flex:1 1 100%}
  .toolbar select{flex:1 1 45%}
}

@media(max-width:560px){
  body{font-size:13px}
  .wrap{padding:10px}
  .appbar .sub{display:none}          /* the strapline eats a whole line on a phone */
  .appbar .who{display:none}
  .page-h{gap:10px}
  .page-h .no-print{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .page-h .no-print .btn{flex:1 1 auto;text-align:center}

  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:12px 13px}
  .kpi .n{font-size:22px}

  .choice{padding:20px 18px}
  .choice .nums{gap:16px}
  .choice .nums div .n{font-size:22px}

  /* Every abstract scrolls sideways inside its own card; the count columns keep
     their natural width so the figures stay readable instead of being crushed to
     fit. Cards that already carry a scroller (.mtxwrap, the register) are covered
     by min-width on the table itself. */
  .card{overflow-x:auto}
  .mtx,.list{min-width:max-content}
  .mtx td,.mtx th{padding:6px 7px}
  .mtx td{font-size:12px}
  .toolbar select{flex:1 1 100%}

  /* The drill-down modal takes the whole screen: a dialog floating in a 16px
     margin has almost nothing left for the table it exists to show. */
  .ovl{padding:0}
  .ovl .modal{width:100%;height:100vh;max-height:100vh;border-radius:0}
  .ovl .modal-h{padding:12px 14px}
  .ovl .modal-b .srch{padding:10px 14px;flex-wrap:wrap}
  .ovl .modal-b .srch input{flex:1 1 100%}
  .ovl .modal-b #sec-modal{padding:0 12px}
  .ovl .modal-f{flex-wrap:wrap;padding:10px 14px}
  .ovl .modal-f .ftnote{flex-basis:100%;margin-bottom:4px}
  .ovl .modal-f .btn{flex:1 1 auto}
}

@media print{
  .no-print{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid var(--line);break-inside:avoid}
}