/* ════════════════════ RTMES mobile app (Flutter) · design demo ════════════════════
   One stylesheet for every app screen. The app is built in Flutter and also runs on the web.

   Structure of every screen (a normal Flutter Scaffold):
     1. App bar      FIXED at the top, in the module colour. It never scrolls.
     2. Body         the only part that scrolls (no visible scrollbar). Cards on a light canvas.
     3. Bottom bar   FIXED at the bottom (NavigationBar, or the form's main button).

   Scale: COMPACT, like a native app. The whole Home dashboard (reports, visits, Project Visit and
   the top of the map) fits in the first view of a phone without scrolling. Sizes are in logical
   pixels (= Flutter dp): body text 14, small labels 12-12.5, card numbers 20-26, 10px gaps.
   Do not enlarge things to fill space.

   <html data-module="monitoring | evaluation">   colour + module content (the chip in the app bar, rtmes-app.js)
   <html data-preview="phone | tablet | web">     design-review frame only

   Layout follows the WIDTH OF THE APP (container queries), like a Flutter LayoutBuilder:
     below 600px   phone    bottom NavigationBar, one column
     600px +       tablet   NavigationRail on the left
     900px +       web      two columns of cards
     1100px +      web      rail with labels beside the icons */

:root {
  /* Monitoring · sapphire blue (default): rich, calm, pure blue. These are the Flutter ColorScheme roles. */
  --primary: #1f58a8;        --primary-dark: #184686;      /* app bar, buttons, active states / pressed */
  --primary-light: #a0c1ee;                                /* on dark surfaces */
  --container: #e2ebf8;      --on-container: #0e2b57;      /* pastel tiles, chips */
  /* The visits feature card: a light module tint with dark text and white count panels (both modules).
     Monitoring = soft sapphire tint, Evaluation = sky blue. The old dark navy card was too heavy next to the calm sections. */
  --hero: #cfdff5;           --hero-ink: #0e2b57;
  --hero-panel: rgba(255,255,255,.66);  --hero-line: rgba(14,43,87,.12);     --hero-track: rgba(255,255,255,.75);
  --hero-now: var(--primary);           --hero-next: #4f86d0;                --hero-done: var(--good);
  --surface: #f2f5fa;                                      /* page canvas */
  --strip-light: #3574c8;                                  /* light end of the Total Visits gradient (white text 4.7:1) */

  --card: #fff;
  --ink: #0e1726;  --ink-2: #4a5568;                       /* text / supporting text */
  --outline: #c6cedb;  --divider: #e9edf3;

  /* Status colours (only for status) */
  --good:     #14804a; --good-bg:     #dff5e8;
  --average:  #b06f00; --average-bg:  #fff0cf;
  --critical: #c0352f; --critical-bg: #fde4e1;
  --teal:     #0e7c86; --teal-bg:     #d9f1f0;             /* data colour (not a status): "Approved by DG" */
  --refer:    #5a55b8; --refer-bg:    #e8e7f7;             /* "Refer Back" on the Monitoring Report: a calm blue-indigo in the blue family (orange and amber did not fit the app); white text 6:1 */
  --r-xl: 20px;   /* cards */
  --r-lg: 12px;   /* inner tiles, fields, icon tiles */
  --gap: 10px;
  --shadow: 0 3px 14px rgba(22, 40, 80, .07);              /* cards */
  --shadow-up: 0 -4px 18px rgba(22, 40, 80, .08);          /* bottom bar */
  --shadow-lg: 0 24px 60px rgba(5, 18, 38, .28);           /* review frame, snackbar */
}

/* Evaluation · vivid azure blue (same blue family as Monitoring, a lighter sky-leaning hue so the two are easy to tell apart) */
:root[data-module="evaluation"] {
  --primary: #0b74c2;        --primary-dark: #085a99;
  --primary-light: #8fd0ff;
  --container: #dcf0ff;      --on-container: #06304f;
  --hero: #bfe1fb;           --hero-ink: #06304f;
  --hero-panel: rgba(255,255,255,.62);  --hero-line: rgba(6,48,79,.12);      --hero-track: rgba(255,255,255,.75);
  --hero-now: var(--primary);           --hero-next: #3a9ae0;                --hero-done: var(--good);
  --surface: #f1f7fc;
  --strip-light: var(--primary);   /* azure is already as light as white text allows */
}

/* Content that belongs to one module only */
:root[data-module="monitoring"] [data-for="evaluation"],
:root[data-module="evaluation"] [data-for="monitoring"] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; height: 100dvh; display: flex; flex-direction: column; background: #e9edf3; color: var(--ink);
  font: 500 14px/1.4 "Figtree", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
/* Headings and item names on light surfaces use the deep module colour (same as the Start journey title), not black.
   On coloured surfaces (app bar, solid tiles, the visits route) they stay white. */
h2, h3 { color: var(--on-container); }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* ───────── Design-review bar + device frame (not part of the app) ───────── */
.review-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; padding: 6px 12px;
  background: #0f1a2a; color: #fff; font-size: 13px; font-weight: 700;
}
.review-bar .rb-lbl { margin: 0 4px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.review-bar .rb-group { display: flex; align-items: center; gap: 6px; }
.review-bar a { padding: 5px 14px; border-radius: 99px; color: rgba(255,255,255,.82); cursor: pointer; }
.review-bar a:not(.active):hover { background: rgba(255,255,255,.12); color: #fff; }
.review-bar a.active { background: #fff; color: #0f1a2a; cursor: default; }

.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.app { container: app / inline-size; position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: var(--surface); }
[data-preview="phone"] .app, [data-preview="tablet"] .app { border: 8px solid #0f1a2a; box-shadow: var(--shadow-lg); }
[data-preview="phone"] .app  { width: 406px; height: min(860px, 100%); border-radius: 44px; }   /* 390 x 844 screen */
[data-preview="tablet"] .app { width: 836px; max-width: 100%; border-radius: 28px; }
[data-preview="web"] .stage  { padding: 0; }
/* Fake system status bar: phone preview only. In Flutter this is the real status bar (SystemUiOverlayStyle.light). */
.sb { display: none; flex: none; align-items: center; justify-content: space-between; height: 32px; padding: 6px 24px 0; background: var(--primary); color: #fff; font-size: 14px; }
.sb span { display: flex; align-items: center; gap: 6px; }
.sb i { display: block; background: #fff; }
.sb-sig { width: 15px; height: 10px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sb-wifi { width: 13px; height: 10px; border-radius: 13px 13px 0 0; clip-path: polygon(50% 100%, 0 25%, 0 0, 100% 0, 100% 25%); }
.sb-bat { width: 22px; height: 11px; border-radius: 3px; }
[data-preview="phone"] .sb { display: flex; }
@media (max-width: 700px) {   /* opened on a real phone: no frame, the app fills the screen */
  .stage { padding: 0; }
  :root .app { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  :root .sb { display: none; }
  .review-bar .rb-preview { display: none; }
}

/* ───────── App shell · Scaffold (appBar, body, bottomNavigationBar) ───────── */
.shell {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "bar" "body" "act" "nav"; background: var(--surface);
}
.body { grid-area: body; overflow-y: auto; padding: 12px 14px 14px; scrollbar-width: none; }   /* the only scrolling part; no visible scrollbar, as in any mobile app */
.body::-webkit-scrollbar { display: none; }
.body-in { max-width: 1680px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

/* ───────── App bar · AppBar: fixed, module colour, rounded bottom corners ───────── */
.appbar {
  grid-area: bar; position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px 6px;
  background: var(--primary); color: #fff; border-radius: 0 0 18px 18px; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-dark) 32%, transparent);
}
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }   /* CircleAvatar (profile photo) */
.avatar svg { display: block; width: 100%; height: 100%; }
.ab-name { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 700; line-height: 1.2; }   /* never cut with "...": a long name wraps to a second line */
.ab-gap { flex: 1; }
.ab-user { display: none; font-size: 16px; font-weight: 700; line-height: 1.2; }   /* the user's name beside the photo, web only (see 900px +) */
/* Unread count on the bell · Badge. White with dark module text (red is kept for status only); a ring in the app bar colour separates it from the button */
.bell { position: relative; }
.bell .badge { position: absolute; top: -3px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: #fff; color: var(--primary-dark); font-size: 11.5px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--primary); }
.ab-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.ab-tools { display: flex; gap: 6px; }
.icon-btn { flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; }   /* IconButton */
.icon-btn:hover { background: rgba(255,255,255,.28); }
/* YouTube video guide: the real red YouTube mark on a white round button (brand logo, the one place this red appears) */
.yt-btn, .yt-btn:hover { background: #fff; }
.yt-btn svg { width: 24px; height: 17px; }
.yt-btn:hover svg { transform: scale(1.08); }
/* Module chip: shows the current module, a tap switches to the other one · FilledButton.tonal with a trailing icon */
.mod-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 13px; border: 0; border-radius: 99px; background: #fff; color: var(--primary-dark); font-size: 13.5px; font-weight: 700; }
.mod-chip:hover { background: var(--container); }
.mod-chip svg.i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--container); stroke-width: 2.4; }

/* ───────── Dashboard ───────── */
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; min-width: 0; }
.foot { padding: 2px 0 0; text-align: center; font-size: 12px; color: var(--ink-2); }

/* Start journey · the main action of the Monitoring home: Card + InkWell (ListTile size) */
/* Light module tint fading to white, a faint dashed route with a pin behind the text (CustomPaint),
   a solid icon tile and a wide arrow button. Stays one line high (compact scale). */
.journey { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: var(--r-xl); background: linear-gradient(100deg, var(--container) 0%, var(--card) 75%); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); }
.journey > * { position: relative; z-index: 1; }
.journey-path { position: absolute; z-index: 0; right: 62px; top: 50%; width: 92px; height: 40px; transform: translateY(-50%); fill: none; stroke: color-mix(in srgb, var(--primary) 30%, transparent); stroke-width: 2.2; stroke-dasharray: 5 6; stroke-linecap: round; }
.journey-path circle { fill: color-mix(in srgb, var(--primary) 30%, transparent); stroke: none; }
.journey-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 16%, var(--card)); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.journey-ico svg.i { width: 22px; height: 22px; }
.journey-txt { flex: 1; min-width: 0; display: grid; }
.journey-txt b { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--on-container); }
.journey-txt span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.journey-go { flex: none; width: 48px; height: 38px; border-radius: 99px; display: grid; place-items: center; background: var(--primary); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
.journey-go svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.journey:hover .journey-go { background: var(--primary-dark); }

/* Report tiles (two across) · Container + InkWell: one in the module colour, one pastel */
.reports { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
/* Two equal tappable tiles, the simple layout: icon, number and percentage chip on top, the name with a round arrow
   underneath. Colour (chosen 2026-10-19): a WHITE card with only a soft, smooth blue glow (a light module tint fading
   from the top-right corner into white) and a hairline blue edge; blue icon square and arrow; dark number and name.
   Solid colour tiles (blue, navy, indigo + teal, slate, blue + rose) were too dark / too many colours on one page. */
.tile { position: relative; display: grid; gap: 12px; padding: 12px; border-radius: var(--r-xl); min-width: 0;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--primary) 11%, var(--card)) 0%, var(--card) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent), var(--shadow); color: var(--on-container); transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 10px 22px color-mix(in srgb, var(--primary) 14%, transparent); }
.tile:active { transform: scale(.97); }
.tile-top { display: flex; align-items: center; gap: 8px; }
.tile-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--primary); color: #fff; }
.tile-ico svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
.tile .val { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.tile-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tile h3 { font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.tile-go { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; transition: transform .15s; }
.tile-go svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.tile:hover .tile-go { transform: translateX(2px); }
.tile .pct { margin-left: auto; padding: 3px 9px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent); color: var(--on-container); font-size: 12px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .tile, .tile-go { transition: none; } .tile:hover, .tile:active { transform: none; } }

/* Report Status · white card, two stacked parts that each name their period:
   1. Total Visits (overall): a full-width module-colour strip, number on the right.
   2. Last 5 Days: an outlined group box with a List / Chart switch; List = one tappable tinted row per status, Chart = bars.
   Flutter: Card > Column(InkWell strip, Container(border) > Column(Row(title, SegmentedButton), rows or BarChart)). */
.l5 { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.l5-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.l5-head > svg.i { width: 18px; height: 18px; color: var(--primary); }
.l5 h2 { font-size: 16px; font-weight: 700; }
/* Total Visits strip: still a solid colour block, but as a gradient from a lighter blue (left, behind the name) to the dark module colour (right, behind the number).
   --strip-light is the lightest blue that keeps the white 12.5px "Overall" at 4.5:1 or more. */
.l5-total { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: linear-gradient(100deg, var(--strip-light) 0%, var(--primary) 50%, var(--primary-dark) 100%); color: #fff; }
.l5-total::after { content: ""; position: absolute; right: -30px; top: -46px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.12); }
.l5-total > * { position: relative; z-index: 1; }
.l5-total .t-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.l5-total .t-ico svg.i { width: 20px; height: 20px; }
.l5-total .t-txt { flex: 1; display: grid; line-height: 1.2; }
.l5-total strong { font-size: 15px; font-weight: 700; }
.l5-total small { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.l5-total b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.l5-box { display: grid; gap: 8px; padding: 8px; border: 1.5px solid var(--divider); border-radius: 16px; }
.l5-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 4px; }
.l5-span { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: var(--on-container); }
.l5-span svg.i { width: 18px; height: 18px; color: var(--primary); stroke-width: 2.2; }
.l5-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.l5-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px 6px 6px; border-radius: 12px; background: var(--tint); font-size: 14px; font-weight: 600; color: var(--on-container); white-space: nowrap; }
.l5-row:hover { box-shadow: inset 0 0 0 1.5px var(--c); }
.l5-ico { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--c); color: #fff; }
.l5-ico svg.i { width: 16px; height: 16px; stroke-width: 2.3; }
.l5-row b { margin-left: auto; padding-left: 8px; font-size: 19px; font-weight: 800; color: var(--c); }
.l5-row .go { width: 15px; height: 15px; color: var(--c); opacity: .7; }
.l5-done  { --c: var(--good);    --tint: var(--good-bg); }
.l5-sched { --c: var(--primary); --tint: var(--container); }
.l5-dg    { --c: var(--teal);    --tint: var(--teal-bg); }
/* List / Chart switch · SegmentedButton */
.l5-switch { display: flex; padding: 3px; border-radius: 99px; background: var(--surface); }
.l5-switch button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.l5-switch button svg.i { width: 15px; height: 15px; }
.l5-switch button[aria-pressed="true"] { background: var(--primary); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 30%, transparent); }
/* Chart view · one rounded bar per status, count on top, name underneath */
.l5[data-show="list"] .l5-bars, .l5[data-show="chart"] .l5-rows { display: none; }
.l5-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 4px 4px 0; list-style: none; }
.l5-bars a { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; text-align: center; }
.l5-bars b { font-size: 20px; font-weight: 800; line-height: 1; color: var(--c); }
.l5-bars .bar { width: 100%; height: calc(var(--h) * 82px); min-height: 8px; border-radius: 12px; background: linear-gradient(color-mix(in srgb, var(--c) 70%, #fff), var(--c)); }
.l5-bars .lbl { height: 2.5em; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--on-container); }
.l5-bars a:hover .bar { box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 35%, transparent); }

/* Visits · "Bold colour" (chosen 2026-10-16; the Route version was removed): on a white card, three SOLID colour tiles
   (module colour, lighter blue, green) in the app order: Today On-Visit, Upcoming Visit, Completed Visit.
   White text on colour = highest contrast for older users: icon in a translucent rounded square top-left, a big white number
   top-right, the name along the bottom, a soft light circle in the corner like the Total Visits strip.
   Flutter: Card > Row of 3 Expanded Containers (gradient + Stack with a Positioned circle). */
.visits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px; list-style: none; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.vis { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 6px; height: 100%; padding: 10px 8px 11px 9px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 70%); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 28%, transparent); }
.vis::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.14); }
.vis > * { position: relative; z-index: 1; }
.vis-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.vis-ico svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
.vis b { justify-self: end; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.vis span.lbl { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.v-now { --c: var(--hero-now); } .v-next { --c: #3f78c8; } .v-done { --c: var(--hero-done); }
:root[data-module="evaluation"] .v-next { --c: #2b8fd6; }



/* Project Visit · one white card: heading with the total, then one compact row per result.
   Row = status icon tile, name + "Visit projects" link, count, and the share as a chip.
   Flutter: Card > Column of ListTile (dense) with Dividers. */
.pv { padding: 12px 14px 4px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 4px; }
.pv-head h2 { font-size: 16px; font-weight: 700; }
.pv-head .total { min-width: 34px; height: 26px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center; background: var(--container); color: var(--on-container); font-size: 15px; font-weight: 800; }
.pv-rows { margin: 0; padding: 0; list-style: none; }
.pv-rows li + li { border-top: 1px solid var(--divider); }
.pv-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.r-good { --c: var(--good); --tint: var(--good-bg); } .r-avg { --c: var(--average); --tint: var(--average-bg); } .r-crit { --c: var(--critical); --tint: var(--critical-bg); }
.pv-ico { flex: none; width: 36px; height: 36px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--tint); color: var(--c); }
.pv-ico svg.i { width: 22px; height: 22px; stroke-width: 2.2; }
.pv-name { flex: 1; min-width: 0; display: grid; }
.pv-name b { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--on-container); }
.pv-name small { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.pv-name small svg.i { width: 14px; height: 14px; }
.pv-num { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pv-pct { flex: none; min-width: 52px; padding: 3px 8px; border-radius: 99px; background: var(--tint); color: var(--c); font-size: 12.5px; font-weight: 700; text-align: center; }
.pv-row:hover .pv-name b { color: var(--primary); }

/* Map: the map fills the whole card; title and full-screen button float on top · Stack + Positioned */
.mapcard { position: relative; overflow: hidden; height: 150px; border-radius: var(--r-xl); background: var(--container); box-shadow: var(--shadow); }
.map { display: block; width: 100%; height: 100%; }
.map .m-road { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.map .m-river { fill: none; stroke: color-mix(in srgb, var(--primary) 26%, transparent); stroke-width: 14; stroke-linecap: round; }
.map-title { position: absolute; left: 10px; top: 10px; padding: 5px 13px; border-radius: 99px; background: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--shadow); }
.map-btn { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--on-container); color: #fff; }
.map-btn:hover { background: var(--primary); }
.map-btn svg.i { width: 16px; height: 16px; }

/* ───────── Bottom navigation: fixed, a floating rounded bar; the active item is a raised round button.
   Flutter: NavigationBar inside a Container (margin + BorderRadius + BoxShadow); the active icon is a
   CircleAvatar moved up with Transform.translate. ───────── */
.nav { grid-area: nav; position: relative; z-index: 2; display: flex; margin: 0 12px 10px; padding: 9px 4px 8px; border-radius: 24px; background: var(--card); box-shadow: 0 8px 26px rgba(22, 40, 80, .16); }
.nav-brand { display: none; }
.nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nav .ico { width: 44px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.nav a:not(.active):hover .ico { color: var(--primary); }
.nav a.active { color: var(--primary-dark); font-weight: 700; }
.nav a.active .ico { height: 44px; margin: -22px 0 6px; background: var(--primary); color: #fff; box-shadow: 0 0 0 5px var(--surface), 0 10px 18px color-mix(in srgb, var(--primary) 45%, transparent); }   /* raised: half above the bar */
.shell.sub .nav { display: none; }   /* pushed screens hide the bottom bar on phones */
.nav-toggle { display: none; }   /* collapse / expand the web rail: 1100px + only */

/* ───────── Form screen (Remarks) ───────── */
.card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 12px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 2px; }
.card-head h2 { font-size: 16px; font-weight: 700; }
.form { max-width: 720px; }
.fold { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); }   /* ExpansionTile arrow */
.fold:hover { background: var(--container); }
.fold svg.i { width: 18px; height: 18px; transform: rotate(-90deg); }

/* Rich text editor · flutter_quill: toolbar + editor inside one outlined field */
.editor { border: 1px solid var(--outline); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.editor:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* Toolbar: every option is visible at once, no tabs and no hidden menus · QuillSimpleToolbar (multiRowsDisplay).
   Phone: a fixed grid, 7 buttons per row, grouped by row. Tablet and web: the buttons flow in bands with a gap
   between groups, and a group never splits across two lines. */
.ed-tools { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--outline); }
.eg { display: contents; }      /* a group of related buttons: no effect in the phone grid */

/* Toolbar buttons · IconButton (toggle): flat, the active one is filled */
.eb { position: relative; width: 100%; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); }
.eb:hover { background: var(--container); }
.eb[aria-pressed="true"] { background: var(--primary); color: #fff; }
.eb-t { font-size: 14.5px; font-weight: 700; }      /* N, H1, H2, H3, X2 */
.eb-t sub, .eb-t sup { font-size: 9.5px; }
.eb-color svg.i, .eb-mark svg.i { transform: translateY(-3px); }      /* text colour / highlight: glyph + a bar showing the current colour */
.eb-color::after, .eb-mark::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 18px; height: 4px; margin-left: -9px; border-radius: 2px; background: var(--primary); }
.eb-mark::after { background: var(--container); box-shadow: inset 0 0 0 1px var(--primary); }
/* Font and size pickers · DropdownMenu (outlined) */
.eb-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 2px; width: 100%; height: 38px; padding: 0 4px 0 10px; border: 1px solid var(--outline); border-radius: 9px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.eb-select.w3 { grid-column: span 3; } .eb-select.w2 { grid-column: span 2; }
.eb-select:hover { border-color: var(--primary); }
.eb-select svg.i { width: 18px; height: 18px; transform: rotate(90deg); color: var(--ink-2); }

.ed-text { min-height: 170px; padding: 12px 14px; font-size: 15px; line-height: 1.55; outline: none; }
.ed-text p { margin: 0 0 8px; } .ed-text ul, .ed-text ol { margin: 0 0 8px; padding-left: 22px; }

/* Bottom action bar · fixed, with the FilledButton */
.actions { grid-area: act; position: relative; z-index: 2; padding: 10px 14px 12px; border-radius: 18px 18px 0 0; background: var(--card); box-shadow: var(--shadow-up); }
.actions-in { max-width: 720px; margin: 0 auto; display: flex; }
.btn-fill { flex: 1; height: 48px; padding: 0 28px; border: 0; border-radius: 99px; background: var(--primary); color: #fff; font-size: 15.5px; font-weight: 700; }
.btn-fill:hover { background: var(--primary-dark); }

/* ───────── PC(IV) Projects list (Evaluation) ───────── */
.pl-page { padding-bottom: 88px; }      /* room for the floating + button */
/* Search + filter · SearchBar + IconButton.filled, sticky at the top of the list */
.pl-tools { position: sticky; top: -12px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -12px -14px 0; padding: 12px 14px 4px; background: var(--surface); }
.pl-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--outline); color: var(--ink-2); }
.pl-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.pl-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.pl-filter { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--primary); color: #fff; }
.pl-filter:hover { background: var(--primary-dark); }
/* Project card · Card: icon + full title, then one row of actions under a divider */
.pl-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc { padding: 12px 12px 10px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.pc-top { display: flex; align-items: flex-start; gap: 12px; }
.pc-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--container); color: var(--primary); }
.pc h3 { padding-top: 1px; font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.pc-acts { display: flex; align-items: center; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--divider); }
/* Actions · TextButton.icon x2 (View PDFs, Edit) on the left, FilledButton.tonal (Submit PC-IV) on the right.
   Tonal, not solid: a solid dark button repeated on every card felt rushed and pushy. */
.pc-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 99px; color: var(--ink); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pc-btn svg.i { width: 17px; height: 17px; color: var(--primary); }
.pc-btn:hover { background: var(--container); }
.pc-btn.primary { margin-left: auto; padding: 0 16px; background: var(--container); color: var(--on-container); }
.pc-btn.primary:hover { background: color-mix(in srgb, var(--primary) 20%, var(--card)); }
/* Add · FloatingActionButton */
.fab { position: absolute; right: 16px; bottom: 18px; z-index: 5; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--primary); color: #fff; box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 40%, transparent); }
.fab:hover { background: var(--primary-dark); }
.fab svg.i { width: 26px; height: 26px; stroke-width: 2.4; }
@container app (min-width: 900px) { .pl-list { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } }

/* ───────── Monitoring Report (Monitoring): the seven report statuses ─────────
   "Bold colour", like the Visits tiles on Home: SOLID colour tiles with white text (highest contrast), each darkening
   towards the bottom right so white text stays readable; icon in a translucent rounded square top-left, a big white count
   top-right, the name in full along the bottom, a soft light circle in the corner. Two across; Cancel is one full-width row.
   One colour per status: Schedule Visit, Submitted Reports and Issued Reports in the module blues, Complete Visit green and
   Approved by DG teal (as on Home), Refer Back blue-indigo (--refer) and Cancel red (statuses that need attention).
   Flutter: GridView.count(crossAxisCount: 2) of InkWell > Container(LinearGradient) + Stack(Positioned circle), then one full-width tile. */
.mr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mr-wide { grid-column: 1 / -1; }
.mr { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 8px; height: 100%; padding: 12px 12px 13px; border-radius: 18px; background: linear-gradient(150deg, var(--c) 0%, color-mix(in srgb, var(--c) 80%, #000) 100%); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent); transition: transform .15s, box-shadow .15s; }
.mr::after { content: ""; position: absolute; right: -26px; bottom: -34px; width: 86px; height: 86px; border-radius: 50%; background: rgba(255,255,255,.13); }
.mr > * { position: relative; z-index: 1; }
.mr:hover { transform: translateY(-2px); box-shadow: 0 12px 24px color-mix(in srgb, var(--c) 38%, transparent); }
.mr:active { transform: scale(.97); }
.mr-top { display: contents; }
.mr-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.mr-ico svg.i { width: 20px; height: 20px; stroke-width: 2.2; }
.mr b { justify-self: end; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mr-name { grid-column: 1 / -1; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.mr-go { display: none; }
.mr-wide .mr { display: flex; gap: 12px; padding: 12px; }
.mr-wide .mr::after { right: -30px; bottom: -60px; width: 120px; height: 120px; }
.mr-wide .mr-name { flex: 1; font-size: 15px; }
.mr-wide .mr b { font-size: 30px; }
.mr-wide .mr-go { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.mr-wide .mr-go svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.mr-sched  { --c: var(--primary); }
.mr-done   { --c: var(--good); }
.mr-sub    { --c: var(--hero-next); }
.mr-back   { --c: var(--refer); }
.mr-dg     { --c: var(--teal); }
.mr-issued { --c: var(--primary-dark); }
.mr-cancel { --c: var(--critical); }
:root[data-module="monitoring"] .mr-sub { --c: #3f78c8; }   /* same lighter blue as Upcoming Visit on Home */
@container app (min-width: 600px) { .mr { padding: 16px; gap: 22px 8px; } .mr b { font-size: 36px; } .mr-name { font-size: 15.5px; } }
@container app (min-width: 900px) {   /* web: four across, Cancel takes the last two places */
  .mr-grid { max-width: 1180px; width: 100%; margin: 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mr-wide { grid-column: span 2; }
}

/* ───────── PC(IV) Projects (Evaluation): two groups, Self and Assigned ─────────
   Each group is its OWN solid colour card, so the two groups never look alike (one shared look made the two Refer Back
   tiles feel like a duplicate): Self = module colour, Assigned = the app's teal. Header in white on the colour: icon in a
   translucent square, the group name, its total as a translucent chip. The steps are WHITE tiles inside it (Card + InkWell):
   tinted icon square, big count and name in the group's colour. A step takes its group's colour; the icon tells the steps
   apart. Self = In-Process, Submitted, Refer Back (three across); Assigned = Refer Back, Completed (two across).
   Web 900px+: the two cards side by side (3fr / 2fr), so every tile has the same width.
   Rejected: white group cards with a solid colour per step (orange / amber Refer Back did not fit the app colours).
   Flutter: Column of Container(LinearGradient, BorderRadius) > Column(Row header, GridView.count of white InkWell cards). */
.p4-groups { display: grid; gap: 12px; }
.p4g { --g: var(--primary); --g-dark: var(--primary-dark); position: relative; overflow: hidden; padding: 12px; border-radius: var(--r-xl); background: linear-gradient(150deg, var(--g) 0%, var(--g-dark) 100%); box-shadow: 0 10px 22px color-mix(in srgb, var(--g) 28%, transparent); }
.p4g-assigned { --g: var(--teal); --g-dark: color-mix(in srgb, var(--teal) 72%, #000); }
.p4g::after { content: ""; position: absolute; right: -50px; top: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.1); }
.p4g > * { position: relative; z-index: 1; }
.p4g-head { display: flex; align-items: center; gap: 10px; padding: 0 2px 12px; color: #fff; }
.p4g-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.2); color: #fff; }
.p4g-ico svg.i { width: 22px; height: 22px; stroke-width: 2.2; }
.p4g-head h2 { flex: 1; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
/* Group total: a SOLID white pill (stands out on the colour card), big number in the group colour + "Projects" */
.p4g-total { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px 6px; border-radius: 99px; background: var(--card); color: var(--ink-2); font-size: 13px; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, .14); }
.p4g-total b { font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--g-dark); }
.p4g .mr-grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
/* Step tile: the original layout (icon square + count on top, the name along the bottom) with the white tile made
   livelier: white fading to a soft group tint at the bottom-right, a hairline tinted ring; lifts on hover, presses in
   on tap. No arrow (rejected). Flutter: InkWell > Container(LinearGradient, Border). */
.p4g .mr { min-height: 92px; padding: 11px 10px 12px; gap: 14px 6px; border-radius: 16px;
  background: linear-gradient(150deg, var(--card) 45%, color-mix(in srgb, var(--g) 11%, var(--card)) 100%); color: var(--g-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 14%, transparent), 0 4px 10px rgba(0, 0, 0, .12); }
.p4g .mr::after { background: color-mix(in srgb, var(--g) 7%, transparent); }
.p4g .mr:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 30%, transparent), 0 10px 20px rgba(0, 0, 0, .2); }
.p4g .mr:active { transform: scale(.97); }
.p4g .mr-ico { width: 32px; height: 32px; border-radius: 11px; background: color-mix(in srgb, var(--g) 14%, var(--card)); color: var(--g); }
.p4g .mr-ico svg.i { width: 18px; height: 18px; }
.p4g .mr b { font-size: 30px; }
.p4g .mr-name { font-size: 13.5px; color: var(--ink); }
@container app (min-width: 600px) { .p4g { padding: 16px; } .p4g .mr { min-height: 112px; padding: 14px; } .p4g .mr b { font-size: 34px; } .p4g .mr-name { font-size: 15px; } }
@container app (min-width: 900px) {
  .p4-groups { max-width: 1180px; width: 100%; margin: 0 auto; grid-template-columns: 3fr 2fr; align-items: start; }
  .p4g .mr-grid { max-width: none; margin: 0; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}

/* Upload progress · a rounded bar, fill width = --p (0% to 100%). Uploaded = green fill; the part not uploaded stays EMPTY,
   only the bar's outline shows it (a coloured "not uploaded" track was rejected as ugly). A key underneath names both shares.
   Flutter: Container(border, BorderRadius) > FractionallySizedBox(widthFactor) of a green Container. */
.prog { height: 12px; border: 1.5px solid var(--outline); border-radius: 99px; background: var(--card); overflow: hidden; }
.prog i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--good); transition: width .3s; }
.prog-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.prog-key span { display: inline-flex; align-items: center; gap: 6px; }
.prog-key span::before { content: ""; box-sizing: border-box; width: 10px; height: 10px; border-radius: 3px; background: var(--good); }
.prog-key span.off::before { background: var(--card); border: 1.5px solid var(--outline); }
.prog-key b { font-weight: 800; color: var(--good); }
.prog-key .off b { color: var(--ink); }

/* ───────── Completed (Evaluation, Assigned > Completed): one Card per project ─────────
   Each card has a clear start without a coloured band (a blue header band was rejected): a white card with a thin outline
   and the shadow, a SOLID module-colour icon square as the anchor at its top-left, the full title and a round arrow (the whole
   card opens the project); a divider, then the upload bar and its key (Uploaded x% / Not uploaded y%). 14px between cards.
   Flutter: ListView of Card(side: BorderSide) > Column(Row, Divider, bar, Row). */
.pl-list:has(.pd) { gap: 14px; }
/* Several cards per row (web): every card in a row takes the height of the tallest (grid stretch), and the title area
   grows (flex: 1), so the divider and the bar sit on one line across the row. Titles are never cut, no ellipsis.
   Flutter: a Wrap / GridView row inside IntrinsicHeight, or a Row of Expanded cards with CrossAxisAlignment.stretch + Spacer. */
.pd { display: flex; flex-direction: column; height: 100%; padding: 12px; border: 1px solid var(--divider); transition: box-shadow .15s; }
.pd .pc-top { flex: 1; }
.pd:hover { box-shadow: 0 8px 22px rgba(22, 40, 80, .12); }
.pd .pc-ico { background: var(--primary); color: #fff; }
.pd .pc-top h3 { flex: 1; }
.pd-go { flex: none; width: 30px; height: 30px; margin-top: 3px; border-radius: 50%; display: grid; place-items: center; background: var(--container); color: var(--primary); }
.pd-go svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.pd-prog { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--divider); }

/* ───────── Project Documents (Evaluation): overall progress, then the document types ─────────
   1) Progress card: a white card with the project title, "Documents uploaded" and the big green percentage, the upload bar
      (green = uploaded, empty outline = not uploaded) with 0% / 100% under its ends, and a key with the document counts.
      White, not the module colour: a green bar reads poorly on blue.
   2) One white Card per document type (Official Documents, Letters, Other Documents): tinted icon square, the name and what
      is chosen, and a Select / Change / More button that opens the selection sheet. Under it, each chosen document as a row:
      file icon, name, then Upload (FilledButton.tonal) or a green "Uploaded" chip.
   Flutter: Card(gradient) + LinearProgressIndicator; Card > Column(ListTile header, ListTiles). */
.dp { display: grid; gap: var(--gap); }
.dp-sum { padding: 14px 16px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.dp-sum h2 { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.dp-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 12px 0 8px; }
.dp-row span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.dp-row b { font-size: 34px; font-weight: 800; line-height: .9; letter-spacing: -.02em; color: var(--good); }
.dp-sum .prog { height: 12px; }
.dp-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dp-sum .prog-key { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); font-size: 13px; }

.dk { padding: 12px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.dk-head { display: flex; align-items: center; gap: 10px; }
.dk-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--container); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.dk-ico svg.i { width: 21px; height: 21px; }
.dk-name { flex: 1; min-width: 0; }
.dk-name h3 { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.dk-name p { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.dk-pick { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--primary); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }   /* FilledButton: nothing chosen yet */
.dk-pick svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.dk-pick:hover { background: var(--primary-dark); }
.dk.has .dk-pick { background: var(--container); color: var(--on-container); }   /* FilledButton.tonal: change the choice */
.dk.has .dk-pick:hover { background: color-mix(in srgb, var(--primary) 20%, var(--card)); }
.dk-list { margin: 10px 0 0; padding: 0; list-style: none; }
.dk-list:empty { display: none; }
.dk-doc { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0 6px 2px; border-top: 1px solid var(--divider); }
.dk-doc > svg.i { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.dk-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dk-txt b { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
/* Uploaded: the upload date in small grey text under the name (no tick, no chip; the green file icon marks it uploaded) */
.dk-txt small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* View | Replace · two TextButtons split by a thin line. Plain words, no icons; Replace swaps a wrong file. */
.dk-acts { flex: none; display: flex; align-items: center; }
.dk-act { height: 34px; padding: 0 10px; border: 0; border-radius: 99px; background: none; color: var(--primary-dark); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dk-act:hover, .dk-act:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; outline: none; }   /* hover = underline only, no pill */
.dk-act + .dk-act { position: relative; }
.dk-act + .dk-act::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--outline); }
.dk-up { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1.5px solid var(--primary); border-radius: 99px; background: var(--card); color: var(--primary-dark); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }   /* OutlinedButton.icon */
.dk-up svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.dk-up:hover { background: var(--container); }
.dk-doc.is-up > svg.i { color: var(--good); }
/* + Add Document Type: a WHITE card like the others (same shadow) with a dashed border (OutlinedButton-like Card + InkWell; dashed via a CustomPaint border) */
.dk-new { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px; border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); color: var(--on-container); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.dk-new:hover { border-color: var(--primary); }   /* stays white */
.dk-new-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.dk-new-ico svg.i { width: 18px; height: 18px; stroke-width: 2.6; }
@container app (min-width: 600px) { .dk, .dp-sum { padding: 16px 18px; } .dp-row b { font-size: 40px; } }
@container app (min-width: 900px) {
  .dp { max-width: 1180px; width: 100%; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .dp-sum { grid-column: 1 / -1; }
}

/* Selection sheet: which documents of this type to upload · showModalBottomSheet on phones, a side sheet from the
   right on 600px+ (Scaffold.endDrawer). Select all on top (Checkbox with tristate), then one CheckboxListTile per
   document, Cancel and OK at the bottom. Opens over the same scrim as the Profile drawer. */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 82%; display: flex; flex-direction: column; background: var(--card); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); transform: translateY(105%); visibility: hidden; transition: transform .25s, visibility .25s; }
.sheet-open .scrim { opacity: 1; visibility: visible; }
.sheet-open .sheet { transform: none; visibility: visible; }
.sh-grab { flex: none; width: 36px; height: 4px; margin: 10px auto 2px; border-radius: 99px; background: var(--outline); }
.sh-head { flex: none; padding: 8px 18px 10px; }
.sh-head h2 { font-size: 17px; font-weight: 800; }
.sh-head p { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sh-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px; scrollbar-width: none; }
.ck { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 4px 8px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ck:hover { background: var(--surface); }
.ck input { position: absolute; opacity: 0; pointer-events: none; }
.ck .box { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--outline); border-radius: 6px; background: var(--card); color: #fff; }
.ck .box svg.i { width: 15px; height: 15px; stroke-width: 3; opacity: 0; }
.ck input:checked + .box { border-color: var(--primary); background: var(--primary); }
.ck input:checked + .box svg.i { opacity: 1; }
.ck input:indeterminate + .box { border-color: var(--primary); background: var(--primary); }
.ck input:indeterminate + .box svg.i { display: none; }   /* some chosen: a dash instead of the tick */
.ck input:indeterminate + .box::after { content: ""; width: 10px; height: 2.5px; border-radius: 2px; background: #fff; }
.ck input:focus-visible + .box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.ck-all { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); border-radius: 12px 12px 0 0; font-weight: 800; color: var(--on-container); }
.ck[hidden] { display: none; }
/* Search · SearchBar (pill, like the list screens): filters the documents below it */
.sh-search { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 16px 8px; padding: 0 14px; border: 1px solid var(--outline); border-radius: 99px; background: var(--surface); color: var(--ink-2); }
.sh-search:focus-within { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.sh-search svg.i { flex: none; width: 18px; height: 18px; }
.sh-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.sh-none { padding: 14px 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sh-none[hidden] { display: none; }
/* New document type · DropdownButtonFormField (outlined); "Add another document" · TextField + FilledButton.tonal */
.sh-field { flex: none; display: grid; gap: 6px; padding: 4px 18px 16px; font-size: 13px; font-weight: 700; color: var(--on-container); }
.sh-select { position: relative; display: block; }
.sh-select select { width: 100%; height: 48px; padding: 0 40px 0 14px; appearance: none; border: 1.5px solid var(--outline); border-radius: var(--r-lg); background: var(--card); font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); outline: none; cursor: pointer; }
.sh-select svg.i { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; transform: rotate(90deg); color: var(--ink-2); pointer-events: none; }
.sh-select select.err { border-color: var(--critical); }   /* OK pressed with nothing chosen */
.sh-add input { min-width: 0; padding: 0 14px; border: 1.5px solid var(--outline); border-radius: var(--r-lg); background: var(--card); font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); outline: none; }
.sh-select select:focus, .sh-add input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.sh-add { flex: none; display: flex; gap: 8px; padding: 10px 16px 12px; }
.sh-add input { flex: 1; height: 44px; }
.sh-add-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--container); color: var(--on-container); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sh-add-btn svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.sh-add-btn:hover { background: color-mix(in srgb, var(--primary) 20%, var(--card)); }
.sheet[data-mode="new"] .sh-list, .sheet[data-mode="new"] .sh-add, .sheet[data-mode="new"] .sh-search, .sheet[data-mode="pick"] .sh-field { display: none; }
.sh-acts { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--divider); }
.sh-btn { height: 44px; padding: 0 20px; border: 0; border-radius: 99px; background: none; color: var(--primary-dark); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.sh-btn:hover { background: var(--container); }
.sh-btn.primary { min-width: 120px; background: var(--primary); color: #fff; }
.sh-btn.primary:hover { background: var(--primary-dark); }
@container app (min-width: 600px) {
  .sheet { left: auto; top: 0; width: 380px; max-height: none; border-radius: 24px 0 0 24px; transform: translateX(105%); }
  .sh-grab { display: none; }
  .sh-head { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .prog i { transition: none; } }

/* ───────── Scheduled visits list (Monitoring) ─────────
   One Card per visit: head (project icon, the project number as a pill, the title in full), a facts strip with its own
   labels (Start date, End date, District), and a footer of three equal actions (icon in a tinted circle over the label;
   a long label wraps to a second line, never cut). Flutter: Card > Column(ListTile-like Row, Row of 3 Expanded facts,
   Divider, Row of 3 Expanded InkWell buttons). */
.sv-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sv { overflow: hidden; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); }
.sv-head { padding: 10px 14px 4px; }
@keyframes sync-blink { 50% { opacity: .2; transform: scale(.75); } }
.sv h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
/* Facts: three columns straight on the white card, split by thin lines (no grey or tinted box: it looked dull) */
/* Facts on the white card: Start date → End date (a small arrow between the two values reads as "from ... to"),
   then the district as a tinted chip with a pin. Label over value, one left edge. The timeline under the dates was rejected. */
.sv-facts { display: grid; grid-template-columns: auto auto 1fr; align-items: start;   /* the three labels share one line */ gap: 0 10px; margin: 0; padding: 8px 14px 12px; }
.sv-facts div { position: relative; min-width: 0; }
.sv-facts div:first-child { padding-right: 30px; }
.sv-facts div:first-child::after { content: ""; position: absolute; right: 2px; bottom: 3px; width: 18px; height: 18px; background: var(--outline);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }   /* Icon(Icons.arrow_forward) */
.sv-facts dt { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.sv-facts dt svg.i { width: 14px; height: 14px; stroke-width: 2.4; }   /* only on a passed end date, after the label */
.sv-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 800; color: var(--on-container); white-space: nowrap; }
.sv-over dt, .sv-over dt svg.i, .sv-over dd { color: var(--critical); }   /* end date has passed: red text + alert icon; no fill */
/* district chip */
.sv-dist { justify-self: end; }
.sv-dist dd { display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; height: 26px; padding: 0 12px 0 9px; border-radius: 99px; background: var(--container); font-size: 14px; }
.sv-dist dd svg.i { width: 15px; height: 15px; color: var(--primary); }
@container app (min-width: 900px) { .sv-list { max-width: 1180px; width: 100%; margin: 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* Scheduled · card band (module colour): project icon + GS No. on the left; Synced and the card's own action on the right */
.tk-band { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 7px 8px 7px 10px; background: linear-gradient(100deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; }
.tk-no { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
.tk-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.2); }   /* project icon */
.tk-ico svg.i { width: 17px; height: 17px; }
.tk-right { display: flex; align-items: center; gap: 6px; }
/* The card's own action (Edit / Report Test) · a small white FilledButton in the band */
.tk-own { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 99px; background: #fff; color: var(--primary-dark); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.tk-own svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.tk-own:hover { background: var(--container); }
.tk-sync { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 99px; background: var(--good-bg); color: var(--good); font-size: 12.5px; font-weight: 800; }   /* the green dot blinks: synced */
.tk-sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: sync-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tk-sync i { animation: none; } }
/* Footer: a dashed line, then Project Documents | Sync Previous Report as two text buttons on one line */
.tk-tear { height: 0; margin: 0 14px; border-top: 2px dashed var(--divider); }
.tk-acts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 6px; }
.tk-acts::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; height: 20px; background: var(--divider); }
.tk-acts a:first-child { grid-column: 1; grid-row: 1; } .tk-acts a:last-child { grid-column: 3; grid-row: 1; }
.tk-acts a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 6px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.tk-acts a span { display: grid; place-items: center; color: var(--primary); }
.tk-acts a span svg.i { width: 17px; height: 17px; }
.tk-acts a:hover { background: var(--container); }

/* ───────── Profile drawer · Scaffold.drawer: slides in from the LEFT over a dark scrim ───────── */
.shell { position: relative; }
.scrim { position: absolute; inset: 0; z-index: 8; background: rgba(6, 12, 24, .45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.drawer { position: absolute; top: 0; left: 0; bottom: 0; z-index: 9; width: min(86%, 340px); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: 0 24px 24px 0; box-shadow: var(--shadow-lg); transform: translateX(-105%); visibility: hidden; transition: transform .25s, visibility .25s; }
.drawer-open .scrim { opacity: 1; visibility: visible; }
.drawer-open .drawer { transform: none; visibility: visible; }
/* Header: module colour, profile photo with an edit button, name */
.dr-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 18px 14px 20px 16px; background: var(--primary); color: #fff; }
.dr-head::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.1); }
.dr-head > * { position: relative; z-index: 1; }
.dr-avatar { position: relative; flex: none; width: 58px; height: 58px; }
.dr-avatar > svg { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.8); }
.dr-edit { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--primary-dark); box-shadow: var(--shadow); }
.dr-edit svg.i { width: 14px; height: 14px; }
.dr-id { flex: 1; min-width: 0; display: grid; }
.dr-id small { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.dr-id strong { font-size: 17px; font-weight: 700; line-height: 1.25; }
.dr-close { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; }
.dr-close:hover { background: rgba(255,255,255,.3); }
.dr-close svg.i { width: 18px; height: 18px; }
/* Body: Notifications on its own, then one white card per group */
.dr-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 12px; scrollbar-width: none; }
.dr-body::-webkit-scrollbar { display: none; }
.dr-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--tint, var(--container)); color: var(--c, var(--primary)); }
.dr-ico svg.i { width: 18px; height: 18px; }
.dr-body .go { margin-left: auto; width: 16px; height: 16px; color: var(--outline); }
.dr-note { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--container); color: var(--on-container); font-size: 15px; font-weight: 700; }
.dr-note .dr-ico { background: var(--primary); color: #fff; }
.dr-note .go { color: var(--primary); }
.dr-group { padding: 2px 10px 4px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.dr-group h3 { margin: 0; padding: 10px 2px 4px; font-size: 12.5px; font-weight: 700; color: var(--on-container); }
.dr-item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 2px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.dr-item + .dr-item { border-top: 1px solid var(--divider); }
.dr-item:hover { color: var(--primary); }
.dr-ver { flex: none; padding: 10px 16px 14px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border-top: 1px solid var(--divider); }
.dr-logout, .dr-logout:hover { --c: var(--critical); --tint: var(--critical-bg); color: var(--critical); }
@media (prefers-reduced-motion: reduce) { .scrim, .drawer { transition: none; } }

/* Confirmation · SnackBar */
.snack { position: absolute; left: 14px; right: 14px; bottom: 90px; z-index: 5; margin: 0 auto; max-width: 380px; padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; text-align: center; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; }
.snack.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .snack { transition: none; } }

/* ════════════ Tablet (600px +): NavigationRail on the left, a little more air ════════════ */
@container app (min-width: 600px) {
  .shell { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "nav bar" "nav body" "nav act"; }
  .nav, .shell.sub .nav { display: flex; flex-direction: column; gap: 12px; width: 84px; margin: 0; padding: 16px 6px; border-radius: 0; box-shadow: 4px 0 18px rgba(22, 40, 80, .06); }
  .nav a { flex: none; }
  .nav .ico, .nav a.active .ico { width: 50px; height: 30px; margin: 0; border-radius: 99px; box-shadow: none; }   /* rail: a pill behind the active icon, nothing raised */
  .nav-brand { display: block; margin-bottom: 10px; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--primary); }

  :root { --gap: 14px; }
  .appbar { height: 60px; padding: 0 20px 4px; border-radius: 0 0 0 18px; }
  .body { padding: 18px 20px; }
  .journey { padding: 12px 14px; }
  .tile { padding: 16px; gap: 14px; }
  .tile .val { font-size: 30px; }
  .pv { padding: 16px 18px 6px; }
  .l5 { padding: 16px; }
  .l5-row { min-height: 46px; font-size: 15px; }
  .visits { gap: 10px; padding: 10px; }
  .vis { padding: 12px 12px 13px; }
  .vis span.lbl { font-size: 14px; }
  .pv-row { padding: 12px 0; }
  .mapcard { height: 220px; }
  .card { padding: 16px; }
  .form { margin: 0 auto; }
  .ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; padding: 6px 8px; }
  .eg { display: inline-flex; align-items: center; gap: 2px; }
  .eg:not(:last-child) { margin-right: 14px; }      /* space between groups, so a wrapped band never starts or ends with a stray divider */
  .eb { width: 38px; }
  .eb-select { width: auto; } .eb-select.w3 { min-width: 120px; } .eb-select.w2 { min-width: 88px; }
  .actions { padding: 10px 20px; border-radius: 0; }
  .actions-in { justify-content: flex-end; }
  .btn-fill { flex: none; height: 44px; }
  .snack { bottom: 20px; }
}

/* ════════════ Web (900px +): two columns of cards ════════════ */
@container app (min-width: 900px) {
  .body { scrollbar-width: thin; }   /* on the web a thin scrollbar is expected */
  .body::-webkit-scrollbar { display: block; width: 10px; }
  .body::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--outline); border: 3px solid var(--surface); }
  .body-in { max-width: 1180px; }
  .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .dash .col:last-of-type { grid-template-rows: auto 1fr; }
  .mapcard { height: auto; min-height: 200px; }
  .foot { grid-column: 1 / -1; }
  /* Editor: wider column and a taller writing area */
  .form, .actions-in { max-width: 900px; }
  .ed-text { min-height: 280px; }
}

/* Web backdrop (laptop and up, 992px +): the space around the centred content.
   1. Gradient: a clear module tint in the top-left corner, the light canvas through the middle, a softer tint again
      along the bottom right.
   2. Two faint DGM&E stamps (a drawn seal: the directorate's name around the edge, "DGM&E / PUNJAB" in the centre, in the
      module colour), bottom right and bottom left, behind the cards: stamped in once when the page opens, then turning very slowly.
   3. The official emblem in full colour at the foot of the left rail (.nav-emblem): 150px in the expanded rail, 56px in the
      icon-only rails (992-1099px and collapsed).
   Flutter: Stack(Container(LinearGradient topLeft > bottomRight), Positioned(ScaleTransition + RotationTransition(seal)), body);
   the rail emblem is an Image.asset at the bottom of the NavigationRail (trailing). */
.web-deco, .nav-emblem { display: none; }
@container app (min-width: 992px) {
  .shell { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 8%, var(--surface)) 32%, var(--surface) 55%, color-mix(in srgb, var(--primary) 16%, var(--surface)) 100%); }
  .body { position: relative; z-index: 1; }
  .ab-user { display: block; margin-left: 2px; }
  .web-deco { grid-area: body; position: relative; z-index: 0; display: block; overflow: hidden; pointer-events: none; }
  .seal { position: absolute; color: var(--primary); }
  .seal svg { display: block; width: 100%; height: 100%; animation: seal-turn 120s linear infinite; }
  .seal-a { right: -110px; bottom: -130px; width: 520px; height: 520px; opacity: .11; animation: seal-stamp .9s cubic-bezier(.2, .9, .3, 1.2) .3s both; }
  .seal-b { left: 6%; bottom: -170px; width: 340px; height: 340px; opacity: .08; animation: seal-stamp .9s cubic-bezier(.2, .9, .3, 1.2) .1s both; }
  .seal-b svg { animation-direction: reverse; }
  .nav-emblem { display: block; flex: none; width: 56px; margin: auto auto 4px; animation: emblem-in .7s ease-out .2s both; }
  .pl-tools { position: static; background: none; }   /* no canvas-coloured strip over the gradient; the wide grid is short, so the search need not stick */
}
@container app (min-width: 1100px) {
  :root:not([data-nav="collapsed"]) .nav-emblem { width: 150px; margin-bottom: 6px; }
}
@keyframes seal-stamp { from { transform: scale(1.35) rotate(-12deg); opacity: 0; } }
@keyframes seal-turn { to { transform: rotate(360deg); } }
@keyframes emblem-in { from { transform: scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .seal, .seal svg, .nav-emblem { animation: none !important; } .nav, .nav a::after { transition: none !important; } }

/* ════════════ Wide web (1100px +): rail with labels beside the icons ════════════ */
@container app (min-width: 1100px) {
  .nav, .shell.sub .nav { width: 216px; gap: 4px; padding: 20px 12px; }
  .nav a { flex-direction: row; gap: 12px; height: 44px; padding: 0 14px; border-radius: 99px; font-size: 14.5px; }
  .nav a:hover { background: var(--surface); }
  .nav a.active { background: var(--primary); color: #fff; }
  .nav .ico, .nav a:hover .ico, .nav a.active .ico { width: 20px; height: 20px; background: none; }
  .nav-brand { margin-bottom: 14px; padding: 0 14px; text-align: left; font-size: 19px; }
  /* Collapse button (IconButton) top right of the rail; collapsed = an icon-only rail (NavigationRail extended: false),
     the label of each item shows as a Tooltip on hover / keyboard focus */
  .nav { transition: width .2s ease, padding .2s ease; }
  .nav a { position: relative; }
  .nav-toggle { position: absolute; top: 16px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: var(--surface); color: var(--ink-2); }
  .nav-toggle:hover { background: var(--container); color: var(--primary); }
  :root[data-nav="collapsed"] .nav, :root[data-nav="collapsed"] .shell.sub .nav { width: 80px; padding: 16px 12px; }
  :root[data-nav="collapsed"] .body-in { max-width: 1316px; }   /* the content takes the 136px the rail gives back */
  :root[data-nav="collapsed"] .nav-brand, :root[data-nav="collapsed"] .nav-lbl { display: none; }
  :root[data-nav="collapsed"] .nav-toggle { position: static; margin: 0 auto 14px; }
  :root[data-nav="collapsed"] .nav a { justify-content: center; padding: 0; }
  :root[data-nav="collapsed"] .nav a::after { content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; z-index: 5; padding: 6px 11px; border-radius: 8px; background: #0f1a2c; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-4px, -50%); pointer-events: none; transition: opacity .15s, transform .15s; }
  :root[data-nav="collapsed"] .nav a:hover::after, :root[data-nav="collapsed"] .nav a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
  .appbar { padding: 0 28px 4px; }
  .body { padding: 22px 28px; }
  .actions { padding: 10px 28px; }
}