/* assets/style.css — the real, shared design system for every page.
   Extracted from design.html (the Phase 1 mockup), which was previously
   never actually wired into the functional site — every real page had its
   own separate, minimal, purely-functional styling instead. This file is
   what makes the site actually look like design.html rather than just
   showing it as a disconnected reference. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#161616;
  --paper:#f5f6f1;
  --grid:#dfe3da;
  --sign-blue:#1c3f66;
  --sign-blue-dark:#132c48;
  --sign-green:#0b4228;
  --post-red:#c8102e;
  --post-red-dark:#a30d24;
  --muted:#6d766c;
  --card:#ffffff;
  --line:#d7dad2;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
h1,h2,h3,.display{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; letter-spacing:.02em; margin:0;
}
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.02em; }
a{ color:var(--sign-blue); }

/* --- Real site navigation (design.html's mockup only had demo tabs;
   actual pages need a real header/nav bar instead) --- */
.site-header{
  background:var(--ink); color:#fff; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  position:sticky; top:0; z-index:10;
}
.site-header .logo{
  font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:20px;
  color:#fff; text-decoration:none; padding:14px 0;
}
.site-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.site-nav a{
  padding:14px 14px; color:#c9cdc4; text-decoration:none; font-size:14px;
  border-bottom:3px solid transparent; font-weight:500;
}
.site-nav a:hover, .site-nav a.active{ color:#fff; border-bottom-color:var(--post-red); }

.page-wrap{ max-width:1080px; margin:0 auto; padding:32px 24px 64px; }
.page-wrap.narrow{ max-width:480px; }

/* --- Signature hero element --- */
.sign-plate{
  background:var(--sign-blue); color:#fff; border-radius:6px;
  padding:36px 40px; position:relative; margin-bottom:28px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transform:rotate(-0.4deg);
}
.sign-plate::before, .sign-plate::after{
  content:""; position:absolute; top:14px; width:8px; height:8px;
  border-radius:50%; background:#eee; box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.sign-plate::before{ left:14px; }
.sign-plate::after{ right:14px; }
.sign-plate h1{ font-size:44px; line-height:1.05; text-transform:uppercase; }
.sign-plate p{ font-family:'Inter'; color:#dbe4ee; font-size:15px; margin-top:10px; max-width:520px;}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:22px; margin-bottom:20px;
}
.card h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-family:'Inter'; font-weight:600; margin-bottom:12px;
}
.grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:20px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;}
@media (max-width:760px){ .grid2, .grid3{grid-template-columns:1fr;} }

/* postcode badge — segmented, matches real UK postcode structure */
.postcode-badge{
  display:inline-flex; font-family:'IBM Plex Mono'; font-weight:600; font-size:13px;
  border-radius:5px; overflow:hidden; border:1px solid var(--sign-blue);
}
.postcode-badge span{ padding:4px 9px; }
.postcode-badge .outward{ background:var(--sign-blue); color:#fff; }
.postcode-badge .inward{ background:#fff; color:var(--sign-blue); }

.btn{
  display:inline-block; border:none; border-radius:5px; padding:11px 20px;
  font-family:'Inter'; font-weight:600; font-size:14px; cursor:pointer;
  text-decoration:none; text-align:center;
}
.btn.primary{ background:var(--post-red); color:#fff; }
.btn.secondary{ background:var(--sign-blue); color:#fff; }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn.danger{ background:var(--post-red-dark); color:#fff; }
.btn:disabled{ opacity:.5; cursor:default; }

.search-row{ display:flex; gap:10px; }
.search-row input{
  flex:1; padding:13px 14px; border:1.5px solid var(--sign-blue); border-radius:5px;
  font-size:15px; font-family:'Inter';
}

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:500;}
.field input, .field select, .field textarea,
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file],
select, textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:5px;
  font-family:'Inter'; font-size:14px; background:#fbfbfa; box-sizing:border-box;
}
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:13px; }
.checkbox-grid label{ display:flex; align-items:center; gap:6px; font-weight:400; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.pill{
  display:inline-block; font-size:11px; font-weight:600; border-radius:20px;
  padding:4px 11px; margin-right:6px;
}
.pill.verified{ background:#e4f3ea; color:var(--sign-green); }
.pill.muted{ background:#eef0ec; color:var(--muted); }

.stepper{ display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; }
.step{
  flex:1; min-width:90px; text-align:center; padding:9px 4px; font-size:11.5px;
  border-radius:4px; background:#eceee9; color:var(--muted); font-weight:600;
}
.step.current{ background:var(--sign-blue); color:#fff; }

table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th, table.data td{ border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; }
table.data th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.locked{ color:var(--muted); }
.locked b{ color:var(--ink); }
.warn{
  background:#fff3e0; border:1px solid #e0a030; color:#8a5a00;
  padding:10px 14px; border-radius:5px; font-size:13px;
}

.split{ display:flex; gap:16px; flex-wrap:wrap; }
.split > div{ flex:1; min-width:220px; }
.footer{ text-align:center; font-size:12px; color:var(--muted); margin-top:40px; }
.lorem{ color:var(--muted); font-size:13.5px; line-height:1.6; }

/* --- Form feedback messages (every page with a form needs these;
   design.html's mockup never needed real ones) --- */
.errors{
  background:#fdeaea; border:1px solid #d33; color:#a10000;
  padding:10px 14px; border-radius:5px; font-size:13px; margin-bottom:14px;
}
.success{
  background:#e4f3ea; border:1px solid var(--sign-green); color:var(--sign-green);
  padding:10px 14px; border-radius:5px; font-size:13px; margin-bottom:14px;
}