/* Shared presentation only. Field identities, drafts and payloads remain owned
   by the existing worksheets. No styling is applied to entry-only or trainer. */
:root {
  --folder: #decea9;
  --folder-edge: #b6a17a;
  --paper-ivory: #fbf8ef;
  --paper-rule: #d7cdb6;
  --ink-dark: #1f2f44;
}
body { background: var(--folder) !important; }
:focus-visible { outline: 3px solid #8a5a12 !important; outline-offset: 3px; }
body input, body select, body textarea { min-width: 0; }
body button { overflow-wrap: anywhere; }
body .field, body .cb-field, body .meta-item { min-width: 0; }
body .field input:not([type="checkbox"]):not([type="radio"]),
body .field select, body .field textarea,
body .cb-field input, body .cb-field select,
body .meta-item input, body .meta-item select,
body .ns-card input, body .ns-card select, body .ns-card textarea,
body .goal-card textarea, body .obj-row textarea {
  min-height: 44px; border-color: #b8aa8e; border-radius: 4px;
  background-color: #fffefa;
}
body select { background-position: right 14px center; padding-right: 42px !important; }
body button, body .btn, body .script-btn, body .modal-close,
body .ci, body .so, body .scale label, body .oo label { min-height: 44px; }
body .ci, body .so { line-height: 1.45; }
body .ci input, body .so input, body .step-chk { min-width: 20px; min-height: 20px; }
body .scale label, body .oo label { display: flex; align-items: center; justify-content: center; }
body .scale, body .oo { position: relative; }
/* Original pill radios were display:none; retain keyboard focus without
   changing their selected values, event bindings or automation contract. */
body .scale input, body .oo input {
  display: block; position: absolute; opacity: 0; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
body .scale input:focus-visible + label, body .oo input:focus-visible + label {
  outline: 3px solid #8a5a12; outline-offset: 3px;
}
body .scale input:checked + label, body .oo input:checked + label,
body .choice input:checked + label { font-weight: 700; box-shadow: inset 0 -3px currentColor; }
body .btn, body .button { border-radius: 4px; }

/* The paper sits in a restrained folder surround, without textures or props. */
body .page, body .shell {
  background: var(--paper-ivory); border: 1px solid var(--folder-edge);
  border-radius: 4px; box-shadow: 0 3px 10px rgb(70 52 20 / 8%);
  position: relative; overflow: visible; margin: 30px auto 24px;
}
body .page::before, body .shell::before {
  content: "Family record"; position: absolute; top: -29px; left: 24px;
  padding: 5px 18px 4px; background: var(--paper-ivory);
  border: 1px solid var(--folder-edge); border-bottom: 0;
  border-radius: 5px 5px 0 0; color: #68532d;
  font: 700 12px/1.5 var(--body, 'Poppins', sans-serif);
  letter-spacing: .1em; text-transform: uppercase;
}
body .record-references {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 0; margin: 0;
}
body .record-references > span {
  font-size: 13px; font-weight: 600; color: #514936; margin-right: 4px;
}
body .record-reference-btn, body .record-secondary {
  background: #fffdf7; color: var(--ink-dark); border: 1px solid #b8aa8e;
  padding: 8px 12px; border-radius: 4px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
body .record-reference-btn:hover, body .record-secondary:hover { background: #eee5d0; }

/* Original: contact identity precedes supporting metadata and reference tools. */
body .page { max-width: 1120px; }
body .header { background: transparent; border-bottom: 1px solid var(--paper-rule); }
body .header-top { padding: 12px 24px; flex-wrap: wrap; gap: 12px; }
body .logo-lockup { min-width: 0; flex-shrink: 1; }
body .logo-text { min-width: 0; }
body .contact-block {
  background: transparent; border: 0; border-top: 2px solid var(--ink-dark);
  border-bottom: 1px solid var(--paper-rule); border-radius: 0;
  margin: 0 24px; padding: 12px 0;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
}
body .contact-block .cb-field:first-child input { font-weight: 600; font-size: 15px; }
body .header-meta {
  margin: 0 24px; padding: 10px 0; gap: 10px;
  width: auto;
  border: 0; border-bottom: 1px solid var(--paper-rule); background: transparent;
}
body .meta-item input[type="date"], body .meta-item input[type="time"] {
  min-width: 0; width: 100%; max-width: 100%;
}
body .header-meta .call-timer { max-width: 100%; flex-wrap: wrap; }
body .call-timer { background: #fffdf7; border-color: #b8aa8e; border-radius: 4px; padding: 0 4px; }
body .timer-btn { min-width: 44px; }
body .recording-privacy-note {
  order: 2; background: transparent; border: 0; border-left: 2px solid var(--teal);
  border-radius: 0; padding: 3px 10px;
}
body .autosave-badge { background: transparent; color: #514936; opacity: 1 !important; }
body.worksheet-record .record-references { margin: 0 24px; }
body .quick-call-nav {
  background: transparent; color: var(--ink-dark); border: 1px solid #b8aa8e;
  border-radius: 4px; font-size: 14px; min-height: 44px; padding: 8px 12px;
}
body .quick-call-nav:hover { background: var(--ink-dark); color: #fbf8ef; }
body .student-block {
  background: #f3eedf; border: 1px solid var(--paper-rule);
  border-radius: 3px; margin: 10px 24px;
}
body .intent-banner { background: transparent; border-bottom: 1px solid var(--paper-rule); padding: 6px 24px; }
body .body { padding: 16px 24px 24px; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .section { min-width: 0; background: #fffdf7; border: 1px solid var(--paper-rule); border-radius: 3px; box-shadow: none; overflow: visible; }
body .section[class*="-accent"] { border-top-width: 2px; }
body .sh { background: #f3eedf; padding: 8px 14px; flex-wrap: wrap; }
body .send-zone { background: #f1ebda; border-top: 2px solid var(--ink-dark); padding: 16px 24px; }
body .send-zone > .btn-reset { align-self: flex-end; margin-top: 8px; color: #963d31; }
body #critical-badge {
  position: relative; inset: auto; margin: 16px auto; max-width: calc(100% - 24px);
  width: fit-content; border-radius: 4px; box-shadow: none; transform: none;
}
body.authed #critical-badge { display: flex; }
body #critical-badge.cb-tucked { bottom: auto; right: auto; }
body .footer { flex-wrap: wrap; gap: 8px; }
body.worksheet-record .footer p { color: #e6e1d5; }
body.worksheet-record dialog {
  margin: auto; max-height: calc(100dvh - 24px); max-width: min(780px, calc(100vw - 24px)) !important;
}
body.worksheet-record dialog > form > div:first-child { gap: 12px; }
body.worksheet-record dialog > form > div:first-child > div { min-width: 0; overflow-wrap: anywhere; }
body.worksheet-record dialog > form > div:first-child > button { min-width: 72px; flex-shrink: 0; }
body .eecm-table-wrap { max-width: 100%; }
body .eecm-table-wrap table { min-width: 620px; }
body .matrix-scroll-hint { display: none; }

/* Quick Call keeps its larger type; density comes from structure, not shrinking. */
body .topline { background: var(--ink-dark); min-height: 34px; }
body .shell { padding-top: 4px; max-width: 1120px; }
body .masthead { padding: 12px 0; border-bottom: 2px solid var(--ink-dark); }
body .brand img { width: auto; max-width: 138px; height: 64px; object-fit: contain; }
body .user-tools { min-width: 0; flex-wrap: wrap; gap: 4px; justify-content: flex-end; overflow-wrap: anywhere; }
body .panel { background: #fffdf7; border: 0; border-bottom: 1px solid var(--paper-rule); border-radius: 0; box-shadow: none; margin: 0 0 12px; overflow: visible; }
body .panel-heading { padding: 10px 0; border-bottom: 1px solid var(--paper-rule); background: transparent; }
body .panel-heading h2 { font-size: 22px; }
body .panel-index { border-radius: 3px; background: var(--ink-dark); color: #fbf8ef; width: 28px; height: 28px; }
body .panel-content { padding: 16px 0; }
body.quick-record .field input, body.quick-record .field select, body.quick-record .field textarea { font-size: 17px; min-height: 48px; }
body .field-lead input { font-weight: 600; }
body .record-metadata {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr 2fr; gap: 10px 16px;
  align-items: end; margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--paper-rule);
}
body .record-metadata .timer { flex-wrap: wrap; gap: 8px; }
body .record-metadata .timer-label { width: 100%; font-size: 14px; line-height: 1.2; }
body .record-metadata .timer time { font-size: 20px; min-width: 60px; }
body .record-metadata .save-status { grid-column: 1 / -1; font-size: 15px; }
body .timer button { border-radius: 4px; background: #fffdf7; border-color: #b8aa8e; }
body .choice label { border-radius: 4px; border-color: #b8aa8e; }
body .entry-end { background: #f1ebda; border: 0; border-top: 2px solid var(--ink-dark); border-radius: 0; align-items: flex-start; flex-direction: column; }
body .submit-actions { justify-content: flex-start; }
body .record-reset {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; border-top: 1px solid var(--paper-rule); margin-top: 20px; padding-top: 16px;
}
body .record-reset > span { font-size: 14px; color: #514936; }

/* Real student navigation, not decorative tabs. No elevated mobile layer
   that could paint over native dialogs, menus or submission controls. */
body .sibling-tabs-shell {
  background: transparent; border: 0; border-bottom: 2px solid var(--folder-edge);
  border-radius: 0; padding: 0; position: relative; z-index: auto;
}
body.worksheet-record .sibling-tabs-shell { margin: 12px 24px 0; }
body .sibling-tab-list { gap: 6px; }
body .sibling-tab-item {
  border-width: 1px; border-radius: 5px 5px 0 0;
  background: #e9ddbf; overflow: visible;
}
body .sibling-tab-item:has(.sibling-tab[aria-selected="true"]) {
  background: var(--paper-ivory); border-color: #7d6b46;
  box-shadow: inset 0 3px var(--sib-teal-dark);
}
body .sibling-status { border-radius: 3px; white-space: normal; }
body .sibling-summary { margin: 8px 0; font-size: 14px; }
body .sibling-scope-note { margin: 6px 0 10px; font-size: 14px; line-height: 1.45; color: #514936; }
body .sibling-actions { background: transparent; position: relative; z-index: auto; }
body .sibling-add { border-radius: 4px; border-width: 1px; }

@media (max-width: 1024px) {
  body .record-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .fields.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.worksheet-record { padding: 8px; }
  body .header-top { padding: 12px 16px; }
  body .contact-block, body .header-meta, body .student-block { margin-left: 16px !important; margin-right: 16px !important; }
  body .contact-block { padding: 12px 0 !important; }
  body .header-meta { padding: 10px 0 !important; }
  body.worksheet-record .record-references, body.worksheet-record .sibling-tabs-shell { margin-left: 16px; margin-right: 16px; }
  body .shell { margin: 30px 8px 24px; }
  body .send-zone > .btn-reset { align-self: stretch; }
}
@media (max-width: 600px) {
  body.worksheet-record { padding: 4px; }
  body .contact-block { grid-template-columns: 1fr !important; }
  body .logo-img { max-width: 110px; object-fit: contain; }
  body .logo-text h2 { font-size: 17px; }
  body .user-chip { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
  body .cb-field label, body .field label { font-size: 13px; }
  body .cb-field input, body .cb-field select { font-size: 14px; }
  body .field input[type="text"], body .field textarea { font-size: 14px; }
  body.quick-record .field label { font-size: 16px; }
  body .goals-grid { grid-template-columns: 1fr !important; }
  body .record-metadata { grid-template-columns: 1fr; }
  body .meta-item { flex: 1 1 100%; min-width: 0; }
  body .obcm, body .obj-grid { grid-template-columns: minmax(0, 1fr); }
  body .matrix-scroll-hint { display: block; font-size: 13px; padding: 0 20px; margin-top: 10px; color: #f4efdf; }
  body .fields.four { grid-template-columns: 1fr; }
  body .record-metadata .timer-label { width: auto; }
  body .record-metadata .save-status { grid-column: auto; }
  body .record-references > span { flex-basis: 100%; }
  body .quick-links.record-references { display: flex; }
  body .quick-links.record-references .button { flex: 1 1 140px; min-height: 44px; }
  body .record-reset { align-items: stretch; flex-direction: column; }
  body .sibling-tab-item { border-radius: 4px; }
  body .script-btn { white-space: normal; }
  body .flow-step { flex-wrap: wrap; }
  body .flow-step .sc { min-width: 120px; }
  body .ns-grid, body .price-controls { grid-template-columns: minmax(0, 1fr); }
  body .price-controls .field:first-child { grid-column: auto; }
}
@media print {
  body { background: white !important; padding: 0 !important; }
  body .page, body .shell { border: 0; box-shadow: none; margin: 0; padding: 0; }
  body .page::before, body .shell::before,
  body .topline, body .user-tools, body .record-references, body .record-reset,
  body .record-metadata .timer, body .save-status, body .entry-end,
  body .submit-actions, body #critical-badge, body dialog { display: none !important; }
  body .panel, body .section { break-inside: avoid; }
  body input, body textarea, body select { background: white !important; color: black !important; }
  body .price-comparison { background: white; color: black; border: 1px solid #777; }
  body .price-row span { color: black; }
}
