/* The older screens in the modern look (Leon, 26 Sept 2026: "make screens look modern").
   Screens not yet rebuilt on the designer's parts (.n5) still use the app's older names for colours and shapes. Here
   those names take the approved Charcoal palette, and the older cards, buttons, labels, pills, inputs and the page
   title bar take the designer's shapes. Nothing about how a screen works changes. The .n5 screens keep their own,
   stronger rules, so nothing here reaches them. Loaded after shell7.css. */
:root{
  /* tokens.css names */
  --navy-950:#0F1316;--navy-900:#191E22;--navy-800:#2E3439;--navy-700:#4A5157;--navy-300:#8C949B;--navy-100:#EFECE5;--navy-50:#F4F1EC;
  --coral:#E35A33;--coral-100:#FBE6DD;--paper:#F7F4F0;--ink:#191E22;--ink-2:#4A5157;--ink-3:#7A8187;--line:#E7E2DA;--line-2:#D8D1C6;--fill:#EFECE5;
  /* app.css names */
  --ink2:#4A5157;--mut:#7A8187;--line2:#D8D1C6;--hover:#F4F1EC;--sand:#EFECE5;--blush:#FBEDE7;
  --sh1:none;--ring:0 0 0 3px rgba(25,30,34,.12);--r-card:14px;--r-in:10px
}
body{background:var(--paper)}

/* cards: flat, a hairline, rounded as the designer's panels */
:where(#scApp,.misheet) .card{border-radius:14px;box-shadow:none;border-color:var(--line)}
:where(#scApp) .card > h2,:where(#scApp) .hd h2{font-size:16px;font-weight:700;letter-spacing:-.01em}
/* the small section labels: the designer's plain label, no mono font, no dot */
:where(#scApp,.misheet) .lbl{font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3)}
:where(#scApp,.misheet) .lbl::before{display:none}

/* buttons: charcoal main, white outline second, 10 px corners */
:where(#scApp,.misheet,#slip) .btn{border-radius:10px;min-height:40px;font-weight:600;box-shadow:none}
:where(#scApp,.misheet,#slip) .btn.sm{border-radius:8px;min-height:34px}
:where(#scApp,.misheet,#slip) .btn.gold{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
:where(#scApp,.misheet,#slip) .btn.gold:hover{background:var(--navy-800)}
:where(#scApp,.misheet,#slip) .btn.alt{background:#fff;color:var(--ink);border-color:var(--line-2)}
:where(#scApp,.misheet,#slip) .btn.alt:hover{background:var(--hover)}

/* pills: the designer's chips */
:where(#scApp,.misheet) .pill{border-radius:999px;height:22px;padding:0 9px;font-size:12px;font-weight:600;background:var(--fill);color:var(--ink-2)}
:where(#scApp,.misheet) .pill.ok{background:#E3F1E8;color:#1E7A4F}
:where(#scApp,.misheet) .pill.warn{background:#F6EBD3;color:#8A5A0E}
:where(#scApp,.misheet) .pill.bad{background:#F8E0DE;color:#B3261E}

/* inputs: 10 px corners, the warm hairline, the quiet focus ring */
:where(#scApp,.misheet) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:10px;border-color:var(--line-2)}
:where(#scApp,.misheet) :is(input,select,textarea):focus{box-shadow:var(--ring);border-color:var(--navy-700)}

/* the title bar every older More page gets: Back as a quiet button, the title as a page heading */
:where(#scApp) .mbar{border-bottom:0;padding:0;margin:0 0 18px;gap:14px}
:where(#scApp) .mbar .btn{min-height:36px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600}
:where(#scApp) .mbar .mbt{font-size:26px;font-weight:700;letter-spacing:-.4px;color:var(--ink)}
@media (max-width:760px){:where(#scApp) .mbar .mbt{font-size:22px}}

/* lists and empty states */
:where(#scApp,.misheet) .list .it{border-bottom-color:var(--line)}
:where(#scApp) .empty{background:var(--fill);border-radius:12px}

/* the older tap-buttons (pickers on the till and elsewhere) */
:where(#scApp) .tbtn{border-color:var(--line-2);color:var(--ink);font-weight:600}
:where(#scApp) .tbtn.on,:where(#scApp) .tbtn.gold{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* sheets (pop-ups): the designer's rounded sheet */
.misheet{border-radius:18px 18px 0 0}
@media (min-width:1024px){.misheet{border-radius:16px}}
.misheet h3{font-size:19px;font-weight:700;letter-spacing:-.2px}

/* Button groups (period, weeks): on a narrow phone they wrap to a second row instead of cutting the words off
   ("This mon", "VAT perio" at 320 px, bug found 26 Sept). */
#scApp .nvweeks button,.misheet .nvweeks button{flex:1 1 auto;min-width:auto;white-space:nowrap;padding:8px 12px}

/* The A4 documents' stylesheet (css/docs-2026.css, an unchanged copy of the shared MiDocs doc.css) names its templates
   .t1 to .t5 and gives them page padding and grids. The team list's colour dots use .t1 to .t7 for their colour, so
   some dots grew into big blobs and bars (found 26 Sept). The dots keep their own shape here. */
#scApp .dot.tone{padding:0;display:inline-block;grid-template-columns:none;flex:none}

/* Online booking's top card (rebuilt 26 Sept): state and switch, the link with Copy, one main button */
#scApp .ob7 .ob7top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
#scApp .ob7 .ob7top b{display:block;font-size:17px;font-weight:700}
#scApp .ob7 .ob7top .sub{color:var(--ink-2);font-size:13.5px;margin-top:2px}
#scApp .ob7sw{flex:none;width:52px;height:30px;border-radius:15px;border:0;background:var(--line-2);position:relative;cursor:pointer;padding:0}
#scApp .ob7sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
#scApp .ob7sw.on{background:#1E7A4F}
#scApp .ob7sw.on::after{left:25px}
#scApp .ob7link{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;background:#fff;padding:0 6px 0 12px;min-height:44px;gap:4px}
#scApp .ob7link .pre{color:var(--ink-3);font-size:14px;white-space:nowrap}
#scApp .ob7link input{flex:1;min-width:60px;border:0;min-height:40px;padding:0;margin:0;box-shadow:none;background:none;font-weight:600}
#scApp .ob7link input:focus{box-shadow:none}
#scApp .ob7link:focus-within{box-shadow:var(--ring)}
#scApp .ob7acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
#scApp .ob7acts .btn{text-decoration:none;display:inline-flex;align-items:center;gap:8px}
#scApp .ob7acts .btn svg{width:17px;height:17px}
#scApp .ob7see{font-weight:600;color:var(--ink);text-decoration:none;font-size:14px}
#scApp .ob7see:hover{text-decoration:underline}
@media (max-width:420px){#scApp .ob7link .pre{display:none}}
#scApp .ob7 .ob7top .grow{flex:1;min-width:0}
#scApp .ob7acts .btn.gold svg,#scApp .ob7acts .btn.gold svg *{fill:#fff}

/* Client messages: one row per message, its state in words and a switch (rebuilt 26 Sept) */
#scApp .suHead.cm7{display:flex;align-items:center;gap:12px;cursor:pointer}
#scApp .cm7 .cm7t{flex:1;min-width:0}
#scApp .cm7 .cm7t b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
#scApp .cm7 .cm7t small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
#scApp .cm7 .cm7chev{color:var(--ink-3);font-size:20px;line-height:1;transition:transform .15s;width:14px;text-align:center}
#scApp .suSec.open .cm7 .cm7chev{transform:rotate(90deg)}
#scApp .suSec{border-color:var(--line);border-radius:12px}