/* ============================================================
   Cortibase website — demo request page (+ thanks and 404 pages).
   Loads after site.css. Tokens only.
   Desktop: the demo page fits one viewport with no scrolling; vertical
   rhythm scales with window height. Phones stack tile + form and scroll.
   ============================================================ */

[hidden] { display: none !important; }

.skip-link { position: absolute; left: -10000px; top: 0; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--ink); color: var(--bg); padding: .6rem 1rem; font-weight: var(--fw-bold); }

.page-demo {
  --demo-pad-y: clamp(1.4rem, 4vh, 2.75rem);
  --demo-pad-x: clamp(1.75rem, 3vw, 3rem);
  --demo-gap: clamp(.5rem, 1.45vh, 1rem);
}

.demo .frame { padding: calc(var(--nav-h) + 2.5rem) 3.5rem 2.5rem; }

/* one bordered box, split: ink tile on the left, white form on the right */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--hair); background: var(--surface); }

/* ---------- left: value-prop tile ---------- */
.demo-tile {
  background: var(--surface-inverse); color: var(--text-on-ink);
  --hair: var(--hair-on-ink); --hair-dash: var(--hair-dash-on-ink); --muted: var(--muted-on-ink); --muted-2: var(--subtle-on-ink);
  padding: var(--demo-pad-y) var(--demo-pad-x); display: flex; flex-direction: column;
}
.demo-tile .eyebrow { margin: 0 0 var(--demo-gap); }
.demo-tile h1 {
  font-size: clamp(1.7rem, 4.3vh, 2.4rem); font-weight: var(--fw-bold); line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading); color: var(--text-on-ink); margin: 0 0 calc(var(--demo-gap) * .8); max-width: 18ch;
}
.tile-lead { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--muted); margin: 0 0 calc(var(--demo-gap) * 1.6); max-width: 44ch; font-weight: var(--fw-medium); }

.props { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--hair-dash); }
.prop { display: grid; grid-template-columns: 2.2rem 1fr; padding: var(--demo-gap) 0; border-bottom: 1px dashed var(--hair-dash); }
.prop-num { font-size: var(--fs-spec); font-weight: var(--fw-heavy); letter-spacing: var(--ls-wide); color: var(--crimson); padding-top: .2rem; }
.prop h2 { font-size: .98rem; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.3; color: var(--text-on-ink); margin: 0 0 .2rem; }
.prop p { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--muted); margin: 0; font-weight: var(--fw-medium); }

.tile-foot { margin: auto 0 0; padding-top: calc(var(--demo-gap) * 1.4); font-size: .8rem; font-weight: var(--fw-semibold); line-height: var(--lh-relaxed); color: var(--muted); }
.tile-foot b { color: var(--crimson); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; margin-right: .2rem; }

/* ---------- right: form ---------- */
.demo-panel { padding: var(--demo-pad-y) var(--demo-pad-x); display: flex; flex-direction: column; }
.demo-form h2, .form-success h2 {
  font-size: clamp(1.3rem, 3vh, var(--fs-heading-lg)); font-weight: var(--fw-bold); line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug); color: var(--ink); margin: 0 0 .4rem;
}
/* line the form title up with the tile headline (which sits under its eyebrow) */
.demo-form, .form-success { margin-top: calc(var(--fs-spec) * 1.35 + var(--demo-gap)); }
.form-intro { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--muted); margin: 0 0 calc(var(--demo-gap) * 1.6); font-weight: var(--fw-medium); }

.field { margin: 0 0 var(--demo-gap); }
/* label and error share one row, so validation never adds height */
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .4rem; }
.field label {
  color: var(--muted); font-size: var(--fs-label); font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap;
}
.field input, .field select {
  width: 100%; min-height: clamp(40px, 5.4vh, var(--field-h)); padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--white); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-control); font-weight: var(--fw-semibold);
  outline: none; transition: var(--transition-control); -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: var(--muted-2); font-weight: var(--fw-medium); }
.field select {
  padding-right: 40px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B615C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 14px center; /* tokens-ok: data-URI chevron; %236B615C == --muted */
}
.field select:invalid { color: var(--muted); }
.field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--border)); }
.field input:focus, .field select:focus { border-color: var(--focus-border); box-shadow: var(--ring-focus); }
.field-error { margin: 0; font-size: .74rem; line-height: 1.3; color: var(--warning); font-weight: var(--fw-bold); text-align: right; }
.field.has-error input, .field.has-error select { border-color: var(--warning); }

.form-status { margin: 0 0 var(--demo-gap); padding: .6rem .9rem; border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); }

/* honeypot: off-screen for people, visible to naive bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.submit { width: 100%; justify-content: center; border: 0; font-family: var(--font-sans); cursor: pointer; margin-top: calc(var(--demo-gap) * .6); min-height: clamp(42px, 5.6vh, var(--control-h)); }
.submit:focus-visible, .form-success .cta:focus-visible { outline: 2px solid var(--focus-border); outline-offset: 3px; }
.submit[disabled] { opacity: .7; cursor: progress; }
.form-note { margin: .7rem 0 0; font-size: .76rem; color: var(--muted); font-weight: var(--fw-medium); }

/* ---------- success ---------- */
.form-success { outline: none; }
.success-well { width: var(--well); height: var(--well); display: grid; place-items: center; margin-bottom: var(--demo-gap); background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.form-success p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--muted); margin: 0 0 calc(var(--demo-gap) * 1.6); }
.form-success p b { color: var(--ink); font-weight: var(--fw-bold); overflow-wrap: anywhere; }

/* ---------- desktop: whole page in one viewport ---------- */
@media (min-width: 901px) { /* --bp-mobile */
  .page-demo { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  .page-demo main { flex: 1 0 auto; display: flex; }
  .page-demo .demo { flex: 1; display: flex; }
  .page-demo .demo .frame {
    flex: 1; display: flex; align-items: center;
    padding: calc(var(--nav-h) + var(--demo-pad-y) * .6) 3.5rem calc(var(--demo-pad-y) * .6);
  }
  .page-demo .demo-grid { flex: 1; }
  .page-demo .foot { margin-top: 0; }
  .page-demo .foot-inner { padding-top: .85rem; padding-bottom: .85rem; }
}
/* short laptop windows: drop the two optional lines */
@media (min-width: 901px) and (max-height: 700px) {
  .tile-lead, .form-note { display: none; }
  .demo-tile h1 { margin-bottom: var(--demo-gap); }
}

/* narrow desktops: wider text columns so pointer lines don't wrap and push past the fold */
@media (min-width: 901px) and (max-width: 1180px) {
  .page-demo { --demo-pad-x: 1.6rem; }
  .page-demo .demo .frame { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* an error banner replaces the intro line instead of adding height */
.demo-form:has(.form-status:not([hidden])) .form-intro { display: none; }

/* ---------- thanks + 404 pages ---------- */
.page-simple .frame { padding: calc(var(--nav-h) + 6rem) 3.5rem 6rem; min-height: 70vh; }
.page-simple h1 { font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); margin: 0 0 1.2rem; max-width: 20ch; }
.page-simple .lead { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--muted); max-width: 40rem; margin: 0 0 2.4rem; font-weight: var(--fw-medium); }

/* ---------- phones and tablets: stack and scroll ---------- */
@media (max-width: 900px) { /* --bp-mobile */
  .demo .frame, .page-simple .frame { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 2.5rem; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-tile, .demo-panel { padding: 2.2rem 1.5rem; }
  .demo-form, .form-success { margin-top: 0; }
  .page-demo .foot { margin-top: 2rem; }
}
@media (max-width: 480px) { /* --bp-phone */
  .demo .frame { padding-left: 0; padding-right: 0; border-left: 0; border-right: 0; }
  .demo-grid { border-left: 0; border-right: 0; }
  .prop { grid-template-columns: 2rem 1fr; }
  .field-top { flex-wrap: wrap; }
  .field-error { text-align: left; }
}