/*
 * Clinika's own layer on top of the Industry design system.
 *
 * industry.css is the design system and is copied in verbatim so it can be
 * replaced wholesale when the system is retuned; everything specific to
 * Clinika lives here and must load after it (see the stylesheet_link_tag in
 * app/views/layouts/application.html.erb, which lists the two files in order
 * rather than using Propshaft's :app shortcut -- that one sorts logical paths
 * alphabetically, which would put clinika.css first and silently undo every
 * override below).
 *
 * Two things live in this file:
 *   1. the token overrides that turn Industry's slate-blue palette into
 *      Clinika's teal one, light on :root and dark under [data-theme="dark"];
 *   2. the application shell -- sidebar, main column, screen header, empty
 *      state -- drawn with those tokens.
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-divider: #e5e7eb;
  --color-accent: #0e7490;
  --color-accent-100: #ecfeff;
  --color-accent-200: #cffafe;
  --color-accent-300: #a5f3fc;
  --color-accent-400: #22d3ee;
  --color-accent-500: #0891b2;
  --color-accent-600: #155e75;
  --color-accent-700: #164e63;
  --color-accent-800: #164e63;
  --color-accent-900: #083344;
  --color-accent-2: #0284c7;
  --color-accent-2-100: #f0f9ff;
  --color-accent-2-800: #075985;
  --c-muted: #6b7280;
  --c-soft: #f3f4f6;
  --c-line: #eef0f3;
  --c-ok: #059669;
  --c-warn: #d97706;
  --c-bad: #dc2626;
  color-scheme: light;
}

/* Dark is opt-in through data-theme, which app/javascript/controllers/
   theme_controller.js sets from localStorage or, with nothing stored, from
   the operating system's prefers-color-scheme. */
[data-theme="dark"] {
  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-text: #e5e7eb;
  --color-divider: #374151;
  --color-accent: #22d3ee;
  --color-accent-100: #164e63;
  --color-accent-200: #155e75;
  --color-accent-600: #67e8f9;
  --color-accent-700: #a5f3fc;
  --color-accent-800: #cffafe;
  --color-accent-2-100: #0c4a6e;
  --color-accent-2-800: #bae6fd;
  --c-muted: #9ca3af;
  --c-soft: #111827;
  --c-line: #2b3444;
  --c-ok: #34d399;
  --c-warn: #fbbf24;
  --c-bad: #f87171;
  /* The two ends of Industry's neutral ramp that .tag-neutral is drawn from.
     Left alone they keep their light values, and a neutral tag comes out as a
     near-white chip on a dark card. These are the divider and the text colour
     above, not new colours. */
  --color-neutral-100: #374151;
  --color-neutral-800: #e5e7eb;
  color-scheme: dark;
}

/* ── design-system adjustments ──────────────────────────────────────────── */

.btn-primary { color: #ffffff; }
[data-theme="dark"] .btn-primary { color: #083344; }
.input { background: var(--color-surface); }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-600); }
button { font-family: var(--font-body); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }

/* ── application shell ──────────────────────────────────────────────────── */

html, body { height: 100%; }

.ck-app {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Nothing but the sidebar's own scroll areas may scroll, so the frame stays
   put while a screen's content moves underneath it. */
.ck-sidebar {
  width: 248px;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
}

.ck-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.ck-brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: #ffffff;
  font: var(--font-heading-weight) 17px var(--font-heading);
}
.ck-brand-text { min-width: 0; }
.ck-brand-name { font: var(--font-heading-weight) 19px/1 var(--font-heading); letter-spacing: 0.01em; }
.ck-brand-org { font-size: 11px; color: var(--c-muted); margin-top: 3px; }

.ck-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.ck-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background: transparent;
}
.ck-nav-item:hover { background: var(--c-soft); }
.ck-nav-item[aria-current="page"] { background: var(--color-accent-100); color: var(--color-accent); }
.ck-nav-item svg { flex: none; }

.ck-sidebar-section {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
  margin-top: 8px;
  border-top: 1px solid var(--color-divider);
}
.ck-sidebar-heading {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}

.ck-pro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-pro { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 13px; }
.ck-pro-box {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  border-style: solid;
  border-width: 1.5px;
}
/* Both labels can lose characters to the 248px column, but not equally: a
   person's name is the thing you scan this list for, so the specialty gives
   way first. The larger shrink factor is what does it -- flex distributes
   shrinkage by factor times base width, so the specialty yields several times
   faster and the names stay whole until it has nothing left to give. */
.ck-pro-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-pro-specialty {
  flex: 0 6 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-divider);
}
.ck-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #cffafe;
  color: #155e75;
  font: var(--font-heading-weight) 13px var(--font-heading);
}
.ck-account-text { flex: 1; min-width: 0; }
.ck-account-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-account-council { font-size: 11px; color: var(--c-muted); }

.ck-theme-toggle {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
/* The moon offers the dark theme, the sun offers the light one, so exactly
   one of the two is ever shown -- swapped in CSS so the pair needs no
   JavaScript beyond flipping data-theme. */
.ck-theme-toggle .ck-icon-sun { display: none; }
[data-theme="dark"] .ck-theme-toggle .ck-icon-sun { display: block; }
[data-theme="dark"] .ck-theme-toggle .ck-icon-moon { display: none; }

.ck-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ck-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ck-screen-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-screen-title {
  margin: 0;
  font: var(--font-heading-weight) 21px/1 var(--font-heading);
  letter-spacing: -0.01em;
}
.ck-screen-body { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: var(--space-8); }

.ck-empty { max-width: 420px; margin-inline: auto; padding: var(--space-8); text-align: center; background: var(--color-surface); }
.ck-empty-title { margin: 0 0 var(--space-2); font-size: 20px; }
.ck-empty-body { margin: 0; font-size: 13px; color: var(--c-muted); }

/* ── tabs ───────────────────────────────────────────────────────────────── */

/* A segmented control made of links: each tab is a state of the page and so
   is a URL, which is what lets the pair work with no JavaScript at all. */
.ck-tabs { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); }
.ck-tab {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text);
}
.ck-tab + .ck-tab { border-left: 1px solid var(--color-divider); }
/* Both properties are restated on :hover because clinika.css styles bare
   `a:hover`, whose specificity would otherwise win over a single class. */
.ck-tab:hover { background: var(--c-soft); color: var(--color-text); }
.ck-tab[aria-current="page"],
.ck-tab[aria-current="page"]:hover { background: var(--color-accent); color: #ffffff; }
/* The dark accent is a bright cyan; white on it fails AA, so the selected tab
   flips to the darkest ink of the ramp, exactly as .btn-primary does. */
[data-theme="dark"] .ck-tab[aria-current="page"] { color: #083344; }

/* ── salas e bloqueios ──────────────────────────────────────────────────── */

/* Both tabs scroll a column of content instead of centring a single panel, so
   they undo .ck-screen-body's grid placement. The paddings are the design's.
   `place-items` has to be undone as well as `display`: justify-items applies
   to the children of a block container too, and any value but `normal` there
   makes them shrink to fit their content -- which would collapse the room
   grid to a single column however wide the window is. */
.ck-rooms-body, .ck-blocks-body { display: block; place-items: normal; }
.ck-rooms-body { padding: 22px 18px; }
.ck-blocks-body { padding: 16px 18px; }

/* auto-fill, so the row keeps its card width and leaves the tail empty rather
   than stretching four cards across a desk-width window. */
.ck-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 18px; }
.ck-room { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--color-surface); }
.ck-room-name { margin: 0; font: var(--font-heading-weight) 19px/1.1 var(--font-heading); }
.ck-room-where { margin: 2px 0 0; font-size: 11.5px; color: var(--c-muted); }
.ck-room-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-room-resources { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.ck-room-resources-label { font-weight: 500; color: var(--color-text); }
.ck-room-occupancy { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--c-muted); }

/* The rule itself, stated on the screen it governs. Dashed, because it is a
   note about the system rather than a thing in it. */
.ck-rooms-note {
  margin: 26px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--color-divider);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
}
.ck-rooms-note strong { color: var(--color-text); }

.ck-blocks { border: 1px solid var(--color-divider); background: var(--color-surface); }
.ck-blocks-head {
  display: grid;
  grid-template-columns: 110px 1fr 140px 90px;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ck-blocks-affected { text-align: right; }
.ck-blocks-empty { padding: var(--space-8) var(--space-4); text-align: center; }
.ck-blocks-empty-title { margin: 0 0 var(--space-2); font-size: 18px; }
.ck-blocks-empty-body { margin: 0 auto; max-width: 52ch; font-size: 13px; color: var(--c-muted); }
.ck-blocks-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }

/* ── agenda ─────────────────────────────────────────────────────────────── */

/* The title takes the space the view, column and colour switchers will occupy
   once they exist, so it sits beside the arrows rather than centred over an
   empty row. */
.ck-agenda-header .ck-screen-title { margin: 0 auto 0 6px; }
.ck-agenda-today { height: 34px; }
.ck-agenda-steps { display: inline-flex; border: 1px solid var(--color-divider); }
.ck-agenda-step {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--color-text);
}
.ck-agenda-step:hover { background: var(--c-soft); color: var(--color-text); }
.ck-agenda-step + .ck-agenda-step { border-left: 1px solid var(--color-divider); }

/* The grid scrolls as one, so the gutter sticks to the left edge and both
   headers stick to the top of it. */
.ck-agenda {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  background: var(--color-surface);
}
.ck-agenda-gutter {
  width: 52px;
  flex: none;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-surface);
}
.ck-agenda-gutter-head,
.ck-agenda-column-head {
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-agenda-hours, .ck-agenda-body { position: relative; }
/* Pulled up by half a line so the label reads as sitting on its rule rather
   than under it. */
.ck-agenda-hour-label {
  position: absolute;
  right: 8px;
  margin-top: -7px;
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
/* Every label but the first is centred on its rule; the first one has the
   sticky column header immediately above it and would be read through it. */
.ck-agenda-hour-label:first-child { margin-top: 0; }

.ck-agenda-column { flex: 1; min-width: 0; border-left: 1px solid var(--color-divider); }
.ck-agenda-column-head { display: flex; align-items: center; gap: 8px; padding: 0 8px; overflow: hidden; }
.ck-agenda-column-dot { width: 10px; height: 10px; flex: none; }
.ck-agenda-column-text { min-width: 0; }
.ck-agenda-column-name {
  font: var(--font-heading-weight) 14px/1.1 var(--font-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-agenda-column-kicker {
  font-size: 10.5px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-agenda-rule { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-divider); }
.ck-agenda-rule--half { border-top: 1px dashed var(--c-line); }

.ck-agenda-empty { position: absolute; left: 0; right: 0; top: 0; padding: 64px 16px; text-align: center; }
.ck-agenda-empty-title { margin: 0; font: var(--font-heading-weight) 17px var(--font-heading); }
.ck-agenda-empty-body { margin: 4px auto 0; max-width: 32ch; font-size: 12.5px; color: var(--c-muted); }

/* ── appointment cards ──────────────────────────────────────────────────── */

/* The slot is the geometry the presenter computed; the card is inset inside
   it, which is what leaves the design's hairline gap between two appointments
   that touch. */
.ck-event-slot { position: absolute; }
.ck-event {
  position: absolute;
  inset: 1px 5px 2px 2px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid transparent;
  border-left: 3px solid var(--ck-event-color);
  /* Fill and text are both mixed from the one colour on the professional's
     record, so a customer who picks a new colour gets the whole card, and both
     themes mix against the surface they are drawn on. */
  background: color-mix(in srgb, var(--ck-event-color) 20%, var(--color-surface));
  color: color-mix(in srgb, var(--ck-event-color) 55%, var(--color-text));
}
.ck-event-text { flex: 1; min-width: 0; }
.ck-event-time {
  font: var(--font-heading-weight) 11px/1.2 var(--font-heading);
  letter-spacing: 0.03em;
  opacity: 0.9;
}
.ck-event-name { font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.ck-event-sub { font-size: 10.5px; opacity: 0.75; line-height: 1.3; }
.ck-event-time, .ck-event-name, .ck-event-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Too short for three lines: the procedure goes, the time and the name stay,
   and the vertical padding goes with it so that a half-hour card still holds
   both of them whole. */
.ck-event--compact { padding-top: 0; padding-bottom: 0; }
.ck-event--compact .ck-event-sub { display: none; }

/* The eight states of spec §3.2, each legible without anything being clicked. */
.ck-event--nao_confirmado {
  background: transparent;
  border: 1px dashed var(--ck-event-color);
  border-left: 3px solid var(--ck-event-color);
}
.ck-event--cancelado {
  background: transparent;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-divider);
  color: var(--c-muted);
}
.ck-event--cancelado .ck-event-name { text-decoration: line-through; }
.ck-event--atendido { opacity: 0.55; }
.ck-event--falta {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--ck-event-color) 15%, transparent) 0 5px,
    transparent 5px 10px
  );
  border: 1px solid color-mix(in srgb, var(--ck-event-color) 40%, transparent);
  border-left: 3px solid var(--ck-event-color);
}
/* The pulsing left bar of a session under way. It is the card's own left
   border that pulses rather than a bar drawn inside it: the card clips its
   overflow, and anything laid over the border would be cut away. */
.ck-event--em_atendimento {
  box-shadow: inset 0 0 0 1px var(--ck-event-color);
  animation: ck-pulse 1.3s ease-in-out infinite;
}
@keyframes ck-pulse {
  0%, 100% { border-left-color: var(--ck-event-color); }
  50% { border-left-color: color-mix(in srgb, var(--ck-event-color) 25%, transparent); }
}
/* The pulse is the only thing on this screen that moves; honour the setting
   that asks it not to (WCAG 2.1 AA, spec §5). */
@media (prefers-reduced-motion: reduce) {
  .ck-event--em_atendimento { animation: none; }
}

.ck-event-state { flex: none; }
.ck-event-state--confirmado,
.ck-event-state--atendido,
.ck-event-state--cancelado,
.ck-event-state--pedido_remarcacao,
.ck-event-state--nao_confirmado {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ck-event-state--confirmado { background: var(--c-ok); color: #ffffff; }
.ck-event-state--atendido { background: currentColor; }
.ck-event-state--atendido svg { stroke: var(--color-surface); }
.ck-event-state--cancelado { background: var(--c-bad); color: #ffffff; }
.ck-event-state--pedido_remarcacao { background: var(--c-warn); color: #ffffff; }
.ck-event-state--nao_confirmado { border: 1.5px dashed currentColor; }
.ck-event-state-glyph { font-size: 9px; font-weight: 700; line-height: 1; }

/* The state's name rides along with every card, for anything that cannot see
   the glyph. On a no-show it is the marker itself, which is how the design
   labels one. */
.ck-event-state-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ck-event-state--falta .ck-event-state-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: 0 4px;
  border: 1px solid currentColor;
  font: var(--font-heading-weight) 10px var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ck-event-conflict { flex: none; display: grid; place-items: center; color: var(--c-bad); }

/* ── the phone layout ───────────────────────────────────────────────────
   The shell above is a two-column flex row whose sidebar is a fixed 248px
   and does not shrink, so on a 375px screen it takes two thirds and leaves
   the day grid about 127px -- unusable. Below the breakpoint the sidebar
   comes out of the flow and slides in over the screen instead, and the grid
   gets the whole width.

   Everything here is additive: above 767px not one of these rules applies
   and the desktop shell is exactly as it was. */

/* Rendered on every screen, revealed only by the media query below. */
.ck-menu-button,
.ck-scrim { display: none; }

@media (max-width: 767px) {
  .ck-menu-button {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-divider);
    color: var(--color-text);
    cursor: pointer;
  }
  .ck-menu-button:hover { background: var(--c-soft); }

  .ck-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 264px;
    /* Never the whole screen: what is left of the agenda behind the drawer is
       what tells you the drawer is over it rather than a new page. */
    max-width: 82vw;
    transform: translateX(-100%);
    /* visibility, not transform alone: a drawer that is merely translated off
       the side still takes focus, so tabbing walks into an invisible menu and
       the screen reader reads it. Transitioning it keeps the slide visible on
       the way out -- visibility flips at the end of its duration, not the
       start. */
    visibility: hidden;
    transition: transform 180ms ease, visibility 180ms;
    box-shadow: var(--shadow-lg);
  }

  .ck-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8;
    background: color-mix(in srgb, #1d1f20 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms;
  }

  .ck-app--menu-open .ck-sidebar {
    transform: translateX(0);
    visibility: visible;
  }
  .ck-app--menu-open .ck-scrim {
    opacity: 1;
    visibility: visible;
  }

  /* Touch targets. 44px is the floor for a finger; the desktop shell keeps
     its 32-34px, which is right for a pointer. */
  .ck-agenda-today { height: 44px; }
  .ck-agenda-step { width: 44px; height: 44px; }
  .ck-nav-item { min-height: 44px; }
  .ck-pro { min-height: 44px; }
  .ck-theme-toggle { width: 44px; height: 44px; }

  /* The header already wraps; on a phone it wraps to controls, then the day.
     Giving the title the full row keeps a long date off a second column. */
  .ck-agenda-header .ck-screen-title { flex-basis: 100%; margin: 2px 0 0; }
}

/* The drawer is the second thing on this screen that moves. */
@media (prefers-reduced-motion: reduce) {
  .ck-sidebar,
  .ck-scrim { transition: none; }
}

/* ── flash ──────────────────────────────────────────────────────────────── */

/* What a write left behind, at the top of the main column: the layout cannot
   reach past a screen's own header, and the outcome of what someone just did
   should be read before the screen it happened on.

   It sits in the frame, not in the scroll: .ck-app is overflow: hidden and
   .ck-screen-body is the only thing on a screen that scrolls, so the banner
   stays where it is drawn for as long as the page lives and shortens the
   scroll area under it. That is the point rather than an oversight -- a
   message that scrolled out of reach would be a message a slow reader loses,
   and so would one that faded itself out. What it costs is the top of a short
   viewport, which is why it is a single line of 13px text and no more.

   It carries no dismiss control because it needs none: the next navigation
   clears it, and that is the whole of a flash's lifetime. */
.ck-flash {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}

/* The message keeps the body colour and only the bar beside it is coloured.
   Green text is the tempting way to draw a notice and the wrong one: --c-ok
   on the surface is 3.8:1, under the 4.5:1 WCAG 2.1 AA asks of body text,
   while the same colour as a 3px rule is decoration and clears the 3:1 that
   applies to it. And the colour is never what carries the meaning anyway --
   the sentence says what happened, and the two kinds reach a screen reader as
   two different roles. */
.ck-flash-item {
  margin: 0;
  padding-inline-start: var(--space-3);
  font-size: 13px;
  color: var(--color-text);
  border-inline-start: 3px solid var(--color-divider);
}
.ck-flash-item--notice { border-inline-start-color: var(--c-ok); }
.ck-flash-item--alert { border-inline-start-color: var(--c-bad); }

/* ── form errors ────────────────────────────────────────────────────────── */

/* The summary a refused save prints above its form. Framed rather than
   filled: a block of red behind a list of red text is harder to read than the
   messages are worth, so the colour stays on the border and the heading. */
.ck-form-errors {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--c-bad);
}

.ck-form-errors-title {
  margin: 0;
  font-size: 15px;
  color: var(--c-bad);
}

/* What to do about it, once, rather than once per line. */
.ck-form-errors-body {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--c-muted);
}

.ck-form-errors-list {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-4);
  font-size: 13px;
}
.ck-form-errors-list li + li { margin-top: var(--space-1); }

/* The other half of that summary: the fields it is talking about.
   config.action_view.field_error_proc marks an invalid control with
   aria-invalid rather than wrapping it, so the border hangs off the same
   attribute assistive technology reads and no screen has to remember a class
   of its own. Only the border changes -- the message beside the field is what
   says what is wrong, and colour is never what carries that. */
.input[aria-invalid="true"] { border-color: var(--c-bad); }

/* ── entrar como ────────────────────────────────────────────────────────── */

/* The stand-in for signing in, under the sidebar footer: pick a professional,
   press the button, and the whole application acts as them. It is drawn from
   the design system's own form and button classes rather than a new set of
   ck- ones, because there is nothing about it worth designing -- it is
   scaffolding, and it comes out on the day authentication goes in.

   Its own line of type says as much on screen. Small and muted, but present:
   an identity control that did not admit it was a mock would be the one
   dishonest thing in the interface. */
.ck-mock-sign-in {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.ck-mock-sign-in .field > label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ck-mock-sign-in .input { font-size: 13px; }
.ck-mock-sign-in-note {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--c-muted);
}

/* Its own media query rather than a line inside the phone block above: that
   block sits in the middle of the file, and this section is appended at the
   end precisely so two branches editing the stylesheet do not land on the same
   lines. The rule is the same 44px finger target the rest of the drawer
   keeps. */
@media (max-width: 767px) {
  .ck-mock-sign-in .input,
  .ck-mock-sign-in .btn { min-height: 44px; }
}

/* ── profissionais ──────────────────────────────────────────────────────── */

/* The cadastro of the people who attend patients: a table, a form, and the
   confirmation that stands between a row and its deletion.

   The table itself is the design system's .table and the tags are its .tag,
   untouched. What is here is the screen around them -- the column widths this
   particular table wants, the swatch beside a name, and the three states the
   delete confirmation draws. */

.ck-professionals-body { display: block; place-items: normal; padding: 22px 18px; }

/* The count that replaces the design's search row. Right-aligned, where that
   row put it. */
.ck-professionals-count {
  margin: 0 0 12px;
  text-align: right;
  font-size: 12px;
  color: var(--c-muted);
}

.ck-professionals { padding: 16px 18px 6px; background: var(--color-surface); }

/* Six columns are wider than a phone. They scroll inside the frame rather than
   pushing the screen sideways -- on the inner element and not on the frame,
   because .blueprint draws its registration marks outside its own box and a
   scroll container would clip all four of them off. */
.ck-professionals-scroll { overflow-x: auto; }

.ck-professional-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }

/* The professional's own colour, which the agenda draws their column and their
   cards in. It is the record's, so it arrives as an inline style; everything
   about the swatch except the colour is here. */
.ck-professional-color { width: 14px; height: 14px; flex: none; }

.ck-professional-short-name, .ck-professional-appointments { color: var(--c-muted); }

/* A registration number is read digit by digit and compared against a card, so
   it gets the tabular face rather than the body one. The design system has no
   token for it -- nothing in it prints a code -- so the stack is declared here,
   once, and used through a token like every other value on this screen. */
:root { --font-mono: ui-monospace, "SF Mono", Menlo, monospace; }
.ck-professional-council, .ck-input-mono { font-family: var(--font-mono); font-size: 13px; }

.ck-professional-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-professional-none { color: var(--c-muted); }

.ck-professional-actions { text-align: right; white-space: nowrap; }
/* The header over that column, aligned with the buttons under it. Qualified by
   the element on purpose: industry.css's own `.table th { text-align: left }`
   carries a type selector, so a bare class loses to it however late it is
   declared. */
th.ck-professionals-actions-column { text-align: right; }
.ck-professional-actions .btn + .btn { margin-left: 6px; }
.ck-row-action { font-size: 13px; padding: 5px 10px; }

/* The header's own controls, at the end of the row the title starts. */
.ck-screen-action { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── the cadastro form ──────────────────────────────────────────────────── */

/* The <form> is the screen on this one, and that costs it its place in the
   shell's flex chain unless it is given one. .ck-main is a flex column and
   .ck-screen is the item it hands the remaining height to; that height is the
   whole reason .ck-screen-body's overflow ever engages, and the reason the
   header carrying Cancelar and Salvar sits outside that scroll. A form wrapped
   around the section leaves .ck-screen sizing to its content instead, so on a
   viewport shorter than the form nothing scrolls but the document and the two
   buttons leave the top of the screen. This puts the form in the section's
   place so the chain reaches it again; spec/system/professionals_screen_spec.rb
   measures it at a phone's height, which is the only way to see it at all. */
.ck-screen-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.ck-form-body { display: block; place-items: normal; padding: 22px 18px; }

.ck-form {
  max-width: 720px;
  padding: 18px 20px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}

/* Two columns where there is room for two, and the four scalar fields pair up
   naturally: a name beside its short form, a registration beside a colour. */
.ck-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ck-specialties-field { margin-top: 18px; padding: 0; border: 0; }

/* What a rule looks like when it is stated rather than enforced -- the
   registration formats, the colour's reach, what a specialty decides. */
.ck-field-hint {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-muted);
}

/* A fieldset's legend, dressed as the design system dresses a field label
   (.field > label in industry.css, which a legend is not). */
.ck-specialties-field legend {
  display: block;
  padding: 0;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.ck-color { display: flex; align-items: center; gap: 10px; }
.ck-color-input { width: 116px; flex: none; padding: 4px 6px; }

/* Hidden until app/javascript/controllers/color_presets_controller.js reveals
   it, so :not([hidden]) rather than a bare display: the attribute has to win,
   and a display declared unconditionally would beat it. */
.ck-color-presets:not([hidden]) { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-color-preset {
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.ck-color-preset:hover { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-divider); }

.ck-specialties {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.ck-specialty {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  font-size: 14px;
  cursor: pointer;
}
.ck-specialty-name { flex: 1; min-width: 0; }
.ck-specialty-council { font-size: 11px; color: var(--c-muted); }

/* ── a notice inside a screen ───────────────────────────────────────────── */

/* Not the flash, which is the layout's and reports what already happened. This
   is a standing note about the record on the screen: the cross-council warning
   in the form, and the refusal the delete confirmation can already see coming.
   Framed and tinted, because it is about the thing beside it rather than about
   the page. */
.ck-notice {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid currentColor;
  background: var(--color-surface);
}
.ck-notice--warn { color: var(--c-warn); }
.ck-notice--bad { color: var(--c-bad); }
.ck-notice-icon { flex: none; margin-top: 1px; }
.ck-notice-title {
  margin: 0;
  font: var(--font-heading-weight) 14px/1.25 var(--font-heading);
}
/* The body reads as body text and not as an alarm: the colour is the frame's
   job, and a paragraph of --c-bad on the surface is under the 4.5:1 WCAG 2.1
   AA asks of text this size. */
.ck-notice-body { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--color-text); }

/* ── excluir profissional ───────────────────────────────────────────────── */

/* The confirmation, over the list. .dialog-backdrop and .dialog come from the
   design system; the inventory inside them is this screen's. */
.ck-removal { z-index: 20; }
/* The panel's own surface, and it has to be said here. industry.css gives
   .dialog `background: var(--color-surface)` and then takes it away again in
   its blueprint-frame block -- `.card, .dialog { background: transparent }`,
   same specificity, later in the file -- which is right for a card drawn on
   the page and wrong for the one thing in this application drawn over it: a
   transparent panel reads the list straight through its own body text. Every
   other surface in this cadastro (.ck-professionals, .ck-form, .ck-specialties,
   .ck-notice) restores it the same way. */
.ck-removal-dialog { width: min(560px, 100%); background: var(--color-surface); }
.ck-removal-lead { margin: 8px 0 0; color: var(--c-muted); }

.ck-removal-list { margin: 0; padding: 0; list-style: none; }
.ck-removal-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-divider);
}
.ck-removal-icon { flex: none; margin-top: 1px; }
.ck-removal-icon--blocked { color: var(--c-bad); }
.ck-removal-icon--cascade { color: var(--c-warn); }
.ck-removal-icon--free { color: var(--c-ok); }
.ck-removal-item-text { flex: 1; min-width: 0; }
.ck-removal-item-title { margin: 0; font-size: 14px; font-weight: 500; }
.ck-removal-item-body { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }

/* The three badges. Each is a .tag, tinted by what it says. */
.ck-removal-badge { flex: none; border: 1px solid currentColor; }
.ck-removal-badge--blocked { color: var(--c-bad); }
.ck-removal-badge--cascade { color: var(--c-warn); }
.ck-removal-badge--free { color: var(--c-muted); }

/* The one destructive button in the application, and it looks it. Its own
   class rather than a .btn-danger added to industry.css, which is vendored. */
.ck-btn-danger { color: #ffffff; background: var(--c-bad); border-color: var(--c-bad); }
.ck-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--c-bad) 85%, var(--color-text)); }
[data-theme="dark"] .ck-btn-danger { color: #111827; }

/* Its own media query rather than a line in the phone block in the middle of
   this file, for the reason the section above it gives: a section appended at
   the end is a section two branches can add without landing on the same lines.
   44px is the finger target the rest of the drawer keeps. */
@media (max-width: 767px) {
  .ck-professionals-body, .ck-form-body { padding: 14px 12px; }

  /* One column, and the actions stop trying to sit in the title's row.

     They wrap to a second row of the header rather than moving to a bar at the
     foot of the screen, which is where tmp/design/cadastros's telemóvel
     artboard draws them. The header is what makes that an even trade here:
     .ck-screen-header is flex: none outside .ck-screen-body's scroll, so
     Cancelar and Salvar are on screen for the whole of a long form either way,
     and keeping them there needs no second copy of the two controls in the
     markup for CSS to choose between. That is a claim about the flex chain and
     so it rests entirely on .ck-screen-form above, which is why
     spec/system/professionals_screen_spec.rb measures it at 390x600 rather
     than taking it on trust. The bar arrives with the screen that needs it --
     one whose actions cannot be reached from the top. */
  .ck-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-screen-action { flex-basis: 100%; margin-left: 0; }
  .ck-screen-action .btn { flex: 1; }

  .ck-form .input, .ck-form .btn, .ck-row-action, .ck-color-preset { min-height: 44px; }
  .ck-color-preset { width: 44px; }
  .ck-specialty { min-height: 44px; }
  .ck-removal .btn { min-height: 44px; }
}


/* ── screen-reader text ─────────────────────────────────────────────────── */

/* A label that is there for the machine and not for the eye. The clipped-rect
   pattern and not display: none or visibility: hidden, which take the text out
   of the accessibility tree along with the picture -- the point here is to keep
   it in one and out of the other. It arrives with the Recursos rows, whose
   fields are a column of one control each and would otherwise be a column of
   fields a screen reader announces as nothing. */
.ck-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ── o cadastro de salas ────────────────────────────────────────────────── */

/* What the Salas screen gained when it learned to write: two actions on each
   card, three more pairs of fields on the form, the Recursos rows, and the
   fourth state a delete confirmation can be in.

   The card itself is untouched -- .ck-room and everything under it are up in
   "salas e bloqueios" exactly as they were -- because the design's own note on
   this screen is that the card stays as it is and only gains Editar and
   Excluir. */

/* The title takes the row and the two actions sit at the end of it, so a long
   room name wraps under itself instead of pushing them off the card. */
.ck-room-head { display: flex; align-items: flex-start; gap: 8px; }
.ck-room-heading { flex: 1; min-width: 0; }
.ck-room-actions { display: flex; flex: none; gap: 6px; }
/* Smaller than industry.css's 36px .btn-icon, which is sized for a header and
   not for the corner of a card. The phone block at the foot of this file puts
   the finger target back. */
.ck-room-action { width: 28px; height: 28px; }

/* The third tint of .ck-notice: neither a warning nor a refusal, but the note
   beside the capacities that says the two numbers are separate limits. */
.ck-notice--info { color: var(--color-accent); }

/* Three pairs of fields stacked, where the Profissionais form has one. The
   spacing between them is declared here and not on .ck-form-grid, which is a
   single row on the screen that introduced it. */
.ck-form-grid + .ck-form-grid,
.ck-field-hint + .ck-form-grid { margin-top: 16px; }
.ck-equipment-field { margin-top: 18px; }

/* Dressed like .ck-specialties-field above it: a fieldset stripped of the
   browser's frame, with its legend wearing what industry.css gives a
   `.field > label`, which a legend is not. */
.ck-resources-field { margin-top: 18px; padding: 0; border: 0; }
.ck-resources-field legend {
  display: block;
  padding: 0;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* One row per resource, and a blank one at the bottom: a name that fills the
   row, and -- for a resource that exists -- the box that removes it on save. */
.ck-resources { display: flex; flex-direction: column; gap: 8px; }
.ck-resource { display: flex; align-items: center; gap: 10px; }
.ck-resource-name { flex: 1; min-width: 0; }
.ck-resource-remove {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  font-size: 12.5px;
  color: var(--c-muted);
  cursor: pointer;
}

/* The confirmation's fourth state, which Salas is the first screen to have.
   Deleting a room does three different things at once: it is refused by the
   appointments, it takes the resources and the specialty links with it, and it
   only releases the procedures that required it. That last one is neither a
   loss nor a nothing, so it is neither red nor grey. */
.ck-removal-icon--nullify, .ck-removal-badge--nullify { color: var(--color-accent); }

/* Its own media query rather than a line in one of the phone blocks above, for
   the reason the sections before it give: a section appended at the end is a
   section two branches can add without landing on the same lines. 44px is the
   finger target the rest of the interface keeps. */
@media (max-width: 767px) {
  .ck-room-action { width: 44px; height: 44px; }
  .ck-resource .input, .ck-resource-remove { min-height: 44px; }
}


/* ── agendar ────────────────────────────────────────────────────────────── */

/* The booking form, and the button on the agenda's header that opens it.

   The screen itself is the cadastro form of the two screens before it --
   .ck-screen-form, .ck-form, .ck-form-grid and .ck-field-hint are all up in
   "the cadastro form" and are used here unchanged. What is new is the Paciente
   field, which is two controls in one: a select over the clinic's own people
   and a three-field cadastro under it, with a radio saying which of the two a
   submission means. */

/* Sits at the end of the header row, after the day. The title carries the auto
   margin that puts it there (see "agenda" above), so this needs no margin of
   its own; the phone block at the foot of this section is where it gets its
   finger target. */
.ck-agenda-book { height: 34px; }

/* Dressed like the fieldsets on the Sala form: stripped of the browser's frame,
   with its legend wearing what industry.css gives a `.field > label`, which a
   legend is not.

   The bottom margin is its own and not the last half's. .ck-patient-half's
   margin collapses to nothing on the last one -- the half is indented under
   its radio and must not push the fieldset open past it -- so without this the
   Profissional row butts straight against the cadastro hint above it, at zero,
   where every other block on the form keeps 16px. The sibling rule that spaces
   the rest matches `.ck-form-grid` and `.ck-field-hint` and never a fieldset,
   which is why the Sala form never hit this: its own fieldset is the last
   block on the screen. */
.ck-patient-field { margin: 4px 0 16px; padding: 0; border: 0; }
.ck-patient-field legend {
  display: block;
  padding: 0;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Each radio opens one half of the field, and the half it opens is indented
   under it: the two are one choice read top to bottom, and a select sitting
   flush with the radio above it would read as a third control rather than as
   what that radio leads to. */
.ck-patient-choice { min-height: 26px; font-weight: 500; }
.ck-patient-half {
  margin: 6px 0 14px;
  padding-left: 24px;
  border-left: 1px solid var(--color-divider);
}
.ck-patient-half:last-child { margin-bottom: 0; }
.ck-patient-whatsapp { margin-top: 16px; }

/* The card the grid had to park at its own edge, which is a booking this screen
   is the first thing able to make: the day is drawn from 07:00 for fourteen
   hours and a room may open at 06:30 (db/seeds.rb), so AppointmentCard clamps
   the geometry and marks what it clamped. Declared here rather than beside the
   other .ck-event rules for the reason every section at this end of the file
   gives -- an appended section is one two branches can add without landing on
   the same lines -- and it belongs to this change, which is what made the case
   reachable.

   A dashed outline over whatever the state already draws, in the same muted
   grey as the marker: the card is a real appointment in a real state, and this
   says only that where it sits is the grid's answer and not its own. */
.ck-event--offgrid { outline: 1px dashed var(--c-muted); outline-offset: -1px; }
.ck-event-offgrid { flex: none; display: grid; place-items: center; color: var(--c-muted); }

/* Its own media query rather than a line in one of the phone blocks above, for
   the reason the sections before it give: a section appended at the end is a
   section two branches can add without landing on the same lines. 44px is the
   finger target the rest of the interface keeps, and a radio somebody has to
   hit with a thumb needs it as much as a button does. */
@media (max-width: 767px) {
  .ck-agenda-book { height: 44px; }
  .ck-patient-choice { min-height: 44px; }
  .ck-patient-half { padding-left: 14px; }
}

/* ── editar agendamento ─────────────────────────────────────────────────── */

/* The only screen here with two writes on it: three fields and a Salvar for
   the remarcação, and one button per transition for the situação. They are
   told apart by what they sit in rather than by a rule across the panel --
   the fields are a form, the transitions are a row of buttons under a heading
   of their own -- so nothing on the screen reads as a field somebody forgot
   to fill in. */
.ck-booking { margin: 0 0 16px; display: grid; gap: 6px 14px; }
.ck-booking-row { display: flex; gap: 10px; align-items: baseline; }
.ck-booking-row dt { flex: none; min-width: 104px; font-size: 12px; color: var(--c-muted); }
.ck-booking-row dd { margin: 0; font-size: 14px; font-weight: 500; }
.ck-booking-note { margin-bottom: 16px; }

.ck-status { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-divider); }
.ck-status-title { margin: 0 0 4px; font: var(--font-heading-weight) 16px/1.2 var(--font-heading); }

/* button_to writes a form per button, so the row is a row of forms and the
   button inside each one has to be told to fill it. */
.ck-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ck-status-form { margin: 0; }
.ck-status-button { width: 100%; }

/* The two states this application cannot produce. Dressed as what they are --
   words, not controls -- so that neither reads as a button somebody has
   disabled and might yet enable. */
.ck-status-readonly { margin-top: 18px; }
.ck-status-readonly-title { margin: 0; font-size: 12px; color: var(--c-muted); }
.ck-status-states { display: flex; flex-wrap: wrap; gap: 8px; margin: 7px 0 0; padding: 0; list-style: none; }
.ck-status-state {
  padding: 3px 9px;
  font-size: 12.5px;
  color: var(--c-muted);
  background: var(--c-soft);
  border: 1px dashed var(--color-divider);
}

/* A card on the agenda is now a link to this screen, which costs it two of the
   things the user agent and this file's own link rules do to a link.

   The underline goes, and `.ck-event` keeps its colour at rest: that colour is
   declared at (0,1,0) and the bare `a` rule at the top of this file is (0,0,1),
   so it already wins. `a:hover` is not that rule. It is (0,1,1) and outranks
   .ck-event, so without the two rules below, hovering any card would replace
   the colour mixed from the professional's own hex (spec §3.1) with the
   interface accent -- and take the state badge with it, since
   .ck-event-state--atendido and --nao_confirmado are drawn in currentColor. So
   the resting colour is declared again for :hover, and the cancelled card's
   muted grey after it, at the same specificity and later in the file.

   The focus ring is drawn inside the card rather than around it, because two
   touching appointments are two pixels apart and a ring offset outwards would
   be drawn over the neighbour it does not belong to. It is declared against
   .ck-event so that it also wins over the parked card, whose dashed outline
   sits at the same specificity as the global :focus-visible. */
a.ck-event { text-decoration: none; }
a.ck-event:hover { color: color-mix(in srgb, var(--ck-event-color) 55%, var(--color-text)); }
a.ck-event--cancelado:hover { color: var(--c-muted); }
.ck-event:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Its own media query rather than a line in one of the phone blocks above,
   for the reason every section at this end of the file gives: a section
   appended at the end is a section two branches can add without landing on
   the same lines. 44px is the finger target the rest of the interface keeps,
   and these buttons are the controls here most likely to be pressed with a
   thumb, at a desk, with a patient waiting. */
@media (max-width: 767px) {
  .ck-booking-row { display: grid; gap: 0; }
  .ck-status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-status-button { min-height: 44px; }
}


/* ── semana ─────────────────────────────────────────────────────────────── */

/* The Semana view of spec §3.1: the same fourteen hours the day draws, with
   seven columns under them instead of one.

   Nothing about the grid itself is redeclared here. The gutter, the hour
   labels, the rules, the cards and the empty state are the ones "agenda" and
   "appointment cards" already define, because the week is the day's grid with
   the column repeated -- the same claim the presenters make by sharing
   AgendaGrid. What is new is the row of column heads, the seven columns
   themselves, and the switcher that chooses between the two views. */

/* The switcher. industry.css's .seg and .seg-opt draw the frame, the dividers
   and the hover, and this adds the one thing they cannot: which option is on.
   They express that as `:has(input:checked)`, and these are links with no
   input in them -- because a view is a state of the page and so it is a URL,
   which needs no form and no JavaScript. So the current view carries a class
   instead, wearing the same accent the checked .seg-opt wears.

   The resting colour is declared too. `a` is the accent at the top of
   industry.css, which is right for a link in a sentence and wrong for the two
   halves of a segmented control, where it would read as though both were
   selected.

   Both states are weighted rather than merely written after, because on this
   control neither one is decided by source order. .ck-tab, the other segmented
   control in this file made of links, carries the same two notes for the same
   two reasons:

   - `a:hover` at the top of this file is (0,1,1) and outweighs the (0,1,0) of
     the resting colour above, so without a `:hover` of its own the view that
     is *not* current turns the link accent under the pointer -- which is the
     exact reading the resting colour is declared to prevent.
   - industry.css hovers an unchecked option with
     `.seg-opt:not(:has(input:checked)):hover`, and `:not()` and `:has()` are
     as specific as what stands inside them, so that selector is (0,3,1) -- more
     than one class and a `:hover` can answer from any file, however late it
     loads. A link has no input in it and so is unchecked to that rule forever,
     which took the accent off the current view under the pointer and left
     --color-bg printing on a 7% tint of the ink: #f9fafb on #eff0f1, a contrast
     of about 1.1:1 and a word that disappears (spec §5, WCAG 2.1 AA). Naming
     the nav as well as the option makes it (0,4,0), which wins. */
.ck-agenda-views { flex: none; }
.ck-agenda-view { color: var(--color-text); text-decoration: none; }
.ck-agenda-view:hover { color: var(--color-text); }
.ck-agenda-views .ck-agenda-view.ck-agenda-view--current,
.ck-agenda-views .ck-agenda-view.ck-agenda-view--current:hover { background: var(--color-accent); color: var(--color-bg); }

/* Whose week it is, said once above all seven columns. It sits outside the
   scroll box rather than inside it, so it stays put while the week scrolls
   under it -- the day says the same thing in its column head, which is sticky
   for the same reason. */
.ck-agenda-owner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}

/* A block, so the heads and the body stack and overflow the scroll box exactly
   as the day's single column does. A flex column here would size the 896px
   body to whatever height the box happened to have and squash fourteen hours
   into five hundred pixels.

   min-height is what lets the head row stick. A sticky element sticks inside
   its containing block, and this one is a flex item stretched to the height of
   .ck-agenda -- 351px on a 390x600 phone -- while holding 944px of grid. The
   heads would then come unstuck 300px down and scroll away with the hours,
   which is the one thing they exist not to do. min-content is the 944px the
   heads and the body actually add up to, and it still stretches past that on a
   tall window. */
.ck-agenda-week { flex: 1; position: relative; min-height: min-content; }

/* One sticky bar of heads rather than a sticky head inside each column: it is
   a single row on the screen and behaves like one when it sticks. It lines up
   with the columns below because both rows divide the same width the same way,
   and its 48px is the gutter head's, so the two edges meet. */
.ck-agenda-week-heads {
  display: flex;
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-agenda-week-head {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  border-left: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
}
.ck-agenda-week-head:hover { background: var(--c-soft); color: var(--color-text); }
.ck-agenda-week-weekday {
  font-size: 10.5px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ck-agenda-week-day {
  font: var(--font-heading-weight) 15px var(--font-heading);
  font-variant-numeric: tabular-nums;
}
/* Today, marked in the accent and with a bar under it: colour alone would be
   the only thing saying it (spec §5, WCAG 2.1 AA), and the bar is the second
   channel. The column itself is left untinted -- a background there would be
   painted over the hour rules, which are drawn beneath all seven at once. */
.ck-agenda-week-head--today { box-shadow: inset 0 -2px 0 var(--color-accent); }
.ck-agenda-week-head--today .ck-agenda-week-weekday,
.ck-agenda-week-head--today .ck-agenda-week-day { color: var(--color-accent); }

/* The columns are transparent and the fourteen hour rules are drawn once
   underneath all of them, so a rule crosses the week as one line rather than
   as seven segments that have to be kept in step. */
.ck-agenda-week-body { position: relative; display: flex; }
.ck-agenda-week-column {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid var(--color-divider);
}

/* The empty state is drawn over the columns and not over their heads, which
   the day's does not have to think about: there the message lives inside the
   column body, and here it spans all seven. 48px is the head row's height. */
.ck-agenda-empty--week { top: 48px; }

/* The phone. Seven columns across 390px would be 48px each -- narrower than
   the touch target the rest of this interface keeps, and far narrower than
   "07:30–08:10" -- so the week does not shrink to fit. It keeps a column wide
   enough to read and scrolls sideways inside .ck-agenda, under the gutter that
   is already sticky to the left edge and the heads that are already sticky to
   the top. Two scroll directions is what a week is on a phone; the alternative
   is a week that is on the screen and cannot be read.

   Which is also why every head is a link to that day: the way out of a
   sideways scroll is one column, and Dia is the view that fits a phone without
   being told how. */
@media (max-width: 767px) {
  .ck-agenda-week-head, .ck-agenda-week-column { min-width: 116px; }
  .ck-agenda-view { min-height: 44px; }

  /* The message on an empty week is centred, and what it has to be centred in
     is the part of the week somebody can see. `left: 0; right: 0` measures it
     against .ck-agenda-week, which is 812px of sideways scroll here and not
     the 338px port the phone is showing: "Nenhum agendamento nesta semana"
     was then drawn from x=279 to x=637 with the screen ending at 390, so a
     third of a sentence explaining an empty screen was on it. The width the
     day's own message gets is the port's, so the week takes the same one --
     100vw less the 52px gutter that is stuck to the left of it -- and lands
     within a pixel of where Dia puts it. */
  .ck-agenda-empty--week { right: auto; width: calc(100vw - 52px); }
}