/* Client intake questionnaire. Layered on styles-guru.css, uses its tokens. */

/* [hidden] must win over the display rules below, or hiding the save bar and
   the form after a successful submit silently does nothing. */
[hidden] { display: none !important; }

/* Only the vertical padding. A shorthand here would zero out the 24px
   horizontal padding .container supplies, pinning the form to the very
   left edge of the viewport. */
.intake-wrap { padding-top: 2.2rem; padding-bottom: 4rem; }
.intake-intro { max-width: 62ch; font-size: 1.03rem; color: var(--ink-soft); }
.intake-intro p { margin: 0 0 .85rem; }

.intake-notice {
  max-width: 72ch; margin: 1.6rem 0 2.2rem; padding: 1.15rem 1.3rem;
  background: var(--navy-tint); border: 1px solid var(--line);
  border-left: 4px solid var(--navy); border-radius: var(--radius-sm);
}
.intake-notice h2 {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
  margin: 0 0 .6rem;
}
.intake-notice p { margin: 0 0 .7rem; font-size: .93rem; color: var(--ink-soft); }
.intake-notice p:last-child { margin-bottom: 0; }

/* Layout: sticky section index beside the form on wide screens. */
.intake-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .intake-layout { grid-template-columns: 1fr; gap: 1.2rem; } }

.intake-toc { position: sticky; top: 1rem; display: flex; flex-direction: column; font-size: .87rem; }
.intake-toc .toc-head {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); padding: 0 0 .5rem;
}
.intake-toc a {
  padding: .32rem .6rem; color: var(--ink-soft); border-left: 2px solid var(--line-soft);
  line-height: 1.35;
}
.intake-toc a:hover { color: var(--navy); border-left-color: var(--brass); }
.intake-toc a.here { color: var(--navy); font-weight: 600; border-left-color: var(--navy); background: var(--surface-2); }
@media (max-width: 900px) {
  .intake-toc { position: static; flex-flow: row wrap; gap: .3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
  .intake-toc .toc-head { width: 100%; padding-bottom: .3rem; }
  .intake-toc a { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; }
  .intake-toc a.here { border-color: var(--navy); }
}

/* Save bar */
.save-bar {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; margin-bottom: 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.save-state { font-size: .85rem; color: var(--ink-mute); }
.save-state.saved::before { content: "\2713\00a0"; font-weight: 700; }
.btn-clear {
  font: inherit; font-size: .82rem; color: var(--ink-soft); background: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .3rem .7rem; cursor: pointer;
}
.btn-clear:hover { border-color: var(--navy); color: var(--navy); }

/* Sections */
.isec { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  padding: 1.3rem 1.4rem 1.5rem; margin: 0 0 1.5rem; scroll-margin-top: 1rem; }
.isec legend {
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; color: var(--navy);
  padding: 0 .5rem; margin-left: -.5rem;
}
.sec-blurb { margin: .2rem 0 1.1rem; font-size: .92rem; color: var(--ink-soft); max-width: 68ch; }
.q-note { margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-mute); max-width: 68ch; }

/* Question grid: two columns of short fields, full width for long ones. */
.qgridwrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.4rem; }
@media (max-width: 720px) { .qgridwrap { grid-template-columns: 1fr; } }
.q { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.q.full { grid-column: 1 / -1; }

.q label, .q .qlabel { font-size: .87rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.q .req { color: var(--brass-deep); }

.q input[type=text], .q input[type=date], .q input[type=time], .q input[type=tel],
.q input[type=email], .q input[type=number], .q select, .q textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--paper-warm);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .65rem;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.q textarea { resize: vertical; min-height: 4.6rem; line-height: 1.5; }
.q input:focus, .q select:focus, .q textarea:focus {
  outline: 2px solid var(--navy-600); outline-offset: 1px; border-color: var(--navy-600);
  background: var(--surface);
}
/* Invalid state carries a word and a mark, never colour alone. */
.q.invalid input, .q.invalid select, .q.invalid textarea { border-color: var(--red); border-width: 2px; }
.q.invalid > label::after { content: " \26A0 needed"; color: var(--red); font-weight: 700; font-size: .8rem; }

/* Radio and checkbox groups */
.opts { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.opts-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .35rem .8rem; }
.opt { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 400;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .34rem .7rem; cursor: pointer; background: var(--paper-warm); }
.opt:hover { border-color: var(--navy-600); }
.opt input { accent-color: var(--navy); margin: 0; }
.opt:has(input:checked) { border-color: var(--navy); background: var(--navy-tint); color: var(--navy); font-weight: 600; }
.opts-wrap .opt { border: none; background: none; padding: .2rem 0; }
.opts-wrap .opt:has(input:checked) { background: none; }

/* Repeating grids (drinks, medications) */
.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.qgrid { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .9rem; }
.qgrid th { font-family: var(--font-body); font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-mute); text-align: left; padding: .3rem .4rem; }
.qgrid tbody th { color: var(--ink-faint); font-weight: 600; width: 1.6rem; text-align: right; }
.qgrid td { padding: .16rem .2rem; }
.qgrid input { font: inherit; font-size: .9rem; width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .38rem .5rem;
  background: var(--paper-warm); }

/* Uploads */
.up-budget { font-size: .87rem; color: var(--ink-soft); margin: 0 0 1rem; }
.q-file input[type=file] { font: inherit; font-size: .9rem; padding: .5rem 0; }
.up-list { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .85rem; color: var(--ink-soft); }
.up-list li { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; }
.up-list li .sz { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.up-list li.bad { color: var(--red); font-weight: 600; }
.up-list li.bad::before { content: "\26A0"; }

/* Submit */
.submit-bar { position: sticky; bottom: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-md); margin-top: .5rem; }
.submit-note { margin: 0 0 .7rem; font-size: .86rem; color: var(--ink-mute); }
.btn-submit { width: 100%; font-size: 1.02rem; padding: .9rem 1.5rem; }
.btn-submit[disabled] { opacity: .65; cursor: progress; }
.form-errors { margin: 0 0 .8rem; padding: .7rem .9rem; font-size: .89rem; font-weight: 600;
  color: var(--red); background: var(--red-soft); border: 1px solid var(--red);
  border-radius: var(--radius-sm); }
.form-errors::before { content: "\26A0\00a0"; }

.up-progress { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-bottom: .7rem; }
.up-progress-fill { height: 100%; width: 0; background: var(--navy); transition: width 160ms linear; }

.intake-done { border: 1px solid var(--line); border-left: 4px solid var(--navy);
  border-radius: var(--radius-md); background: var(--surface); padding: 1.6rem 1.5rem; }
.intake-done h2 { margin-bottom: .5rem; }
.intake-done p { margin: 0; color: var(--ink-soft); }

@media print {
  .topbar, .site-header, .site-footer, .intake-toc, .save-bar, .submit-bar, #upProgress { display: none; }
  .isec { break-inside: avoid; border-color: #999; }
  .intake-layout { display: block; }
}