/* base.css - shared foundation for the owner's apps. No framework, no build step.
   Each app loads this first, then its own brand layer that sets the tokens below.
   Light by default; a brand layer may define html[data-theme=dark] tokens for the dark option.
   Phone layout checked at 360 px: nothing here makes the page wider than the screen. */
:root{
  /* tokens a brand layer overrides */
  --bg:#f7f7f5; --surface:#fff; --surface-2:#f1f1ee; --ink:#15171c; --muted:#5a5f69; --line:#e2e2dd; --line-strong:#c9c9c2;
  --primary:#1f4fd1; --primary-ink:#fff; --primary-hover:#183fa8; --primary-soft:#e8eefc; --link:#1f4fd1;
  --ok:#17663f; --ok-bg:#e5f4ea; --warn:#7a4a00; --warn-bg:#fff2d9; --bad:#a3221b; --bad-bg:#fde9e7;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:var(--font-body); --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  /* spacing scale (4 px steps) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* type scale */
  --t-xs:13px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:36px; --t-4xl:48px;
  --radius:12px; --radius-sm:8px; --radius-lg:20px; --pill:999px;
  --shadow:0 1px 2px rgba(16,18,24,.06),0 6px 20px rgba(16,18,24,.06);
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-md)/1.55 var(--font-body);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;margin:0 0 var(--s3);letter-spacing:-.015em;font-weight:700}
h1{font-size:var(--t-2xl)}h2{font-size:var(--t-xl);margin-top:var(--s6)}h3{font-size:var(--t-lg)}
p{margin:0 0 var(--s3)}
a{color:var(--link);text-underline-offset:2px}
small,.small{font-size:var(--t-sm)}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}

/* layout */
.wrap,main{max-width:var(--wrap);margin:0 auto;padding-left:var(--s4);padding-right:var(--s4)}
main{padding-top:var(--s6);padding-bottom:var(--s8)}
.stack>*+*{margin-top:var(--s4)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s4)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:0 var(--s3)}
.scroll{overflow-x:auto;max-width:100%}

/* header: brand left, product links and Sign in right */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.site-header .bar{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s5)}
.brand{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:var(--t-xl);letter-spacing:-.02em}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4)}
.site-nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;padding:6px 0}
.site-nav a:hover{color:var(--ink)}
.site-nav a.signin{color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--pill);padding:6px 14px}

/* footer: legal links live here only */
.site-footer{border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:var(--t-sm)}
.site-footer .bar{max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center}
.site-footer a{color:var(--muted);font-weight:600}
.site-footer .spacer{flex:1}

/* buttons */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:10px 20px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--primary);color:var(--primary-ink);font:600 var(--t-md)/1.2 var(--font-body);text-decoration:none;cursor:pointer;text-align:center}
button:hover,.button:hover{background:var(--primary-hover)}
button.plain,.button.plain{background:transparent;color:var(--ink);border-color:var(--line-strong)}
button.plain:hover,.button.plain:hover{background:var(--surface-2)}
button.danger,.button.danger{background:var(--bad);color:#fff}
button.big,.button.big{min-height:52px;padding:14px 28px;font-size:var(--t-lg)}
button:disabled{opacity:.5;cursor:not-allowed}

/* inputs: a label above each control, no description text */
label{display:block;margin:0 0 var(--s3)}
label>span{display:block;font-weight:600;font-size:15px;margin-bottom:var(--s1)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=date],input[type=search],input[type=url],select,textarea{width:100%;max-width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit}
textarea{min-height:96px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--primary-soft);border-color:var(--primary)}
label.check{display:flex;gap:var(--s2);align-items:flex-start}label.check>span{font-weight:400;margin:0}
fieldset{border:0;padding:0;margin:0 0 var(--s4);min-width:0}legend{font-weight:700;padding:0;margin-bottom:var(--s2)}

/* cards and boxes */
.card,.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow)}
.box{margin:var(--s3) 0}

/* tables */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:var(--t-sm);color:var(--muted);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* messages */
.notice{padding:12px 14px;border-radius:var(--radius-sm);background:var(--ok-bg);color:var(--ok);font-weight:500}
.notice.warn{background:var(--warn-bg);color:var(--warn)}
.notice.bad{background:var(--bad-bg);color:var(--bad)}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--pill);padding:2px 9px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* utility */
.code{font-family:var(--font-mono);word-break:break-all;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s2)}
.inline{display:inline}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phone: 360 px and up */
@media (max-width:480px){
  h1{font-size:26px}
  main{padding-top:var(--s5)}
  .site-header .bar{padding:var(--s2) var(--s4)}
  .site-nav{gap:var(--s1) var(--s3)}
  .site-nav a{font-size:14px}
  .card,.box{padding:var(--s4)}
  th,td{padding:8px}
}