/**
 * AtithiVani Butler — the floor staff's app. The one stylesheet (the page's CSP allows no inline style).
 *
 * Drawn on the AtithiVani design system, Sondhya colourway, and nothing else: the nine brand colours
 * (page #FDF4EE, card #FFFFFF, wash #FFE4D5, sky #FFD9C4, ridge far #FF9B78, ridge near #F2603F,
 * accent #C0492B, plum #4A2340, ink #2A1226), Accent as the only action colour, the two ridges as
 * artwork only, the gold hairline (#C9A86A, never text), two shadows, the house curve. Night is the
 * brand's own: ink and plum surfaces, page-coloured text, light coral as the action with dark ink on
 * it — never a grey inversion. It follows the phone (`prefers-color-scheme`); there is no toggle.
 *
 * Built for a room attendant's phone in a corridor: 360px wide, the system text size turned up,
 * bright sun or a dark store room. So the rules from the council hold: the room number is the
 * largest thing on a task; every control is at least 56px (3.5rem) tall; sizes are in rem so the
 * phone's large-text setting grows the whole app; one primary button at a time; and no state is
 * carried by colour alone — the words and icons say it, colour repeats it.
 *
 * Type: Cormorant Garamond (self-hosted) for room numbers and titles — a room number is a door's
 * name, set like the plaque on it; the countdown minutes are data and sit in the system mono. Hindi,
 * Nepali and Bengali use the self-hosted Noto faces the guest app ships, so a Nepali card never
 * depends on what the phone has installed; their `unicode-range` lets Latin fall through.
 */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-600-latin.woff2) format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-700-latin.woff2) format("woff2");
}

@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/noto-sans-devanagari-var.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/noto-sans-bengali-var.woff2) format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED,
    U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}

:root {
  color-scheme: light;

  /* The nine, by name. Nothing below introduces a tenth surface colour. */
  --av-page: #fdf4ee;
  --av-card: #ffffff;
  --av-wash: #ffe4d5;
  --av-sky: #ffd9c4;
  --av-ridge-far: #ff9b78;
  --av-ridge-near: #f2603f;
  --av-accent: #c0492b;
  --av-plum: #4a2340;
  --av-ink: #2a1226;
  --av-gold: #c9a86a;

  /* Roles (Sondhya). Contrast measured on the surfaces they are used on:
     ink/page 16.9 · plum/page 11.6 · ink-muted/page 6.2 · white/accent 4.97 · accent-text/card 5.6 */
  --bg: var(--av-page);
  --surface: var(--av-card);
  --surface-2: #fff8f3; /* page lifted toward card: a pressed/quiet surface, still inside the palette's range */
  --wash: var(--av-wash);
  --ink: var(--av-ink);
  --ink-soft: var(--av-plum);
  --ink-faint: #6e4a62; /* plum at 80% on page — 6.2:1 */
  --line: var(--av-sky);
  --line-strong: #e9bfa9;
  --hairline-gold: rgba(201, 168, 106, 0.35);
  --accent: var(--av-accent);
  --accent-press: #a63d23;
  --accent-ink: #ffffff;
  --accent-text: #a63d23;
  --inverse: var(--av-plum);
  --inverse-deep: var(--av-ink);
  --inverse-ink: var(--av-page);
  --inverse-soft: var(--av-sky);

  /* Signals: a status is colour AND word. */
  --ok: #2e7d5b;
  --ok-ink: #22603f;
  --ok-bg: #e6f3ec;
  --warn: #b8741a;
  --warn-ink: #7a4a08;
  --warn-bg: #fdf0dc;
  --danger: #b42318;
  --danger-ink: #8f1d14;
  --danger-bg: #fde8e4;
  --team-bg: var(--av-wash);
  --team-ink: var(--av-plum);

  --alarm-ink: var(--av-ink);
  --alarm-btn: var(--av-ink);
  --alarm-btn-ink: var(--av-page);
  --focus: var(--av-plum);

  --shadow-sm: 0 1px 2px rgba(42, 18, 38, 0.06), 0 0 0 1px rgba(42, 18, 38, 0.02);
  --shadow-lift: 0 10px 30px -12px rgba(74, 35, 64, 0.28), 0 2px 6px rgba(74, 35, 64, 0.08);
  --radius-sm: 9px;
  --radius-md: 11px;
  --radius: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --tap: 3.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --serif: "Cormorant Garamond", "Noto Serif", Georgia, serif;
  --sans: "Noto Sans Devanagari", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1f0d1b; /* ink, deepened for the night corridor */
    --surface: var(--av-ink);
    --surface-2: #34182f;
    --wash: #3d1c37;
    --ink: var(--av-page);
    --ink-soft: var(--av-sky);
    --ink-faint: #e3b9a6;
    --line: #4a2340;
    --line-strong: #6b3a5f;
    --hairline-gold: rgba(201, 168, 106, 0.28);
    --accent: var(--av-ridge-far); /* light coral, as the Neel night rule: dark ink on it */
    --accent-press: #ff8762;
    --accent-ink: var(--av-ink);
    --accent-text: var(--av-ridge-far);
    --inverse: #3d1c37;
    --inverse-deep: #160812;
    --ok: #6fd3a3;
    --ok-ink: #8fe0b8;
    --ok-bg: #173327;
    --warn: #f0b45a;
    --warn-ink: #f6cc8a;
    --warn-bg: #3a2a12;
    --danger: #ff8a7a;
    --danger-ink: #ffaa9e;
    --danger-bg: #3d1712;
    --team-bg: #3d1c37;
    --team-ink: var(--av-sky);
    --focus: var(--av-sky);
    --shadow-sm: 0 0 0 1px rgba(255, 217, 196, 0.06);
    --shadow-lift: 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Base                                                                                        */
/* ------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  /* Cormorant's default figures are old-style ("2o4"); a room number must read as a door does. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-wrap: break-word;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.app:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.boot {
  padding: 4rem 16px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink-soft);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon-lg {
  width: 2rem;
  height: 2rem;
}

.icon-xl {
  width: 3rem;
  height: 3rem;
  color: var(--accent-text);
}

/* The eyebrow: 11px capitals, wide tracking — every label above a value in the system. */
.room-label,
.desk-note-title,
.brief-eyebrow,
.detail-eyebrow,
.section-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Tracking breaks Indic shaping: spaced-out letters split conjuncts and matras apart. The eyebrows
   keep their size and weight in Hindi, Nepali and Bengali, and lose only the letter-spacing. */
:lang(hi) :is(.room-label, .desk-note-title, .brief-eyebrow, .detail-eyebrow, .section-label, .bar-app, .task-kind),
:lang(ne) :is(.room-label, .desk-note-title, .brief-eyebrow, .detail-eyebrow, .section-label, .bar-app, .task-kind),
:lang(bn) :is(.room-label, .desk-note-title, .brief-eyebrow, .detail-eyebrow, .section-label, .bar-app, .task-kind) {
  letter-spacing: 0;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------------------------------- */
/* Header: the mark, the wordmark, "Signed in: Sunita · On shift · Online"                     */
/* ------------------------------------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--hairline-gold);
  padding: calc(0.625rem + env(safe-area-inset-top)) 16px 0.625rem;
}

.bar-inner {
  max-width: 36rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bar-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* One line at any text size: with the phone's large text on, the wordmark ellipsises before it
   can push the avatar off the bar. */
.bar-word {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-word b {
  font-weight: 700;
}

.bar-word i {
  font-style: normal;
  font-weight: 600;
  color: var(--accent-text);
}

.bar-app {
  margin-left: 0.375rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  vertical-align: 0.2em;
}

.bar-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.375rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.bar-name {
  color: var(--ink);
  font-weight: 700;
}

.bar-sep {
  color: var(--line-strong);
}

.bar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  color: var(--ok-ink);
}

/* The one decorative mark the brand allows: a live dot beside "Online". */
.bar-status[data-conn="online"]::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

.bar-status[data-conn="connecting"] {
  color: var(--ink-faint);
}

.bar-status[data-conn="offline"] {
  color: var(--danger-ink);
}

/* Signal colours (approved 4 Nov) live only in the ring, a thin side rule and the status word —
   never as a fill. The word carries the colour here. */
.bar-status[data-conn="waiting"] {
  color: var(--warn-ink);
}

.bar-avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Before sign-in (enrolment, PIN, a refusal) there is no header: the screen opens under the brand
   lockup instead — the supplied file, placed at 180px (the kit's floor is 120px), never redrawn. */
.bar[hidden] + .app::before {
  content: "";
  display: block;
  width: 11.25rem;
  aspect-ratio: 520 / 132;
  margin: calc(1.5rem + env(safe-area-inset-top)) auto 0;
  background: url(/brand/atithivani-lockup.svg) no-repeat center / contain;
}

@media (prefers-color-scheme: dark) {
  .bar[hidden] + .app::before {
    background-image: url(/brand/atithivani-lockup-dark.svg);
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Screens and buttons                                                                         */
/* ------------------------------------------------------------------------------------------- */

.screen {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.25rem 16px 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Only the toast rises in. A screen or a card never animates in: app.js redraws the whole screen on
   every live change, so an entrance animation would replay — a flicker — each time a task moved. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.title {
  margin: 0;
  font-family: var(--serif), var(--sans);
  font-size: 2.125rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Devanagari and Bengali have no Cormorant: set them in Noto, a touch smaller and heavier. */
:lang(hi) .title,
:lang(ne) .title,
:lang(bn) .title {
  font-family: var(--sans);
  font-size: 1.75rem;
  line-height: 1.3;
}

.title-sm {
  font-size: 1.5rem;
}

.lead {
  margin: 0;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.lead-strong {
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.9375rem;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 120ms var(--ease),
    background-color 120ms var(--ease),
    box-shadow 220ms var(--ease);
}

.btn:active:not(:disabled) {
  transform: scale(0.985);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn-primary:active:not(:disabled) {
  background: var(--accent-press);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-secondary:active:not(:disabled) {
  background: var(--surface-2);
}

/* A disabled button still has to be READ ("Waiting to send"), so it changes shape, not contrast. */
.btn:disabled {
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-soft);
  box-shadow: none;
  cursor: default;
}

.btn-huge {
  min-height: 4.25rem;
  font-size: 1.3125rem;
  border-radius: var(--radius-xl);
}

.back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-left: -0.5rem;
  padding: 0 0.75rem 0 0.25rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--accent-text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.back:active {
  background: var(--wash);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* On a task, the action sits where the thumb is: docked to the bottom of the screen. */
.screen-task .actions {
  position: sticky;
  bottom: 0;
  margin: 0.5rem -16px -2.5rem;
  padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 1.25rem);
}

.screen-task .actions .btn-secondary {
  min-height: 3rem;
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
}

.screen-message {
  align-items: center;
  text-align: center;
  padding-top: 4rem;
}

.screen-message .btn {
  max-width: 20rem;
}

.screen-start {
  padding-top: 1.5rem;
}

.warn-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--wash);
  border-left: 4px solid var(--warn);
  color: var(--warn-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------------------------------- */
/* The dusk band: the brand's two ridges, as artwork, on the plum inverse surface              */
/* ------------------------------------------------------------------------------------------- */

.dusk {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  /* Flat plum: the brand allows two gradients only (ridge far → near, accent → accent-strong). */
  background: var(--inverse);
  color: var(--inverse-ink);
  box-shadow: var(--shadow-lift);
  isolation: isolate;
}

/* Far ridge, then near ridge — the same three-summit silhouette the mark carries, flattened wide. */
.dusk::before,
.dusk::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}

.dusk::before {
  height: 3.75rem;
  background: var(--av-ridge-far);
  opacity: 0.9;
  clip-path: polygon(0 62%, 14% 34%, 27% 52%, 43% 12%, 58% 46%, 71% 30%, 86% 50%, 100% 22%, 100% 100%, 0 100%);
}

.dusk::after {
  height: 2.5rem;
  background: var(--av-ridge-near);
  clip-path: polygon(0 58%, 12% 36%, 25% 54%, 40% 26%, 54% 50%, 68% 38%, 82% 58%, 100% 40%, 100% 100%, 0 100%);
}

/* ------------------------------------------------------------------------------------------- */
/* Shift brief — the top of My tasks                                                            */
/* ------------------------------------------------------------------------------------------- */

.brief {
  padding: 1.25rem 1.25rem 4.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.brief-eyebrow {
  margin: 0;
  color: var(--inverse-soft);
  opacity: 0.85;
}

.brief-hello {
  margin: 0;
  font-family: var(--serif), var(--sans);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
}

:lang(hi) .brief-hello,
:lang(ne) .brief-hello,
:lang(bn) .brief-hello {
  font-family: var(--sans);
  font-size: 1.5rem;
}

.brief-stats {
  display: flex;
  gap: 1.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.brief-stat {
  display: flex;
  flex-direction: column;
}

.brief-num {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.brief-word {
  font-size: 0.875rem;
  color: var(--inverse-soft);
}

.brief-next {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--av-page) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--av-page) 28%, transparent);
  color: var(--inverse-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
}

.brief-next .brief-next-room {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

/* ------------------------------------------------------------------------------------------- */
/* Room number — the largest thing on every task                                               */
/* ------------------------------------------------------------------------------------------- */

.task-room,
.detail-room,
.end-room,
.alarm-room {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.room-label {
  color: var(--accent-text);
}

.room-num {
  font-family: var(--serif);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.task-room .room-num {
  font-size: 3.25rem;
}

.detail-room .room-num {
  font-size: 6rem;
  line-height: 0.9;
}

.end-room .room-num {
  font-size: 2.25rem;
}

/* ------------------------------------------------------------------------------------------- */
/* My tasks                                                                                    */
/* ------------------------------------------------------------------------------------------- */

.list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.section-label {
  margin: 0;
  color: var(--ink-faint);
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task {
  position: relative;
  container-type: inline-size;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Waiting for this person's tap: an accent rule down the left edge, and the word on the card. */
.task[data-state="sent"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.task[data-priority="urgent"]::before,
.task[data-priority="high"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--danger);
}

.task-open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "room body ring";
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 6.5rem;
  padding: 1rem 1rem 1rem 1.25rem;
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
}

.task-open:active {
  background: var(--surface-2);
}

.task-room {
  min-width: 5rem;
  padding-right: 1rem;
  border-right: 1px solid var(--line);
}

.task-open > .task-room {
  grid-area: room;
}

.task-open > .task-body {
  grid-area: body;
}

.task-open > .ring {
  grid-area: ring;
}

/* A long room number, or a narrow card (a small phone with the system text size turned up): the
   words get the full width under the room number instead of being squeezed beside it. */
.task[data-room="long"] .task-open {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "room ring"
    "body body";
  row-gap: 0.625rem;
}

.task[data-room="long"] .task-room {
  border-right: 0;
}

@container (max-width: 19rem) {
  .task-open {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "room ring"
      "body body";
    row-gap: 0.625rem;
  }

  .task-room {
    border-right: 0;
  }
}

.task-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.task-kind {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.task-from {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.task-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

.flag-urgent {
  color: var(--danger-ink);
  background: var(--surface-2);
}

.flag-team {
  color: var(--team-ink);
  background: var(--team-bg);
}

.flag-pending {
  color: var(--warn-ink);
  background: var(--surface-2);
}

.btn-take {
  width: calc(100% - 2rem);
  margin: 0 1rem 1rem;
}

.task-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
}

.task-note::before {
  display: none;
}

.task-note .room-num {
  color: var(--ink-faint);
  font-size: 2.25rem;
}

.task-note .task-item {
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-xl);
}

.empty .icon-xl {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.75rem;
  border-radius: 50%;
  background: var(--wash);
  color: var(--ok-ink);
}

.empty .lead {
  font-family: var(--serif), var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}

.btn-end {
  margin-top: 1.25rem;
}

/* ------------------------------------------------------------------------------------------- */
/* Countdown ring — the minutes are written beside it; colour only repeats them                */
/* ------------------------------------------------------------------------------------------- */

.ring {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.ring-svg {
  width: 3rem;
  height: 3rem;
}

.ring-lg .ring-svg {
  width: 4.5rem;
  height: 4.5rem;
}

.ring-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 5;
}

.ring-arc {
  fill: none;
  stroke: var(--ok);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--ease);
}

.ring[data-level="warn"] .ring-arc {
  stroke: var(--warn);
}

.ring[data-level="late"] .ring-track {
  stroke: var(--danger);
}

.ring-text {
  max-width: 4.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-faint);
}

.ring[data-level="warn"] .ring-text {
  color: var(--warn-ink);
}

.ring[data-level="late"] .ring-text {
  color: var(--danger-ink);
}

/* ------------------------------------------------------------------------------------------- */
/* One task                                                                                    */
/* ------------------------------------------------------------------------------------------- */

.detail-card {
  padding: 1.25rem 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline-gold);
}

.detail-kind {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.detail-item {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.detail-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  color: var(--ink-faint);
  font-size: 0.9375rem;
}

.detail-meta li + li::before {
  content: "·";
  margin-right: 1rem;
  color: var(--line-strong);
}

/* Where the task is: Sent → Got it → (Reached room) → Done. Filled for what happened. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.step::before {
  content: "";
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.step[data-done="true"] {
  color: var(--ink-soft);
}

.step[data-done="true"]::before {
  background: var(--accent);
}

.step[data-now="true"] {
  color: var(--accent-text);
}

.step[data-now="true"]::before {
  background: linear-gradient(90deg, var(--accent) 0 50%, var(--line) 50% 100%);
}

.desk-note {
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--wash);
}

.desk-note-title {
  margin: 0 0 0.25rem;
  color: var(--accent-text);
}

.desk-note p {
  margin: 0;
  font-size: 1.125rem;
  color: var(--ink);
}

.note-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ------------------------------------------------------------------------------------------- */
/* Can't do — five big reason tiles                                                            */
/* ------------------------------------------------------------------------------------------- */

.cant-room {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.cant-room strong {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 2.25rem;
  letter-spacing: 0;
}

.reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 7.5rem;
  padding: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition:
    transform 120ms var(--ease),
    border-color 120ms var(--ease);
}

.reason .icon-lg {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--wash);
  color: var(--accent-text);
}

.reason:active {
  transform: scale(0.98);
  border-color: var(--accent);
}

.reason:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 5rem;
  flex-direction: row;
}

/* ------------------------------------------------------------------------------------------- */
/* End shift                                                                                   */
/* ------------------------------------------------------------------------------------------- */

.end-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.end-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.end-task {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.end-item {
  font-weight: 700;
  font-size: 1.125rem;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.seg {
  min-height: var(--tap);
  padding: 0.5rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-soft);
  cursor: pointer;
}

.seg[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

.seg[aria-pressed="true"]::before {
  content: "✓ ";
}

/* ------------------------------------------------------------------------------------------- */
/* PIN pad                                                                                     */
/* ------------------------------------------------------------------------------------------- */

.screen-pin {
  align-items: stretch;
  text-align: center;
  padding-top: 2rem;
}

.screen-pin .lead {
  color: var(--ink-faint);
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  min-height: 1.5rem;
  margin-top: 0.75rem;
}

.pin-dot {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition:
    background-color 120ms var(--ease),
    transform 120ms var(--ease);
}

.pin-dot-on {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}

.pin-error {
  margin: 0;
  min-height: 1.5em;
  color: var(--danger-ink);
  font-weight: 700;
}

.pin-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 21rem;
  margin: 0 auto;
}

.pin-key {
  min-height: 4.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  font-family: var(--serif);
  font-size: 2.125rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms var(--ease);
}

.pin-key:active:not(:disabled) {
  background: var(--wash);
  transform: scale(0.97);
}

.pin-ok {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 1.25rem;
}

.pin-ok:active:not(:disabled) {
  background: var(--accent-press);
}

.pin-ok:disabled {
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-faint);
  box-shadow: none;
  cursor: default;
}

/* ------------------------------------------------------------------------------------------- */
/* Start shift and enrolment                                                                   */
/* ------------------------------------------------------------------------------------------- */

.start-card {
  padding: 1.5rem 1.25rem 4.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.start-card .title {
  color: var(--inverse-ink);
}

.start-card .lead,
.start-card .lead-strong {
  color: var(--inverse-soft);
}

.screen-start > .btn-huge {
  margin-top: 0.5rem;
}

.screen-start > .hint {
  text-align: center;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.lang {
  min-height: 4.25rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.lang[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: var(--wash);
  color: var(--accent-text);
}

.lang[aria-pressed="true"]::after {
  content: " ✓";
}

.notice {
  margin: 0;
  padding: 1rem 1rem 1rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.notice li::marker {
  color: var(--accent);
}

.path {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  background: var(--wash);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------------------------------------- */
/* The in-app alarm — full screen, one button, the brand's ridge at full strength              */
/* ------------------------------------------------------------------------------------------- */

.alarm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 16px calc(1.5rem + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--av-ridge-far), var(--av-ridge-near));
  color: var(--alarm-ink);
  overflow-y: auto;
}

.alarm-card {
  width: 100%;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.alarm-reason {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.alarm-reason .icon {
  animation: ring-shake 1.6s ease-in-out infinite;
}

.alarm-room .room-label {
  color: inherit;
  font-size: 0.875rem;
}

.alarm-room .room-num {
  color: inherit;
  font-size: 7.5rem;
  line-height: 0.9;
}

.alarm-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.alarm-more {
  margin: 0;
  font-weight: 700;
}

.btn-alarm {
  background: var(--alarm-btn);
  border-color: var(--alarm-btn);
  color: var(--alarm-btn-ink);
  box-shadow: 0 14px 30px -12px rgba(42, 18, 38, 0.6);
}

@keyframes ring-shake {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  10%,
  30%,
  50% {
    transform: rotate(-14deg);
  }
  20%,
  40% {
    transform: rotate(14deg);
  }
}

/* ------------------------------------------------------------------------------------------- */
/* Toast                                                                                       */
/* ------------------------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  background: var(--av-ink);
  color: var(--av-page);
  font-weight: 700;
  box-shadow: var(--shadow-lift);
  animation: rise 220ms var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
  .alarm-reason .icon {
    animation: none;
  }
  .ring-arc,
  .btn,
  .pin-dot,
  .pin-key,
  .reason {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------------------------
 * The legal day and the notice (staff Phase 1). The cap line is calm on purpose: wash, ink, no
 * signal colour — the desk carries any escalation, and the phone never shames.
 * ------------------------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--wash);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.btn-read {
  margin-top: 4px;
}

/* My day (S6): own counts and outcome words. The word carries the signal colour; the row is plain. */
.btn-myday {
  margin-top: 1.25rem;
}
.myday-counts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.myday-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.myday-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "room item" "room word";
  column-gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.myday-room { grid-area: room; display: flex; flex-direction: column; line-height: 1; }
.myday-room .room-num { font-size: 2rem; }
.myday-item { grid-area: item; font-weight: 700; }
.myday-word { grid-area: word; font-weight: 600; color: var(--ink-soft); }
.myday-word[data-outcome="on_time"],
.myday-word[data-outcome="guest_confirmed"] { color: var(--ok-ink); }
.myday-word[data-outcome="late"],
.myday-word[data-outcome="guest_not_done"] { color: var(--warn-ink); }

/* S3 — Done, then proof: two equal-height buttons; Skip is never smaller than the photo. */
.proof-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
.proof-actions .btn {
  min-height: 56px;
}
.myday-check {
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-xl);
}

/* Shared phone: one tile per person — initials, short name, department. Two columns at 390 px. */
.tile-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.tile {
  width: 100%;
  min-height: 112px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.25rem;
  padding: 0.875rem 0.5rem;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.tile:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tile-initials {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--inverse);
  color: var(--inverse-ink);
  font-weight: 700;
}
.tile-name { font-weight: 700; font-size: 1.05rem; }
.tile-dept, .tile-note { font-size: 0.8125rem; color: var(--ink-faint); }
.btn-handon {
  margin-top: 0.75rem;
}

/* AtithiVani support for hotel staff (i18n.js supportLine). */
.staff-support { padding: 0.75rem 1rem 1.25rem; text-align: center; font-size: 0.8125rem; opacity: 0.75; }