/*
 * Cryo Booking — front end.
 *
 * Written to sit inside Mark's custom theme rather than on top of it: no reset,
 * no font stack, no colour that is not derived from a custom property the theme
 * can override. Everything is scoped under .cryo so nothing here can reach a
 * page it was not put on.
 *
 * The palette falls back to the theme's teal if the theme does not define these.
 */

.cryo {
  --cryo-ink: var(--wp--preset--color--foreground, #12333a);
  --cryo-ink-soft: color-mix(in srgb, var(--cryo-ink) 62%, transparent);
  --cryo-line: color-mix(in srgb, var(--cryo-ink) 14%, transparent);
  --cryo-accent: var(--wp--preset--color--primary, #0f7c8a);
  --cryo-surface: color-mix(in srgb, var(--cryo-accent) 5%, transparent);
  --cryo-warn: #8a5a00;
  --cryo-danger: #9b2226;
  --cryo-radius: 10px;

  color: var(--cryo-ink);
  line-height: 1.55;
}

.cryo * { box-sizing: border-box; }

/* --- Header ------------------------------------------------------------- */

.cryo-panel {
  background: var(--cryo-surface);
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/*
 * The empty header used to be a full-height welcome panel, which pushed the
 * client's own record below the fold on every visit — written for somebody's
 * first five minutes and then shown to them for years.
 */
.cryo-panel--empty { padding: 1rem 1.25rem; }
.cryo-panel--empty h2 { font-size: 1.15rem; margin-bottom: .35rem; }

.cryo-eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  color: var(--cryo-ink-soft);
  margin: 0 0 .35rem;
}

.cryo-panel h2 { margin: 0 0 .35rem; font-size: 1.6rem; line-height: 1.2; }
.cryo-panel h2 a { color: inherit; text-decoration: none; }
.cryo-panel h2 a:hover { text-decoration: underline; }

.cryo-sub, .cryo-util { margin: 0 0 .75rem; color: var(--cryo-ink-soft); font-size: .95rem; }
.cryo-arrival { margin: 0 0 1rem; font-size: .95rem; }

/* --- Buttons ------------------------------------------------------------ */

.cryo-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cryo-inline-form { display: inline; margin: 0; }

.cryo-btn {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: var(--cryo-radius);
  border: 1px solid var(--cryo-accent);
  background: transparent;
  color: var(--cryo-accent);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
}

.cryo-btn:hover { background: color-mix(in srgb, var(--cryo-accent) 10%, transparent); }
.cryo-btn--primary { background: var(--cryo-accent); color: #fff; }
.cryo-btn--primary:hover { background: color-mix(in srgb, var(--cryo-accent) 85%, #000); }
.cryo-btn--quiet { border-color: var(--cryo-line); color: var(--cryo-ink-soft); }
.cryo-btn--danger { border-color: var(--cryo-danger); color: var(--cryo-danger); }
.cryo-btn--danger:hover { background: color-mix(in srgb, var(--cryo-danger) 8%, transparent); }

/*
 * A withheld action is a sentence, never a disabled button. A disabled button
 * says "no" and nothing else; this says what would have to be different.
 */
.cryo-withheld-block { margin: 1rem 0 0; }
.cryo-withheld {
  margin: 0 0 .4rem;
  font-size: .9rem;
  color: var(--cryo-ink-soft);
  padding-left: .9rem;
  border-left: 2px solid var(--cryo-line);
}
.cryo-withheld-label { font-weight: 600; color: var(--cryo-ink); }

.cryo-warning {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--cryo-warn);
}
.cryo-warning--sar {
  background: color-mix(in srgb, var(--cryo-warn) 8%, transparent);
  border-left: 3px solid var(--cryo-warn);
  padding: .6rem .8rem;
  border-radius: 0 var(--cryo-radius) var(--cryo-radius) 0;
}

.cryo-fine { font-size: .85rem; color: var(--cryo-ink-soft); }

/* --- Notices ------------------------------------------------------------ */

.cryo-notice {
  padding: .75rem 1rem;
  border-radius: var(--cryo-radius);
  border-left: 3px solid var(--cryo-accent);
  background: var(--cryo-surface);
  margin-bottom: 1.25rem;
}
.cryo-notice--warning { border-left-color: var(--cryo-warn); background: color-mix(in srgb, var(--cryo-warn) 7%, transparent); }
.cryo-notice--success { border-left-color: var(--cryo-accent); }

/* --- Pills -------------------------------------------------------------- */

.cryo-pill {
  display: inline-block;
  font-size: .75rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--cryo-line);
  color: var(--cryo-ink-soft);
  white-space: nowrap;
}
.cryo-pill--confirmed { border-color: var(--cryo-accent); color: var(--cryo-accent); }
.cryo-pill--pending_clinic_approval,
.cryo-pill--pending_client_acceptance { border-color: var(--cryo-warn); color: var(--cryo-warn); }
.cryo-pill--cancelled, .cryo-pill--declined, .cryo-pill--no_show { border-color: var(--cryo-danger); color: var(--cryo-danger); }
.cryo-pill--internal { border-style: dashed; }

/* --- Lists -------------------------------------------------------------- */

.cryo-list, .cryo-record, .cryo-day, .cryo-waiting, .cryo-history { margin-bottom: 2rem; }
.cryo-list h3, .cryo-record h3, .cryo-waiting h3, .cryo-history h3 { font-size: 1.05rem; margin: 0 0 .75rem; }

.cryo-list ul, .cryo-day-rows, .cryo-entries, .cryo-waiting ul {
  list-style: none; margin: 0; padding: 0;
}

.cryo-row a {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--cryo-line);
  color: inherit; text-decoration: none;
}
.cryo-row a:hover { background: var(--cryo-surface); }
.cryo-row-when { font-weight: 600; min-width: 11rem; }
.cryo-row-what { flex: 1 1 auto; color: var(--cryo-ink-soft); }
.cryo-list--past .cryo-row a { opacity: .75; }

/* --- The day ------------------------------------------------------------ */

.cryo-day-appt a {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline;
  padding: .8rem .75rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  margin-bottom: .4rem;
  color: inherit; text-decoration: none;
}
.cryo-day-appt a:hover { border-color: var(--cryo-accent); }
.cryo-day-appt.is-now a { border-color: var(--cryo-accent); border-width: 2px; background: var(--cryo-surface); }
.cryo-day-appt.is-past a { opacity: .6; }
.cryo-day-appt.is-cancelled .cryo-day-who { text-decoration: line-through; }

.cryo-day-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5rem; }
.cryo-day-who { font-weight: 600; }
.cryo-day-what { color: var(--cryo-ink-soft); flex: 1 1 auto; }
.cryo-day-buffers { font-size: .75rem; color: var(--cryo-ink-soft); }

.cryo-day-gap {
  display: flex; gap: .75rem;
  padding: .45rem .75rem;
  margin-bottom: .4rem;
  font-size: .9rem;
  color: var(--cryo-ink-soft);
  border-left: 2px dashed var(--cryo-line);
}
.cryo-day-gap.is-past { opacity: .5; }

.cryo-day-now {
  position: relative;
  margin: .6rem 0;
  border-top: 2px solid var(--cryo-danger);
  font-size: .75rem;
  color: var(--cryo-danger);
}
.cryo-day-now span { position: relative; top: -.7rem; background: var(--wp--preset--color--background, #fff); padding-right: .5rem; }

.cryo-daynav { display: flex; gap: 1rem; margin-top: 1rem; font-size: .9rem; }

/* --- Entries ------------------------------------------------------------ */

.cryo-entry {
  padding: .9rem 0;
  border-bottom: 1px solid var(--cryo-line);
}
.cryo-entry.is-unread { border-left: 3px solid var(--cryo-accent); padding-left: .8rem; }
.cryo-entry.is-attached { background: var(--cryo-surface); padding-left: .8rem; }
.cryo-entry h4 { margin: 0 0 .35rem; font-size: 1rem; }
.cryo-entry-meta { margin: 0 0 .25rem; font-size: .8rem; color: var(--cryo-ink-soft); }
.cryo-entry-body p { margin: 0 0 .6rem; }

.cryo-entry-more summary { cursor: pointer; list-style: none; }
.cryo-entry-more summary::-webkit-details-marker { display: none; }
.cryo-more {
  display: inline-block;
  margin-left: .4rem;
  font-size: .85rem;
  color: var(--cryo-accent);
  text-decoration: underline;
}
.cryo-entry-more[open] summary .cryo-excerpt { display: none; }
.cryo-entry-more[open] .cryo-more::after { content: ''; }
.cryo-entry-more[open] summary .cryo-more { display: none; }

/* --- Forms -------------------------------------------------------------- */

.cryo-note-form, .cryo-signin-form { margin-top: 1.5rem; }
.cryo-note-form label, .cryo-signin-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.cryo-note-form textarea, .cryo-signin-form input[type="email"] {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  font: inherit;
  margin-bottom: .6rem;
}
.cryo-visibility { border: 0; padding: 0; margin: .5rem 0; }
.cryo-visibility legend { font-weight: 600; padding: 0; margin-bottom: .35rem; }
.cryo-visibility label { display: block; font-weight: 400; }

/* --- Detail ------------------------------------------------------------- */

.cryo-back { font-size: .9rem; margin-bottom: .5rem; }
.cryo-detail h2 { margin: 0 0 .35rem; }
.cryo-detail-when { color: var(--cryo-ink-soft); margin: 0 0 1.25rem; }

.cryo-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1.5rem; }
.cryo-facts dt { color: var(--cryo-ink-soft); font-size: .9rem; }
.cryo-facts dd { margin: 0; }

.cryo-empty { color: var(--cryo-ink-soft); }
.cryo-portal-foot { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cryo-line); }

/* --- Sign in ------------------------------------------------------------ */

.cryo-signin { max-width: 32rem; }
.cryo-signin h2 { margin-top: 0; }

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 40rem) {
  .cryo-panel { padding: 1.1rem; }
  .cryo-panel h2 { font-size: 1.3rem; }
  .cryo-row-when { min-width: 0; width: 100%; }
  .cryo-day-appt a { gap: .4rem .75rem; }
  .cryo-day-what { flex-basis: 100%; }
  .cryo-facts { grid-template-columns: 1fr; gap: 0 0; }
  .cryo-facts dd { margin-bottom: .6rem; }
  .cryo-btn { padding: .65rem 1rem; }
}

@media print {
  .cryo-actions, .cryo-note-form, .cryo-portal-foot, .cryo-daynav { display: none; }
  .cryo-entry-more > div { display: block !important; }
}

/* --- The picker --------------------------------------------------------- */

.cryo-trail {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  font-size: .8rem; color: var(--cryo-ink-soft);
}
.cryo-trail li::after { content: '›'; margin-left: .5rem; opacity: .5; }
.cryo-trail li:last-child::after { content: ''; }
.cryo-trail li.is-here { color: var(--cryo-accent); font-weight: 600; }
.cryo-trail li.is-done { opacity: .7; }

.cryo-typelist, .cryo-clientlist { list-style: none; margin: 0; padding: 0; }

.cryo-type a, .cryo-clientlist a {
  display: block;
  padding: 1rem;
  margin-bottom: .6rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  color: inherit; text-decoration: none;
}
.cryo-type a:hover, .cryo-clientlist a:hover { border-color: var(--cryo-accent); background: var(--cryo-surface); }

.cryo-type-name { display: block; font-weight: 600; font-size: 1.05rem; }
.cryo-type-meta { display: block; font-size: .85rem; color: var(--cryo-ink-soft); margin-top: .15rem; }
.cryo-type-desc { display: block; font-size: .9rem; margin-top: .4rem; }

.cryo-clientlist a { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.cryo-client-name { font-weight: 600; }
.cryo-client-code { color: var(--cryo-ink-soft); font-variant-numeric: tabular-nums; }

.cryo-search, .cryo-chaperone, .cryo-moment-form { margin-bottom: 1.5rem; }
.cryo-search label, .cryo-chaperone label, .cryo-moment-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.cryo-search input, .cryo-chaperone select, .cryo-moment-form input {
  padding: .55rem .7rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  font: inherit;
  max-width: 26rem; width: 100%;
}
.cryo-orjust { margin-top: 1.25rem; font-size: .9rem; }

.cryo-weeknav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; margin-bottom: 1rem;
  border-top: 1px solid var(--cryo-line);
  border-bottom: 1px solid var(--cryo-line);
  font-size: .95rem;
}
.cryo-weeknav-label { font-weight: 600; }
.cryo-weeknav-off { opacity: .35; }

.cryo-suggestion {
  background: var(--cryo-surface);
  border-left: 3px solid var(--cryo-accent);
  padding: .7rem .9rem;
  border-radius: 0 var(--cryo-radius) var(--cryo-radius) 0;
  font-size: .92rem;
  margin-bottom: 1.25rem;
}

.cryo-board { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.cryo-board-day {
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  padding: .75rem;
}
.cryo-board-day.is-empty { opacity: .55; }
.cryo-board-day h4 { margin: 0 0 .5rem; font-size: .9rem; }

.cryo-times { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.cryo-time {
  display: inline-block;
  padding: .4rem .6rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  color: inherit; text-decoration: none;
  min-width: 3.4rem; text-align: center;
}
.cryo-time:hover { border-color: var(--cryo-accent); background: var(--cryo-surface); }
.cryo-time.is-preferred { border-color: color-mix(in srgb, var(--cryo-accent) 55%, transparent); font-weight: 600; }
/* Off-intent slots are ranked down, never removed — still bookable, just quieter. */
.cryo-time.is-off-intent { opacity: .65; border-style: dashed; }

.cryo-more-times { margin-top: .5rem; }
.cryo-more-times summary { cursor: pointer; font-size: .8rem; color: var(--cryo-accent); }

.cryo-noslots {
  border: 1px solid var(--cryo-line);
  border-left: 3px solid var(--cryo-warn);
  border-radius: 0 var(--cryo-radius) var(--cryo-radius) 0;
  padding: 1rem 1.1rem;
}
.cryo-noslots h4 { margin: 0 0 .4rem; font-size: 1.05rem; }
.cryo-noslots p { margin: 0 0 .75rem; }
.cryo-noslots--fully_booked { border-left-color: var(--cryo-accent); }

.cryo-confirm { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cryo-booked h3 { margin-top: 0; }
.cryo-booked-when { font-size: 1.15rem; font-weight: 600; margin: 0 0 .25rem; }
.cryo-bookmore { margin: 1rem 0 0; font-size: .9rem; }

@media (max-width: 40rem) {
  .cryo-board { grid-template-columns: 1fr; }
  .cryo-board-day.is-empty { display: none; }
  .cryo-time { padding: .55rem .7rem; }
  .cryo-weeknav { font-size: .9rem; }
}

/* --- Emulation banner --------------------------------------------------- */

/*
 * Deliberately loud, deliberately fixed, and deliberately not dismissible.
 * Somebody who forgets they are emulating misreads everything they then look
 * at and reports a bug that does not exist — which costs more than the feature
 * saves.
 */
.cryo-emulating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .35rem 1rem;
  font-size: .82rem;
  line-height: 1.35;
  background: #4a2f00;
  color: #ffe9c2;
}
.cryo-emulating--warning { background: #6b1f22; color: #ffdedd; }
.cryo-emulating-note { opacity: .9; }
.cryo-emulating form { margin: 0; }
.cryo-emulating button {
  padding: .3rem .8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.cryo-emulating button:hover { background: rgba(255,255,255,.15); }

.notice.cryo-emulating-wrap .cryo-emulating { position: static; background: transparent; color: inherit; padding: .25rem 0; }
.notice.cryo-emulating-wrap .cryo-emulating button { border-color: currentColor; }

/* --- Environment banner ------------------------------------------------- */

/*
 * Quieter than the emulation banner and always present on a non-live copy.
 * The point is not to alarm; it is that nobody should ever be uncertain which
 * copy of a clinical system they are looking at.
 */

/* --- Enquiry form ------------------------------------------------------- */

.cryo-enquiry-form { max-width: 34rem; }
.cryo-enquiry-form label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.cryo-enquiry-form input,
.cryo-enquiry-form select,
.cryo-enquiry-form textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  font: inherit;
}
.cryo-enquiry-form input[type="number"] { max-width: 8rem; }
.cryo-field-error { margin: .3rem 0 0; font-size: .88rem; color: var(--cryo-danger); }
.cryo-outstanding {
  margin: 1.25rem 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--cryo-ink-soft);
}
.cryo-outstanding li { margin-bottom: .25rem; }
.cryo-enquiry-done .cryo-code {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  margin: .5rem 0 .25rem;
}
.cryo-emulating-escape { color: inherit; text-decoration: underline; font-size: .85rem; opacity: .85; }

/* --- What would you like to do ------------------------------------------ */

.cryo-do {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
}
.cryo-do li {
  padding: .35rem 0;
  border-top: 1px solid var(--cryo-line);
  font-size: .95rem;
}
.cryo-do li:first-child { border-top: 0; }
.cryo-do a { font-weight: 600; color: var(--cryo-accent); text-decoration: none; }
.cryo-do a:hover { text-decoration: underline; }
.cryo-do-note { color: var(--cryo-ink-soft); font-size: .87rem; }

@media (max-width: 40rem) {
  .cryo-do-note { display: block; }
}

.cryo-assessment-request { max-width: 34rem; }

.cryo-waive-form { margin-top: 1.5rem; max-width: 32rem; }
.cryo-waive-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.cryo-waive-form input[type="text"] {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  font: inherit;
  margin-bottom: .4rem;
}

/* --- Reference and search ----------------------------------------------- */

/*
 * References are quoted aloud and copied by hand, so they get tabular figures
 * and a little letter-spacing. Getting a character wrong is the commonest way
 * a search comes back empty.
 */
.cryo-row-ref, .cryo-day-ref, .cryo-ref, .cryo-result-ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  font-size: .8rem;
  color: var(--cryo-ink-soft);
  white-space: nowrap;
}
.cryo-ref { margin: 0 0 .75rem; }
.cryo-result-ref { font-weight: 600; color: var(--cryo-accent); }

.cryo-search-bar {
  display: flex;
  gap: .5rem;
  margin: 0 0 1.25rem;
  max-width: 30rem;
}
.cryo-search-bar input[type="search"] {
  flex: 1 1 auto;
  padding: .5rem .7rem;
  border: 1px solid var(--cryo-line);
  border-radius: var(--cryo-radius);
  font: inherit;
  font-size: .95rem;
}

.cryo-results { list-style: none; margin: 0; padding: 0; }
.cryo-results a {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--cryo-line);
  color: inherit;
  text-decoration: none;
}
.cryo-results a:hover { background: var(--cryo-surface); }
.cryo-result-who { font-weight: 600; }
.cryo-result-what, .cryo-result-when { color: var(--cryo-ink-soft); font-size: .9rem; }
.cryo-result-when { margin-left: auto; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .cryo-result-when { margin-left: 0; flex-basis: 100%; }
  .cryo-day-ref { flex-basis: 100%; }
}

/* The development bar carries its own inline stylesheet (Cryo_Dev_Bar::css)
   because it is injected on every page, including ones this file is not
   loaded on. Nothing for it here on purpose. */

/* --- Whose client is this? ---------------------------------------------- */

/*
 * A practitioner sees the whole clinic, so "I can open it" no longer answers
 * "am I responsible for it". Three states, deliberately different weights:
 * yours is quiet, somebody else's is a note, and unassigned is the one that
 * wants picking up.
 */
.cryo-lead {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .1rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid currentColor;
}
.cryo-lead--mine { opacity: .55; }
.cryo-lead--somebody { color: #7a5a12; background: #fdf3dc; border-color: #e4c778; }
.cryo-lead--unassigned { color: #6b1f22; background: #fdecec; border-color: #e2a1a1; font-weight: 600; }

.cryo-result-lead { font-size: .72rem; padding: 0 .45rem; margin: 0; }

/* --- Who has this client? ------------------------------------------------ */

.cryo-assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: .5rem;
}
.cryo-assign label { font-weight: 600; font-size: .85rem; }
.cryo-assign select { font: inherit; padding: .25rem .5rem; }
.cryo-assign .cryo-fine { flex: 1 1 100%; margin: 0; opacity: .7; }

/* Whose appointment it is, on a diary that holds everybody's. */
.cryo-day-with { opacity: .75; font-size: .85rem; }

/* --- Waiting on the client ---------------------------------------------- */

/*
 * A task, not a notice. It sits above the appointments because it is the one
 * thing on the page the client has to do something about.
 */
.cryo-todo {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #cbd9de;
  border-left: 4px solid #2b6d80;
  border-radius: .5rem;
  background: #f4fafc;
}
.cryo-todo h3 { margin: 0 0 .6rem; font-size: 1rem; }
.cryo-todo-list { list-style: none; margin: 0; padding: 0; }
.cryo-todo-item + .cryo-todo-item { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid #dbe7ea; }
.cryo-todo-what { font-weight: 600; margin-right: .6rem; }
.cryo-todo-how-long,
.cryo-todo-when { opacity: .75; font-size: .88rem; margin-right: .6rem; }
.cryo-todo-ref { font-size: .8rem; opacity: .6; font-variant-numeric: tabular-nums; }
.cryo-todo-note { margin: .4rem 0 0; font-size: .9rem; opacity: .85; }

/* --- The account --------------------------------------------------------- */

.cryo-account { margin: 1.5rem 0; }
.cryo-account-summary { font-weight: 600; margin: 0 0 .6rem; }
.cryo-statement { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cryo-statement td { padding: .35rem .5rem; border-top: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.cryo-statement-when { white-space: nowrap; opacity: .7; width: 7rem; }
.cryo-statement-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 7rem; }
.cryo-statement-ref { font-size: .8rem; opacity: .55; }

/* Corrected entries stay legible but step back — they are history, not the
   current position. */
.cryo-statement-row.is-reversed td { opacity: .55; text-decoration: line-through; }
.cryo-statement-row.is-reversed .cryo-pill { text-decoration: none; }

/* --- Courses and moving --------------------------------------------------- */

.cryo-course { margin: 1.5rem 0; }
.cryo-course-summary { font-weight: 600; margin: 0 0 .5rem; }
.cryo-course-steps { list-style: none; margin: 0; padding: 0; counter-reset: session; }
.cryo-course-step {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .35rem 0 .35rem 2rem;
  border-top: 1px solid rgba(0,0,0,.08);
  position: relative;
}
.cryo-course-step::before {
  counter-increment: session;
  content: counter(session);
  position: absolute;
  left: 0;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}
.cryo-course-step.is-done { opacity: .6; }
.cryo-course-step.is-next { font-weight: 600; }
.cryo-course-ref { font-size: .8rem; opacity: .55; }

.cryo-course-start { margin: .5rem 0; }
.cryo-course-start summary { cursor: pointer; }
.cryo-course-form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .6rem; }
.cryo-course-form label { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.cryo-course-form .cryo-fine { flex: 1 1 100%; margin: 0; }
.cryo-order-input { width: 4.5rem; }

/* The consequence of a move, which is the point of the screen. */
.cryo-consequence {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-left: 4px solid #c1121f;
  background: #fdf1f1;
}
.cryo-consequence p { margin: 0; }
.cryo-slotlist { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cryo-slot {
  display: block;
  padding: .4rem .8rem;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .4rem;
  text-decoration: none;
}
.cryo-move-to { font-weight: 600; }

/* --- Discharge and feedback ---------------------------------------------- */

.cryo-discharge { margin: .5rem 0; }
.cryo-discharge summary { cursor: pointer; }
.cryo-discharge-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
.cryo-discharge-form label { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.cryo-discharge-form .cryo-discharge-summary { flex: 1 1 100%; align-items: flex-start; flex-direction: column; }
.cryo-discharge-form textarea { width: 100%; }
.cryo-discharge-form .cryo-fine { flex: 1 1 100%; margin: 0; }

.cryo-feedback {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid #cbd9de;
  border-left: 4px solid #2b6d80;
  border-radius: .5rem;
  background: #f4fafc;
}
.cryo-feedback h3 { margin: 0 0 .4rem; font-size: 1rem; }
.cryo-feedback-form { display: grid; gap: .8rem; margin-top: .8rem; }
.cryo-feedback-form label { display: grid; gap: .25rem; font-size: .92rem; }
.cryo-feedback-form textarea,
.cryo-feedback-form input[type="text"] { width: 100%; }
.cryo-rating { border: 0; padding: 0; margin: 0; display: flex; gap: .8rem; align-items: center; }
.cryo-rating label { display: flex; flex-direction: row; align-items: center; gap: .25rem; }
.cryo-consent { border: 1px solid rgba(0,0,0,.12); border-radius: .4rem; padding: .7rem .9rem; margin: 0; }
.cryo-consent legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.cryo-consent label { flex-direction: row; align-items: baseline; gap: .4rem; }

/*
 * The questionnaire.
 *
 * Answered on a phone more often than not, and by people whose hands are the
 * reason they are here — so the tap targets are generous, the scale is a row
 * of real radio buttons rather than a slider, and nothing depends on hover.
 */
.cryo-questionnaire { max-width: 44rem; }
.cryo-q-intro { font-size: 1.05rem; }
.cryo-q-purpose { background: var(--cryo-surface); border-radius: .5rem; padding: .9rem 1.1rem; margin: 1.2rem 0; }
.cryo-q-purpose h3 { margin: 0 0 .4rem; font-size: .95rem; }
.cryo-q-purpose p { margin: 0; font-size: .92rem; color: var(--cryo-ink-soft); }
.cryo-q-progress { font-size: .85rem; color: var(--cryo-ink-soft); margin: 0 0 1rem; }

.cryo-q-section { border: 0; border-top: 1px solid var(--cryo-line); padding: 1.2rem 0 0; margin: 1.6rem 0 0; }
.cryo-q-section legend { font-weight: 600; font-size: 1.05rem; padding: 0; }

.cryo-q { margin: 1.4rem 0; }
.cryo-q-label { margin: 0 0 .3rem; font-weight: 500; }
.cryo-q-required { font-weight: 400; font-size: .8rem; color: var(--cryo-ink-soft); }
.cryo-q-help { margin: 0 0 .5rem; font-size: .85rem; color: var(--cryo-ink-soft); }

/* An error belongs beside its question, not in a banner at the top. */
.cryo-q--error { border-left: 3px solid var(--cryo-danger); padding-left: .9rem; margin-left: -.9rem; }
.cryo-q-error { margin: 0 0 .5rem; font-size: .85rem; color: var(--cryo-danger); font-weight: 500; }

.cryo-q-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.cryo-q-options--multi { flex-direction: column; gap: .5rem; }
.cryo-q-options label { display: flex; align-items: center; gap: .45rem; min-height: 2.4rem; cursor: pointer; }

.cryo-q-scale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.cryo-q-scale label {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  min-width: 2.6rem; min-height: 3rem; justify-content: center;
  border: 1px solid var(--cryo-line); border-radius: .4rem; cursor: pointer; font-size: .9rem;
}
.cryo-q-scale label:has(input:checked) { border-color: var(--cryo-accent); background: var(--cryo-surface); font-weight: 600; }
.cryo-q-scale-ends { display: flex; justify-content: space-between; gap: 1rem; margin: .35rem 0 0; font-size: .78rem; color: var(--cryo-ink-soft); }

.cryo-q-text, .cryo-q-number { width: 100%; max-width: 100%; padding: .5rem .6rem; border: 1px solid var(--cryo-line); border-radius: .4rem; font: inherit; }
.cryo-q-number { max-width: 8rem; }

.cryo-q-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 1rem; }
.cryo-q-review dl { margin: .6rem 0 0; }
.cryo-q-review dt { font-weight: 500; margin-top: .7rem; }
.cryo-q-review dd { margin: .1rem 0 0 0; color: var(--cryo-ink-soft); }

.cryo-todo-go { margin: .6rem 0 0; }

/*
 * Flags on the clinical record. Amber for "discuss", red for "read before
 * treating" — and the words carry the meaning, because a colour on its own is
 * no use to somebody who cannot see it.
 */
.cryo-questionnaires { margin: 1.6rem 0; }
.cryo-questionnaire-record { border: 1px solid var(--cryo-line); border-radius: .5rem; padding: .9rem 1.1rem; margin: 0 0 .9rem; }
.cryo-questionnaire-record h4 { margin: 0; }
.cryo-flags { list-style: none; margin: .6rem 0 .4rem; padding: 0; }
.cryo-flag { padding: .4rem .6rem; border-left: 3px solid var(--cryo-line); margin: 0 0 .35rem; font-size: .92rem; }
.cryo-flag-why { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; display: block; }
.cryo-flag--stop { border-left-color: var(--cryo-danger); }
.cryo-flag--stop .cryo-flag-why { color: var(--cryo-danger); }
.cryo-flag--check { border-left-color: var(--cryo-warn); }
.cryo-flag--check .cryo-flag-why { color: var(--cryo-warn); }
.cryo-flags-none { margin: .5rem 0; font-size: .9rem; color: var(--cryo-ink-soft); }

/* Taking money at the desk — a record of something that already happened. */
.cryo-take-payment { margin: .9rem 0 0; }
.cryo-take-payment > summary { cursor: pointer; font-weight: 600; }
.cryo-payment-form { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.cryo-payment-form .cryo-field { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.cryo-payment-form label { font-size: .82rem; color: var(--cryo-ink-soft); }
.cryo-payment-form input[type="text"], .cryo-payment-form select {
  padding: .45rem .6rem; border: 1px solid var(--cryo-line); border-radius: .4rem; font: inherit;
}
.cryo-payment-form input[type="text"] { max-width: 8rem; }
.cryo-payment-form .cryo-fine { flex-basis: 100%; margin: .2rem 0 0; }

/* The bill, broken down the way somebody reads one. */
.cryo-bill { width: 100%; max-width: 24rem; border-collapse: collapse; margin: .6rem 0 .9rem; }
.cryo-bill th, .cryo-bill td { text-align: left; padding: .25rem 0; font-weight: 400; font-size: .92rem; }
.cryo-bill td { text-align: right; font-variant-numeric: tabular-nums; }
.cryo-bill .is-total th, .cryo-bill .is-total td {
  font-weight: 700; border-top: 1px solid var(--cryo-line); padding-top: .45rem;
}
.cryo-bill .is-note th, .cryo-bill .is-note td { color: var(--cryo-ink-soft); font-size: .82rem; }

/* ---- outcomes: cancel, attended, the approval loop ---- */

/*
 * An action that asks a question before it does anything. The textarea sits
 * above its own button rather than beside it, because a reason box on the same
 * line as a red Cancel button reads as a search field.
 */
.cryo-inline-form--asks { display: block; margin: .75rem 0; max-width: 34rem; }
.cryo-inline-form__label { display: block; margin-bottom: .3rem; font-size: .9rem; color: #4a5a6a; }
.cryo-inline-form--asks textarea {
  display: block; width: 100%; margin-bottom: .5rem;
  padding: .5rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid #cfd8e0; border-radius: 6px; resize: vertical;
}

/*
 * The fee decision. Bordered and set apart because it is the one thing on this
 * screen that takes money off somebody, and it should not read as one more row
 * of the appointment.
 */
.cryo-fee-decision {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid #e6c9a8;
  border-left: 4px solid #c8873c;
  border-radius: 8px;
  background: #fdf7f0;
}
.cryo-fee-decision h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.cryo-fee-decision p { margin: 0 0 .6rem; }
.cryo-fee-decision .cryo-inline-form--asks { margin-bottom: 0; }

/* ---- what a client can book next ---- */

.cryo-treatments { display: grid; gap: 1rem; margin: 1.5rem 0; }
.cryo-treatment {
  padding: 1.1rem 1.25rem;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  background: #fff;
}
.cryo-treatment__name { margin: 0 0 .25rem; font-size: 1.2rem; }
.cryo-treatment__meta { margin: 0 0 .5rem; font-size: .9rem; color: #5b6b7a; }
.cryo-treatment__body { margin: 0 0 .9rem; }
.cryo-treatment__go { margin: 0; }

/*
 * The consultation is the last card and a different offer — a way out for
 * somebody who does not know what they want, rather than one more thing to
 * buy. Set apart so it does not read as the most expensive treatment.
 */
.cryo-treatment--consult { background: #f4f8fa; border-style: dashed; }