/* Application integration for the approved Claude Quiet Clinic markup. */
* { box-sizing: border-box; }
html { min-width: 20rem; background: var(--fc-paper); }
body { margin: 0; min-height: 100vh; background: var(--fc-paper); color: var(--fc-text); font-family: var(--fc-font-ui); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link { position: fixed; z-index: 100; top: var(--fc-space-2); left: var(--fc-space-2); transform: translateY(-160%); padding: var(--fc-space-2) var(--fc-space-3); background: var(--fc-card); color: var(--fc-text); border-radius: var(--fc-radius-sm); }
.skip-link:focus { transform: none; }
.fc-rail { order: -1; }
.fc-navitem { width: 100%; border: 0; background: transparent; color: var(--fc-text-on-ink-2); text-align: left; font: inherit; cursor: pointer; }
.fc-rail__brand { border: 0; }
.fc-page:focus { outline: 0; box-shadow: none; }
.fc-topbar .fc-cluster { justify-content: flex-end; }

/* Sign in: the only full-ink screen, matching screens.html. */
#app:has(.auth-panel) { min-height: 100vh; background: var(--fc-ink); }
.auth-panel { width: min(100%, 34rem); min-height: 100vh; padding: clamp(var(--fc-space-6), 8vw, var(--fc-space-9)); display: flex; flex-direction: column; justify-content: center; gap: var(--fc-space-4); background: var(--fc-ink); color: var(--fc-text-on-ink); }
.auth-brand { margin: 0 0 var(--fc-space-3); color: var(--fc-text-on-ink); font-family: var(--fc-font-display); font-size: 1.625rem; }
.auth-panel h1 { margin: 0; color: var(--fc-text-on-ink); white-space: pre-line; }
.auth-message { margin: 0 0 var(--fc-space-5); color: var(--fc-text-on-ink-3); font-size: var(--fc-size-body-lg); }
.auth-panel .fc-btn--block { margin-top: var(--fc-space-2); }
.auth-recovery { align-self: flex-start; min-height: var(--fc-control-h); padding: 0; border: 0; background: transparent; color: var(--fc-text-on-ink-3); text-decoration: underline; }
.auth-panel--native { width: min(100%, 31.5rem); margin-inline: auto; padding-inline: clamp(var(--fc-space-4), 6vw, var(--fc-space-7)); }
.clerk-sign-in-host { width: 100%; min-width: 0; display: flex; justify-content: center; }
.clerk-sign-in-host > * { min-width: 0; max-width: 100%; }
.care-space-form { display: flex; flex-direction: column; gap: var(--fc-space-4); }

/* Live application fields and controls inherit the Claude component contract. */
.loved-one-switcher { width: min(28rem, 100%); }
.loved-one-switcher label { gap: var(--fc-space-2); }
.add-menu { position: relative; align-self: flex-end; margin-top: calc((var(--fc-space-5) + var(--fc-control-h)) * -1); z-index: 3; }
.add-menu summary { list-style: none; }
.add-menu summary::-webkit-details-marker { display: none; }
.add-menu [role="menu"] { position: absolute; right: 0; top: calc(100% + var(--fc-space-2)); min-width: 15rem; padding: var(--fc-space-2); display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--fc-line); border-radius: var(--fc-radius-md); box-shadow: var(--fc-shadow-md); background: var(--fc-card); }
.add-menu [role="menu"] button { justify-content: flex-start; min-height: var(--fc-control-h); }
.care-workspace-content { display: flex; flex-direction: column; gap: var(--fc-space-5); min-width: 0; }
.workspace-person { margin: var(--fc-space-1) 0 0; color: var(--fc-text); }
.workspace-context, .workspace-context.fc-faint { margin: calc(var(--fc-space-4) * -1) 0 0; color: var(--fc-text); font-size: var(--fc-size-sm); }
.overview-task-list { margin: 0; padding-left: var(--fc-space-5); color: var(--fc-text-muted); }
.fc-hero__date .fc-eyebrow { margin: 0; color: var(--fc-text-on-ink-3); }
.fc-hero__date .fc-hero-numeral { margin: var(--fc-space-2) 0 var(--fc-space-1); }
.fc-hero__date > p:last-child { margin: 0; color: var(--fc-text-on-ink-2); }
.fc-hero .fc-display-2 { margin: var(--fc-space-3) 0; color: var(--fc-text-on-ink); }
.fc-hero__meta { margin: var(--fc-space-1) 0; color: var(--fc-text-on-ink-2); }
.appointment-actions, .appointment-lifecycle, .contact-actions, .dialog-actions { display: flex; align-items: center; gap: var(--fc-space-3); flex-wrap: wrap; margin-top: var(--fc-space-4); }
.appointment-section { display: flex; flex-direction: column; gap: var(--fc-space-4); }
.appointment-section > h2, .appointment-lifecycle .form-status { margin: 0; }
.appointment-lifecycle .form-status { flex: 1 1 100%; }
.contact-address { margin-bottom: 0; }
.map-address { color: var(--fc-ink); font-weight: 600; text-decoration-color: var(--fc-clay); text-underline-offset: .2em; }
.map-address:hover { color: var(--fc-clay); }
.archive-contact-dialog form { display: flex; flex-direction: column; gap: var(--fc-space-4); }
.archive-contact-dialog .fc-label { display: flex; flex-direction: column; gap: var(--fc-space-2); }

.appointment-form, .coordination-form, .administration-form { padding: var(--fc-space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-space-4); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-md); background: var(--fc-card); box-shadow: var(--fc-shadow-sm); }
.appointment-form label, .coordination-form label, .administration-form label { display: flex; flex-direction: column; gap: var(--fc-space-2); color: var(--fc-text); font-size: var(--fc-size-sm); font-weight: 600; }
.appointment-form input, .appointment-form select, .appointment-form textarea, .coordination-form input, .coordination-form select, .coordination-form textarea, .administration-form input, .administration-form select, .administration-form textarea { width: 100%; min-height: var(--fc-control-h); padding: var(--fc-space-2) var(--fc-space-3); border: 1px solid var(--fc-border-field); border-radius: var(--fc-radius-sm); background: var(--fc-card); color: var(--fc-text); }
.appointment-form textarea, .coordination-form textarea { min-height: 7rem; resize: vertical; }
.appointment-form button, .coordination-form button, .administration-form button, .content-state button, .coordination-card button, .appointment-card button, .confirm-dialog button, .account-dialog button { min-height: var(--fc-control-h); padding: 0 var(--fc-space-4); border: 1px solid transparent; border-radius: var(--fc-radius-sm); background: var(--fc-clay); color: #fff; font-weight: 600; }
.button-secondary { background: var(--fc-card) !important; color: var(--fc-text) !important; border-color: var(--fc-border-field) !important; }
.button-danger { background: var(--fc-card) !important; color: var(--fc-clay) !important; border-color: var(--fc-clay) !important; }
.form-person, .form-status, .conditional-location, .appointment-form h2, .coordination-form h2, .administration-form h2 { grid-column: 1 / -1; }
.form-person { margin: 0; color: var(--fc-text-muted); }
.form-status[role="alert"] { color: var(--fc-clay); font-weight: 700; }
.conditional-location { display: contents; }
.people-access-card { display: flex; flex-direction: column; gap: var(--fc-space-3); }
.people-access-card > h3, .people-access-card > p { margin: 0; }
.people-access-controls { display: flex; align-items: flex-end; gap: var(--fc-space-3); flex-wrap: wrap; }
.people-access-controls label { flex: 1 1 13rem; }
.people-access-controls .form-status { flex: 1 1 100%; margin: 0; }

.coordination-card, .appointment-card, .content-state { padding: var(--fc-space-5); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-md); background: var(--fc-card); box-shadow: var(--fc-shadow-sm); }
.coordination-card h2, .appointment-card h2, .content-state h2 { margin-top: 0; font-family: var(--fc-font-display); }
.record-metadata, .appointment-metadata, .account-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--fc-space-2) var(--fc-space-4); }
.record-metadata dt, .appointment-metadata dt, .account-details dt { font-weight: 700; }
.record-metadata dd, .appointment-metadata dd, .account-details dd { margin: 0; overflow-wrap: anywhere; }
.reference-reminder, .content-state { color: var(--fc-text); }

.account-dialog, .confirm-dialog { width: min(34rem, calc(100% - (var(--fc-space-4) * 2))); padding: var(--fc-space-6); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-md); background: var(--fc-card); color: var(--fc-text); }
.account-dialog::backdrop, .confirm-dialog::backdrop { background: rgb(22 35 58 / 72%); }
.account-dialog h2, .confirm-dialog h2 { margin-top: 0; font-family: var(--fc-font-display); }

@media (max-width: 860px) {
  .fc-app { display: block; padding-bottom: 5.25rem; }
  .fc-rail { position: fixed; inset: auto 0 0; z-index: 30; width: 100%; min-height: auto; padding: var(--fc-space-2); display: block; border-top: 1px solid var(--fc-line); background: var(--fc-card); color: var(--fc-text-faint); }
  .fc-rail__brand, .fc-rail__foot { display: none; }
  .fc-rail__nav { flex-direction: row; gap: var(--fc-space-1); }
  .fc-navitem { flex: 1 1 0; min-width: 0; min-height: var(--fc-control-h); padding: var(--fc-space-1); flex-direction: column; justify-content: center; gap: var(--fc-space-1); color: var(--fc-text-muted); font-size: .64rem; text-align: center; }
  .fc-navitem:hover { background: var(--fc-card-alt); color: var(--fc-text); }
  .fc-navitem[aria-current="page"] { background: var(--fc-clay-soft); color: var(--fc-clay); }
  .fc-topbar { min-height: auto; padding: var(--fc-space-4); flex-wrap: wrap; }
  .fc-topbar .fc-context { flex: 1 1 100%; margin: 0; }
  .fc-page { padding: var(--fc-space-5) var(--fc-space-4); }
  .add-menu { width: 100%; margin: 0; }
  .add-menu summary { width: 100%; }
  .add-menu [role="menu"] { left: 0; right: 0; }
}

@media (max-width: 34rem) {
  .appointment-form, .coordination-form, .administration-form { grid-template-columns: 1fr; padding: var(--fc-space-5); }
  .record-metadata, .appointment-metadata, .account-details { grid-template-columns: 1fr; }
  .fc-topbar .fc-cluster { width: 100%; justify-content: flex-start; }
  .fc-topbar .fc-btn { flex: 1; }
  .people-access-controls > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }
@media (forced-colors: active) { button, [aria-current="page"], article, form { border: 1px solid CanvasText; } }