/* PKWORLD Host module · live-site layer (Phase 1, 15 Oct 2026).
   The delivered design CSS (host.css, apply.css, groups.css, b4.css) is used as delivered.
   This file only turns the design "frame" into a real page and gives real form
   controls the look of the design's drawn controls (.ctl). It adds no new look. */

html, body { margin: 0; }
body.agx { background: var(--pk-iceblue, #F5FEFF); }

/* The design frame is fixed at 360 or 1440 px; on the live site it fills the window.
   site.js sets vp-phone below 768 px, vp-desktop above, exactly as the frames switch. */
.frame.agx-frame { width: auto !important; min-height: 100vh; box-shadow: none; overflow: visible; }
.frame.agx-frame.vp-phone { min-height: 100vh; }

/* Phone tab bar sits on the window, not the frame. */
.agx-frame .tabbar { position: fixed; z-index: 40; }
.agx-frame.vp-phone .ws { padding-bottom: 72px; }
.agx-frame .ws { min-height: 100vh; }
.agx-frame .ws-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }

/* Links inside drawn components keep the component colour. */
.agx-frame a.nav-i, .agx-frame .tabbar a, .agx-frame .gs-nav a, .agx-frame .gs-foot a, .agx-frame a.btn { text-decoration: none; }

/* Real inputs inside the drawn control. The .ctl box keeps the design look. */
.ctl input, .ctl select, .ctl textarea {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; color: inherit; padding: 0; margin: 0; height: 44px;
}
.ctl select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.ctl textarea { height: auto; min-height: 96px; padding: 12px 0; resize: vertical; line-height: 1.5; }
.ctl.area { align-items: stretch; padding-top: 0; }   /* UI polish U9: the textarea carries the 12 px itself; host.css no longer adds a second 12 px */
.ctl input::placeholder, .ctl textarea::placeholder { color: var(--pk-muted, #8A9191); }
.ctl:focus-within { border-color: var(--pk-deepteal-fill, #216E85); background: #fff; box-shadow: 0 0 0 3px var(--pk-deepteal-tint, #E7F3F7); }
.ctl.err:focus-within { border-color: var(--pk-red-ink, #B02532); }
.ctl input[type=date] { min-width: 0; }

/* Clickable versions of drawn controls. */
label.pill-opt, label.rcard, label.check, .agx-click { cursor: pointer; }
label.pill-opt input, label.rcard input, label.check input, .agx-hide-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
button.toggle { border: 0; padding: 0; cursor: pointer; }
.up input[type=file] { display: none; }

/* 4-digit code boxes as one real input laid over the drawn boxes. */
.agx-otp { position: relative; display: inline-flex; }
.agx-otp input { position: absolute; inset: 0; opacity: 0; font-size: 16px; letter-spacing: 1em; }

/* Forms keep the block layout of the drawn screens. */
form.agx-form { margin: 0; }
.agx-hidden { display: none !important; }

/* Flash line under the page title (server messages). */
.agx-flash { margin-bottom: 16px; }

/* Modal and bottom sheet opened by site.js (same parts as the frames). */
.agx-modal-wrap { position: fixed; inset: 0; z-index: 1100; background: var(--pk-scrim, rgba(27,67,83,.40)); display: none; align-items: center; justify-content: center; padding: 16px; }
.agx-modal-wrap.open { display: flex; }
.vp-phone .agx-modal-wrap { align-items: flex-end; padding: 0; }

/* UI polish round (28 Oct 2026). Guest pages wear the site's own sticky header (64 px, z-index 1000):
   module dialogs open above it, and the module's sticky side columns start below it. */
body.agx-guest .rail, body.agx-guest .side, body.agx-guest .toc, body.agx-guest .wz-side { top: 80px; }
/* On phones the site's bottom nav sits at the very bottom; a page's own action bar (P-04) sits just above it. */
@media (max-width: 768px) { body.agx-has-bnav .agx-bar { bottom: 60px; } }