/* Avinat onboarding — direction B "Guided" (10/09/2026).
   Rounded cards, gold progress, oxblood pill buttons, one warm line per section. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bg:#F6F1EC; --surface:#FFFFFF; --surface-2:#FBF8F6; --surface-3:#F3EEE8;
  --ink:#211B1C; --muted:#6B5D5E; --muted-2:#857576; --faint:#A0918F;
  --line:#E0D4D5; --line-strong:#C9BABB; --track:#E5DBD2;
  --accent:#501010; --accent-2:#7B2A2A; --gold:#9A6E17; --gold-ink:#7C5710; --gold-bg:#EDE3CE;
  --ok:#2F6B4F; --ok-bg:#E6F0EA; --warn:#8A5A12; --bad:#A02020; --bad-bg:#F8E7E7;
  --radius:14px; --radius-s:12px;
  --shadow:0 1px 2px rgba(33,27,28,.05), 0 8px 24px -12px rgba(33,27,28,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 16px 60px}
body.client .wrap{max-width:600px}
@media(min-width:640px){ body.client .wrap{max-width:720px} }

/* ---- header ---------------------------------------------------------- */
header.top{padding:22px 6px 4px; margin-bottom:14px}
body.client .wrap.split header.top{padding-top:4px}
.brand{font-weight:700; color:var(--accent); letter-spacing:.02em; margin:0 0 14px; font-size:13px}
h1{font-size:27px; line-height:1.2; margin:0 0 6px; letter-spacing:-.02em; font-weight:700; text-wrap:balance}
.sub{color:var(--muted); margin:0; font-size:15px}
h2{font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px}
h3{font-size:16px; font-weight:700; margin:0 0 8px}

/* ---- progress (phone: bar across the top; desktop: side list) -------- */
aside.side{padding:22px 6px 0}
aside.side .brand{margin-bottom:14px}
.stepline{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px; font-size:12.5px; font-weight:600; color:var(--muted-2)}
.stepline strong{color:var(--ink); font-weight:700}
ol.steps{display:flex; gap:6px; list-style:none; padding:0; margin:0 0 18px}
ol.steps li{flex:1; height:6px; border-radius:3px; background:var(--track); font-size:0; color:transparent; overflow:hidden}
ol.steps li.on, ol.steps li.done{background:var(--gold)}
.sidecompany,.sidenote{display:none}
header.top{padding:4px 6px 4px}

@media(min-width:900px){
  body.client .wrap.split{max-width:1080px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:0 56px; align-items:start}
  aside.side{position:sticky; top:0; padding:34px 0 24px}
  aside.side .brand{font-size:15px; margin-bottom:26px}
  .stepline{font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px}
  .stepline .steplabel,.stepline .stepco{display:none}
  ol.steps{display:block; margin:0 0 26px}
  ol.steps li{height:auto; font-size:14.5px; color:var(--faint); background:none; border-radius:0; overflow:visible;
              padding:7px 0 7px 14px; border-left:3px solid var(--track); font-weight:500; line-height:1.3}
  ol.steps li.done{color:var(--muted); border-left-color:var(--gold); background:none}
  ol.steps li.on{color:var(--ink); font-weight:700; border-left-color:var(--gold); background:none}
  ol.steps li.done span::after{content:" ✓"; color:var(--gold-ink); font-weight:700}
  .sidecompany{display:block; margin:0 0 10px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4}
  .sidecompany span{font-weight:500; color:var(--muted-2); font-size:13px}
  .sidenote{display:block; margin:14px 0 0; font-size:12.5px; color:var(--faint); line-height:1.45}
  main.content{padding-top:30px; min-width:0}
  header.top{padding:0 0 6px; margin-bottom:18px}
  h1{font-size:30px}
  .sub{display:none}
  fieldset{padding:24px 26px 22px}
  .person{padding:22px 26px}
  .actions{margin-top:20px}
  body.client .actions > button[type=submit], body.client .actions > .btn:not(.secondary){flex:0 0 auto; min-width:240px}
  .saved{text-align:left; padding-left:4px}
}

/* ---- cards ----------------------------------------------------------- */
fieldset{border:0; background:var(--surface); padding:18px 18px 16px; margin:0 0 14px; border-radius:var(--radius); box-shadow:var(--shadow); min-width:0}
legend{font-weight:700; font-size:19px; letter-spacing:-.01em; padding:0; margin:0 0 4px; color:var(--ink); float:left; width:100%}
legend + *{clear:both}
fieldset > p:first-of-type{margin-top:6px}
fieldset > .intro{color:var(--muted); font-size:14px; margin:0 0 14px}

.person{background:var(--surface); padding:16px 18px; margin:0 0 14px; border-radius:var(--radius); box-shadow:var(--shadow)}
.person h3{margin:0 0 12px; font-size:16px}
.person .src{color:var(--muted); font-size:13px; font-weight:500}

.readback{background:var(--surface-2); border:1px solid var(--line); padding:14px 16px; margin:8px 0 16px; border-radius:var(--radius-s)}
.readback .fromch{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink)}
.readback .fromch::before{content:"✓"; display:inline-flex; width:22px; height:22px; border-radius:11px; background:var(--gold-bg); align-items:center; justify-content:center; font-size:12px}
.readback dl{margin:0; display:grid; grid-template-columns:1fr; gap:2px 14px}
@media(min-width:560px){ .readback dl{grid-template-columns:auto 1fr} }
.readback dt{color:var(--muted-2); font-size:13px}
.readback dd{margin:0 0 8px; font-size:15px}
.readback p{margin:0 0 4px}

/* ---- fields ---------------------------------------------------------- */
label{display:block; margin:0 0 14px}
label .q{display:block; font-weight:600; margin-bottom:5px; font-size:14.5px}
label .hint{display:block; color:var(--muted); font-size:13px; margin:-2px 0 6px; line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:15.5px;
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface-2); color:var(--ink);
}
input[type=file]{display:block; font:inherit; font-size:14px; padding:10px 0}
textarea{min-height:88px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; background:#fff}
input::placeholder,textarea::placeholder{color:var(--faint)}
.row{display:grid; grid-template-columns:1fr; gap:0 14px}
@media(min-width:600px){ .row.two{grid-template-columns:1fr 1fr} }

/* tick rows */
.check{display:flex; gap:12px; align-items:flex-start; margin:0 0 10px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s)}
.check input{margin:4px 0 0; flex:none; width:18px; height:18px; accent-color:var(--accent)}
.check label{margin:0; font-size:15px; font-weight:500}
.check label .q{font-weight:500; margin:0}

/* confirm-or-change: two big buttons */
.choice{display:flex; gap:12px; align-items:center; min-height:52px; padding:12px 16px; margin:0 0 10px;
        background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); cursor:pointer; font-size:15px; font-weight:500; color:#4A4041}
.choice input{appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:0; border-radius:6px; border:1.5px solid var(--line-strong); background:var(--surface-2); display:grid; place-content:center}
.choice input::before{content:""; width:11px; height:7px; border:3px solid transparent; border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px)}
.choice:has(input:checked){background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
.choice:has(input:checked) input{background:#fff; border-color:#fff}
.choice:has(input:checked) input::before{border-color:var(--accent)}
.choices{margin:0 0 6px}

/* ---- buttons --------------------------------------------------------- */
button,.btn{
  font:inherit; font-size:16px; font-weight:700; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  min-height:52px; padding:12px 24px; border-radius:27px; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.2;
}
button.secondary,.btn.secondary{background:var(--surface); color:var(--accent); border-color:var(--line-strong)}
button:hover,.btn:hover{background:var(--accent-2); border-color:var(--accent-2); color:#fff}
button.secondary:hover,.btn.secondary:hover{background:var(--surface-2); color:var(--accent); border-color:var(--accent)}
.actions{display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap}
body.client .actions > button[type=submit], body.client .actions > .btn:not(.secondary){flex:1 1 auto}
.saved{margin:12px 0 0; text-align:center; font-size:13px; color:var(--faint)}

/* a button that reads as a link */
button.linkish{
  background:none; border:none; padding:0; margin:0; min-height:0;
  color:var(--accent); font:inherit; font-size:15px; font-weight:500;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; display:inline; border-radius:0;
}
button.linkish:hover{opacity:.75; background:none; color:var(--accent)}

/* ---- notices --------------------------------------------------------- */
.notice{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--gold); padding:14px 16px; margin:0 0 16px; border-radius:var(--radius-s); font-size:15px}
.notice.bad{border-left-color:var(--bad); background:var(--bad-bg); border-color:#EAD2D2}
.notice.good{border-left-color:var(--ok); background:var(--ok-bg); border-color:#D3E3D9}
.notice p:last-child{margin-bottom:0}
.notice p:first-child{margin-top:0}
.notice ul{margin:6px 0 0 18px; padding:0}
.src{color:var(--muted); font-size:13px}
.tag{font-size:11px; text-transform:uppercase; letter-spacing:.07em; border:1px solid var(--ok); color:var(--ok); border-radius:999px; padding:2px 8px; font-weight:700; vertical-align:middle}

/* ---- misc ------------------------------------------------------------ */
table.list{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); font-size:14.5px; overflow:hidden}
table.list th,table.list td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.list th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; background:var(--surface-2)}
table.list tr:last-child td{border-bottom:none}
code{background:var(--surface-3); padding:1px 6px; border-radius:6px; font-size:13px; word-break:break-all}
a{color:var(--accent)}
a:hover{color:var(--accent-2)}
footer.foot{margin-top:30px; padding:16px 6px 0; border-top:1px solid var(--line); color:var(--muted-2); font-size:13px}
details summary{cursor:pointer}

/* service schedule pickers (staff) */
.sched-pick{border:1px solid var(--line); background:var(--surface); padding:12px 14px; margin:0 0 10px; border-radius:var(--radius-s)}
.sched-pick .check{margin:0; padding:0; border:0; background:none}
.sched-pick details{margin-top:8px}
.sched-pick summary{cursor:pointer; color:var(--accent); font-size:14px}
.sched-pick textarea{min-height:130px; font-size:14.5px; line-height:1.5}
.sched-pick label{margin-bottom:10px}

/* staff screen keeps the wider column and denser tables */
pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* postcode search in front of an address box */
.addr .pcrow{display:flex; gap:8px; align-items:stretch; margin:0 0 8px}
.addr .pcrow .pc{flex:0 1 180px; margin:0; text-transform:uppercase}
.addr .pcrow .pc::placeholder{text-transform:none}
.addr .pcrow button.small{padding:9px 16px; font-size:14px; white-space:nowrap; margin:0}
.addr .addrpick{margin:0 0 8px}
.addr .addrmsg{margin:0 0 8px; font-size:13px; color:var(--muted)}
.addr .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.addr label{position:relative}
input[type=date]{max-width:220px}

/* Yes/No tap cards */
.yn{margin:0 0 18px}
.yn > .q{display:block; font-weight:600; margin:0 0 5px; font-size:14.5px}
.yn > .hint{display:block; color:var(--muted); font-size:13px; margin:0 0 8px; line-height:1.45}
.yn .choices{display:grid; gap:10px; margin:0 0 8px}
.yn .choices .choice{margin:0}
.yn .yndetail{margin-top:4px}
@media (min-width: 640px){ .yn .choices.row2{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); max-width:460px} }
ol.steps.n2 li:nth-child(n+3){display:none}
ol.steps.n3 li:nth-child(n+4){display:none}

/* ownership look-through (lib/ownership.php) */
.ownbox{margin:0 0 14px}
.ownbox .tree,.readback .tree{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 12px;margin:4px 0 6px;white-space:pre;overflow-x:auto;color:var(--ink)}
.ownbox ul li{margin:0 0 3px}