/* ==========================================================================
   clerked.uk — public site styles.

   Shared by www.clerked.uk (the landing page for both products) and
   tuohy.clerked.uk (the Tuohy product page). Built on the Tuohy design
   tokens so the marketing pages and the application look like one family:
   calm neutrals, deep teal for actions, IBM Plex, hairline borders, almost
   no motion.

   Load order on every page: tokens.css, fonts.css, then this file.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The design system asks for almost no motion, and none at all for anyone
   who has said they do not want it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- Layout ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .wrap { padding: 0 var(--space-6); }
}

.section { padding: var(--space-7) 0; }
@media (min-width: 768px) {
  .section { padding: 72px 0; }
}

.section--sunken {
  background: var(--surface-sunken);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---- Type scale -------------------------------------------------------- */
.display {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
@media (min-width: 768px) { .display { font-size: 44px; } }

.h2 { font-size: 24px; }
@media (min-width: 768px) { .h2 { font-size: 28px; } }

.h3 { font-size: 19px; }

.lead { font-size: 18px; color: var(--ink-muted); }
@media (min-width: 768px) { .lead { font-size: 20px; } }

.small { font-size: 14px; }
.muted { color: var(--ink-muted); }
.caption { font-size: 13px; color: var(--ink-muted); }

.overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.measure { max-width: 62ch; }
.measure-tight { max-width: 54ch; }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-2); }

/* ---- Site header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  max-width: var(--content-max);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .site-header__inner { padding: var(--space-2) var(--space-6); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand__mark { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.brand__sub { color: var(--ink-muted); font-weight: 400; }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
/* `:not(.btn)` matters. Without it these rules out-specify `.btn--primary`
   and repaint a button in the nav with the plain-link colour, which silently
   drops a white-on-teal button to muted-on-teal. */
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 15px;
  transition: background-color 130ms, color 130ms;
}
.site-nav a:not(.btn):hover { background: var(--surface-sunken); color: var(--ink); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--brand); font-weight: 500; }

/* The nav labels are secondary; on a phone the logo and the primary action
   are what matter, so the middle links step out of the way.
   Qualified with `a` so these beat `.site-nav a` above, which also sets
   display and would otherwise win on specificity and leave the nav wider
   than the phone. */
.site-nav a:not(.btn).site-nav__hide-sm { display: none; }
@media (min-width: 640px) {
  .site-nav a:not(.btn).site-nav__hide-sm { display: inline-flex; }
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 130ms, border-color 130ms, transform 130ms;
}
.btn:active { transform: translateY(1px); }

/* A disabled button has to look disabled. Without this a `disabled` primary
   keeps its full-strength teal and reads as the thing to press next. */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-strong); }

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--surface-sunken); }

.btn--ghost { background: transparent; color: var(--brand); padding: 0 var(--space-3); }
.btn--ghost:hover { background: var(--brand-tint); }

.btn--sm { min-height: 40px; font-size: 15px; padding: 0 var(--space-4); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}
@media (min-width: 768px) { .card { padding: var(--space-6); } }

.grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
  .grid { gap: var(--space-5); }
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Product card (the two products on the landing page) --------------- */
.product {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.product__head { display: flex; align-items: center; gap: var(--space-3); }
.product__mark {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  font-weight: 600; font-size: 20px;
}
.product__mark--logbook { background: var(--brand); color: var(--on-brand); }
.product__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.product__actions { margin-top: auto; padding-top: var(--space-2); }

/* ---- Feature list ------------------------------------------------------ */
.ticks > li {
  position: relative;
  padding-left: 28px;
  margin-top: var(--space-3);
}
.ticks > li:first-child { margin-top: 0; }
.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 10px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.ticks strong { font-weight: 600; }

/* ---- Chips and status -------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.chip--info { background: var(--info-tint); color: var(--info); border-color: var(--info); }
.chip--warning { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }
.chip--success { background: var(--success-tint); color: var(--success); border-color: var(--success); }
.chip--brand { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }

/* Status is never colour alone — every one of these carries its word. */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-md);
}
.notice--warning { background: var(--warning-tint); border-color: var(--warning); }
.notice--info { background: var(--info-tint); border-color: var(--info); }
.notice--success { background: var(--success-tint); border-color: var(--success); }
.notice__title { font-weight: 600; }
.notice--warning .notice__title { color: var(--warning); }
.notice--info .notice__title { color: var(--info); }
.notice--success .notice__title { color: var(--success); }
.notice__body { color: var(--ink); }
.notice__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.notice--warning .notice__icon { color: var(--warning); }
.notice--info .notice__icon { color: var(--info); }
.notice--success .notice__icon { color: var(--success); }

/* ---- Comparison table -------------------------------------------------- */
.compare-scroll { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 15px;
}
.compare th, .compare td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare thead th {
  background: var(--surface-sunken);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.compare tbody th { font-weight: 500; color: var(--ink-muted); width: 30%; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ---- Hero -------------------------------------------------------------- */
.hero { padding: var(--space-7) 0 var(--space-6); }
@media (min-width: 768px) { .hero { padding: 88px 0 72px; } }

.hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.hero-split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) {
  .hero-split { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); }
}

/* ---- The three jobs (Tuohy) -------------------------------------------- */
.job__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  display: inline-block;
}

/* ---- Screenshot slot --------------------------------------------------- */
/* Phase 1 placeholder. Real screenshots drop straight in here. */
.shot {
  background: var(--surface-sunken);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
  color: var(--ink-muted);
}

/* ---- Sandbox / trial panel -------------------------------------------- */
.trial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.trial__head {
  padding: var(--space-5);
  background: var(--brand);
  color: var(--on-brand);
}
.trial__head .lead { color: color-mix(in srgb, var(--on-brand) 82%, transparent); }
.trial__body { padding: var(--space-5); }
@media (min-width: 768px) {
  .trial__head, .trial__body { padding: var(--space-6); }
}

.state-choice { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .state-choice { grid-template-columns: 1fr 1fr; } }

.state-option {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
}
.state-option__name { font-weight: 600; }

.field { display: block; }
.field__label { display: block; font-weight: 500; margin-bottom: var(--space-1); }
.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: 16px; /* never smaller in a form — it stops iOS zooming */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}
.field__input::placeholder { color: var(--ink-muted); }
.field__hint { font-size: 14px; color: var(--ink-muted); margin-top: var(--space-1); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  padding: var(--space-6) 0;
  font-size: 15px;
}
.site-footer__grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
}
.site-footer h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 14px;
}

/* ---- Utilities --------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 50;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: top 130ms;
}
.skip-link:focus { top: var(--space-4); }

/* ---- Identifiers ------------------------------------------------------- */
/* Hospital numbers, NHS numbers and logins are mono, per the design system:
   a string that must be read character by character should not be set in a
   proportional face. */
.identifier {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  white-space: nowrap;
}