/* ============================================================================
   Strata IT ServiceDesk — design system
   One stylesheet, custom properties, no framework.
   Visual language: Microsoft 365 adjacent — calm, dense, professional.
   ========================================================================== */

:root {
  /* This portal commits to ONE light theme, deliberately. It sits next to
     SharePoint and Outlook web all day, both of which are light by default in
     this tenant, and an internal tool that disagrees with the two windows
     either side of it looks like a different piece of software. Declaring
     color-scheme here rather than relying on the host means the native
     controls — selects, date pickers, scrollbars — stay light too, and every
     colour below is painted explicitly rather than inherited from whatever
     ground the page happens to land on. */
  color-scheme: light;

  /* neutrals — very slightly cool, chosen not inherited */
  --n0:  #ffffff;
  --n5:  #f7f9fa;
  --n10: #f0f3f5;
  --n20: #e3e8ec;
  --n30: #d0d7dd;
  --n40: #b0bac2;
  --n60: #6d7a85;
  --n80: #3d4952;
  --n95: #1d262d;

  /* Primary and accent are sampled from the Strataglobal logo, not chosen to
     look near it: #004271 and #8AB23F are the two ink colours in the mark
     itself. The portal and the letterhead therefore agree exactly, which is
     the difference between "corporate blue" and "our blue". */
  --pri:      #004271;   /* brand navy */
  --pri-hov:  #003459;
  --pri-act:  #002743;
  --pri-wash: #e9f0f6;
  --pri-line: #b3c8d9;

  /* Brand green. Used as an accent ONLY — never to mean "success", which has
     its own colour below. Two greens with two meanings would be worse than
     none. */
  --brand:    #8ab23f;

  /* semantic — status only, never decoration */
  --ok:        #17694a;
  --ok-wash:   #e6f2ec;
  --warn:      #8a5a0b;
  --warn-wash: #fdf2e0;
  --crit:      #a12a1c;
  --crit-wash: #fbeae7;
  --info:      #1b5e8c;
  --info-wash: #eaf2f8;
  --idle:      #5b6770;
  --idle-wash: #eef1f3;

  --radius: 4px;
  --radius-lg: 6px;
  --sh-1: 0 1px 2px rgba(29,38,45,.08);
  --sh-2: 0 2px 4px rgba(29,38,45,.08), 0 8px 20px -12px rgba(29,38,45,.24);
  --sh-3: 0 8px 16px rgba(29,38,45,.12), 0 24px 48px -20px rgba(29,38,45,.3);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-d: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --hdr-h: 48px;
  --max: 1280px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--n95);
  background: var(--n10);
  -webkit-font-smoothing: antialiased;
}

/* Safety default for every inline icon. Component rules later in this file
   override it where a different size is wanted (action cards, empty states,
   the gate page). Without this, an icon in a context nobody thought to style
   expands to fill its container. */
svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- a11y */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--n0); color: var(--pri); padding: 10px 16px;
  border: 1px solid var(--pri); border-radius: var(--radius);
}
.skip:focus { left: 8px; top: 8px; }

/* ================================================================ HEADER */
.hdr {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr-h);
  background: var(--pri);
  color: #fff;
  display: flex; align-items: center;
  padding: 0 16px;
  gap: 14px;
  /* A 2px rule in the brand green. One accent, in one place, tying the chrome
     to the logo — rather than green scattered through the interface where it
     would collide with the success colour. */
  border-bottom: 2px solid var(--brand);
  box-shadow: var(--sh-1);
}
.hdr-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-d);
  font-weight: 600; font-size: 15px;
  letter-spacing: .1px;
  white-space: nowrap;
}
/* The real mark, on a white chip.
   The logo is navy and green; the navy half would all but vanish against the
   navy header bar, so it sits on white with a little breathing room — the way
   it does on a letterhead. Embedded as a data URI rather than a file because
   Deploy-Portal.ps1 publishes index.html, css/ and js/ only, so an img/ folder
   would be left behind and the header would show a broken image. */
.hdr-logo {
  width: 62px; height: 30px; flex: 0 0 62px;
  border-radius: 4px;
  background-color: #fff;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAAAwCAYAAAB+BQYAAAARc0lEQVR42t2ce5RU1ZXGf/uce29VYyNqFF8Bn2gkk2hEYwSlAY0aVxInGauTzBqdictBE0FePpM4RWlGbZA3ATWPtfKcpGsGBMQYlW5axkd8x0cnMZqgBo1PfNFdXfees+ePWw0NAbq7usBM7p+9qu6pu88+3/6+b+/b8AFc+XxDAJDL5WzTqrFn55tHRgD51vTvNb0aKvf81LQ6Jkz/BmMvPZF0cQvI7nzu3boYiuSKmGIjrum20QeJDecG1nzJOb8ieZ+pV3+lbX2uGVvM4RF0wM+WzwuFgmf81I8iZiE2nICPX0aZSsvcYmXrDRT87nh8s/uyGYOgxUbcTavGnWlMuC5bZ7+UJN5HdfYcW8+9TavGfr7YiEPQfH4Avy3NWk0DPe18xLZigwkkZQfmIIw0M2HKbHK5CAq+8vm/j8xubs7Zxsaim3jLqPCIA+q/aQP5hrUSlsvOCWIVdWForHfqvWd2JqjLTzn7zq7u7/UbNtraEk6fOAStb0LMRaiCdw4Ri6pHRLCR4OO78PHXaV30PLlmS7HRw4BP1AcTbFUEEBH89SsajgytWRxl5MxyyaFePSI9s9cDJjvIUi75tUlnPOmq3H3P5BUzE1R6hZW8gZkKojRM+xSBfAcTHo/rqnxPZCtAUzxBZHHxn3HJ12hbePuuhpVdBiN5xYigIvjZK8Y2Rpa2KCNnljqdU49uE+ju36KdHYkLIzPOZoPW2SsbzisIXgTNa97sPNAFD6KMnz4ZK/dg7PG4cpIGWeSvkkywJF0OYz5MECzntOnXkK/cZxfBiuxK2Mg3N9TXZ+U6sUwVEZIkhY3e66i6wForBpxzS9+P5RuFL7S9vQNYEUD59IyhOL8IGzbiE/Deb2dDt3f80s8FISTxCmL9Guvmv0IuZyn2E8J2Z7BVkZkz81IoFPwN/zPm2CAKlmTqgtGljkRRFOn7SVJNYSO7RyDlknvEld0lV31x3UPkMZCHQsFvzujTpoxDgx9h7TCS2CFqtpPNvewvnjCyJMmzJP5i7p3XClq5h+jfFIzkmnNWBC0UCr5pZcOFYTZsCTN2dOem2FW2tV9riSAiSGlT7MJQTrCRvfv6ZQ2TKOApVI56vvvT9h3wr20GiGqSLoWVBGOOIjSrOW369DTIorWClVrcRJqbc7bQWHTXLzvtQ2edN3xxGJq8KnVx7JyIDEg8iIhJEu8Rye65J2d/4qwRI35rzrq/o/jD9xg61ND+DPzprFc4csxPSdwQrD0JRFB1/d1gEIN3HpEIE5zJIScdySEnr+OO728il7O0t+sHBiP5PGbmzJQpzFpxyhjELs0OCj5W6oi9qojIwGFKNQWETOj0+T/X+1X3HWHXvxj9blB98vVNKxe1AkJD3tJWSAAYP+UCjL0JCfbGlVO6V82qKimsxOUnMe5C1ix8mHzeUKgwnt0Z7J7FqmnFuBk24FobyKByaXM2D/jyKoSBRxXWPTaUO9cdTFdn4MgaK+q6rMTXJfcsuh5QGvIBQ9uVYtFx2uRPoOEtBNGJxCWfQotIFTF3BKHF+XdRfxmt875byTKT1oxdHWxFmouYxkbcdf916rC6PezcIGvOjcse9d7BwAOtlYyuixyvv51hZeswnvzthyBQxGiFoxuDDTAarwrrzJSuVXP+BDlLw0ihrZDQMGUvjJmNDS5EPRV4MFUE3GOMQSxofAud717O/T94rxq2Iv2FjUIBD3DjyrGfsUYWZbL2iFJH4lTF1AI2vII1Shh6nnp2b5a3DOOtN+qQjN8MK9sKE/Hll5RkMmsWrUhVZD7YAivT/h1hDjYYTJI4hOpgBRSbMbj4AYxexD3znqqwIe2r6pT+wsYtt4wK395/j2tsYK42VoI47ht37lOgvRBFjnJs+NX9B9L20AF4bzGhw3vZ8VE3gQXvwd3Eppdn8mCxMw04HgqecVNOwtibseFxuC6fPnc1sEIFVpI3QSfRMu/n/VGdtg97Kh/9KLaxsd01rRo7orxn5ieZuuCCJPHGJ97XAp+7s7Uu69jw6iB+uvpwHntyPzQgdU5UdkZXDOo9YAgyYwjqT2H4iY/QNusvMNQw6pSAB5a8yIhPFXH+QGx4HKhs9kj6hwMG7x3W7AFyLoeeNJhDjr6XFxbEfWEr0ht3LnYXweXjvmQj5oaROajUmThRMdQENoTAeowov35qX25v+zCb3o8wkcdrP/NO8WnmuTcQdxlr5v8QgFETQx69NU5hZepkjL0eY+pTAVQlW0EgiIQkvgeNL07NrJylWNyhmSW9wcbi1ob6zk1ynRGm0g/J3ddAZ6OEdzdF3N52MA/9ZigYRazfeTb3dtSNsYiAd7fSwdU8OO8tGvIB4yqCaNzUMVi5FRuNJC5Xozgrm6ueIGPxyUuou4SW+at2xlbs9p26vJk0aYmftXz0ceXYNmfq7LlJ2XvvVWsR6G7unM04nn1hT3608nB+/9w+SOQRQ/WB3qxUveK9EmZOwPqzOPyTv6G16UXaxgmjjg544DvrOXLMf+PcwQThsVXCiiBiUuvW7AU0cthJwvlnrtuscLeBFdkhbKwYO9FauTGI7N5dpcQJYmrhpXgVosDjPLQ+fAB3338Qcdliop0Uwep31WFDi/r3wf0Ha+bPSx80H1EslAGYMG0GmOswpg5XJVvp6ZG78gpimcy6uS9tCyvSQ3Kbxsaiy/+0Yd/6IdIUhHKBixXnvatVNgNkM55X38xwW8sw2n+/D4QV7ryrLPtunmwCcEkRdBot8zZsxVbGT5qAySzBBkensEI1idXTI38O4om0LGrtqTqlwp0V0KblY0+VkCXZbPAPpQ7nVamN5CblzoFVHvvd3qxoGcY7G+uQjNuWO++6NoZKdyD+iIsvoW3RnVsVz1OnHkgoi7HRF3ExqK9WBFVOkyuh+i1a5s1JT1PObg5k022nXm5DO9MGZlC5K6lZEezukZTKhrsfPJB1j+yPerNz7rzrYt4NKzHqmnCPF2hrS7aIoLxh/DtXIOY6rA1wsVYp8zcrXFzyMxxTaJv7hty4bOwxNpQbgsick8Qe79RLNTvaC4T8ePVhPP3E/pjBZRQdWBEcKKyIGGwILlmLxNNZs+gJcjmzWX6Pn3oGxswGPoZ6qgp4t+oMMoY4fgyj3zQmkkNUOcUYQZ0m1d24F9PcKKef9BdGHPMGvsugKrtglb57tkCCAsIovBkGKCNHpmYWQOv8u/B6P8YIWm0DWAQVJSkrUeZ4lPMl9TnGDLcmmB9G9gtJ2desKPa8otBTKhvuefBAWn99IC4xu4aB9MrBxabFMl6NJlNoXfR8KrcBCp7TpxyDt4sxdgK+ShjZ7BhGFu/ex/kradjzZslr3hQkJeBNq8ZNsUYLQWiHdJVqpxK7D5UxEIWOp/6wF7e1DOeN1wftriKZChAbWXyyyeCu8y17zYaC30pdnjbtfFRmY8OhaVd+APCRmlZPoPEltC66fzP124qR3NZwgrEszNTZk0sdTlFVaoThPa3TN9/NsKr1wzz+zL4V69TvIhxXDykHFl9+TPGTWLPggRREJgY8emtMw/R9MXoD1l641YxJtSdHDDj9HoM6rmD10o3dMykWoK0tRbDm5py96J/u2PDxzwz5+aAwtCIy2obWOOddLYqmVEpN7CyDMo6PH/U29fVl1m+oJy4FmLDGfFtx2MCKIBY3b68w+Wrn3QufZ9TEkFce9bzyqGPctAasNBNGZ5HEHpQqkqsi3SOL1zfxyWRa513LHx4ppcKm4LbrjWwFK8vHnm1DMzfM2qO7atjq2kqyR44/bqhn+ZrhvPDiYIg8IgOFFU27+UHGiMZ/NJJc5u5euHwr9ZjLWd48+ErEXIPYLK5qU2rzycGVHwB3MS0Ln9xeC012ZKs2FnOm2Fh0s25vOADVWUFoz/NOca62xdN7IRM5Orssd953EPc+uj94wQQeXw2sdBtRxmApF0MpzyjdtfSlrdtm049CmYcNz8bHfZ8x2S5vtzbFRz8Pa67h7jmbdtTFkb40DABmr2z4qhhpCjNmv1Jn4qhRZ2ZL8VTCQHn8d3uzsnUYG9/qt8LcbLEajd8Og+Qb5TsXLVWAkbmI9mLqhYyf8hWMmYuJDiCpgePn4ldQP5XW+c3dSnFH7bJeF+meJi0U8DcuG3uMjWR+lLFnlEsO72sngLZ4J47X3spyW8swnvn9Pn0rnj0UW0B5bRQlUztWL/4N5A2jXrE8emvM6VcOwZVvxNqLB1YEu0VRBC6+C6eX0DbvOchZKO50MLPXxdra0LY2tLk5Zy8695evHdaw7y+GZIMuMebkMGOjCqwMvHhWGlVxbBk8KOHYozeSzSas31CPKwcYuwN1UZHgRnw5Cso3jD7wnYueK353Q1oE56ZF8NNTx+D054TR51IJXlURrKwVWCDBu//kL3/+Go98//XUTu29+du/hq9iCpI2fGfffupY1C7I1NnjOjclKqIKtcvy7uL57IuDWb5mOBs2DN4GVtSjAkFkLKX2+qg85d3VS+/RrTozecP496YjXIu1ddU3fLdy9Najegmt8+6oRKXPU6/9WritsIUiTvzCL9ePbjzkF1b9YBvIJ60VcU5rQxErKVBOLEP36eLjIzZSSgwvvVwPKoioQwJrrEhoy987/EOd//LysluepiEfcCiGB5YlnDnlUIaXf0gQTkJ9WBllqBI2jCEIDT5Zhkm+TMuCRyrNAaCtz7yp6gLXs9Fw46pTzrVi50QZO7yrI/FK7SiiVyEwHmuVh5/eR1etHe7fKw2yQdD1cl0mufL9VYt/omlhiihWiuCEKTkIbsIGw9MiSHWNj26X0PtOvJvJ2vmzeiuCNcvsnld7sV0rw+7mmotefGbsPw5fYYRhYSYYiSJetWZY7lVIvLgjhm0yI4/qMC+/Gq0W3/XPb6+8uRXyhvw4YcmShE9O3pOPjGlC7ByMDMEnCULQ/0B3j59lLC7+LbH7Mvcu+Fl6n7yhfUlVw/I1yb6tKeK4S8XotUFUI39FUUV9lLU2LuumbOAKk89aN0eEtM/X3OwRUcZfOgoJbsaGJ+DKqRKsZrM3S24L3v0IK5dz95zXeuuc77Zgd1PE7iHLb6889fiMmIWZOjum1OG20KXqaJZkB1kpldzD1iWXzjjnvgdBhfzM9LcXCp4JUz+H2OUYa3HlGCQckFPnkndQrqZ17tKBwMZfWc21CnahgBdJs/xbn1/32Ps6+IyuTn+jCD6IrAFN+pnQLgitESN0dSTzN23sPH3GOfc92NycsyBpkAuF1JV20eOo/oB01DBEcf2GDVRT2EgeRpJP0zp3afraR97U6g2EXWImb1U8V479TGBkXpS1R5c6nO9tk1VRAc3sYU1c8n/yMO2Kz65dse19t3uNn3oeYuZgg/3SAZw+FEbFYU26gd4t5f3kKh5a9O7f/GseO/JXZv/q5KG+K5odReZ875Uk2b6/oqreWmOC0FAuu1+UsTO+9bmWDblmbHMufZFpx8+RFyh4JkweiYSLseF4kvLOIKzHBFXyOupn0Dr/xxVMrGok+AML9vaK56wVDf8mhllR1u7X1bll8lUVRdRnsoGNy26j4q++4rPrbtn2+70fqUo2NvxrFrP3TMRehhGbzoP03NyKU5eOj63FJZNpW/h0f6dSdxv16+tVLLZrPo9ZuxZO+cgLT5z5lUNXOdURmWwwwjtEVRNjxGbqApOU/Vp17stXfP5/7+imlZMmtfc9w9rbFfKGFxbErH/wHg476XHQ0djM3qkXooLiMYFFAB/PIXIXsGZR+nZYlZTubyazt5flueacPTH76lVizDezg2xdV2dSdk6bOkpvfLvQ2F7O5xuCQqEtGdhz5QwUHeNnHILoAoLwHFwMJoQk3oC4SbQsuK2/kvv/1dXznfSmleMaZq8et2zWylPP6Om/1K5S93jLa/y0yzn9so1MmL6a06YeviXICH/XlyLbvrGbz+cNuisevMc64ycdy6iJg4At/xpjN17/BwyVIHw/Qx4RAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.hdr-sep { width: 1px; height: 22px; background: rgba(255,255,255,.28); }
.hdr-title { font-weight: 400; font-size: 14px; opacity: .95; white-space: nowrap; }
.hdr-spacer { flex: 1 1 auto; }

.hdr-nav { display: flex; gap: 2px; }
.hdr-nav a {
  color: rgba(255,255,255,.92); text-decoration: none;
  padding: 6px 11px; border-radius: var(--radius);
  font-size: 13.5px; white-space: nowrap;
}
.hdr-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.hdr-nav a[aria-current="page"] { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }

.hdr-user {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; color: #fff; cursor: pointer;
  padding: 4px 8px 4px 4px; border-radius: var(--radius);
  font-family: inherit; font-size: 13.5px;
}
.hdr-user:hover { background: rgba(255,255,255,.14); }
.avatar {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}
.avatar.lg { width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; }
.hdr-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* demo banner */
.demo-bar {
  background: var(--warn-wash);
  border-bottom: 1px solid #e8cf9e;
  color: var(--warn);
  font-size: 12.5px;
  padding: 7px 16px;
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  text-align: center;
}
.demo-bar strong { font-weight: 600; }

/* ================================================================ LAYOUT */
.wrap { max-width: var(--max); margin: 0 auto; padding: 22px 16px 72px; }
.wrap.narrow { max-width: 860px; }

.layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 0 26px; }

.side {
  position: sticky; top: calc(var(--hdr-h) + 22px);
  align-self: start;
}
.side-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--n60);
  padding: 0 10px 8px;
}
.side nav { display: flex; flex-direction: column; gap: 1px; }
.side nav a {
  display: block; padding: 7px 11px; border-radius: var(--radius);
  color: var(--n80); text-decoration: none; font-size: 13.5px;
  border-left: 3px solid transparent;
}
.side nav a:hover { background: var(--n20); color: var(--n95); }
.side nav a[aria-current="page"] {
  background: var(--pri-wash); color: var(--pri); font-weight: 600;
  border-left-color: var(--pri);
}
.side-div { height: 1px; background: var(--n20); margin: 10px 8px; }

/* ============================================================== TYPOGRAPHY */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-d); letter-spacing: -.1px; }
h1 { font-size: 26px; font-weight: 600; line-height: 1.22; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n60); }

/* --------------------------------------------------------------- back ---
   A quiet control that sits above the title on every page except the
   dashboard. Above, not beside: beside the H1 it competes with the page's
   own actions, and on a phone it would wrap underneath them anyway. */
.page-back { margin: 0 0 10px; }
.page-back .btn { padding-left: 8px; color: var(--n60); }
.page-back .btn:hover { color: var(--n95); }
.page-back .btn svg { margin-right: 2px; }

.page-head { margin-bottom: 20px; }
.page-head h1 { margin-bottom: 5px; }
.page-head p { margin: 0; color: var(--n60); font-size: 14px; max-width: 68ch; }
.page-head-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head-row > :first-child { flex: 1 1 320px; }

.muted { color: var(--n60); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: .92em; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* =============================================================== SURFACES */
.card {
  background: var(--n0);
  border: 1px solid var(--n20);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-1);
}
.card-pad { padding: 18px 20px; }
.card-head {
  padding: 13px 20px; border-bottom: 1px solid var(--n20);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { flex: 1 1 auto; }
.card-foot { padding: 13px 20px; border-top: 1px solid var(--n20); background: var(--n5);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------- action cards */
.actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px; margin-bottom: 30px;
}
.action {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; text-decoration: none;
  background: var(--n0); border: 1px solid var(--n20);
  border-top: 3px solid var(--pri);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  color: var(--n95); cursor: pointer; font-family: inherit;
  box-shadow: var(--sh-1);
  transition: box-shadow .13s ease, transform .13s ease, border-color .13s ease;
}
.action:hover { box-shadow: var(--sh-2); transform: translateY(-1px); border-color: var(--n30); border-top-color: var(--pri); }
.action:active { transform: none; box-shadow: var(--sh-1); }
.action-ico { width: 30px; height: 30px; color: var(--pri); }
.action-ico svg { width: 100%; height: 100%; display: block; }
.action-t { font-family: var(--font-d); font-size: 15.5px; font-weight: 600; }
.action-d { font-size: 13px; color: var(--n60); line-height: 1.45; }
.action-meta { font-size: 11.5px; color: var(--n60); margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------------------- KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi {
  background: var(--n0); border: 1px solid var(--n20); border-radius: var(--radius-lg);
  padding: 13px 15px 12px; text-decoration: none; color: inherit; display: block;
  box-shadow: var(--sh-1); cursor: pointer; font-family: inherit; text-align: left;
  border-left: 3px solid var(--n30);
}
.kpi:hover { border-color: var(--n30); border-left-color: var(--pri); box-shadow: var(--sh-2); }
.kpi-n { font-family: var(--font-d); font-size: 27px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-l { font-size: 12px; color: var(--n60); margin-top: 2px; }
.kpi.is-crit { border-left-color: var(--crit); }
.kpi.is-crit .kpi-n { color: var(--crit); }
.kpi.is-warn { border-left-color: var(--warn); }
.kpi.is-warn .kpi-n { color: var(--warn); }
.kpi.is-ok { border-left-color: var(--ok); }

/* ================================================================= BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  padding: 2px 8px; border-radius: 11px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.badge.no-dot::before { display: none; }
.b-open      { color: var(--info); background: var(--info-wash); border-color: #c3daea; }
.b-progress  { color: var(--warn); background: var(--warn-wash); border-color: #ecd6a8; }
.b-approval  { color: #6a3d8f; background: #f2ebf8; border-color: #dcc9ec; }
.b-user      { color: #8a5a0b; background: var(--warn-wash); border-color: #ecd6a8; }
.b-resolved  { color: var(--ok); background: var(--ok-wash); border-color: #bcdcca; }
.b-closed    { color: var(--idle); background: var(--idle-wash); border-color: var(--n30); }
.b-rejected  { color: var(--crit); background: var(--crit-wash); border-color: #eec5be; }
.b-cancelled { color: var(--idle); background: var(--idle-wash); border-color: var(--n30); }

/* Priority meter — four slots, N filled. Colour AND fill count AND the word,
   so it never depends on colour alone. */
.pri-pip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; white-space: nowrap; }
.pri-bars { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.pri-bars i { width: 3px; height: 12px; border-radius: 1px; background: var(--n20); display: block; }
.pri-bars i.on { background: var(--n40); }
.pri-critical { color: var(--crit); font-weight: 600; }
.pri-critical .pri-bars i.on { background: var(--crit); }
.pri-high { color: #8a3d0b; font-weight: 600; }
.pri-high .pri-bars i.on { background: #c2571a; }
.pri-medium .pri-bars i.on { background: #b58317; }
.pri-low .pri-bars i.on { background: var(--n40); }

.sla-pill {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 3px; white-space: nowrap;
}
.sla-ok     { color: var(--ok); background: var(--ok-wash); }
.sla-near   { color: var(--warn); background: var(--warn-wash); }
.sla-breach { color: var(--crit); background: var(--crit-wash); }

.tag-kind {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--n10); border: 1px solid var(--n20); color: var(--n60);
  white-space: nowrap;
}

/* ================================================================ CONTROLS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid var(--n30); background: var(--n0); color: var(--n95);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--n10); border-color: var(--n40); }
.btn:active { background: var(--n20); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-pri { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn-pri:hover { background: var(--pri-hov); border-color: var(--pri-hov); }
.btn-pri:active { background: var(--pri-act); }
.btn-danger { color: var(--crit); border-color: #e2b4ac; background: var(--n0); }
.btn-danger:hover { background: var(--crit-wash); border-color: var(--crit); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #12563b; border-color: #12563b; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--n20); border-color: transparent; }
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ forms */
.form { display: flex; flex-direction: column; gap: 0; }
.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset + .fieldset { margin-top: 4px; }
.fieldset legend {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--n60); padding: 0 0 4px; margin: 20px 0 10px; width: 100%;
  border-bottom: 1px solid var(--n20);
}
.fieldset:first-of-type legend { margin-top: 0; }

.grid { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.grid.g1 { grid-template-columns: 1fr; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-all { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  font-size: 12.5px; font-weight: 600; color: var(--n80);
  display: flex; align-items: baseline; gap: 6px;
}
.req { color: var(--crit); font-weight: 700; }
.opt { font-weight: 400; color: var(--n60); font-size: 11.5px; }
.hint { font-size: 11.5px; color: var(--n60); line-height: 1.4; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="search"], select, textarea {
  font-family: inherit; font-size: 13.5px; color: var(--n95);
  padding: 8px 10px; border: 1px solid var(--n30); border-radius: var(--radius);
  background: var(--n0); width: 100%; min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; min-height: 82px; line-height: 1.5; }
select { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236d7a85' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; }
input:hover, select:hover, textarea:hover { border-color: var(--n40); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-wash);
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--n10); color: var(--n60); border-color: var(--n20); cursor: default;
}
.field.err input, .field.err select, .field.err textarea { border-color: var(--crit); }
.field.err input:focus, .field.err select:focus, .field.err textarea:focus { box-shadow: 0 0 0 3px var(--crit-wash); }
.err-msg { font-size: 11.5px; color: var(--crit); font-weight: 600; display: none; }
.field.err .err-msg { display: block; }
.count { font-size: 11px; color: var(--n60); text-align: right; font-variant-numeric: tabular-nums; }

/* read-only identity strip */
.identity {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 20px;
  background: var(--n5); border: 1px solid var(--n20); border-radius: var(--radius);
  padding: 13px 16px;
}
.identity div { min-width: 0; }
.identity dt { font-size: 11px; color: var(--n60); font-weight: 600; letter-spacing: .02em; }
.identity dd { margin: 1px 0 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.identity-note { grid-column: 1/-1; font-size: 11.5px; color: var(--n60); margin: 0; }

/* radio / choice cards */
/* ---------------------------------------------------------------- chips ---
   A chip is a radio button wearing a card. Three things keep it honest:

   1. The label and its explanation are a flex COLUMN, each display:block.
      As inline spans they ran together — "LowInconvenient, can wait" — and
      then wrapped mid-phrase. That was the first build and it looked broken
      because it was.
   2. min-width: 0 on the body, so long text wraps inside the chip instead of
      forcing the grid track wider and shoving the last chip onto its own line.
   3. align-items: stretch on the grid, so a chip with two lines of
      explanation is the same height as one with a single line. Ragged chip
      heights are the thing that reads as "unfinished" before anybody can say
      why.
*/
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  align-items: stretch;
  gap: 8px;
}
.choice {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--n30); border-radius: var(--radius);
  padding: 11px 13px; cursor: pointer; background: var(--n0);
  min-width: 0;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.choice:hover { border-color: var(--n40); background: var(--n5); }
/* Visually hidden but still rendered, focusable and hit-testable. A 0x0
   input is treated as not rendered by some assistive tech and by automated
   testing, so keep it 1px and clipped rather than collapsed. */
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none; }
.choice-dot {
  width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px;
  border: 1.5px solid var(--n40); border-radius: 50%; background: var(--n0);
  transition: border-color .12s ease, border-width .12s ease;
}
/* Both the dot and the card are driven by .is-on, which SD.dom.choiceGroup
   sets on the change event. See the comment there: the CSS-only version using
   :has(input:checked) painted a stale chip after the selection moved. One
   source of truth, and it is the one a test can read. */
.choice.is-on .choice-dot { border-color: var(--pri); border-width: 4.5px; }
.choice.is-on { border-color: var(--pri); background: var(--pri-wash); box-shadow: inset 0 0 0 1px var(--pri); }
.choice input:focus-visible ~ .choice-dot { outline: 2px solid var(--pri); outline-offset: 2px; }

.choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.choice-d { display: block; font-size: 11.5px; color: var(--n60); line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .choice, .choice-dot { transition: none; }
}

.checkline { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.checkline input { margin: 3px 0 0; flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--pri); }

/* file input */
.dropzone {
  border: 1.5px dashed var(--n30); border-radius: var(--radius);
  padding: 16px; text-align: center; background: var(--n5); cursor: pointer;
}
.dropzone:hover { border-color: var(--pri); background: var(--pri-wash); }
.dropzone input { position: absolute; opacity: 0; width: 0; height: 0; }
.dropzone p { margin: 0; font-size: 12.5px; color: var(--n60); }
.filelist { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.filelist li {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  background: var(--n0); border: 1px solid var(--n20); border-radius: var(--radius); padding: 5px 9px;
}
.filelist .fname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ TOOLBAR */
.toolbar {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px; background: var(--n0);
  border: 1px solid var(--n20); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 0;
}
.toolbar + .table-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.searchbox { position: relative; flex: 1 1 220px; min-width: 170px; max-width: 340px; }
.searchbox svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--n60); pointer-events: none; }
.searchbox input { padding-left: 31px; }
.toolbar select { width: auto; min-width: 118px; flex: 0 0 auto; font-size: 12.5px; padding: 7px 28px 7px 9px; }
.toolbar .spacer { flex: 1 1 auto; }
.result-count { font-size: 12.5px; color: var(--n60); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--pri-wash); color: var(--pri); border: 1px solid var(--pri-line);
  border-radius: 12px; padding: 2px 4px 2px 9px; font-weight: 600;
}
.chip button { border: 0; background: none; cursor: pointer; color: inherit;
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; padding: 0; font-size: 14px; line-height: 1; }
.chip button:hover { background: var(--pri-line); }

/* ================================================================= TABLES */
.table-wrap {
  background: var(--n0); border: 1px solid var(--n20); border-radius: var(--radius-lg);
  overflow-x: auto; box-shadow: var(--sh-1);
}
table.data { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13px; }
/* In-card summary tables live in a narrow column, so they must not carry the
   full queue min-width or they scroll for no reason. */
table.data.compact { min-width: 0; font-size: 12.5px; }
table.data.compact th, table.data.compact td { padding: 8px 11px; }
.table-wrap.in-card { border: 0; box-shadow: none; border-radius: 0; }
table.data th, table.data td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--n20); vertical-align: top; }
table.data thead th {
  background: var(--n5); font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--n60); white-space: nowrap;
  position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--n30);
}
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--n95); background: var(--n10); }
table.data thead th .sort-ind { opacity: .45; font-size: 9px; margin-left: 3px; }
table.data tbody tr:hover { background: var(--pri-wash); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr.clickable { cursor: pointer; }
table.data td.ref { white-space: nowrap; }
table.data td.ref a { font-family: var(--mono); font-size: 12.5px; color: var(--pri); font-weight: 600; text-decoration: none; }
table.data td.ref a:hover { text-decoration: underline; }
table.data td.subj { min-width: 200px; }
table.data td.subj .s-t { font-weight: 600; }
table.data td.subj .s-s { font-size: 12px; color: var(--n60); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--n80); }
table.data td.act { text-align: right; white-space: nowrap; }

/* ================================================== EMPTY / LOADING / ERROR */
.state { padding: 46px 24px; text-align: center; }
.state svg { width: 40px; height: 40px; color: var(--n40); margin-bottom: 10px; }
.state h3 { font-size: 15.5px; margin-bottom: 5px; }
.state p { margin: 0 auto 16px; color: var(--n60); font-size: 13.5px; max-width: 46ch; }

.skel { padding: 16px 20px; }
.skel-row { height: 13px; border-radius: 3px; background: linear-gradient(90deg, var(--n10) 25%, var(--n20) 50%, var(--n10) 75%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; margin-bottom: 11px; }
.skel-row:nth-child(2n) { width: 78%; }
.skel-row:nth-child(3n) { width: 90%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } }

.notice {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--n20); border-left: 3px solid var(--n40);
  background: var(--n5); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 15px; font-size: 13px; margin-bottom: 16px;
}
.notice svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.notice p { margin: 0; }
.notice p + p { margin-top: 5px; }
.notice strong { font-weight: 600; }
.notice.n-info  { border-left-color: var(--pri);  background: var(--pri-wash);  color: #12435f; }
.notice.n-warn  { border-left-color: var(--warn); background: var(--warn-wash); color: #6b4508; }
.notice.n-crit  { border-left-color: var(--crit); background: var(--crit-wash); color: #7d1f14; }
.notice.n-ok    { border-left-color: var(--ok);   background: var(--ok-wash);   color: #0f5237; }

/* denied / unauthorised full page */
.gate { max-width: 520px; margin: 72px auto; text-align: center; }
.gate .gate-ico { width: 52px; height: 52px; color: var(--n40); margin-bottom: 14px; }
.gate h1 { font-size: 22px; margin-bottom: 9px; }
.gate p { color: var(--n60); margin: 0 auto 18px; max-width: 44ch; }

/* =================================================================== TOAST */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 120;
  display: flex; flex-direction: column; gap: 9px; max-width: min(400px, calc(100vw - 32px));
}
.toast {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--n0); border: 1px solid var(--n20); border-left: 3px solid var(--pri);
  border-radius: var(--radius); box-shadow: var(--sh-3); padding: 12px 14px; font-size: 13px;
  animation: toastin .18s ease-out;
}
@keyframes toastin { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.toast.t-ok   { border-left-color: var(--ok); }
.toast.t-warn { border-left-color: var(--warn); }
.toast.t-err  { border-left-color: var(--crit); }
.toast svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.toast .t-body { flex: 1 1 auto; min-width: 0; }
.toast .t-title { font-weight: 600; }
.toast .t-msg { color: var(--n60); font-size: 12.5px; margin-top: 2px; }
.toast .t-x { border: 0; background: none; cursor: pointer; color: var(--n60); font-size: 16px; line-height: 1; padding: 0 2px; }

/* =================================================================== MODAL */
.modal-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(29,38,45,.42);
  display: grid; place-items: center; padding: 20px; overflow-y: auto;
}
.modal {
  background: var(--n0); border-radius: var(--radius-lg); box-shadow: var(--sh-3);
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide { max-width: 760px; }
.modal-head { padding: 16px 20px 13px; border-bottom: 1px solid var(--n20); display: flex; gap: 12px; align-items: flex-start; }
.modal-head h2 { flex: 1 1 auto; font-size: 16.5px; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--n20); background: var(--n5);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.x-btn { border: 0; background: none; cursor: pointer; color: var(--n60); font-size: 19px; line-height: 1; padding: 0 3px; }
.x-btn:hover { color: var(--n95); }

/* ============================================================ RECORD DETAIL */
.rec-head {
  background: var(--n0); border: 1px solid var(--n20); border-radius: var(--radius-lg);
  padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sh-1);
}
.rec-ref { font-family: var(--mono); font-size: 13px; color: var(--n60); }
h1.rec-title, .rec-title { font-family: var(--font-d); font-size: 20px; font-weight: 600;
  line-height: 1.25; margin: 3px 0 10px; letter-spacing: -.1px; }
.rec-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--n60); }
.rec-cols { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 18px; align-items: start; }

dl.props { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0; }
dl.props dt { font-size: 12px; color: var(--n60); font-weight: 600; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--n10); white-space: nowrap; }
dl.props dd { margin: 0; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--n10); word-break: break-word; }
dl.props dt:last-of-type, dl.props dd:last-of-type { border-bottom: 0; }

.longtext { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.card-pad > h4 { margin-top: 22px; }
.card-pad > h4:first-child { margin-top: 0; }
.card-pad dl.props + h4 { margin-top: 24px; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; }
.timeline li::before {
  content: ""; position: absolute; left: 3px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--n0);
  border: 2px solid var(--n40);
}
.timeline li::after { content: ""; position: absolute; left: 6.5px; top: 15px; bottom: 0; width: 1px; background: var(--n20); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li.tl-pri::before { border-color: var(--pri); }
.timeline li.tl-ok::before { border-color: var(--ok); }
.timeline li.tl-crit::before { border-color: var(--crit); }
.tl-when { font-size: 11.5px; color: var(--n60); font-variant-numeric: tabular-nums; }
.tl-what { font-size: 13px; font-weight: 600; }
.tl-who { font-size: 12px; color: var(--n60); }
.tl-note { font-size: 12.5px; color: var(--n80); margin-top: 3px; white-space: pre-wrap; }

/* gate banner on a change record */
.gate-bar {
  display: flex; gap: 11px; align-items: center; flex-wrap: wrap;
  border: 1px solid #ecd6a8; background: var(--warn-wash); color: #6b4508;
  border-radius: var(--radius); padding: 11px 14px; font-size: 13px; margin-bottom: 16px;
}
.gate-bar.locked { border-color: #eec5be; background: var(--crit-wash); color: #7d1f14; }
.gate-bar.cleared { border-color: #bcdcca; background: var(--ok-wash); color: #0f5237; }
.gate-bar svg { width: 17px; height: 17px; flex: 0 0 17px; }
.gate-bar strong { font-weight: 700; }

/* stepper */
.stepper { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 16px; }
.step {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px 5px 9px; background: var(--n10); color: var(--n60);
  border: 1px solid var(--n20);
}
.step:first-child { border-radius: 12px 0 0 12px; padding-left: 13px; }
.step:last-child { border-radius: 0 12px 12px 0; padding-right: 13px; }
.step.done { background: var(--ok-wash); color: var(--ok); border-color: #bcdcca; }
.step.now { background: var(--pri); color: #fff; border-color: var(--pri); }
.step.blocked { background: var(--crit-wash); color: var(--crit); border-color: #eec5be; }

/* config editor */
.cfg-table td input, .cfg-table td select { font-size: 12.5px; padding: 5px 8px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--n20); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
  border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--n60); padding: 9px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--n95); background: var(--n5); }
.tabs button[aria-selected="true"] { color: var(--pri); border-bottom-color: var(--pri); }

/* report bars */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 128px minmax(0,1fr) 44px; gap: 11px; align-items: center; font-size: 12.5px; }
.bar-row .bl { color: var(--n80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 9px; background: var(--n10); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--pri); border-radius: 5px; }
.bar-fill.c2 { background: #3d87b8; }
.bar-fill.c3 { background: #6aa8ce; }
.bar-fill.c4 { background: #9cc6de; }
.bar-row .bv { text-align: right; font-variant-numeric: tabular-nums; color: var(--n60); }

/* Record detail, stacked cards.
   Each column of .rec-cols holds several cards; without this they butt up
   against each other and read as one long card with stray headings. */
.rec-cols > div > .card + .card { margin-top: 18px; }
.rec-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }

/* A column of full-width actions. Buttons in a side card that each size to
   their own label look like a ransom note; stretching them gives the column
   one left edge to scan down. */
.btn-col { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.btn-col > .btn, .btn-col > div > .btn { width: 100%; justify-content: center; }
.btn-col .hint { text-align: left; }

/* footer */
.foot { border-top: 1px solid var(--n20); margin-top: 34px; padding-top: 14px;
  font-size: 12px; color: var(--n60); display: flex; gap: 8px 20px; flex-wrap: wrap; }
.foot a { color: var(--n60); }

/* ============================================================== RESPONSIVE */
@media (max-width: 1020px) {
  .rec-cols { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .side { position: static; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--n20); }
  .side nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 3px; }
  .side nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
  .side nav a[aria-current="page"] { border-left: 0; border-bottom-color: var(--pri); }
  .side-div { display: none; }
  .grid.g2 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hdr-nav { display: none; }
  .hdr-title { display: none; }
  .hdr-user-name { display: none; }
  h1 { font-size: 21px; }
  .wrap { padding: 16px 12px 60px; }
  .kpi-n { font-size: 23px; }
  .actions { grid-template-columns: 1fr; gap: 11px; }
  .action { padding: 15px 15px 13px; }
  .bar-row { grid-template-columns: 96px minmax(0,1fr) 38px; }
}

@media print {
  .hdr, .side, .toolbar, .btn, .toasts, .demo-bar, .foot { display: none !important; }
  body { background: #fff; }
  .card, .table-wrap, .rec-head { box-shadow: none; border-color: #999; }
  .wrap { max-width: none; padding: 0; }
}


/* ============================================================================
   Confirmation screen
   ---------------------------------------------------------------------------
   Two blocks, in the order somebody reads them under mild stress: the facts
   they might have to quote, then what is going to happen and who does it.
   ========================================================================== */

/* A definition list, not a table: these are label/value pairs, and a screen
   reader announces them as such. Two columns on a desktop, stacked on a
   phone — the label column is sized to the longest label so the values line
   up without a fixed pixel width that breaks when a label changes. */
.factgrid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 9px 20px;
  margin: 18px 0 0;
  padding: 15px 16px;
  border: 1px solid var(--n20);
  border-radius: var(--radius);
  background: var(--n5);
}
.factgrid dt {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--n60); align-self: center;
}
.factgrid dd { margin: 0; font-size: 13.5px; color: var(--n95); align-self: center; min-width: 0; }
.factgrid .strong { font-weight: 700; }

@media (max-width: 520px) {
  .factgrid { grid-template-columns: 1fr; gap: 2px 0; }
  .factgrid dt { margin-top: 10px; }
  .factgrid dt:first-child { margin-top: 0; }
}

.next-h {
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--n95);
  margin: 24px 0 10px;
}

/* Numbered, because the steps happen in that order and somebody scanning it
   wants to know which one they are on. The counter is drawn rather than left
   to the browser so it can sit in a tinted disc and line up with the text
   above it at any wrap depth. */
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.next-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 32px;
  margin: 0 0 11px;
  font-size: 13.5px; line-height: 1.55; color: var(--n95);
}
.next-steps li:last-child { margin-bottom: 0; }
.next-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pri-wash); color: var(--pri);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}


/* ============================================================================
   Form bands
   ---------------------------------------------------------------------------
   A submission form reads in three parts: what it is about, what is wrong,
   and the practical details. The third gets a rule and a quiet label so it
   reads as "the bit you do not have to think about" rather than as three more
   questions of equal weight.
   ========================================================================== */
.form-band { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--n20); }
.form-band-h {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--n60); margin-bottom: 12px;
}

/* An unnumbered ticket still has to be clickable. It reads as pending rather
   than as a missing value, because the number is coming, not absent. */
.pending-ref { font-style: italic; color: var(--n60) !important; font-size: 12.5px; }
.pending-ref:hover { color: var(--pri) !important; }