/* Aman Al-Taqdir — Tank UI v3 "Survey Sheet".
   The water metaphor is the product's identity (§8); v3 grounds it in the surveyor's world:
   limestone chart-paper with an etched grid, deep gulf-navy chrome, and water-blue as the
   ONLY chromatic accent — so the water-state colours (blue/brown/black) carry the meaning.
   Display face: Big Shoulders (tank-signage condensed). Arabic wordmark: Reem Kufi. */
:root {
  --ink: #14212c; --ink-2: #45586a; --ink-3: #5c6b78;   /* ink-3 ≥4.5:1 on card & ground (WCAG AA) */
  --paper: #e8e3d6; --card: #faf8f1; --card-2: #f1ede1; --line: #ddd5c2; --line-2: #c8bfa6;
  --accent: #1173b6; --accent-2: #0c5c93; --ok: #1e7a4b; --warn: #96590f; --bad: #a32b31;
  --blue1: #4db2ec; --blue2: #1173b6; --blue3: #0b5c94;
  --brown1: #c2914f; --brown2: #8f6229; --brown3: #6e4a1d;
  --black1: #4d5a66; --black2: #232d36; --black3: #141c23;
  --chrome: #101b24; --chrome-2: #16242f;
  --display: "Big Shoulders Variable", "Arial Narrow", "Helvetica Neue", sans-serif;
  --kufi: "Reem Kufi Variable", "Geeza Pro", sans-serif;
  --radius: 10px;
  /* layered depth system: sm = resting cards, default = interactive, lg = hero surfaces */
  --shadow-sm: 0 1px 1px #14212c08, 0 2px 6px #14212c0a;
  --shadow: 0 1px 2px #14212c0a, 0 4px 10px #14212c0d, 0 12px 28px #3a301c14;
  --shadow-lg: 0 2px 4px #14212c0d, 0 10px 24px #3a301c1a, 0 28px 60px #3a301c21;
  --shadow-hover: 0 3px 6px #14212c10, 0 14px 32px #3a301c21, 0 36px 80px #3a301c26;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #e6e1d3; color-scheme: light; }
body {
  margin: 0; font: 15px/1.55 "Inter Variable", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; color: var(--ink);
  font-feature-settings: "cv11", "ss01"; letter-spacing: -0.011em;
  /* the survey sheet: limestone ground, fine etched grid, a heavier rule every 5th line */
  background:
    repeating-linear-gradient(0deg, transparent 0 129px, #14212c12 129px 130px),
    repeating-linear-gradient(90deg, transparent 0 129px, #14212c12 129px 130px),
    repeating-linear-gradient(0deg, transparent 0 25px, #14212c08 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, #14212c08 25px 26px),
    linear-gradient(180deg, #eae5d8 0%, #e6e1d3 100%);
  /* NOTE: no background-attachment:fixed — fixed + repeating hairlines forces a full
     main-thread repaint per scroll frame and hangs the renderer on long tank pages. */
  min-height: 100vh;
}
main { max-width: 1240px; margin: 0 auto; padding: 24px 18px 70px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tank-card, .kpi, .brief-card, .outbound-card, .kv, .docs { animation: fadeUp .45s cubic-bezier(.2,.7,.3,1) both; }
.tank-card:nth-child(2) { animation-delay: .04s; } .tank-card:nth-child(3) { animation-delay: .08s; }
.tank-card:nth-child(4) { animation-delay: .12s; } .tank-card:nth-child(5) { animation-delay: .16s; }
.tank-card:nth-child(n+6) { animation-delay: .2s; }
a { color: var(--accent); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- display type: tank signage ---------- */
h1 { font-family: var(--display); font-weight: 640; font-size: 36px; line-height: 1.06;
  letter-spacing: .015em; text-transform: uppercase; margin: 12px 0 6px; }
h1 .badge { font-family: "Inter Variable", sans-serif; text-transform: none; letter-spacing: 0; }
h3 { display: flex; align-items: center; gap: 12px; margin: 30px 0 10px;
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2); }
h3::after { content: ''; flex: 1; height: 1px; background: var(--line-2); min-width: 24px; }
h3 .badge, h3 a { font-family: "Inter Variable", sans-serif; letter-spacing: 0; text-transform: none; flex: none; }

/* "Tank" — half sinking, half floating: waterline crosses the middle of the word */
.tank-word {
  font-weight: 700;
  color: var(--ink);            /* graceful fallback */
  position: relative;
  display: inline-block;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tank-word {
    background-image: linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, #1e88cd 60%, #0b6aa8 88%, #095a8f 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
.tank-word::after {             /* the waterline — one repeating wave through the word's middle */
  content: "";
  position: absolute; left: -.06em; right: -.06em; top: 60%; height: .16em;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 5 Q10 1 20 5 T40 5' fill='none' stroke='%234db2ec' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / .9em 100%;
  opacity: .85; pointer-events: none;
  animation: waterlineDrift 5s linear infinite;
}
@keyframes waterlineDrift { from { background-position-x: 0; } to { background-position-x: .9em; } }

/* brand mark in the topbar */
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo svg { display: block; color: #dcebf5; }
.brand-mark svg path[fill^="url"] { transition: transform .6s cubic-bezier(.22,.8,.3,1); transform-origin: 50% 100%; }
.brand-mark:hover svg path[fill^="url"] { transform: translateY(-1.5px); }
@media (prefers-reduced-motion: reduce) {
  .brand-mark svg path[fill^="url"], .brand-mark:hover svg path[fill^="url"] { transition: none; transform: none; }
}
.waterline-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--blue1); border-radius: 10px; }

/* ---------- top bar: the instrument chrome ---------- */
.topbar { display: flex; align-items: center; gap: 20px; padding: 12px 22px;
  background: linear-gradient(180deg, var(--chrome-2), var(--chrome)); color: #cfe0ec;
  position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
/* the signature waterline glows along the bottom of the chrome */
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 6px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 4 Q12 1 24 4 T48 4' fill='none' stroke='%234db2ec' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 48px 100%;
  opacity: .45;
  animation: waterlineDrift 9s linear infinite;
}
.brand { font-family: var(--display); font-weight: 700; letter-spacing: .09em; color: #fff; font-size: 19px; }
.brand span { color: #6db6e8; font-weight: 450; }
.brand .brand-ar { font-family: var(--kufi); font-weight: 500; font-size: 15px; color: #8fb9d9;
  letter-spacing: 0; margin-inline-start: 4px; padding-top: 2px; }
.topbar nav { display: flex; gap: 16px; align-items: center; }
.topbar nav a { color: #cfe0ec; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; padding: 2px 0; }
.topbar nav a:hover { color: #fff; border-bottom-color: #4db2ec66; }
.btn-new { background: var(--accent); color: #fff !important; padding: 6px 14px; border-radius: 8px; border-bottom: 0 !important; }
.btn-new:hover { background: var(--accent-2); }
.whoami { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; }
.avatar-glyph { background: var(--ink-2); }
.avatar .ic { margin: 0; vertical-align: 0; }
.bot-avatar { color: #fff; }
.media-glyph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-3); }
.who-name { font-size: 13px; color: #e6eef5; font-weight: 600; line-height: 1.2; }
.who-name i { display: block; font-style: normal; font-size: 11px; color: #8fa7b8; font-weight: 500; }
button.ghost { background: transparent; border-color: #33475699; color: #9db4c6; font-size: 12.5px; padding: 5px 11px; }
button.ghost:hover { color: #fff; border-color: #fff; }
@media (max-width: 720px) {
  .brand .brand-ar { display: none; }
  .topbar { position: static; }   /* wrapped bar is tall — don't let it eat the phone screen */
}

/* ---------- login: the reservoir ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; margin: 0;
  background: linear-gradient(180deg, #1a2b38, #101b24); padding: 24px; }
.login-shell { display: grid; grid-template-columns: 1.1fr 1fr; width: min(94vw, 880px);
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px #00000073, 0 4px 16px #00000040; }
.login-hero { --wl: 64%;    /* where the waterline crosses the panel — clear of the wordmark's descenders */
  position: relative; padding: 46px 44px; color: #e8f1f8; min-height: 460px;
  display: flex; flex-direction: column; isolation: isolate;
  background: linear-gradient(180deg, #16242f, #12202b); }
/* below the waterline: the submerged zone (sits behind the text) */
.login-hero::after { content: ''; position: absolute; left: 0; right: 0; top: var(--wl); bottom: 0;
  z-index: -1; background: linear-gradient(180deg, #0e2e47, #081a28); }
.login-hero .hero-brand { display: flex; align-items: center; gap: 12px; }
.login-hero .hero-en { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .14em; color: #fff; }
.login-hero .hero-ar { font-family: var(--kufi); font-weight: 600; font-size: 50px; line-height: 1.9;
  color: #fff; margin-top: auto; padding-bottom: 10px; padding-inline-start: 10px; }
.login-hero .hero-tag { margin: 2px 0 0; font-size: 13.5px; color: #9dbdd4; letter-spacing: .02em; }
/* the waterline crosses the panel right under the wordmark */
.login-hero .hero-waterline { position: absolute; left: 0; right: 0; top: var(--wl); height: 8px;
  margin-top: -4px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 4 Q12 1 24 4 T48 4' fill='none' stroke='%234db2ec' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 48px 100%;
  opacity: .75; animation: waterlineDrift 8s linear infinite; }
.login-hero .hero-foot { margin: 0; padding-top: 34px; font-size: 13px; color: #7fa3bd; line-height: 1.6; }
.login-card { background: var(--card); padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-logo { display: flex; justify-content: center; margin-bottom: 10px; }
.login-brand { text-align: center; font-family: var(--display); font-weight: 700; letter-spacing: .13em; font-size: 21px; }
.login-brand span { color: var(--accent); font-weight: 450; }
.login-error { color: var(--bad); text-align: center; font-weight: 600; }
@media (max-width: 720px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { --wl: 172px; min-height: 0; padding: 30px 28px 36px; }
  .login-hero .hero-ar { font-size: 40px; line-height: 1.5; margin-top: 14px; }
  .login-hero .hero-tag { margin-top: 26px; }
  .login-hero .hero-foot { padding-top: 22px; }
}

/* stagnation reason line on cards */
.reason { display: block; font-size: 11.5px; color: var(--warn); margin-top: 2px; }
.reason.ok-flow { color: var(--ink-3); }

/* editable time sheet cells */
.cell-edit { border: 1px solid transparent; background: transparent; font: inherit; padding: 2px 4px; border-radius: 6px; max-width: 100%; }
.cell-edit:hover, .cell-edit:focus { border-color: var(--line-2); background: #fff; }
.cell-edit.hrs { width: 64px; }
.auto-tag { font-size: 10px; color: var(--accent); border: 1px solid #a8cbe2; border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
.row-actions button { padding: 3px 8px; font-size: 12px; }

/* ---------- dashboard head: gauge tiles ---------- */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.dash-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; width: 100%; margin: 16px 0 6px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--ink);
  border-radius: var(--radius); padding: 12px 14px 11px; box-shadow: var(--shadow-sm); }
.kpi b { display: block; font-family: var(--display); font-weight: 650; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--ink); padding-bottom: 2px; }
.kpi span { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
/* the cleanness gauge: a level ruler, not a progress bar */
.kpi .meter { position: relative; height: 7px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 2px; margin-top: 8px; overflow: hidden; }
.kpi .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue1), var(--blue2)); transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.kpi .meter::after { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 9%, #faf8f1cc 9% 10%); }
.kpi.alert b { color: var(--bad); }

/* analytics strip */
.analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 6px 0 10px; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 8px;
  box-shadow: var(--shadow-sm); }
.chart-card h5 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chart-card canvas { max-height: 150px; }
.chart-data { display: none; }

/* water-state segmented control */
.chips { display: inline-flex; gap: 0; margin: 12px 0 4px; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px; box-shadow: var(--shadow-sm); }
.chip { font-size: 13px; padding: 7px 16px; border-radius: 16px; color: var(--ink-2); font-weight: 600; transition: background .2s, color .2s; }
.chip:hover { color: var(--ink); background: var(--card-2); }
.chip.on { background: var(--ink); color: #fff; box-shadow: 0 2px 8px #14212c33; }
.chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin-right: 7px; }
.dot-blue { background: linear-gradient(135deg, var(--blue1), var(--blue2)); }
.dot-brown { background: linear-gradient(135deg, var(--brown1), var(--brown2)); }
.dot-black { background: linear-gradient(135deg, var(--black1), var(--black2)); }

/* dashboard layout: adjuster rail + tanks */
.dash-body { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; margin-top: 14px; }
.dash-body.with-rail { grid-template-columns: 190px 1fr; }
@media (max-width: 800px) { .dash-body.with-rail { grid-template-columns: 1fr; } }
.adj-rail { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 8px; }
.adj-rail h4 { margin: 0 0 2px; font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.adj-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 12px; box-shadow: var(--shadow-sm); color: var(--ink); transition: transform .15s, box-shadow .25s ease; }
.adj-card:hover { transform: translateX(3px); }
.adj-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px #1173b633, var(--shadow); }
.adj-card .avatar { width: 34px; height: 34px; font-size: 13px; }
.adj-card b { display: block; font-size: 13.5px; line-height: 1.15; }
.adj-card span { font-size: 11.5px; color: var(--ink-3); }

/* ---------- tank grid ---------- */
.tank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; margin-top: 18px; }
.tank-card { display: block; }
.tank { display: flex; flex-direction: column; gap: 9px; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.tank-card:hover .tank { transform: translateY(-6px) scale(1.015); }
.tank-card:hover .tank-glass { box-shadow: inset 0 2px 12px #ffffffee, inset 4px 0 14px #ffffff88,
  inset -6px 0 16px #14212c10, inset 0 -10px 22px #14212c18, var(--shadow-hover); }
.next-action, .bot-panel, .net-bar { box-shadow: var(--shadow-lg); }
.kpi:hover, .brief-card:hover, .adj-card:hover, .action-card:hover, .corr-row:hover { box-shadow: var(--shadow-hover); }
.kpi, .brief-card, .action-card, .corr-row { transition: box-shadow .25s ease, transform .2s ease; }

.tank-3d { position: relative; perspective: 700px; }
.tank-shadow { height: 14px; margin: -4px 8% 0; border-radius: 50%;
  background: radial-gradient(ellipse at center, #14212c30 0%, transparent 70%);
  transition: transform .3s, opacity .3s; }
.tank-card:hover .tank-shadow { transform: scaleX(1.06); opacity: .8; }

.tank-glass {
  position: relative; height: 235px; overflow: hidden;
  border-radius: 50% 50% 50% 50% / 9% 9% 6% 6%;      /* cylinder: elliptical top & base */
  background: linear-gradient(100deg, #fdfdfbee 0%, #efede6cc 30%, #f9f8f4cc 55%, #e9e7dedd 100%);
  border: 1.5px solid #ffffffdd;
  box-shadow: inset 0 2px 12px #ffffffee, inset 4px 0 14px #ffffff88, inset -6px 0 16px #14212c10,
              inset 0 -14px 26px #14212c20, 0 12px 30px #3a301c1c, 0 2px 6px #14212c12;
  transform: rotateX(2deg); transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.tank-card:hover .tank-glass { transform: rotateX(6deg) translateY(-2px); }
.tank.big .tank-glass { height: 380px; }

/* empty tanks sit quiet — etched glass, no showroom gloss; filled tanks are the loud ones */
.tank[data-fill="0"] .tank-glass {
  background: linear-gradient(100deg, #f6f5f0d9 0%, #edebe3cc 50%, #f1efe8d9 100%);
  border-color: #ffffffaa;
  box-shadow: inset 0 2px 8px #ffffff88, inset 0 -10px 18px #14212c12, 0 8px 20px #3a301c12, 0 2px 5px #14212c0e;
}
.tank[data-fill="0"] .tank-glass::before { display: none; }
.tank[data-fill="0"] .cyl-shade { opacity: .45; }
.tank[data-fill="0"] .tank-shadow { opacity: .55; }

/* cylindrical shading: dark edges, bright core — sells the roundness */
.cyl-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, #2c3a4633 0%, #ffffff00 16%, #ffffff4d 42%, #ffffff00 62%, #2c3a4640 100%); }

/* rim — elliptical glass lip */
.tank-glass::after { content: ''; position: absolute; top: -6px; left: 2%; right: 2%; height: 22px; z-index: 4;
  border-radius: 50%; border: 2.5px solid #ffffffd9; border-top-color: #d5cfc0;
  background: linear-gradient(180deg, #ffffffb3, #ece8dd77); pointer-events: none;
  box-shadow: 0 2px 6px #14212c14; }

/* elliptical water surface — the 3D top of the liquid */
.water .surface { position: absolute; top: -6px; left: 0; right: 0; height: 16px; border-radius: 50%; z-index: 2;
  animation: surfaceSway 5.5s ease-in-out infinite; }
.colour-blue  .water .surface { background: radial-gradient(ellipse at 50% 42%, #8ed2f7, var(--blue1) 70%); }
.colour-brown .water .surface { background: radial-gradient(ellipse at 50% 42%, #dcb478, var(--brown1) 70%); }
.colour-black .water .surface { background: radial-gradient(ellipse at 50% 42%, #6b7c8a, var(--black1) 70%); }
.colour-closed .water .surface { background: radial-gradient(ellipse at 50% 42%, #c9c4b5, #a8a293 70%); }
@keyframes surfaceSway { 0%,100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.25) translateY(1px); } }

/* gloss highlight down the left of the glass */
.tank-glass::before { content: ''; position: absolute; top: 5%; bottom: 8%; left: 8%; width: 9%; z-index: 3;
  background: linear-gradient(180deg, #ffffffcc, #ffffff2e 60%, transparent); border-radius: 12px; pointer-events: none;
  animation: glassShine 7s ease-in-out infinite; }
@keyframes glassShine { 0%, 100% { opacity: .9; } 50% { opacity: .5; } }

/* caustic light dancing inside the water */
.water .body::after { content: ''; position: absolute; inset: 20% 0 0 0; mix-blend-mode: soft-light; opacity: .5;
  background: repeating-radial-gradient(ellipse 120px 40px at 30% 30%, #ffffff55 0 8px, transparent 12px 40px),
              repeating-radial-gradient(ellipse 100px 36px at 70% 60%, #ffffff44 0 6px, transparent 10px 34px);
  animation: caustics 9s ease-in-out infinite alternate; }
@keyframes caustics { from { transform: translateX(-12px) scale(1); } to { transform: translateX(12px) scale(1.06); } }

/* etched level ticks */
.ticks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ticks i { position: absolute; left: 0; right: 0; height: 1px; background: #14212c0d; }

/* ---------- the water ---------- */
.water { position: absolute; bottom: 0; left: 0; right: 0; transition: height 1.8s cubic-bezier(.4,0,.2,1); z-index: 1; }
.water .body { position: absolute; inset: 11px 0 0 0; }
.colour-blue  .water .body { background: linear-gradient(180deg, var(--blue1) 0%, var(--blue2) 55%, var(--blue3) 100%); }
.colour-brown .water .body { background: linear-gradient(180deg, var(--brown1), var(--brown2) 55%, var(--brown3)); }
.colour-black .water .body { background: linear-gradient(180deg, var(--black1), var(--black2) 55%, var(--black3)); }
.colour-closed .water .body { background: linear-gradient(180deg, #a8a293, #837e6e); }
.water .body { transition: background 3s linear; }
/* subtle inner light at the water top */
.water .body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px; background: linear-gradient(180deg, #ffffff2e, transparent); }

.wave { position: absolute; top: 0; left: 0; width: 200%; height: 12px; animation: drift 7s linear infinite; }
.wave2 { animation-duration: 11s; animation-direction: reverse; opacity: .55; top: 3px; }
.colour-blue  .wave path { fill: var(--blue1); }
.colour-brown .wave path { fill: var(--brown1); }
.colour-black .wave path { fill: var(--black1); }
.colour-closed .wave path { fill: #a8a293; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ambient water detail is expensive at 50 tanks a page (500+ live animations saturate the
   compositor and scrolling stutters). The grid runs calm water — wave drift only; the full
   life (bubbles, caustics, shine, sway) belongs to the big tank and the tank under the cursor. */
.tank:not(.big) .bubbles { display: none; }
.tank:not(.big) .water .body::after { display: none; }
.tank:not(.big) .tank-glass::before { animation: none; }
.tank:not(.big) .water .surface { animation: none; }
.tank-card:hover .bubbles { display: block; }
.tank-card:hover .water .body::after { display: block; }
.tank-card:hover .water .surface { animation: surfaceSway 5.5s ease-in-out infinite; }

/* rising bubbles */
.bubbles { position: absolute; inset: 0; overflow: hidden; }
.bubbles i { position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
  background: #ffffff59; animation: rise linear infinite; }
.bubbles i:nth-child(1) { left: 18%; animation-duration: 5.5s; }
.bubbles i:nth-child(2) { left: 42%; width: 3px; height: 3px; animation-duration: 7.5s; animation-delay: 1.6s; }
.bubbles i:nth-child(3) { left: 63%; animation-duration: 6.2s; animation-delay: .9s; }
.bubbles i:nth-child(4) { left: 81%; width: 4px; height: 4px; animation-duration: 8.4s; animation-delay: 3s; }
@keyframes rise { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-220px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wave, .bubbles i, .tank-word::after, .topbar::after, .login-hero .hero-waterline,
  .water .surface, .tank-glass::before, .water .body::after, .bot-live { animation: none; }
}

/* pour moment when new data lands */
.tank-glass.pouring::after { content: ''; position: absolute; top: 0; left: 49%; width: 5px; height: 48%; z-index: 2;
  background: linear-gradient(180deg, #ffffff00, var(--blue1)); border-radius: 3px; animation: pour 1s ease-in; }
@keyframes pour { from { height: 0; opacity: 0; } to { height: 48%; opacity: 1; } }

/* level marks on the small tanks — stenciled signage */
.mark { position: absolute; right: 7px; z-index: 4; font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; color: #6b6455; padding: 2px 7px; border-radius: 4px; background: #fdfcf8e6; border: 1px solid var(--line-2);
  box-shadow: 0 1px 3px #14212c0f; }
/* same three-state language as the detail page: outline = unlocked, solid = issued */
.mark.unlocked { color: var(--accent); background: #fdfcf8e6; border-color: var(--accent); }
.mark.issued { color: #fff; background: var(--accent); border-color: var(--accent-2); }
.mark-ira { bottom: 16%; } .mark-pr { bottom: 40%; } .mark-interim { bottom: 63%; } .mark-final { bottom: 86%; }

.tank-label { text-align: center; }
.tank-label b { display: block; font-family: var(--display); font-weight: 650; font-size: 16px; letter-spacing: .04em; }
.tank-label span { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tank-label .meta { font-variant-numeric: tabular-nums; color: #6b6455; }

/* ---------- stage stepper ---------- */
.stepper { display: flex; gap: 4px; margin: 14px 0 6px; flex-wrap: wrap; }
.step { font-family: var(--display); font-size: 12.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink-3); }
/* done = achromatic (hue is reserved for water states); the strip reads as progress, not buttons */
.step { border-radius: 4px; }
.step.done { color: var(--ink-2); border-color: var(--line-2); background: var(--card-2); }
.step.now { color: #fff; background: var(--accent); border-color: var(--accent-2); border-radius: 4px; }

/* ---------- tank detail ---------- */
.tank-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
.tank-detail > * { min-width: 0; }
@media (max-width: 900px) { .tank-detail { grid-template-columns: minmax(0, 1fr); } }
.sub { color: var(--ink-3); margin: 0 0 6px; }
.badge { font-size: 11px; font-weight: 700; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; vertical-align: 3px; color: var(--ink-2); }
.badge.grade { background: var(--ink); border-color: var(--ink); color: #fff; }
.w-blue { color: var(--blue2); } .w-brown { color: var(--brown2); } .w-black { color: var(--black2); }
.fill-meter { text-align: center; margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.fill-meter b { color: var(--ink); font-family: var(--display); font-weight: 650; font-size: 20px; letter-spacing: .02em; }

.mark-row { position: absolute; left: 10px; display: flex; gap: 7px; align-items: center; z-index: 4; }
.mark-row.mark-ira { bottom: 14%; } .mark-row.mark-pr { bottom: 38%; } .mark-row.mark-interim { bottom: 61%; } .mark-row.mark-final { bottom: 84%; }
.mark-box { font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  background: #fdfcf8ee; border: 1px solid var(--line-2); padding: 4px 11px; border-radius: 6px; color: #6b6455; box-shadow: 0 1px 4px #14212c12; }
.mark-box.unlocked { color: var(--accent); border-color: var(--accent); }
.mark-box.issued { color: #fff; background: var(--accent); }

/* Report actions strip — every possible action, one clean row each */
.action-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.action-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.action-card > b { font-family: var(--display); font-size: 14px; font-weight: 650; letter-spacing: .08em; color: var(--ink-2); }
.action-card.ready { border-inline-start: 4px solid var(--accent); }
.action-card.pending { border-inline-start: 4px solid var(--warn); }
.action-card.done { border-inline-start: 4px solid var(--ink-2); }
.action-card.locked { opacity: .62; }
.action-card .ac-links { display: flex; gap: 12px; font-size: 12.5px; }
.action-card .ac-form { display: flex; gap: 7px; flex-wrap: wrap; }
.action-card .ac-form input { width: 120px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; background: #fff; }
.waiting-chip { font-size: 12.5px; font-weight: 700; color: var(--warn); background: #f6ecd9; border-radius: 8px; padding: 4px 10px; align-self: flex-start; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; color: var(--accent); border: 0; }
.next-action form { display: contents; }
.next-action .na-btn { border: 0; cursor: pointer; font: inherit; }

/* ---------- forms & tables ---------- */
.form-page { max-width: 760px; }
.stack label { display: block; margin: 13px 0; font-weight: 600; font-size: 14px; }
.stack input, .stack select, .stack textarea, .inline-form input, .inline-form select, #bot-q {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; font: inherit; margin-top: 5px; background: #fff; }
.stack input:focus, .stack textarea:focus, #bot-q:focus { outline: 2px solid #1173b633; border-color: var(--accent); }
/* selects match the app's field language instead of the OS bezel */
.stack select, .inline-form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345586a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  padding-right: 34px;
}
.stack select:focus, .inline-form select:focus { outline: 2px solid #1173b633; border-color: var(--accent); }
/* inline single-colour icons inherit the text colour */
.ic { vertical-align: -2px; margin-inline-end: 2px; flex: none; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
button { font: inherit; padding: 9px 15px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; font-weight: 600; color: var(--ink-2); }
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent-2); }
button.primary:hover { background: var(--accent-2); color: #fff; }
.big-btn { width: 100%; padding: 15px; font-size: 17px; margin-top: 12px; }
.kv { width: 100%; border-collapse: collapse; margin: 16px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.kv th { text-align: left; width: 32%; color: var(--ink-3); font-weight: 600; }
.kv th, .kv td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }
.docs { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.docs td, .docs th { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.docs th { text-align: left; color: var(--ink-3); font-family: var(--display); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.docs tr:last-child td { border-bottom: 0; }
.docs tr.got td { color: var(--ink-3); }
.docs tr.got td:first-child { text-decoration: line-through; text-decoration-color: #6b645566; }
.docs tr.overdue td:first-child { color: var(--bad); }
.ok { color: var(--ok); font-weight: 600; }
.muted { color: var(--ink-3); font-size: 13px; }
.outbound-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; font-size: 14px; box-shadow: var(--shadow-sm); }
.note-block { white-space: pre-wrap; font: 14px/1.7 inherit; background: var(--card-2); padding: 11px 14px; border-radius: 8px; margin: 8px 0; color: var(--ink); }
.note-block.en-twin { background: #eff2ea; border-inline-start: 3px solid #b3d4bd; color: var(--ink-2); }

/* Bordereaux tables — same survey-table language as .docs */
.bx-wrap { overflow-x: auto; }
.bx-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line);
  font-size: 13.5px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.bx-table th, .bx-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.bx-table th { color: var(--ink-3); font-family: var(--display); font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .08em; }
.bx-table th.num, .bx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bx-table tr:last-child td { border-bottom: 0; }
.bx-table tr.total td { font-weight: 700; border-top: 2px solid var(--line-2); background: var(--card-2); }

/* Daily brief */
.brief-page { max-width: 640px; margin: 0 auto; }
.brief-hero h1 { font-size: 32px; margin-bottom: 2px; }
.brief-chips { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.bchip { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 15px; font-size: 13.5px; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.bchip b { color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.bchip.warn b { color: var(--warn); } .bchip.act b { color: var(--accent); }
.brief-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin: 8px 0; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 14.5px; transition: transform .15s; }
.brief-card:hover { transform: translateX(3px); }
.brief-card b { white-space: nowrap; font-family: var(--display); font-weight: 650; font-size: 15.5px; letter-spacing: .04em; }
.brief-card span { flex: 1; color: var(--ink-2); }
.brief-card i { font-style: normal; color: var(--accent); font-weight: 700; }
.brief-card em { font-style: normal; font-size: 12px; font-weight: 700; }
.brief-card.act { border-inline-start: 4px solid var(--accent); }
.brief-card .brief-actions { line-height: 1.9; }
.brief-card .brief-actions a { font-weight: 600; white-space: nowrap; }
.brief-more { margin-top: 4px; }
.brief-more summary { cursor: pointer; padding: 8px 4px; user-select: none; }
.brief-card.warn { border-inline-start: 4px solid var(--warn); }
.feed { list-style: none; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.feed li { padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.feed li:last-child { border-bottom: 0; }
.feed li span { margin-left: auto; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.brief-copy { margin: 26px 0; text-align: center; }
button.ghost2 { background: transparent; border: 1px solid var(--line-2); color: var(--ink-3); font-size: 13px; }
.timeline { list-style: none; padding: 0; font-size: 14.5px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.timeline li { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline span { color: var(--ink-3); margin-right: 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.flash { border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; font-size: 14px; box-shadow: var(--shadow-sm); }
.flash.warn { background: #f6ecd9; border: 1px solid #ddc79b; color: #6e4a1d; }
.flash.ok-flash { background: #edf5ee; border: 1px solid #b3d4bd; color: #14603a; }
.flash.info { background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); color: var(--ink-2); }

/* Correspondence rows on the tank */
.corr-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 14px; margin: 8px 0; box-shadow: var(--shadow-sm); color: var(--ink);
  font-size: 14px; transition: transform .15s; }
.corr-row:hover { transform: translateX(3px); }
.corr-row.sent { opacity: .78; }
.corr-kind { font-weight: 700; white-space: nowrap; }
.corr-subject { flex: 1; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-badge { background: var(--card-2); border-color: var(--line-2); color: var(--ink-2); }
.act-badge { background: var(--accent); border-color: var(--accent-2); color: #fff; }

/* In-app assessment editor */
.assess-table input.wide { width: 100%; }
.assess-table input.num { width: 110px; text-align: right; }
.row-x { padding: 3px 8px; font-size: 12px; }
.deduct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; }
.deduct-grid label { font-size: 13px; font-weight: 600; }
.deduct-grid input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; margin-top: 4px; text-align: right; background: #fff; }
.net-bar { background: linear-gradient(120deg, #14603a, #1e7a4b); color: #fff; border-radius: var(--radius); padding: 14px 18px;
  font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 8px 22px #1e7a4b33; }
.net-bar b { font-family: var(--display); font-weight: 650; font-size: 22px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Send bar on the review page */
.send-bar { background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius); padding: 16px 18px; margin: 16px 0; box-shadow: var(--shadow-sm); }
.send-options { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.send-options form { display: inline; }

/* Next-action card — the one thing to do on this claim */
.next-action { position: relative; background: linear-gradient(120deg, #1173b6, #0c5c93); color: #fff;
  border-radius: 12px; padding: 15px 18px; margin: 14px 0 4px; box-shadow: 0 8px 24px #1173b644;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.next-action b { font-size: 16.5px; line-height: 1.35; flex: 1; min-width: 200px; }
.next-action .na-label { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  background: #ffffff2b; padding: 3px 10px; border-radius: 10px; }
.next-action .na-btn { background: #fff; color: var(--accent-2); font-weight: 700; padding: 8px 16px;
  border-radius: 9px; font-size: 14px; white-space: nowrap; }
.next-action.waiting { background: linear-gradient(120deg, #45586a, #3a4c5d); box-shadow: 0 8px 24px #45586a33; }

/* ---------- claim-bot — living chat ---------- */
.bot-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; margin-top: 26px; }
.bot-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: linear-gradient(120deg, var(--chrome-2), #0b3a5c); color: #fff; }
.bot-head b { font-size: 14.5px; display: block; line-height: 1.2; }
.bot-head i { font-style: normal; font-size: 11.5px; color: #9dc4e0; display: block; }
.bot-live { margin-left: auto; font-size: 11px; color: #7fe0a7; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.bot-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #4db2ec, #1173b6);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.bot-avatar.sm { width: 26px; height: 26px; font-size: 13px; }
.bot-log { min-height: 110px; max-height: 300px; overflow-y: auto; padding: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.bot-row { display: flex; align-items: flex-end; gap: 8px; margin: 4px 0; animation: fadeUp .25s ease both; }
.bot-row.me { justify-content: flex-end; }
.bot-row time { font-size: 10px; color: #857f6e; flex: none; }
.bot-msg { background: var(--card-2); border-radius: 14px 14px 14px 4px; padding: 9px 13px; max-width: 82%; line-height: 1.5; }
.bot-row.me .bot-msg { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 14px 14px 4px 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #a8a293; animation: dotbounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotbounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.bot-chips { display: flex; gap: 7px; padding: 4px 14px 10px; flex-wrap: wrap; }
.bot-chip { font-size: 12px; padding: 5px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; font-weight: 600; color: var(--ink-2); transition: border-color .15s, color .15s, transform .15s; }
.bot-chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.bot-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.bot-input input { flex: 1; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 22px; font: inherit; }
.bot-input button { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; font-size: 15px; cursor: pointer; }

/* topbar tank search */
.tank-search input { background: #ffffff14; border: 1px solid #33475699; border-radius: 18px; color: #e6eef5;
  padding: 7px 15px; font: inherit; font-size: 13px; width: 170px; transition: width .2s, background .2s, border-color .2s; }
.tank-search input::placeholder { color: #8fa7b8; }
.tank-search input:focus { width: 230px; background: #ffffff22; outline: none; border-color: #6db6e8; }

/* ---------- media ---------- */
.media-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.media-btn { display: block; text-align: center; background: var(--card); border: 1.5px dashed var(--accent); border-radius: var(--radius); padding: 18px 6px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 8px; }
.gallery a { display: block; height: 86px; border-radius: 8px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-align: center; line-height: 86px; font-size: 24px; box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inline-form { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.inline-form input, .inline-form select { width: auto; flex: 1; }
.btn-link { font-weight: 700; }
.empty { color: var(--ink-3); margin-top: 34px; }

/* ---------- report preview (house format) ---------- */
.report-sheet { background: #fff; max-width: 740px; margin: 18px auto; padding: 52px 58px; box-shadow: var(--shadow-lg); border-radius: 3px; font: 14.5px/1.7 Georgia, "Times New Roman", serif; position: relative; }
.report-sheet .conf { position: absolute; left: 16px; top: 60px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .2em; color: #9aa5ad; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2.5px solid var(--ink); padding-bottom: 14px; margin-bottom: 20px; }
.report-head .co b { font-size: 19px; letter-spacing: .05em; }
.report-head .co span { display: block; font-size: 11.5px; color: var(--ink-3); }
.report-head .refs { text-align: right; font-size: 13px; }
.report-title { text-align: center; font-weight: 700; font-size: 17px; letter-spacing: .12em; margin: 26px 0 4px; }
.report-subtitle { text-align: center; font-size: 13px; letter-spacing: .1em; color: var(--ink-2); margin-bottom: 24px; }
.fm { width: 100%; border-collapse: collapse; margin: 8px 0 26px; font-size: 13.5px; }
.fm th { text-align: left; width: 30%; font-weight: 700; vertical-align: top; padding: 5px 8px 5px 0; }
.fm td { padding: 5px 0; }
.report-sheet h4 { font-size: 13.5px; letter-spacing: .08em; margin: 26px 0 8px; text-transform: uppercase; }
/* Drafting engine: gap markers, traceability, adjustment tables */
mark.tc { background: #fff3c4; color: #7a5a00; padding: 0 3px; border-radius: 3px; font-size: .92em; }
.flags-banner { background: #fff8e1; border: 1px solid #f0dea0; border-radius: 8px; padding: 10px 14px;
  margin: 4px 0 18px; font-size: 13px; color: #6b5518; font-family: "Inter Variable", system-ui, sans-serif; }
.rep-list { margin: 4px 0 10px 22px; }
.rep-list li { margin: 2px 0; }
/* Arabic twin of each section — the text that issues on the Arabic PDF */
.ar-twin { background: #f7f9fb; border-inline-start: 3px solid #c8d6e2; border-radius: 6px;
  padding: 8px 14px; margin: 8px 0 12px; text-align: right;
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif; line-height: 2; }
.ar-twin h5 { margin: 0 0 4px; font-size: 13px; color: #33627f; font-weight: 700; }
.ar-twin ol { margin: 4px 22px 6px 0; padding-inline-start: 22px; }
.adj-wrap { overflow-x: auto; margin: 8px 0 14px; }
.adj { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adj th, .adj td { border: 1px solid #ccd4dc; padding: 5px 8px; text-align: left; vertical-align: top; }
.adj th { background: #f2f5f8; }
.adj tr.foot td { font-weight: 700; background: #fafbfc; }
.sources { margin: 2px 0 14px; font: 12px/1.5 "Inter Variable", system-ui, sans-serif; color: #7a8aa0; }
.sources summary { cursor: pointer; user-select: none; }
.sources ul { margin: 4px 0 0 20px; }
.sources li { margin: 1px 0; }
.report-sheet .closing { margin-top: 30px; }
.report-sheet .sig { margin-top: 44px; font-size: 13.5px; }
.report-sheet .sig b { display: block; margin-bottom: 26px; }
.report-actions { max-width: 740px; margin: 0 auto 40px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.review-bar { max-width: 740px; margin: 14px auto; background: var(--card); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--warn); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.review-bar .review-text { flex: 1; min-width: 240px; font-size: 14px; line-height: 1.55; }
.big-issue { font-size: 15.5px; padding: 12px 22px; white-space: nowrap; }
.btn-like { display: inline-block; padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 13.5px; align-self: flex-start; }
.btn-like.primary { background: var(--accent); color: #fff; }

/* ---------- small screens: contain, compact, keep controls reachable ---------- */
@media (max-width: 700px) {
  body { overflow-x: hidden; }                     /* tripwire — the page must never pan sideways */
  h1 { font-size: 27px; overflow-wrap: anywhere; } /* long claim refs must wrap, not stretch the page */
  .kv, .docs, .assess-table { display: block; overflow-x: auto; }   /* wide tables scroll inside themselves */
  .chart-card canvas { max-width: 100%; }
  .assess-table input.num { width: 84px; }
  .inline-form { flex-wrap: wrap; }
  .media-buttons { grid-template-columns: 1fr 1fr; }
  /* compact tank grid: two smaller tanks per row instead of one screenful each */
  .tank-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .tank-glass { height: 170px; }
  .tank.big .tank-glass { height: 300px; }
  .mark { font-size: 9.5px; padding: 1px 5px; }
  @keyframes rise { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-150px); opacity: 0; } }
  /* the water-state filter stays reachable mid-list */
  .chips { position: sticky; top: 8px; z-index: 6; max-width: 100%; overflow-x: auto; }
  /* touch targets ≥ 40px on the daily-driver controls */
  .docs input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
  .docs td { padding: 12px 10px; }
  .row-actions button { padding: 9px 12px; }
}