/* Growth OS — the one stylesheet for every private screen.
   Aussie Painting brand: navy ground, orange action, Lilita One headings, Poppins for everything else.
   Built for a phone, one-handed, sometimes in sunlight, often in a car.

   Contrast notes below were for the old dark palette; the light palette notes are in :root.
     --ink   #eef3fb 14.5:1   --ink-2 #a9b8d0 8.0:1   --ink-3 #8597b4 5.4:1
     --brand #f6a531 7.9:1 (large text, focus rings, icons — never body text on white)
     ink on orange #13284a/#f6a531 7.2:1
   The brand muted grey #6d7f9c is only 4.0:1 on a card, so it is kept for placeholders and
   disabled controls (--ink-4), never for text someone has to read. */
:root{
  /* Light ground, navy header band, orange action — the same look as the Control Room page.
     Contrast on white: --ink 15.6:1, --ink-2 7.4:1, --ink-3 4.6:1. Orange #f6a531 is only 2:1 on white, so it is
     never text: buttons use navy ink on orange (7.2:1) and anything orange-as-text uses --brand-text. */
  --bg:#f5f7fb; --card:#ffffff; --card-2:#eef2f8; --line:#e2e8f3; --line-2:#cfd9e8;
  --ink:#12203a; --ink-2:#48587a; --ink-3:#66748f; --ink-4:#9aa6bb;
  --brand:#f6a531; --brand-ink:#13284a; --brand-soft:rgba(246,165,49,.14); --brand-text:#9a5a00;
  --navy:#13284a; --navy-2:#1d3a63;
  --ok:#12855a; --ok-soft:rgba(18,133,90,.10);
  --warn:#a9740a; --warn-soft:rgba(169,116,10,.10);
  --bad:#c0432a; --bad-soft:rgba(192,67,42,.10);
  --agent:#2c6bbd; --agent-soft:rgba(44,107,189,.10);
  --dir:#2fa36b;
  /* older names the page styles still use */
  --accent:var(--brand); --accent-ink:var(--brand-ink); --hot:var(--bad);

  --head:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --r:16px; --r-sm:12px;
  --tap:52px;               /* capture screen: nothing interactive is smaller than this */
  --gutter:16px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;
  padding-bottom:40px;
  overflow-x:hidden;
}
body.has-dock{padding-bottom:calc(var(--tap) + 44px + env(safe-area-inset-bottom))}
a{color:var(--brand-text)}
b,strong{font-weight:600}
h1,h2,h3{font-family:var(--head); font-weight:400; letter-spacing:.005em; line-height:1.15}
.num, .tile b, .stat b{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
[hidden]{display:none !important}   /* .chips etc. set display, which out-specifies the UA [hidden] rule */
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ------------------------------------------------------------------ header bar */
.bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 10px;
  padding:8px var(--gutter); min-height:60px;
  position:sticky; top:0; z-index:5;
  background:linear-gradient(160deg,var(--navy),var(--navy-2)); border-bottom:3px solid var(--brand); color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0; color:var(--ink); text-decoration:none}
.brand img{width:40px; height:40px; object-fit:contain; flex:0 0 40px}
.brand .mark{width:40px; height:40px; flex:0 0 40px; border-radius:12px; background:var(--brand); color:var(--brand-ink);
             display:grid; place-items:center; font:20px/1 var(--head)}
.biz{font:1.22rem/1.1 var(--head); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; margin-left:auto}
.linky{
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px; border-radius:999px;
  color:var(--ink-2); text-decoration:none; font-size:.88rem; font-weight:500; white-space:nowrap;
}
.linky:hover{color:var(--ink); background:var(--card)}
.linky[aria-current="page"]{color:var(--brand-text)}
.linky.cta{color:var(--brand-ink); background:var(--brand); font-weight:600; margin-left:4px}

/* ------------------------------------------------------------------ page rhythm */
.wrap{max-width:42rem; margin:0 auto; padding:18px var(--gutter)}
.wrap.wide{max-width:64rem}
h1{font-size:1.75rem; margin:6px 0 6px}
h2{font-size:1.2rem; margin:30px 0 12px; color:var(--ink)}
h3{font-size:1.05rem; margin:0 0 6px}
.eyebrow, .k{font:600 .72rem/1.3 var(--body); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-bottom:6px}
p.note{color:var(--ink-2); margin:0 0 16px; font-size:.95rem}
.hint{font-size:.82rem; color:var(--ink-3); margin-top:6px}
h2 .hint, label .hint{font:400 .8rem var(--body)}
.checklist{font-size:.9rem; color:var(--ink-2); padding-left:1.2em; margin:8px 0 0}
.checklist li{margin-bottom:6px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:12px}
.card.accent{border-color:var(--brand-text)}
.card.warn, .card.bad{border-color:var(--bad)}
.card.ok, .done-card{border-color:var(--ok)}
.row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.title{font-weight:600; font-size:1rem}
.path{color:var(--ink-3); font-size:.85rem; word-break:break-word}
.why{color:var(--ink-2); font-size:.9rem; margin:8px 0 0}
.why.bad{color:var(--bad)}

.flash{border-radius:var(--r-sm); padding:12px 14px; margin:0 0 14px; background:var(--ok-soft); border:1px solid var(--ok); color:var(--ink)}
.flash.error{background:var(--bad-soft); border-color:var(--bad)}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:999px;
      border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap; line-height:1.4}
.pill.live, .pill.ok, .pill.on{border-color:var(--ok); color:var(--ok); background:var(--ok-soft)}
.pill.bad, .pill.thin{border-color:var(--bad); color:var(--bad); background:var(--bad-soft)}
.pill.warn, .pill.part{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
.pill.off{border-color:var(--line-2); color:var(--ink-3)}
.pill.agent{border-color:var(--agent); color:var(--agent); background:var(--agent-soft)}

/* stat tiles: numbers that line up */
.tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (min-width:720px){ .tiles{grid-template-columns:repeat(3, minmax(0,1fr))} }
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; min-width:0}
.tile b{display:block; font:1.6rem/1.15 var(--head); letter-spacing:.01em; overflow-wrap:anywhere}
.tile span{font-size:.78rem; color:var(--ink-2)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.two > *{min-width:0}

/* ------------------------------------------------------------------ buttons */
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.actions > form{display:inline-block}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 18px; border-radius:999px;
  font:600 .92rem/1.2 var(--body); text-decoration:none; text-align:center;
  border:1.5px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer;
}
.btn:hover{border-color:var(--brand-text); color:var(--ink)}
.btn.primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand-text)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.done{border-color:var(--ok); color:var(--ok)}
.btn:disabled, .btn.primary:disabled{background:var(--card-2); color:var(--ink-4); border-color:var(--line); cursor:not-allowed; filter:none}
.btn.mini{min-height:44px; padding:0 14px; font-size:.84rem}
.btn.block{display:flex; width:100%; min-height:54px; font-size:1rem; margin:0 0 16px}
.btn:active, .save:active, .chip:active{transform:translateY(1px)}

/* ------------------------------------------------------------------ forms (admin screens) */
form{margin:0}
form.inline{display:inline}
label{display:block; font-size:.88rem; font-weight:500; color:var(--ink-2); margin:14px 0 6px}
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date], input[type=number],
textarea, select{
  width:100%; min-height:48px; font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:11px 14px;
}
textarea{min-height:110px; resize:vertical; line-height:1.5}
select{appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat}
input::placeholder, textarea::placeholder{color:var(--ink-4)}
input:focus, textarea:focus, select:focus{outline:3px solid var(--brand); outline-offset:1px; border-color:transparent}
input[type=file]{width:100%; font:inherit; font-size:.9rem; color:var(--ink-2); background:var(--bg); border:1.5px dashed var(--line-2);
                 border-radius:var(--r-sm); padding:14px; min-height:56px}
input[type=checkbox], input[type=radio]{accent-color:var(--brand-text)}
details summary{cursor:pointer; color:var(--ink-2); margin-top:10px; min-height:44px; display:flex; align-items:center; font-weight:500}
details summary:hover{color:var(--ink)}

/* big tick box: a whole row you can hit with a thumb */
.check, .consent{display:flex; gap:12px; align-items:flex-start; padding:12px 0 4px; margin:0; cursor:pointer; min-height:52px;
                 color:var(--ink); font-size:1rem}
.check{border-top:1px solid var(--line)}
.check:first-of-type{border-top:0}
.check input, .consent input{appearance:none; -webkit-appearance:none; width:30px; height:30px; flex:0 0 30px; margin:0;
  border:2px solid var(--ink-3); border-radius:9px; background:var(--bg); display:grid; place-items:center; cursor:pointer}
.check input:checked, .consent input:checked{background:var(--brand); border-color:var(--brand-text)}
.check input:checked::after, .consent input:checked::after{content:""; width:8px; height:15px; border:solid var(--brand-ink);
  border-width:0 3px 3px 0; transform:translateY(-2px) rotate(45deg)}
.check input:focus-visible, .consent input:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
.check .t, .consent .t{font-weight:600}

/* tick chips: checkbox inside a pill (job screen) */
.tick-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.tick-chip{position:relative; margin:0; display:inline-block}
.tick-chip input{position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer}
.tick-chip span{display:inline-flex; align-items:center; min-height:46px; padding:0 16px; border:1.5px solid var(--line-2);
                border-radius:999px; background:var(--card-2); color:var(--ink); font-size:.95rem}
.tick-chip input:checked + span{background:var(--brand); color:var(--brand-ink); border-color:var(--brand-text); font-weight:600}
.tick-chip input:focus-visible + span{outline:3px solid var(--brand); outline-offset:2px}

/* copyable text blocks */
.msg, .post{white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
            font-size:.95rem; line-height:1.55; margin-top:10px}

.photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px}
.photos figure{margin:0; background:var(--card-2); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.photos img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.photos img.contain{object-fit:contain; background:#fff}
.photos .empty{aspect-ratio:4/3; display:grid; place-items:center; color:var(--ink-3); font-size:.8rem}
.photos.wide-tiles{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
.photos.spaced{margin-top:10px}
.photos .slot-upload{padding:0 8px 8px}
.photos .slot-upload input[type=file]{min-height:44px; padding:8px; font-size:.75rem; max-width:100%}
.photos figcaption{font-size:.78rem; color:var(--ink-2); padding:6px 8px}
.photos button{width:100%; min-height:44px; border:0; border-top:1px solid var(--line); background:none; color:var(--bad); font:inherit; font-size:.85rem; padding:8px; cursor:pointer}
.opt-row{display:flex; gap:12px; align-items:center; margin:6px 0; color:var(--ink); font-size:.95rem; min-height:44px; cursor:pointer}
.opt-row input{width:22px; height:22px; flex:0 0 22px}

/* ------------------------------------------------------------------ bottom dock (one big save) */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 65%, rgba(245,247,251,0));
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.dock.pair{flex-direction:row; justify-content:center}
.dock.pair > button{flex:1; max-width:20rem}
.dock.pair > .save.ghost{flex:0 0 38%}
.save{
  width:100%; max-width:40rem; min-height:var(--tap);
  background:var(--brand); color:var(--brand-ink);
  border:0; border-radius:999px;
  font:600 17px/1.2 var(--body); cursor:pointer;
  box-shadow:0 8px 24px rgba(246,165,49,.18);
}
.save.ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line-2); box-shadow:none}
.save:disabled{background:var(--card-2); color:var(--ink-4); box-shadow:none; cursor:not-allowed}
.queued{margin:0; font-size:.82rem; color:var(--ink-3)}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tap) + 26px + env(safe-area-inset-bottom));
  background:var(--card-2); color:var(--ink); border:1px solid var(--ok);
  padding:12px 18px; border-radius:999px; font-size:.95rem; z-index:20; max-width:calc(100% - 32px);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------------ capture form (/) and PIN */
.capture-form{padding:18px var(--gutter) 8px; display:flex; flex-direction:column; gap:22px; max-width:34rem; margin:0 auto}
.capture-form .field{display:flex; flex-direction:column; gap:9px; border:0; padding:0; margin:0; min-width:0}
.capture-form label.field{margin:0}
.lbl{font-size:.82rem; font-weight:600; color:var(--ink-2); letter-spacing:.03em; text-transform:uppercase; padding:0}
.opt{font-weight:400; color:var(--ink-3); text-transform:none; letter-spacing:0}
.capture-form input[type=text], .capture-form input[type=tel], .capture-form input[type=password], .capture-form textarea{
  min-height:var(--tap); background:var(--card); font-size:17px; padding:12px 16px;
}
.capture-form textarea{min-height:auto}
.big{font-size:24px !important; letter-spacing:.03em; font-variant-numeric:tabular-nums; min-height:62px !important}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  min-height:var(--tap); padding:0 18px;
  background:var(--card); color:var(--ink);
  border:1.5px solid var(--line-2); border-radius:999px;
  font:500 16px/1.2 var(--body); cursor:pointer;
  display:inline-flex; align-items:center;
}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand-text); color:var(--brand-ink); font-weight:600}
.chip-more{color:var(--ink-2); border-style:dashed}
/* the source row is the most valuable field on the page, so it gets the most weight */
.source .chip-src{background:var(--card-2)}
.source .lbl{color:var(--brand-text); font-size:.86rem}
.chips-rest{margin-top:-2px}

.more{border-top:1px solid var(--line); padding-top:12px}
.more summary{min-height:var(--tap); margin:0; color:var(--ink-2); font-size:.95rem}
.more[open] summary{color:var(--ink); margin-bottom:6px}
.more>*+*{margin-top:18px}

.dupe{margin:0; padding:11px 14px; border-radius:var(--r-sm); font-size:.9rem;
      background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink)}
.err{margin:0; color:var(--bad); font-size:.92rem}

.pin-form{min-height:78vh; justify-content:center}
.pin-form .err{text-align:center}
.pin-brand{text-align:center}
.mark-lg{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:20px; background:var(--brand); color:var(--brand-ink); font:34px/1 var(--head); margin-bottom:10px}
.pin-brand h1{margin:0 0 4px}

/* navy header band: white text on it */
.bar .biz, .bar .brand{color:#fff}
.bar .linky{color:#dbe5f3}
.bar .linky:hover{color:#fff; background:rgba(255,255,255,.10)}
.bar .linky[aria-current="page"]{color:var(--brand)}
.bar .linky.cta{color:var(--brand-ink); background:var(--brand)}
.card, .panel{box-shadow:0 1px 2px rgba(18,32,58,.04), 0 6px 18px rgba(18,32,58,.05)}