:root {
  --ink:#203835;
  --muted:#788581;
  --teal:#176d5e;
  --line:#e5ebe7;
  --canvas:#f6f8f5;
  --white:#fff;
  --amber:#b87532;
  --sidebar-width:232px;
  --topbar-height:56px;
  --patient-dock-height:100px;
  --page-width:1440px;
  --page-gutter:28px;
  --page-block:26px;
  --panel-padding:20px;
  --section-gap:18px;
  --radius:10px;
  --calendar-line:#d0ddd5;
  --calendar-header:#edf3ee;
  --calendar-event-bg:#eef5ef;
  --calendar-cell-height:140px;
  --calendar-accent:#a9c7b4}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button,input,select,textarea {
  font:inherit}
button,a,input,select,textarea {
  outline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #429783}
button {
  cursor:pointer}
small {
  display:block;
  color:var(--muted);
  font-size:12px}
h1,h2,h3,p {
  margin-top:0}
h1 {
  font-size:30px;
  letter-spacing:-1.4px;
  font-weight:600;
  margin-bottom:10px}
h2 {
  font-size:21px;
  letter-spacing:-.6px;
  font-weight:600;
  margin-bottom:8px}
h3 {
  font-size:16px;
  font-weight:600}
strong {
  font-weight:600}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-width);
  background:#fff;
  border-right:1px solid var(--line);
  padding:34px 23px 22px;
  display:flex;
  flex-direction:column;
  z-index:5}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:30px;
  letter-spacing:-1px;
  font-weight:650}
.brand-symbol {
  font-size:47px;
  font-weight:400;
  color:var(--teal);
  line-height:1}
.brand .light {
  font-weight:350}
.brand small {
  font-size:8px;
  letter-spacing:2.4px;
  margin-top:5px;
  font-weight:600}
.workspace {
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px;
  margin-top:39px;
  font-weight:600;
  font-size:12px}
.workspace small {
  font-weight:400;
  margin-top:3px;
  font-size:11px}
.workspace-icon {
  font-size:22px;
  color:var(--teal)}
.nav-caption {
  font-size:9px;
  letter-spacing:1.8px;
  color:#86918a;
  margin:32px 12px 13px}
nav {
  display:grid;
  gap:7px}
nav a {
  padding:13px 16px;
  border-radius:8px;
  color:#65736d;
  font-weight:500;
  display:flex;
  gap:13px;
  align-items:center}
nav a span {
  font-size:21px;
  line-height:1}
nav a:hover {
  background:#f2f6f2}
nav a.active {
  background:#e8f2ec;
  color:#1a6c57}
.sidebar-note {
  margin-top:auto;
  padding:22px 15px 32px}
.tiny-orbit {
  display:block;
  font-size:40px;
  color:#c2d4b5;
  margin-bottom:12px}
.sidebar-note strong {
  font-size:13px}
.sidebar-note p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:8px 0 0}
.profile {
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:11px}
.profile small {
  font-size:10px;
  margin-top:4px}
.avatar {
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#e9eeea;
  color:#5f7367;
  font-size:12px;
  flex-shrink:0}
.shell {
  margin-left:var(--sidebar-width)}
.topbar {
  height:var(--topbar-height);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--page-gutter);
  font-size:12px;
  color:var(--muted)}
.topbar>div {
  display:flex;
  align-items:center;
  gap:9px}
.topbar strong {
  color:#52675b;
  font-weight:500}
.demo-dot,.dot {
  width:6px;
  height:6px;
  background:#5c9e7d;
  display:inline-block;
  border-radius:50%;
  flex-shrink:0}
.date-top {
  margin-left:25px;
  padding-left:25px;
  border-left:1px solid #dce3db}
main {
  padding:var(--page-block) var(--page-gutter) 20px;
  max-width:var(--page-width);
  margin:auto}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:var(--section-gap)}
.eyebrow {
  font-size:9px;
  letter-spacing:2px;
  font-weight:650;
  color:#6a8a74;
  margin-bottom:10px}
.subtitle {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:0}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 17px;
  background:white;
  border:1px solid #dbe4dc;
  border-radius:7px;
  font-weight:500;
  font-size:12px;
  white-space:nowrap}
.button:hover {
  filter:brightness(.96)}
.primary {
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
  box-shadow:0 5px 14px #176d5e16}
.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--section-gap);
  margin-bottom:var(--section-gap)}
.stat {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px 20px;
  transition:transform .2s}
.stat:hover {
  transform:translateY(-2px)}
.stat>span {
  font-size:9px;
  letter-spacing:1.25px;
  color:#6c8072;
  display:flex;
  justify-content:space-between}
.stat i {
  font-style:normal;
  font-size:15px}
.stat>strong {
  display:flex;
  align-items:baseline;
  gap:13px;
  font-size:32px;
  font-weight:500;
  letter-spacing:-1px;
  margin-top:12px}
.stat strong small {
  font-size:11px;
  letter-spacing:0;
  font-weight:400}
.stat-bottom {
  border-top:1px solid var(--line);
  padding-top:13px;
  margin-top:14px;
  font-size:10px;
  color:var(--muted);
  display:flex;
  gap:7px;
  align-items:center}
.warm {
  background:#fbf8f1;
  border-color:#ebe5d9}
.warm>strong {
  color:#a47a40}
.amber {
  background:#c48a4a}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);
  gap:var(--section-gap)}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--panel-padding)}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:22px}
.count {
  font-size:11px;
  vertical-align:middle;
  background:#edf2ec;
  border-radius:6px;
  padding:4px 7px;
  margin-left:6px;
  color:#69816c}
.text-link {
  font-size:11px;
  color:var(--teal);
  font-weight:600}
.table-head {
  display:grid;
  grid-template-columns:65px 1fr 125px 15px;
  gap:10px;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:8px;
  letter-spacing:1.3px;
  color:#89958c}
.appointment {
  display:grid;
  grid-template-columns:65px 1fr 125px 15px;
  gap:10px;
  align-items:center;
  padding:17px 0;
  border-bottom:1px solid var(--line)}
.appointment:hover {
  background:#f9fbf8}
.time {
  font-size:14px;
  font-weight:600}
.time small {
  font-size:10px;
  font-weight:400;
  margin-top:5px}
.person {
  display:flex;
  align-items:center;
  gap:12px}
.person strong {
  font-size:12px}
.person small {
  font-size:10px;
  margin-top:5px}
.tint-1 {
  background:#e9efe1;
  color:#6d7b4c}
.tint-2 {
  background:#e6eff0;
  color:#62868a}
.tint-0 {
  background:#f1e9e3;
  color:#a27e67}
.badge {
  display:inline-block;
  font-size:9px;
  padding:5px 8px;
  border-radius:5px;
  font-weight:500;
  white-space:nowrap}
.green {
  background:#edf4ed;
  color:#4f865e}
.orange {
  background:#fcf1df;
  color:#a97632}
.neutral {
  background:#eff1ed;
  color:#6c7e70}
.treatment {
  font-size:8px;
  letter-spacing:.8px;
  margin-top:9px}
.arrow {
  color:#72947f}
.agenda-foot {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#8c978d;
  padding-top:20px;
  flex-wrap:wrap}
.right-column {
  display:grid;
  gap:20px;
  align-content:start}
.focus-card {
  background:#174f45;
  color:white;
  border-radius:var(--radius);
  padding:var(--panel-padding);
  position:relative;
  overflow:hidden}
.focus-card:before {
  content:'';
  position:absolute;
  width:240px;
  height:240px;
  border:1px solid #ffffff0d;
  border-radius:50%;
  right:-130px;
  top:-80px;
  box-shadow:0 0 0 30px #ffffff04,0 0 0 60px #ffffff03}
.focus-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1.7px;
  color:#a5c8ad;
  margin-bottom:18px}
.focus-top span:last-child {
  font-size:29px;
  line-height:1}
.focus-card h2 {
  font-size:24px;
  line-height:1.35;
  font-weight:450;
  letter-spacing:-.5px}
.focus-card p {
  color:#b6cec2;
  font-size:11px;
  line-height:1.85;
  max-width:240px}
.focus-line {
  display:flex;
  justify-content:space-between;
  gap:5px;
  align-items:center;
  font-size:9px;
  margin:23px 0;
  color:#d3e5d5}
.focus-line b {
  font-weight:400;
  color:#89b097}
.focus-card>a {
  border-top:1px solid #ffffff20;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#e0eddf}
.reminders {
  padding:23px}
.reminders>a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 0;
  border-top:1px solid var(--line)}
.reminders>a>span:last-child {
  margin-left:auto}
.reminders strong {
  font-size:11px}
.reminders small {
  font-size:10px;
  margin-top:5px}
.small-circle {
  width:31px;
  height:34px;
  border-radius:6px;
  background:#edf2e9;
  color:#67805b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px}
.small-circle.amber {
  background:#f9eddd;
  color:#b18443}
footer {
  display:flex;
  justify-content:space-between;
  padding:15px var(--page-gutter) 20px;
  color:#8c978f;
  font-size:10px}
footer span {
  font-size:9px}
.pill {
  border:1px solid #dce5db;
  border-radius:20px;
  padding:8px 12px;
  font-size:10px;
  color:#66816d;
  background:#f7faf5}
.search {
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
  margin-bottom:24px}
.search>div {
  display:flex;
  gap:10px;
  margin-top:8px}
.search input {
  max-width:400px}
input:not([type=checkbox]),select,textarea {
  width:100%;
  border:1px solid #dce4dd;
  background:#fff;
  border-radius:6px;
  padding:11px;
  color:var(--ink);
  margin-top:7px}
input::placeholder,textarea::placeholder {
  color:#9aa59b}
.search input {
  margin:0}
.patient-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--section-gap)}
.patient-card {
  border:1px solid var(--line);
  border-radius:10px;
  padding:23px;
  position:relative}
.patient-card:hover {
  border-color:#79a58a;
  background:#fcfefb}
.large {
  width:48px;
  height:48px;
  font-size:14px}
.patient-card>.badge {
  position:absolute;
  right:18px;
  top:24px}
.patient-card h3 {
  margin:19px 0 7px}
.patient-card p {
  font-size:11px;
  color:var(--muted)}
.patient-card>div {
  border-top:1px solid var(--line);
  padding-top:17px}
.patient-card>div small {
  font-size:8px;
  letter-spacing:1px}
.patient-card>div strong {
  display:block;
  margin-top:8px;
  font-size:12px}
.patient-card>div strong span {
  float:right}
.month-controls {
  display:flex;
  align-items:center;
  gap:10px}
.month-title {
  text-transform:capitalize}
.calendar {
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-width:660px; border:1px solid var(--calendar-line); border-radius:8px; overflow:hidden;
}
.weekday {
  text-align:center; font-size:11px; font-weight:700; letter-spacing:.8px; color:#486454; background:var(--calendar-header); padding:13px 6px; border-right:1px solid var(--calendar-line);
}
.day {
  height:var(--calendar-cell-height); min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--calendar-accent) transparent; border-right:1px solid var(--calendar-line); border-bottom:1px solid var(--calendar-line); padding:8px; background:#fff;
}
.day:nth-child(7n),.calendar-blank:nth-child(7n) {
  border-right:0}
.day-number {
  display:inline-flex; width:29px; height:29px; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:5px;
}
.muted .day-number {
  color:#b9c3ba}
.today {
  background:#f6faf5; box-shadow:inset 0 0 0 2px var(--calendar-accent);
}
.today .day-number {
  border-radius:50%;
  background:#deecdf;
  color:#3f604c}
.calendar-event {
  display:block; background:var(--calendar-event-bg); color:#3f604c; border-left:3px solid var(--calendar-accent); margin:4px 0; padding:7px 6px; border-radius:4px; font-size:11px; line-height:1.5; overflow-wrap:anywhere;
}
.calendar-event.overdue {
  background:#faf3e8; color:#795f3f; border-left-color:#d6bc96;
}
.calendar-scroll {
  overflow-x:auto}
.back {
  display:inline-block;
  margin-bottom:24px}
.hero-avatar {
  width:65px;
  height:65px;
  font-size:20px}
.patient-heading h1 {
  font-size:31px}
.journey {
  display:flex;
  align-items:center;
  gap:var(--section-gap);
  padding:17px 20px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  margin-bottom:var(--section-gap)}
.journey small {
  font-size:8px;
  letter-spacing:1px;
  margin-bottom:8px}
.journey strong {
  font-size:14px}
.journey-line {
  flex:1;
  height:1px;
  background:#e4eade;
  max-width:90px}
.journey .pill {
  margin-left:auto}
.tabs {
  display:flex;
  border-bottom:1px solid #dce5dc;
  gap:28px;
  margin-bottom:25px}
.tabs button {
  background:transparent;
  border:0;
  padding:0 0 15px;
  color:#879388;
  font-size:12px;
  border-bottom:2px solid transparent}
.tabs button[aria-selected=true] {
  color:var(--teal);
  border-bottom-color:var(--teal);
  font-weight:600}
.draft-note {
  font-size:11px;
  color:#7b8069;
  background:#f1f2e9;
  border-radius:6px;
  padding:12px 15px;
  margin-bottom:18px}
.eyes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--section-gap)}
.eye-header {
  display:flex;
  gap:14px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:19px}
.eye-header h2 {
  margin:0}
.eye-header .eyebrow {
  margin-bottom:3px}
.eye-icon {
  font-size:30px;
  color:#659f8a}
.check-treatment {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 0}
.check-treatment input {
  width:19px;
  height:19px;
  accent-color:var(--teal)}
.check-treatment strong {
  font-size:12px}
.check-treatment small {
  font-size:10px;
  margin-top:4px}
.fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:4px 0 19px}
label {
  font-size:11px;
  color:#607267}
.exam-placeholder {
  border:1px dashed #cfdcd1;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:14px;
  margin-top:16px;
  color:#758d76}
.exam-placeholder>span {
  font-size:26px;
  margin-bottom:8px}
.exam-placeholder strong {
  font-size:12px}
.exam-placeholder small {
  font-size:10px;
  line-height:1.8;
  margin-top:8px}
.draft-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  font-size:11px;
  color:#7c8c7f}
.clinical-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--section-gap);
  margin-top:30px}
.clinical-grid>div {
  padding:18px;
  background:#f6f8f4;
  border-radius:8px}
.clinical-grid strong {
  display:block;
  margin-top:10px;
  font-size:12px}
.empty {
  text-align:center;
  padding:55px 20px;
  color:var(--muted);
  line-height:1.8}
.empty-icon {
  font-size:45px;
  color:#96b49b}
.empty h2 {
  margin-top:20px;
  color:var(--ink)}
[hidden] {
  display:none!important}
.skip {
  position:fixed;
  top:-60px;
  left:250px;
  background:white;
  padding:12px;
  z-index:20}
.skip:focus {
  top:10px}

.calendar-blank { height:var(--calendar-cell-height); background:#f8faf7; border-right:1px solid var(--calendar-line); border-bottom:1px solid var(--calendar-line); }
.calendar-event:hover { filter:brightness(.95); }
/* Shared sticky context. Heights are measured centrally by ionto.js. */
.topbar {
  position:sticky;
  top:0;
  z-index:30;
  background:var(--canvas)}

.patient-dock {
  position:sticky;
  top:var(--topbar-height);
  z-index:20;
  background:var(--canvas);
  padding:10px 0 0;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
  box-shadow:0 7px 10px -10px #20383555}

.patient-dock-identity {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px}

.patient-dock-identity strong {
  font-size:14px}
.patient-dock-identity span {
  font-size:11px;
  color:var(--muted)}

.patient-dock .tabs {
  margin:0;
  border:0;
  gap:24px}
.patient-dock .tabs button {
  padding-bottom:12px;
  min-height:40px}

[role=tabpanel] {
  scroll-margin-top:calc(var(--topbar-height) + var(--patient-dock-height) + 16px)}

input,select,textarea,button,a {
  scroll-margin-top:calc(var(--topbar-height) + var(--patient-dock-height) + 16px)}

.fields {
  gap:12px;
  margin-bottom:14px}
.check-treatment {
  padding:14px 0}
.eye-header {
  padding-bottom:14px}

.mobile-day-label,.mobile-calendar-note {
  display:none}

.skip {
  transform:translateY(-160%);
  top:0;
  left:var(--sidebar-width)}
.skip:focus {
  transform:none;
  top:8px;
  z-index:100}

@media(max-width:1200px) {
  
 :root {
  --sidebar-width:212px;
  --page-gutter:22px;
  --panel-padding:18px;
  --section-gap:16px}

 .sidebar {
  padding:25px 16px}
.brand {
  font-size:27px}
.brand-symbol {
  font-size:40px}

 .dashboard-grid {
  grid-template-columns:1fr}
.right-column {
  grid-template-columns:1fr 1fr}

 .stats {
  gap:12px}
.stat {
  padding:16px}
.patient-grid {
  grid-template-columns:repeat(2,1fr)}

}

@media(max-width:760px) {
  
 :root {
  --sidebar-width:0px;
  --topbar-height:46px;
  --page-gutter:16px;
  --page-block:20px;
  --panel-padding:16px;
  --section-gap:14px}

 .sidebar {
  position:static;
  width:auto;
  padding:14px 16px 10px;
  border-right:0;
  border-bottom:1px solid var(--line);
  display:block}

 .brand {
  font-size:25px}
.brand-symbol {
  font-size:35px}
.brand small {
  font-size:7px}

 .workspace,.nav-caption,.sidebar-note,.profile {
  margin-top:auto;
  display:none}
nav {
  display:flex;
  margin-top:12px;
  gap:5px}

 nav a {
  font-size:12px;
  padding:11px 12px;
  min-height:44px;
  flex:1;
  justify-content:center}
nav a span {
  font-size:18px}

 .topbar {
  font-size:10px}
.date-top {
  display:none}
.page-heading {
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px}
h1 {
  font-size:27px}

 .stats {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px}
.stat {
  padding:13px}
.stat:first-child {
  grid-column:1/-1}

 .stat>strong {
  font-size:28px;
  margin-top:6px;
  gap:8px;
  flex-wrap:wrap}
.stat strong small {
  font-size:11px;
  line-height:1.5}

 .stat>span {
  font-size:9px;
  letter-spacing:.6px}
.stat-bottom {
  line-height:1.6;
  margin-top:8px;
  padding-top:8px}

 .right-column {
  grid-template-columns:1fr}
.focus-card {
  padding:18px}
.focus-card h2 {
  font-size:22px}
.focus-line {
  margin:16px 0}

 .table-head {
  display:none}
.appointment {
  grid-template-columns:43px minmax(0,1fr) 92px;
  gap:7px;
  padding:15px 0}

 .appointment .arrow,.appointment .avatar {
  display:none}
.person strong {
  font-size:12px}
.person small {
  line-height:1.5}
.badge {
  font-size:9px}
.time {
  font-size:12px}

 .section-heading {
  gap:10px;
  margin-bottom:16px}
.section-heading h2 {
  font-size:18px}
.text-link {
  font-size:11px}

 .patient-grid {
  grid-template-columns:1fr}
.patient-card {
  padding:18px}
.eyes {
  grid-template-columns:1fr}

 .journey {
  padding:14px;
  gap:14px;
  flex-wrap:wrap}
.journey-line {
  display:none}
.journey .pill {
  margin-left:0}
.journey strong {
  font-size:12px}

 .patient-heading h1 {
  font-size:25px}
.hero-avatar {
  width:45px;
  height:45px;
  font-size:15px}
.back {
  margin-bottom:16px}

 .patient-dock-identity {
  align-items:flex-start;
  flex-direction:column;
  gap:3px;
  padding-bottom:7px}
.patient-dock-identity span {
  font-size:10px}

 .patient-dock .tabs {
  gap:6px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.patient-dock .tabs button {
  font-size:11px;
  min-height:44px;
  padding:7px 3px;
  line-height:1.4}

 .clinical-grid {
  grid-template-columns:1fr;
  gap:12px;
  margin-top:18px}
.clinical-grid>div {
  padding:14px}

 .search>div {
  flex-wrap:wrap}
.search input {
  max-width:none}
.search {
  padding-bottom:16px;
  margin-bottom:16px}

 input:not([type=checkbox]),select,textarea {
  font-size:16px;
  min-height:44px}
.button {
  min-height:44px}

 .check-treatment {
  min-height:52px}
.check-treatment input {
  width:22px;
  height:22px}
.draft-actions {
  gap:12px}

 .month-controls {
  gap:5px}
.calendar-panel .section-heading {
  flex-wrap:wrap}
.calendar {
  display:block;
  min-width:0}

 .weekday,.day,.day-number,.calendar-blank {
  display:none}
.day:has(.calendar-event) {
  display:block;
  height:auto;
  overflow:visible;
  min-height:0;
  border-right:0;
  padding:12px 0}

 .mobile-day-label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin:0 0 8px;
  text-transform:capitalize}

 .mobile-calendar-note {
  display:block;
  font-size:11px;
  line-height:1.6;
  color:var(--muted)}

 .calendar-event {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:12px;
  padding:12px;
  min-height:44px;
  margin:5px 0}

 .calendar-scroll {
  overflow:visible}
.empty {
  padding:30px 16px}

 footer {
  gap:12px;
  line-height:1.6}
.skip {
  left:16px}

}

@media(max-width:359px) {
  .fields {
  grid-template-columns:1fr}
.appointment {
  grid-template-columns:38px minmax(0,1fr)}
.appointment>div:nth-child(3) {
  grid-column:2}
.stats {
  grid-template-columns:1fr}
.patient-heading h1 {
  font-size:23px}
}


.brand small { white-space: nowrap; font-size:7px; letter-spacing:1.8px; }


.workflow-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}.workflow-actions>span{font-size:12px;color:var(--muted)}.session-history{margin-bottom:18px}.validation-summary{color:#a12d27}.validation-summary-valid{display:none}

.auth-shell{max-width:500px;margin:6vh auto;padding:20px}.auth-panel{margin:25px 0}.auth-panel form{display:grid;gap:16px;margin-bottom:20px}.auth-links{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--teal)}.logout-button{margin-top:12px;width:100%}

/* Shared interface components: account identity, navigation and cards. */
.ui-icon { width:20px; height:20px; display:inline-block; flex-shrink:0; vertical-align:middle; }
.single-line,.email-text { display:block; max-width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:normal; overflow-wrap:normal; }
.sidebar { padding:28px 20px 18px; }
.workspace { margin-top:28px; background:#fafcf9; border-radius:var(--radius); }
.workspace-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#eaf2eb; }
.nav-caption { margin:27px 12px 12px; font-size:10px; letter-spacing:1.2px; }
nav a { min-width:0; min-height:44px; gap:12px; border:1px solid transparent; transition:background .15s,border-color .15s; }
nav a span { font-size:13px; line-height:1.4; white-space:nowrap; }
nav a.active { background:#edf4ef; border-color:#dfeae1; font-weight:600; }
nav .ui-icon { width:18px; height:18px; }
.account-footer { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.account-footer .profile { display:flex; margin:0; padding:0; border:0; gap:10px; min-width:0; }
.profile-info { flex:1; min-width:0; }
.profile-info strong { font-size:12px; line-height:1.5; color:var(--ink); }
.profile-info .email-text { font-size:11px; line-height:1.6; color:#738176; margin-top:2px; }
.profile .avatar { width:35px; height:35px; background:#eaf1ec; color:#527461; font-weight:600; }
.logout-button { background:#fafcf9; min-height:36px; margin-top:14px; gap:8px; color:#607567; }
.logout-button .ui-icon { width:16px; height:16px; }
.environment-label { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:6px 9px; border:1px solid #e0e9e0; border-radius:6px; background:#f1f6f0; font-size:10px; color:#6a806c; }
.breadcrumb { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breadcrumb-divider { margin:0 7px; color:#b4bfb7; }
.panel,.stat { box-shadow:0 2px 7px #233d2e03; }
.stat { padding:18px 20px; }
.stat>span { align-items:center; font-size:10px; letter-spacing:.8px; gap:8px; }
.stat-icon { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:8px; background:#eff5ee; color:#799784; }
.stat-icon .ui-icon { width:17px; height:17px; }
.warm .stat-icon { background:#f8f1e5; color:#ad9166; }
.stat>strong { margin-top:6px; font-variant-numeric:tabular-nums; }
.button { border-radius:8px; transition:background .15s,box-shadow .15s; }
.button .ui-icon { width:16px; height:16px; }
.primary { background:#286f60; border-color:#286f60; box-shadow:0 2px 5px #286f6012; }
.empty-inline { display:flex; align-items:center; gap:14px; padding:20px 0 12px; }
.empty-inline-icon { width:42px; height:42px; border:1px solid #e4ece3; border-radius:11px; display:grid; place-items:center; background:#f6f9f4; color:#91a58e; flex-shrink:0; }
.empty-inline strong { font-size:13px; font-weight:500; }
.empty-inline p { font-size:12px; color:var(--muted); margin:6px 0 0; line-height:1.6; }
.person>div,.reminders>a>div { min-width:0; }
.person strong,.reminders strong { overflow-wrap:normal; word-break:normal; }
.patient-card { min-width:0; }
.patient-card h3 { overflow-wrap:normal; }
footer { max-width:var(--page-width); margin:0 auto; }
@media(max-width:760px) {
 .sidebar { padding:14px var(--page-gutter) 12px; }
 .account-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; }
 .account-footer .profile { min-width:0; flex:1; }
 .account-footer form { flex-shrink:0; }
 .logout-button { margin:0; min-height:44px; width:auto; padding:10px 13px; }
 nav a { gap:7px; padding:10px 8px; }
 nav a span { font-size:12px; }
 .stat { padding:13px; }
 .stat>span { font-size:9px; letter-spacing:.4px; }
 .stat-icon { width:27px; height:27px; }
 .topbar { gap:10px; }
 .environment-label { font-size:9px; padding:5px 6px; }
 .empty-inline { padding:12px 0; }
}

/* Session entry and read-only clinical snapshots. */
.clinical-form {display:grid;gap:16px;min-width:0}
.clinical-form .panel,.clinical-form .eyes {margin:0;min-width:0}
.clinical-form input,.clinical-form select,.clinical-form textarea {min-width:0;max-width:100%}
.clinical-form .eye h2 {margin-bottom:16px}
.session-entry {border-top:1px solid var(--line);padding:16px 0}
.session-entry summary {display:flex;align-items:center;gap:14px;cursor:pointer;flex-wrap:wrap;min-height:44px}
.session-entry summary .text-link {margin-left:auto}
.session-entry summary span {font-size:12px}
.clinical-values {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.clinical-values dt {font-size:11px;color:var(--muted);margin-bottom:5px}
.clinical-values dd {margin:0;font-size:13px;white-space:pre-wrap;overflow-wrap:break-word}
.clinical-wide {grid-column:1/-1}
.clinical-snapshot {margin-top:18px}
.clinical-snapshot>section {min-width:0}
.clinical-text {white-space:pre-wrap;overflow-wrap:break-word}
@media(max-width:760px){.clinical-form .fields {grid-template-columns:1fr}.session-entry summary {gap:8px}.session-entry summary>strong {width:100%}}

.statistics-counts {grid-template-columns:repeat(2,minmax(0,1fr))}
.statistic-list>div {display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.statistic-list>div:last-child {border-bottom:0}
.outcome-panel {margin-top:18px}
.outcome-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.outcome-grid article {padding:18px;border:1px solid var(--line);border-radius:10px;background:#f7faf8}
.outcome-value {display:block;font-size:27px;margin-top:16px}
.outcome-value small {font-size:12px;font-weight:400}
.statistics-method {margin:20px 0;font-size:13px;line-height:1.7}
.statistics-method summary {cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink)}
.admin-reset {margin-top:10px}
@media(max-width:760px){nav {flex-wrap:wrap}nav a {flex:1 1 40%}.outcome-grid{grid-template-columns:1fr}}
.statistics-method summary::after {content:"+";margin-left:10px}.statistics-method[open] summary::after {content:"−"}
.statistics-counts .stat:first-child {grid-column:auto}