/* me.cliniweb patient portal - shared premiumUI shell (my.cliniweb/html/premiumUI.md).
   Used by /consent/ (c-*), /assessments/ and /symptoms/ (a-*). /book/ carries its own
   copy of the same tokens in book.css. Module stylesheets only add their own components. */
@font-face {
  font-family: "Cliniweb Appointment Sans";
  src: url("/assets/fonts/OpenSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --premium-canvas: #f5f5f1;
  --premium-surface: #ffffff;
  --premium-ink: #233932;
  --premium-muted: #69756f;
  --premium-line: #e5e9e3;
  --premium-soft: #f3f6f1;
  --premium-accent: #245b4b;
  --premium-accent-dark: #194637;
  --premium-accent-soft: #eaf1eb;
  --premium-success: #42633b;
  --premium-warning: #836d42;
  --premium-danger: #9b3e39;
  --premium-danger-soft: #f8ecea;
  --premium-warning-soft: #f5eddf;
  --field-bg: #fbfcf9;
  --field-line: #e2e7df;
  --secondary-bg: #fbfcf9;
  --secondary-line: #e8ece3;
  --pad: clamp(20px, 5vw, 32px);

  /* Legacy names still referenced by module CSS / inline markup */
  --ink: var(--premium-ink);
  --ink-soft: var(--premium-muted);
  --line: var(--premium-line);
  --bg: var(--premium-canvas);
  --card: var(--premium-surface);
  --brand: var(--premium-accent);
  --brand-ink: #fff;
  --ok: var(--premium-success);
  --warn: var(--premium-warning);
  --err: var(--premium-danger);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--premium-canvas);
  color: var(--premium-ink);
  font: 400 15px/1.55 "Cliniweb Appointment Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--premium-accent); }
[hidden] { display: none !important; }

/* ---- Page frame --------------------------------------------------------- */
.c-wrap, .a-wrap { width: min(680px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 40px; }

/* Header sits flat on the canvas, like /book/ */
.c-head, .a-head { padding: 0 0 18px; background: none; border: 0; }
.c-head-practice, .a-head-practice {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
}
.c-head-practice::before, .a-head-practice::before {
  content: ""; width: 38px; height: 38px; flex: none; border-radius: 9px;
  background: var(--premium-accent-soft) center / 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245b4b' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.c-head-line, .a-head-line { margin: 2px 0 0 50px; color: var(--premium-muted); font-size: .74rem; }

/* Title + main read as one premium card */
.c-title, .a-title {
  margin: 0; padding: var(--pad) var(--pad) 4px;
  background: var(--premium-surface);
  border: 1px solid #e2e7df; border-bottom: 0; border-radius: 13px 13px 0 0;
  font-size: clamp(1.4rem, 4.6vw, 1.75rem); font-weight: 550; line-height: 1.2; letter-spacing: -.035em;
}
.c-main, .a-main {
  background: var(--premium-surface);
  border: 1px solid #e2e7df; border-radius: 13px;
  box-shadow: 0 3px 5px rgba(39,59,36,.025), 0 18px 40px -32px rgba(31,56,32,.20);
  padding: var(--pad);
  animation: portal-rise .28s ease-out both;
}
.c-title + .c-main, .a-title + .a-main { border-top: 0; border-radius: 0 0 13px 13px; padding-top: 14px; animation: none; }
@keyframes portal-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .c-main, .a-main { animation: none; } }

/* Sections: flat, separated by hairlines rather than nested cards */
.c-main section + section, .a-main section + section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--premium-line); }
.c-main h2, .a-main h2 {
  margin: 0 0 12px;
  font-size: .66rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--premium-muted);
}
.a-heading { margin: 0 0 6px; font-weight: 600; }
.c-note, .a-note { margin: 12px 0 0; color: var(--premium-muted); font-size: .78rem; }

/* ---- Identity confirmation --------------------------------------------- */
.c-identity dl, .a-identity dl {
  margin: 0; padding: 4px 14px;
  border: 1px solid var(--secondary-line); border-radius: 9px; background: var(--secondary-bg);
}
.c-identity dl > div, .a-identity dl > div {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--premium-line);
}
.c-identity dl > div:last-child, .a-identity dl > div:last-child { border-bottom: 0; }
.c-identity dt, .a-identity dt { margin: 0; color: var(--premium-muted); font-size: .78rem; }
.c-identity dd, .a-identity dd { margin: 0; font-weight: 600; font-size: .88rem; text-align: right; }

/* ---- Fields ------------------------------------------------------------- */
.c-field label, .sy-field label { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 600; color: var(--premium-ink); text-transform: none; letter-spacing: 0; }
.c-field input, .c-type-input, .sy-field select, .sy-field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--field-bg); border: 1px solid var(--field-line); border-radius: 7px;
  color: var(--premium-ink); font: inherit; font-size: 16px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.c-field input:focus, .c-type-input:focus, .sy-field select:focus, .sy-field textarea:focus {
  background: #fff; border-color: #96b49c; box-shadow: 0 0 0 3px rgba(54,98,57,.08); outline: 0;
}
::placeholder { color: #778371; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--premium-accent); }

/* ---- Primary action ------------------------------------------------------ */
.c-submit, .a-submit {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 18px; padding: 0 18px;
  background: var(--premium-accent); border: 1px solid var(--premium-accent); border-radius: 8px;
  color: #fff; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 3px rgba(28,57,43,.10), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .12s, border-color .12s, transform .06s;
}
.c-submit:hover, .a-submit:hover { background: var(--premium-accent-dark); border-color: var(--premium-accent-dark); }
.c-submit:active, .a-submit:active { transform: translateY(1px); }
.c-submit:disabled, .a-submit:disabled { opacity: .5; cursor: not-allowed; }
.c-submit:focus-visible, .a-submit:focus-visible { outline: 2px solid #547b42; outline-offset: 2px; }

/* ---- Messages ------------------------------------------------------------ */
.c-error, .a-error {
  margin: 0 0 14px; padding: 10px 12px; border: 0; border-radius: 7px;
  background: var(--premium-danger-soft); color: var(--premium-danger); font-size: .84rem; font-weight: 550;
}

.c-status, .a-status { padding: 18px 4px 6px; text-align: center; }
.c-status-icon, .a-status-icon {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px;
  border-radius: 50%; font-size: 1.45rem; font-weight: 600;
}
.c-status--done .c-status-icon, .a-status--done .a-status-icon { background: var(--premium-accent-soft); color: var(--premium-accent); }
.c-status--wait .c-status-icon, .a-status--wait .a-status-icon { background: var(--premium-warning-soft); color: var(--premium-warning); }
.c-status--error .c-status-icon, .a-status--error .a-status-icon,
.a-status--urgent .a-status-icon { background: var(--premium-danger-soft); color: var(--premium-danger); }
.c-status p, .a-status p { max-width: 44ch; margin: 0 auto; font-size: .95rem; }
.a-status--urgent p { color: var(--premium-danger); font-weight: 600; }
/* Status-only pages have no title strip: plain messages inside .c-main/.a-main */
.c-main > p, .a-main > p { margin: 0; }

.c-foot, .a-foot { padding: 18px 0 0; text-align: center; color: #8a948e; font-size: .7rem; }

.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 480px) {
  .c-identity dl > div, .a-identity dl > div { flex-direction: column; gap: 1px; }
  .c-identity dd, .a-identity dd { text-align: left; }
}