/* ============================================================================
   base.css — reset, typography, icons, and the form-control / button
   primitives. Mobile-first: comfortable tap targets by default.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:var(--paper);
  font-size:15px;               /* a touch larger on mobile */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:48rem){ body{font-size:14px} }

h1,h2,h3,h4{margin:0;font-family:var(--font-serif);font-weight:600;letter-spacing:.1px;line-height:1.15}
p{margin:0}
a{color:var(--steel);text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}   /* 16px avoids iOS zoom-on-focus */
@media (min-width:48rem){ input,select,textarea{font-size:14px} }
::selection{background:var(--brass-lt);color:#fff}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px}

svg{max-width:100%}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media (min-width:48rem){ .ic{width:16px;height:16px} }

/* ---- fields ---- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.field .req{color:var(--danger);margin-left:2px}
.field .hint{font-size:11.5px;color:var(--text-3);font-weight:400}
.control{
  width:100%;padding:11px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--surface);color:var(--text);
  transition:border-color .12s,box-shadow .12s;
}
@media (min-width:48rem){ .control{padding:9px 11px} }
.control:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(38,69,107,.14)}
.control:disabled{background:var(--surface-2);color:var(--text-3)}
textarea.control{resize:vertical;min-height:76px}
select.control{
  appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23556172' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 16px;border-radius:var(--radius);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font-weight:600;font-size:14px;
  transition:background .12s,border-color .12s,color .12s;
}
@media (min-width:48rem){ .btn{padding:9px 16px;font-size:13.5px} }
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:var(--ink-2)}
.btn.brass{background:var(--brass);color:#fff;border-color:var(--brass)}
.btn.brass:hover{background:var(--brass-lt)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--steel)}
.btn.ghost:hover{background:rgba(38,69,107,.08)}
.btn.danger{color:var(--danger);border-color:var(--line-strong)}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .ic{width:15px;height:15px}

/* segmented control */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.seg button{padding:10px 14px;border:0;background:transparent;font-weight:600;font-size:13px;color:var(--text-2)}
.seg button.on{background:var(--ink);color:#fff}
.seg button+button{border-left:1px solid var(--line-strong)}