/* ============================================================
   Worker Desktop Desk — EPW-PRO-155
   Foreshortened Van Gogh / Roblox-style desk scene
   ============================================================ */

/* ---- View Container ---- */
#worker-office-view {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #e8e0d4;
  color: #334155;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

body.worker-office-active #expanded-title,
body.worker-office-active #bg-layer,
body.worker-office-active #c4-link { display: none !important; }
body.worker-office-active #detail-panel { z-index: 200; }

/* ---- Worker Selector Bar ---- */
.wod-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff4e6;
  border-bottom: 1px solid #fde0b6;
  flex-shrink: 0;
  overflow-x: auto;
}

.wod-worker-pill {
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
  text-transform: capitalize;
}
.wod-worker-pill:hover { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.wod-worker-pill.active {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
/* EPW-PRO-260 adaptive sizing — Worker Desktop pills shrink with exponential decay distance.
   Size is assigned by sizeClass() in buildWorkerPills() based on /api/clicks/top scores. */
.wod-worker-pill--xl { padding: 7px 20px; font-size: 0.85rem; font-weight: 700; }
.wod-worker-pill--lg { padding: 6px 17px; font-size: 0.78rem; }
.wod-worker-pill--md { padding: 5px 14px; font-size: 0.72rem; }
.wod-worker-pill--sm { padding: 4px 11px; font-size: 0.66rem; opacity: 0.82; }
.wod-worker-pill--xs { padding: 3px 9px;  font-size: 0.6rem;  opacity: 0.65; }
.wod-worker-pill .wod-pill-count {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.6rem;
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 8px;
}

/* ============================================================
   3D DESK SCENE
   ============================================================ */

.wod-desk-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #e8e0d4;
}

.wod-scene {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}

/* ---- Wall ---- */
.wod-wall {
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 28px,
      rgba(0,0,0,0.025) 28px, rgba(0,0,0,0.025) 30px
    ),
    linear-gradient(180deg, #f5f0e8 0%, #ede5d8 100%);
  padding: 28px 32px 50px;
  flex-shrink: 0;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: visible;
}

/* ---- Office Window ---- */
.wod-window {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 60%;
}
.wod-window-frame {
  display: flex;
  gap: 4px;
  background: #5D4037;
  padding: 6px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  border: 2px solid #4E342E;
}
.wod-window-pane {
  flex: 1;
  height: 80px;
  background: linear-gradient(180deg, #87ceeb 0%, #a8d8ea 30%, #c8e6f0 60%, #d4eaf5 100%);
  border: 2px solid #4E342E;
}
.wod-window-sill {
  width: calc(100% + 24px);
  height: 80px;
  background: linear-gradient(180deg, #8D6E63 0%, #7D5E53 20%, #6D4C41 50%, #5D4037 100%);
  margin: 0 -12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-bottom: 3px solid #4E342E;
  border-top: 2px solid #9E8070;
}

.wod-wall-items {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  justify-content: center;
  position: relative;
  z-index: 10;
  /* Items straddle the wall/desk boundary — push well onto desk surface */
  transform: translateY(90%);
}

/* Photo frame on wall — larger, straddles wall/desk boundary */
.wod-wall-photo-frame {
  width: 100px;
  height: 120px;
  border: 7px solid #8D6E63;
  background: #334155;
  image-rendering: pixelated;
  box-shadow: 3px 4px 0 rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.wod-wall-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Award certificate on right wall */
.wod-wall-award {
  position: absolute;
  left: 8%;
  top: 16px;
  z-index: 2;
  transform: rotate(-1deg);
}
.wod-award-string {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
}
.wod-award-frame {
  background: #FFFEF5;
  border: 4px solid #B8860B;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.2), inset 0 0 0 1.5px #DAA520;
  padding: 4px;
  width: 165px;
}
.wod-award-inner {
  border: 1.5px solid #DAA520;
  padding: 12px 10px;
  text-align: center;
}
.wod-award-crest { margin-bottom: 5px; }
.wod-award-title {
  font-size: 0.6rem;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.wod-award-text {
  font-size: 0.5rem;
  color: #1a1a1a;
  line-height: 1.4;
  font-style: normal;
  margin-bottom: 6px;
}
.wod-award-line {
  width: 50%;
  height: 1px;
  background: #DAA520;
  margin: 4px auto;
}
.wod-award-footer {
  font-size: 0.42rem;
  color: #1a1a1a;
  letter-spacing: 0.05em;
}

/* Digital Wall Clock */
.wod-digital-clock {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 4px solid #2a2a3e;
  padding: 8px 18px;
  text-align: center;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  box-shadow: 3px 4px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  flex-shrink: 0;
  min-width: 150px;
}
.wod-clock-day {
  font-size: 0.81rem;
  color: #38bdf8;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.wod-clock-time {
  font-size: 1.875rem;
  color: #22d3ee;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.wod-clock-colon { animation: wod-blink 1s step-end infinite; }
@keyframes wod-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.wod-clock-ampm {
  font-size: 0.75rem;
  color: #38bdf8;
  vertical-align: super;
}
.wod-clock-date {
  font-size: 0.69rem;
  color: #38bdf8;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ---- Desk Back Edge ---- */
.wod-desk-edge-back {
  height: 6px;
  background: #4E342E;
  margin: 0 14%;
  flex-shrink: 0;
}

/* ============================================================
   TRAPEZOID DESK SURFACE
   The desk is a trapezoid: narrow at back, wide at front.
   Created with clip-path on the wrapper.
   Content sits inside with padding to stay within the shape.
   ============================================================ */

.wod-desk-trapezoid {
  clip-path: polygon(14% 0%, 86% 0%, 100% 100%, 0% 100%);
  flex: 1;
  min-height: 300px;
  position: relative;
  /* Dark edge — surface has an inset clip-path so this peeks through as a uniform border */
  background: #4E342E;
}

.wod-desk-surface {
  width: 100%;
  height: 100%;
  padding: 4px 14% 12px;
  /* Inset clip-path creates uniform border from trapezoid background on all edges */
  clip-path: polygon(14.8% 1.8%, 85.2% 1.8%, 99.3% 98.2%, 0.7% 98.2%);
  /* Wood grain texture — horizontal lines, Van Gogh warmth */
  background:
    repeating-linear-gradient(
      90deg,
      #D7A86E 0px, #D2A068 2px,
      #C4935C 2px, #C99862 6px,
      #D4A56A 6px, #CEAB74 10px,
      #BF8E55 10px, #C7965E 12px
    );
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Wood knots */
.wod-desk-surface::before {
  content: '';
  position: absolute;
  top: 35%; left: 20%;
  width: 30px; height: 14px;
  border: 2px solid rgba(139,90,43,0.2);
  border-radius: 50%;
  pointer-events: none;
}
.wod-desk-surface::after {
  content: '';
  position: absolute;
  top: 60%; right: 25%;
  width: 24px; height: 10px;
  border: 2px solid rgba(139,90,43,0.15);
  border-radius: 50%;
  pointer-events: none;
}

/* Classic office desk nameplate — black gloss base + brushed gold plate */
/* Nameplate row */
.wod-nameplate-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}
.wod-desk-nameplate {
  align-self: flex-end;
  position: relative;
}

/* ---- Dewey badges on desk items (23.03.*) ---- */
.wod-desk-dewey {
  position: absolute;
  top: -6px;
  left: -4px;
  z-index: 20;
  opacity: 0.85;
  pointer-events: auto;
  font-size: 0.52rem !important;
  padding: 1px 4px !important;
}
.wod-standing-item { position: relative; }
.wod-wall-photo-frame { position: relative; }
.wod-desk-accessories-row { position: relative; }

/* ---- Top row: Nameplate (left) | Accessories (center) | CV (right) ---- */
.wod-desk-top-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 8px;
}
.wod-desk-top-row .wod-desk-nameplate {
  flex-shrink: 0;
}
.wod-desk-top-row .wod-desk-accessories-row {
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 8% 0 auto;
}
.wod-desk-top-row .wod-cv-card {
  margin: 0;
  align-self: flex-start;
  flex-shrink: 0;
}

/* ---- Standing Desk Items (straddle wall/desk boundary) ---- */
.wod-standing-items {
  position: absolute;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  left: 8%;
  right: 25%;
  bottom: 0;
  pointer-events: none;
}
.wod-standing-item { pointer-events: auto; }

/* Eoin desk: photo + mug positioned on wall, overlapping onto desk */
.wod-wall-eoin-items {
  position: absolute;
  bottom: -40px;
  left: 35%;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  z-index: 12;
}
.wod-eoin-family {
  transform: rotate(-2deg) !important;
}
.wod-eoin-mug {
  transform: translateY(20px) rotate(2deg) !important;
}

/* Standing items moved onto desk surface (between nameplate and CV) */
.wod-standing-on-desk {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  justify-content: center;
  gap: 20px;
  margin: -10px 0 0;
  pointer-events: auto;
  z-index: 2;
}
.wod-standing-on-desk .wod-standing-family {
  transform: rotate(-2deg);
}
.wod-standing-on-desk .wod-standing-mug {
  transform: rotate(2deg);
}

/* Family photo — standing desk frame, 50% above desk edge, 50% below */
.wod-standing-family {
  transform: translateY(50%) rotate(-2deg);
}
.wod-standing-frame {
  background: linear-gradient(180deg, #c9a84c 0%, #a08040 50%, #8a6e30 100%);
  padding: 6px;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
.wod-standing-frame img {
  display: block;
  width: 110px;
  height: 140px;
  object-fit: cover;
  object-position: center 15%;
}
.wod-standing-base {
  width: 54px;
  height: 7px;
  margin: 0 auto;
  background: linear-gradient(180deg, #a08040, #8a6e30);
  border-radius: 0 0 2px 2px;
}

/* Daddy mug — standing on desk, 50% above desk edge, 50% below */
.wod-standing-mug {
  transform: translateY(50%) rotate(2deg);
}
.wod-standing-mug img {
  display: block;
  width: 90px;
  height: 110px;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.wod-nameplate-base {
  /* Black glossy acrylic base */
  background: linear-gradient(180deg, #2a2a2a 0%, #111 40%, #000 100%);
  padding: 5px 6px 7px;
  box-shadow:
    0 3px 0 #000,
    0 5px 4px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
  min-width: 220px;
}
.wod-nameplate-plate {
  /* Brushed gold/brass plate */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.06) 0px, transparent 1px, transparent 2px
    ),
    linear-gradient(180deg, #DCBA54 0%, #C9A83C 20%, #BFA035 50%, #C9A83C 80%, #DCBA54 100%);
  padding: 8px 28px 7px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.wod-nameplate-name {
  font-size: 1rem;
  font-weight: 600;
  color: #3a3520;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.2;
}
.wod-nameplate-role {
  font-size: 0.65rem;
  color: #5a5030;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: 'Georgia', 'Times New Roman', serif;
  margin-top: 2px;
}

/* ---- Worker CV Card on desk ---- */
.wod-cv-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid #1e293b;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 280px;
}
.wod-cv-card:hover {
  border-color: #0ea5e9;
  box-shadow: 0 2px 8px rgba(14,165,233,0.2);
}
.wod-cv-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.wod-cv-text {
  text-align: left;
}
.wod-cv-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
}
.wod-cv-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.06em;
}
.wod-cv-build {
  font-size: 0.82rem;
  font-weight: 800;
  color: #6366f1;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ---- Accessories row on desk ---- */
.wod-desk-accessories-row {
  display: flex;
  justify-content: center;
}
.wod-desk-accessories-row .wod-desk-accessories {
  margin: 0 auto;
}

/* Desk Accessories (blocky/Minecraft style) */
.wod-desk-accessories {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  opacity: 0.9;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
.wod-accessory { flex-shrink: 0; }
.wod-accessory svg { image-rendering: pixelated; shape-rendering: crispEdges; }
.wod-postits { transform: rotate(-3deg); }
.wod-pen { transform: rotate(8deg) translateY(6px); }
.wod-plant { transform: translateY(-4px); }
.wod-mug { transform: rotate(-2deg) translateY(-2px); }
.wod-photo { transform: rotate(-4deg) translateY(-6px); }
.wod-photo-2 { transform: rotate(5deg) translateY(-3deg); }

/* ---- Desk Front Edge ---- */
.wod-desk-front-edge {
  height: 12px;
  background: linear-gradient(180deg, #5D4037 0%, #4E342E 100%);
  border-top: 2px solid #3E2723;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ---- Desk Underside (legs + chair) ---- */
.wod-desk-underside-wrap {
  height: 150px;
  flex-shrink: 0;
  position: relative;
  margin-top: -60px;
  z-index: 2;
}
.wod-desk-underside {
  display: block;
  width: 92%;
  height: 100%;
  margin: 0 auto;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

/* ---- End-of-content buffer (EPW template element) ---- */
.wod-scene::after {
  content: '';
  display: block;
  height: 2cm;
  flex-shrink: 0;
}

/* ============================================================
   PILES ON DESK
   ============================================================ */

.wod-piles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  position: relative;
  z-index: 1;
  align-content: start;
}

/* Desk layout: main piles + stacking tray side by side */
.wod-desk-layout {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Three main piles: take up most of the width */
.wod-piles-main {
  flex: 1;
  min-width: 0;
  grid-template-columns: 1fr 1fr 1fr;
}
.wod-piles-main .wod-pile {
  min-height: 200px;
}
.wod-piles-main .wod-pile-body {
  max-height: 400px;
}

/* Stacking tray: vertical stack on the right */
.wod-stacking-tray {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 220px;
  flex-shrink: 0;
  align-self: flex-start;
}
.wod-stacking-tray .wod-pile {
  border-radius: 0;
  margin-bottom: -1px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.04);
}
.wod-stacking-tray .wod-pile:first-child {
  border-radius: 4px 4px 0 0;
}
.wod-stacking-tray .wod-pile:last-child {
  border-radius: 0 0 4px 4px;
  margin-bottom: 0;
}
.wod-stacking-tray .wod-pile-body {
  max-height: 250px;
}

/* Clickable pile items */
.wod-pile-clickable {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.wod-pile-clickable:hover {
  background: #f0f9ff;
  transform: translateX(2px);
}

/* Single Pile — stacked paper on the desk */
.wod-pile {
  background: #fffef9;
  border: 2px solid #8D6E63;
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow:
    2px 2px 0 #D7CCC8,
    4px 4px 0 #BCAAA4,
    5px 5px 0 rgba(0,0,0,0.06);
  align-self: start;
}
.wod-pile:hover {
  border-color: #5D4037;
  transform: translateY(-2px);
  box-shadow:
    2px 2px 0 #D7CCC8,
    4px 4px 0 #BCAAA4,
    6px 6px 0 rgba(0,0,0,0.1);
}

.wod-pile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f5f0e8;
  border-bottom: 2px solid #D7CCC8;
  cursor: pointer;
  user-select: none;
}
.wod-pile-icon {
  font-size: 1rem;
}
.wod-pile-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3E2723;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wod-pile-count {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0;
  background: #8D6E63;
  color: #fff;
  min-width: 18px;
  text-align: center;
}
.wod-pile-arrow {
  font-size: 0.6rem;
  color: #8D6E63;
  transition: transform 0.2s;
}
.wod-pile.expanded .wod-pile-arrow { transform: rotate(90deg); }

.wod-pile-body {
  display: none;
  padding: 6px;
  max-height: 300px;
  overflow-y: auto;
  background: #fffef9;
}
.wod-pile.expanded .wod-pile-body { display: block; }

/* ---- Pile Items ---- */
.wod-pile-item {
  padding: 7px 9px;
  border-radius: 0;
  margin-bottom: 3px;
  background: #faf8f4;
  border-left: 3px solid #BCAAA4;
  font-size: 0.72rem;
  transition: background 0.15s;
}
.wod-pile-item:hover { background: #f0ebe3; }

.wod-pile-item-ref {
  font-family: monospace;
  font-size: 0.63rem;
  color: #6366f1;
  font-weight: 600;
}
.wod-pile-item-title {
  color: #1e293b;
  font-weight: 500;
  margin-top: 2px;
}
.wod-pile-item-meta {
  font-size: 0.63rem;
  color: #8D6E63;
  margin-top: 2px;
}

/* Status colors on left border */
.wod-pile-item[data-status="active"] { border-left-color: #10b981; }
.wod-pile-item[data-status="pending"] { border-left-color: #f59e0b; }
.wod-pile-item[data-status="authorised"] { border-left-color: #3b82f6; }
.wod-pile-item[data-status="instructed"] { border-left-color: #8b5cf6; }
.wod-pile-item[data-status="delivered"] { border-left-color: #06b6d4; }
.wod-pile-item[data-status="delivered"] { border-left-color: #22c55e; }
.wod-pile-item[data-status="draft"] { border-left-color: #94a3b8; }
.wod-pile-item[data-status="composed"] { border-left-color: #6366f1; }

/* Pile accent colors */
.wod-pile[data-pile="memos"] .wod-pile-header { border-left: 4px solid #10b981; }
.wod-pile[data-pile="documents"] .wod-pile-header { border-left: 4px solid #6366f1; }
.wod-pile[data-pile="projects-open"] .wod-pile-header { border-left: 4px solid #3b82f6; }
.wod-pile[data-pile="tasks-open"] .wod-pile-header { border-left: 4px solid #f59e0b; }
.wod-pile[data-pile="projects-done"] .wod-pile-header { border-left: 4px solid #22c55e; }
.wod-pile[data-pile="tasks-done"] .wod-pile-header { border-left: 4px solid #22c55e; }
.wod-pile[data-pile="activity"] .wod-pile-header { border-left: 4px solid #8b5cf6; }
.wod-pile[data-pile="photo-album"] .wod-pile-header { border-left: 4px solid #ec4899; }

.wod-pile[data-pile="memos"] .wod-pile-count { background: #10b981; }
.wod-pile[data-pile="documents"] .wod-pile-count { background: #6366f1; }
.wod-pile[data-pile="projects-open"] .wod-pile-count { background: #3b82f6; }
.wod-pile[data-pile="tasks-open"] .wod-pile-count { background: #f59e0b; }
.wod-pile[data-pile="projects-done"] .wod-pile-count { background: #22c55e; }
.wod-pile[data-pile="tasks-done"] .wod-pile-count { background: #22c55e; }
.wod-pile[data-pile="activity"] .wod-pile-count { background: #8b5cf6; }
.wod-pile[data-pile="photo-album"] .wod-pile-count { background: #ec4899; }

/* Empty state */
.wod-pile-empty {
  padding: 14px;
  text-align: center;
  color: #8D6E63;
  font-size: 0.72rem;
  font-style: italic;
}

/* ============================================================
   GENDER-TINTED SURFACES
   ============================================================ */

/* Female: rose-tinted */
.wod-desk-area[data-gender="f"] { background: #f5e6e8; }
.wod-desk-area[data-gender="f"] .wod-wall {
  background:
    repeating-linear-gradient(180deg, transparent 0px, transparent 28px, rgba(0,0,0,0.025) 28px, rgba(0,0,0,0.025) 30px),
    linear-gradient(180deg, #fce4ec 0%, #f8bbd0 100%);
}
.wod-desk-area[data-gender="f"] .wod-desk-surface {
  background: repeating-linear-gradient(90deg,
    #D7A0A0 0px, #D2989A 2px, #C48C8E 2px, #C99094 6px,
    #D4A09E 6px, #CE9E96 10px, #BF8A84 10px, #C7928C 12px);
}
.wod-desk-area[data-gender="f"] .wod-desk-trapezoid { background: #6D4040; }
.wod-desk-area[data-gender="f"] .wod-desk-edge-back { background: #6D4040; }
.wod-desk-area[data-gender="f"] .wod-desk-front-edge { background: linear-gradient(180deg, #6D4040, #5D3535); border-top-color: #4D2828; }
.wod-desk-area[data-gender="f"] .wod-pile { border-color: #A07070; }
.wod-desk-area[data-gender="f"] .wod-pile:hover { border-color: #7D4A4A; }
.wod-desk-area[data-gender="f"] .wod-pile-header { background: #fce7f3; border-bottom-color: #f9a8d4; }

/* Male: blue-tinted */
.wod-desk-area[data-gender="m"] { background: #dde4ed; }
.wod-desk-area[data-gender="m"] .wod-wall {
  background:
    repeating-linear-gradient(180deg, transparent 0px, transparent 28px, rgba(0,0,0,0.025) 28px, rgba(0,0,0,0.025) 30px),
    linear-gradient(180deg, #e8eef5 0%, #d8e2ee 100%);
}
.wod-desk-area[data-gender="m"] .wod-desk-surface {
  background: repeating-linear-gradient(90deg,
    #A0B0C8 0px, #98A8C0 2px, #8C9CB4 2px, #9098B0 6px,
    #A0A8BE 6px, #96A0B8 10px, #8890A8 10px, #9098B0 12px);
}
.wod-desk-area[data-gender="m"] .wod-desk-trapezoid { background: #404060; }
.wod-desk-area[data-gender="m"] .wod-desk-edge-back { background: #404060; }
.wod-desk-area[data-gender="m"] .wod-desk-front-edge { background: linear-gradient(180deg, #404060, #353550); border-top-color: #2A2A40; }
.wod-desk-area[data-gender="m"] .wod-pile { border-color: #6070A0; }
.wod-desk-area[data-gender="m"] .wod-pile:hover { border-color: #4A4A6D; }
.wod-desk-area[data-gender="m"] .wod-pile-header { background: #dbeafe; border-bottom-color: #93c5fd; }

/* ---- Gmail Inbox Feed (Siobhan's desk) ---- */
.wod-gmail-inbox { cursor: pointer; }
.wod-gmail-header { background: #f0f4ff !important; border-bottom-color: #93b4f5 !important; }
.wod-gmail-body { padding: 0 !important; }
.wod-gmail-loading { padding: 16px; color: #94a3b8; font-size: 0.78rem; text-align: center; }
.wod-gmail-count { background: #1a73e8 !important; color: #fff !important; }

.wod-gmail-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e8ecf0;
  cursor: pointer;
  transition: background 0.12s;
}
.wod-gmail-msg:hover { background: #f0f4ff; }
.wod-gmail-msg:last-child { border-bottom: none; }

.wod-gmail-unread { background: #f8faff; }
.wod-gmail-unread .wod-gmail-sender { font-weight: 700; }
.wod-gmail-unread .wod-gmail-subject { font-weight: 600; }

.wod-gmail-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #64748b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.wod-gmail-content { flex: 1; min-width: 0; }
.wod-gmail-sender { font-size: 0.78rem; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wod-gmail-subject { font-size: 0.74rem; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.wod-gmail-snippet { font-size: 0.68rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.wod-gmail-date { flex-shrink: 0; font-size: 0.68rem; color: #94a3b8; white-space: nowrap; }

.wod-gmail-we-badge {
  display: inline-block;
  background: #22c55e;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.3px;
}

/* ---- Gmail Overlay (in-EPW inbox viewer) ---- */
.wod-gmail-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wodFadeIn 0.15s ease;
}
@keyframes wodFadeIn { from { opacity: 0; } to { opacity: 1; } }

.wod-gmail-overlay-inner {
  width: 92vw;
  height: 88vh;
  max-width: 1400px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.wod-gmail-overlay-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #1a73e8;
  color: #fff;
  flex-shrink: 0;
}
.wod-gmail-overlay-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; }
.wod-gmail-overlay-close {
  background: none; border: none; color: #DC2626; font-weight: 700; font-size: 1.3rem;
  cursor: pointer; padding: 4px 8px; border-radius: 4px;
  transition: background 0.12s;
}
.wod-gmail-overlay-close:hover { background: rgba(255,255,255,0.2); }

.wod-gmail-overlay-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.wod-gmail-overlay-list {
  width: 380px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid #e2e8f0;
  background: #fafbfc;
}

.wod-gmail-overlay-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  transition: background 0.1s;
}
.wod-gmail-overlay-msg:hover { background: #e8f0fe; }
.wod-gmail-overlay-msg.selected { background: #d3e3fd; border-left: 3px solid #1a73e8; }
.wod-gmail-overlay-msg.wod-gmail-unread { background: #fff; }
.wod-gmail-overlay-msg.wod-gmail-unread .wod-gmail-sender { font-weight: 700; }
.wod-gmail-overlay-msg.wod-gmail-unread .wod-gmail-subject { font-weight: 600; color: #1e293b; }

.wod-gmail-overlay-reader {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: #fff;
}

.wod-gmail-reader-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #94a3b8;
  font-size: 0.9rem;
}

.wod-gmail-reader-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.wod-gmail-reader-subject {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
}
.wod-gmail-reader-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wod-gmail-reader-from { font-size: 0.85rem; color: #1e293b; }
.wod-gmail-reader-to { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.wod-gmail-reader-date { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; }

.wod-gmail-reader-body {
  padding: 0;
  flex: 1;
}
.wod-gmail-reader-iframe {
  width: 100%;
  min-height: 300px;
  border: none;
  display: block;
}
.wod-gmail-reader-text {
  padding: 20px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ============================================================
   DESK + FILING CABINET LAYOUT
   ============================================================ */

.wod-desk-and-cabinet {
  display: flex;
  flex: 1;
  min-height: 0;
}
.wod-desk-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wod-filing-cabinet {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #3a3a42 0%, #2c2c34 50%, #252530 100%);
  border-right: 3px solid #1a1a22;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  box-shadow: 3px 0 12px rgba(0,0,0,0.3), inset -1px 0 0 rgba(255,255,255,0.05);
}
.wod-fc-label {
  padding: 14px 16px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94a3b8;
  border-bottom: 1px solid #444;
}
.wod-fc-drawers {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.wod-fc-drawer {
  border-bottom: 2px solid #1a1a22;
}
.wod-fc-drawer-front {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #4a4a54 0%, #3a3a44 100%);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wod-fc-drawer-front:hover {
  background: linear-gradient(180deg, #555560 0%, #45454f 100%);
}
.wod-fc-drawer-handle {
  width: 32px;
  height: 6px;
  background: linear-gradient(180deg, #888 0%, #666 100%);
  border-radius: 3px;
  border: 1px solid #555;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.wod-fc-drawer-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wod-fc-drawer-count {
  font-size: 0.63rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0;
  background: #64748b;
  color: #fff;
  min-width: 16px;
  text-align: center;
}
.wod-fc-drawer-arrow {
  font-size: 0.55rem;
  color: #64748b;
  transition: transform 0.2s;
}
.wod-fc-drawer.expanded .wod-fc-drawer-arrow { transform: rotate(90deg); }
.wod-fc-drawer-body {
  display: none;
  padding: 4px 8px 8px;
  background: #2a2a32;
  max-height: 300px;
  overflow-y: auto;
}
.wod-fc-drawer.expanded .wod-fc-drawer-body { display: block; }

/* Filing cabinet pile items inherit styling from desk piles */
.wod-fc-drawer-body .wod-pile-item {
  background: #33333d;
  border-left-color: #555;
  color: #e2e8f0;
}
.wod-fc-drawer-body .wod-pile-item:hover { background: #3d3d48; }
.wod-fc-drawer-body .wod-pile-item-ref { color: #818cf8; }
.wod-fc-drawer-body .wod-pile-item-title { color: #e2e8f0; }
.wod-fc-drawer-body .wod-pile-item-meta { color: #94a3b8; }
.wod-fc-drawer-body .wod-pile-empty { color: #64748b; }

/* Drawer accent colours */
.wod-fc-drawer[data-drawer="memos"] .wod-fc-drawer-count { background: #10b981; }
.wod-fc-drawer[data-drawer="activity"] .wod-fc-drawer-count { background: #8b5cf6; }
.wod-fc-drawer[data-drawer="documents"] .wod-fc-drawer-count { background: #6366f1; }
.wod-fc-drawer[data-drawer="projects-open"] .wod-fc-drawer-count { background: #3b82f6; }
.wod-fc-drawer[data-drawer="tasks-open"] .wod-fc-drawer-count { background: #f59e0b; }
.wod-fc-drawer[data-drawer="projects-done"] .wod-fc-drawer-count { background: #22c55e; }
.wod-fc-drawer[data-drawer="tasks-done"] .wod-fc-drawer-count { background: #22c55e; }
.wod-fc-drawer[data-drawer="hub-review"] .wod-fc-drawer-count { background: #f97316; }
.wod-fc-drawer[data-drawer="bank-transactions"] .wod-fc-drawer-count { background: #14b8a6; }
.wod-fc-drawer[data-drawer="financial-records"] .wod-fc-drawer-count { background: #eab308; }
.wod-fc-drawer[data-drawer="photo-album"] .wod-fc-drawer-count { background: #ec4899; }
.wod-fc-drawer[data-drawer="gmail"] .wod-fc-drawer-count { background: #1a73e8; }
.wod-fc-drawer[data-drawer="my-folder"] .wod-fc-drawer-count { background: #0ea5e9; }

/* EPW-PRO-270: Folder tree styles */
.wod-folder-node { margin: 0; }
.wod-folder-children.collapsed { display: none; }
.wod-folder-arrow.open { transform: rotate(90deg); }

/* Gender tinting for filing cabinet */
.wod-desk-area[data-gender="f"] .wod-filing-cabinet {
  background: linear-gradient(180deg, #4a3a3e 0%, #3c2c30 50%, #352530 100%);
  border-left-color: #2a1a1e;
}
.wod-desk-area[data-gender="f"] .wod-fc-drawer-front {
  background: linear-gradient(180deg, #5a4a50 0%, #4a3a42 100%);
}
.wod-desk-area[data-gender="f"] .wod-fc-drawer-front:hover {
  background: linear-gradient(180deg, #655560 0%, #55454f 100%);
}
.wod-desk-area[data-gender="f"] .wod-fc-drawer-body { background: #322a2e; }
.wod-desk-area[data-gender="f"] .wod-fc-drawer-body .wod-pile-item { background: #3d333a; }
.wod-desk-area[data-gender="f"] .wod-fc-drawer-body .wod-pile-item:hover { background: #483d45; }

.wod-desk-area[data-gender="m"] .wod-filing-cabinet {
  background: linear-gradient(180deg, #3a3a4a 0%, #2c2c3c 50%, #252535 100%);
  border-left-color: #1a1a2a;
}
.wod-desk-area[data-gender="m"] .wod-fc-drawer-front {
  background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4c 100%);
}
.wod-desk-area[data-gender="m"] .wod-fc-drawer-front:hover {
  background: linear-gradient(180deg, #555568 0%, #45455a 100%);
}
.wod-desk-area[data-gender="m"] .wod-fc-drawer-body { background: #2a2a38; }
.wod-desk-area[data-gender="m"] .wod-fc-drawer-body .wod-pile-item { background: #333340; }
.wod-desk-area[data-gender="m"] .wod-fc-drawer-body .wod-pile-item:hover { background: #3d3d4c; }

/* ============================================================
   MACINTOSH PLUS COMPUTER
   ============================================================ */

.wod-mac {
  position: absolute;
  bottom: -270px;
  left: 6%;
  z-index: 15;
  width: 428px;
}
.wod-mac-body {
  background: linear-gradient(180deg, #e8e0d0 0%, #d8d0c0 40%, #cec6b6 100%);
  border: 2px solid #b0a890;
  border-radius: 6px 6px 2px 2px;
  padding: 10px 10px 6px;
  box-shadow: 3px 4px 0 rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
}
.wod-mac-bezel {
  background: #1a1a2e;
  border: 3px solid #2a2a3e;
  border-radius: 4px;
  padding: 4px;
}
.wod-mac-screen {
  background: linear-gradient(180deg, #2a4a2a 0%, #1a3a1a 100%);
  min-height: 400px;
  max-height: 800px;
  overflow-y: auto;
  padding: 0;
  font-family: 'Courier New', monospace;
  border: 1px solid #0a2a0a;
  image-rendering: pixelated;
}
/* Mac screen title bar — classic System 1 style */
.wod-mac-titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: repeating-linear-gradient(90deg, #3a6a3a 0px, #3a6a3a 1px, transparent 1px, transparent 3px);
  border-bottom: 1px solid #0a2a0a;
}
.wod-mac-titlebar-close {
  width: 10px;
  height: 10px;
  background: #1a3a1a;
  border: 1px solid #4a8a4a;
  flex-shrink: 0;
}
.wod-mac-titlebar-text {
  font-size: 1.8rem;
  color: #a0d0a0;
  font-weight: 700;
  flex: 1;
  text-align: center;
  text-shadow: 0 0 4px rgba(100,200,100,0.3);
}
.wod-mac-item {
  padding: 15px 24px;
  font-size: 1.95rem;
  color: #80c080;
  cursor: pointer;
  border-bottom: 1px solid rgba(60,100,60,0.3);
  transition: background 0.12s;
  display: flex;
  align-items: center;
  gap: 18px;
}
.wod-mac-item:hover {
  background: rgba(60,120,60,0.3);
  color: #b0e0b0;
}
.wod-mac-item:last-child { border-bottom: none; }
.wod-mac-item-icon {
  font-size: 2.1rem;
  flex-shrink: 0;
  width: 42px;
  text-align: center;
}
.wod-mac-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wod-mac-item-count {
  font-size: 1.65rem;
  color: #60a060;
  background: rgba(40,80,40,0.4);
  padding: 3px 12px;
  border-radius: 4px;
}

/* Mac vents and floppy disk slot */
.wod-mac-vents {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin: 5px 0 3px;
}
.wod-mac-vent {
  width: 18px;
  height: 2px;
  background: #b0a890;
  border-radius: 1px;
}
.wod-mac-disk {
  width: 42px;
  height: 4px;
  background: #a09880;
  margin: 0 auto;
  border: 1px solid #908870;
  border-radius: 1px;
}
.wod-mac-base {
  height: 6px;
  background: linear-gradient(180deg, #cec6b6, #beb6a6);
  border: 1px solid #a09880;
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin-top: 2px;
}


/* ---- Responsive ---- */
@media (max-width: 768px) {
  .wod-desk-and-cabinet { flex-direction: column; }
  .wod-filing-cabinet { width: 100%; border-right: none; border-bottom: 3px solid #1a1a22; }
  .wod-mac { position: relative; bottom: auto; left: auto; margin: 0 auto 12px; }
  .wod-desk-layout { flex-direction: column; }
  .wod-piles, .wod-piles-main { grid-template-columns: 1fr; }
  .wod-stacking-tray { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .wod-stacking-tray .wod-pile { flex: 1; min-width: 160px; }
  .wod-wall-items { gap: 16px; }
  .wod-desk-surface { padding: 12px 6%; }
}

/* ============================================================
   PHOTO ALBUM PILE  — EPW-PRO-171
   ============================================================ */

/* Give the photo album pile more vertical room */
.wod-pile[data-pile="photo-album"] .wod-pile-body {
  max-height: 520px;
}

/* Sync button in pile header */
.wod-pa-sync-btn {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  background: #ec4899;
  color: #fff;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.wod-pa-sync-btn:hover { background: #be185d; }
.wod-pa-sync-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Featured photo — most recent, shown large */
.wod-pa-featured {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
  cursor: pointer;
  overflow: hidden;
  background: #0f172a;
  border: 2px solid #D7CCC8;
  transition: border-color 0.15s, transform 0.15s;
}
.wod-pa-featured:hover {
  border-color: #ec4899;
  transform: scale(1.01);
}
.wod-pa-featured img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.wod-pa-featured-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.55);
  color: #e2e8f0;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thumbnail grid */
.wod-pa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.wod-pa-thumb {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #0f172a;
  aspect-ratio: 1 / 1;
  border: 1px solid #D7CCC8;
  transition: border-color 0.15s, transform 0.15s;
}
.wod-pa-thumb:hover {
  border-color: #ec4899;
  transform: scale(1.04);
  z-index: 2;
}
.wod-pa-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Photo Intelligence Badges (EPW-PRO-194) ---- */
.wod-pa-intel-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  color: #fff;
  z-index: 2;
  pointer-events: none;
  line-height: 1.3;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wod-pa-intel-route {
  background: #059669;
  font-size: 0.55rem;
}
.wod-pa-intel-tag {
  background: rgba(0,0,0,0.55);
  font-size: 0.5rem;
  font-weight: 500;
}
.wod-pa-intel-pending {
  background: #F59E0B;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  padding: 0;
}
.wod-pa-featured .wod-pa-intel-badge {
  font-size: 0.65rem;
  padding: 2px 8px;
  top: 6px;
  right: 6px;
}

/* ============================================================
   PHOTO EDITOR OVERLAY  — EPW-PRO-171
   ============================================================ */

.wod-photo-editor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;  /* shown via JS */
  flex-direction: column;
  background: rgba(5, 10, 20, 0.96);
  color: #e2e8f0;
}

/* Toolbar */
.wod-pe-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #0f172a;
  border-bottom: 2px solid #1e293b;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.wod-pe-btn {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #1e293b;
  color: #94a3b8;
  border: 2px solid #334155;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.wod-pe-btn:hover {
  background: #334155;
  color: #e2e8f0;
  border-color: #64748b;
}
.wod-pe-btn.active {
  background: #0e7490;
  color: #fff;
  border-color: #06b6d4;
}

.wod-pe-btn-save {
  background: #166534;
  color: #bbf7d0;
  border-color: #22c55e;
}
.wod-pe-btn-save:hover {
  background: #15803d;
  color: #fff;
}

.wod-pe-btn-close {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #ef4444;
  margin-left: auto;
}
.wod-pe-btn-close:hover {
  background: #991b1b;
  color: #fff;
}

.wod-pe-status {
  font-size: 0.68rem;
  color: #64748b;
  font-style: italic;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Canvas area */
.wod-pe-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 16px;
  position: relative;
}

/* Both canvases stack — crop overlay is positioned on top */
#wod-pe-canvas,
#wod-pe-crop-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  max-width: 90vw;
  max-height: 78vh;
}

#wod-pe-crop-overlay {
  cursor: crosshair;
  /* crop overlay transparent by default — only shows when drawing */
}

/* Navigation arrows */
.wod-pe-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.wod-pe-nav-arrow:hover { background: rgba(59,130,246,0.7); }
.wod-pe-nav-prev { left: 16px; }
.wod-pe-nav-next { right: 16px; }

/* -- End of EPW-PRO-171 additions -- */

/* ---- 23.03.05: Desk Calendar (EPW-PRO-247) ---- */
.wod-desk-calendar {
  position: relative;
  width: 200px;
  flex-shrink: 0;
  perspective: 600px;
}
.wod-cal-body {
  background: #fffef7;
  border: 1px solid #d4c9a8;
  border-radius: 2px 2px 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  padding: 20px 10px 10px;
  font-family: 'Georgia', 'Times New Roman', serif;
  transform: rotateX(6deg);
  transform-origin: bottom center;
  position: relative;
}
/* Spiral coils at top */
.wod-cal-spirals {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 14px;
  z-index: 2;
  pointer-events: none;
}
.wod-cal-spiral {
  position: absolute;
  width: 10px;
  height: 14px;
  border: 2px solid #78716c;
  border-radius: 50%;
  background: transparent;
  top: 0;
}
/* Calendar header */
.wod-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 6px;
  border-bottom: 1px solid #e5dcc8;
  margin-bottom: 6px;
}
.wod-cal-month {
  font-size: 0.85rem;
  font-weight: 700;
  color: #3f3520;
}
.wod-cal-year {
  font-size: 0.75rem;
  color: #8b7e6a;
}
/* Day headers */
.wod-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 2px;
}
.wod-cal-day-hdr {
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: #6b5c47;
  padding: 2px 0;
  letter-spacing: 0.3px;
}
/* Calendar grid */
.wod-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.wod-cal-cell {
  text-align: center;
  font-size: 0.65rem;
  padding: 3px 0;
  color: #4a3f2f;
  border-radius: 2px;
  cursor: default;
  line-height: 1.4;
  position: relative;
}
.wod-cal-empty {
  visibility: hidden;
}
.wod-cal-today {
  background: #1e293b;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.wod-cal-has-event {
  font-weight: 700;
  color: #1d4ed8;
}
.wod-cal-has-event::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3b82f6;
}
.wod-cal-overdue {
  font-weight: 700;
  color: #dc2626;
}
.wod-cal-overdue::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dc2626;
}
/* Event list below grid */
.wod-cal-events {
  margin-top: 6px;
  border-top: 1px solid #e5dcc8;
  padding-top: 4px;
  max-height: 60px;
  overflow-y: auto;
}
.wod-cal-evt, .wod-cal-evt-overdue {
  font-size: 0.55rem;
  padding: 1px 4px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wod-cal-evt-overdue {
  color: #dc2626;
  font-weight: 600;
}

/* ---- Desk Memos Panel ---- */
.wod-desk-memos {
  position: relative;
  background: #1e293b;
  border-radius: 10px;
  padding: 0;
  margin-top: 4px;
  max-width: 420px;
  align-self: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  overflow: visible;
}
.wod-desk-memos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #334155;
  border-bottom: 1px solid #475569;
}
.wod-desk-memos-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.06em;
}
.wod-desk-memos-nav {
  display: flex;
  gap: 4px;
}
.wod-desk-memos-arrow {
  background: #475569;
  border: none;
  color: #e2e8f0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.wod-desk-memos-arrow:hover {
  background: #64748b;
}
.wod-desk-memos-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
/* When parent has explicit height from resize, let children fill it */
.wod-desk-memos[style*="height"] {
  display: flex;
  flex-direction: column;
}
.wod-desk-memos[style*="height"] .wod-desk-memos-list {
  max-height: none;
  flex: 1;
}
.wod-mac[style*="height"] .wod-mac-body { height: 100%; display: flex; flex-direction: column; }
.wod-mac[style*="height"] .wod-mac-bezel { flex: 1; display: flex; flex-direction: column; }
.wod-mac[style*="height"] .wod-mac-screen { flex: 1; max-height: none; }
.wod-desk-memos-list::-webkit-scrollbar {
  width: 4px;
}
.wod-desk-memos-list::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 2px;
}
.wod-desk-memo-card {
  background: #0f172a;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid #6366f1;
}
.wod-desk-memo-card:hover {
  background: #162032;
}
.wod-desk-memo-ref {
  font-size: 0.66rem;
  font-weight: 700;
  color: #f97316;
  margin-bottom: 2px;
}
.wod-desk-memo-title {
  font-size: 0.78rem;
  color: #e2e8f0;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
}
.wod-desk-memo-meta {
  font-size: 0.62rem;
  color: #94a3b8;
}

/* ============================================================
   Nicole Travel Dashboard — EPW-PRO-254 Phase 5
   ============================================================ */
.wod-nicole-travel-dashboard {
  position: absolute;
  bottom: 8%;
  left: 5%;
  width: 42%;
  max-height: 55%;
  overflow-y: auto;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 10;
  font-size: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent;
}
.wod-ntd-loading {
  padding: 20px;
  text-align: center;
  color: #64748b;
  font-style: italic;
}
.wod-ntd-header {
  padding: 6px 10px;
  background: #162032;
  border-bottom: 1px solid #334155;
  font-weight: 700;
  font-size: 0.72rem;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px 8px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.wod-ntd-icon { font-size: 1rem; }
.wod-ntd-next-trip {
  padding: 8px 10px;
  border-bottom: 1px solid #1e293b;
}
.wod-ntd-trip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.wod-ntd-trip-dest {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f1f5f9;
}
.wod-ntd-countdown {
  background: #f59e0b;
  color: #000;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.65rem;
}
.wod-ntd-trip-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 2px;
}
.wod-ntd-trip-name {
  color: #94a3b8;
  font-size: 0.62rem;
}
.wod-ntd-trip-status {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 600;
  color: #fff;
}
.wod-ntd-trip-dates {
  color: #cbd5e1;
  font-size: 0.65rem;
  margin-bottom: 2px;
}
.wod-ntd-trip-conf {
  color: #a78bfa;
  font-size: 0.62rem;
  font-style: italic;
}
.wod-ntd-trip-budget {
  color: #10b981;
  font-size: 0.65rem;
  font-weight: 600;
  margin-top: 2px;
}
.wod-ntd-checklist-bar {
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.wod-ntd-checklist-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
  border-radius: 2px;
  transition: width 0.5s;
}
.wod-ntd-checklist-label {
  color: #94a3b8;
  font-size: 0.58rem;
  margin-top: 2px;
}
.wod-ntd-no-trips {
  padding: 12px;
  text-align: center;
  color: #475569;
  font-style: italic;
}
.wod-ntd-section-title {
  padding: 4px 10px;
  color: #64748b;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wod-ntd-trips-list {
  border-top: 1px solid #1e293b;
  padding-bottom: 4px;
}
.wod-ntd-trip-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 10px;
}
.wod-ntd-trip-row-name {
  color: #cbd5e1;
  font-size: 0.62rem;
}
.wod-ntd-trip-row-status {
  color: #94a3b8;
  font-size: 0.58rem;
}
.wod-ntd-intel {
  border-top: 1px solid #1e293b;
  padding-bottom: 4px;
}
.wod-ntd-intel-item {
  padding: 3px 10px;
  color: #94a3b8;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wod-ntd-intel-cat {
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
}

/* ---- Nicole Terminal Trip Preview (23.21) ---- */
.wod-mac-trip-preview {
  cursor: pointer;
  padding: 4px 6px !important;
  border-bottom: 1px solid #1e293b;
}
.wod-mac-trip-card { font-size: 0.6rem; line-height: 1.4; }
.wod-mac-trip-line1 { display: flex; align-items: center; gap: 4px; }
.wod-mac-trip-icon { font-size: 0.7rem; }
.wod-mac-trip-dest { font-weight: 700; color: #e2e8f0; font-size: 0.65rem; }
.wod-mac-trip-status { font-size: 0.45rem; padding: 1px 4px; border-radius: 3px; color: #fff; font-weight: 600; }
.wod-mac-trip-countdown { margin-left: auto; background: #f59e0b; color: #000; font-weight: 700; padding: 1px 5px; border-radius: 3px; font-size: 0.5rem; }
.wod-mac-trip-line2 { color: #94a3b8; font-size: 0.5rem; margin-top: 2px; }
.wod-mac-trip-line3 { color: #4ade80; font-size: 0.55rem; font-weight: 600; }

/* ---- Travel Command Centre — Full Page ---- */
.tcc-fullpage {
  width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px;
  font-family: 'Inter', -apple-system, sans-serif; color: #e2e8f0;
}
.tcc-header {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-bottom: 2px solid #8b5cf6; margin-bottom: 16px;
}
.tcc-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #8b5cf6; }
.tcc-title { font-size: 1.4rem; font-weight: 700; color: #8b5cf6; }
.tcc-subtitle { font-size: 0.8rem; color: #94a3b8; }
.tcc-dewey {
  margin-left: auto; background: #8b5cf622; color: #8b5cf6;
  border: 1px solid #8b5cf644; padding: 2px 8px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 600;
}
.tcc-close {
  background: none; border: 1px solid #475569; color: #94a3b8;
  font-size: 1.2rem; cursor: pointer; padding: 4px 10px; border-radius: 4px;
}
.tcc-close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

.tcc-stats {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.tcc-stat {
  background: #1e293b; border: 1px solid #334155; border-radius: 8px;
  padding: 12px 20px; text-align: center; flex: 1;
}
.tcc-stat-val { display: block; font-size: 1.6rem; font-weight: 700; color: #8b5cf6; }
.tcc-stat-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; }

.tcc-trip-panel {
  background: #1e293b; border: 1px solid #334155; border-radius: 8px;
  padding: 16px; margin-bottom: 16px;
}
.tcc-trip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tcc-trip-dest { font-size: 1.3rem; font-weight: 700; color: #f1f5f9; }
.tcc-trip-status { font-size: 0.65rem; padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: 600; }
.tcc-trip-countdown {
  margin-left: auto; background: #f59e0b; color: #000; font-weight: 700;
  padding: 4px 12px; border-radius: 6px; font-size: 0.85rem;
}
.tcc-trip-name { font-size: 0.85rem; color: #94a3b8; margin-bottom: 4px; }
.tcc-trip-dates { color: #cbd5e1; font-size: 0.85rem; }
.tcc-trip-conf { color: #22d3ee; font-size: 0.8rem; font-style: italic; margin-top: 2px; }
.tcc-trip-budget { color: #4ade80; font-size: 0.9rem; font-weight: 600; margin-top: 4px; }
.tcc-no-trips { color: #64748b; text-align: center; padding: 40px; font-size: 1rem; }
.tcc-loading { color: #64748b; text-align: center; padding: 20px; }

.tcc-pd-section { margin-top: 12px; border-top: 1px solid #334155; padding-top: 10px; }
.tcc-pd-title { font-size: 0.75rem; color: #94a3b8; font-weight: 600; margin-bottom: 6px; }
.tcc-pd-bar { background: #334155; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.tcc-pd-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #4ade80); border-radius: 3px; transition: width 0.3s; }
.tcc-pd-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tcc-pd-item { font-size: 0.75rem; color: #94a3b8; }
.tcc-pd-done { color: #4ade80; }

.tcc-section-title {
  font-size: 0.85rem; font-weight: 700; color: #cbd5e1;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #334155;
}

.tcc-rank-section { margin-bottom: 16px; }
.tcc-best-combo {
  background: #4ade8022; border: 1px solid #4ade8044; border-radius: 6px;
  padding: 10px 14px; color: #4ade80; font-weight: 600; font-size: 0.85rem;
  margin-bottom: 12px;
}
.tcc-rank-group { margin-bottom: 12px; }
.tcc-rank-group-title { font-size: 0.75rem; color: #8b5cf6; font-weight: 600; margin-bottom: 4px; }
.tcc-rank-table {
  width: 100%; border-collapse: collapse; font-size: 0.75rem;
}
.tcc-rank-table th {
  background: #1e293b; color: #94a3b8; text-align: left; padding: 6px 8px;
  border-bottom: 1px solid #334155; font-weight: 600; font-size: 0.65rem;
  text-transform: uppercase;
}
.tcc-rank-table td { padding: 6px 8px; border-bottom: 1px solid #1e293b; color: #cbd5e1; }
.tcc-rank-top td { background: #8b5cf611; font-weight: 600; }
.tcc-score {
  background: #8b5cf633; color: #c4b5fd; padding: 2px 6px; border-radius: 3px;
  font-weight: 700; font-size: 0.7rem;
}

.tcc-trips-table {
  width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 16px;
}
.tcc-trips-table th {
  background: #1e293b; color: #94a3b8; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid #334155; font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase;
}
.tcc-trips-table td { padding: 8px 10px; border-bottom: 1px solid #1e293b; color: #cbd5e1; }
.tcc-status-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 3px; color: #fff; font-weight: 600; }

.tcc-intel-item {
  padding: 4px 0; font-size: 0.75rem; border-bottom: 1px solid #1e293b22;
}
.tcc-intel-cat {
  color: #38bdf8; font-weight: 600; font-size: 0.6rem; text-transform: uppercase;
}
.tcc-intel-title { color: #94a3b8; }

/* ---- Desk Terminal Font Sizer (23.21) ---- */
.wod-mac-font-sizer {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 4px;
}
.wod-mac-font-btn {
  font-family: 'Courier New', monospace;
  color: #4a8a4a;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.wod-mac-font-btn[data-size="sm"] { font-size: 0.7rem; }
.wod-mac-font-btn[data-size="md"] { font-size: 1.0rem; }
.wod-mac-font-btn[data-size="lg"] { font-size: 1.3rem; }
.wod-mac-font-btn:hover { color: #a0d0a0; }
.wod-mac-font-btn.wod-mac-font-active {
  color: #c0f0c0;
  background: rgba(60,120,60,0.4);
}
/* Size presets applied to .wod-mac-screen */
.wod-mac-size-sm .wod-mac-item { font-size: 0.95rem; padding: 8px 14px; }
.wod-mac-size-sm .wod-mac-item-icon { font-size: 1.1rem; width: 26px; }
.wod-mac-size-sm .wod-mac-item-count { font-size: 0.8rem; padding: 2px 8px; }
.wod-mac-size-sm .wod-mac-titlebar-text { font-size: 0.9rem; }

.wod-mac-size-md .wod-mac-item { font-size: 1.35rem; padding: 10px 18px; }
.wod-mac-size-md .wod-mac-item-icon { font-size: 1.5rem; width: 32px; }
.wod-mac-size-md .wod-mac-item-count { font-size: 1.1rem; padding: 2px 10px; }
.wod-mac-size-md .wod-mac-titlebar-text { font-size: 1.25rem; }

/* lg is the default (no overrides needed — uses base .wod-mac-item styles) */

/* ---- Resize Handles (23.21 Desk Terminal + 23.22.01 Memos) ---- */
.wod-resize-handle {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 18px; height: 18px;
  cursor: ew-resize;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
}
/* Both: free corner resize */
.wod-mac .wod-resize-handle,
.wod-desk-memos .wod-resize-handle { cursor: nwse-resize; }
.wod-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 3px; right: 3px;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,0.5);
  border-bottom: 2px solid rgba(255,255,255,0.5);
}
/* Show on hover of parent */
.wod-mac:hover .wod-resize-handle,
.wod-desk-memos:hover .wod-resize-handle,
.wod-arrange-active .wod-resize-handle {
  opacity: 1;
}
.wod-resizing {
  user-select: none;
}