:root {
  --ink: #16191D; --ink-2: #3C444E; --muted: #5F6771; --paper: #FFFFFF; --ground: #F3F6F9;
  --sky: #EAF0F6; --sky-line: #C7D6E4; --rule: #E3E8ED; --gold: #E9C75A;
  --green: #2A7550; --green-bg: #E6F3EC; --red: #A12A2A; --red-bg: #FDECEC;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.55 Karla, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.muted { color: var(--muted); }
.hl { background: var(--gold); padding: 0 8px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.card { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 100px; font: 700 15px Manrope, sans-serif; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--sky-line); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn:focus-visible, .input:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.label { display: block; font: 700 13px Manrope, sans-serif; color: var(--ink-2); margin-bottom: 6px; }
.input { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--sky-line); border-radius: 12px; font: 400 16px Karla, sans-serif; color: var(--ink); background: var(--paper); }
.input:focus { border-color: var(--ink); outline: none; }
.code-input { font: 700 26px Manrope, sans-serif; letter-spacing: .5em; text-align: center; padding-left: .5em; height: 60px; }
.notice { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.n-bad { background: var(--red-bg); color: var(--red); }
.n-ok { background: var(--green-bg); color: var(--green); }
.n-info { background: var(--sky); color: var(--ink); }
.pill { display: inline-block; padding: 5px 11px; border-radius: 100px; font: 700 12px Manrope, sans-serif; }
.p-green { background: var(--green-bg); color: var(--green); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
@media (min-width: 900px) { .login-wrap { grid-template-columns: minmax(380px, 44%) 1fr; grid-template-rows: 1fr; } }
.login-side { background: linear-gradient(160deg, #F5F8FB 0%, #EAF0F6 60%, #DCE7F2 100%); border-right: 1px solid var(--rule); padding: 28px 20px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { .login-side { padding: 48px 56px; justify-content: space-between; } }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 56px; height: 56px; object-fit: contain; }
.brand-name { font: 800 20px/1.1 Manrope, sans-serif; }
.brand-sub { font: 700 10.5px Manrope, sans-serif; letter-spacing: .18em; color: var(--muted); margin-top: 3px; }
.login-pitch { display: none; }
@media (min-width: 900px) { .login-pitch { display: flex; flex-direction: column; gap: 20px; } }
.secure-pill { margin: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 100px; font: 700 12.5px Manrope, sans-serif; }
.secure-pill span { width: 8px; height: 8px; border-radius: 99px; background: #3B9A68; }
.login-pitch h1 { font-size: 44px; line-height: 1.08; text-transform: uppercase; }
.lede { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 400px; }
.only { margin: 0; font-size: 14px; color: var(--ink-2); display: none; }
@media (min-width: 900px) { .only { display: block; } }
.login-main { display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px 40px; background: var(--paper); }
@media (min-width: 900px) { .login-main { align-items: center; padding: 40px; } }
.login-card { width: 100%; max-width: 440px; padding: 28px 22px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { .login-card { padding: 36px; } }
.login-card h2 { font-size: 28px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }

/* App shell */
.topbar { height: 64px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand.small img { width: 38px; height: 38px; }
.brand.small .brand-name { font-size: 16px; }
.who { display: flex; align-items: center; gap: 14px; }
.who form { margin: 0; }
.who-name { font-size: 14px; display: none; }
@media (min-width: 600px) { .who-name { display: inline; } }
.app-main { max-width: 1080px; margin: 0 auto; padding: 28px 16px 60px; }
.narrow { max-width: 520px; margin: 60px auto; padding: 28px; }
.mt6 { margin: 6px 0 0; }
.mt10 { margin: 10px 0 0; }
.hint { margin: 0; font-size: 13.5px; color: var(--muted); }
/* Standalone links people tap on a phone need a finger-sized target, not just the text height. */
.hint a { display: inline-block; padding: 7px 0; }
.pad { padding: 28px; }
.h-page { font-size: 28px; }

/* Portal controls: switches */
.sw-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.sw-label { font-weight: 700; }
.sw-help { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.sw-toggle { flex: none; cursor: pointer; }
.sw-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-pill { display: inline-flex; width: 78px; height: 34px; border-radius: 999px; border: 1px solid var(--rule); background: #EEF1F4; align-items: center; justify-content: flex-end; padding: 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted); position: relative; transition: background .15s, color .15s; }
.sw-pill::before { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.sw-on { display: none; }
.sw-toggle input:checked + .sw-pill { background: #1F7A44; color: #FFFFFF; justify-content: flex-start; }
.sw-toggle input:checked + .sw-pill::before { transform: translateX(45px); }
.sw-toggle input:checked + .sw-pill .sw-on { display: inline; }
.sw-toggle input:checked + .sw-pill .sw-off { display: none; }
.sw-toggle input:focus-visible + .sw-pill { outline: 2px solid var(--ink); outline-offset: 2px; }
.p-gold { background: #FAF1D8; color: #6B5412; }
.p-red { background: var(--red-bg); color: var(--red); }

/* Portal controls page */
.admin-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.admin-card { width: 100%; max-width: 440px; padding: 30px; }
.admin-head { display: flex; align-items: center; gap: 12px; }
.admin-head img { width: 44px; height: 44px; border-radius: 10px; }
.admin-head .brand-name { font: 800 17px/1.15 Manrope, sans-serif; }
.admin-head .brand-sub { font: 700 11px Manrope, sans-serif; letter-spacing: 1.4px; color: var(--muted); margin-top: 2px; }
.admin-card h2 { font-size: 24px; margin: 20px 0 0; }
.admin-card form { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 0; }
.rule-line { height: 1px; background: var(--rule); margin: 20px 0 0; }
.status-strip { display: block; padding: 12px 16px; border-radius: 12px; margin-top: 18px; font-size: 14px; line-height: 1.5; }
.s-ok { background: var(--green-bg); color: var(--green); }
.s-off { background: var(--red-bg); color: var(--red); }
.status-strip b { font-weight: 800; margin-right: 6px; }
.admin-main { max-width: 720px; }
.sw-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* Long text: privacy notice and similar. Its own name, not .doc: .doc is the download chip on the
   case page, and sharing it drew the whole notice as one big chip (fixed 2 Oct 2026). */
.doc-text { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2); }
.doc-h { font: 800 17px/1.3 Manrope, sans-serif; color: var(--ink); margin: 22px 0 8px; }
.doc-text p { margin: 0 0 10px; line-height: 1.65; }
.doc-text ul { margin: 0 0 10px; padding-left: 20px; }
.doc-text li { margin: 0 0 6px; line-height: 1.6; }
.doc-text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground); font-size: 15px; cursor: pointer; }
.agree input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--green); }
.doc-end { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.doc-end .btn-block { width: 100%; }
.mt-card { margin-top: 18px; }
.h-sec { font: 800 20px/1.25 Manrope, sans-serif; margin: 0; }

/* Login tabs */
.tabs { display: flex; gap: 6px; margin-top: 18px; padding: 4px; background: var(--ground); border-radius: 100px; }
.tab { flex: 1; text-align: center; padding: 9px 8px; border-radius: 100px; font: 700 14px Manrope, sans-serif; color: var(--muted); text-decoration: none; }
.tab.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(22,25,29,.12); }

/* App navigation and key/value lists */
.nav { display: none; gap: 4px; margin-left: 10px; }
@media (min-width: 700px) { .nav { display: flex; } }
.navlink { padding: 8px 12px; border-radius: 100px; font: 700 14px Manrope, sans-serif; color: var(--ink-2); text-decoration: none; }
.navlink:hover { background: var(--ground); color: var(--ink); }
.kv { display: grid; grid-template-columns: 1fr; gap: 2px 18px; }
@media (min-width: 560px) { .kv { grid-template-columns: 160px 1fr; } }
.kv-k { font-size: 14px; color: var(--muted); }
.kv-v { margin-bottom: 10px; }
.s-info { background: var(--sky); color: var(--ink-2); }
.btn-ghost { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { background: var(--ground); }

/* What clients see */
.s-warn { background: var(--warn-soft, #F7EDDB); color: #6B5412; }
.pipe { margin-top: 18px; }
.pipe-off .stage-list { opacity: .45; }
.stage-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 12px 14px; background: var(--ground); border-radius: 12px; }
.stage-row { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; }
@media (min-width: 720px) { .stage-row { grid-template-columns: 260px 1fr; gap: 14px; } }
.stage-show { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.stage-show input { width: 18px; height: 18px; flex: none; accent-color: var(--green); }
.stage-crm { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--muted); }
.stage-words { min-height: 42px; }

/* My cases */
.case-list { display: grid; gap: 12px; margin-top: 18px; }
.case-card { border: 1px solid var(--rule); border-radius: 14px; padding: 18px 20px; background: var(--paper); }
.case-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.case-name { font: 800 17px/1.3 Manrope, sans-serif; }
.case-pipe { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.case-status { align-self: flex-start; }
.case-facts { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14.5px; }
@media (min-width: 620px) { .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; } }
.case-fact-k { color: var(--muted); }
.case-foot { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.empty { padding: 32px 20px; text-align: center; border: 1px dashed var(--rule); border-radius: 14px; }
.empty p { margin: 0 0 6px; }

/* Case detail */
a.case-card { display: block; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.case-card:hover { border-color: var(--sky-line); box-shadow: 0 2px 10px rgba(22,25,29,.06); }
.open-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; display: inline-block; padding: 7px 0; }
.step { border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; background: var(--paper); }
.step-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.step-name { font: 800 16px/1.3 Manrope, sans-serif; }
.updates { display: grid; gap: 0; margin-top: 16px; }
.update { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .update { grid-template-columns: 130px 1fr; gap: 18px; } }
.update-when { font-size: 13.5px; color: var(--muted); }
.update-title { font-weight: 700; margin-bottom: 4px; }
.update-text { margin: 0; line-height: 1.65; }
.docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.doc { display: inline-block; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 100px; background: var(--ground); font-size: 14px; color: var(--ink); text-decoration: none; }
.doc:hover { border-color: var(--sky-line); }
.doc::before { content: "\2193  "; color: var(--muted); }

/* Steps shown inside the case card */
.case-head { display: block; text-decoration: none; color: inherit; }
.ministeps { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ministeps-h { font: 700 12px Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ministep { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--ground); text-decoration: none; color: inherit; font-size: 14.5px; }
.ministep:hover { background: var(--sky); }
.ministep-name { font-weight: 700; }
.ministep-status { color: var(--green); font-size: 13.5px; text-align: right; }

/* ============================================================
   Website-aligned theme (20 Sep 2026). Overrides the rules above.
   Cream page, white cards, gold accents, black pill buttons.
   ============================================================ */
:root {
  --ground: #F8F6F1; --rule: #E9E3D7; --cream: #FBF4E4; --cream-line: #F0E3C4;
  --gold-deep: #6B5412; --sky: #F3EFE6; --sky-line: #E0D6C0;
}
body { background: var(--ground); }

/* top bar: wraps to two rows on a phone, so the menu is always reachable */
.topbar { height: auto; min-height: 60px; padding: 10px 16px; flex-wrap: wrap; row-gap: 4px; }
.nav { display: flex; order: 3; width: 100%; gap: 4px; margin: 4px -4px 0; padding-top: 8px;
       border-top: 1px solid var(--rule); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.navlink { white-space: nowrap; }
.navlink.on { background: var(--cream); color: var(--gold-deep); }
@media (min-width: 700px) {
  .topbar { height: 64px; flex-wrap: nowrap; padding: 0 20px; }
  .nav { order: 0; width: auto; margin: 0 0 0 18px; padding-top: 0; border-top: 0; }
}

/* cards */
.card { border-radius: 16px; }
.app-main { max-width: 900px; padding: 24px 14px 72px; }
.pad { padding: 22px 18px; }
@media (min-width: 620px) { .pad { padding: 28px 30px; } }
.h-page { font-size: 24px; letter-spacing: -.01em; }
@media (min-width: 620px) { .h-page { font-size: 30px; } }

/* gold eyebrow, as on the website */
.eyebrow-g { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
             font: 800 11px Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow-g::before { content: ""; width: 9px; height: 9px; background: var(--gold); flex: none; }

/* status chip */
.pill { padding: 6px 12px; font-size: 12.5px; }
.p-green { background: var(--cream); color: var(--gold-deep); }
/* Statuses read as the one fact that matters, so they carry the website's gold strip. */
.case-status.pill, .ministep-status { background: var(--gold); color: var(--ink);
    border-radius: 3px; font-family: Manrope, sans-serif; font-weight: 700; }
.case-status.pill { padding: 6px 14px; font-size: 13px; }
.ministep-status { padding: 4px 11px; font-size: 12.5px; }
.chip-done { background: #E6F3EC; color: #2A7550; }

/* case cards */
.case-list { gap: 14px; }
.case-card { border-radius: 16px; padding: 0; overflow: hidden; border-color: var(--rule); }
.case-head { display: block; padding: 20px 18px 0; }
@media (min-width: 620px) { .case-head { padding: 22px 24px 0; } }
.case-name { font-size: 18px; letter-spacing: -.01em; }
.case-pipe { font-size: 13px; letter-spacing: .01em; }
.case-facts { margin: 14px 18px 0; padding: 14px 0 0; }
@media (min-width: 620px) { .case-facts { margin: 16px 24px 0; } }
.case-foot { margin: 14px 0 0; padding: 12px 18px; background: var(--ground); border-top: 1px solid var(--rule); font-size: 13px; }
@media (min-width: 620px) { .case-foot { padding: 12px 24px; } }

/* steps as a timeline with gold markers */
.ministeps { margin: 16px 18px 0; padding-top: 14px; border-top: 1px solid var(--rule); }
@media (min-width: 620px) { .ministeps { margin: 18px 24px 0; } }
.ministeps-h { font: 800 11px Manrope, sans-serif; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.tl { position: relative; margin-left: 7px; padding-left: 20px; border-left: 2px solid var(--cream-line); }
.ministep { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
            flex-wrap: wrap; padding: 8px 0; margin: 0; background: none; border-radius: 0; }
.ministep + .ministep { border-top: 1px dashed var(--rule); }
.ministep::before { content: ""; position: absolute; left: -27px; top: 14px; width: 10px; height: 10px;
                    border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--paper); }
.ministep:hover { background: none; }
.ministep:hover .ministep-name { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ministep-name { font-weight: 700; font-size: 15px; }
.ministep-status { color: var(--gold-deep); background: var(--cream); border-radius: 100px; padding: 3px 10px; font-size: 12.5px; }
.more-steps { display: inline-block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* case page: steps and updates */
.step { border-radius: 14px; border-color: var(--rule); }
.updates { margin-top: 4px; }
.update { border-top: 1px dashed var(--rule); padding: 18px 0; }
.update:first-child { border-top: 0; }
.update-when { font-weight: 700; color: var(--gold-deep); }
.doc { background: var(--cream); border-color: var(--cream-line); }
.doc:hover { border-color: var(--gold); }
.empty { border-color: var(--cream-line); background: var(--cream); }

/* buttons */
.btn-ghost { background: var(--cream); border-color: var(--cream-line); color: var(--gold-deep); }
.btn-ghost:hover { background: #F7EDD4; }

/* Detail tables: label and value, tidy on a phone and on a desktop */
.kv { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 18px;
      border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--paper); }
.kv-k { margin: 0; padding: 11px 14px 0; font-size: 12px; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; color: var(--muted); }
.kv-v { margin: 0; padding: 2px 14px 12px; font-size: 15.5px; font-weight: 600; color: var(--ink);
        border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.kv > *:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 620px) {
  .kv { grid-template-columns: 240px minmax(0, 1fr); }
  .kv-k { display: flex; align-items: center; padding: 12px 18px; background: var(--ground);
          border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); text-transform: none;
          font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
  .kv-v { padding: 12px 18px; font-weight: 600; }
}

/* ---- Invoices (Phase 5) ---------------------------------------------------
   One row per bill: number and dates, then the amount and its state, then the
   buttons. On a phone the three parts stack instead of sitting side by side. */
.inv-list { display: grid; gap: 12px; }
.inv { border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; background: var(--paper);
       display: grid; gap: 12px; }
.inv-no { font: 800 17px Manrope, sans-serif; color: var(--ink); }
.inv-dates { color: var(--muted); font-size: 14px; margin-top: 2px; }
.inv-money { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-total { font: 800 18px Manrope, sans-serif; color: var(--ink); }
.inv-owing { width: 100%; color: var(--muted); font-size: 13.5px; }
.inv-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.inv-acts .btn { flex: 1 1 auto; }
.p-paid { background: var(--green-bg, #E6F3EC); color: var(--green, #2A7550); }
.p-part { background: var(--cream); color: var(--gold-deep); }
.p-late { background: #FBE9E7; color: #A3341F; }
.p-due  { background: var(--ground); color: var(--ink-2); border: 1px solid var(--rule); }

@media (min-width: 720px) {
  .inv { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; }
  .inv-money { justify-content: flex-end; }
  .inv-owing { width: auto; }
  .inv-acts .btn { flex: 0 0 auto; }
}

/* ---- Support (Phase 6) ----------------------------------------------------
   A list of requests, then the conversation: the client's messages plain, ours
   on a tinted card so it is obvious at a glance who said what. */
.textarea { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat; padding-right: 44px; }

.req-list { display: grid; gap: 10px; }
.req { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
       border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; background: var(--paper);
       text-decoration: none; color: inherit; }
.req:hover { border-color: var(--gold); }
.req-subject { font: 700 16px Manrope, sans-serif; color: var(--ink); }
.req-meta { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

.thread { display: grid; gap: 12px; }
.msg { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
.msg-us { background: var(--cream); border-color: var(--cream-line, var(--rule)); }
.msg-head { font: 700 12.5px Manrope, sans-serif; color: var(--muted); margin-bottom: 6px; }
.msg-body { color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
/* The website's marker: a solid gold block behind one phrase, used sparingly.
   Lists keep the quiet pills - nine gold blocks down a page would mean nothing. */
.closing { margin: 0 0 16px; font: 600 15px Manrope, sans-serif; color: var(--ink); }
.closing span { background: var(--gold); padding: 4px 11px; border-radius: 3px;
                box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.h-page.up { text-transform: uppercase; letter-spacing: -.02em; line-height: 1.12; }
.h-page em { font-style: normal; background: var(--gold); color: var(--ink); padding: 0 10px;
             border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark { display: inline-block; background: var(--gold); color: var(--ink); padding: 5px 12px;
        border-radius: 3px; font: 700 12.5px Manrope, sans-serif; }
.case-status.mark { padding: 6px 14px; font-size: 13px; }

/* Review card: deliberately made to match the Books payment receipt the client has just had,
   so the two feel like one business. Centred, gold stars, Google's own wordmark colours. */
.rev { text-align: center; }
.rev p { margin: 10px auto 0; max-width: 46ch; color: var(--ink-2); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 17px; vertical-align: -1px; }
/* The website's solid gold block, not a bordered box: the same marker used on headings. */
.gbtn { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 13px 24px;
        background: var(--gold); border: 0; border-radius: 3px;
        font: 800 16px Manrope, sans-serif; color: var(--ink); text-decoration: none; }
.gbtn:hover { background: #E0B93F; }
.gbtn .gs { font-size: 16px; }
/* Google's wordmark keeps its own colours, so it sits on white inside the gold block -
   its yellow letter is invisible on gold. Poppins is the closest free match to their type. */
.gword { display: inline-block; background: var(--paper); border-radius: 3px; padding: 3px 9px;
         font: 500 16px Poppins, Manrope, sans-serif; letter-spacing: -.02em; }
.g-b { color: #4285F4; } .g-r { color: #EA4335; } .g-y { color: #FBBC05; } .g-g { color: #34A853; }

/* ============================================================
   Brand kit alignment (2 Oct 2026, brand kit 45324aade0). Overrides the rules above.
   The portal's colours stay exactly as they are, by the owner's choice. What changes is
   the brand's own pieces: the tagline, the logo size, the highlighter and the footer.
   ============================================================ */

/* Lockup A: the name, the gold tagline under it. The tagline stays under 75% of the name. */
.brand-lock { display: block; }
.brand-lock .brand-name { display: block; }
.brand-tag { display: block; font: 700 14px/1.3 Manrope, sans-serif; color: #6E571B; margin-top: 3px; white-space: nowrap; }
.brand.small .brand-tag { font-size: 11.5px; margin-top: 1px; }

/* The logo is never shown below the brand's 48px minimum, and never cropped. */
.brand.small img, .admin-head img { width: 48px; height: 48px; }
.admin-head img { border-radius: 0; }

/* The brand's signature: a solid gold box behind the key words (brand kit, 3 Oct 2026). */
.hl, .h-page em { background: var(--gold); padding: .04em .3em .12em; border-radius: 2px;
                  font-style: normal; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* On the login heading, a little space between the gold box and the line above it. */
.login-pitch h1 .hl { display: inline-block; margin-top: .12em; }

/* The footer sits at the foot of the screen, however short the page. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.login-wrap, .admin-wrap { flex: 1 0 auto; min-height: 0; }
/* In a column, a centred block would otherwise shrink to its text; keep its usual width. */
body > main, body > .narrow { width: 100%; }
.pfoot { margin-top: auto; background: var(--ink); color: #EAF0F6; padding: 20px 20px 18px; display: grid; gap: 10px; }
.pfoot .ct { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font: 700 14.5px/1.4 Karla, sans-serif; }
.pfoot .ct em, .pfoot .soc em { font: 800 10.5px Manrope, sans-serif; font-style: normal; letter-spacing: .12em;
                                 text-transform: uppercase; color: var(--gold); margin-right: 8px; }
.pfoot a { color: #EAF0F6; text-decoration: none; }
.pfoot .ct a { display: inline-block; padding: 4px 0; }
.pfoot .soc { display: inline-flex; align-items: center; gap: 8px; opacity: .8; margin-left: auto; }
.pfoot .soc a { display: inline-flex; padding: 4px; border-radius: 6px; }
.pfoot .soc a:hover, .pfoot .soc a:focus-visible { color: var(--gold); opacity: 1; }
.pfoot .soc svg { width: 18px; height: 18px; display: block; }
.pfoot .dc { margin: 0; font: 500 12.5px/1.5 Karla, sans-serif; color: #98A2AD; }
@media (max-width: 640px) { .pfoot .soc { margin-left: 0; } }

/* Controls page, Daily check card: each check on its own line, a status dot, the name, then the result. */
.sc-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--rule); font-size: 15px; }
.sc-row:first-child { border-top: 0; }
.sc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.sc-dot.bad { background: var(--red); }
.sc-name { flex: none; font-weight: 700; }
.sc-note { flex: 1; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }

/* Notices to clients (v=30): typed by the owner on the controls pages, shown at the top of every
   client page by client_notices(). Information is the calm sky; Important uses the brand gold. */
.pnotice { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--sky); border-left: 4px solid var(--sky-line); color: var(--ink); }
.pnotice-imp { background: #FBF3DC; border-left-color: var(--gold); }
.pnotice-h { font: 800 12.5px Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pnotice-t { margin-top: 4px; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ntc-opts { display: flex; gap: 18px; flex-wrap: wrap; }
.ntc-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.ntc-opt input { width: 18px; height: 18px; accent-color: var(--ink); }
.ntc-dates { display: grid; gap: 12px; }
@media (min-width: 620px) { .ntc-dates { grid-template-columns: 1fr 1fr; } }
.ntc-list { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.ntc-panel { padding: 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--ground); }
.ntc-panel .pnotice, .card .pnotice { margin-bottom: 10px; }