/* ============================================================
   shaiAcademy — FORMS
   Editorial forms: clear hierarchy, confident typography,
   live validation, autosave, mobile-first responsiveness.
   ============================================================ */

/* Form shell — sidebar + main + sticky footer */
.form-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1024px) {
  .form-shell { grid-template-columns: 240px 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .form-shell { grid-template-columns: 1fr; gap: 0; }
}

/* Sticky step nav (wizard) */
.form-sidebar {
  position: sticky;
  top: 80px;
}
@media (max-width: 768px) {
  .form-sidebar {
    position: relative;
    top: 0;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
  }
}

.form-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: opacity .15s;
}
.form-step:last-child { border-bottom: none; }
.form-step-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  flex: none;
}
.form-step.done .form-step-num { background: var(--ink); color: var(--paper); }
.form-step.active .form-step-num { background: var(--accent); color: var(--paper); }
.form-step-label { font-size: 13px; font-weight: 500; line-height: 1.3; }
.form-step-label .tiny { display: block; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.form-step.active .form-step-label { color: var(--ink); }
.form-step:not(.active):not(.done) .form-step-label { color: var(--ink-3); }

@media (max-width: 768px) {
  .form-sidebar { display: flex; gap: 0; overflow-x: auto; border-bottom: 2px solid var(--ink); padding-bottom: 0; scrollbar-width: none; }
  .form-sidebar::-webkit-scrollbar { display: none; }
  .form-step { border-bottom: none; padding: 10px 14px 10px 0; white-space: nowrap; }
  .form-step-label .tiny { display: none; }
  .form-step-num { width: 22px; height: 22px; font-size: 10px; }
}

/* Section — logical group inside form body */
.form-section {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.form-section-title {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.form-section-desc {
  color: var(--ink-3);
  font-size: 14px;
  margin-bottom: 24px;
  max-width: 56ch;
}
@media (max-width: 640px) {
  .form-section-title { font-size: 22px; }
}

/* Field */
.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.fld-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.fld-label .tiny { color: var(--ink-3); font-weight: 400; }
.fld-label .req { color: var(--accent); font-weight: 500; }
.fld-hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.fld-error {
  font-size: 12px;
  color: var(--accent);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.fld-success {
  font-size: 12px;
  color: oklch(0.58 0.14 145);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Input */
.inp, .sel, .txa {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-s);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.inp:hover, .sel:hover, .txa:hover { border-color: var(--ink-3); }
.inp:focus, .sel:focus, .txa:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.txa { min-height: 96px; resize: vertical; line-height: 1.5; }
.inp::placeholder, .txa::placeholder { color: var(--ink-4); }

.inp.err, .sel.err, .txa.err { border-color: var(--accent); }
.inp.ok { border-color: oklch(0.58 0.14 145); }

/* Prefix / suffix */
.inp-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--paper);
}
.inp-group:focus-within { border-color: var(--ink); }
.inp-group .inp {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.inp-group .inp:focus { outline: none; }
.inp-addon {
  padding: 11px 14px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.inp-addon-right { border-right: none; border-left: 1px solid var(--rule); }

/* Select */
.sel {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Radio cards */
.radio-group {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.radio-card {
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-s);
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: border-color .15s, background .15s;
  background: var(--paper);
}
.radio-card:hover { border-color: var(--ink-3); }
.radio-card.selected { border-color: var(--ink); background: var(--paper-2); }
.radio-card.selected.accent { border-color: var(--accent); background: oklch(0.96 0.04 45); }
.radio-dot {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--rule-strong);
  flex: none;
  margin-top: 2px;
  position: relative;
}
.radio-card.selected .radio-dot { border-color: var(--ink); }
.radio-card.selected .radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--ink);
}
.radio-card-label { font-weight: 500; font-size: 14px; line-height: 1.3; }
.radio-card-desc { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

/* Checkbox */
.chk {
  width: 18px; height: 18px;
  border: 2px solid var(--rule-strong);
  border-radius: 4px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--paper);
}
.chk.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chk-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
  user-select: none;
}

/* Switch */
.swt {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--rule-strong);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex: none;
}
.swt::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--paper);
  transition: transform .2s;
}
.swt.on { background: var(--ink); }
.swt.on::after { transform: translateX(16px); }

/* Field grid */
.fld-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}
.fld-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fld-grid-4 { grid-template-columns: repeat(4, 1fr); }
.fld-span-2 { grid-column: span 2; }
@media (max-width: 768px) {
  .fld-grid, .fld-grid-3, .fld-grid-4 { grid-template-columns: 1fr; gap: 14px; }
  .fld-span-2 { grid-column: auto; }
  .fld { margin-bottom: 14px; }
}

/* File upload */
.drop {
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: var(--paper-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover { border-color: var(--ink); background: var(--paper); }
.drop.drag { border-color: var(--accent); background: oklch(0.97 0.03 45); }
.drop-title { font-size: 14px; font-weight: 500; }
.drop-hint { font-size: 12px; color: var(--ink-3); }

.file-tile {
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-s);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--paper);
}
.file-preview {
  width: 48px; height: 48px;
  border-radius: var(--r-s);
  background: var(--paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}
.file-meta { flex: 1; min-width: 0; }
.file-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.file-bar {
  height: 3px;
  background: var(--paper-3);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.file-bar > span { display: block; height: 100%; background: var(--ink); }

/* DNI lookup result */
.dni-result {
  padding: 16px;
  background: oklch(0.97 0.02 145);
  border: 1px solid oklch(0.85 0.08 145);
  border-radius: var(--r-s);
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}
.dni-result .avatar { background: var(--ink); color: var(--paper); }

/* Signature pad */
.sig-pad {
  aspect-ratio: 3 / 1;
  border: 2px dashed var(--rule-strong);
  border-radius: var(--r-s);
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 40px, var(--rule) 40px, var(--rule) 41px),
    var(--paper);
  position: relative;
  cursor: crosshair;
  touch-action: none;
  max-width: 480px;
}
.sig-hint {
  position: absolute;
  bottom: 8px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.sig-line {
  position: absolute;
  bottom: 24px; left: 12px; right: 12px;
  border-top: 1px solid var(--ink);
}

/* Sticky footer */
.form-footer {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  margin: 40px -32px -32px;
  padding: 16px 32px;
  background: var(--paper);
  border-top: 1px solid var(--rule-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 5;
  backdrop-filter: saturate(1.2);
}
.form-footer-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.form-footer-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 768px) {
  .form-footer {
    margin: 24px -14px -14px;
    padding: 12px 14px;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form-footer-actions { flex-direction: row; }
  .form-footer-actions .btn { flex: 1; justify-content: center; }
  .form-footer-meta { justify-content: center; }
}

/* Save indicator */
.saving-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.saving-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: oklch(0.65 0.16 145);
}
.saving-dot.saving::before { background: var(--accent); animation: savPulse 1s infinite; }
@keyframes savPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Review row */
.rev-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.rev-row:last-child { border-bottom: none; }
.rev-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rev-value { font-size: 15px; font-weight: 500; line-height: 1.4; }
.rev-edit { font-size: 12px; color: var(--ink-3); }
@media (max-width: 640px) {
  .rev-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .rev-label { grid-column: 1 / -1; margin-bottom: 2px; }
}

/* Drawer (right-side) */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 520px;
  max-width: 100vw;
  height: 100dvh;
  background: var(--paper);
  border-left: 1px solid var(--rule-strong);
  box-shadow: var(--sh-lg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 18px 28px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
.drawer-foot {
  padding: 16px 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .drawer-head, .drawer-body { padding-left: 18px; padding-right: 18px; }
  .drawer-foot { padding: 12px 18px; }
}

/* Progress bar on top */
.wizard-progress {
  height: 3px;
  background: var(--paper-3);
  position: relative;
  margin-bottom: 32px;
}
.wizard-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .3s;
}

/* Page header for form pages */
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
}
.form-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 4px 0 0;
  font-weight: 500;
}
.form-title em { font-style: italic; font-family: var(--font-serif); }
.form-header-meta { text-align: right; font-size: 12px; color: var(--ink-3); flex: none; }
@media (max-width: 640px) {
  .form-header-meta { text-align: left; }
}

/* Severity chip (for incident report) */
.sev-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.sev-btn {
  padding: 10px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--paper);
  transition: all .15s;
}
.sev-btn.active { color: var(--paper); }
.sev-btn.active.low { background: oklch(0.55 0.14 145); border-color: oklch(0.55 0.14 145); }
.sev-btn.active.med { background: oklch(0.65 0.16 65); border-color: oklch(0.65 0.16 65); }
.sev-btn.active.high { background: var(--accent); border-color: var(--accent); }

/* Body map (incident) */
.body-map-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 640px) {
  .body-map-shell { grid-template-columns: 1fr; }
}

/* Meal macro editor */
.macro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 560px) {
  .macro-grid { grid-template-columns: repeat(2, 1fr); }
}
.macro-cell {
  padding: 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  text-align: center;
}
.macro-cell .num {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  margin: 6px 0 2px;
}

/* Calendar picker grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: var(--r-s);
  cursor: pointer;
  color: var(--ink-2);
}
.cal-day:hover { background: var(--paper-3); }
.cal-day.muted { color: var(--ink-4); }
.cal-day.sel { background: var(--ink); color: var(--paper); font-weight: 500; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--accent); }

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}
.time-slot {
  padding: 10px;
  text-align: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-s);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  background: var(--paper);
}
.time-slot:hover { border-color: var(--ink); }
.time-slot.sel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.time-slot.dis { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* Settings tabs */
.settings-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .settings-shell { grid-template-columns: 1fr; gap: 20px; }
}
.settings-tab {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.settings-tab.active { color: var(--ink); border-left-color: var(--ink); font-weight: 500; }
.settings-tab:hover:not(.active) { color: var(--ink-2); }
@media (max-width: 768px) {
  .settings-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .settings-tab.active { border-left-color: transparent; border-bottom-color: var(--ink); }
}

/* Attendance manual table inputs */
.att-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.att-pills { display: flex; gap: 4px; }
.att-pill {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink-3);
}
.att-pill.P.on { background: oklch(0.55 0.14 145); color: var(--paper); border-color: oklch(0.55 0.14 145); }
.att-pill.T.on { background: oklch(0.65 0.16 65); color: var(--paper); border-color: oklch(0.65 0.16 65); }
.att-pill.A.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.att-pill.J.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 560px) {
  .att-row { grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; }
  .att-row > .att-pills { grid-column: 1 / -1; justify-content: flex-end; }
  .att-pill { width: 28px; height: 28px; font-size: 11px; }
}