/* ============================================
   COMPACT CARD LAYOUT - NEW DESIGN
   ============================================
   Compact cards matching the FairlyRemote original design:
   - Info header row with city, time, status inline
   - Horizontal 24h timeline with traffic light coloring
   - Consistent time alignment across stacked cards
   ============================================ */

/* ---- Hide new compact-card by default (only shown in compact mode) ---- */
.compact-card {
    display: none;
}

/* ---- Show compact-card only in compact layout ---- */
body[data-layout="compact"] .compact-card {
    display: flex !important;
    flex-direction: column;
    width: 100%;
}

/* ---- Override: hide old compact display ---- */
body[data-layout="compact"] .compact-time-display {
    display: none !important;
}

/* ---- Override: each section becomes a rounded card ---- */
body[data-layout="compact"] .timezone-section {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 8px 6px;
    background: var(--surface-primary, var(--bg-primary));
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    /* overflow:VISIBLE (was hidden) so the live now-time badge can overhang
       UPWARD out of the timeline row without being clipped — the badge sits
       above the current cell (translateY(-100%)) and a wider "14:42" string
       centred on a ~13px cell used to get its leading HOURS digits sheared off
       by the card's hidden overflow, leaving only ":42" (user 2026-06-26: "now
       time only shows the minutes not the hours"). The 12px corner-clip that
       overflow:hidden used to provide for the full-bleed coloured cell fills is
       now done locally on .compact-timeline-row (see below), which is the only
       element whose square corners would otherwise poke past the card radius. */
    overflow: visible;
    position: relative;
    min-height: auto;
}

body[data-layout="compact"] .timezone-section:first-child {
    margin-top: 8px;
}

/* ---- Override: container ---- */
body[data-layout="compact"] #timezone-list {
    padding: 0;
}

/* ======== COMPACT CARD HEADER ======== */
body[data-layout="compact"] .compact-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
    min-height: 0;
}

/* -- Left side: icon + city info -- */
body[data-layout="compact"] .compact-card-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Home icon */
body[data-layout="compact"] .compact-home-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #14b8a6);
    border-radius: 8px;
    color: white;
    font-size: 11px;
    flex-shrink: 0;
}

/* Reorder padlock in compact mode (2026-07-06, user: "put the padlock back to
   its original location"). padlock.js injects .home-lock-box right after the
   .compact-home-icon so the lock sits beside the home icon in the header — the
   same relationship it has in the detailed card. .compact-card-left is
   overflow:hidden to truncate the city text, so pin the lock box (flex-shrink:0)
   or it would be the thing that gets clipped instead of the text. */
body[data-layout="compact"] .compact-card-left .home-lock-box {
    flex-shrink: 0;
    overflow: visible;
    display: inline-flex;
    align-items: center;
}

/* Offset pill */
body[data-layout="compact"] .compact-offset-pill {
    padding: 2px 6px;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.4;
    margin-left: 4px;
}
body[data-layout="compact"] .compact-offset-pill.offset-same { background: rgba(34,197,94,0.15); color: #16a34a; }
body[data-layout="compact"] .compact-offset-pill.offset-close { background: rgba(59,130,246,0.15); color: #2563eb; }
body[data-layout="compact"] .compact-offset-pill.offset-far { background: rgba(239,68,68,0.15); color: #dc2626; }
body[data-layout="compact"] .compact-offset-pill.offset-medium { background: rgba(251,191,36,0.15); color: #d97706; }

/* City info (name + region) */
body[data-layout="compact"] .compact-city-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

body[data-layout="compact"] .compact-city-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-layout="compact"] .compact-city-name .fa-pencil {
    font-size: 9px;
    opacity: 0;
    transition: opacity 0.15s;
}

body[data-layout="compact"] .compact-city-name:hover .fa-pencil {
    opacity: 0.5;
}

body[data-layout="compact"] .compact-region-date {
    font-size: 10.5px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.tz-demo-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    /* Never let the flex city-name-row collapse the SAMPLE chip when the city
       name is long on a narrow phone — it sits in a flex row and would otherwise
       shrink/clip. The chip is tiny; keep it intact. */
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    /* SOLID amber chip (2026-07-02, user: "sample pill has bad visibility").
       The old 15%-opacity amber wash with amber-brown text vanished into the
       tinted member-row cards (green/pink) — near-transparent fill + low-
       contrast amber-on-tint. A solid amber fill with white text reads clearly
       on ANY card background and can't be mistaken for the row's own shading.
       White-on-#b45309 ≈ 4.9:1 (passes WCAG AA for this size). */
    color: #ffffff;
    background: #b45309;
    border: 1px solid #92400e;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.2;
}

body.dark-mode .tz-demo-badge {
    /* On dark cards keep white text but lift the fill to a brighter amber so
       the chip still pops off the slate row. */
    color: #1f2937;
    background: #fbbf24;
    border-color: #f59e0b;
}

/* -- Right side: large time + status/hours stacked -- */
body[data-layout="compact"] .compact-card-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Large current time */
body[data-layout="compact"] .compact-big-time {
    font-size: 28px;
    font-weight: 300;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    line-height: 1;
}

/* Small column: status badge + working hours stacked */
body[data-layout="compact"] .compact-right-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* Status badge - reuse existing .availability-status but make compact */
body[data-layout="compact"] .compact-right-meta .availability-status {
    font-size: 9px;
    padding: 1px 7px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Working hours tiny inline */
body[data-layout="compact"] .compact-wh {
    font-size: 9.5px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.2;
}
body[data-layout="compact"] .compact-wh i {
    font-size: 8px;
}

/* Compact header clock — 24hr ONLY (user 2026-07-06). The compact card's live
   clock renders through .timezone-right > .timezone-time-info >
   .current-time-large (stacked-timezone-card.js). In compact layout the JS now
   forces 24h and omits the .current-time-ampm span, so the meridiem no longer
   squeezes the digits. Give the bare "HH:MM" a clear, tabular size now that it
   owns the full width — the old 18px was set to leave room for the AM/PM chip
   that no longer exists, so the digits read cramped. Belt-and-suspenders: hide
   any stray meridiem span so a cached 12h render can't reintroduce it here. */
body[data-layout="compact"] .timezone-time-info .current-time-large {
    font-size: 21px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    flex-shrink: 0;
    line-height: 1;
}
body[data-layout="compact"] .timezone-time-info .current-time-large .current-time-ampm {
    display: none;
}
body[data-layout="compact"] .timezone-time-info .current-time-digits {
    min-width: 0;
}

/* ======== COMPACT TIMELINE ROW ======== */
body[data-layout="compact"] .compact-timeline-row {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 36px;
    border-top: 1px solid rgba(0,0,0,0.05);
    /* This row is the LAST child of the card and holds the full-bleed coloured
       hour-cell fills (data-traffic). The card itself is now overflow:visible
       (so the now-time badge can escape upward), so the bottom-corner radius
       clip that used to live on .timezone-section moves HERE — the only place
       a square cell corner could poke past the rounded card. The badge lives
       ABOVE this row, so clipping here does not re-clip it.
       2026-07-06 (user: "the compact shading has a gap on the left and right
       edges that shows white"): the row was inset inside the card's 1px border,
       so the card's white background + rounded corners peeked past the coloured
       cells at the horizontal edges. Bleed the row out by 1px on each side (and
       the bottom) so the coloured fill reaches the card's OUTER edge, and round
       the bottom corners to the card's full 13px (12px card radius + the 1px it
       now overhangs) so the fill meets the rounded outline with no white sliver. */
    overflow: hidden;
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: -1px;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}

body[data-layout="compact"] .compact-timeline-row .compact-hours-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    /* Pin the row to the full timeline width. The base
       `body[data-layout="compact"] .compact-hours-row` rule (style.css) sets
       overflow-x:auto for the OLD scrollable compact-time-display grid; if that
       ever wins here the row would size to its scroll content and the cells —
       which only fill via flex-grow — could pack to the left leaving a gap on
       the right (user 2026-06-26: "cards … become left aligned"). width:100% +
       overflow:visible keep this card grid full-width and non-scrolling so the
       cells always stretch edge-to-edge. */
    width: 100%;
    overflow: visible;
    gap: 0;
    align-items: stretch;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    position: relative;
    scrollbar-width: none;
    align-self: auto;
}

/* Override old compact-hours-row defaults for the new timeline.
   flex:1 1 0 + min-width:0 is !important so the base scrollable-grid rule
   (style.css `.compact-hour-cell{min-width:32px;flex-shrink:0}`, and the
   responsive.css coarse-pointer touch-floor) can never win and let the 24 cells
   fall back to content width — that's what made them bunch left with a gap on
   the right after load. Equal flex-grow guarantees they always fill the card. */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none;
    width: calc(100% / 24);
    padding: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    position: relative;
    border-right: 1px solid rgba(0,0,0,0.04);
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    grid-row: unset !important;
    grid-column: unset !important;
    border-top: none !important;
    transition: none;
}

body[data-layout="compact"] .compact-timeline-row .compact-hour-cell:last-child {
    border-right: none;
}

/* ---- Traffic light coloring (canonical: data-traffic attribute from ColorScheme) ----
   Gated to NOT paint in daynight (Local Time) mode — that mode shows the pure
   day-cycle gradient with no event-driven cell shading. Mirrors the guard the
   non-compact .timeline-cell[data-traffic] rules already carry in style.css
   (commit 0cb2710); the compact layout's equivalents were missed there, so a
   user on compact + Local Time could still see reach colours leak onto cells
   from a stale data-traffic attr. */
body:not([data-color-mode="daynight"])[data-layout="compact"] .compact-timeline-row .compact-hour-cell[data-traffic="green"] {
    background: var(--reach-working) !important;
}
body:not([data-color-mode="daynight"])[data-layout="compact"] .compact-timeline-row .compact-hour-cell[data-traffic="amber"] {
    background: var(--reach-transition) !important;
}
body:not([data-color-mode="daynight"])[data-layout="compact"] .compact-timeline-row .compact-hour-cell[data-traffic="sleep"] {
    background: var(--reach-sleep) !important;
}
body:not([data-color-mode="daynight"])[data-layout="compact"] .compact-timeline-row .compact-hour-cell[data-traffic="red"] {
    background: var(--reach-off) !important;
}

/* Current hour - blue border indicator (matching regular timeline) */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell {
    position: relative;
    z-index: 10;
    /* 2026-08-13 (user: "compact mode half missing time now label, ie :07
       instead of 11:07"). REGRESSION of the 2026-06-26 badge fix, by a new
       mechanism — the CSS below (left:50%, overflow:visible ancestors) was all
       still intact, so nothing looked wrong in this file.
       style.css `body[data-layout="compact"] .compact-hour-cell` gained
       `container-type: inline-size` on 2026-07-08 (commit 569031d7) so the
       overlap-mode labels could shrink against the cell width. But
       container-type implies `contain: layout style inline-size`, and LAYOUT
       CONTAINMENT makes the element a containing block for absolutely
       positioned descendants. The badge is position:absolute, so its left:50%
       and translateX(-50%) stopped resolving against the card and started
       resolving against this ~13px cell — shearing the leading hours off again
       and leaving ":07". It also silently broke the JS edge-clamp, which
       measures getBoundingClientRect against the CARD.
       Fix: turn containment off for the ONE cell that hosts the overhanging
       badge. Every other cell keeps container-type, so the overlap-mode
       container queries (css/overlap-mode.css) are unaffected — the current
       cell shows the now-badge, not an overlap label. */
    container-type: normal;
}

body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 1px;
    border: 2px solid #ec4899;
    border-radius: 4px;
    pointer-events: none;
    z-index: 25;
}

/* Live now-time badge on the compact current cell. The base .now-time-badge
   rule (style.css) sets position:absolute + translate(-50%,-100%) but NO left,
   so in compact mode it anchored to the cell's LEFT edge and the -50% pull
   sheared the leading hours off the card edge → ":42" only. We give it an
   explicit left:50% so it centres on the blue current-cell needle (the
   reference, per user: "the needle is the reference, we don't need to cut off
   the label text to fit cells"), a solid pill background so the full HH:MM is
   legible where it overhangs into the header, and white-space:nowrap so it is
   never wrapped to fit the ~13px cell. JS clamps `left` near the card edges so
   the pill never spills past the rounded card (see updateComparisonBars). */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell .now-time-badge {
    position: absolute;
    left: 50%;
    top: -2px;
    transform: translate(-50%, -100%);
    font-size: 10px;
    font-weight: 700;
    color: #db2777;
    background: var(--surface-primary, #fff);
    padding: 1px 4px;
    border-radius: 5px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell .now-time-badge {
    color: #fbcfe8;
    background: var(--bg-secondary, #1e293b);
}

/* Vertical NOW-LINE inside the compact current cell (2026-07-20, user: "Mobile
   mode lacks the pink time now line"). The desktop/wide timeline draws a full-
   height 1.5px pink needle (.timeline-comparison-bar, style.css #ec4899); the
   compact rows previously drew ONLY the cell border + the badge, so there
   was no needle marking the exact sub-hour "now" position the user scans against.
   This ::after is that needle: a 2px pink bar positioned at --elapsed-percent
   (the same sub-hour fraction updateComparisonBars writes for the badge/desktop
   needle), spanning the cell's full height, centred on its x via translateX(-50%).
   Matches the wide needle's #ec4899 so the two layouts read identically. Sits
   under the badge (z 26) but over the fill; the pink border ::before stays. */
/* NEEDLE OUTRANKS THE WINDOW-END DIAMOND (2026-08-17, owner: "time needle now
   no longer showing on scan").

   `◆` is `.golden-hour-end::after` in best-time-indicator.css, and it declares
   its whole geometry with !important to survive the availability/fairness
   ::after rules. That beats this block on cascade order regardless of
   specificity, so when the team window happened to END on the current hour the
   needle was not merely recoloured - its position, size and content were all
   replaced by a glyph parked above the cell.

   Both cannot share one ::after. The needle wins because it reports a fact the
   user cannot infer (where "now" falls inside this hour), whereas the window
   end is already carried by the ★ start marker, the tint across the run, and
   the tooltip. Marked !important only on the properties the diamond overrides -
   enough to hold the slot, not a blanket escalation. */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--elapsed-percent, 50%) !important;
    right: auto !important;
    width: 2px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    background: #ec4899 !important;
    border: none !important;
    /* White ring so the pink needle detaches from the coloured cell it crosses
       and never reads as red (2026-07-23) — matches the wide needle + scanner. */
    box-shadow: 0 0 0 0.75px rgba(255, 255, 255, 0.9) !important;
    border-radius: 1px;
    pointer-events: none;
    z-index: 26;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell::after {
    background: #f472b6;
}

/* Current hour text styling */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-hour {
    font-weight: 700;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Date transition */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.date-transition {
    border-left: 2px solid rgba(59, 130, 246, 0.5);
}

/* Day-change marker — stacked weekday + date number anchored at the cell top,
   matching the blue marker every other layout uses (was a black pill that
   overlapped the hour label). On a date-transition cell the hour label drops to
   the bottom so the two never collide in the ~36px cell. */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell .date-marker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: #2563eb;
    pointer-events: none;
    z-index: 20;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell .date-marker .day-abbr {
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell .date-marker .day-num {
    font-size: 8px;
    font-weight: 800;
}

body[data-layout="compact"] .compact-timeline-row .compact-hour-cell .time-label {
    font-size: 9px;
}

/* When a day-change marker is present, sink the hour label to the bottom of the
   cell so the marker has the top.
   Kept LEFT-aligned (2026-08-04) to match the boundary-anchored label everywhere
   else — this rule is absolutely positioned, so without the explicit left align
   it would re-centre the one label sitting on the day seam, which is precisely
   the cell where "what point does the hour change" matters most. */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.date-transition .time-label {
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    text-align: left;
    padding-left: 1px;
}

body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell .date-marker {
    color: #93c5fd;
}

/* NOTE: the compact now-time badge is styled once, above (the block anchored to
   left:50% with the overhang comment). An earlier second copy of this selector
   lived here and silently overrode that block (identical specificity, later in
   source) — it forced the badge to 9px and reset its colour. Removed so the
   documented block is the single source of truth: the badge now shows a forced
   24h "HH:MM" (JS strips the 12h AM/PM suffix that was overflowing the ~13px
   cell), so its 10px size fits comfortably and reads cleanly at every phone
   width. Keep only one definition here. */

/* Faded prev/next day — EXCEPT in Local times (daynight) mode. Fading the
   whole cell with opacity lets the card's warm ambient composite through the
   day/night gradient, so a midnight-navy cell reads as MUDDY TAN on a card
   whose ambient is peach/orange — and each row fades different columns over a
   different ambient, so the same vertical time line showed vivid navy in one
   row and washed-out brown in the next (user 2026-08-05: "cell colours on
   mobile sometimes appearing at different qualities on the same time line").
   Desktop never dims other-day cells in daynight (the [data-hour] gradient
   wins there), so compact matching it also closes a renderer divergence; the
   day boundary stays conveyed by the .date-transition seam + date marker. */
body:not([data-color-mode="daynight"])[data-layout="compact"] .compact-timeline-row .compact-hour-cell.prev-day,
body:not([data-color-mode="daynight"])[data-layout="compact"] .compact-timeline-row .compact-hour-cell.next-day {
    opacity: 0.45;
}

/* ======== DARK MODE ======== */
body.dark-mode[data-layout="compact"] .timezone-section {
    background: var(--bg-secondary);
    border-color: rgba(255,255,255,0.06);
}

body.dark-mode[data-layout="compact"] .compact-timeline-row {
    border-top-color: rgba(255,255,255,0.06);
}

body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell {
    border-right-color: rgba(255,255,255,0.04);
    color: var(--text-tertiary);
}

/* Dark mode traffic-light colors handled by --reach-* CSS variable redefinition in style.css */
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-hour {
    font-weight: 700;
}

/* Dark mode current time cell pink border */
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.current-time-cell::before {
    border-color: #f472b6;
}

body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell .date-marker {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
}

body.dark-mode[data-layout="compact"] .compact-offset-pill.offset-same { background: rgba(34,197,94,0.2); color: #4ade80; }
body.dark-mode[data-layout="compact"] .compact-offset-pill.offset-close { background: rgba(59,130,246,0.2); color: #60a5fa; }
body.dark-mode[data-layout="compact"] .compact-offset-pill.offset-far { background: rgba(239,68,68,0.2); color: #f87171; }
body.dark-mode[data-layout="compact"] .compact-offset-pill.offset-medium { background: rgba(251,191,36,0.2); color: #fbbf24; }

/* ============================================
   WORKING/SLEEPING HOURS - BRACKET BORDER ONLY
   ============================================ */
/* 2026-06-26 (user: "all modes have unwanted green cell borders, I liked the
   previous minimal version"): these rules painted a loud 0.85-alpha green (and
   red) top+bottom RAIL on EVERY working/sleeping cell — and because they're more
   specific (extra .compact-timeline-row ancestor + !important) they won over the
   bracket-only base rule, so the card-stack board still read as a solid green box.
   Now bracket-only to match every other layout: interior cells bare, coloured
   arms on the .work-start / .work-end (and .sleep-start / .sleep-end) boundary
   cells ONLY. Alpha eased 0.85 → 0.45 (0.9 → 0.55 dark) to sit with the other
   layouts' brackets. */
/* Working hours - interior cells bare */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour {
    box-shadow: none !important;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour.work-start {
    box-shadow:
        inset 1.5px 0 0 0 var(--cell-bracket),
        inset 0 1.5px 0 0 var(--cell-bracket),
        inset 0 -1.5px 0 0 var(--cell-bracket) !important;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour.work-end {
    box-shadow:
        inset -1.5px 0 0 0 var(--cell-bracket),
        inset 0 1.5px 0 0 var(--cell-bracket),
        inset 0 -1.5px 0 0 var(--cell-bracket) !important;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour.work-start.work-end {
    box-shadow: inset 0 0 0 1.5px var(--cell-bracket) !important;
}

/* Sleeping hours - interior cells bare */
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour {
    box-shadow: none !important;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour.sleep-start {
    box-shadow:
        inset 1.5px 0 0 0 var(--sleep-bracket),
        inset 0 1.5px 0 0 var(--sleep-bracket),
        inset 0 -1.5px 0 0 var(--sleep-bracket) !important;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour.sleep-end {
    box-shadow:
        inset -1.5px 0 0 0 var(--sleep-bracket),
        inset 0 1.5px 0 0 var(--sleep-bracket),
        inset 0 -1.5px 0 0 var(--sleep-bracket) !important;
}
body[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour.sleep-start.sleep-end {
    box-shadow: inset 0 0 0 1.5px var(--sleep-bracket) !important;
}

/* Dark mode - brighter bracket arms, interior still bare */
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour {
    box-shadow: none !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour.work-start {
    box-shadow:
        inset 1.5px 0 0 0 var(--cell-bracket),
        inset 0 1.5px 0 0 var(--cell-bracket),
        inset 0 -1.5px 0 0 var(--cell-bracket) !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour.work-end {
    box-shadow:
        inset -1.5px 0 0 0 var(--cell-bracket),
        inset 0 1.5px 0 0 var(--cell-bracket),
        inset 0 -1.5px 0 0 var(--cell-bracket) !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.working-hour.work-start.work-end {
    box-shadow: inset 0 0 0 1.5px var(--cell-bracket) !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour {
    box-shadow: none !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour.sleep-start {
    box-shadow:
        inset 1.5px 0 0 0 var(--sleep-bracket),
        inset 0 1.5px 0 0 var(--sleep-bracket),
        inset 0 -1.5px 0 0 var(--sleep-bracket) !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour.sleep-end {
    box-shadow:
        inset -1.5px 0 0 0 var(--sleep-bracket),
        inset 0 1.5px 0 0 var(--sleep-bracket),
        inset 0 -1.5px 0 0 var(--sleep-bracket) !important;
}
body.dark-mode[data-layout="compact"] .compact-timeline-row .compact-hour-cell.sleeping-hour.sleep-start.sleep-end {
    box-shadow: inset 0 0 0 1.5px var(--sleep-bracket) !important;
}