/* Base stylesheet, loaded by templates/base.html before every other stylesheet: the design tokens and
   the styles that all pages share. Page and component stylesheets add only their own rules. */
:root {
  --ink: #16202a;
  --muted: #64727e;
  --line: #dbe2e7;
  --surface: #ffffff;
  --background: #f4f7f8;
  --primary: #176b72;
  --primary-dark: #0f5056;
  --info: #2a6fb5;
  --info-dark: #1f5791;
  --danger: #b43d3d;
  --danger-dark: #963232;
  --success: #26744d;
  --warning: #8c6511;
  --radius: 14px;
  /* Motion. Whatever moves or resizes follows a critically damped spring (Apple's default: damping
     1.0, response 0.3s): 90% of the way there by 186ms and settled by 450ms, never overshooting. A
     CSS transition starts again from wherever the element is, so changing course midway stays smooth. */
  --spring: linear(0, 0.082 5%, 0.243 10%, 0.413 15%, 0.562 20%, 0.682 25%, 0.774 30%, 0.841 35%, 0.890 40%, 0.925 45%, 0.949 50%, 0.965 55%, 0.977 60%, 0.984 65%, 0.990 70%, 0.993 75%, 0.995 80%, 0.997 85%, 0.998 90%, 0.999 95%, 1);
  --spring-duration: .45s;
  /* A pressed control reacts the moment it's pressed, not when it's let go: a button-like control
     shrinks to --press-scale (and springs back when released), a text-like one fades to --press-opacity. */
  --press-scale: .97;
  --press-opacity: .55;
  --press-duration: 100ms;
  /* What a popover or dialog grows from as it opens, and shrinks back into as it closes. */
  --materialize: scale(.96);
  /* The device's own font: SF (with SF Hebrew) on Apple devices, Segoe UI on Windows, Roboto with
     Noto Sans Hebrew on Android. */
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
}
/* Reduced motion keeps the press tint and the fades, without anything shrinking or growing. Each
   component turns off its own movements (slides, springs) in its stylesheet. */
@media (prefers-reduced-motion: reduce) {
  :root { --press-scale: 1; --materialize: none; }
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--background); }
a { color: inherit; }
button, input, select { font: inherit; }
button, .button { cursor: pointer; }

.shell { min-height: 100vh; }
.content { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.narrow { width: min(680px, calc(100% - 2rem)); }
/* Letter spacing follows the size: large headings are drawn tighter, smaller text as designed. */
h1, h2, h3 { margin: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.02em; }
h2 { font-size: 1.25rem; letter-spacing: -.01em; }
p { line-height: 1.65; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .45rem; color: var(--primary); font-size: .82rem; font-weight: 700; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.stack { display: grid; gap: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card h2, .card h3 { margin-bottom: .65rem; }
.stat { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.stat strong { display: block; margin-top: .35rem; font-size: 2rem; }
.stat-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; color: var(--primary-dark); background: #e7f2f3; font-size: 1.25rem; }
/* Icons from templates/components/icon.html: line drawings in the color of the text around them, at its size. */
.icon { display: inline-block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
/* The clinic's logo (static/img/logo.png), centered above the login and registration forms. */
.site-logo { display: block; width: 10rem; max-width: 70%; height: auto; margin: 0 auto 1rem; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: .55rem 1rem; border: 1px solid transparent; border-radius: 9px; color: #fff; background: var(--primary); text-decoration: none; font-weight: 700; transition: transform var(--spring-duration) var(--spring); }
.button:not(:disabled):hover { background: var(--primary-dark); }
.button.secondary { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button.secondary:not(:disabled):hover { border-color: var(--primary); color: var(--primary-dark); background: #f4f9f9; }
.button.info { background: var(--info); }
.button.info:not(:disabled):hover { background: var(--info-dark); }
.button.danger { background: var(--danger); }
.button.danger:not(:disabled):hover { background: var(--danger-dark); }
.button.small { min-height: 2rem; padding: .35rem .65rem; font-size: .85rem; }
.button:active:not(:disabled, [aria-busy="true"]) { transform: scale(var(--press-scale)); filter: brightness(.94); transition-duration: var(--press-duration); }
/* A button whose request is in flight is disabled too, but it is busy rather than unavailable: it
   keeps its full color, and its spinner says it is working. */
.button:disabled:not([aria-busy="true"]) { cursor: not-allowed; opacity: .5; }
.button[aria-busy="true"] { cursor: progress; }

.field { display: grid; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 700; }
.field input, .field select { min-height: 2.5rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
/* A short note under a field, such as how to fill it in. */
.field-hint { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: .85rem 1rem; text-align: start; border-bottom: 1px solid var(--line); }
th { color: var(--muted); background: #f8fafb; font-size: .82rem; }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-flex; padding: .25rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge.success { color: var(--success); background: #e5f4eb; }
.badge.warning { color: var(--warning); background: #fff4d5; }
.badge.info { color: var(--primary-dark); background: #e7f2f3; }
/* A small dot in an appointment type's calendar color (AppointmentType.color), set inline. */
.type-color-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
.empty { padding: 2rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); }
.back { display: inline-block; margin-bottom: 1rem; color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.back:active { opacity: var(--press-opacity); }
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.5rem; margin: 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; }
.login { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-card { width: min(400px, 100%); }
.login-card h1 { text-align: center; font-size: 1.45rem; }
.login-card > .muted { margin: .55rem 0 1.25rem; text-align: center; }
.form-actions { margin-top: .5rem; }
.full { width: 100%; }
.appointment-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) {
  .content { padding-top: 1.25rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
/* Touch screens: everything a finger presses is at least 44px tall, Apple's minimum. */
@media (pointer: coarse) {
  .button, .button.small, .field input, .field select { min-height: 2.75rem; }
  .back { display: inline-flex; align-items: center; min-height: 2.75rem; }
}