/* Orange Tree Scheduler – the only stylesheet. Light theme only. */

:root {
  --brand: #065f46;          /* emerald: primary buttons, links, Confirmed status */
  --brand-hover: #064e3b;
  --brand-soft: #ecfdf5;     /* selected states, light panels */
  --accent: #d97706;         /* amber: one key action per screen */
  --accent-hover: #b45309;
  --accent-soft: #fef3c7;
  --ink: #1c1917;            /* primary text */
  --ink-muted: #57534e;      /* secondary text */
  --canvas: #fbfbfa;         /* page background */
  --linen: #f8f6f2;          /* section and card background */
  --line: #e7e5e4;           /* borders and dividers */
  --surface: #ffffff;        /* cards and inputs */
  --danger: #b91c1c;         /* Missed, Cancelled, errors */
  --danger-soft: #fef2f2;
  --warning: #b45309;        /* Unconfirmed, deadline soon */

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --radius-card: 20px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgba(28, 25, 23, .04), 0 10px 30px -14px rgba(28, 25, 23, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 150ms;
  --medium: 220ms;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(32px, 4vw + 16px, 40px); margin-bottom: var(--s5); }
h2 { font-size: clamp(20px, 1vw + 16px, 24px); margin: var(--s6) 0 var(--s4); }
h3 { font-size: 18px; margin: var(--s5) 0 var(--s3); }
p { margin: 0 0 var(--s3); max-width: 65ch; }
ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
li { margin-bottom: var(--s1); }

a { color: var(--brand); text-underline-offset: 3px; transition: color var(--fast) ease-out; }
a:hover { color: var(--brand-hover); }

.muted { color: var(--ink-muted); }
.small { font-size: 14px; }
.big { font-size: 22px; font-weight: 600; line-height: 1.3; }
.stack > * + * { margin-top: var(--s3); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible focus on every interactive element */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Layout: client and sign-in (centred single column) ---------- */

.page-client,
.page-auth { min-height: 100vh; }

.client-header {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s2);
}
.client-header .practice { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }

.client-main {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s8);
}

.auth-main {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--s7) var(--s4);
}
.auth-main .auth-logo { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-bottom: var(--s5); }
.auth-main .auth-logo span { font-weight: 700; font-size: 18px; }
.auth-main h1 { text-align: center; font-size: 32px; }

/* The logo image includes the practice name, so it is shown on its own (never recoloured). */
.logo { display: block; height: auto; max-width: 100%; flex: none; }
.client-header .logo { width: 240px; }
.auth-logo .logo { width: 280px; }
.sidebar .logo { width: 168px; }

/* ---------- Layout: practice pages (sidebar on desktop, top bar on mobile) ---------- */

.shell { min-height: 100vh; }

.sidebar {
  background: var(--linen);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s4);
}
.sidebar .brand {
  display: flex; align-items: center; gap: var(--s3);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px;
  min-height: 44px;
}
.sidebar nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s2); }
.sidebar nav a,
.sidebar .signout button {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 var(--s3);
  border-radius: 999px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
  transition: background-color var(--fast) ease-out, color var(--fast) ease-out;
}
.sidebar nav a:hover { background: var(--surface); color: var(--brand); }
.sidebar nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sidebar .signout { margin-top: var(--s2); }
.sidebar .signout button {
  background: none; border: 0; width: auto; cursor: pointer; font-family: inherit;
  color: var(--ink-muted); box-shadow: none;
}
.sidebar .signout button:hover { color: var(--ink); background: var(--surface); }

.staff-main { padding: var(--s5) var(--s4) var(--s8); min-width: 0; }
.staff-main > * { max-width: 1120px; }

@media (min-width: 960px) {
  .sidebar .logo { width: 200px; }
  .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-bottom: 0; border-right: 1px solid var(--line);
    padding: var(--s5) var(--s4);
    display: flex; flex-direction: column;
  }
  .sidebar nav { flex-direction: column; flex-wrap: nowrap; margin-top: var(--s5); gap: var(--s1); }
  .sidebar .signout { margin-top: auto; padding-top: var(--s5); }
  .staff-main { padding: var(--s6) var(--s7) var(--s8); }
}

.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); margin-bottom: var(--s5);
}
.page-head h1 { margin: 0; }

/* ---------- Cards and panels ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
  margin: 0 0 var(--s4);
}
.card > :last-child { margin-bottom: 0; }
.card h2:first-child,
.card h3:first-child { margin-top: 0; }
.card.highlight { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-card); }
.card.attention { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); background: var(--surface); }
.panel {
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s4);
}
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--s2); }

details.card > summary,
details.panel > summary {
  cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center;
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details.card > summary::after,
details.panel > summary::after {
  content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; color: var(--ink-muted);
  transition: transform var(--fast) ease-out;
}
details[open].card > summary::after,
details[open].panel > summary::after { transform: rotate(45deg); }
details[open] > summary { margin-bottom: var(--s3); }

.notice {
  background: var(--accent-soft);
  border: 1px solid #fde68a;
  color: var(--ink);
  border-radius: 14px;
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
  max-width: none;
}
.notice.quiet { background: var(--linen); border-color: var(--line); color: var(--ink-muted); }

.flash { border-radius: 14px; padding: var(--s3) var(--s4); margin-bottom: var(--s4); font-weight: 600; }
.flash-ok { background: var(--brand-soft); color: var(--brand); border: 1px solid #a7f3d0; }
.flash-error { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; }

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

.button,
button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 10px 22px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
  border-radius: 999px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color var(--fast) ease-out, border-color var(--fast) ease-out,
    color var(--fast) ease-out, box-shadow var(--fast) ease-out, transform var(--fast) ease-out;
}
.button:hover,
button:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.button:active,
button:active { transform: translateY(1px); }

.button.secondary,
button.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.button.secondary:hover,
button.secondary:hover { border-color: var(--ink-muted); background: var(--surface); color: var(--ink); }

/* Key action (amber). White text is set large and bold so it meets the 3:1 large-text contrast rule. */
.button.key,
button.key {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-size: 19px; font-weight: 700;
}
.button.key:hover,
button.key:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.button.danger,
button.danger { background: var(--surface); color: var(--danger); border-color: #fecaca; }
.button.danger:hover,
button.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.button.small,
button.small { padding: 8px 16px; font-size: 14px; }
.button.key.small,
button.key.small { font-size: 19px; padding: 6px 18px; }

.button.block,
button.block { display: flex; width: 100%; }

button:disabled { opacity: .45; cursor: default; transform: none; }

button.link {
  background: none; border: 0; padding: 0 var(--s1); min-height: 44px;
  color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
button.link:hover { background: none; color: var(--brand-hover); }

form.inline { display: inline-flex; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin: var(--s4) 0 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.row-actions select { width: auto; min-width: 150px; }

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

label { display: block; font-weight: 600; font-size: 15px; margin: var(--s4) 0 var(--s2); }
label.radio {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; margin: 0; padding: 0 var(--s3);
  font-weight: 500; border-radius: var(--radius-input);
  transition: background-color var(--fast) ease-out;
}
label.radio:hover { background: var(--linen); }
label.radio:has(input:checked) { background: var(--brand-soft); color: var(--brand); }

input:not([type=radio]):not([type=checkbox]):not([type=hidden]),
select,
textarea {
  font: inherit; color: var(--ink);
  min-height: 44px; width: 100%; max-width: 30rem;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid #d6d3d1;
  border-radius: var(--radius-input);
  transition: border-color var(--fast) ease-out, box-shadow var(--fast) ease-out;
}
input:hover,
select:hover { border-color: var(--ink-muted); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[readonly] { background: var(--linen); }
input[type=radio],
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; flex: none; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s3) var(--s4) var(--s4); margin: var(--s4) 0; background: var(--surface); }
legend { font-weight: 600; padding: 0 var(--s2); }
.field-note { display: block; font-size: 13px; color: var(--ink-muted); margin-top: var(--s1); }

/* ---------- Tables ---------- */

.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); margin-bottom: var(--s4); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tr:last-child > td { border-bottom: 0; }
th { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); background: var(--linen); }
tr.muted td { color: var(--ink-muted); }

/* ---------- Status chips ---------- */

.chip,
.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.s-confirmed, .s-completed, .chip-confirmed { background: var(--brand-soft); color: var(--brand); border-color: #a7f3d0; }
.s-unconfirmed, .chip-unconfirmed, .chip-late { background: var(--accent-soft); color: var(--warning); border-color: #fde68a; }
.s-missed, .s-cancelled, .chip-missed { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
.s-booked, .s-reminder_sent, .s-rescheduled, .chip-booked { background: var(--surface); color: var(--ink); border-color: var(--line); }
.chip-reserved { background: var(--linen); color: var(--ink-muted); border-color: var(--line); }
.chip-overflow { background: var(--surface); color: var(--ink-muted); border: 1px dashed #a8a29e; }
.chip-open { background: var(--surface); color: var(--brand); border-color: #a7f3d0; }
.chip-blocked { background: #f5f5f4; color: var(--ink-muted); border-color: #d6d3d1; }
.chip-closed { background: transparent; color: #78716c; border-color: transparent; }
.chip-call { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.card.danger-zone { border-color: #fecaca; box-shadow: 0 0 0 1px #fecaca, var(--shadow-card); }

.legend { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.legend li { margin: 0; }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.stat { background: var(--linen); border: 1px solid var(--line); border-radius: 16px; padding: var(--s4); }
.stat b { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.stat span { font-size: 14px; color: var(--ink-muted); }

/* ---------- Client page ---------- */

.when-local { font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: var(--s1); }
.when-ist { color: var(--ink-muted); margin-bottom: var(--s3); }
.deadline { font-weight: 600; }
.privacy { font-size: 14px; color: var(--ink-muted); text-align: center; margin: 0 auto var(--s5); }
.greeting { text-align: left; }
.zone-line { color: var(--ink-muted); }

.appt-list { list-style: none; padding: 0; margin: 0; }
.appt-list li { padding: var(--s3) 0; border-top: 1px solid var(--line); margin: 0; }
.appt-list li:first-child { border-top: 0; padding-top: 0; }
.appt-list .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); align-items: center; }

/* Client booking picker (Calendly-style): one month with arrows, then a screen of times for the
   picked day. Plain links, no JavaScript. Weeks start on Monday, matching the weekly booking limit. */
.picker {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--s5) var(--s4);
}
.picker-title { text-align: center; font-size: 22px; margin: 0 0 var(--s4); }
.picker-sub { text-align: center; color: var(--ink-muted); margin: 0 0 var(--s4); }

.month-nav { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-bottom: var(--s3); }
.month-name { margin: 0; min-width: 9.5em; text-align: center; font-weight: 700; font-size: 17px; }
.month-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--brand); background: var(--brand-soft);
  transition: background-color var(--fast) ease-out;
}
.month-arrow:hover { background: #d1fae5; }
.month-arrow.off { color: #d6d3d1; background: none; }

.month { width: 100%; table-layout: fixed; border-collapse: collapse; background: none; border: 0; margin: 0; }
.month th { padding: var(--s2) 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-muted); background: none; border: 0; text-transform: none; letter-spacing: 0; }
.month abbr { text-decoration: none; }
.month td { padding: 3px 0; text-align: center; border: 0; height: auto; }
.cal-day {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; max-width: 100%; border-radius: 50%;
  font-size: 16px; color: #a8a29e;
}
.cal-day.open {
  background: var(--brand-soft); color: var(--brand); font-weight: 700; text-decoration: none;
  transition: background-color var(--fast) ease-out, color var(--fast) ease-out;
}
.cal-day.open:hover { background: var(--brand); color: #fff; }
/* The client's own appointments: an amber ring (with a text label for screen readers). */
.cal-day.mine { box-shadow: inset 0 0 0 2.5px var(--accent); color: var(--ink); font-weight: 700; }
.cal-day.mine.open { box-shadow: inset 0 0 0 2.5px var(--accent); }
.cal-key.mine { background: var(--surface); border: 2.5px solid var(--accent); }
.cal-day.today::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: currentColor;
}

.tz-line { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: var(--s4) 0 0; font-size: 14px; color: var(--ink-muted); text-align: center; }

.picker-head { position: relative; text-align: center; margin-bottom: var(--s2); }
.picker-back {
  position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--brand);
}
.picker-back:hover { background: var(--brand-soft); }
.picker-weekday { margin: 0; font-size: 24px; font-weight: 700; }
.picker-date { margin: 0; color: var(--ink-muted); }
.picker-head + .tz-line { margin: 0 0 var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }

.times { display: grid; gap: var(--s3); }
.times form { margin: 0; }
.time-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 60px; padding: var(--s2) var(--s4);
  background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); border-radius: 14px;
  font-size: 18px; font-weight: 700;
  transition: background-color var(--fast) ease-out, color var(--fast) ease-out;
}
.time-btn:hover { background: var(--brand); color: #fff; }
.time-sub { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.time-btn:hover .time-sub { color: #ecfdf5; }

/* Confirm screen summary rows (clock / calendar / globe) */
.summary { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s3); }
.summary li { display: flex; gap: var(--s3); align-items: flex-start; margin: 0; font-weight: 600; }
.summary svg { flex: none; margin-top: 2px; color: var(--brand); }
.summary-sub { display: block; font-weight: 500; font-size: 14px; color: var(--ink-muted); }

/* Free clarity call pages (/call) */
.call-intro h1 { margin: 0 0 var(--s4); font-size: 28px; }
.call-intro .summary li { color: var(--ink-muted); }
.call-intro p:last-child { margin-bottom: 0; }
.tz-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
.tz-form label { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-size: 14px; color: var(--ink-muted); }
.tz-form select { width: auto; min-width: 12rem; }
.back-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; text-decoration: none; min-height: 44px; }
.call-form .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.call-form .phone-field { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: var(--s2); }
.call-form fieldset { padding-bottom: var(--s2); }
.call-form .consent { margin-top: var(--s4); align-items: flex-start; }
.call-form [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 14px; font-weight: 600; margin: var(--s1) 0 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.call-how { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); margin: 0;
  background: var(--brand-soft); border-radius: 14px; font-weight: 600; }
.call-how svg { flex: none; margin-top: 2px; color: var(--brand); }
@media (max-width: 480px) {
  .call-form .field-pair, .call-form .phone-field { grid-template-columns: 1fr; }
}

/* Admin booking and repeating appointments */
.cal a.add-here { text-decoration: none; }
.cal a.add-here:hover { border-color: var(--brand); background: var(--brand-soft); }
.series-form .inline-choice { display: inline-flex; margin-right: var(--s2); }
input.short { width: 5.5rem; display: inline-block; margin: 0 var(--s1); }
.radio input[type="date"] { width: auto; display: inline-block; margin-left: var(--s1); }
table.preview tr.conflict td { background: var(--danger-soft); }
table.preview input[type="datetime-local"] { min-width: 13rem; }
.tz-search { margin-bottom: var(--s2); }
.series-list { padding-left: var(--s5); }
.series-list li { margin: var(--s2) 0; }

/* Free calls list (practice pages) */
.call-items { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s3); }
.call-item { margin: 0; padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.call-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.call-who { margin: var(--s2) 0 var(--s1); }
.call-goal { margin: 0 0 var(--s2); white-space: pre-line; }
.call-item:target { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2);
  padding: 0 var(--s4) var(--s4);
}
.slots.flat { padding: 0; margin-bottom: var(--s4); }
.slots form { margin: 0; }
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: var(--s2) var(--s3);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  font-size: 18px; font-weight: 600;
}
.slot:hover { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.slot .slot-ist { font-size: 13px; font-weight: 500; color: var(--ink-muted); }


/* ---------- Practice pages ---------- */

.searchbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.searchbar input { max-width: 22rem; }

.call-list { list-style: none; padding: 0; margin: 0; }
.call-list li { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); margin: 0; }
.call-list li:first-child { border-top: 0; }

.decision { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.decision:first-of-type { border-top: 0; }

.appt-time { font-weight: 700; font-size: 16px; white-space: nowrap; }
.appt-sub { display: block; font-size: 13px; color: var(--ink-muted); }

/* Weekly calendar */
.cal { table-layout: fixed; min-width: 760px; }
.cal th:first-child { width: 112px; }
.cal th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 13px; }
.cal td { padding: var(--s2); height: 64px; }
.cal td .chip { white-space: normal; }
.cal .who { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--s1); line-height: 1.3; }
.cal .lunch td { height: auto; background: var(--linen); color: var(--ink-muted); font-size: 13px; text-align: center; }
.cal .dayhead a { color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 14px; }
.cal .dayhead .small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cal form { margin-top: var(--s1); }

/* ---------- Calendar: day, week and month views ---------- */

.cal-tabs { display: flex; gap: var(--s1); padding: var(--s1); margin: 0 0 var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; max-width: 34rem; }
.cal-tabs a { flex: 1; text-align: center; padding: var(--s2) var(--s3); min-height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.cal-tabs a:hover { background: var(--linen); color: var(--ink); }
.cal-tabs a[aria-current] { background: var(--brand); color: #fff; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.cal-bar h2 { margin: 0; font-size: 20px; }

/* Hour grid: 7 am to 10 pm in quarter-hour rows. Blocks are placed with .r-N (start row) and
   .s-N (rows spanned), and side by side with .lane-N inside .cols-N. */
.tg { --q: 18px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow-x: auto; overflow-y: hidden; margin-bottom: var(--s4); }
/* Week: each day keeps at least 120px so names stay readable; narrow screens scroll sideways. */
.tg-corner, .tg-hours { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.tg-week .tg-head, .tg-week .tg-body { min-width: calc(52px + 7 * 120px); }
.tg-day { --q: 24px; }
.tg-head, .tg-body { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.tg-day .tg-head, .tg-day .tg-body { grid-template-columns: 52px minmax(0, 1fr); }
.tg-head { border-bottom: 1px solid var(--line); }
.tg-corner { font-size: 11px; color: var(--ink-muted); display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--s1); }
.tg-dayhead { text-align: center; padding: var(--s2) 0; }
.tg-dayhead a { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ink); min-width: 44px; }
.tg-wd { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; }
.tg-dn { font-size: 18px; font-weight: 600; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tg-dayhead.is-today .tg-wd { color: var(--brand); }
.tg-dayhead.is-today .tg-dn { background: var(--brand); color: #fff; }
.tg-dayhead.is-off { background: #fdf0f0; }
.tg-hours { display: grid; grid-template-rows: repeat(15, calc(var(--q) * 4)); border-right: 1px solid var(--line); }
.tg-hour { font-size: 13px; font-weight: 500; color: var(--ink-muted); text-align: right; padding-right: 6px; transform: translateY(-0.6em); }
.tg-hour:first-child { transform: none; }
.tg-col { display: grid; grid-template-rows: repeat(60, var(--q)); grid-template-columns: minmax(0, 1fr); position: relative;
  border-right: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--q) * 4)); }
.tg-col:last-child { border-right: 0; }
.tg-col.is-off { background-color: #fdf0f0; }
.tg-col.is-today { background-color: #fbfdfc; }
.tg-col.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-col.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-col.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-offlabel { grid-row: 1 / span 2; grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: #9f1239; padding: 2px 4px; pointer-events: none; z-index: 2; }
.tg-slot { grid-column: 1 / -1; z-index: 0; }
.tg-slot:hover, .tg-slot:focus-visible { background: rgba(6, 95, 70, .08); }
.ev { z-index: 1; margin: 1px 2px; padding: 3px 6px; border-radius: 6px; font-size: 14px; line-height: 1.3; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: #1e3a8a; background: #dbeafe; border-left: 3px solid #2563eb; min-width: 0; }
/* Calendly-style text: bold name (up to two lines), then time range and status, each cut with
   an ellipsis rather than overflowing. Shorter blocks drop the status (30–45 min) or put the
   name and time on one line (15 min). */
.ev-name { font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ev-time, .ev-status, .ev-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-time { font-size: 13px; font-weight: 600; }
.ev-status { font-size: 12px; font-weight: 500; opacity: .85; }
.ev-sm { padding-top: 1px; padding-bottom: 1px; line-height: 1.2; font-size: 13px; justify-content: center; }
.ev-sm .ev-name { -webkit-line-clamp: 1; }
.ev-sm .ev-time { font-size: 12px; }
.ev-sm .ev-status { display: none; }
.ev-xs { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; line-height: 1.15; font-size: 12px; }
.ev-xs .ev-name { -webkit-line-clamp: 1; flex: 1 1 auto; min-width: 0; }
.ev-xs .ev-time { flex: none; font-size: 11px; }
.ev-xs .ev-status { display: none; }
.ev:hover { filter: brightness(.96); }
.tg-day .ev { font-size: 16px; padding: 6px 10px; }
.tg-day .ev .ev-time { font-size: 15px; }
.tg-day .ev .ev-status, .tg-day .ev .ev-tag { font-size: 14px; }
.ev .ev-tag { display: inline-block; font-size: 13px; font-weight: 600; }
.lane-1 { grid-column: 1; } .lane-2 { grid-column: 2; } .lane-3 { grid-column: 3; } .lane-4 { grid-column: 4; }
.ev.st-confirmed, .ev.st-completed { color: var(--brand); background: var(--brand-soft); border-left-color: var(--brand); }
.ev.st-unconfirmed { color: var(--warning); background: var(--accent-soft); border-left-color: var(--accent); }
.ev.st-missed { color: var(--danger); background: var(--danger-soft); border-left-color: var(--danger); }
.ev.is-ooh { border: 1px dashed #64748b; border-left-width: 3px; }
.ev.ev-call { color: #3730a3; background: #eef2ff; border-left-color: #6366f1; }
.ev.ev-closed { color: var(--ink-muted); background: repeating-linear-gradient(135deg, #f5f5f4 0 6px, #e7e5e4 6px 12px); border-left-color: #a8a29e; }
.r-1{grid-row-start:1}.r-2{grid-row-start:2}.r-3{grid-row-start:3}.r-4{grid-row-start:4}.r-5{grid-row-start:5}.r-6{grid-row-start:6}.r-7{grid-row-start:7}.r-8{grid-row-start:8}.r-9{grid-row-start:9}.r-10{grid-row-start:10}.r-11{grid-row-start:11}.r-12{grid-row-start:12}.r-13{grid-row-start:13}.r-14{grid-row-start:14}.r-15{grid-row-start:15}.r-16{grid-row-start:16}.r-17{grid-row-start:17}.r-18{grid-row-start:18}.r-19{grid-row-start:19}.r-20{grid-row-start:20}.r-21{grid-row-start:21}.r-22{grid-row-start:22}.r-23{grid-row-start:23}.r-24{grid-row-start:24}.r-25{grid-row-start:25}.r-26{grid-row-start:26}.r-27{grid-row-start:27}.r-28{grid-row-start:28}.r-29{grid-row-start:29}.r-30{grid-row-start:30}.r-31{grid-row-start:31}.r-32{grid-row-start:32}.r-33{grid-row-start:33}.r-34{grid-row-start:34}.r-35{grid-row-start:35}.r-36{grid-row-start:36}.r-37{grid-row-start:37}.r-38{grid-row-start:38}.r-39{grid-row-start:39}.r-40{grid-row-start:40}.r-41{grid-row-start:41}.r-42{grid-row-start:42}.r-43{grid-row-start:43}.r-44{grid-row-start:44}.r-45{grid-row-start:45}.r-46{grid-row-start:46}.r-47{grid-row-start:47}.r-48{grid-row-start:48}.r-49{grid-row-start:49}.r-50{grid-row-start:50}.r-51{grid-row-start:51}.r-52{grid-row-start:52}.r-53{grid-row-start:53}.r-54{grid-row-start:54}.r-55{grid-row-start:55}.r-56{grid-row-start:56}.r-57{grid-row-start:57}.r-58{grid-row-start:58}.r-59{grid-row-start:59}.r-60{grid-row-start:60}
.s-1{grid-row-end:span 1}.s-2{grid-row-end:span 2}.s-3{grid-row-end:span 3}.s-4{grid-row-end:span 4}.s-5{grid-row-end:span 5}.s-6{grid-row-end:span 6}.s-7{grid-row-end:span 7}.s-8{grid-row-end:span 8}.s-9{grid-row-end:span 9}.s-10{grid-row-end:span 10}.s-11{grid-row-end:span 11}.s-12{grid-row-end:span 12}.s-13{grid-row-end:span 13}.s-14{grid-row-end:span 14}.s-15{grid-row-end:span 15}.s-16{grid-row-end:span 16}.s-17{grid-row-end:span 17}.s-18{grid-row-end:span 18}.s-19{grid-row-end:span 19}.s-20{grid-row-end:span 20}.s-21{grid-row-end:span 21}.s-22{grid-row-end:span 22}.s-23{grid-row-end:span 23}.s-24{grid-row-end:span 24}

/* Month grid */
.mg { table-layout: fixed; width: 100%; min-width: 640px; }
.mg th { text-align: center; }
.mg td { vertical-align: top; height: 110px; padding: var(--s1); }
.mg td.is-off { background: #fdf0f0; }
.mg td.mg-out { background: var(--linen); }
.mg td.mg-out .mg-date { color: #a8a29e; }
.mg-date { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 600; text-decoration: none; color: var(--ink); }
.mg td.is-today .mg-date { background: var(--brand); color: #fff; }
.mg-off { display: block; font-size: 11px; font-weight: 600; color: #9f1239; }
.mg-list { list-style: none; padding: 0; margin: 2px 0 0; font-size: 13px; }
.mg-list li { margin: 2px 0; padding: 1px 4px; border-radius: 4px; background: #dbeafe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-list li a { color: inherit; text-decoration: none; }
.mg-list li.st-confirmed, .mg-list li.st-completed { background: var(--brand-soft); }
.mg-list li.st-unconfirmed { background: var(--accent-soft); }
.mg-list li.st-missed { background: var(--danger-soft); }
.mg-list li.ev-call { background: #eef2ff; }
.mg-list li.ev-closed { background: #f5f5f4; }
.mg-more { font-size: 12px; font-weight: 600; }

/* Auto schedule form */
.auto-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-weight: 600; margin: var(--s4) 0; }
.auto-line input.short { margin: 0; }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-property: opacity, color, background-color, border-color !important; }
  .button:active,
  button:active { transform: none; }
  details.card > summary::after { transition: none; }
}

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

/* Day lists (Tomorrow / Today): one card per appointment on narrow screens. */
@media (max-width: 760px) {
  .appts tr:first-child { display: none; }
  .appts tr { display: block; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .appts tr:last-child { border-bottom: 0; }
  .appts td { display: block; border: 0; padding: var(--s1) 0; }
  .appts td::before {
    content: attr(data-label); display: block;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
  }
  .appts td:last-child::before { display: none; }
  .appts td:last-child { padding-top: var(--s3); }
}

@media (max-width: 600px) {
  .card { padding: var(--s4); }
  .staff-main { padding: var(--s4) var(--s4) var(--s7); }
  th, td { padding: var(--s3); }
}