/* ==========================================================================
   InfraDesk — design system + application shell
   --------------------------------------------------------------------------
   Built on Apple's interface grammar: white ground, #f5f5f7 resting surfaces,
   hairline rules instead of borders, one action colour, SF Pro type, and
   capsule controls. Colour that encodes state (open / under review / closed)
   is data, never decoration, and is used nowhere else.
   ========================================================================== */

:root {
  /* Ground and ink */
  --w:        #ffffff;
  --g:        #f5f5f7;   /* resting surface */
  --g2:       #e8e8ed;   /* pressed surface */
  --ink:      #1d1d1f;
  --ink-2:    #6e6e73;   /* secondary text */
  --ink-3:    #86868b;   /* tertiary, footnotes */
  --line:     #d2d2d7;   /* hairline */
  --line-2:   #e5e5ea;   /* lighter hairline, inside lists */
  --black:    #000000;

  /* The one action colour */
  --blue:     #0071e3;
  --blue-h:   #0077ed;
  --blue-t:   rgba(0, 113, 227, 0.10);

  /* State colours — these are the data */
  --st-open:   #0071e3;
  --st-review: #b25000;
  --st-closed: #008009;
  --red:       #d70015;
  --red-t:     rgba(215, 0, 21, 0.10);

  /* Legacy aliases still referenced by inline styles and helper functions */
  --status-completed: var(--st-closed);
  --status-ongoing:   var(--st-review);
  --ink-muted:        var(--ink-2);
  --sg-ink:           var(--ink);
  --sg-coral:         var(--red);
  --sg-yellow:        var(--st-review);
  --sg-faint:         var(--ink-3);

  /* Type */
  --sans: "GiSans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radii — Apple uses three, and only three */
  --r-cap:  980px;  /* capsules: buttons, pills, tabs */
  --r-card: 18px;   /* tiles, sheets */
  --r-in:   10px;   /* inputs, thumbnails */

  --shadow-sheet: 0 24px 64px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-lift:  0 1px 3px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-cap:   0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -.022em;
  color: var(--ink);
  background: var(--w);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.app-open { overflow: hidden; }        /* desktop: the page itself never scrolls */

h1, h2, h3, p, figure, ul, ol { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }

:focus-visible {
  outline: 3px solid rgba(0, 113, 227, .55);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   The site model — a white architectural model, drawn by tower.js
   -------------------------------------------------------------------------- */

.tower { display: block; width: 100%; height: 100%; overflow: visible; }

/* ground */
.t-plot     { fill: #f8f8fa; stroke: rgba(29, 29, 31, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.t-grid     { stroke: rgba(29, 29, 31, .055); stroke-width: 1; vector-effect: non-scaling-stroke; }
.t-shadow   { fill: rgba(29, 29, 31, .08); }
.t-boundary { stroke: rgba(29, 29, 31, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.t-paint    { stroke: rgba(29, 29, 31, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* solids */
.t-face-l, .t-face-r, .t-top, .t-slab {
  stroke: rgba(29, 29, 31, .2);
  stroke-width: .8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.t-face-l { fill: #fcfcfd; }
.t-face-r { fill: #eceef2; }
.t-top    { fill: #ffffff; }
.t-slab   { fill: #ffffff; stroke: none; }
.t-slab-r { fill: #f4f5f7; }
.is-podium .t-face-l { fill: #f7f7f9; }
.is-podium .t-face-r { fill: #e6e8ec; }
.t-glass  { stroke: none; }

/* realism: frames, screens, balconies, trees */
.t-mull     { stroke: rgba(29, 29, 31, .17); stroke-width: .6; vector-effect: non-scaling-stroke; }
.t-louvre   { stroke: rgba(29, 29, 31, .2); stroke-width: .7; vector-effect: non-scaling-stroke; }
.t-railing  { fill: rgba(206, 218, 232, .5); stroke: rgba(29, 29, 31, .16); stroke-width: .5; vector-effect: non-scaling-stroke; }
.t-handrail { stroke: rgba(29, 29, 31, .5); stroke-width: .8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.t-balc.t-face-l { fill: #ffffff; }
.t-balc.t-face-r { fill: #e9ebef; }
.t-crown       { stroke: rgba(29, 29, 31, .16); stroke-width: .8; vector-effect: non-scaling-stroke; }
.t-trunk       { stroke: rgba(29, 29, 31, .4); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.t-tree-shadow { fill: rgba(29, 29, 31, .07); }

/* facility details */
.t-win    { stroke: rgba(29, 29, 31, .16); stroke-width: .6; vector-effect: non-scaling-stroke; }
.t-door   { fill: #dde1e7; stroke: rgba(29, 29, 31, .18); stroke-width: .6; vector-effect: non-scaling-stroke; }
.t-vent   { fill: #d6dae1; stroke: none; }
.t-awning { fill: #ffffff; stroke: rgba(29, 29, 31, .3); stroke-width: .8; vector-effect: non-scaling-stroke; }
.t-canopy { fill: rgba(255, 255, 255, .5); stroke: rgba(29, 29, 31, .34); }
.t-face-l.t-canopy, .t-face-r.t-canopy { fill: rgba(236, 238, 242, .7); }
.t-car-cabin.t-face-l, .t-car-cabin.t-face-r { fill: #dfe4eb; }
.t-lamp.t-face-l { fill: #f1f3f6; }
.t-tank     { fill: #e2e5ea; stroke: rgba(29, 29, 31, .25); stroke-width: .8; vector-effect: non-scaling-stroke; }
.t-tank-top { fill: #f6f7f9; stroke: rgba(29, 29, 31, .25); stroke-width: .8; vector-effect: non-scaling-stroke; }
.t-barrier  { stroke: rgba(29, 29, 31, .7); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.t-joint    { stroke: rgba(29, 29, 31, .12); stroke-width: .7; vector-effect: non-scaling-stroke; }

/* crane */
.t-steel, .t-lace, .t-tie, .t-cable, .t-rail, .t-sling, .t-col {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.t-steel { stroke: rgba(29, 29, 31, .66); stroke-width: 1.2; }
.t-lace  { stroke: rgba(29, 29, 31, .34); stroke-width: .7; }
.t-rail  { stroke: rgba(29, 29, 31, .45); stroke-width: .8; }
.t-tie   { stroke: rgba(29, 29, 31, .42); stroke-width: .8; }
.t-cable { stroke: rgba(29, 29, 31, .55); stroke-width: .8; }
.t-sling { stroke: rgba(29, 29, 31, .4);  stroke-width: .6; }
.t-cr.t-face-l  { fill: #f3f4f6; }
.t-cr.t-face-r  { fill: #dfe2e7; }
.t-cw.t-face-l  { fill: #e7e9ed; }
.t-cw.t-face-r  { fill: #d3d7dd; }
.t-hook.t-face-l, .t-hook.t-face-r { fill: #cfd3da; }
.t-cab-glass    { fill: #d7dde6 !important; }
.t-cargo.t-face-l { fill: #fafafb; }
.t-cargo.t-face-r { fill: #e9ebef; }

/* the building frame, only ever seen while it goes up */
.t-col { stroke: rgba(29, 29, 31, .5); stroke-width: 1; }
.tower:not(.is-building) .t-col { display: none; }

/* --------------------------------------------------------------------------
   Construction. Nothing exists until its stage is set; storeys go
   frame -> slab -> cladding, and the glass goes on panel by panel.
   -------------------------------------------------------------------------- */

.tower.is-building .t-stage,
.tower.is-building .t-fac,
.tower.is-building .t-roof,
.tower.is-building .t-mast-sec {
  opacity: 0;
  transition: opacity .45s var(--ease), transform .6s cubic-bezier(.2, .9, .25, 1.12);
}
.tower.is-building .t-drop { transform: translateY(-30px); }
.tower.is-building .t-stage.is-set,
.tower.is-building .t-fac.is-set,
.tower.is-building .t-roof.is-set,
.tower.is-building .t-mast-sec.is-set { opacity: 1; transform: none; }
.tower.is-building .t-mast-sec { transition-duration: .18s; }

/* the boundary is walked out */
.tower.is-building .t-boundary { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.tower.is-building .is-set .t-boundary { stroke-dashoffset: 0; }

/* storeys */
.tower.is-building .t-floor { opacity: 0; transition: opacity .15s linear; }
.tower.is-building .t-floor.is-frame { opacity: 1; }

.tower.is-building .t-floor .t-col { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .26s var(--ease), opacity .5s var(--ease) .25s; }
.tower.is-building .t-floor.is-frame .t-col { stroke-dashoffset: 0; }
.tower.is-building .t-floor.is-clad .t-col { opacity: 0; }

.tower.is-building .t-floor .t-skin { transition: fill .5s var(--ease), stroke .5s var(--ease); }
.tower.is-building .t-floor:not(.is-clad) .t-skin { fill: #e6e8ec; stroke: transparent; }

.tower.is-building .t-floor .t-slab,
.tower.is-building .t-floor .t-slab-top {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s var(--ease), transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
.tower.is-building .t-floor.is-slab .t-slab,
.tower.is-building .t-floor.is-slab .t-slab-top { opacity: 1; transform: none; }

.tower.is-building .t-floor .t-glass {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
  transition-delay: calc(var(--i, 0) * 32ms);
}
.tower.is-building .t-floor.is-clad .t-glass { opacity: 1; transform: none; }

/* balconies go in with the slab; frames, railings and screens with the glazing */
.tower.is-building .t-floor .t-balc { opacity: 0; transform: translateY(-10px); transition: opacity .2s var(--ease), transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.tower.is-building .t-floor.is-slab .t-balc { opacity: 1; transform: none; }
.tower.is-building .t-floor .t-mull,
.tower.is-building .t-floor .t-louvre,
.tower.is-building .t-floor .t-railing,
.tower.is-building .t-floor .t-handrail,
.tower.is-building .t-front .t-steel { opacity: 0; transition: opacity .45s var(--ease) .15s; }
.tower.is-building .t-floor.is-clad .t-mull,
.tower.is-building .t-floor.is-clad .t-louvre,
.tower.is-building .t-floor.is-clad .t-railing,
.tower.is-building .t-floor.is-clad .t-handrail,
.tower.is-building .t-front .is-clad .t-steel { opacity: 1; }

/* Pins follow a ticket: black while Open, grey once the fix is recorded (still
   Open), blue with a tick when Closed -- the app's own Open/Closed colours. */
.t-pin { transition: opacity .6s var(--ease); }
.t-pin.is-gone { opacity: 0; }
.t-pin-dot {
  fill: #1d1d1f;
  stroke: #fff;
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .45s var(--ease);
  animation: t-pin-in .55s cubic-bezier(.2, .9, .3, 1.5) both;
}
.t-pin-ring {
  fill: none;
  stroke: #1d1d1f;
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: t-pin-pulse 1.7s ease-out .2s infinite;
}
.t-pin-check {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .3s var(--ease) .15s;
}
.t-pin.is-fix .t-pin-dot    { fill: #86868b; }
.t-pin.is-fix .t-pin-ring   { animation: none; opacity: 0; }
.t-pin.is-closed .t-pin-dot  { fill: #2251ff; }
.t-pin.is-closed .t-pin-ring { animation: none; opacity: 0; }
.t-pin.is-closed .t-pin-check { opacity: 1; }
@keyframes t-pin-in    { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes t-pin-pulse { 0% { transform: scale(.45); opacity: .85; } 100% { transform: scale(2.3); opacity: 0; } }

/* The card that narrates one pin at a time */
.t-card {
  position: absolute;
  z-index: 3;
  min-width: 212px;
  padding: 11px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  pointer-events: none;
  opacity: 0;
  --tx: 14px;                                   /* set by tower.js to the side that fits */
  --ty: calc(-100% - 14px);
  transform-origin: bottom left;
  transform: translate(var(--tx), var(--ty)) scale(.94);
  transition: opacity .35s var(--ease), transform .5s cubic-bezier(.2, .9, .3, 1.2);
}
.t-card.is-shown { opacity: 1; transform: translate(var(--tx), var(--ty)); }
.t-card-title { font-size: 14px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; }
.t-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: -.004em;
  color: var(--ink-3);
}
.t-card-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; transition: color .35s var(--ease); }
.t-card-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.t-card-state.is-open   { color: #1d1d1f; }
.t-card-state.is-fix    { color: #6e6e73; }
.t-card-state.is-closed { color: #2251ff; }

/* --------------------------------------------------------------------------
   Boot — the tower goes up, then hands over
   -------------------------------------------------------------------------- */

body.is-booting { overflow: hidden; }

#boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 18px;
  padding: 9vh 24px 12vh;
  background-color: var(--w);
  cursor: default;
  transition: background-color .8s var(--ease), opacity .55s var(--ease);
}
body.is-booting #boot { animation: boot-failsafe .01s 8s forwards; }   /* if scripts never run */
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }

.boot-stage { position: relative; width: min(820px, 92vw); height: 100%; max-height: 640px; min-height: 0; }
/* A slow push-in while the site goes up; it ends at rest before the handoff. */
body.is-booting .boot-stage { animation: boot-dolly 4.4s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes boot-dolly { from { transform: scale(.9) translateY(2%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body.is-booting .boot-stage { animation: none; } }
.boot-stage .tower { position: absolute; inset: 0; }
.boot-stage .tower { transition: transform 1.05s cubic-bezier(.65, 0, .28, 1); will-change: transform; }

.boot-caption { display: grid; justify-items: center; gap: 8px; transition: opacity .3s var(--ease); }
.boot-meter { width: 180px; height: 2px; border-radius: 2px; background: #e5e5ea; overflow: hidden; }
.boot-meter i { display: block; height: 100%; background: #1d1d1f; transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.boot-word { font-size: 21px; font-weight: 600; letter-spacing: -.021em; }
.boot-level {
  min-height: 18px;
  font-size: 13px;
  letter-spacing: -.004em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

#boot.is-handing { background-color: rgba(255, 255, 255, 0); pointer-events: none; }
#boot.is-handing .boot-caption { opacity: 0; }
#boot.is-leaving { opacity: 0; pointer-events: none; }
#boot.is-leaving .tower { transform: translateY(-4%) scale(1.05); transition: transform .6s var(--ease); }

/* --------------------------------------------------------------------------
   Primitives: capsules, buttons, tags
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-cap);
  background: var(--g);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.btn:hover  { background: var(--g2); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn-sm { min-height: 30px; padding: 0 14px; font-size: 13px; }

.btn-ink { background: var(--blue); color: #fff; font-weight: 400; }
.btn-ink:hover { background: var(--blue-h); }

.btn-danger { background: var(--red-t); color: var(--red); }
.btn-danger:hover { background: rgba(215, 0, 21, .16); }

.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--blue-t); }

.btn-ok { background: var(--st-closed); color: #fff; }
.btn-ok:hover { background: #00920a; }

/* the old detail-modal markup asks for these two names */
.soft-btn, .soft-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-cap);
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.soft-btn { background: var(--g); color: var(--ink); }
.soft-btn:hover { background: var(--g2); }
.soft-btn-primary { background: var(--blue); color: #fff; }
.soft-btn-primary:hover { background: var(--blue-h); }
.soft-btn:active, .soft-btn-primary:active { transform: scale(.97); }

/* A round icon button. Quiet by default; it is chrome, not content. */
.circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--g);
  color: var(--ink-2);
}
.circle svg { width: 16px; height: 16px; }

.circle-btn {
  position: relative;
  width: 34px;
  height: 34px;
  background: transparent;
  color: var(--ink);
  transition: background .18s var(--ease);
}
.circle-btn:hover { background: var(--g); }
.circle-btn svg { width: 19px; height: 19px; }

.dot-badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-cap);
  background: var(--g);
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.pill svg { width: 13px; height: 13px; flex: none; }
.pill-tint { background: var(--blue-t); color: var(--blue); }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--g);
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: -.005em;
}
.tag-tint { background: var(--blue-t); color: var(--blue); }
.tag-id {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
}

/* State chips. These colours mean something — do not restyle them. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: var(--r-cap);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status.is-open   { background: rgba(0, 113, 227, .10);  color: var(--st-open); }
.status.is-review { background: rgba(178, 80, 0, .10);   color: var(--st-review); }
.status.is-closed { background: rgba(0, 128, 9, .10);    color: var(--st-closed); }

.prio {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-cap);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.005em;
  background: var(--g);
  color: var(--ink-2);
  white-space: nowrap;
}
.prio.is-high   { background: var(--red-t); color: var(--red); }
.prio.is-medium { background: rgba(178, 80, 0, .10); color: var(--st-review); }

/* --------------------------------------------------------------------------
   Application shell — a fixed sidebar and a column that never scrolls
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100dvh;
  background: var(--w);
}

.rail {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--g);
}
.rail-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 12px 14px;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 22px;
}
.rail-brand img { width: 22px; height: 22px; }
.rail-brand .rail-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.021em;
  color: var(--ink);
}

.rail-nav { display: grid; gap: 2px; }

.rail-link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 15px;
  letter-spacing: -.014em;
  text-align: left;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.rail-link .circle {
  width: 26px;
  height: 26px;
  background: transparent;
  color: inherit;
}
.rail-link .circle svg { width: 19px; height: 19px; }
.rail-link:hover { background: rgba(0, 0, 0, .045); color: var(--ink); }
.rail-link.is-active {
  background: var(--w);
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-lift);
}
.rail-link.is-active .circle { color: var(--blue); }

.rail-cta { display: none; }               /* phones only — it is the tab bar's + */

.rail-foot { margin-top: auto; padding-top: 12px; }

/* The page column */
.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* --- top row ------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line-2);
}
.top-mark { display: none; width: 22px; height: 22px; }

.top-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-title h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.021em;
  white-space: nowrap;
}
.scope { display: flex; align-items: center; gap: 6px; min-width: 0; }
.scope .pill { max-width: 190px; }
.scope .pill span { overflow: hidden; text-overflow: ellipsis; }

.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.who { position: relative; }
.who-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: var(--r-cap);
  background: transparent;
  transition: background .18s var(--ease);
}
.who-btn:hover { background: var(--g); }
.who-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.who-name {
  font-size: 14px;
  letter-spacing: -.014em;
  max-width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chev { width: 13px; height: 13px; color: var(--ink-3); }

.who-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 248px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-sheet);
}
.who-menu[hidden] { display: none; }
.who-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.who-menu-name { font-size: 15px; font-weight: 500; letter-spacing: -.016em; }
.who-menu-sub  { font-size: 13px; color: var(--ink-2); letter-spacing: -.008em; }
.who-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 15px;
  letter-spacing: -.014em;
  text-align: left;
}
.who-menu-item svg { width: 17px; height: 17px; color: var(--ink-2); }
.who-menu-item:hover { background: var(--g); }

/* --------------------------------------------------------------------------
   Overview — four numbers. The resting tile is grey; the one you have
   selected lifts to white. That is the whole selection grammar.
   -------------------------------------------------------------------------- */

.overview { flex: none; padding: 22px 32px 6px; }

.overview-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.overview-head h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--ink-2);
}
.overview-caption { font-size: 13px; color: var(--ink-3); letter-spacing: -.008em; }

.overview-img { display: none; }            /* the photographs live in the list, not behind it */

/* The lead tile is wider than its siblings. That width, not a shadow, is
   what says it matters more. */
.stats {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stats-5 { grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr)); }

.stat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--g);
  text-align: left;
  transition: background .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
button.stat-tile:hover { background: var(--g2); }
button.stat-tile:active { transform: scale(.985); }

.stat-tile.is-active {
  background: var(--w);
  border-color: var(--line);
  box-shadow: var(--shadow-lift);
}

/* Overview widgets pick up the same accent colour as their status, on hover and when active */
.stat-tile[data-filter="Open"]:hover { background: var(--st-open-wash); }
.stat-tile[data-filter="Open"].is-active { background: var(--st-open-wash); box-shadow: inset 0 0 0 1.5px var(--st-open), var(--sg-shadow-float); }
.stat-tile[data-filter="Open"].is-active .stat-head .circle { background: var(--st-open); color: #fff; }

.stat-tile[data-filter="Under Review"]:hover { background: var(--st-review-wash); }
.stat-tile[data-filter="Under Review"].is-active { background: var(--st-review-wash); box-shadow: inset 0 0 0 1.5px var(--st-review), var(--sg-shadow-float); }
.stat-tile[data-filter="Under Review"].is-active .stat-head .circle { background: var(--st-review); color: #fff; }

.stat-tile[data-filter="Closed"]:hover { background: var(--st-closed-wash); }
.stat-tile[data-filter="Closed"].is-active { background: var(--st-closed-wash); box-shadow: inset 0 0 0 1.5px var(--st-closed), var(--sg-shadow-float); }
.stat-tile[data-filter="Closed"].is-active .stat-head .circle { background: var(--st-closed); color: #fff; }

.stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stat-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--ink-2);
}
.stat-sub, .stat-subtext {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -.004em;
}
.stat-head .circle { display: none; }       /* the number is the object; the icon was noise */

.num, .stat-value {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.num small { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }

.stat-row { display: flex; align-items: flex-end; gap: 12px; }
.stat-delta { display: none; }              /* the ring already carries the share */
.stat-foot { font-size: 12px; color: var(--ink-3); letter-spacing: -.004em; }
.t-micro {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--ink-2);
}

/* Lead tile's share bar — a hairline that fills */
.vbars {
  position: relative;
  flex: 1;
  height: 4px;
  margin-bottom: 9px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.vbars::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  border-radius: 2px;
  background: var(--ink);
  transition: width .6s var(--ease);
}

/* Share ring — a full circle, read like a fitness ring */
.arc {
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 42px;
  height: 42px;
  pointer-events: none;
}
.arc circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.arc .track { stroke: var(--line); }
.arc .fill  { stroke: var(--ink); transition: stroke-dasharray .6s var(--ease); }
.arc .fill[stroke-dasharray^="0 "] { display: none; }
.arc .dot   { display: none; }

.stat-tile[data-filter="Open"]          .arc .fill { stroke: var(--st-open); }
.stat-tile[data-filter="Under Review"]  .arc .fill { stroke: var(--st-review); }
.stat-tile[data-filter="Closed"]        .arc .fill { stroke: var(--st-closed); }

/* --------------------------------------------------------------------------
   Board — action, filters, then the list. Only the list scrolls.
   -------------------------------------------------------------------------- */

.board {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 32px 22px;
}

.board-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 18px 0 14px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-cap);
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  letter-spacing: -.014em;
  white-space: nowrap;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.cta:hover  { background: var(--blue-h); }
.cta:active { transform: scale(.97); }
.cta .circle { display: none; }
.cta::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* Segmented control */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(120, 120, 128, .12);
}
.tab {
  padding: 5px 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: -.008em;
  white-space: nowrap;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.tab.is-active {
  background: var(--w);
  font-weight: 500;
  box-shadow: var(--shadow-cap);
}

.board-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.pill-select, .pill-search {
  position: relative;
  height: 34px;
  padding: 0 12px;
  color: var(--ink);
}
.pill-select { padding-right: 30px; }
.pill-select select {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13px;
  letter-spacing: -.008em;
  max-width: 150px;
  padding: 0;
  outline: none;
}
.pill-select .chev { position: absolute; right: 11px; pointer-events: none; }
/* Custom dropdown (replaces native select popup) */
.dd { padding: 0; }
.dd-trigger {
  display: flex; align-items: center; gap: 7px;
  height: 100%; padding: 0 12px;
  border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 13px; letter-spacing: -.008em; cursor: pointer;
  border-radius: inherit;
}
.dd-trigger .chev { position: static; transition: transform .2s var(--ease); }
.dd.is-open .chev { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 100%; margin: 0; padding: 5px; list-style: none;
  background: var(--w); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  transform-origin: top right;
  animation: dd-in .14s var(--ease);
}
.dd-menu[hidden] { display: none; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd-menu li {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.dd-menu li svg { width: 14px; height: 14px; color: var(--blue); visibility: hidden; }
.dd-menu li:hover, .dd-menu li.is-focus { background: rgba(0, 0, 0, .05); }
.dd-menu li[aria-selected="true"] { color: var(--blue); font-weight: 500; background: var(--blue-t); }
.dd-menu li[aria-selected="true"] svg { visibility: visible; }
.pill-search input {
  width: 168px;
  border: 0;
  background: transparent;
  font-size: 13px;
  letter-spacing: -.008em;
  outline: none;
}
.tabs-days, .tabs-prio { align-items: center; }
.days-slider {
  --pct: 0%;
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 4px; margin: 0 10px 0 2px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--blue) var(--pct), var(--line) var(--pct));
}
.days-slider:focus { outline: none; }
.days-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--w); box-shadow: var(--shadow-cap); border: 0;
}
.days-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--w); box-shadow: var(--shadow-cap); border: 0; }
.days-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--blue-t), var(--shadow-cap); }
.days-value { min-width: 54px; margin-right: 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.days-slider.is-active ~ .days-value { color: var(--blue); }
.tabs-days .days-title, .tabs-prio .days-title { font-size: 12px; font-weight: 600; padding: 0 10px 0 12px; white-space: nowrap; color: var(--ink); }
.tk-meta .tk-overdue { color: #A4262C; font-weight: 600; }
.pill-search input::placeholder { color: var(--ink-3); }
.pill-search input::-webkit-search-cancel-button { appearance: none; }
.grow { flex: 1; }
.pill-search.grow input { width: 100%; }
.is-hidden { display: none !important; }

/* Column labels — a hairline row, not a table header */
.tk-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 86px 118px 28px;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 0 12px 8px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -.004em;
  border-bottom: 1px solid var(--line-2);
}

.tk-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tk-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 86px 118px 28px;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-bottom: 1px solid var(--line-2);
  transition: background .14s var(--ease);
}
.tk-row:hover  { background: var(--g); }
.tk-row:active { background: var(--g2); }

.tk-thumb {
  width: 76px;
  height: 56px;
  border-radius: var(--r-in);
  object-fit: cover;
  background: var(--g);
}
.tk-thumb.is-empty {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.tk-thumb.is-empty svg { width: 18px; height: 18px; }

.tk-main { min-width: 0; }
.tk-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.016em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tk-snippet {
  margin-top: 1px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -.008em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tk-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -.004em;
}
.tk-meta b {
  flex: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-2);
}
.tk-meta span {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tk-tags { display: contents; }
.tk-row .prio, .tk-row .status { justify-self: start; }
.tk-act { display: grid; place-items: center; }
.tk-act .circle {
  width: 22px;
  height: 22px;
  background: transparent;
  color: var(--ink-3);
}
.tk-act .circle svg { width: 15px; height: 15px; }

.tk-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 72px 24px;
  text-align: center;
}
.tk-empty .circle { width: 46px; height: 46px; }
.tk-empty .circle svg { width: 21px; height: 21px; }
.tk-empty strong { font-size: 17px; font-weight: 600; letter-spacing: -.021em; }
.tk-empty span { max-width: 38ch; font-size: 15px; color: var(--ink-2); letter-spacing: -.014em; }

/* --------------------------------------------------------------------------
   Sheets
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.is-open { display: flex; animation: veil .22s var(--ease); }
@keyframes veil { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(86dvh, 860px);
  border-radius: var(--r-card);
  background: var(--w);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  animation: sheet .3s var(--ease);
}
@keyframes sheet { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.modal-sm   { width: min(460px, 100%); }
.modal-wide { width: min(760px, 100%); }
.modal-xl   { width: min(960px, 100%); }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line-2);
}
.modal-title { font-size: 21px; font-weight: 600; letter-spacing: -.021em; }
.modal-sub   { margin-top: 2px; font-size: 14px; color: var(--ink-2); letter-spacing: -.01em; }
.badges { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.due-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12px; color: var(--ink-3); }

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-body > * { flex: none; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 14px 22px;
  border-top: 1px solid var(--line-2);
  background: var(--w);
}
.modal-footer-split { justify-content: space-between; }
.modal-footer-group { display: flex; align-items: center; gap: 8px; }
.modal-footer-stack { flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-note { font-size: 13px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field, .form-group { display: grid; gap: 7px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-row  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack      { display: flex; flex-direction: column; gap: 16px; }
.row-end    { display: flex; justify-content: flex-end; }
.row-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar    { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.field-label, .form-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--ink-2);
}
.req { color: var(--red); }
.field-opt { font-weight: 400; color: var(--ink-3); }
.field-hint { font-size: 12px; color: var(--ink-3); letter-spacing: -.004em; }

.input, .select, .textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--w);
  font-size: 15px;
  letter-spacing: -.014em;
  outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-t);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

.select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
}

.textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.textarea-sm { min-height: 72px; }

/* Dropzone */
.drop, .dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  background: var(--g);
  text-align: center;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.drop:hover, .dropzone:hover,
.drop.is-dragover, .dropzone.is-dragover,
.drop.dragover, .dropzone.dragover {
  border-color: var(--blue);
  background: var(--blue-t);
}
.drop input[type="file"], .dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.drop .circle, .dropzone .circle { width: 38px; height: 38px; background: var(--w); color: var(--ink-2); }
.drop-title { font-size: 15px; font-weight: 500; letter-spacing: -.016em; }
.drop-sub   { font-size: 13px; color: var(--ink-2); letter-spacing: -.008em; }

.drop-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--w);
}
.drop-preview img { width: 56px; height: 56px; border-radius: var(--r-in); object-fit: cover; }
.drop-preview-text { flex: 1; min-width: 0; }
.drop-preview-text .name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drop-preview-text .size { font-size: 12px; color: var(--ink-3); }
.file-chip {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-in);
  background: var(--g);
  font-size: 12px;
  color: var(--ink-2);
}

.alert {
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--g);
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.alert-danger { background: var(--red-t); color: var(--red); }
.alert-tint   { background: rgba(0, 128, 9, .10); color: var(--st-closed); }

/* --------------------------------------------------------------------------
   Panels, key–value blocks, tables
   -------------------------------------------------------------------------- */

.panel {
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--g);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel > * { flex: none; }
.panel-tint { background: var(--blue-t); }
.panel-title, .panel-heading {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--ink-2);
}
.panel-heading { font-size: 17px; font-weight: 600; letter-spacing: -.021em; color: var(--ink); }
.panel-text { font-size: 15px; line-height: 1.5; letter-spacing: -.014em; max-width: 70ch; }

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border-radius: 14px;
  background: var(--line-2);
  overflow: hidden;
}
.meta-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meta-cell { padding: 12px 14px; background: var(--w); }
.meta-k { font-size: 12px; color: var(--ink-3); letter-spacing: -.004em; }
.meta-v {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.016em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.meta-s {
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: -.004em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-span { grid-column: 1 / -1; }
.meta-wrap { white-space: normal; font-weight: 400; line-height: 1.45; }

.dt-wrap { overflow: auto; max-height: 46dvh; border-radius: 14px; border: 1px solid var(--line-2); }
.dt-wrap-sm { max-height: 210px; }

.dt { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: -.01em; }
.dt thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px;
  background: var(--g);
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
}
.dt tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr:hover { background: var(--g); }
.dt-nowrap td { white-space: nowrap; }
.ta-r, .dt thead th.ta-r, .dt tbody td.ta-r { text-align: right; }
.dt-empty { padding: 28px 14px !important; text-align: center; color: var(--ink-3); }
.dt .select { padding: 6px 30px 6px 10px; font-size: 13px; border-radius: 9px; background-position: right 9px center; }

.audit { display: grid; gap: 1px; border-radius: 12px; background: var(--line-2); overflow: hidden; }
.audit-row { padding: 10px 14px; background: var(--w); font-size: 14px; letter-spacing: -.01em; }
.audit-row .by { font-weight: 500; }
.audit-row .sub { display: block; font-size: 12px; color: var(--ink-3); }
.audit-empty { padding: 20px 14px; background: var(--w); text-align: center; color: var(--ink-3); font-size: 14px; }

/* --------------------------------------------------------------------------
   Proof: the photographs are the payoff
   -------------------------------------------------------------------------- */

.proofs { display: grid; grid-template-columns: repeat(auto-fit, 268px); justify-content: start; gap: 12px; }
.proof-card { margin: 0; border-radius: 14px; overflow: hidden; background: var(--w); }
.proof-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; background: var(--w); }
.proof-card figcaption {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: -.004em;
  background: var(--w);
}
.proof-card figcaption::before { content: ""; }
.proof-none { padding: 22px; border-radius: 14px; background: var(--w); color: var(--ink-3); font-size: 14px; text-align: center; }

.split {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  user-select: none;
  cursor: ew-resize;
}
.proof-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-after { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.split-after .proof-img { width: auto; min-width: 100%; }
.split-tag {
  position: absolute;
  bottom: 12px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: var(--r-cap);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}
.split-tag.is-before { right: 12px; }
.split-tag.is-after  { left: 12px; }
.split-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  display: grid;
  place-items: center;
}
.split-handle svg {
  width: 20px;
  height: 20px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-cap);
}

/* --------------------------------------------------------------------------
   Notifications drawer, email, lightbox, toast
   -------------------------------------------------------------------------- */

.mail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  background: var(--w);
  box-shadow: none;                 /* parked off-screen, its shadow would bleed in */
  transform: translateX(101%);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.mail-drawer.is-open { transform: none; box-shadow: var(--shadow-sheet); }
.mail-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex: none;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--line-2);
}
.mail-drawer-body { flex: 1; overflow-y: auto; padding: 8px; }

.mail-item {
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .14s var(--ease);
}
.mail-item:hover { background: var(--g); }
.mail-item + .mail-item { border-top: 1px solid var(--line-2); border-radius: 12px; }
.mail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -.004em;
}
.mail-ticket { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mail-new {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-cap);
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}
.mail-subject {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.016em;
}
.mail-meta { margin-top: 3px; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.mail-empty { padding: 44px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }

.email-body { font-size: 15px; line-height: 1.55; }
.email-body img { max-width: 100%; border-radius: 12px; }
.email-body a { color: var(--blue); }

.zoom {
  padding: 0;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-direction: column;
}
.zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  flex: none;
}
.zoom-bar .pill { background: rgba(255, 255, 255, .14); color: #fff; }
.zoom-bar .circle-btn { color: #fff; }
.zoom-bar .circle-btn:hover { background: rgba(255, 255, 255, .14); }
.zoom-img {
  max-width: min(1100px, 92vw);
  max-height: 80dvh;
  margin: auto;
  border-radius: var(--r-card);
  object-fit: contain;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 400;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: var(--r-cap);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  font-size: 15px;
  letter-spacing: -.014em;
  box-shadow: var(--shadow-sheet);
  transition: opacity .3s var(--ease);
  animation: toast-in .34s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .rail-panel { padding: 18px 10px 14px; align-items: center; }
  .rail-brand { padding: 4px 0 22px; }
  .rail-label { display: none; }
  .rail-nav { width: 100%; }
  .rail-link { justify-content: center; padding: 10px 0; }
  .top, .overview, .board { padding-left: 22px; padding-right: 22px; }
  .stats, .stats-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats .stat-tile:nth-child(1), .stats-5 .stat-tile:nth-child(1) { grid-column: span 4; }
  .stat-tile.is-static { display: none; }
}

@media (max-width: 900px) {
  .top-title h1 { font-size: 21px; }
  .scope .pill:nth-child(3) { display: none; }
  .tk-head { grid-template-columns: 62px minmax(0, 1fr) 104px; }
  .tk-head span:nth-child(3) { display: none; }
  .tk-head span:nth-child(5) { display: none; }
  .tk-row { grid-template-columns: 62px minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .tk-thumb { width: 62px; height: 62px; grid-row: span 2; }
  .tk-main  { grid-row: span 2; }
  .tk-row .prio,
  .tk-row .status { grid-column: 3; justify-self: end; }
  .tk-act { display: none; }
}

/* Phones: the rail becomes a tab bar and the page is allowed to scroll. */
@media (max-width: 760px) {
  body.app-open { overflow: auto; }

  .app { display: block; height: auto; min-height: 100dvh; }

  .rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    border-right: 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .rail-panel { flex-direction: row; height: auto; padding: 6px 8px; }
  .rail-brand, .rail-foot { display: none; }
  .rail-nav { display: flex; flex: 1; gap: 0; }
  .rail-link {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 5px 2px 3px;
    border-radius: 10px;
    font-size: 10px;
    letter-spacing: -.004em;
    text-align: center;
    box-shadow: none !important;
    background: transparent !important;
  }
  .rail-link .rail-label { display: block; }
  .rail-link.is-active { color: var(--blue); font-weight: 500; }
  .rail-link.is-active .circle { color: var(--blue); }
  .rail-cta { display: flex; }
  .rail-cta .circle {
    width: 34px;
    height: 34px;
    background: var(--blue);
    color: #fff;
  }
  .rail-cta .circle svg { width: 20px; height: 20px; }

  .page { overflow: visible; min-height: 0; }

  .top {
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  .top-mark { display: block; }
  .top-title { flex-direction: column; align-items: flex-start; gap: 1px; }
  .top-title h1 { font-size: 17px; }
  .scope .pill { height: 22px; padding: 0 9px; font-size: 11px; }
  .scope .pill svg { width: 11px; height: 11px; }
  .who-name, .who-btn .chev { display: none; }
  .who-btn { padding: 0 4px; }

  .overview { padding: 16px 16px 4px; }
  .overview-head { margin-bottom: 9px; }
  .stats, .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stats .stat-tile:nth-child(1), .stats-5 .stat-tile:nth-child(1) { grid-column: auto; }
  .stat-tile { padding: 12px 13px; border-radius: 13px; }
  .stat-sub { display: none; }
  .stat-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .stat-row .num { order: -1; }
  .vbars { margin-bottom: 2px; }
  .num, .stat-value { font-size: 30px; }
  .arc { width: 32px; height: 32px; right: 11px; bottom: 11px; }

  .tk-head { grid-template-columns: 52px minmax(0, 1fr) auto; padding-left: 4px; padding-right: 4px; }
  .tk-row { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 11px 4px; column-gap: 11px; }
  .tk-thumb { width: 52px; height: 52px; }
  .tk-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tk-snippet { display: none; }
  .tk-meta span:last-child { display: none; }

  .board { padding: 0 16px 96px; }
  .board-bar { flex-wrap: wrap; gap: 9px; padding: 14px 0 12px; }
  .cta { display: none; }                  /* the + in the tab bar is the action here */
  .tabs { order: 1; width: 100%; }
  .tab { flex: 1; padding: 6px 4px; }
  .board-tools { order: 2; width: 100%; margin-left: 0; }
  .pill-search { flex: 1; }
  .pill-search input { width: 100%; }

  .tk-list { overflow: visible; }

  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card, .modal-sm, .modal-wide, .modal-xl {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    animation: sheet-up .34s var(--ease);
  }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .modal-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-footer .btn, .modal-footer .soft-btn, .modal-footer .soft-btn-primary { flex: 1; }

  .mail-drawer { width: 100%; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 32px); text-align: center; }
}

/* Short laptops: trim the overview before letting anything scroll */
@media (min-width: 761px) and (max-height: 760px) {
  .overview { padding-top: 14px; }
  .stat-tile { padding: 11px 14px; }
  .num, .stat-value { font-size: 30px; }
  .arc { width: 34px; height: 34px; }
  .board-bar { padding: 14px 0 10px; }
}

/* ==========================================================================
   Views and the super admin's Estate view
   ========================================================================== */

.view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.view[hidden] { display: none; }

.est-filters { display: flex; align-items: center; gap: 6px; }
.est-filters[hidden] { display: none; }
.est-filters .est-dd {
  height: 36px;
  background: var(--w);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .15s var(--ease), background .15s var(--ease);
}
.est-filters .est-dd:hover { box-shadow: inset 0 0 0 1px #b8b8bf; }
.est-filters .est-dd.is-open,
.est-filters .est-dd:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue); }
.est-filters .dd-trigger { padding: 0 12px 0 13px; font-weight: 500; color: var(--ink); }
.est-filters .dd-trigger > svg:first-child { color: var(--ink-3); }
.est-filters .dd-trigger:focus-visible { outline: none; }
.est-filters .dd-menu { right: auto; left: 0; min-width: 100%; max-height: 280px; overflow-y: auto; transform-origin: top left; }

.view-estate { gap: 14px; padding: 20px 32px 22px; }

/* Four numbers across the top; the lead one is wider */
.est-kpis {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr));
  gap: 12px;
  flex: none;
}
.est-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: var(--g);
}
.est-k { font-size: 13px; font-weight: 500; letter-spacing: -.008em; color: var(--ink-2); }
.est-v {
  font-size: 38px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
}
.est-v small { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }
.est-s {
  font-size: 12px;
  letter-spacing: -.004em;
  color: var(--ink-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.est-bar { height: 4px; margin: 3px 0 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.est-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--st-closed); transition: width .7s var(--ease); }

/* Panels */
.est-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.est-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  background: var(--w);
}
.est-trend { grid-column: 1; grid-row: 1; }
.est-zones { grid-column: 1; grid-row: 2; }
.est-sites { grid-column: 2; grid-row: 1 / span 2; }

.est-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex: none;
  margin-bottom: 12px;
}
.est-panel-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -.016em; }

.est-legend { display: flex; gap: 12px; font-size: 12px; letter-spacing: -.004em; color: var(--ink-3); }
.est-legend span { display: inline-flex; align-items: center; gap: 5px; }
.est-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.est-legend .is-rep::before    { background: var(--line); }
.est-legend .is-res::before,
.est-legend .is-closed::before { background: var(--st-closed); }
.est-legend .is-review::before { background: var(--st-review); }
.est-legend .is-open::before   { background: var(--st-open); }

/* Month-by-month bars */
.est-chart { position: relative; flex: 1; min-height: 120px; }
.est-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.est-chart .c-grid  { stroke: var(--line-2); stroke-width: 1; }
.est-chart .c-axis  { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.est-chart .c-month { font-size: 11px; fill: var(--ink-3); text-anchor: middle; }
.est-chart .c-rep   { fill: var(--line); }
.est-chart .c-res   { fill: var(--st-closed); }
.est-chart .c-group { transition: opacity .25s var(--ease); }
.est-chart .c-group.is-dim { opacity: .32; }
.est-chart .c-group.is-now .c-month { fill: var(--ink); font-weight: 600; }

/* Zones: one stacked bar each — closed, under review, open */
.est-zone-list { display: flex; flex-direction: column; }
.est-zone {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  transition: background .14s var(--ease);
}
.est-zone:hover { background: var(--g); }
.est-zone.is-active { background: var(--g); box-shadow: inset 0 0 0 1px var(--line); }
.est-zone-name { font-size: 14px; font-weight: 500; letter-spacing: -.012em; }
.est-zone-name small { display: block; font-size: 12px; font-weight: 400; letter-spacing: -.004em; color: var(--ink-3); }
.est-stack { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--g2); }
.est-stack i { display: block; height: 100%; transition: flex-basis .6s var(--ease); }
.est-stack .is-closed { background: var(--st-closed); }
.est-stack .is-review { background: var(--st-review); }
.est-stack .is-open   { background: var(--st-open); }
.est-zone-rate { font-size: 15px; font-weight: 600; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; }
.est-zone-rate small { font-size: 11px; font-weight: 400; color: var(--ink-3); }

/* Where to look: ranked sites, or the oldest unresolved tickets */
.est-sites .tabs { flex: none; }
.est-site-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.est-site-pick[hidden] { display: none; }
.est-site-pick strong { color: var(--ink); font-weight: 600; }
.est-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--blue); cursor: pointer; }
.est-link:hover { text-decoration: underline; }
.est-row.is-active { background: var(--g); box-shadow: inset 0 0 0 1px var(--line); }
.est-list-head, .est-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  padding-right: 8px;
}
.est-sites[data-mode="attention"] .est-list-head,
.est-sites[data-mode="attention"] .est-row { grid-template-columns: minmax(0, 1fr) 56px 76px 52px; }
.est-sites[data-mode="leading"] .est-list-head,
.est-sites[data-mode="leading"] .est-row   { grid-template-columns: 22px minmax(0, 1fr) 66px 66px 52px; }
.est-sites[data-mode="waiting"] .est-list-head,
.est-sites[data-mode="waiting"] .est-row   { grid-template-columns: minmax(0, 1fr) 112px 58px; }

.est-list-head {
  flex: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  letter-spacing: -.004em;
  color: var(--ink-3);
}
.est-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.est-row {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .14s var(--ease);
}
.est-row:hover  { background: var(--g); }
.est-row:active { background: var(--g2); }
.est-row-main { min-width: 0; }
.est-row-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.012em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.est-row-sub {
  font-size: 12px;
  letter-spacing: -.004em;
  color: var(--ink-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.est-num { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.est-num.is-strong { font-weight: 600; }
.est-num.is-late { color: var(--red); font-weight: 500; }
.est-all-btn { margin-left: auto; }
.est-all-btn.is-active { background: var(--blue-t); color: var(--blue); }
.est-rank { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.est-row .status { justify-self: start; }
.est-empty { padding: 48px 16px; text-align: center; font-size: 14px; color: var(--ink-3); }

@media (max-width: 1180px) {
  .view-estate { padding-left: 22px; padding-right: 22px; }
  .est-zone { grid-template-columns: 88px minmax(0, 1fr) 44px; gap: 10px; }
}

@media (min-width: 761px) and (max-height: 760px) {
  .view-estate { padding-top: 14px; gap: 12px; }
  .est-kpi { padding: 11px 14px; }
  .est-v { font-size: 30px; }
  .est-zone { padding-top: 5px; padding-bottom: 5px; }
}

/* Phones: the list you act on comes first; everything else is compacted */
@media (max-width: 760px) {
  .view-estate { gap: 12px; padding: 12px 16px 96px; }
  .est-filters { flex-wrap: nowrap; gap: 4px; }
  .est-filters .est-dd { height: 28px; }
  .est-filters .dd-trigger { padding: 0 9px; gap: 5px; font-size: 12px; }
  .est-filters .dd-trigger > svg:first-child { display: none; }
  .est-filters .dd-trigger .chev { width: 11px; height: 11px; }
  .est-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .est-kpi { padding: 11px 13px; border-radius: 13px; gap: 2px; }
  .est-kpi:not(.is-lead) .est-s { display: none; }
  .est-v { font-size: 28px; }
  .est-grid { display: flex; flex-direction: column; gap: 12px; }
  .est-sites { order: 1; }
  .est-zones { order: 2; }
  .est-trend { order: 3; }
  .est-panel { padding: 14px; }
  .est-panel-head { margin-bottom: 8px; }
  .est-chart { flex: none; height: 124px; min-height: 0; }
  .est-zone { padding-top: 5px; padding-bottom: 5px; }
  .est-zone-name small { display: none; }
  .est-sites .tabs { width: 100%; }
  .est-sites .tab { flex: 1; padding: 6px 4px; }
  .est-list { overflow: visible; }
  .est-zone { grid-template-columns: 84px minmax(0, 1fr) 42px; }
  .est-sites[data-mode="attention"] .est-list-head,
  .est-sites[data-mode="attention"] .est-row { grid-template-columns: minmax(0, 1fr) 44px 60px 44px; gap: 8px; }
  .est-sites[data-mode="leading"] .est-list-head,
  .est-sites[data-mode="leading"] .est-row   { grid-template-columns: 18px minmax(0, 1fr) 52px 44px; gap: 8px; }
  .est-sites[data-mode="leading"] .est-list-head > :nth-child(3),
  .est-sites[data-mode="leading"] .est-row > :nth-child(3) { display: none; }
  .est-sites[data-mode="waiting"] .est-list-head,
  .est-sites[data-mode="waiting"] .est-row   { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; }
}

/* ==========================================================================
   Carried over from main: escalation settings, uploads modal, live pill,
   email recipients, dev sign-in. They were written against main's --sg-*
   tokens; these aliases map them onto this file's palette.
   ========================================================================== */
:root {
  --sg-muted:        var(--ink-2);
  --sg-ink-soft:     var(--ink-2);
  --sg-ground:       var(--g);
  --sg-widget:       var(--g);
  --sg-apricot:      var(--g2);
  --sg-hairline:     var(--line-2);
  --sg-hair:         var(--line-2);
  --sg-border:       var(--line);
  --sg-hair-strong:  var(--line);
  --sg-glass-strong: var(--w);
  --sg-glass-edge:   var(--line-2);
  --sg-r-pill:       var(--r-cap);
  --sg-r-card:       var(--r-card);
  --sg-ease:         var(--ease);
  --st-closed-wash:  rgba(0, 128, 9, 0.10);
  --pr-high:         var(--red);
  --pr-high-wash:    var(--red-t);
}

/* Super Admin static Live status pill */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  background: #141416;
  border: 1px solid #141416;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--sg-r-pill);
  user-select: none;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.25);
  animation: pulse-live 2s infinite;
}

@keyframes pulse-live {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* Badges */
.dash-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--sg-r-pill);
  letter-spacing: 0.01em;
}

.dash-badge.is-neutral {
  background: var(--sg-hair);
  color: var(--sg-ink-soft);
}

.dash-badge.is-warn {
  background: var(--pr-high-wash);
  color: var(--pr-high);
}

.dash-badge.is-healthy {
  background: var(--st-closed-wash);
  color: var(--st-closed);
}

/* Escalation Settings Form */
.dash-settings-form { display: flex; flex-direction: column; gap: 10px; }

.dash-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }

.dash-settings-input { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sg-muted); flex: none; }

.dash-settings-input input {
  width: 58px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--sg-widget);
  color: var(--sg-ink);
  text-align: center;
  font-size: 13px;
}

.dash-settings-toggle input { width: 16px; height: 16px; }

/* Mail schedule rows: label left, uniform controls right */
.mail-sched-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2, rgba(0, 0, 0, 0.08));
}
.mail-sched-row:last-child { border-bottom: 0; }
.mail-sched-label { display: flex; flex-direction: column; gap: 2px; }
.mail-sched-label strong { font-size: 14px; font-weight: 600; color: var(--sg-ink); }
.mail-sched-label span { font-size: 12.5px; color: var(--sg-muted); }
.mail-sched-controls { display: flex; flex-direction: column; gap: 8px; }
.mail-sched-controls [hidden], #mail-schedule-form[hidden], #mail-test-panel[hidden] { display: none !important; }
.mail-sched-controls .mail-ctl {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2, rgba(0, 0, 0, 0.14));
  border-radius: 10px;
  background-color: #fff;
  color: var(--sg-ink);
  font: inherit;
  font-size: 14px;
  box-shadow: none;
}
.mail-sched-controls select.mail-ctl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.mail-sched-controls .mail-ctl:hover { border-color: rgba(0, 0, 0, 0.3); }
.mail-sched-controls .mail-ctl:focus { outline: none; border-color: #0a63e8; box-shadow: 0 0 0 3px rgba(10, 99, 232, 0.15); }
.mail-days-wrap { display: flex; align-items: center; gap: 8px; }
.mail-time-wrap { display: grid; grid-template-columns: 1fr auto 1fr 96px; align-items: center; gap: 8px; }
.mail-time-sep { color: var(--sg-muted); font-weight: 600; }
.mail-time-wrap select.mail-ctl { padding-left: 12px; padding-right: 30px; background-position: right 10px center; }
.mail-days-wrap .mail-ctl { flex: 1; min-width: 0; }
.mail-days-wrap em { font-style: normal; font-size: 13px; color: var(--sg-muted); }

.dash-settings-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.dash-settings-meta { font-size: 11px; color: var(--sg-muted); }

/* --------------------------------------------------------------------------
   Dropdown Manager & Template Downloads UI
   -------------------------------------------------------------------------- */
.segmented-tabs {
  display: flex;
  background: rgb(20 20 20 / 6%);
  padding: 4px;
  border-radius: var(--sg-r-pill);
  gap: 4px;
}

.segmented-tab {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: var(--sg-r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-muted);
  cursor: pointer;
  transition: all 180ms var(--sg-ease);
  text-align: center;
}

.segmented-tab:hover {
  color: var(--sg-ink);
}

.segmented-tab.is-active {
  background: #fff;
  color: var(--sg-ink);
  box-shadow: 0 2px 8px rgb(20 20 20 / 8%);
}

/* My Tickets filter row: All / Open / Under Review / Closed must stay on one
   line even at "Under Review"'s length, so this row runs a touch smaller/tighter. */
.dash-emp-filters .segmented-tab {
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.template-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgb(255 255 255 / 65%);
  border: 1px solid var(--sg-hair-strong);
}

.template-download-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.template-download-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sg-ink);
}

.template-download-desc {
  font-size: 12px;
  color: var(--sg-muted);
  line-height: 1.35;
}

.template-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.btn-template {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 1px solid var(--sg-hair-strong);
  background: #fff;
  color: var(--sg-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--sg-r-pill);
  cursor: pointer;
  transition: all 160ms var(--sg-ease);
  white-space: nowrap;
}

.btn-template svg {
  width: 14px;
  height: 14px;
  color: var(--st-open);
}

.btn-template:hover {
  border-color: var(--sg-ink);
  background: var(--sg-ink);
  color: #fff;
}

.btn-template:hover svg {
  color: #fff;
}

@media (max-width: 600px) {
  .template-download-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .template-actions {
    width: 100%;
  }

  .btn-template {
    flex: 1;
    justify-content: center;
  }

}

.mail-recipients-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--sg-r-pill); background: rgba(0, 0, 0, 0.06); color: var(--sg-ink); font-size: 11.5px; font-weight: 500; }

/* Modal Recipient Switcher */
.email-recipients-bar { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: #f8f9fa; border-bottom: 1px solid var(--sg-glass-edge); overflow-x: auto; }

.email-recipients-label { font-size: 11px; font-weight: 600; color: var(--sg-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.6px; }

.recipient-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--sg-r-pill); border: 1px solid rgb(0 0 0 / 10%); background: #ffffff; color: var(--sg-ink); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 160ms var(--sg-ease); }

.recipient-tab:hover { background: #f2f3f5; }

.recipient-tab.is-active { background: var(--sg-ink); color: #ffffff; border-color: var(--sg-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }

.recipient-tab-role { font-size: 10.5px; opacity: 0.8; background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 10px; }

.recipient-tab.is-active .recipient-tab-role { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* ==========================================================================
   Carried over from main: the Dashboard landing page (employees and site
   officers). Extra token aliases it needs, on top of the block above.
   ========================================================================== */
:root {
  --sg-glass:        var(--w);
  --sg-blur:         none;
  --sg-shadow-float: var(--shadow-lift);
  --st-open-wash:    var(--blue-t);
  --st-review-wash:  rgba(178, 80, 0, 0.12);
  --pr-medium:       var(--st-review);
  --pr-low:          var(--st-closed);
}

@keyframes pulse-live {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* --------------------------------------------------------------------------
   Dashboard — Site Admin / Super Admin landing page, separate from Tickets
   -------------------------------------------------------------------------- */
.dash {
  flex: 1;
  min-height: 0;
  overflow-y: auto;   /* the shell never scrolls, so the dashboard scrolls itself */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px 20px;
}

/* Compact panel modifier: used for Recent Activity so it reads as a lightweight pulse strip, not a primary module */
.dash-panel-compact {
  padding-top: 12px;
  padding-bottom: 12px;
  flex: none;
  align-self: start;
}

.dash-panel-compact .dash-panel-title {
  font-size: 13px;
}

.dash-panel-compact .dash-pulse-row {
  padding: 6px 9px;
  font-size: 11.5px;
}

.dash-panel-compact .dash-pulse-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Employee grid: Recent Activity should match the height of the My Tickets
   card beside it (75/25 split), not sit short with empty space below it. */
.dash-modules-grid.is-employee-grid .dash-panel-compact {
  align-self: stretch;
  flex: 1;
}

.dash-modules-grid.is-employee-grid .dash-panel-compact .dash-pulse-list {
  max-height: none;
  overflow-y: visible;
}

/* Row 1: Executive KPI & Health Strip — always visible, never scrolls */
.dash-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: 14px;
  flex-shrink: 0;
}

/* Employee dashboard: Quick Action should be the same width as Recent
   Activity in the row below (25%), with the other two cards sharing the rest. */
.dash-summary-row.is-employee-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr);
}

.dash-summary-card {
  background: var(--sg-glass);
  backdrop-filter: var(--sg-blur);
  -webkit-backdrop-filter: var(--sg-blur);
  border-radius: var(--sg-r-card);
  box-shadow: inset 0 0 0 1px var(--sg-glass-edge), var(--sg-shadow-float);
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  transition: transform 180ms var(--sg-ease), box-shadow 180ms var(--sg-ease);
}

.dash-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--sg-glass-edge), 0 28px 70px -30px rgb(20 20 20 / 22%);
}

.dash-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-summary-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sg-muted);
  text-transform: uppercase;
}

.dash-summary-stat {
  font-size: 28px;
  font-weight: 700;
  color: var(--sg-ink);
  line-height: 1;
}

.dash-summary-stat small {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sg-muted);
  margin-left: 2px;
}

/* Segmented Status Bar */
.dash-progress-track {
  display: flex;
  height: 14px;
  width: 100%;
  border-radius: var(--sg-r-pill);
  overflow: hidden;
  background: rgb(20 20 20 / 6%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%);
  gap: 2px;
}

.dash-seg {
  height: 100%;
  transition: width 400ms var(--sg-ease);
  border-radius: 4px;
}

.dash-seg.is-open { background: var(--st-open); }

.dash-seg.is-review { background: var(--st-review); }

.dash-seg.is-closed { background: var(--st-closed); }

.dash-status-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.dash-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
}

.dash-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.dash-legend-dot.is-open { background: var(--st-open); box-shadow: 0 0 6px var(--st-open); }

.dash-legend-dot.is-review { background: var(--st-review); box-shadow: 0 0 6px var(--st-review); }

.dash-legend-dot.is-closed { background: var(--st-closed); box-shadow: 0 0 6px var(--st-closed); }

.dash-legend-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--sg-ink);
}

.dash-legend-lbl {
  color: var(--sg-muted);
}

/* Priority & Urgency Bar Chart */
.dash-prio-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  justify-content: center;
}

.dash-prio-row {
  display: grid;
  grid-template-columns: 56px 1fr 26px;
  align-items: center;
  gap: 12px;
}

.dash-prio-meter {
  height: 14px;
  background: rgb(20 20 20 / 6%);
  border-radius: var(--sg-r-pill);
  overflow: hidden;
}

.dash-prio-fill {
  height: 100%;
  border-radius: var(--sg-r-pill);
  transition: width 400ms var(--sg-ease);
}

.dash-prio-row.is-high .dash-prio-fill { background: var(--pr-high); box-shadow: 0 0 8px var(--pr-high); }

.dash-prio-row.is-med .dash-prio-fill { background: var(--pr-medium); }

.dash-prio-row.is-low .dash-prio-fill { background: var(--pr-low); }

.dash-prio-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
  text-align: right;
}

.dash-prio-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sg-muted);
}

.dash-card-footnote {
  font-size: 11.5px;
  color: var(--sg-muted);
}

/* SLA & Operational Health */
.dash-health-metrics {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  padding: 4px 0;
}

.dash-health-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dash-health-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--sg-ink);
  line-height: 1;
}

.dash-health-num small {
  font-size: 14px;
  color: var(--sg-muted);
  margin-left: 2px;
}

.dash-health-lbl {
  font-size: 12px;
  color: var(--sg-muted);
  margin-top: 4px;
}

.dash-health-divider {
  width: 1px;
  height: 38px;
  background: var(--sg-hair-strong);
}

/* Row 2: Summarized Modules Grid */
.dash-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  align-content: stretch;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 4px;
}

.dash-panel {
  background: var(--sg-glass);
  backdrop-filter: var(--sg-blur);
  -webkit-backdrop-filter: var(--sg-blur);
  border-radius: var(--sg-r-card);
  box-shadow: inset 0 0 0 1px var(--sg-glass-edge);
  padding: 16px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.dash-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.dash-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sg-ink);
}

.dash-panel-sub {
  font-size: 12px;
  color: var(--sg-muted);
  margin-top: 2px;
}

/* Escalation Pills */
.dash-esc-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.dash-esc-pill {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 160ms var(--sg-ease), box-shadow 160ms var(--sg-ease);
}

.dash-esc-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgb(20 20 20 / 6%);
}

.dash-esc-pill.is-tier1 {
  background: var(--st-review-wash);
  border: 1px solid rgb(226 166 58 / 20%);
}

.dash-esc-pill.is-tier2 {
  background: var(--pr-high-wash);
  border: 1px solid rgb(229 72 77 / 20%);
}

.dash-esc-pill.is-overdue {
  background: #fef3f2;
  border: 1px solid #fee4e2;
}

.dash-esc-pill.is-overdue:hover {
  box-shadow: 0 2px 6px rgb(217 45 32 / 12%);
}

.dash-esc-pill.is-overdue .dash-esc-pill-num {
  color: #b42318;
}

.dash-esc-pill.is-overdue .dash-esc-pill-lbl {
  color: #b42318;
  font-weight: 600;
}

.dash-esc-pill-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--sg-ink);
}

.dash-esc-pill-lbl {
  font-size: 11px;
  color: var(--sg-muted);
  margin-top: 2px;
}

/* Top Escalation Highlights (compact) */
.dash-esc-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.dash-esc-card {
  padding: 9px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 65%);
  border: 1px solid rgb(20 20 20 / 4%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 150ms var(--sg-ease), transform 150ms var(--sg-ease);
}

.dash-esc-card:hover {
  background: rgb(255 255 255 / 95%);
  transform: translateX(2px);
}

.dash-esc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* Same 3-track template as .dash-summary-row.is-employee-row so column edges
   line up exactly between the two rows; My Tickets spans the first two tracks. */
.dash-modules-grid.is-employee-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr);
}

.dash-modules-grid.is-employee-grid #dash-employee-tickets-panel {
  grid-column: span 2;
}

.dash-modules-grid.is-super-admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Same 3-track template as .dash-summary-row so column edges line up
   exactly between the two rows. */
.dash-modules-grid.is-site-admin-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
}

.dash-modules-grid.is-site-admin-grid .dash-panel-compact {
  align-self: stretch;
  flex: 1;
  max-height: none;
}

.dash-modules-grid.is-site-admin-grid .dash-panel-compact .dash-pulse-list {
  max-height: none;
  overflow-y: visible;
}

/* Canonical 5-Zone Breakdown */
.dash-zone-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.dash-zone-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-zone-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.dash-zone-name {
  font-weight: 600;
  color: var(--sg-ink);
}

.dash-zone-ratio {
  font-size: 11.5px;
  color: var(--sg-muted);
}

.dash-zone-ratio b {
  color: var(--st-open);
  font-weight: 600;
}

.dash-zone-meter {
  height: 6px;
  background: rgb(20 20 20 / 6%);
  border-radius: var(--sg-r-pill);
  overflow: hidden;
  display: flex;
}

.dash-zone-fill {
  height: 100%;
  transition: width 400ms var(--sg-ease);
}

.dash-zone-fill.is-open { background: var(--st-open); }

.dash-zone-fill.is-review { background: var(--st-review); }

.dash-zone-fill.is-closed { background: var(--st-closed); }

.dash-tier-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--sg-r-pill);
}

.dash-tier-badge.is-tier1 { background: var(--st-review-wash); color: var(--st-review); }

.dash-tier-badge.is-tier2 { background: var(--pr-high-wash); color: var(--pr-high); }

.dash-tier-badge.is-open { background: var(--st-open-wash); color: var(--st-open); }

.dash-tier-badge.is-review { background: var(--st-review-wash); color: var(--st-review); }

.dash-tier-badge.is-closed { background: var(--st-closed-wash); color: var(--st-closed); }

.dash-esc-time {
  font-size: 11.5px;
  color: var(--pr-high);
  font-weight: 600;
}

.dash-esc-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-esc-card-sub {
  font-size: 11.5px;
  color: var(--sg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-action-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--sg-hair-strong);
  border-radius: var(--sg-r-pill);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sg-ink);
  cursor: pointer;
  transition: all 160ms var(--sg-ease);
  margin-top: auto;
}

.dash-action-link svg {
  width: 14px;
  height: 14px;
  transition: transform 160ms var(--sg-ease);
}

.dash-action-link:hover {
  background: var(--sg-ink);
  color: #fff;
  border-color: var(--sg-ink);
}

.dash-action-link:hover svg {
  transform: translateX(3px);
}

/* Site Workload Progress Bars */
.dash-site-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}

.dash-site-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-site-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.dash-site-name {
  font-weight: 600;
  color: var(--sg-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

.dash-site-ratio {
  font-size: 11.5px;
  color: var(--sg-muted);
}

.dash-site-ratio b {
  color: var(--st-open);
  font-weight: 600;
}

.dash-site-meter {
  height: 6px;
  background: rgb(20 20 20 / 6%);
  border-radius: var(--sg-r-pill);
  overflow: hidden;
}

.dash-site-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--st-open), #5f9afc);
  border-radius: var(--sg-r-pill);
  transition: width 400ms var(--sg-ease);
}

/* Activity Pulse List */
.dash-pulse-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.dash-pulse-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgb(255 255 255 / 45%);
  font-size: 12px;
  transition: background 150ms var(--sg-ease);
}

.dash-pulse-row:hover {
  background: rgb(255 255 255 / 75%);
}

.dash-pulse-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  flex: none;
}

.dash-pulse-badge.is-created { background: var(--st-open-wash); color: var(--st-open); }

.dash-pulse-badge.is-escalated { background: var(--pr-high-wash); color: var(--pr-high); }

.dash-pulse-badge.is-closed { background: var(--st-closed-wash); color: var(--st-closed); }

.dash-pulse-badge.is-review { background: var(--st-review-wash); color: var(--st-review); }

.dash-pulse-main {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  gap: 6px;
}

.dash-pulse-ticket {
  font-weight: 600;
  color: var(--sg-ink);
  flex: none;
}

.dash-pulse-msg {
  color: var(--sg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-pulse-time {
  font-size: 11px;
  color: var(--sg-faint);
  flex: none;
}

.dash-empty-compact {
  font-size: 12.5px;
  color: var(--sg-muted);
  padding: 16px 8px;
  text-align: center;
  background: rgb(255 255 255 / 35%);
  border-radius: 12px;
}

/* Activity Pulse List */
.dash-panel-compact {
  max-height: 250px;
}

.dash-panel-compact .dash-pulse-list {
  max-height: 185px;
  overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 1080px) {
  .dash-summary-row { grid-template-columns: 1fr; }

  .dash-modules-grid,
  .dash-modules-grid.is-employee-grid,
  .dash-modules-grid.is-super-admin-grid,
  .dash-modules-grid.is-site-admin-grid { grid-template-columns: 1fr; }

  .dash-esc-pills { grid-template-columns: 1fr; }

}

@media (min-width: 1081px) and (max-width: 1320px) {
  .dash-modules-grid,
  .dash-modules-grid.is-site-admin-grid { grid-template-columns: 1fr 1fr; }

}

/* My Tickets filter row: All / Open / Under Review / Closed must stay on one
   line even at "Under Review"'s length, so this row runs a touch smaller/tighter. */
.dash-emp-filters .segmented-tab {
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.dt-wrap-compact { flex: 1; min-height: 0; max-height: none; overflow-y: hidden; }

.dt-compact { border-spacing: 0 4px; }

.dt-compact th { padding: 0 12px 4px; font-size: 11.5px; }

.dt-compact td { padding: 7px 12px; font-size: 15px; }


/* Report-an-issue modal: fit without scrolling */
.modal-compact { max-height: 96dvh; }
.modal-compact .modal-header { padding: 16px 22px 12px; }
.modal-compact .modal-body { gap: 12px; padding: 14px 22px; overflow-y: auto; }
.modal-compact .modal-footer { padding: 10px 22px; }
.modal-compact .field { gap: 5px; }
.modal-compact .field-grid { gap: 12px; }
.modal-compact .meta-cell { padding: 8px 12px; }
.modal-compact .textarea { min-height: 64px; height: 64px; }
.photo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drop.drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--line); border-style: solid;
  border-radius: 999px; background: var(--w); cursor: pointer; flex: none;
}
.modal-compact .drop-preview { padding: 6px 10px; }
.modal-compact .drop-preview img { width: 36px; height: 36px; }
@media (max-width: 640px) { .modal-compact .field-grid { grid-template-columns: 1fr 1fr; } }


/* --------------------------------------------------------------------------
   Collapsible sidebar, and sections that open as full pages
   -------------------------------------------------------------------------- */

.rail-foot { display: grid; gap: 2px; }

/* Sidebar: a slim icon strip that opens over the page while the pointer is on it */
@media (min-width: 761px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .rail { position: relative; z-index: 60; }
  .rail::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 10px; }
  .rail-panel {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 76px;
    padding: 18px 10px 14px;
    align-items: center;
    overflow: hidden;
    background: var(--g);
    border-right: 1px solid var(--line);
    transition: width .2s var(--ease), padding .2s var(--ease), box-shadow .2s var(--ease);
  }
  .rail-label { display: none; white-space: nowrap; }
  .rail-brand { padding: 4px 0 22px; }
  .rail-nav, .rail-foot { width: 100%; }
  .rail-link { justify-content: center; padding: 10px 0; }

  /* Opens for a keyboard always, and on hover only with a real pointer: on a
     touch tablet a tap leaves :hover stuck and the panel would cover the page. */
  .rail:has(:focus-visible) .rail-panel {
    width: 240px;
    padding: 18px 12px 14px;
    align-items: stretch;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .10);
  }
  .rail:has(:focus-visible) .rail-label { display: block; }
  .rail:has(:focus-visible) .rail-brand { padding: 4px 10px 22px; }
  .rail:has(:focus-visible) .rail-link { justify-content: flex-start; padding: 8px 10px; }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .rail:hover .rail-panel {
    width: 240px;
    padding: 18px 12px 14px;
    align-items: stretch;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .10);
  }
  .rail:hover .rail-label { display: block; }
  .rail:hover .rail-brand { padding: 4px 10px 22px; }
  .rail:hover .rail-link { justify-content: flex-start; padding: 8px 10px; }
}

.modal-overlay.modal-page {
  position: static;
  z-index: auto;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: flex-start;
  justify-content: flex-start;
  animation: none;
}
.modal-overlay.modal-page.is-open { display: flex; padding: 20px 28px 28px; animation: none; }
.modal-page .modal-card {
  width: 100%;
  max-width: 1100px;
  max-height: none;
  box-shadow: none;
  border: 1px solid var(--line);
  animation: none;
}
.modal-page .modal-header .circle-btn { display: none; }
.modal-page .modal-footer .btn:not(.btn-ink) { display: none; }
.modal-page .modal-footer:not(:has(.btn-ink)) { display: none; }
@media (max-width: 760px) {
  .modal-overlay.modal-page.is-open { padding: 12px 12px 88px; }
}

/* Zone tickets: small status cards + dashboard site filter (site admin) */
.zt-cards { display: flex; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.zt-card {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: 12px;
  background: var(--g); text-align: left;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.zt-card:hover { background: var(--g2); }
.zt-num { font-size: 20px; font-weight: 700; line-height: 1; }
.zt-lbl { font-size: 12px; color: var(--sg-muted); }
.zt-card.is-open .zt-num { color: var(--st-open); }
.zt-card.is-review .zt-num { color: var(--st-review); }
.zt-card.is-closed .zt-num { color: var(--st-closed); }
.zt-card.is-open.is-active { background: var(--st-open-wash); box-shadow: inset 0 0 0 1.5px var(--st-open); }
.zt-card.is-review.is-active { background: var(--st-review-wash); box-shadow: inset 0 0 0 1.5px var(--st-review); }
.zt-card.is-closed.is-active { background: var(--st-closed-wash); box-shadow: inset 0 0 0 1.5px var(--st-closed); }
.dash-site-filter { display: flex; justify-content: flex-end; margin: 0 0 12px; }
@media (max-width: 640px) {
  .zt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zt-card { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Site filter dropdown: searchable, scrollable list */
/* Fixed label widths so the filter bar doesn't jiggle when the selection changes */
#priority-filter-pill .dd-label { display: inline-block; min-width: 92px; text-align: left; }
#date-sort-pill .dd-label { display: inline-block; min-width: 92px; text-align: left; }
.dd-site .dd-trigger .dd-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-menu-site { right: auto; left: 0; width: 260px; padding: 0; transform-origin: top left; overflow: hidden; }
.dd-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.dd-search svg { width: 14px; height: 14px; flex: none; }
.dd-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--ink); }
.dd-list { list-style: none; margin: 0; padding: 5px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dd-list li { white-space: normal; }
.dd-list li.dd-empty { color: var(--ink-3); cursor: default; justify-content: center; }
.dd-list li.dd-empty:hover { background: transparent; }

/* Auto-enhanced <select> (selects.js): native select stays as hidden source of truth */
.cdd-native { position: absolute !important; left: 0; top: 0; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.cdd-trigger { cursor: pointer; text-align: left; display: flex; align-items: center; min-width: 0; }
.cdd-trigger.select { font: inherit; font-size: 15px; color: var(--ink); }
.dt .cdd-trigger.select { padding: 6px 30px 6px 10px; font-size: 13px; border-radius: 9px; background-position: right 9px center; min-width: 170px; }
.cdd-trigger.select:disabled { opacity: .55; cursor: not-allowed; }
.cdd-trigger.select.is-open { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-t); }
.cdd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdd-label.is-placeholder { color: var(--ink-3); }
.cdd-trigger.cdd-plain { border: 0; background: transparent; padding: 0; font-size: 13px; letter-spacing: -.008em; max-width: 150px; outline: none; height: 100%; }
.cdd-trigger.cdd-plain.is-open ~ .chev, .pill-select:has(.cdd-trigger.is-open) .chev { transform: rotate(180deg); }
.cdd-menu { position: fixed; right: auto; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; transform-origin: top left; }
.cdd-menu li span { white-space: normal; }
.cdd-menu li[hidden] { display: none; }
.pill[hidden] { display: none; }

#hc-sync-area[hidden],
#upload-form-area[hidden] {
  display: none !important;
}

#mail-test-to {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--sg-ink);
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px;
}
#mail-test-to:focus { outline: none; border-color: #0a63e8; box-shadow: 0 0 0 3px rgba(10, 99, 232, 0.15); }
.mail-test-group { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }