/*
 * 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); }
}


/* ── mês ────────────────────────────────────────────────────────────────── */

/* The Mês view of spec §3.1: a calendar month of the professional's bookings,
   whole weeks of day cells with what is in each day listed inside it.

   Nothing of the agenda's grid is reused here, and that is why the section is
   its own rather than a handful of lines added to "agenda". Dia and Semana are
   fourteen 64px hour rows with every card positioned against them to the
   hundredth of a pixel; a month is a table of boxes that knows nothing about
   hours, and a rule written for one of them would be a rule the other has to
   keep stepping around. What the two do share is what belongs to the agenda
   rather than to its grid -- the header, the owner strip, the empty state's
   two paragraphs and the professional's colour on every entry -- and those are
   reused exactly as they are. */

/* The scroll box, like .ck-agenda: the screen's own header stays put and the
   month scrolls under it. Six rows of cells and a row of headings is more than
   a phone can show at once, and rather more than that once the browser's own
   chrome is on the screen. */
.ck-month {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--color-surface);
}

/* Seven columns, twice: the headings and the cells divide the same width the
   same way, so the two rows line up without either having to be told how wide
   the other is. The seven is here and in AgendaMonth::WEEK_LENGTH, which is
   the one fact a stylesheet and a presenter cannot share; what they need not
   agree on is which days those are, because the headings are the presenter's
   own and come out in whatever order config.beginning_of_week puts them. */
.ck-month-weekdays,
.ck-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* The headings stick to the top of the scroll box, the way the week's column
   heads do and for the same reason: a reader four rows down the month still
   needs to know which column is Sunday. */
.ck-month-weekdays {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-month-weekday {
  padding: 7px 6px;
  text-align: center;
  font-size: 10.5px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* A cell is at least this tall so that the rows are even whatever is in them,
   and it grows no further because AgendaMonthDay draws at most three entries
   and a line saying how many more there are. A row as tall as its busiest day
   would be a month that does not fit on a screen, which is the one thing this
   view is for. */
.ck-month-cell {
  min-height: 104px;
  padding: 3px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  border-left: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

/* The days either side of the month being named. They are drawn rather than
   left blank -- a Monday the 31st of August with three sessions on it is not
   an empty square at the top of September -- and tinted so the month being
   named reads as a block. The tint is not the only thing saying so: the
   number's accessible name is the whole day, month and all.

   The tint is also a ground the muted grey does not clear on. #6b7280 on
   #f3f4f6 measures 4.39:1 and WCAG 2.1 AA asks 4.5:1 of text this size -- 13px
   semibold is not "large text", which begins at 18.66px bold -- and it is the
   cell's number, which is a link's own label, its entries' start times and its
   "+N" line. So the muted colour is redefined once for this ground rather than
   overridden in three rules below: everything muted inside one of these cells
   is mixed from the text colour and the tint it stands on instead of taken
   from the grey. Same faded reading, one step darker, and it follows both
   themes because both ends of the mix are tokens -- measured at 5.28:1 light
   and 7.52:1 dark, against 4.39:1 and 6.99:1 before. */
.ck-month-cell--outside {
  background: var(--c-soft);
  --c-muted: color-mix(in srgb, var(--color-text) 70%, var(--c-soft));
}
.ck-month-cell--outside .ck-month-number { color: var(--c-muted); }

/* Today, in the accent and with a rule inset along the top of the cell:
   colour alone would be the only thing saying it (spec §5, WCAG 2.1 AA) and
   the rule is the second channel. The same pair the week's column head wears,
   drawn on the other edge because here the cell is the whole of the day and
   not a heading above one. */
.ck-month-cell--today { box-shadow: inset 0 2px 0 var(--color-accent); }
.ck-month-cell--today .ck-month-number { color: var(--color-accent); }

/* The number is the link, and the only one in the cell. 24px square at rest,
   which is the smallest target WCAG 2.2 asks for at AA; the phone block below
   takes it to the 44px the rest of this interface keeps. */
.ck-month-number {
  align-self: flex-start;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--font-heading-weight) 13px var(--font-heading);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-decoration: none;
}
.ck-month-number:hover { background: var(--c-soft); color: var(--color-text); }

.ck-month-entries {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* One appointment, on one line: the professional's colour, the start, and the
   name -- or "Reservado" where spec §9.6 withholds it, which is
   AppointmentCard's answer and not this stylesheet's business. The name is the
   part that gives way when the cell is narrow, because the time in front of it
   is fixed width and truncating a clock face leaves a number that is wrong
   rather than short. */
.ck-month-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 15px;
}
/* The dot is painted at --ck-event-mark and not at the raw hex, for the reason
   the "cor por procedimento" section gives at length: the colour it carries is
   the only thing on a month entry saying what the session is, and the second
   palette put a hex on it that misses SC 1.4.11's 3:1 against a dark cell. */
.ck-month-entry-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ck-event-mark);
}
.ck-month-entry-time { flex: none; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ck-month-entry-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The two states a month cell draws, muted rather than faded.

   `opacity` on the whole line was the obvious tool and it is the wrong one,
   because it multiplies: 0.6 of an already-muted start time comes out at
   2.32:1 on white where AA asks 4.5:1 of 11.5px text, and 0.6 of the patient's
   name at 4.06:1. Dark was no better -- 3.03:1 and 3.31:1. Muting the line
   instead costs the same prominence and keeps every word at the 4.83:1 the
   muted grey has on its own. It is also the move the grid's card already makes
   for the same reason: .ck-event--cancelado sets a colour and leaves its
   opacity alone.

   What tells the two apart is the rule through a cancelled name -- the card's
   second channel, restated here, because colour alone is not one (spec §5,
   WCAG 2.1 AA). Only the dot gives up strength, and it can: it is decorative
   (aria-hidden) and it is the professional's colour rather than the state.

   These two and no more. The other six of the eight states of spec §3.2 are
   not drawn in a month cell at all -- a 15px line has no room for the card's
   glyph -- and what carries them here is the state text every entry hides for
   a screen reader, with Dia one tap away for an eye that needs the rest. */
.ck-month-entry--cancelado,
.ck-month-entry--atendido { color: var(--c-muted); }
.ck-month-entry--cancelado .ck-month-entry-name { text-decoration: line-through; }
.ck-month-entry--cancelado .ck-month-entry-dot,
.ck-month-entry--atendido .ck-month-entry-dot { opacity: 0.5; }

/* What the cell could not draw. Indented to the width of the dot and the gap
   in front of it, so it lines up with the names above rather than with their
   colours. */
.ck-month-more {
  padding-left: 10px;
  font-size: 10.5px;
  line-height: 14px;
  color: var(--c-muted);
}

/* The empty month's message, under the grid and not over it: every cell of an
   empty month is still a link to its own day, and a sentence laid across the
   middle of the calendar would cover a dozen of them. The day and the week put
   theirs inside the grid because there it covers fourteen empty hours, which
   is nothing at all. */
.ck-month-empty { padding: 28px 16px 36px; text-align: center; }

/* The phone. Seven columns across 390px leave each cell about 56px, which is
   narrower than "07:30" and far narrower than a name, so the month does what
   the week would not: it keeps the whole rectangle on the screen and gives up
   the words inside it. A month scrolled sideways is not a month -- seeing the
   shape of it at once is the entire reason to open this view rather than
   Semana -- so what gives way is the text in each entry, which becomes the
   coloured bar the design draws at this width.

   The words are clipped rather than displayed away: clip-path leaves them in
   the accessibility tree, which display: none does not, so the cell still
   reads as "09:00 Maria Souza, agendado" to a screen reader while the eye gets
   the density. That is .ck-visually-hidden's own pattern, restated here
   because it is a width that decides it and not a class in the markup.

   The number keeps the 44px target the rest of this interface keeps, since it
   is now the only thing in the cell anybody can press -- and it is the way to
   Dia, which is where a phone reads a day. */
@media (max-width: 767px) {
  .ck-month-cell { min-height: 92px; padding: 2px 3px 5px; gap: 2px; }
  .ck-month-number { min-width: 44px; min-height: 44px; }

  /* The bar is painted at --ck-event-mark, which is the entry's own colour
     moved away from the ground it stands on rather than a share of it.
     Diluting it to 60% of the ground was drawing the one thing left on the
     screen at 2.15:1 against the cell, and WCAG 2.1 SC 1.4.11 asks 3:1 of a
     graphical object you need in order to understand the content -- which this
     is, since the words beside it have just been clipped away. The raw hex was
     the answer to that while one palette was drawn here and the professional
     one had been chosen against these cells; the procedure palette was not,
     and #0369a1 on a dark cell is 2.47:1, so the mix in that section is where
     the 3:1 is now kept -- in both themes, and for the desk-width dot with it.

     All three states paint the same bar here, which is the honest thing for it
     to say: the dot the state dims is display: none at this width and the
     words are clipped, so what is left says that the day holds a booking. The
     state is still in the accessibility tree on every entry, and the number
     above the bar opens Dia, which draws it in full. */
  .ck-month-entry {
    height: 5px;
    border-radius: 3px;
    background: var(--ck-event-mark);
  }
  .ck-month-entry-dot { display: none; }
  .ck-month-entry-time,
  .ck-month-entry-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .ck-month-more { padding-left: 0; text-align: center; }
  .ck-month-weekday { padding: 6px 2px; font-size: 9.5px; letter-spacing: 0; }
}


/* ── lista ──────────────────────────────────────────────────────────────── */

/* The Lista view of spec §3.1: a month of the professional's bookings read as
   a column of lines, under a heading for each day that holds something.

   It is the only one of the four views that draws nothing. Dia and Semana
   place a card against fourteen 64px hour rows, Mês places a day in a
   rectangle of weeks, and every one of those screens spends its width on
   showing *where* a session sits; this one spends its width on saying what it
   is. So nothing of the grid or the calendar is reused here beyond what
   belongs to the agenda rather than to a drawing of it -- the header, the
   owner strip, the empty state's two paragraphs and the professional's colour.

   It is also the view that needs no phone rules to survive a phone. A list is
   one column at every width, so the media query at the end of this section is
   about making the line comfortable to read and to hit with a thumb, and not
   about rescuing a layout that does not fit. */

/* The scroll box, like .ck-agenda and .ck-month: the screen's own header stays
   put and the list scrolls under it. */
.ck-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--color-surface);
  padding-bottom: var(--space-8);
}

/* What is being listed, said in days and in how many of them there are. It
   scrolls away with the list rather than sticking, because the heading in the
   screen's own header names the month and stays; this is the detail under it,
   and a caption that followed the reader down a hundred rows would be taking
   room from the rows. */
.ck-list-span {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.ck-list-range { font: var(--font-heading-weight) 13px var(--font-heading); }
.ck-list-count { font-size: 11.5px; color: var(--c-muted); }

/* One day's heading, stuck to the top of the scroll box while that day's rows
   pass under it. It sticks inside its own <section>, so it gives way to the
   next day's heading exactly when the last of its rows leaves the screen --
   which is the whole reason to make it sticky at all: a reader forty rows into
   a busy month is otherwise reading times with no day attached to them. */
.ck-list-date {
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--c-soft);
  border-block: 1px solid var(--color-divider);
  font: var(--font-heading-weight) 13px var(--font-heading);
}

/* Today, in the accent and with a rule inset along the leading edge, plus the
   word itself: two channels and then a third, because colour alone is not one
   (spec §5, WCAG 2.1 AA). The month marks its cell with the accent and a rule
   and has no room for a word; a heading has the room, and "Hoje" is what the
   button in the header already calls this day.

   The chip is the accent behind --color-bg, which is how the switcher paints
   the view that is current, so the two most emphatic marks on the agenda are
   painted the same way. */
.ck-list-date--today { box-shadow: inset 2px 0 0 var(--color-accent); color: var(--color-accent); }
.ck-list-today {
  padding: 2px var(--space-2);
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ck-list-entries { margin: 0; padding: 0; list-style: none; }

/* One appointment. Three columns at desk width -- when, what, and which state
   it is in -- with the professional's colour on the leading edge, the same hex
   the grid's card and the month's dot are drawn from.

   The whole row is the link, as the whole card is: there is one thing to do
   with an appointment from here, and a control inside the row would be a
   smaller target for the same destination. 56px is comfortably past the 44px
   this interface keeps for a finger, before the phone block below makes the
   line taller still. */
.ck-list-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--c-line);
  border-left: 3px solid var(--ck-event-mark);
  color: var(--color-text);
  text-decoration: none;
}

/* The resting colour and the hover are both declared, and the second of them
   is the one that has to be. `a` at the top of this file is (0,0,1) and the
   class above outweighs it; `a:hover` is (0,1,1) and ties with the rule below,
   which wins only because it is written later -- so a row with no :hover of
   its own would turn accent under the pointer, a whole line of it, name,
   procedure, room and state, reading as though it had been selected. It is the
   note .ck-agenda-view and .ck-tab both carry, for the same reason.

   The tint under the pointer is --c-soft, and the muted grey does not clear AA
   on it: #6b7280 on #f3f4f6 is 4.39:1 where 4.5:1 is asked of 11.5px text. So
   the muted colour is remixed for this ground rather than left to fail on it,
   which is the move .ck-month-cell--outside makes for the same reason and with
   the same two ends -- the text colour and the ground it stands on, both
   tokens, so it follows either theme. Measured at 5.28:1 light and 7.52:1
   dark.

   Declaring the colour here is also what takes it away from the two states
   below, which is why they have a :hover of their own at the end of this
   section. This rule is (0,2,0) and `.ck-list-entry--cancelado` is (0,1,0), so
   the mute lost to it whatever order they were written in. */
.ck-list-entry:hover {
  background: var(--c-soft);
  color: var(--color-text);
  --c-muted: color-mix(in srgb, var(--color-text) 70%, var(--c-soft));
}
.ck-list-entry:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.ck-list-time {
  font: var(--font-heading-weight) 12.5px var(--font-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The middle column is the one that gives way, and it is the only one that
   may: the interval either side of it is fixed width and a truncated clock
   face is a wrong time rather than a short one, and the state is a word that
   means nothing with its end cut off. */
.ck-list-text { min-width: 0; }
.ck-list-name,
.ck-list-detail {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-list-name { font-size: 13.5px; font-weight: 500; }
.ck-list-detail { font-size: 11.5px; color: var(--c-muted); }
.ck-list-separator { padding: 0 3px; }

/* The state, as a word and nothing else.

   The card draws the eight states of spec §3.2 in colour and shape and prints
   the word only for a no-show; here every one of the eight is on the screen as
   text, which is what a list is for. The chip is deliberately not coloured by
   state: the design's three status colours are drawn as a white glyph on a
   filled ground on the card, and as ink on a 10.5px chip they would be
   #d97706 at 3.05:1 and #059669 at 3.42:1 against this surface -- the same
   arithmetic that keeps .ck-notice from being a paragraph of --c-bad. The word
   is the channel, so it is drawn in the colour the rest of the row is drawn
   in, and it inherits: the two states that mute a row mute their chip with
   it. */
.ck-list-status {
  justify-self: end;
  padding: 3px var(--space-2);
  border: 1px solid var(--color-divider);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The two states a finished row wears, muted rather than faded, for the reason
   .ck-month-entry gives at length: `opacity` multiplies, and 0.6 of an already
   muted detail line lands at 2.32:1 where AA asks 4.5:1. Muting costs the same
   prominence and keeps every word legible.

   What tells the two apart is the rule through a cancelled name, restated from
   the card and the month cell, because colour alone is not a channel (spec §5,
   WCAG 2.1 AA) -- and because "Cancelado" and "Atendido" both mean the row is
   finished while only one of them means the room was given back.

   The colour on the leading edge is left at full strength on both. It is the
   appointment's colour and not the state's, and unlike the month's dot it is
   the only thing on this screen carrying it. Full strength means
   --ck-event-mark, which is that colour moved away from the ground it stands
   on: at the raw hex the 3px edge measured 2.77:1 against a light row for the
   seeded #0ea5e9 and 2.47:1 against a dark one for #0369a1, and a bar nobody
   can see is not a channel however redundant the words beside it make it. */
.ck-list-entry--cancelado,
.ck-list-entry--atendido { color: var(--c-muted); }
.ck-list-entry--cancelado .ck-list-name { text-decoration: line-through; }

/* And the same two under the pointer, because .ck-list-entry:hover declares a
   colour and is (0,2,0) where the pair above is (0,1,0). Without this a
   finished row un-mutes on the way past -- the whole line, the struck name and
   the chip with it, since the chip is drawn in the row's own colour -- which is
   the one direction the hover was never meant to move it. It is the guard
   `a.ck-event--cancelado:hover` is on the week, added there for the same reason
   and against the same rule.

   Written here rather than beside the hover block so that which states are
   muted is written down once: a third one added to the pair above is a third
   one here, on the line below. It has to stay after .ck-list-entry:hover, which
   it ties with at (0,2,0) and beats only on order -- and it does, because that
   rule is at the top of this section and this is eighty lines below it.

   --c-muted resolves to the remix that rule sets on the hovered row, not to the
   token, so the mute lands on the tinted ground at the 5.28:1 measured up
   there rather than at the 4.39:1 the flat token would have given. */
.ck-list-entry--cancelado:hover,
.ck-list-entry--atendido:hover { color: var(--c-muted); }

/* The empty list, which really is empty: the day, the week and the month all
   keep a grid with nothing in it, and there is no such thing here. So the
   message is the screen, centred in it rather than laid over anything. */
.ck-list-empty { padding: var(--space-8) var(--space-4) 36px; text-align: center; }

/* The phone, which is the width this view exists for. Nothing has to be
   rescued -- a list is one column at 390px as it is at 1400px, and the middle
   column simply gets narrower -- so what this block does is move the two fixed
   columns out of the middle one's way. The interval and the state go on the
   first line of the row and the name, the procedure and the room take the
   whole width of the second, which is 366px of it here instead of the 150px
   they would have had beside them.

   The row is taller for it, and that is the other half of what it buys: 60px
   of link is a target no thumb misses, where the same three columns squeezed
   onto one line would have been a 44px row with a truncated name in it. */
@media (max-width: 767px) {
  .ck-list-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    min-height: 60px;
    gap: 3px var(--space-2);
  }
  .ck-list-time { grid-area: 1 / 1; }
  .ck-list-status { grid-area: 1 / 2; }
  .ck-list-text { grid-area: 2 / 1 / auto / -1; }
}

/* ── cor por procedimento ───────────────────────────────────────────────── */

/* The other half of spec §3.1's colour rule: a card is coloured by the
   professional who performs it, which is what this interface has always drawn,
   or by the procedure being performed, which is one link away in the header.
   Nothing about how a card, a month entry or a list row is drawn changes with
   the mode -- all three read --ck-event-color and neither knows nor cares which
   record the hex came off -- so what is here is the switch itself, the key that
   says what the colours mean, and the one thing the second palette broke. */

/* The switcher, beside the views' own and drawn exactly like it: industry.css
   supplies .seg and .seg-opt, and this adds which option is on, because these
   are links and `:has(input:checked)` has no input to find in one.

   The three notes .ck-agenda-view carries apply here unchanged and are not
   restated: the resting colour has to be declared or `a` paints both options
   accent, the hover has to be declared or `a:hover` (0,1,1) takes the resting
   colour back off the option the pointer is on, and the current option has to
   name its nav as well as itself -- (0,4,0) -- to outweigh industry.css's
   `.seg-opt:not(:has(input:checked)):hover`, which is (0,3,1) because `:not()`
   and `:has()` are as specific as what stands inside them and which considers
   a link unchecked forever. That last one is the rule that printed a switcher
   chip at 1.1:1 the first time it was met. */
.ck-agenda-colors { flex: none; }

/* Two segmented controls where this header carried one, and six options across
   where it carried four. Measured at 1280x800 -- the width the design is drawn
   at -- the row came to 1055px inside 1032px of header and wrapped, which cost
   the day grid 42px and put a second row under a title that had been sitting
   beside everything. Three pixels either side of each option is 36px back, and
   the row holds again at 1019px. The chips stay 32px tall and a comfortable
   target; what they give up is air, which is what there was to give.

   Both switchers, because the row is one row: trimming only the new one would
   leave two controls side by side wearing two paddings. */
.ck-agenda-views .seg-opt,
.ck-agenda-colors .seg-opt { padding-inline: 9px; }
.ck-agenda-color { color: var(--color-text); text-decoration: none; }
.ck-agenda-color:hover { color: var(--color-text); }
.ck-agenda-colors .ck-agenda-color.ck-agenda-color--current,
.ck-agenda-colors .ck-agenda-color.ck-agenda-color--current:hover { background: var(--color-accent); color: var(--color-bg); }

/* A hex made safe to paint as a bare mark on the screen's own ground.
   Declared on the three elements that carry --ck-event-color as a bare mark
   rather than as a card, and used by the month's dot and bar, by the list's
   leading edge and by the key's dots.

   The professional palette was chosen against these grounds and the procedure
   palette was not, and the difference is a whole seeded colour: #0369a1, the
   Retorno, measures 2.47:1 against a dark cell where WCAG 2.1 SC 1.4.11 asks
   3:1 of a graphical object a reader needs in order to understand what is on
   the screen -- which a legend's dot and a phone's month bar both are, the one
   because it is the whole of the key and the other because it is all that is
   left after the words beside it are clipped away.

   Mixing towards --color-text rather than lightening or darkening by a fixed
   step is what makes one formula answer both themes: the ink is at the far end
   from the ground in either one, so the same mix moves the mark away from
   whatever it is standing on. Measured across all six seeded procedure colours
   and all five professional ones, the worst case is 3.99:1 on a tinted cell in
   the light theme and 4.11:1 on a dark one; before the mix it was 2.15:1.
   The hue survives at 70% -- the six colours stay six colours, which is the
   whole point of the mode -- and the card's own fill and text are untouched,
   because those are mixed against the surface already and measured against it
   as text. */
.ck-month-entry,
.ck-list-entry,
.ck-legend-item { --ck-event-mark: color-mix(in srgb, var(--ck-event-color) 70%, var(--color-text)); }

/* The key itself, under the header and above the screen it explains, in the
   one mode where a colour says something the words do not (agenda/_legend).

   A row that wraps rather than one that scrolls: a month can hold every
   procedure in the catalogue, and a key the reader has to drag sideways is a
   key they will not read. It is outside the scroll box below it, so it stays
   on the screen while the day, the week, the month or the list moves under
   it -- the same place and the same reason as the owner strip. */
.ck-legend {
  flex: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  padding: 7px 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-legend-label {
  font: var(--font-heading-weight) 10.5px var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ck-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ck-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.ck-legend-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ck-event-mark);
}