/* calendar.css — extracted from templates/calendar.html (load-speed, row 27a).
   The calendar page is the heaviest surface; this ~610-line static style block
   used to live inline and re-download + re-parse on EVERY calendar navigation
   (the page is ~172KB). Served from /css/calendar.css (pwa_router) with a 1h
   cache so it loads once per session instead. Pure CSS — the dynamic week-grid
   slot heights ({{ wk_slot_h }}) stay inline in calendar.html. Edit the calendar
   styling HERE now, not in the template. */
  /* Paper surface */
  .paper {
    background: #fefdf8;       /* warm cream */
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  }
  .paper-section-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 4px;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .paper-rule { border-top: 1px solid #e5e7eb; }
  .paper-input {
    background: transparent;
    border: none;
    border-bottom: 1px dotted #d1d5db;
    color: #111827;
    padding: 2px 0;
    width: 100%;
    font-family: ui-sans-serif, system-ui, sans-serif;
  }
  .paper-input::placeholder { color: #d1d5db; font-style: italic; }
  .paper-input:focus { outline: none; border-bottom-color: #6b7280; }

  /* Time grid */
  .timegrid {
    display: grid;
    grid-template-columns: 72px 1fr 150px;
    position: relative;
  }
  .timegrid-due {
    grid-column: 3;
    position: relative;
    border-left: 1px solid #e5e7eb;
    background: #fff8e1;
  }
  /* DUE column header lives outside .timegrid; left as a no-op placeholder
     here in case future polish puts it back. */
  .due-bar {
    position: absolute; left: 4px; right: 4px;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 11px;
    line-height: 1.25;
    background: white;
    border: 1px solid #f59e0b;
    color: #78350f;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .due-bar .due-time { display: block; font-size: 9px; font-weight: 700; color: #92400e; }
  .due-bar .due-overdue { color: #b91c1c; }
  .due-bar.priority-urgent { border-color: #b91c1c; background: #fef2f2; }
  .due-bar.priority-high   { border-color: #d97706; background: #fffbeb; }
  .time-label {
    font-size: 10px;
    color: #6b7280;
    text-align: right;
    padding: 0 8px;
    border-bottom: 1px solid #f1f5f9;
    line-height: 28px;
    height: 28px;
    white-space: nowrap;
    overflow: hidden;
  }
  .time-slot {
    border-bottom: 1px solid #f1f5f9;
    height: 28px;
    position: relative;
  }
  .time-slot.on-hour { border-bottom-color: #e5e7eb; }
  /* Phone (< md): show ONLY the hourly grid lines + labels (hide the half-hour
     borders AND time labels). Slot heights stay the same so absolutely
     positioned events keep their geometry — only the visual reads as hourly.
     Also drop the side DUE column so the events column takes the full width. */
  @media (max-width: 767px) {
    .time-slot:not(.on-hour) { border-bottom-color: transparent; }
    .time-label:not(.on-hour) { visibility: hidden; }
    .timegrid, .timegrid-header { grid-template-columns: 56px 1fr !important; }
    .timegrid-due, .timegrid-due-label { display: none; }
    .time-label { font-size: 11px; padding: 0 6px; }
  }
  /* Week view = landscape-only on phone. The 7-day grid is unreadable in
     portrait; show a rotate prompt instead and hide the real grid. */
  .week-portrait-prompt { display: none; }
  @media (max-width: 767px) and (orientation: portrait) {
    .week-portrait-prompt { display: block; }
    .week-content { display: none; }
  }
  .timegrid-events {
    grid-column: 2;
    position: relative;
    /* Clip horizontally so an over-long bar/title can NEVER widen the page —
       a page wider than the screen makes fixed modals center off-screen and
       the whole layout shift. `clip` (not hidden) so vertical bleed used by the
       busy-badge (top:-22px) and the now-line (left:-4px) is preserved. */
    overflow-x: clip;
  }

  /* Now-line — horizontal indicator showing the current time on the
     calendar day-grid. Only rendered when viewing today (focus_day ==
     today). Pulses subtly so it's findable at a glance. JS in this
     template repositions it every minute so it stays accurate without
     a page refresh. */
  .now-line {
    position: absolute; left: -4px; right: 0; height: 0;
    border-top: 2px solid #ef4444;
    z-index: 12;  /* above .event-bar (z 1-10) so it's never hidden */
    pointer-events: none;
  }
  .now-line::before {
    content: ''; position: absolute; left: -8px; top: -6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
    animation: now-pulse 2.4s ease-in-out infinite;
  }
  @keyframes now-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.12); }
  }
  .now-line::after {
    content: attr(data-now-label); position: absolute;
    right: 0; top: -22px; font-size: 10px; font-weight: 700;
    color: #fff; background: #ef4444; padding: 2px 6px;
    border-radius: 4px; font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
  }
  .event-bar {
    position: absolute;
    border-radius: 3px;
    padding: 2px 6px 2px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* No generic inset spine — the left edge is now the inline FIRMNESS rail
       (events/to-dos) or a dashed domain hairline (blocks). See bar_paint(). */
    transition: outline 0.1s;
  }
  /* Three things live on the calendar, and you should be able to tell which is
     which at a glance — because the TYPE is the stakes:
       EVENT      = solid, harsh, framed   — specific & fleeting, real cost to miss
       TIME BLOCK = faint, translucent, dashed — a container for time/focus, moves freely
       TO-DO      = dotted                 — an action, in between
     (See the slotted-todo + weektg rules below for the other surfaces.) */
  .event-bar:not(.time-block) {
    border: 1.5px solid rgba(0,0,0,0.42);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16);   /* drop-shadow only; left edge = firmness rail */
  }
  .event-bar.time-block {
    border-style: dashed;
    border-width: 1px;   /* no thick left edge — a block has NO firmness spine */
    font-weight: 500;
    /* Clip the title to an ellipsis like a regular event (the capacity badge +
       slotted-todo stack are absolutely positioned INSIDE the bar, so they
       still show). Previously `overflow: visible` let a long block title paint
       past the bar and widen the whole page → off-center modals / layout shift. */
    overflow: hidden;
  }
  /* Presence / on-the-move (fb_c0c9291f): a span where the Principal is driving
     (phone only) or has NO electronics. A diagonal hatch over the bar's colour +
     an icon mark it WITHOUT faking an event. The hatch is a z-index:-1 ::before so
     it paints over the bar's own background but UNDER the title (which stays readable). */
  .event-bar.presence-transit::before,
  .event-bar.presence-offline::before,
  .weektg-ev.presence-transit::before,
  .weektg-ev.presence-offline::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
  }
  .event-bar.presence-transit::before,
  .weektg-ev.presence-transit::before {
    background-image: repeating-linear-gradient(45deg,
      rgba(180,83,9,0) 0 6px, rgba(180,83,9,0.28) 6px 12px);
  }
  .event-bar.presence-offline::before,
  .weektg-ev.presence-offline::before {
    background-image: repeating-linear-gradient(45deg,
      rgba(31,41,55,0) 0 5px, rgba(31,41,55,0.42) 5px 10px);
  }
  .event-bar.presence-offline,
  .weektg-ev.presence-offline { outline: 1.5px dashed rgba(31,41,55,0.7); outline-offset: -2px; }
  .event-bar .presence-icon,
  .weektg-ev .presence-icon { position: relative; z-index: 2; font-size: 10px; margin-right: 1px; }
  /* Month chips are too small for the hatch — a leading icon carries the state. */
  .month-bar .presence-icon { font-size: 9px; margin-right: 1px; }
  /* Presence picker in the event modal (custom classes — no Tailwind rebuild). */
  .presence-pick { display: flex; gap: 4px; }
  .presence-pick .pp-btn { flex: 1; font-size: 12px; padding: 6px 8px; min-height: 34px;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; cursor: pointer; }
  .presence-pick .pp-btn.pp-active { border-color: #b45309; background: #fffbeb; color: #92400e; font-weight: 600; }
  .event-bar.drag-over { outline: 2px solid #10b981; outline-offset: -1px; }
  .event-bar.dragging { opacity: 0.7; outline: 2px solid #10b981; outline-offset: -1px; z-index: 10; }
  /* Resize / move affordances (skip when .locked from GCal-inbound). */
  .event-bar:not(.locked) { cursor: move; }
  .event-bar.locked { cursor: pointer; }
  .event-bar:not(.locked) .resize-handle {
    position: absolute; left: 0; right: 0; height: 6px;
    cursor: ns-resize; background: transparent; z-index: 3;
  }
  .event-bar:not(.locked) .resize-handle.top { top: 0; }
  .event-bar:not(.locked) .resize-handle.bottom { bottom: 0; }
  .event-bar:not(.locked) .resize-handle:hover { background: rgba(16,185,129,0.35); }
  .event-bar.dragging .resize-handle { background: rgba(16,185,129,0.4); }
  .event-bar .capacity {
    position: absolute; bottom: 1px; right: 4px;
    font-size: 9px; opacity: 0.7; font-weight: 600;
    background: rgba(255,255,255,0.7); padding: 0 4px; border-radius: 2px;
  }
  /* Slotted todos — stack to fill the block (item 4) instead of overlapping
     by time offset. The stack sits below the block's title and scrolls if a
     block holds more to-dos than fit. */
  .slotted-stack {
    position: absolute; left: 2px; right: 2px; top: 17px; bottom: 2px;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* A time block carries no title line now, so its to-do stack fills from the top. */
  .event-bar.time-block .slotted-stack { top: 3px; }
  .slotted-todo {
    flex: none;
    background: rgba(255,255,255,0.88);
    border: 1px dotted rgba(0,0,0,0.5);   /* TO-DO = dotted (the type marker) */
    /* left edge = the inline FIRMNESS rail (set per-row from t.firmness_effective) */
    border-radius: 2px;
    padding: 1px 4px;
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .slotted-todo:hover { background: white; }
  .slotted-todo .x { float: right; opacity: 0; transition: opacity 0.1s; margin-left: 4px; font-weight: bold; }
  .slotted-todo:hover .x { opacity: 0.6; }
  /* Buffer band: the block's unfilled slack, shown as a labeled black spacer
     between slotted to-dos so they don't look pinned to the start (Principal
     2026-06-15). #000 with white text per his mock; slightly soft so it reads
     as breathing room, not another task. */
  .buffer-band {
    flex: none;
    background: #000; color: #fff; opacity: 0.62;
    font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
    border-radius: 2px; overflow: hidden;
  }
  /* can-run warning on a slotted to-do whose block can't supply what it needs (#645). */
  .canrun-warn { color: #d97706; font-size: 9px; margin-right: 1px; cursor: help; }
  /* Nudge dot (fb_de16e94d) — a date/time-bound reminder at its time, in the day-grid
     gutter. Tap → the popover below. Sits in the 72px time gutter, near the events edge. */
  .nudge-dot { position: absolute; left: 49px; width: 19px; height: 19px; margin-top: -9px;
    display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
    background: #fffbeb; border: 1px solid #f59e0b; border-radius: 999px; cursor: pointer; padding: 0; z-index: 7; }
  .nudge-dot:hover { background: #fef3c7; }
  /* Week view: the day columns have no time gutter, so the 🔔 sits at the column's
     right edge (smaller, above events) instead of the day view's left-gutter slot. */
  .weektg-col .nudge-dot { left: auto; right: 1px; width: 15px; height: 15px; margin-top: -7px;
    font-size: 9px; z-index: 8; }
  /* Month view: a 🔔·N marker top-right of a day cell that has reminders/Nudges. */
  .month-nudge { position: absolute; top: 2px; right: 3px; display: inline-flex; align-items: center;
    gap: 1px; font-size: 10px; line-height: 1; padding: 1px 3px; border-radius: 999px;
    background: #fffbeb; border: 1px solid #f59e0b; color: #92400e; text-decoration: none; z-index: 3; }
  .month-nudge .mn-ct { font-size: 9px; font-weight: 700; }
  .nudge-popover { position: fixed; z-index: 60; max-width: 240px; background: #fff; color: #111827;
    border: 1px solid #f59e0b; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 10px 12px; }
  .nudge-popover .np-time { font-size: 11px; font-weight: 700; color: #b45309; }
  .nudge-popover .np-text { font-size: 13px; margin: 4px 0 8px; }
  .nudge-popover button { font-size: 12px; border-radius: 6px; padding: 4px 10px; min-height: 32px; }
  .event-bar .letter {
    display: inline-block;
    min-width: 14px;
    text-align: center;
    font-weight: 800;
    font-size: 10px;
    padding: 0 3px;
    margin-right: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
  }

  /* Month grid */
  .month-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid #d1d5db;
    border-left: 1px solid #d1d5db;
  }
  .month-week {
    border-left: 1px solid #d1d5db;
    background: #d1d5db;
    column-gap: 0;
    row-gap: 0;
  }
  .month-week > .month-cell {
    /* Day cells live in the grid — no absolute positioning. */
  }
  .month-cell {
    position: relative;            /* anchor the absolute .month-nudge marker */
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    min-height: 110px;
    padding: 4px 6px;
    font-size: 11px;
    background: #fefdf8;
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .month-cell.drag-select { background: #ecfdf5; outline: 1px solid #10b981; outline-offset: -1px; }
  /* Multi-day overlay bar — rounded only on the actual start/end of the
     event, square on continuation edges that bleed into next/prev week. */
  .month-bar-multi {
    /* Lives in the .month-week grid; spans grid-column-start/end set inline.
       No position:absolute — browser handles span width via grid layout. */
    margin: 1px 2px;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.4;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 0;
    cursor: pointer;
    align-self: start;
    box-shadow: inset 2px 0 0 rgba(0,0,0,0.18);
  }
  .month-bar-multi.is-start { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
  .month-bar-multi.is-end   { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
  .month-bar-multi:hover { filter: brightness(1.05); }

  /* Mini-months for quarter + year views */
  .mini-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
  }
  .mini-month-grid-tight { gap: 0; }
  .mini-month-dow {
    background: #f3f4f6;
    text-align: center;
    font-size: 9px;
    color: #6b7280;
    padding: 2px 0;
    font-weight: 600;
  }
  .mini-month-cell {
    background: #fefdf8;
    color: #111827;
    text-decoration: none;
    min-height: 36px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 10px;
  }
  .mini-month-cell:hover { background: #ecfdf5; }
  .mini-month-cell.out-of-month { background: #f9fafb; color: #d1d5db; }
  .mini-month-cell.today { box-shadow: inset 0 0 0 2px #10b981; }
  .mini-month-cell-tight { min-height: 22px; padding: 1px; }
  .mini-day-num { font-size: 10px; line-height: 1; margin-bottom: 1px; }
  .mini-day-num-tight { font-size: 9px; }
  .mini-dots { display: flex; gap: 1px; flex-wrap: wrap; justify-content: center; }
  .mini-dot { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }
  .mini-dot-tight { width: 3px; height: 3px; }

  /* List view checkbox cells */
  .visibility-toggle { width: 14px; height: 14px; accent-color: #10b981; cursor: pointer; }
  .visibility-toggle:disabled { opacity: 0.5; cursor: wait; }

  /* "Add to" scope chips (create forms) */
  .qa-scope { font-size: 11px; padding: 3px 10px; border-radius: 9999px; border: 1px solid #cbd5e1;
              color: #64748b; background: transparent; cursor: pointer; line-height: 1.2; }
  .qa-scope.on { background: #10b981; border-color: #10b981; color: #06281d; font-weight: 600; }
  .qa-scope.locked { cursor: default; opacity: 0.85; }
  .qa-scope.disabled { opacity: 0.35; cursor: not-allowed; background: transparent; border-color: #cbd5e1; color: #94a3b8; font-weight: 400; }

  /* Mini-month spanning bar (used in quarter + year views to render
     multi-day events as small boxes that span the days they touch). */
  .mini-bar-multi {
    height: 4px;
    border-radius: 0;
    display: block;
    z-index: 2;
  }
  .mini-bar-multi.is-start { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
  .mini-bar-multi.is-end   { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
  .mini-month-week { background: #d1d5db; }
  .mini-month-week:not(:last-child) { border-bottom: 1px solid #d1d5db; }
  /* Overload — ≥5 events touching the day. Tinted red instead of cream so
     the eye finds dense days without needing to count dots. */
  .mini-month-cell.overload { background: #fee2e2; color: #7f1d1d; }
  .mini-month-cell.overload .mini-day-num { color: #991b1b; font-weight: 700; }
  .mini-month-cell.overload:hover { background: #fecaca; }
  .month-cell.out-of-month { background: #f9fafb; color: #d1d5db; }
  .month-cell.today { box-shadow: inset 0 0 0 2px #6b7280; }
  .month-dow {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: left;
    background: #f3f4f6;
    padding: 4px 6px;
    border-right: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
    font-weight: 600;
  }
  .month-day-num { font-size: 11px; color: #6b7280; font-weight: 600; }
  .month-bar {
    display: block;
    border-radius: 2px;
    padding: 1px 4px;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .month-bar .letter {
    display: inline-block;
    min-width: 10px;
    text-align: center;
    font-weight: 800;
    font-size: 9px;
    padding: 0 2px;
    margin-right: 3px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
  }

  /* Date header box (top-right of day view, mimics TUL date box) */
  .date-box {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    border: 1px solid #374151;
    padding: 4px;
    font-size: 11px;
  }
  .date-cell { border: 1px solid #d1d5db; padding: 4px 6px; min-width: 36px; text-align: center; font-weight: 600; color: #111827; }
  .date-cell-label { font-size: 9px; color: #6b7280; letter-spacing: 0.1em; text-transform: uppercase; }

  /* Todo checkbox row */
  .todo-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid #f1f5f9; transition: opacity 0.3s; }
  .todo-row.fading { opacity: 0; }
  .todo-row.filter-hidden { display: none; }
  .todo-color-bar {
    display: inline-block; flex-shrink: 0;
    width: 3px; min-height: 16px; align-self: stretch;
    border-radius: 1.5px;
  }
  .todo-filter-chip {
    padding: 1px 6px; border-radius: 3px;
    border: 1px solid #d1d5db; background: white; color: #374151;
    cursor: pointer; font-size: 10px;
    transition: filter 0.1s, transform 0.05s;
  }
  .todo-filter-chip.active { filter: brightness(1.05); box-shadow: 0 0 0 1px #047857; }
  .todo-filter-chip:hover { filter: brightness(1.1); }
  .todo-check {
    width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px;
    appearance: none; -webkit-appearance: none;
    border: 1px solid #9ca3af; border-radius: 2px; background: white;
    cursor: pointer; position: relative;
  }
  .todo-check:hover { border-color: #6b7280; }
  .todo-check:checked { background: #10b981; border-color: #10b981; }
  .todo-check:checked::after {
    content: "✓"; color: white; font-size: 11px; font-weight: bold;
    position: absolute; top: -3px; left: 1.5px; line-height: 14px;
  }
  .todo-check:disabled { cursor: wait; opacity: 0.6; }

  /* Drag-drop affordances */
  .todo-row[draggable="true"] { cursor: grab; }
  .todo-row.dragging { opacity: 0.4; }
  .priority-slot {
    border: 1px dashed transparent; border-radius: 4px;
    padding: 4px 6px; margin-left: -6px; margin-right: -6px;
    transition: background 0.1s, border-color 0.1s;
  }
  .priority-slot.drag-over { background: #ecfdf5; border-color: #10b981; }

  /* Drag-to-create on the time grid background.
     touch-action: pan-y means a thumb-drag down JUST scrolls the page
     by default — exactly what you want when you're skimming the
     calendar. Create mode is gated by a 350ms long-press (see JS):
     once armed, the class swaps to .dragging-create which switches
     touch-action to none so the drag stops scrolling and starts
     sizing the ghost block. This eliminates the accidental-event
     problem the Principal hit when scroll-presses kept materializing
     ghost rectangles in the middle of the screen. */
  .timegrid-events { cursor: crosshair; touch-action: pan-y; }
  .timegrid-events.dragging-create {
    cursor: ns-resize; user-select: none; touch-action: none;
  }
  .ghost-event.arming {
    animation: ghost-pulse 0.18s ease-out;
  }
  @keyframes ghost-pulse {
    0%   { transform: scale(0.94); opacity: 0.45; }
    100% { transform: scale(1.0);  opacity: 1.0; }
  }
  .ghost-event {
    position: absolute; left: 4px; right: 4px;
    background: rgba(16,185,129,0.15);
    border: 2px dashed #10b981;
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #047857; font-weight: 600;
  }

  /* "Busy level" bar coloring RETIRED (Principal 2026-06-13): the busy-2 red inset
     was reading as a hard red spine that competed with the firmness rail AND leaked
     onto time blocks, and the stripes/opacity fades muddied the new darker-solid
     fills. "Busy level" is being replaced by a proper 0–10 AVAILABILITY score
     (green→black), built once the availability_level field + scorer land. Until
     then the bar carries one clean language: domain fill + firmness spine; the
     numeric level still shows in .busy-badge. */
  .busy-badge {
    position: absolute; top: 2px; right: 2px;
    font-size: 9px; font-weight: 800;
    background: rgba(255,255,255,0.85); color: #111827;
    padding: 0 4px; border-radius: 2px;
    line-height: 1.4; min-width: 12px; text-align: center;
  }

  /* ── Landscape (phone) ────────────────────────────────────────────────────
     The Principal taps "⤢ Landscape" on the week view, which locks landscape +
     fullscreen. Goal: see as much of the week as possible. Shrink Witan to a
     corner circle, put the add buttons + view tabs on ONE line, and drop the
     title / descriptions / legends. Scoped to phone height so tablet/desktop
     (which have the room) are untouched. */
  @media (orientation: landscape) and (max-height: 600px) {
    main.mx-auto { padding-top: 6px; padding-bottom: 8px; }

    /* Toolbar → one line: buttons first, then all six view tabs. Left padding
       clears the floating Witan circle. */
    #cal-chrome { display: flex; flex-wrap: wrap; align-items: center;
                  gap: 8px 12px; margin-bottom: 8px; padding-left: 96px; }
    #cal-chrome > div { margin-bottom: 0 !important; }
    #cal-addbar { order: -1; }
    .cal-titleblock { display: none !important; }
    /* In landscape keep only the view tabs in the header-right; the Today /
       3-day-brief / GCal chips are desktop niceties that just eat the line. */
    #cal-headright > *:not(#cal-viewtabs) { display: none !important; }
    #cal-viewtabs a { min-height: 34px !important; padding: 4px 10px !important; }
    #cal-addbar button { padding: 6px 10px !important; min-height: 34px !important; }

    /* Drop descriptive text + legends to give the grid the room. */
    .cal-legend, .cal-landhide { display: none !important; }

    /* ── Witan card → a small circle, top-left. The strip becomes a thin,
       click-through overlay so the rest of the top row reaches the calendar. */
    #witanStripWrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
                      background: transparent !important; border: none !important;
                      backdrop-filter: none !important; pointer-events: none; }
    #witanStripWrap > div { max-width: none; margin: 0; padding: 3px 6px; }
    #witanTile { pointer-events: auto; box-shadow: none; align-self: flex-start; }

    /* idle + recording = a compact circle (avatar + name). Recording keeps the
       red .rec highlight from the shared card. */
    #witanTile[data-mode="idle"], #witanTile[data-mode="rec"] {
      width: auto; min-height: 0; padding: 4px 11px 4px 5px;
      border-radius: 999px; display: inline-flex; }
    #witanTile[data-mode="idle"] .witan-row,
    #witanTile[data-mode="rec"]  .witan-row { flex-direction: row; gap: 6px; }
    #witanTile[data-mode="idle"] .witan-av,
    #witanTile[data-mode="rec"]  .witan-av { flex-direction: row; gap: 6px; }
    #witanTile[data-mode="idle"] .witan-sprite,
    #witanTile[data-mode="rec"]  .witan-sprite { width: 30px !important; height: 30px !important; }
    #witanTile[data-mode="idle"] .witan-logo,
    #witanTile[data-mode="rec"]  .witan-logo { font-size: 13px; }
    #witanTile[data-mode="idle"] .witan-panel,
    #witanTile[data-mode="rec"]  .witan-panel { display: none; }

    /* text + review = a SHORT box across the screen (not the tall portrait card). */
    #witanTile[data-mode="text"], #witanTile[data-mode="review"] {
      width: 100%; padding: 6px 10px; min-height: 0; }
    #witanTile[data-mode="text"] .witan-row,
    #witanTile[data-mode="review"] .witan-row { flex-direction: row; gap: 8px; align-items: flex-start; }
    #witanTile[data-mode="text"] .witan-av,
    #witanTile[data-mode="review"] .witan-av { flex-direction: row; gap: 6px; }
    #witanTile[data-mode="text"] .witan-sprite,
    #witanTile[data-mode="review"] .witan-sprite { width: 26px !important; height: 26px !important; }
    #witanTile[data-mode="text"] .witan-logo,
    #witanTile[data-mode="review"] .witan-logo { display: none; }
    #witanTile .witan-text { min-height: 34px; padding: 6px 8px; }
    #witanTile .witan-reply { max-height: 56px; }
    #witanTile .witan-pills { padding: 3px 0; }
  }

  /* Quarter + Year are desktop / print only. Hide them on touch devices (the
     Pixel + any phone/tablet) in BOTH orientations — Day/Week/Month/List are
     all the Principal wants on the go. Pointer:fine (mouse) desktop keeps them. */
  @media (pointer: coarse) {
    /* Quarter/Year tabs + the 3-day-brief link are desktop/print only. */
    .cal-deskonly { display: none !important; }
  }