:root {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #1e242c;
  --surface-3: #232b34;
  --border: #2a323c;
  --border-soft: #222831;
  --text: #e6eaef;
  --text-dim: #96a1af;
  --accent: #3f8cff;
  --danger: #d9534f;
  --radius: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --st-completed: #1f7a4d;
  --st-pending: #b06f0e;
  --st-confirmed: #1c5fa8;
  --st-cancelled: #8a2f2f;
  --st-unknown: #5a5a5a;
  /* Not a Halo status: a projected occurrence, kept well away from the blues and
     greens so it never reads as booked. */
  --st-forecast: #6b46c1;
  /* Nor are these: they come from Rippling. Red for one person being away, blue for the
     whole company shut. The blue leans cyan deliberately -- Confirmed is #1c5fa8 and
     the drop target is #3f8cff, so a flatter navy here would read as a booked visit. */
  --st-timeoff: #d9534f;
  --st-holiday: #2f9ecb;
}

* { box-sizing: border-box; }

/* Several components below set an explicit display, which would otherwise win
   over the hidden attribute's default display: none. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}

body { display: flex; flex-direction: column; overflow: hidden; }

h1, h2 { margin: 0; font-weight: 600; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

/* ---------------- Login ---------------- */
.login-body {
  display: grid;
  place-items: center;
  overflow: auto;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2430, var(--bg));
}

.login-card {
  width: min(380px, calc(100vw - 32px));
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.login-card h1 { font-size: 20px; }
.login-sub { margin: 4px 0 24px; color: var(--text-dim); }
.login-foot { margin: 20px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.5; }

.login-card label,
.break-glass-panel label {
  display: block;
  margin: 16px 0 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.login-card input,
.break-glass-panel input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.login-card input:focus-visible,
.break-glass-panel input:focus-visible,
.search:focus-visible,
select:focus-visible,
.date-picker:focus-visible,
.dialog input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-primary {
  margin-top: 24px;
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
}

.btn-primary:hover { filter: brightness(1.08); }

/* Microsoft's own guidance: their mark, their wording, and not restyled to look
   like the rest of the page, since a sign-in button that looks bespoke is the one
   people hesitate over. */
.btn-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding: 11px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #8c8c8c;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.btn-microsoft:hover { background: #f3f3f3; }

/* A lock in the corner of the window rather than a labelled fold on the card: the
   password form is the exception, and it should not read as a second front door
   sitting beside the first. Anchored to the lock rather than thrown up as a modal
   over the page -- there is no backdrop to trap anybody behind, and the same lock
   closes it again. */
.break-glass {
  position: fixed;
  bottom: 16px;
  left: 16px;
}

.break-glass-lock {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--text-dim);
  opacity: .4;
  cursor: pointer;
  transition: opacity .15s ease, color .15s ease;
  /* Both are needed to be rid of the disclosure triangle: the standard property,
     and the pseudo-element Safari used before it honoured it. */
  list-style: none;
}

.break-glass-lock::-webkit-details-marker { display: none; }

.break-glass-lock:hover,
.break-glass[open] .break-glass-lock {
  opacity: 1;
  color: var(--text);
  background: var(--surface);
}

.break-glass-lock:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.break-glass-panel {
  position: absolute;
  bottom: 42px;
  left: 0;
  width: min(300px, calc(100vw - 32px));
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Unlabelled but for the two initials, so the panel says as little as the lock
   does. The first field carries no top margin of its own here -- there is no
   heading above it to be separated from. */
.break-glass-panel label:first-child { margin-top: 0; }

/* The submit button carries its own top margin for the SSO-less case; in the panel
   the fields above it already provide the gap. */
.break-glass-panel .btn-primary { margin-top: 20px; }

.alert {
  padding: 10px 12px;
  background: rgba(217, 83, 79, .12);
  border: 1px solid rgba(217, 83, 79, .4);
  border-radius: var(--radius);
  color: #f3b7b5;
  font-size: 13px;
}

.alert-inline { flex-shrink: 0; margin: 10px 16px 0; }

/* A refused write stays until it is read, so it says how to get rid of it. */
.alert.is-dismissible { cursor: pointer; }
.alert.is-dismissible:hover { border-color: rgba(217, 83, 79, .7); }

/* The same refusal inside the panel it was refused in, where the eye already is. */
.pop-error {
  margin: 0 16px 16px;
  padding: 10px 12px;
  background: rgba(217, 83, 79, .12);
  border: 1px solid rgba(217, 83, 79, .4);
  border-radius: var(--radius);
  color: #f3b7b5;
  font-size: 13px;
  line-height: 1.45;
}

/* ---------------- Top bar ---------------- */
.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 15px; line-height: 1.2; }
.brand-sub { color: var(--text-dim); font-size: 12px; }

.brand-mark {
  width: 10px;
  height: 26px;
  background: linear-gradient(180deg, var(--accent), #7db1ff);
  border-radius: 3px;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-actions form { margin: 0; }
.user { color: var(--text-dim); font-size: 13px; }
.stats { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.btn-ghost {
  padding: 7px 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: nowrap;
}

.btn-ghost:hover:not(:disabled) { border-color: #3d4855; background: #242c36; }
.btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn-icon { padding: 6px 11px; font-size: 16px; line-height: 1; }
.btn-danger { color: #f0a6a4; }

/* ---------------- Toolbar ---------------- */
.toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.toolbar-group { display: flex; align-items: center; gap: 8px; }

.range-title {
  margin-left: 6px;
  font-size: 15px;
  white-space: nowrap;
}

.date-picker {
  padding: 6px 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
}

.date-picker::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }

.view-switch { display: flex; }
.view-switch .btn-ghost { border-radius: 0; }
.view-switch .btn-ghost:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.view-switch .btn-ghost:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.view-switch .btn-ghost + .btn-ghost { border-left: 0; }

/* ---------------- Filter popovers ---------------- */
.filter { position: relative; }

.filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  white-space: nowrap;
}

.filter-btn:hover { border-color: #3d4855; }
.filter-btn[aria-expanded="true"] { border-color: var(--accent); }

.filter-badge {
  padding: 1px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.filter-badge.is-filtered { background: var(--accent); border-color: var(--accent); color: #fff; }

.popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.popover-narrow { width: 250px; }

/* Controls that live in the bottom bar open upward. */
.filter-up .popover { top: auto; bottom: calc(100% + 6px); }
.pop-rule { margin: 14px 0; border: 0; border-top: 1px solid var(--border); }

.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

select, .search {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.list-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.search { margin-bottom: 8px; }
.bulk { display: flex; gap: 12px; margin-bottom: 8px; }

.link-btn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12px;
}

.link-btn:hover { text-decoration: underline; }

.options {
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.options-flush { max-height: none; }

.option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.3;
}

.option:hover { background: var(--surface-2); }
.option input { accent-color: var(--accent); flex-shrink: 0; }
.option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Clients with no visits in the range on screen stay listed but read as inactive. */
.option.is-empty span { color: var(--text-dim); }

.option .stale {
  flex-shrink: 0;
  margin-left: auto;
  color: #e0a44a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.swatch-dashed { background: transparent; border: 1px dashed #6f7987; }

.empty { padding: 10px 6px; color: var(--text-dim); font-size: 12px; }

/* ---------------- Board ---------------- */
.board-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.board-scroll { flex: 1; overflow: auto; transition: opacity .15s; }
.board-scroll.is-loading { opacity: .35; }

/* A month spans ~6 paginated Halo calls and can take several seconds; without
   this the board just looks empty and broken. */
.loading-overlay {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 12px;
  pointer-events: none;
}

/* Fixed layout plus a colgroup is what keeps the whole range on screen with no
   horizontal scrollbar: weekends take a narrow column and the weekdays share
   whatever is left, shrinking as the window narrows. */
.board {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.board col.col-res { width: 200px; }
.board col.col-weekend { width: 5.5%; }
.board.is-month col.col-res { width: 150px; }
.board.is-month col.col-total { width: 92px; }

.board th, .board td {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* Column + row headers stay put while the grid scrolls in both directions. */
.board thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.board thead tr:first-child th { top: 0; }
.board thead th.is-weekend { color: #6f7987; }
.board thead th.is-today { background: #223142; color: var(--text); }

.board th.corner {
  left: 0;
  z-index: 3;
  text-align: left;
}

.board td.res, .board th.res {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 7px 10px;
  background: var(--surface);
  vertical-align: top;
  text-align: left;
}

.res-inner { display: flex; align-items: flex-start; gap: 9px; }

.avatar {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Sits on top of the initials, and is removed by app.js when an agent has no
   photo in Halo, revealing them again. */
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.res-inner > div { min-width: 0; }
.res-name { font-weight: 600; line-height: 1.25; }

.res-meta {
  display: block;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-count {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--surface-3);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.board tbody tr:hover td.res { background: var(--surface-2); }

/* The alternating tint belongs to the row, not to its cells.
   As a cell rule (`tr:nth-child(even) td:not(.res)`) it outranked every rule that
   gives a cell a colour, so on every second row it *replaced* that colour instead of
   sitting under it: the weekend and today tints flattened, the month view's green and
   red fills disappeared, and a day off lost its banding. That is why one consultant's
   row disagreed with the row above it. On the row it simply shows through whatever the
   cell does not paint, which is what a zebra stripe is for. */
.board tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, .012); }

/* ---------------- Week / day cells ---------------- */
.day-cell {
  padding: 4px;
  vertical-align: top;
  /* Transparent rather than --bg, which is the page colour anyway, so the row tint
     above is visible through the cells that have no colour of their own. */
  background-color: transparent;
}

.day-cell.is-weekend { background: rgba(255, 255, 255, .02); }
.day-cell.is-today { background: rgba(63, 140, 255, .06); }

/* ---------------- Leave and company holidays (Rippling) ----------------
   Days off ride in the board's own chips rather than as shading or an outline around
   the cell: same size, same shape, same place in the stack, so a day reads top to
   bottom in one vocabulary instead of as a decorated cell with a list inside it.

   Colour carries the difference -- red is one person away, blue is the whole company
   shut -- and the chip colours sit beside the five statuses below, because that is
   exactly what these are to somebody scanning a column.

   This also sidesteps the fight the shaded version could not win: cell colour comes
   from the weekend tint, today, and the alternating-row stripe, all of which set the
   `background` shorthand, so any cell-level texture here rendered on some rows and not
   on others. A chip owns its own box and cannot be overruled by the row it is in. */
.board thead th.is-holiday { background: #1d2b34; color: #cfe7f3; }

.holiday-tag {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: var(--st-holiday);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  display: block;
  width: 100%;
  margin-bottom: 3px;
  padding: 4px 6px 5px;
  border: 1px solid transparent;
  border-left: 3px solid var(--st-unknown);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
}

.chip:last-child { margin-bottom: 0; }
.chip:hover { border-color: var(--accent); }

.chip-top { display: flex; align-items: baseline; gap: 5px; }
.chip-time { flex-shrink: 0; color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.chip-icon { flex-shrink: 0; margin-left: auto; font-size: 11px; }

.chip-client {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-sub {
  display: block;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip.s-Completed { border-left-color: var(--st-completed); background: rgba(31, 122, 77, .16); }
.chip.s-Pending   { border-left-color: var(--st-pending);   background: rgba(176, 111, 14, .16); }
.chip.s-Confirmed { border-left-color: var(--st-confirmed); background: rgba(28, 95, 168, .16); }
.chip.s-Cancelled { border-left-color: var(--st-cancelled); background: rgba(138, 47, 47, .16); }

/* Not visits, so not buttons: there is nothing to open and nothing to drag. The cursor
   and the hover border say so, since everything else this shape does is clickable. */
.chip.chip-off { border-left-color: var(--st-timeoff); background: rgba(217, 83, 79, .18); }
.chip.chip-holiday { border-left-color: var(--st-holiday); background: rgba(47, 158, 203, .16); }
.chip.chip-off, .chip.chip-holiday { cursor: default; }
.chip.chip-off:hover { border-color: transparent; border-left-color: var(--st-timeoff); }
.chip.chip-holiday:hover { border-color: transparent; border-left-color: var(--st-holiday); }
.chip.is-master { border-top: 1px dashed #6f7987; border-right: 1px dashed #6f7987; border-bottom: 1px dashed #6f7987; }

/* Dashed all round and semi-transparent: a projection should look provisional
   next to the solid chips beside it. */
.chip.s-Forecasted {
  border: 1px dashed rgba(151, 122, 226, .8);
  border-left: 3px solid var(--st-forecast);
  background: rgba(107, 70, 193, .14);
  color: #d8cdf5;
}
.chip.s-Forecasted .chip-client { font-weight: 500; }

/* ---------------- The rest of the calendar ----------------
   Meetings and reminders off the consultants' own calendars, drawn under their visits.
   Deliberately the quietest thing in the cell: no status colour, a grey edge, one line,
   dimmer text. The visits are the work this board is for, and a day with four meetings
   on it must still read as a day with one visit on it at a glance.

   Clickable but not draggable, and the cursor says so -- there is no write path on this
   board that would take one of these. */
.chip.chip-busy {
  border-left-color: #5b6472;
  background: rgba(255, 255, 255, .04);
  color: var(--text-dim);
  cursor: pointer;
}

.chip.chip-busy .chip-client { font-weight: 500; }
.chip.chip-busy .chip-icon { color: #7f8b9c; margin-left: 4px; }
.chip.chip-busy:hover { border-color: #7f8b9c; color: var(--text); }

/* Halo has already withheld the subject and body of anything marked private in
   Outlook, so this is only saying why the chip reads "Private Appointment". */
.chip.chip-busy.is-private { border-left-style: dashed; }

/* The tail of a long day. Centred and unfilled so it reads as a control rather than as
   one more meeting -- the cell has already grown eight chips by the time this appears. */
.chip.chip-busy.chip-more {
  border-left-color: transparent;
  background: transparent;
  text-align: center;
  font-size: 11px;
}

.chip.chip-busy.chip-more .chip-top { justify-content: center; }
.chip.chip-busy.chip-more .chip-client { flex: 0 1 auto; font-weight: 600; }

/* The toggle sits in the status bar with the legend rather than in a popover: it is
   turned on and off while looking at the board, not configured once. */
.toggle-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}

.toggle-bar input { accent-color: var(--accent); }

/* ---------------- Month cells ---------------- */
.board.is-month td.m-cell {
  height: 26px;
  padding: 0;
  overflow: hidden;
  text-align: center;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.board.is-month thead th.m-head { padding: 6px 1px; font-size: 10px; }
.board.is-month thead th.m-group {
  background: var(--surface-3);
  font-size: 11px;
  letter-spacing: .02em;
}

.m-cell.on { background: rgba(31, 122, 77, .55); color: #eafff4; font-weight: 600; cursor: pointer; }
.m-cell.on:hover { background: rgba(31, 122, 77, .85); }
.m-cell.on.multi { background: rgba(20, 96, 58, .9); }
.m-cell.gap { background: rgba(138, 47, 47, .3); color: #e5a9a7; }
.m-cell.off { background: transparent; color: #4a525d; }

/* A day made up only of projections, and one where a projection sits alongside a
   real visit. Declared after .on so they win the specificity tie. */
.m-cell.on.is-forecast { background: rgba(107, 70, 193, .5); color: #efe9ff; }
.m-cell.on.is-forecast:hover { background: rgba(107, 70, 193, .8); }
.m-cell.on.has-forecast { box-shadow: inset -3px 0 0 rgba(151, 122, 226, .9); }

/* A month cell is 26px of number and has no room for a chip, so days off are said here
   in fill and edge instead -- in the chips' colours, so the two views agree.
   Deliberately not the red of `gap` above: that red means a working day with nothing
   booked, which is a hole in the schedule, whereas these are days where empty is the
   correct answer. Hence the ring rather than a red fill. */
.m-cell.is-off:not(.on) {
  color: var(--text-dim);
  box-shadow: inset 0 0 0 1px rgba(217, 83, 79, .5);
}
.m-cell.is-holiday:not(.on) {
  background-color: rgba(47, 158, 203, .14);
  color: #a8d5e8;
}

/* Work booked on a day off, which is the one case here that is a problem. Qualified
   enough to outrank the two above, so a visit on Christmas Day reads as a visit nobody
   is there to do rather than as merely a holiday. */
.board tbody tr td.m-cell.on.is-clash { box-shadow: inset 0 0 0 2px var(--danger); }

td.m-total, th.m-total { min-width: 108px; }

td.m-total {
  padding: 0 10px;
  background: var(--surface-2);
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m-total .muted { color: var(--text-dim); }

/* ---------------- Status bar ---------------- */
.statusbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.statusbar-options { display: flex; gap: 6px; margin-left: auto; }

/* Role affordances. The guards in routes.py are the enforcement -- these rules
   only stop offering controls that would answer 403. The elements stay in the
   DOM on purpose: app.js wires every one of them by id at load, so removing
   them from the markup would throw before the board ever rendered. */
body.read-only #refresh,
body.read-only .list-actions { display: none; }

/* A viewer keeps the top-up report and loses its buttons. The report is a reading of
   which series have stopped generating, which is worth seeing from a role that cannot
   act on it; the endpoints behind the buttons are admin and editor only.

   Detached visits goes altogether, buttons and all. It is the one read here that does
   not filter to Partner Visit tickets, so it can name a series this board has no other
   business showing, and its endpoint is admin and editor for that reason -- leaving the
   button would offer a viewer nothing but a refusal. */
body.read-only .topup-go,
body.read-only .relink-go,
body.read-only #report-detached { display: none; }

body.role-consultant [data-filter="agents"],
body.role-consultant [data-filter="clients"],
body.role-consultant #report-problems,
body.role-consultant #report-recurring,
body.role-consultant #report-topup,
body.role-consultant #report-detached,
body.role-consultant #report-discrepancies { display: none; }

/* ---------------- Changing a visit ---------------- */
/* The grab cursor is the only standing hint that a chip can be moved. Anything
   louder would decorate every chip on a board whose main job is still reading. */
.chip.is-movable { cursor: grab; }
.chip.is-movable:active { cursor: grabbing; }

/* A dropped chip is shown in its new cell before Halo has been asked, so that a drag
   lands at once instead of sitting still for the couple of seconds a handover takes.
   Faded while that is in flight, because "on the board" and "saved" are not the same
   claim and the gap between them is where a wrong belief would form. */
.chip.is-pending { opacity: .5; }

/* While a drag is in flight the eligible cells are outlined, so the target is
   apparent before the drop rather than after it. */
body.dragging .day-cell { transition: background .08s ease; }

.day-cell.drop-target {
  background-color: rgba(63, 140, 255, .16);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* A cell a role cannot drop on says so by looking inert. The cursor already reads
   "no" because dragover never calls preventDefault there. */
.day-cell.drop-barred {
  background-color: rgba(217, 83, 79, .08);
  box-shadow: inset 0 0 0 1px rgba(217, 83, 79, .4);
}

/* ---------------- Changing a visit, in a panel ---------------- */
/* Borrows .report's geometry so a panel over the board means one thing wherever it
   came from. Narrow by default, because rescheduling is three small fields; wide for a
   completion, which is the one place on this board somebody writes at length. */
/* Both classes named on purpose. The element carries .report as well, and that rule is
   declared later in this file, so a single-class selector here would lose the width to
   it and every panel would come out report-sized. */
.report.visit-pop { z-index: 70; width: min(560px, calc(100vw - 48px)); }
.report.visit-pop.is-wide { width: min(1180px, calc(100vw - 48px)); }

.pop-form { padding-top: 16px; }

.pop-form .edit-grid { display: grid; gap: 4px; }
.pop-form .edit-grid > * + .field-label { margin-top: 12px; }
.pop-form input,
.pop-form select,
.pop-form textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}

.pop-form textarea { resize: vertical; }
.pop-form input:focus,
.pop-form select:focus,
.pop-form textarea:focus { outline: none; border-color: var(--accent); }

.pop-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* The primary button is full-width by default, which is right in a sign-in form and
   wrong in a panel this size. */
.pop-actions .btn-primary { width: auto; margin-top: 0; padding: 7px 14px; }
.pop-actions .muted { margin-right: auto; }

.complete-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.complete-head input { width: 110px; }
.complete-head .muted { margin: 18px 0 0; font-size: 12px; }

/* The completion note. Tall on purpose: the box is the only thing telling somebody how
   much detail the ticket wants, and a three-row one asks for a sentence. */
.rich-input {
  min-height: 42vh;
  max-height: 58vh;
  margin: 4px 0 12px;
  padding: 12px 14px;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
}

.rich-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 140, 255, .18);
}

.rich-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.rich-input > *:first-child { margin-top: 0; }
.rich-input p { margin: 0 0 8px; }
.rich-input ul,
.rich-input ol { margin: 0 0 8px; padding-left: 20px; }
.rich-input li { margin: 2px 0; }
.rich-input a { color: var(--accent); }

.detail-edit { 
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.detail-edit .edit-grid { display: grid; gap: 4px; }
.detail-edit .edit-grid > * + .field-label { margin-top: 10px; }
.detail-edit input,
.detail-edit select,
.detail-edit textarea {
  width: 100%;
  padding: 7px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}

.detail-edit textarea { resize: vertical; }
.detail-edit input:focus,
.detail-edit select:focus,
.detail-edit textarea:focus { outline: none; border-color: var(--accent); }

.edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.edit-actions {
  /* The Connect prompt is a button and a sentence explaining it, which will not sit on
     one line in a 420px drawer. */
  flex-wrap: wrap;
}

.edit-actions .muted { font-size: 11px; }

/* An anchor wearing the button's clothes. Connecting a Halo account is a redirect out
   to Halo and back, so it has to be a real link -- a button would need script to do
   what the browser already does. */
.btn-link {
  width: auto;
  margin-top: 0;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
}

/* Quieter than a .warn, because it is a standing fact about the button below it
   rather than something that has gone wrong. */
.warn-quiet {
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.5;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  padding: 11px 12px 11px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--st-completed);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13px;
}

.toast #toast-text { flex: 1; }

.btn-sm { padding: 4px 9px; font-size: 11px; }
.btn-ghost[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.status-toggles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Only the statuses being shown appear here; clicking one drops it from the view. */
.status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.status-chip:hover { border-color: #6b7785; }
.status-chip:hover .status-chip-x { opacity: 1; }
.status-chip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.status-chip-x { opacity: .35; font-size: 13px; line-height: 1; }

.status-none { color: var(--text-dim); font-size: 11px; font-style: italic; }

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 11px;
}

.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-box { width: 14px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }

.board-empty { padding: 40px 16px; color: var(--text-dim); text-align: center; }

/* ---------------- Agenda ---------------- */
.agenda { padding: 4px 0 24px; }

.agenda-section {
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.agenda-section .count { color: var(--text-dim); font-weight: 500; }

.agenda-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 14px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  color: inherit;
  border: 0;
  border-bottom: 1px solid var(--border);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agenda-row:hover { background: var(--surface-2); }
.agenda-row.is-forecast { border-left: 3px dashed var(--st-forecast); color: #cec1f2; }

.agenda-time {
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agenda-time .dur { display: block; font-size: 11px; opacity: .75; }

.agenda-body { min-width: 0; }
.agenda-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.agenda-who { font-weight: 600; }
.agenda-who::after { content: "—"; margin-left: 8px; color: var(--text-dim); font-weight: 400; }
.agenda-client { flex: 1; min-width: 0; }

.agenda-line2 {
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
}

.agenda-pill .swatch { width: 8px; height: 8px; border-radius: 50%; }

.agenda-free { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }

.agenda-free-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
}

/* ---------------- Detail drawer ---------------- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.drawer-head h2 { font-size: 15px; line-height: 1.3; }
.drawer-sub { color: var(--text-dim); font-size: 12px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 18px 24px; }

.detail-group { margin-top: 18px; }
.detail-group h3 {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Attendees, which is the one list in the drawer long enough to need scrolling: a
   company-wide invitation runs to dozens of addresses. */
.plain-list {
  max-height: 200px;
  margin: 0;
  padding-left: 18px;
  overflow-y: auto;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.7;
}

.detail-group h3 .count { color: var(--text-dim); font-weight: 500; }

.detail-row { display: grid; grid-template-columns: 116px 1fr; gap: 10px; padding: 5px 0; }
.detail-row dt { color: var(--text-dim); font-size: 12px; }
.detail-row dd { margin: 0; word-break: break-word; }
.detail-row a { color: var(--accent); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.note {
  margin: 0;
  padding: 10px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* A note Halo kept rich text for. Read as prose rather than as a transcript, since
   the structure is the point -- the plain-text version of the same note arrives with
   every line break gone and the sentences run together. */
.note-rich {
  font-family: inherit;
  font-size: 13px;
  white-space: normal;
  max-height: 420px;
}

.note-rich > *:first-child { margin-top: 0; }
.note-rich > *:last-child { margin-bottom: 0; }
.note-rich p { margin: 0 0 8px; }
.note-rich ul,
.note-rich ol { margin: 0 0 8px; padding-left: 20px; }
.note-rich li { margin: 2px 0; }
.note-rich h1,
.note-rich h2,
.note-rich h3,
.note-rich h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.note-rich a { color: var(--accent); }
.note-rich table { border-collapse: collapse; margin: 0 0 8px; }
.note-rich th,
.note-rich td { border: 1px solid var(--border); padding: 4px 7px; text-align: left; }
.note-rich blockquote {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  color: var(--muted);
}

.warn {
  margin-top: 12px;
  padding: 9px 11px;
  background: rgba(224, 164, 74, .1);
  border: 1px solid rgba(224, 164, 74, .35);
  border-radius: var(--radius);
  color: #e8c48c;
  font-size: 12px;
  line-height: 1.45;
}

.warn-forecast {
  margin-top: 0;
  background: rgba(107, 70, 193, .12);
  border-color: rgba(151, 122, 226, .45);
  color: #cec1f2;
}

.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); }

/* ---------------- Report panel ---------------- */
.report {
  position: fixed;
  z-index: 60;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 48px));
  max-height: 92vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.report-head h2 { font-size: 15px; line-height: 1.3; }
.report-body { flex: 1; overflow: auto; padding: 0 18px 20px; }

.report-lead {
  margin: 14px 0;
  max-width: 90ch;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.report-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.report-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.report-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.report-table tbody tr:hover { background: var(--surface-2); }
.report-table .projected { color: #b9a6ea; font-weight: 600; }
.report-table .unverified { color: var(--text-dim); font-style: italic; cursor: help; }
.report-table a { color: var(--accent); }
.report-table .mono { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.report-table .muted { display: block; margin-top: 2px; color: var(--text-dim); }

/* One cell holding each of the day's clashing visits. */
.stack-line { padding: 2px 0; }
.stack-line + .stack-line { border-top: 1px solid var(--border-soft); }
.stack-line .mono { margin-right: 6px; }

.tag {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

.tag-warn {
  background: rgba(214, 158, 46, .14);
  border-color: rgba(214, 158, 46, .5);
  color: #e6c477;
}

.tag-bad {
  background: rgba(197, 48, 48, .14);
  border-color: rgba(197, 48, 48, .55);
  color: #f0a0a0;
}

.report-summary {
  margin: 0 0 16px;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.7;
}

.report-summary strong { color: var(--text); }

/* ---------------- Topping a series up ---------------- */
.topup-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 12px;
}

.topup-controls .field-label { margin: 0; }
.topup-controls input { width: 74px; }

.topup-bulk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

/* Two columns where there is room. A weekday series over a quarter is sixty-five
   dates, and one column of those is a scroll rather than a list to look over. */
.topup-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px 20px;
  margin-bottom: 4px;
}

.topup-bulk { grid-column: 1 / -1; }

.topup-day,
.relink-day {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  cursor: pointer;
}

.topup-day:hover,
.relink-day:hover { background: var(--surface-2); }
.topup-day input,
.relink-day input { margin: 0; }
.topup-date { min-width: 128px; }

/* An unticked date is still readable, but plainly not going to be created. */
.topup-day:has(input:not(:checked)) .topup-date { color: var(--muted); text-decoration: line-through; }

/* One column, unlike the top-up's two: these rows carry a consultant and a couple of
   tags, and there are rarely more than a dozen of them. */
.relink-days { margin-bottom: 4px; }
.relink-day:has(input:disabled) { cursor: default; }

/* Three choices per row rather than one tick box, so the state cannot be read off
   "checked" the way the top-up's is -- on a radio group that is true of a third of every
   row. Keyed on which one is checked instead: a row nobody is doing anything to reads as
   struck out, and one about to be deleted says so in the colour used for damage
   everywhere else on the board. */
.relink-picks { display: flex; flex: 0 0 auto; gap: 2px; }

.relink-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 62px;
  color: var(--muted);
  cursor: pointer;
}

.relink-pick:has(input:checked) { color: var(--text); }
.relink-pick:has(input:disabled) { cursor: default; opacity: 0.45; }

.relink-day:has(input[value="leave"]:checked) .topup-date {
  color: var(--muted);
  text-decoration: line-through;
}

.relink-day:has(input[value="delete"]:checked) .topup-date {
  color: var(--danger);
  text-decoration: line-through;
}

.relink-day:has(input[value="delete"]:checked) .relink-pick:has(input:checked) {
  color: var(--danger);
}

.topup-created { max-height: 260px; overflow-y: auto; }

/* ---------------- Dialog ---------------- */
.dialog {
  min-width: min(360px, calc(100vw - 32px));
  padding: 22px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog h2 { margin-bottom: 16px; font-size: 15px; }
.dialog input {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dialog-hint { margin: 10px 0 0; color: var(--text-dim); font-size: 12px; min-height: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dialog-actions .btn-primary { width: auto; margin: 0; padding: 8px 16px; }

/* ---------------- Admin panel ---------------- */
/* The board fills the viewport and never scrolls; this page is a document. */
body.admin-page { height: auto; overflow: auto; }

.admin { padding: 18px 22px 40px; }

.admin-panel {
  max-width: 1200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.admin-panel-head h2 { font-size: 15px; }
.admin-panel-actions { display: flex; gap: 8px; }
.admin .report-lead { padding: 0 18px; }
.admin-table { margin-bottom: 6px; }
.admin-table th:last-child, .admin-table td:last-child { text-align: right; }
.admin-table td { vertical-align: middle; }
.admin-table tr.is-disabled td:not(.admin-row-actions) { opacity: .5; }
.admin-table tr.is-you { background: rgba(63, 140, 255, .06); }
.admin-row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

.admin-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  background: var(--surface-3);
  color: var(--text-dim);
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-tag-off { color: #f0a6a4; }
.admin-mapped { color: var(--text); }
.admin-none { color: var(--text-dim); }
/* A consultant with no agent sees an empty board, so it needs to look wrong. */
.admin-missing { color: #f0a6a4; font-weight: 600; }
.admin-suggestion { color: #b9a6ea; font-size: 11px; }

.notice-inline {
  flex-shrink: 0;
  margin: 10px 22px 0;
  padding: 10px 12px;
  background: rgba(31, 122, 77, .14);
  border: 1px solid rgba(31, 122, 77, .45);
  border-radius: var(--radius);
  font-size: 13px;
}

.admin-dialog { width: min(520px, 94vw); max-height: 88vh; }
.admin-form { display: flex; flex-direction: column; padding-top: 16px; }
.admin-form .field-label { margin-top: 14px; }
.admin-form .field-label:first-child { margin-top: 0; }

.admin-input {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
}

.log-filter { display: flex; align-items: center; gap: 6px; }
.log-filter .field-label { margin: 0; }
.log-filter .admin-input { width: auto; padding: 5px 8px; font-size: 12px; }
.log-toggle { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; }

.log-table td { vertical-align: top; }
.log-table .muted { margin-top: 2px; }
/* Dimmed, not hidden: an entry that has been put back is still what happened. */
.log-table tr.is-reverted td { opacity: .55; }
.log-field { color: var(--text-dim); }
.log-was { text-decoration: line-through; }
.log-arrow { color: var(--text-dim); }
.log-now { font-weight: 600; }
.log-done { color: var(--text-dim); font-style: italic; }
.log-none { color: var(--text-dim); cursor: help; }

.admin-hint { margin: 6px 0 0; color: var(--text-dim); font-size: 12px; }
.admin-warn { color: #e8c07d; }
.admin-form-actions { display: flex; justify-content: flex-end; margin-top: 22px; }

@media (max-width: 1100px) {
  .toolbar { justify-content: flex-start; }
  .range-title { font-size: 14px; }
}