/* ============================================================
   App compat layer — loads AFTER skin.css.
   skin.css is design-owned and untouched; the few places where
   it assumes a different DOM shape are restored here.
   ============================================================ */

/* Self-hosted body face proposed by the design system. */
@font-face {
  font-family: 'Silkscreen';
  src: url('../assets/silkscreen.woff2') format('woff2');
  font-display: swap;
}

/* Legacy variable names still used by base/grid. */
:root {
  --panel2: var(--panel-2);
  --font: var(--font-ui);
  /* Fit the whole 8a-5p day in the viewport: 54 rows share the space left
     under the HUD/tabs, clamped so tall screens keep the design's 14px. */
  --row10: clamp(9px, calc((100vh - 250px) / 54), 14px);
  /* Krownfield's assistant-segment tone was a reddish brown that read as a
     red "blocked" ring around her appointments — warmed to stay orange. */
  --doc-orange-assist: #82501a;
}

/* Our board DOM is a grid with a time-gutter column and header row —
   restore that over skin's flex assumption. */
#board {
  display: grid;
  grid-template-columns: var(--gutter-w) repeat(4, 1fr);
  gap: 0;
  padding: 0;
}

/* The drag ghost is positioned with fixed coordinates + transform. */
#ghost {
  position: fixed;
  left: 0;
  top: 0;
}

/* Assistant lunches ARE movable in this game (11:30a-2:00p window). */
.lunch.movable { cursor: grab; }
.lunch.movable:hover { box-shadow: var(--bevel-in), var(--ring-gold); }

/* Room headers keep their compact layout under the sticky HUD. */
.room-head, .gutter-head { position: static; }
.room-head .doc-chip { position: static; display: block; }

/* Keep the tray block full-width inside its panel. */
#tray-block { width: 100%; min-height: 72px; }

/* Doctor picker buttons carry a portrait AND a name — size to content. */
#doctor-picker { align-items: center; justify-content: center; }
#picker-buttons { display: flex; gap: var(--s3); }
#doctor-picker button {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  filter: none;
}
#doctor-picker button:hover { box-shadow: var(--bevel-out), var(--ring-gold); }

/* Keep the HUD on one row even with four doctor counters. */
#topbar { gap: 10px; padding: 0 12px; flex-wrap: nowrap; overflow-x: auto; }
#topbar .counter { font-size: 10px; padding: 5px 8px; white-space: nowrap; }

/* Gutter grab-handle for a doctor's lunch — blocks can never cover it. */
.doc-lunch-handle {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 6;
  cursor: grab;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: color-mix(in srgb, var(--doc-lunch-color) 45%, transparent);
  border: 2px solid var(--doc-lunch-color);
}
.doc-lunch-handle:hover { outline: 3px solid var(--gold-400); }

/* Doctor lunch bands: that doctor's solid time is unavailable everywhere
   during this window — purely informational, never intercepts anything.
   The draggable handle lives in the time gutter. */
.doc-lunch {
  position: absolute;
  left: 2px;
  right: 2px;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(-45deg,
    transparent 0 6px,
    color-mix(in srgb, var(--doc-lunch-color) 22%, transparent) 6px 12px);
  border-top: 2px dashed color-mix(in srgb, var(--doc-lunch-color) 55%, transparent);
  border-bottom: 2px dashed color-mix(in srgb, var(--doc-lunch-color) 55%, transparent);
  color: color-mix(in srgb, var(--doc-lunch-color) 85%, #fff);
  font-family: var(--font-display);
  font-size: 7px;
  display: grid;
  place-items: center;
  text-shadow: 1px 1px 0 #000;
}

/* Angry/annoyed doctor toast (failed drops, turnover warnings). */
#dr-toast {
  position: fixed;
  top: 10px; /* over the HUD, never over the day tabs */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  background: var(--panel);
  border: var(--bd);
  box-shadow: var(--bevel-out), var(--drop-2), var(--ring-bad);
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.7;
  animation: toast-in var(--t-ui) var(--step-4);
}
#dr-toast img, #dr-toast .face-fallback {
  width: 64px;
  height: 64px;
  flex: none;
  border: var(--bd-thin);
  image-rendering: pixelated;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #000;
}
#dr-toast b { color: var(--gold-400); }
@keyframes toast-in {
  from { transform: translateX(-50%) translateY(-16px); }
  to { transform: translateX(-50%) translateY(0); }
}

/* The small-screen gate only appears on small screens. */
#screen-gate { display: none; }
@media (max-width: 899px) {
  #screen-gate { display: grid; }
}