/* Lemcon Maintenance — app.css v23, 2026-09-24.
   Tokens and components copied from the Lemcon Web Handbook 01 to 04 so the
   site sits beside lemcon.asia. Keep every token name. Bump ASSET_VERSION
   in private/inc/version.php in the same edit that changes this file. */

:root {
  --navy:      #10233f;
  --navy-2:    #1b3a68;
  --accent:    #2e8fe0;
  --ink:       #16202e;
  --muted:     #66748a;
  --line:      #e2e7ef;
  --bg:        #f4f6fa;
  --card:      #ffffff;
  --radius:    14px;
  --shadow:    0 1px 2px rgba(16,35,63,.06), 0 8px 24px rgba(16,35,63,.06);
  --shadow-lg: 0 12px 40px rgba(16,35,63,.16);
  --t7:        #2e75b6;   /* kept by name; here the customer accent */
  --t8:        #bf8f00;   /* kept by name; here the default card edge */
  /* Philippine flag, added 2026-09-07 at Lorcan's request. A brand motif
     only: the stripe under the top bar and on the sign-in card. Never a
     status colour; status stays with the four meanings in Handbook 04. */
  --ph-blue:   #0038A8;
  --ph-yellow: #FCD116;
  --ph-red:    #CE1126;
  --ph-stripe: linear-gradient(90deg, var(--ph-blue) 0 33.4%, var(--ph-red) 33.4% 66.7%, var(--ph-yellow) 66.7% 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 14.5px; line-height: 1.5; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* ---------- Top bar (Handbook 02 section 3) ---------- */
.topbar {
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; padding: 0 16px; display: flex; align-items: center; gap: 14px;
  height: 62px; position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(16,35,63,.18);
  border-bottom: 3px solid transparent;
  border-image: var(--ph-stripe) 1;
}
.brand .name  { font-size: 15.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; }
.brand .strap { font-size: 11px; opacity: .7; }
.nav { display: flex; gap: 2px; margin-left: 8px; min-width: 0; flex: 0 1 auto; }
.nav a {
  color: rgba(255,255,255,.78); padding: 8px 11px; border-radius: 9px;
  font-size: 13px; font-weight: 500; flex: none; white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.nav a.on    { background: rgba(0,0,0,.28); color: #fff; box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.spacer { margin-left: auto; }
.region-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .4px;
}
.region-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.who { text-align: right; line-height: 1.25; }
.who .n { font-size: 13px; font-weight: 600; }
.who .r { font-size: 11px; opacity: .72; }
.who .r a { color: #fff; text-decoration: underline; }

/* 1499 until 2026-09-29. The Map link, CR-008, left a person holding every
   menu with a nav that scrolled sideways from 1500 to 1650 px, so the bar
   takes its second row below 1650 px. */
@media (max-width: 1649px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 9px 16px 7px; row-gap: 5px; }
  .nav { order: 3; flex: 0 0 100%; width: 100%; margin-left: 0; }
}
@media (max-width: 1560px) { .brand .strap { display: none; } .topbar { gap: 10px; } }
@media (max-width: 700px)  { .topbar { padding: 6px 10px; } .nav a { padding: 7px 9px; } .who .r span.roles { display: none; } }

/* ---------- Wrap and page head ---------- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 22px 22px 60px; }
@media (max-width: 700px) { .wrap { padding: 14px 14px 40px; } }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; letter-spacing: -.3px; }
.page-head p  { color: var(--muted); font-size: 13px; margin: 0; }

/* ---------- Cards (Handbook 03 section 1) ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 16px 18px 0; }
.card .body { padding: 16px 18px 18px; }
.card .body.tight { padding: 0; }
.body.empty h3 { font-size: 15px; margin-bottom: 4px; }
.body.empty p  { color: var(--muted); margin: 0; max-width: 60ch; }

.stack { display: grid; grid-template-columns: 1fr; gap: 16px; }   /* site access cards, one under the other: the windows table needs the full width. 2026-09-08 */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1200px) { .two { grid-template-columns: 1fr; } }   /* two tables side by side need the room; below this they stack. 2026-09-08 */

/* ---------- KPIs ---------- */
/* ---------------------------------------------------------------------------
   THE CUSTOMER PORTAL. Stage 7, 2026-09-12, spec N10. This is the screen AC
   Mobility and Shell form their opinion of Lemcon on, so it carries more of
   the house than a staff register does: the Eagle mark, the flag stripe, a
   light ground and larger type.

   Three rules hold it in check. Red keeps its one meaning, CR-001, so nothing
   here draws red to say a ticket is in order. The mark sits on a light panel
   only, because the white inside the artwork was cut with the background,
   N10.5. And the same page has to read at 375 px, so the ticket table turns
   into cards below 700 px rather than scrolling sideways, N10.2.
   --------------------------------------------------------------------------- */
.phero { position: relative; overflow: hidden; background: var(--card);
         border: 1px solid var(--line); border-radius: var(--radius);
         box-shadow: var(--shadow); margin-bottom: 18px; padding: 22px 24px; }
.phero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
                 background: var(--ph-stripe); }
.phero .eagle { position: absolute; right: -8px; bottom: -14px; width: 190px; opacity: .13;
                pointer-events: none; }
.phero .who { display: flex; align-items: center; gap: 12px; }
.phero .who img { width: 46px; height: auto; }
.phero .cust { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ph-blue); font-weight: 700; }
.phero h1 { margin: 6px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: -.4px; color: var(--ink); }
.phero p { margin: 8px 0 0; font-size: 15px; color: var(--muted); max-width: 60ch; }
.phero .acts { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* A count row that reads at a glance and wraps on a phone. */
.pstat { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.pstat div { flex: 1 1 140px; background: var(--card); border: 1px solid var(--line);
             border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.pstat b { display: block; font-size: 24px; line-height: 1.1; color: var(--ink); }
.pstat span { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }

/* The ticket list as cards on a phone. Each cell carries its own label, so a
   narrow screen reads top to bottom instead of sideways. */
@media (max-width: 700px) {
  .area-customer .data.list thead, .area-customer .data.list tr:first-child { display: none; }
  .area-customer .data.list, .area-customer .data.list tbody,
  .area-customer .data.list tr, .area-customer .data.list td { display: block; width: 100%; }
  .area-customer .data.list tr { border: 1px solid var(--line); border-radius: var(--radius);
                                 margin: 0 0 12px; padding: 12px 14px; background: var(--card); }
  .area-customer .data.list td { border: 0; padding: 3px 0; }
  .area-customer .data.list td::before { content: attr(data-l); display: block; font-size: 11px;
        text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
  .area-customer .data.list td:first-child { font-size: 17px; }
  .area-customer .phero h1 { font-size: 24px; }
  .area-customer .phero .eagle { width: 130px; opacity: .1; }
}

/* THE URGENT BANNER. Stage 7, 2026-09-12, spec N5. It draws above the page
   head on staff pages and only when something is in it. Flag red on a pale
   ground, because every one of its four conditions is a thing that went wrong
   or ran out, which is what red means everywhere in this system, CR-001. */
.urgent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
          background: #fdeaec; border: 1px solid #f3b8be; border-left: 4px solid var(--ph-red);
          border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; }
.urgent b { font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: #8d1520; }
.urgent a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
            color: #8d1520; text-decoration: none; border-bottom: 1px solid transparent; }
.urgent a:hover { border-bottom-color: #8d1520; }
.urgent .n { display: inline-block; min-width: 20px; text-align: center; font-weight: 700;
             background: var(--ph-red); color: #fff; border-radius: 10px; padding: 0 6px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
       box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.kpi.green::after { background: #00B050; }
.kpi.amber::after { background: #FFC000; }
.kpi.grey::after  { background: #98a3b5; }
.kpi.red::after   { background: var(--ph-red); }   /* fail: blocked, overdue. CR-001 */
.kpi .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.kpi .value { font-size: 30px; font-weight: 700; letter-spacing: -1px; margin-top: 4px; }
.kpi .sub   { font-size: 12px; color: var(--muted); }

/* ---------- Tables (Handbook 03 section 4) ---------- */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: 0 1px 0 var(--line);
}
table.data td { padding: 8px 10px; border-bottom: 1px solid #f0f3f8; vertical-align: top; }
table.data tr:hover td { background: #f8fafd; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.muted { color: var(--muted); }

/* ---------- Chips ---------- */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
        border: 1px solid rgba(0,0,0,.18); }
.licensechip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 9px; border-radius: 20px;
               background: #eef2f8; color: #4a5262; cursor: default; height: 24px; line-height: 22px;
               border: 1px solid #c9d2df; box-sizing: border-box;
               width: 170px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Buttons ---------- */
/* BUTTON RULES, decided by Lorcan 2026-09-07, apply on every page:
   1. One size: 38px high, at least 140px wide, text centred. .small is the
      in-table size, 30px by 90px.
   2. Every button has a 1px border so the edge is sharp.
   3. A button that navigates (an <a>) is RAISED: shadow under it.
   4. A link button for the current page or the selected row is SUNKEN:
      inset shadow, darker fill. The nav uses the same idea. */
.btn { border: 1px solid #0b1a30; border-radius: 10px; height: 38px; min-width: 140px; padding: 0 18px; font: inherit;
       font-size: 13.5px; font-weight: 600; line-height: 36px; text-align: center; white-space: nowrap; cursor: pointer;
       background: var(--navy); color: #fff; transition: background .15s ease, box-shadow .15s ease; display: inline-block;
       vertical-align: middle; box-sizing: border-box; }
.btn:hover    { background: var(--navy-2); text-decoration: none; }
.btn:disabled { background: #c3cbd8; border-color: #b0b9c8; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--navy); border-color: #b8c2d2; }
.btn.ghost:hover { background: #eef2f8; }
.btn.danger { background: #b0231f; border-color: #8a1b18; }
.btn.wide { width: 100%; }
.btn.small { height: 30px; min-width: 90px; padding: 0 12px; font-size: 12.5px; line-height: 28px; border-radius: 8px; }
a.btn { box-shadow: 0 2px 0 rgba(16,35,63,.28), 0 3px 6px rgba(16,35,63,.12); }
a.btn.ghost { box-shadow: 0 2px 0 #b8c2d2, 0 3px 6px rgba(16,35,63,.08); }
a.btn:active, a.btn.on { box-shadow: inset 0 2px 4px rgba(16,35,63,.35); transform: translateY(1px); }
a.btn.ghost.on { background: #dde5f0; color: var(--navy); }
a.btn.on:hover { background: #dde5f0; }
.btn.ghost.warn { color: #b0231f; border-color: #d99c96; }

/* ---------- Inputs ---------- */
.input, select.input {
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px; font: inherit;
  font-size: 13.5px; color: var(--ink); min-width: 150px; outline: none; width: 100%;
}
.input:focus, .input:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: inset 0 2px 4px rgba(16,35,63,.22), 0 0 0 3px rgba(46,143,224,.15);
  background: #f4f7fb; }   /* the chosen field sits sunken, like a pressed button. Lorcan, 2026-09-08 */
textarea.input { min-height: 84px; resize: vertical; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: 5px; }
/* A HELP LINE READS THE SAME WHEREVER IT DRAWS. Until 2026-09-11 .help was
   styled only inside a field and inside a card head, so a help paragraph in a
   card body fell through both and drew as full-size body text. Twenty-two of
   them across the site. A body with class tight carries no padding, because a
   table brings its own, so those lines also sat flush against the card edge.
   Found by Lorcan on the Stage 6 screens. One rule, one place. */
.help { font-size: 12px; color: var(--muted); line-height: 1.5; }
.card .body.tight > p { padding: 0 18px 14px; }
.card .body.tight > p:first-child { padding-top: 14px; }
.field .help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.checks label { display: block; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 4px 0; }
.checks input { margin-right: 8px; }
/* THE ? TIP. CR-007, 2026-09-28: a details element beside the label, so a
   click or a tap opens it and a second one closes it. Until this date it was
   a hover title only, and a click did nothing. Drawn by f_head() in
   form.php and by no page. */
.field .lrow { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; position: relative; }
.field .lrow label { margin-bottom: 0; }
.field details.tip { display: flex; line-height: 1; position: static; }   /* flex, so the row stays the height of a plain label and the columns line up */
.field details.tip summary { list-style: none; display: block; width: 15px; height: 15px; line-height: 13px; border-radius: 50%;
  font-size: 10.5px; text-align: center; border: 1px solid #c9d2df; color: var(--muted); cursor: pointer; user-select: none; }
.field details.tip summary::-webkit-details-marker { display: none; }
.field details.tip summary:hover, .field details.tip[open] summary { border-color: var(--accent); color: var(--accent); }
.field details.tip summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field details.tip .tipbox { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; display: block;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 8px 10px; font-size: 12.5px; line-height: 1.45; text-transform: none; letter-spacing: 0; max-width: 360px; }

/* THE HELP LAYERS. Stage 8, 2026-09-12, ADR-007 and spec H3. Drawn by
   help_block() in layout.php and by no page, so these rules stand once.

   The block is threaded in after the page title, which puts it inside the
   page-head flex row. Order rather than DOM position decides where each
   piece lands: the button goes last on the top line, the line and the panel
   drop to their own full-width rows below it. So a page keeps its own
   buttons exactly where they were. */
.page-head .helpbtn { order: 1; align-self: center; margin-left: auto; }
.page-head .isfor { flex-basis: 100%; order: 2; font-size: 13px; color: var(--muted); margin: 0; }
.page-head .steps { flex-basis: 100%; order: 3; margin-bottom: 2px; }
.page-head .helplink { flex-basis: 100%; order: 4; margin-bottom: 0; }
.page-head .helppanel { flex-basis: 100%; order: 5; }
.isfor { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.helppanel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 12px 0 0; }
.helppanel .pin { padding: 14px 18px 16px; max-width: 78ch; }
.helppanel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 14px 0 6px; }
.helppanel .first { font-size: 14px; margin: 0; }
.helppanel ul { margin: 0; padding-left: 18px; }
.helppanel li { font-size: 13px; color: var(--ink); line-height: 1.6; margin: 4px 0; }
.helppanel p { font-size: 13px; color: var(--ink); line-height: 1.6; margin: 0 0 8px; }

/* The phone and the three doors carry their lines OPEN, H4.1: a thumb in the
   sun does not hunt, and somebody who cannot sign in cannot open a panel to
   find out why. Small, grey, and out of the way of the buttons. */
.steps { margin: 8px 0 12px; padding-left: 18px; }
.steps li { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 3px 0; }
.helplink { display: inline-block; font-size: 12.5px; color: var(--ph-blue); text-decoration: underline; margin-bottom: 10px; }
.helppanel h3:first-of-type { margin-top: 10px; }

/* THE MANUAL PAGE. Stage 8, H9.1: three books, generated from Help.php at
   read time. One column, measured for reading rather than for filling the
   screen: past about eighty characters an eye loses the line. */
.manual { max-width: 96ch; }
.manual .lead { font-size: 14px; line-height: 1.65; margin: 0 0 12px; }
.manual .toc { margin: 0; padding-left: 22px; }
.manual .toc li { font-size: 13.5px; margin: 5px 0; }
.manual .toc a { color: var(--ph-blue); }
.manual h2.chap { font-size: 19px; letter-spacing: -.2px; margin: 26px 0 8px; }
.manual .scr { margin-bottom: 14px; }
.manual .scr h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin: 14px 0 6px; }
.manual .scr .isfor { margin-bottom: 10px; }
.manual .scr p, .manual .scr li { font-size: 13.5px; line-height: 1.65; }
.manual .scr ul { margin: 0; padding-left: 20px; }
.manual .scr li { margin: 4px 0; }
.manual img.shot { display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 8px; margin: 10px 0 4px; }

.signin .isfor { text-align: left; margin-bottom: 4px; }
.signin .helplink { margin: 0 0 10px; }
.signin .helppanel { box-shadow: none; margin-bottom: 12px; }
.signin .helppanel .pin { padding: 12px 14px; }
.input.masked { -webkit-text-security: disc; }   /* site secret entry: masked, never a password field */
/* CR-004, Lorcan 2026-09-10: the field a refusal names draws a red outline
   until the person changes it; the message draws inside the card, under
   its head, and the page scrolls there. */
.input.bad { border-color: var(--ph-red); box-shadow: 0 0 0 3px rgba(206,17,38,.15); }

/* Checklist on the job page. Stage 5, 2026-09-10. One line per item: what is
   checked, the answer, a note. On a phone the three stack, so a thumb can
   reach every control. */
.clsection { margin: 12px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.clitem { display: grid; grid-template-columns: 1fr 140px 200px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.clitem .cltext { font-size: 14px; }
.clitem .clreq { font-size: 11px; color: var(--ph-red); margin-left: 6px; }
.clitem.cl-need { background: #fdf8f8; }
/* Stage 6, 2026-09-10. A toolkit line answers three questions and carries an
   explanation, and a spares line carries a serial each way, so both need more
   columns than a checklist line. Auto keeps them even; the phone still
   stacks. */
.clitem.wide { grid-template-columns: 1fr 90px 130px 150px 1fr; }
.clitem .clnote { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  .clitem, .clitem.wide { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
}
.card .body > .flash, .card > .flash { margin: 0 0 14px; }
.card > .flash { margin: 12px 18px 0; }
.input.saving { border-color: #EF9F27; }
.input.saved  { border-color: #639922; }

/* ---------- List + side panel (users, later sites and contacts) ----------
   Redesign 2026-09-07 after the first live users screen scrolled sideways.
   The list gets the width; one 380px panel edits the selected row. */
.split { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card.panel .head { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.card.panel .head h2 { padding: 0; margin-right: auto; }
.card.panel .body { padding-top: 12px; }
.formgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.formgrid .span2 { grid-column: span 2; }
@media (max-width: 900px) { .formgrid { grid-template-columns: 1fr; } .formgrid .span2 { grid-column: auto; } }

table.list td { white-space: nowrap; vertical-align: middle; }
table.list td.chips { white-space: normal; }
table.list tr.sel td { background: #eef5fd; }
table.list .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
table.list td.chips { padding-top: 6px; padding-bottom: 6px; }
table.list .licensechip { margin: 2px 6px 2px 0; }
.page-head .btn { align-self: center; }

.rolegrid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 3px 14px; }
.rolegrid.two { grid-template-columns: repeat(2, 1fr); }
.rolegrid.three { grid-template-columns: repeat(3, 1fr); }
.rolegrid label { font-size: 13px; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.rolegrid input { margin-right: 6px; }
.field .static { padding: 9px 0; font-size: 13.5px; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { display: inline; }
.rule { border-top: 1px solid var(--line); margin: 16px 0; }

/* Filter bar: selects and a search on one line, wrapping on a phone. */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filterbar .input { width: auto; min-width: 160px; }
.filterbar input.input { flex: 1 1 200px; }
table.data td .input { padding: 6px 9px; height: 32px; font-size: 13px; }
table.data td select.input { height: 32px; }
.card.panel .head .help { font-size: 12px; color: var(--muted); }

/* ---------- Flash and warnings (Handbook 04 section 6) ---------- */
.flash { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; }
.flash.ok     { background: #eef7e9; border: 1px solid #c7e2b9; color: #2f5a1a; }
.flash.warn   { background: #fff8e6; border: 1px solid #f0d089; color: #6b4e05; }
.flash.danger { background: #fdf1f0; border: 1px solid #f0cbc8; color: #b0231f; }

/* ---------- Sign-in card ---------- */
.signin { max-width: 400px; margin: 60px auto 0; }
.signin .card { padding: 26px 26px 22px; position: relative; overflow: hidden; }
.signin .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ph-stripe); }
.signin h1 { font-size: 20px; letter-spacing: -.3px; margin-bottom: 4px; }
.signin p.sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.signin .area { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }

/* ---------- Field area: phone first ---------- */
body.area-engineer .wrap { max-width: 640px; }
/* Field buttons: taller for a thumb, sized explicitly so they never fight the
   38px site rule. Bug seen on a phone 2026-09-07: padding on a fixed-height
   button pushed the label out of view. */
body.area-engineer .btn { height: 46px; line-height: 44px; padding: 0 18px; font-size: 15px; }
/* A full-width phone button may carry a long label. It wraps inside the box
   rather than running past its edge: "Paper sheet, for a phone that cannot be
   used" overran at phone width, found by Lorcan on the live check 2026-09-24. */
body.area-engineer .btn.wide { height: auto; min-height: 46px; line-height: 1.3; padding: 11px 18px; white-space: normal; }
body.area-engineer .input { padding: 12px 14px; font-size: 15px; }

/* ---------- Phone: tables stack (docs/07, no sideways scroll) ----------
   Lorcan, 2026-09-08, check list line 13: a six-column table cannot fit
   375px. Below 700px every data table becomes a list of small cards: the
   header row goes, each row is a card, each cell is a line, the last cell
   (actions) sits at the foot. Inline add-rows and edit-rows stack the
   same way, so a form in a table still works one field per line. */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .wrap { max-width: 100vw; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead, table.data tr:first-child:has(th) { display: none; }
  table.data tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; background: var(--card); }
  table.data td { border: 0; padding: 3px 0; text-align: left !important; }
  table.data td:empty { display: none; }
  table.data td .input { width: 100%; }
  table.data td .btn.small { min-width: 90px; margin: 4px 6px 0 0; }
  table.data tr:hover td { background: transparent; }
  .chips { white-space: normal; }
  .licensechip { width: auto; max-width: 100%; padding: 0 12px; }
  .filterbar .input, .filterbar input.input { width: 100%; min-width: 0; flex: 1 1 100%; }
  .filterbar .btn, .page-head .btn { width: 100%; }
  /* Stage 8: on a phone the buttons stack full width, so the one line saying
     what the page is for reads above them rather than under three blocks of
     dark blue. Order zero puts it straight under the title. */
  .page-head .isfor, .page-head .steps, .page-head .helplink { order: 0; }
  .formgrid { grid-template-columns: 1fr !important; }
  .card.panel .head { flex-wrap: wrap; }
  .card.panel .head .btn { flex: 1 1 auto; }
  .kpi .value { font-size: 24px; }
}

/* Phone, second pass, 2026-09-09, Stage 3 line 13: the ticket page pushed
   sideways. Inline forms in a panel head carry fixed-width fields; timeline
   cells carry fixed widths; long words in a message have nowhere to break.
   Below 700px every head form stacks full width, every fixed width yields,
   and long text wraps anywhere. */
@media (max-width: 700px) {
  .card.panel .head { flex-direction: column; align-items: stretch; }
  .card.panel .head h2 { margin-right: 0; }
  .card.panel .head form { display: flex !important; flex-wrap: wrap; gap: 6px; width: 100%; }
  .card.panel .head form .input, .card.panel .head form .btn { width: 100% !important; min-width: 0; flex: 1 1 100%; }
  .card.panel .head > .btn, .card.panel .head > .help { width: 100%; }
  table.data td[style*="width"], table.data th[style*="width"] { width: auto !important; }
  table.data td[style*="nowrap"] { white-space: normal !important; }
  .static, table.data td, .kpi .value, .page-head h1 { overflow-wrap: anywhere; }
  .kpi .value .chip { white-space: normal; }
  .formgrid .static { overflow-wrap: anywhere; }
}

/* The portal hero carries the pieces itself, so they are styled against the
   hero rather than against a page-head row. Stage 8, 2026-09-12. */
.phero .isfor { color: #2c4a73; margin: 8px 0 0; font-size: 14px; }
.phero .acts .helpbtn { margin-left: 0; }
.phero + .helppanel { margin: -4px 0 16px; }

/* ---------- Stage 9, the preventive checklist, 2026-09-23 ----------
   Phone: one continuous form, three thumb buttons per line, P14.4, P14.20.
   Colours keep the four meanings: green done for Pass, flag red for Fail and
   for an answer that did not save (Q7), grey for Not checked. CR-001. */
/* An element marked hidden stays hidden whatever display its class gives it.
   Without this the reason buttons, the re-torque tick and the no-access box
   drew on every line, found on the 375 px look on 2026-09-23. */
[hidden] { display: none !important; }
.cl { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cl:last-child { border-bottom: 0; }
.cl-top { display: flex; gap: 8px; align-items: baseline; }
.cl-code { flex: 0 0 auto; min-width: 34px; font-weight: 700; font-size: 13px; color: var(--navy); }
.cl-text { flex: 1 1 auto; font-size: 15px; line-height: 1.35; }
.cl-opt { font-size: 11px; color: var(--muted); }
.cl-mark { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cl[data-save="waiting"] .cl-mark, .cl[data-save="refused"] .cl-mark { color: #CE1126; font-weight: 600; white-space: normal; }
.cl-guide { margin: 0 0 8px; padding: 8px 10px; background: #eef3fa; border-radius: 8px; font-size: 13px; color: var(--ink); }
.cl-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.cl-btns.stack { grid-template-columns: 1fr; }
.cl-btns button, .cl-reasons button { min-height: 48px; border: 1px solid #b8c2d2; border-radius: 10px; background: #fff; color: var(--navy);
  font: inherit; font-size: 15px; font-weight: 600; padding: 6px 8px; cursor: pointer; }
.cl-btns.stack button { text-align: left; padding: 10px 14px; }
.cl-btns button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-btns button.pfn-pass.on { background: #00B050; border-color: #00953f; }
.cl-btns button.pfn-fail.on { background: #CE1126; border-color: #a50e1f; }
.cl-btns button.pfn-nc.on   { background: #808080; border-color: #6b6b6b; }
.cl-btns button:disabled, .cl-reasons button:disabled { opacity: .55; cursor: not-allowed; }
.cl-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cl-reasons .help { grid-column: 1 / -1; margin: 0; }
.cl-reasons button { min-height: 44px; font-size: 13.5px; font-weight: 500; text-align: left; }
.cl-reasons button.on { background: #808080; border-color: #6b6b6b; color: #fff; }
.cl-extra { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.cl-extra input { width: 22px; height: 22px; }
.cl-notebox { margin-top: 8px; }
.cl-notebox summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cl-notebox textarea { margin-top: 6px; width: 100%; }
.cl input.cl-note { margin-top: 10px; width: 100%; }
.cl-noaccess { margin-top: 10px; display: grid; gap: 8px; }
.cl-said:empty { display: none; }
.cl-record { margin: 0 0 6px; }
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }

/* Desktop checking view, P14.25: defect list first, then framed boxes three
   wide, two then one on narrower screens. Red marks Fail and nothing else. */
.clgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (max-width: 1100px) { .clgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .clgrid { grid-template-columns: 1fr; } }
.clbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.clbox h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.clrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.clrow .code { font-weight: 700; color: var(--navy); }
.clrow .ans { white-space: nowrap; font-weight: 600; }
.clrow .ans.fail { color: #CE1126; }
.clrow .ans.nc { color: #808080; }
.clrow .sub { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.clrow .by { grid-column: 2 / -1; font-size: 11px; color: var(--muted); }
.clrow .assist { display: flex; gap: 4px; grid-column: 2 / -1; flex-wrap: wrap; }
.clrow .assist button { height: 28px; min-width: 64px; border: 1px solid #b8c2d2; border-radius: 7px; background: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.clrow .assist button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.clrow .assist select, .clrow .assist input { height: 28px; font: inherit; font-size: 12px; }
/* CR-018, 2026-10-02: the resolve line under a defect takes the width. */
.clrow .assist input[name="dnote"] { flex: 1 1 220px; min-width: 0; }

/* CR-018: the action row under each site card on the Defects tab. Three
   groups side by side on a desk, stacked on a phone. */
.defect-acts { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; border-top: 1px solid var(--line); }
.defect-act { display: flex; gap: 6px; flex: 1 1 360px; align-items: center; min-width: 0; flex-wrap: wrap; }
.defect-act .input { flex: 1 1 160px; min-width: 120px; }
.defect-act select.input[name="priority"] { flex: 0 0 auto; width: auto; }
.defect-act .btn { white-space: nowrap; }
table.defects td { white-space: normal; overflow-wrap: anywhere; }

/* ---------- The site map, CR-008 and CR-009, 2026-09-29. Spec docs/specs/map.md ----------
   The T7 layout, MAP3: a top bar with the grouping switch and Find, the map
   across the full width, two panels floating over it and folded by their
   own buttons. The pin is HTML, Handbook 06 section 5: a state change is a
   class change and no image file travels. */
.maptools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 14px; }
.maptools .mapcheck { font-size: 14px; font-weight: 600; }
.mapfind { position: relative; display: flex; gap: 8px; align-items: center; margin-left: auto; }
.maptools .helpbtn { order: 0; margin: 0; }          /* CR-010: Help at the right end of the bar, beside Find */
.maptools + .helppanel { margin-top: -4px; margin-bottom: 14px; }
.mapfind .input { width: 260px; }
.mapfind-out { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1100; width: 340px; max-height: 320px; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px; }
.mapfind-out p { margin: 4px 6px; font-size: 13px; color: var(--muted); }
.mapfind-hit { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 7px;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.mapfind-hit:hover, .mapfind-hit:focus { background: var(--bg); }
.mapstage { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
#site-map { width: 100%; height: 600px; background: #eef1f5; }
.mapfold { position: absolute; top: 14px; z-index: 1001; width: 32px; height: 32px; min-width: 0; padding: 0;
  border: 1px solid var(--navy); border-radius: 8px; background: var(--navy); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; box-shadow: 0 1px 4px rgba(16,35,63,.35); }
.mapfold.left { left: 14px; }
.mapfold.right { right: 14px; }
.mapfloat { position: absolute; top: 14px; z-index: 1000; width: 300px; max-height: calc(100% - 28px); overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px; }
.mapfloat[hidden] { display: none; }
.mapfloat.left { left: 56px; }
.mapfloat.right { right: 56px; }
.maphead { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.maphead b { font-size: 14px; color: var(--ink); }
.maphead span { font-size: 12.5px; color: var(--muted); }
.maplegend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.maplegend li { display: flex; align-items: center; gap: 10px; }
.maplegend .site-pin { flex: 0 0 22px; display: flex; justify-content: center; }
.mapsum { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.mapuse { margin: 8px 0 0; }
.mapclient { padding: 6px 0; border-top: 1px solid var(--line); }
.mapclient:first-of-type { border-top: 0; padding-top: 0; }
.mapcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }
.mapcheck input { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; }
.mapcheck.project { padding-left: 24px; color: var(--ink); }
.mapcheck .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.mapmissing summary { font-size: 13px; cursor: pointer; }
.mapall { display: block; width: 34px; height: 30px; min-width: 0; padding: 0; border: 2px solid rgba(0,0,0,.2); border-radius: 4px;
  background: #fff; background-clip: padding-box; font: 700 11px/1 'Inter', system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.mapall:hover { background-color: #f4f4f4; }
.site-pin span { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%; border-width: 3px; border-style: solid;
  box-shadow: 0 0 0 1.5px rgba(11,11,11,.55); font-size: 10px; font-weight: 700; line-height: 1;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; user-select: none; }
.site-pin.st-none span { width: 12px; height: 12px; border-width: 1.5px; box-shadow: 0 0 0 1px rgba(11,11,11,.4); }
.site-cluster span { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 4px solid #8A93A2;
  box-shadow: 0 1px 4px rgba(16,35,63,.35); font-size: 12px; font-weight: 700; color: var(--navy); }
.pincard { font-size: 13px; line-height: 1.45; min-width: 160px; }
.pincard b { display: block; font-size: 14px; color: var(--ink); }
.leaflet-container .leaflet-control-attribution { display: block !important; font-size: 11px; }
@media (max-width: 700px) {
  .mapfind { margin-left: 0; width: 100%; }
  .maptools .helpbtn { width: 100%; }
  .mapfind .input { width: auto; flex: 1 1 auto; min-width: 0; }
  .mapfind .btn { width: auto; min-width: 90px; }
  .mapfind-out { width: 100%; }
  .mapfloat { width: auto; }
  .mapfloat.left { right: 14px; }
  .mapfloat.right { left: 14px; }
}
table.list .sub.note { white-space: normal; max-width: 46ch; color: var(--ink); }   /* CR-008: the booking or the reason under a vicinity site, wrapping, 2026-09-29 */

/* ---------- THE COMPACT TOP, CR-013, ADR-012, 2026-10-01 ----------
   Lorcan on the live Sites page: "Make the whole thing smaller ... do this
   everywhere and not be wasting precious real estate at the top of every
   form." Staff pages only; the portal and the phone keep their heads.
   help_inject() places the pieces in the row; this block sizes them. */
body.area-staff .wrap { padding-top: 12px; }
body.area-staff .page-head { align-items: center; gap: 10px; margin-bottom: 10px; min-height: 38px; }
body.area-staff .page-head h1 { font-size: 19px; letter-spacing: -.2px; }
body.area-staff .page-head > p { font-size: 12.5px; }
body.area-staff .page-head .btn { height: 32px; line-height: 30px; min-width: 0; padding: 0 14px; font-size: 13px; border-radius: 8px; }
body.area-staff .page-head .helpbtn { order: 9; margin-left: 0; padding: 0 10px; }
body.area-staff .page-head .helppanel { order: 10; }
body.area-staff .page-head > .btn, body.area-staff .page-head > form { margin-left: 0 !important; }
body.area-staff .page-head .hacts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; flex-wrap: wrap; justify-content: flex-end; }
body.area-staff .page-head .hacts form { display: inline-flex; gap: 8px; margin: 0; }

/* The round i: TOP2 and TOP3. Hover or keyboard focus shows the sentence. */
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); color: var(--muted);
        font: italic 700 11px/1 Georgia, "Times New Roman", serif; cursor: help; user-select: none; }
.info:hover, .info:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.info .tip { display: none; position: absolute; left: -6px; top: 24px; z-index: 30; width: 280px; max-width: 80vw;
             background: var(--navy); color: #fff; font: 400 12.5px/1.45 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
             padding: 9px 11px; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,35,63,.25); text-transform: none;
             letter-spacing: 0; text-align: left; white-space: normal; }
.info:hover .tip, .info:focus .tip { display: block; }

/* The tiles in the head row: TOP3. Number beside label, stripe kept. */
body.area-staff .page-head .kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 8px; grid-template-columns: none; }
body.area-staff .page-head .kpi { display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 14px; border-radius: 10px;
                                  box-shadow: none; overflow: visible; color: var(--ink); text-decoration: none; min-width: 0; }
body.area-staff .page-head .kpi::after { border-radius: 10px 0 0 10px; }
body.area-staff .page-head .kpi .value { order: -1; font-size: 17px !important; letter-spacing: -.3px !important; margin: 0; line-height: 1.1; white-space: nowrap; }
body.area-staff .page-head .kpi .label { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; white-space: nowrap; }
body.area-staff .page-head .kpi .info { width: 16px; height: 16px; font-size: 10px; }
body.area-staff .page-head a.kpi:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(16,35,63,.08); }
body.area-staff .page-head .kpi.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

/* The filter bar: TOP5, one line on a desk screen. */
body.area-staff .card > .body:has(> .filterbar) { padding: 6px; }
body.area-staff .filterbar { flex-wrap: nowrap; gap: 6px; }
body.area-staff .filterbar .input { min-width: 0; flex: 1 1 120px; height: 32px; padding: 0 8px; font-size: 13px; }
body.area-staff .filterbar input.input { flex: 2 1 170px; }
body.area-staff .filterbar label.input { flex: 0 0 auto; white-space: nowrap; }
body.area-staff .filterbar .btn { height: 32px; line-height: 30px; min-width: 0; padding: 0 12px; font-size: 13px; border-radius: 8px; flex: none; }
body.area-staff .filterbar .clear { color: var(--muted); font-size: 13px; padding: 0 6px; white-space: nowrap; flex: none; }
body.area-staff .filterbar .clear:hover { color: var(--navy); }
@media (max-width: 1100px) { body.area-staff .filterbar { flex-wrap: wrap; } }

/* Card heads: TOP6. */
body.area-staff .card.panel .head { padding: 10px 14px 0; }
body.area-staff .card.panel .body { padding-top: 10px; }
body.area-staff .card h2 { padding: 10px 14px 0; }
body.area-staff .card .body { padding: 12px 14px 14px; }
body.area-staff .card .body.tight { padding: 0; }
body.area-staff .card.panel .head .btn { height: 32px; line-height: 30px; min-width: 0; padding: 0 14px; font-size: 13px; border-radius: 8px; }

/* Phone: the tiles take their own row under the title, three abreast. */
@media (max-width: 760px) {
  body.area-staff .page-head .kpis { order: 8; flex: 1 1 100%; margin: 0; flex-wrap: wrap; }
  body.area-staff .page-head .kpi { flex: 1 1 28%; min-width: 100px; padding: 5px 6px 5px 11px; gap: 1px;
                                    flex-direction: column; align-items: flex-start; }
  body.area-staff .page-head .kpi .value { font-size: 15px !important; }
  body.area-staff .page-head .kpi .label { font-size: 11px; white-space: normal; line-height: 1.15; }
  body.area-staff .page-head .kpi .info { display: none; }
  body.area-staff .page-head .btn { width: auto; }
  body.area-staff .page-head .hacts { order: 1; }
  body.area-staff .page-head > p { order: 7; flex-basis: 100%; }
  body.area-staff .filterbar .btn { width: auto; }
}