/* Look & feel modeled on the original labapp (blue steel gradient, boxed page) */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #333;
  background: linear-gradient(180deg, #b8cfd8 0%, #7fa3b3 100%);
  min-height: 100vh;
}
.page { max-width: 980px; margin: 0 auto; background: #fff; min-height: 100vh;
        box-shadow: 0 0 18px rgba(0,0,0,.35); }
.header { display: flex; justify-content: space-between; padding: 14px 24px 8px; }
/* The company mark: static/logo-dark.svg, a vector tracing of the real letterhead logo
   (geometry in logo_art.py). Only ever sized here - never restyled, so every place it
   appears is the same artwork. */
.logo-block .logo { display: block; width: 62px; height: auto; margin-bottom: 6px; }
.logo-block h1 { font-size: 19px; color: #5b7886; margin: 4px 0 0; }
.header-right { text-align: right; }
.header-right .dept { font-size: 19px; font-weight: bold; color: #5b7886; margin-top: 48px; }
a { color: #35576b; }
.logout { font-size: 12px; }
.nav { display: flex; background: linear-gradient(180deg, #3c5a6b, #27404e); }
.nav a { flex: 1; text-align: center; color: #fff; text-decoration: none; padding: 12px 0;
         font-weight: bold; font-size: 13px; border-right: 1px solid #1d3441; }
.nav a:hover { background: #4a6b7d; }
.content { padding: 18px 26px 40px; }
h2 { color: #4a6b7a; font-size: 16px; margin: 4px 0 12px; }
.filters { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px 24px;
           margin-bottom: 18px; align-items: end; }
.field { display: flex; flex-direction: column; font-size: 11px; color: #555; }
.field label { text-align: center; margin-bottom: 2px; }
input[type=text], select, textarea {
  border: 1px solid #9ab0ba; padding: 3px 5px; font-size: 12px; font-family: inherit;
}
textarea { width: 100%; }
/* stand-in input for a searchable dropdown — looks like the select it replaces,
   with a caret so it still reads as a dropdown */
.ss-input {
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%2355707d'/></svg>") no-repeat right 6px center;
  padding-right: 18px !important; cursor: text;
}
.ss-input:focus { outline: 1px solid #6d9db2; }
.btn {
  background: linear-gradient(180deg, #9fc4d4, #6d9db2); color: #fff; font-weight: bold;
  border: 1px solid #5b8ba0; border-radius: 6px; padding: 5px 14px; font-size: 12px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { filter: brightness(1.07); }
.toolbar { margin: 10px 0 14px; display: flex; gap: 8px; }
table.grid { border-collapse: collapse; width: 100%; margin-top: 6px; }
table.grid th {
  background: linear-gradient(180deg, #bcd8e4, #9cc3d2); color: #35576b; padding: 5px 8px;
  border: 1px solid #8fb2c0; font-size: 12px;
}
table.grid th a { color: #35576b; }
table.grid td { border: 1px solid #c7d8df; padding: 4px 8px; text-align: center; }
table.grid tr:nth-child(even) td { background: #eef4f7; }

/* keep wide tables inside the page: long unbroken text wraps instead of stretching the table */
table.grid th, table.grid td { overflow-wrap: anywhere; word-break: break-word; }
/* safety net for genuinely wide tables — scrolls the table, never the whole page */
.table-wrap { width: 100%; overflow-x: auto; }
/* free-text columns: readable width, left aligned, wraps */
td.col-text, th.col-text { text-align: left; max-width: 300px; }
td.col-narrow, th.col-narrow { white-space: nowrap; }
.pager { margin: 8px 0; }
.pager a, .pager b { margin-right: 8px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; }
.frow { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 8px;
        margin-bottom: 4px; }
.frow label { text-align: right; font-size: 12px; color: #444; }
.req::before { content: "* "; color: #a00; }
.muted { color: #777; font-style: italic; }
.section { margin-top: 26px; }

/* autocomplete dropdown */
.ac-list {
  position: absolute; left: 0; top: 100%; z-index: 50; min-width: 100%;
  max-height: 260px; overflow-y: auto; background: #fff;
  border: 1px solid #7fa3b3; box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.ac-item { padding: 4px 8px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ac-item:hover, .ac-item.active { background: #d6e6ee; }
input.ac { min-width: 200px; }

/* quick date-range buttons on search */
.quickbar { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; flex-wrap: wrap; }
.quickbar .chip {
  font-size: 11px; padding: 3px 9px; border: 1px solid #7fa3b3; border-radius: 12px;
  background: #eef4f7; color: #35576b; text-decoration: none; cursor: pointer;
}
.quickbar .chip:hover { background: #d6e6ee; }
.quickbar .chip.on { background: #4a6b7d; color: #fff; border-color: #35576b; }

/* small helper button (Now / Today) */
.fill-btn {
  font-size: 11px; padding: 2px 7px; margin-left: 4px; border: 1px solid #7fa3b3;
  border-radius: 4px; background: #eef4f7; color: #35576b; cursor: pointer;
}
.fill-btn:hover { background: #d6e6ee; }

/* client message thread (office side) */
.thread { max-height:340px; overflow-y:auto; border:1px solid #dde8ec; border-radius:6px;
  padding:10px; background:#fbfdfe; }
.msg { border-radius:6px; padding:8px 10px; margin-bottom:7px; max-width:88%; font-size:12px; }
.msg-meta { font-size:10.5px; color:#6b7f88; margin-bottom:3px; }
.msg-body { white-space:pre-wrap; line-height:1.45; }
.msg.from-office { background:#eef4f7; border:1px solid #c9dae1; margin-left:auto; }
.msg.from-client { background:#fdf6e3; border:1px solid #e3d6ac; }

/* nav count badge (e.g. new client requests) */
.navbadge { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px;
  background:#c0392b; color:#fff; font-size:11px; font-weight:bold; }

/* copy-the-portal-link bar */
.linkbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:#eef4f7; border:1px solid #9ab0ba; border-radius:6px;
  padding:8px 12px; margin-bottom:14px; font-size:12px; }
.linkbar input { flex:1; min-width:260px; font-family:Consolas,monospace; font-size:12px;
  border:1px solid #9ab0ba; padding:4px 6px; background:#fff; }

/* drop box for filled-in PDF request forms (Client Requests tab) */
.dropzone { border:2px dashed #9ab0ba; border-radius:8px; background:#f7fbfc;
  padding:22px 16px; text-align:center; cursor:pointer; }
.dropzone.over { border-color:#4a6b7d; background:#e4eff4; }
.dropzone p { margin:2px 0; }
.flash-ok  { background:#cfe8d4; border:1px solid #7fae8c; color:#24552f;
  padding:7px 11px; border-radius:5px; font-size:12px; }
.flash-bad { background:#f6d7d2; border:1px solid #c58e83; color:#8c2f1c;
  padding:7px 11px; border-radius:5px; font-size:12px; }

/* status badges */
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:bold; }
.b-none     { background:#e2e2e2; color:#555; }
.b-awaiting { background:#e8ddf3; color:#5b3a86; }
.b-pending  { background:#f6d7d2; color:#a23b28; }
.b-progress { background:#fcefc9; color:#8a6d1a; }
.b-sendout  { background:#d8e0f0; color:#3a4a86; }
.b-complete { background:#cfe8d4; color:#2f6b3a; }
input.sentout { background:#eef2fb; }

/* sticky save bar for the results grid */
.savebar {
  position: sticky; bottom: 0; background: #eaf2f5; border-top: 1px solid #9ab0ba;
  padding: 8px 10px; display: flex; gap: 10px; align-items: center; margin-top: 6px;
}
.savebar .hint { font-size: 11px; color: #666; }

/* auto-save confirmation, bottom-right */
.savetoast {
  position: fixed; right: 16px; bottom: 16px; z-index: 10000;
  background: #2f6b3a; color: #fff; font-size: 12px; font-weight: bold;
  padding: 8px 14px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.savetoast.on { opacity: 1; transform: none; }
.savetoast.bad { background: #a23b28; }

/* order page: "send documents to" panel + the two publishing drop boxes */
.sendbox { border:1px solid #9ab0ba; border-radius:6px; background:#f7fbfc; padding:9px 11px; }
.sendbox-h { font-weight:bold; color:#35576b; font-size:12px; margin-bottom:6px; }
.sendbox .frow { grid-template-columns:78px 1fr; }
.sendbox .hint { margin-top:5px; line-height:1.45; }
.pubgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pubcol { border:1px solid #dde8ec; border-radius:6px; padding:10px; background:#fbfdfe; }
.pubhead { font-weight:bold; color:#35576b; font-size:12.5px; margin-bottom:7px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
@media (max-width: 900px) { .pubgrid { grid-template-columns:1fr; } }

/* a result accepted from the suggestion (Tab/Enter) — visible until it is checked */
input.suggested { background: #fdf6e3; }

/* ---- the Today screen ----------------------------------------------------
   Cards that reflow to one column on a narrow window. Each card is a count and a short
   list; nothing here scrolls on its own, so the whole morning fits one page. */
.today-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width: 900px) { .today-grid { grid-template-columns:1fr; } }
.tcard { border:1px solid #9ab0ba; border-radius:7px; background:#fff; padding:10px 12px; }
.tcard-h { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  font-size:13px; font-weight:bold; color:#35576b; margin-bottom:7px;
  border-bottom:1px solid #e6eef1; padding-bottom:6px; }
.tnum { margin-left:auto; font-size:19px; color:#1d3d4f; }
.tcard table.grid { margin-top:0; }
.tcard-rush { border-color:#c0392b; box-shadow:0 0 0 2px rgba(192,57,43,.15); }
.tcard-note { border-color:#c9a227; box-shadow:0 0 0 2px rgba(201,162,39,.15); }
.tnote { border-left:3px solid #c9a227; background:#fffbe9; padding:5px 9px;
  margin-bottom:6px; font-size:12.5px; white-space:pre-wrap; }
.tinbox { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* ---- RUSH ----------------------------------------------------------------
   The office's urgency flag. Red everywhere it appears, and always the same red,
   so "this one is urgent" reads the same on every screen. */
.rush-chip { display:inline-block; padding:1px 8px; border-radius:9px; background:#c0392b;
  color:#fff; font-size:11px; font-weight:bold; letter-spacing:.6px; vertical-align:middle; }
/* a whole row in a list */
tr.rush-row td { background:#fdecea !important; }
tr.rush-row td:first-child { box-shadow: inset 3px 0 0 #c0392b; }

/* Finished work reads green; PART finished reads as green stripes, so a two-test lab that is
   half signed off cannot be mistaken at a glance for a finished one. The same pair marks a
   job whose labs are only partly signed off on the vessel list. */
tr.done-row td { background:#dff0e3 !important; }
tr.done-row td:first-child { box-shadow: inset 3px 0 0 #2f6b3a; }
tr.part-row td { background: repeating-linear-gradient(135deg,
                 #dff0e3 0 10px, #f5fbf6 10px 20px) !important; }
tr.part-row td:first-child { box-shadow: inset 3px 0 0 #7fb98c; }
.done-chip { display:inline-block; padding:1px 7px; border-radius:9px; background:#2f6b3a;
  color:#fff; font-size:11px; font-weight:bold; }
.part-chip { display:inline-block; padding:1px 7px; border-radius:9px; background:#cfe3d4;
  color:#28502f; font-size:11px; font-weight:bold; }

/* A job the bench REOPENED. The office thought it was finished, so it is called out in
   orange - a different kind of problem from urgent (red) or finished (green). */
tr.reopened-row td { background:#fdf0e0 !important; }
tr.reopened-row td:first-child { box-shadow: inset 3px 0 0 #d98324; }
.reopen-chip { display:inline-block; padding:1px 8px; border-radius:9px; background:#d98324;
  color:#fff; font-size:11px; font-weight:bold; letter-spacing:.4px; vertical-align:middle; }
.navbadge.warn { background:#d98324; }
/* Open Labs can carry two counts at once - reopened work and unread bench notes. Sitting
   flush they read as one number ("21" rather than an orange 2 and a red 1), so keep them
   visibly apart. */
.navbadge + .navbadge { margin-left:3px; }
.reopen-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:#fdf0e0; border:1px solid #e8c79b; border-left:5px solid #d98324;
  padding:8px 12px; margin:0 0 12px; font-size:13px; }
/* the banner at the top of a rushed job */
.rush-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:#fdecea; border:1px solid #e0a99f; border-left:5px solid #c0392b;
  border-radius:6px; padding:8px 12px; margin:0 0 12px; color:#8c2f1c; font-size:12.5px; }
/* the tickbox that sets it */
.rush-set { display:inline-flex; gap:5px; align-items:center; font-size:12px;
  font-weight:bold; color:#8c2f1c; background:#fdecea; border:1px solid #e0a99f;
  border-radius:6px; padding:3px 10px; cursor:pointer; }
.rush-set input { margin:0; }

/* ---- DUE DATE -------------------------------------------------------------
   When the job was promised. Quiet slate while there is time, and the SAME red as
   RUSH once it is past - overdue and urgent should read as the same kind of problem. */
.due-chip { display:inline-block; padding:1px 8px; border-radius:9px; background:#e7eef2;
  color:#35576b; font-size:11px; font-weight:bold; vertical-align:middle;
  white-space:nowrap; }
.due-chip.over { background:#c0392b; color:#fff; letter-spacing:.4px; }
/* the toolbar field that sets it, next to the RUSH tickbox */
.due-set { display:inline-flex; gap:5px; align-items:center; font-size:12px;
  font-weight:bold; color:#35576b; background:#eef4f7; border:1px solid #cfdee4;
  border-radius:6px; padding:3px 10px; }
.due-set input { font-size:12px; padding:2px 5px; }
.due-set .fill-btn { font-size:11px; padding:1px 7px; }

/* ---- SPEC CHECK ------------------------------------------------------------
   THE TINTS ARE GONE. Marcel, 2026-09-19: "dont have the red box indicator". A result
   outside its spec no longer turns red, a confirmed pass no longer turns green, and the
   savebar no longer counts them.

   The GREEN went with the red deliberately. Leaving it would have meant green = pass and
   plain = "fails, or we could not tell" - which on a number bound for a certificate reads
   as reassurance where there is none. Red and green only ever made sense as a pair.

   specVerdict() and the HOVER still work: the box's tooltip still says "outside spec:
   0.52% vs 0.10% max". So nothing on screen is coloured, and somebody who wants the
   verdict can still get it. Putting the tints back is these three rules and two
   classList lines in app.js. */

/* ---- SECOND RESULT BOX -----------------------------------------------------
   A re-run or duplicate reading. The bench adds and fills it (+2nd); the lab manager
   settles which value survives (the × beside a box on the office lab page). The dashed
   border marks the provisional box; only the kept value ever prints. */
.r2add { font-size:10.5px; padding:1px 7px; }
.r2line { display:flex; gap:4px; align-items:center; }
.r2line + .r2line { margin-top:3px; }
button.r2x { padding:1px 7px; font-size:11px; }
input[name$="_result2"] { border-style:dashed; }
/* a cross-lab grid cell whose analysis has an unsettled 2nd result */
input.r2flag { border-style:dashed; border-color:#8a6d1a; }

/* what the bench wrote back about a test (office-only, never on a client document) */
.benchbar { border:1px solid #c9a227; border-left:5px solid #c9a227; border-radius:6px;
  background:#fffbe9; padding:9px 12px; margin:0 0 10px; }
.benchbar-h { font-size:11.5px; font-weight:bold; color:#7a5c00; text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:3px; }
.benchbar-body { font-size:13.5px; white-space:pre-wrap; line-height:1.45; color:#3b2f00; }

/* Pricing tab */
.btn.primary { background: linear-gradient(180deg, #4a8fb0, #2f6d8b); border-color: #24576f; }
.btn.danger  { background: linear-gradient(180deg, #d98b7e, #bf6353); border-color: #a3503f;
  padding: 2px 8px; font-size: 12px; line-height: 1.2; }
.hint { font-size: 11px; color: #667; }
.warn { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:8px;
  background:#fcefc9; color:#8a6d1a; font-size:10.5px; font-weight:bold; }
.flash { background:#eef4f7; border:1px solid #9ab0ba; border-radius:5px;
  padding:7px 11px; font-size:12px; margin:8px 0; }
.rowform { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.rowform label { font-size:12px; color:#444; display:flex; gap:4px; align-items:center; }
.preview { background:#fbfdfe; border:1px solid #c9dae1; border-radius:6px; padding:10px 12px;
  margin-bottom:10px; font-size:12px; }

/* The Inbox's sub-tabs: Client Requests / Messages / Outbox, one nav tab above them. */
.subtabs { display: flex; align-items: stretch; gap: 0; margin: -4px 0 14px;
  border-bottom: 1px solid #9ab0ba; }
.subtabs a { padding: 7px 16px; font-size: 12.5px; font-weight: bold; color: #5b7886;
  text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; }
.subtabs a:hover { background: #eef4f7; }
.subtabs a.on { background: #fff; color: #1d3d4f; border-color: #9ab0ba;
  box-shadow: inset 0 3px 0 #4a8fb0; margin-bottom: -1px; }
.subtab-clear { margin-left: auto; align-self: center; padding-bottom: 4px; }
.subtab-clear .btn { font-size: 11px; padding: 3px 9px; }

/* ---------------- The message rail ----------------
   A standing panel down the left of every office page: submittals, client messages, notes
   from the bench, reopened jobs, broken promises. Laid out as a message thread because that
   is a shape people already read without being taught - a sender, a line, a time, newest
   first. Every bubble is a link to the page that deals with it.

   The office page is a fixed 980px centred in a lot of empty background, so on a wide screen
   the rail costs no content width at all: the body takes left padding and .page re-centres in
   what is left. Narrower than 1240px it becomes a drawer over the page instead, because
   taking 300px off a 980px layout would start squeezing the tables. */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 300px; z-index: 60;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2f4d5e, #24404f); color: #dbe9f0;
  box-shadow: 2px 0 12px rgba(0,0,0,.3);
  transform: translateX(0); transition: transform .18s ease;
}
body.rail-off .rail { transform: translateX(-100%); }
.rail-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px 9px;
  border-bottom: 1px solid rgba(255,255,255,.18); }
a.rail-title { font-size: 14px; font-weight: bold; color: #fff; letter-spacing: .3px;
  text-decoration: none; }
a.rail-title:hover { text-decoration: underline; }
.rail-count { background: #c0392b; color: #fff; font-size: 11px; font-weight: bold;
  padding: 1px 7px; border-radius: 9px; }
.rail-x { background: none; border: 0; color: #9fc0d0; cursor: pointer;
  font-size: 13px; padding: 2px 4px; }
.rail-x:hover { color: #fff; }
.rail-clear { margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px; color: #cfe3ed; cursor: pointer; font-family: inherit; font-size: 11px;
  padding: 2px 8px; }
.rail-clear:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Grouping is what stops the panel becoming a wall. Eight samples arriving in one morning is
   one heading and three bubbles, not eight bubbles pushing everything else off the bottom. */
.rail-group { margin-bottom: 12px; }
.rail-gh { display: flex; align-items: center; gap: 6px; padding: 0 2px 4px;
  font-size: 10.5px; font-weight: bold; letter-spacing: .5px; text-transform: uppercase;
  color: #8fb2c2; }
.rail-gn { background: rgba(255,255,255,.16); border-radius: 8px; padding: 0 6px;
  font-size: 10px; }
.rail-more { display: block; width: 100%; background: rgba(255,255,255,.08); border: 0;
  border-radius: 4px; color: #cfe3ed; cursor: pointer; font-family: inherit; font-size: 11px;
  padding: 4px 0; }
.rail-more:hover { background: rgba(255,255,255,.18); color: #fff; }

/* clear one notice. Sits inside the bubble's own link, so it must not look like part of it */
.rail-drop { background: none; border: 0; color: #b7c8d1; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 0 0 0 5px; }
.rail-drop:hover { color: #c0392b; }

.rail-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.18); }
.rail-tabs button { flex: 1; background: none; border: 0; color: #a8c6d4; cursor: pointer;
  font-size: 11px; font-weight: bold; font-family: inherit; padding: 7px 2px; }
.rail-tabs button:hover { color: #fff; }
.rail-tabs button.on { color: #fff; box-shadow: inset 0 -3px 0 #7fb8d4; }

.rail-feed { flex: 1; overflow-y: auto; padding: 10px 10px 14px; }
.rail-empty { color: #9fc0d0; font-size: 12px; font-style: italic; text-align: center;
  margin: 26px 8px; line-height: 1.5; }

/* What the two-week window left out. Quiet, but a real link - the panel is a fortnight of
   news and this is the one line that says so, so it must not read as a bubble. */
a.rail-older { display: block; text-align: center; margin: 12px 4px 2px; padding: 7px 8px;
  font-size: 11.5px; line-height: 1.45; color: #ffd9d0; text-decoration: none;
  border: 1px dashed #7d4340; border-radius: 6px; background: rgba(125,67,64,.22); }
a.rail-older:hover { background: rgba(125,67,64,.38); color: #fff; }

/* one message. A real link, not a div with a click handler - middle-click and Open in new
   tab have to keep working, and they are how the office actually juggles jobs. */
a.rail-item { display: block; text-decoration: none; color: #22333c; background: #fff;
  border-radius: 3px 11px 11px 11px; padding: 7px 10px 6px; margin-bottom: 8px;
  border-left: 4px solid #9ab0ba; }
a.rail-item:hover { background: #f2f8fb; }
a.rail-item.read { opacity: .72; }
.rail-who { display: flex; align-items: baseline; gap: 6px; font-size: 11px;
  font-weight: bold; color: #35576b; }
.rail-when { margin-left: auto; font-size: 10px; font-weight: normal; color: #7d95a1;
  white-space: nowrap; }
.rail-what { font-size: 12.5px; font-weight: bold; color: #1d3d4f; margin: 2px 0 1px;
  line-height: 1.25; }
.rail-body { font-size: 11.5px; color: #55707d; line-height: 1.35; }
.rail-tag { display: inline-block; margin-top: 3px; font-family: Consolas, monospace;
  font-size: 10.5px; color: #5b7886; background: #eef4f7; border-radius: 3px;
  padding: 0 5px; }

/* the kinds, in the colours they already carry everywhere else in the app */
a.rail-item.k-received { border-left-color: #2f7d8c; }
a.rail-item.k-done     { border-left-color: #2f6b3a; }
a.rail-item.k-request  { border-left-color: #2f6b3a; }
a.rail-item.k-message  { border-left-color: #3a4a86; }
a.rail-item.k-shipping { border-left-color: #5b3a86; }
a.rail-item.k-bench    { border-left-color: #8a6d1a; }
a.rail-item.k-reopened { border-left-color: #d98324; }
a.rail-item.k-overdue  { border-left-color: #c0392b; }
a.rail-item.k-mailfail { border-left-color: #c0392b; }

.rail-foot { padding: 6px 12px 8px; font-size: 10.5px; color: #8fb2c2;
  border-top: 1px solid rgba(255,255,255,.14); }

/* The handle. Always on screen once the rail is hidden, so the panel can always be got back,
   and it carries the unread count - hiding the rail must not hide that something arrived. */
.rail-handle {
  position: fixed; left: 0; top: 96px; z-index: 61; display: none; gap: 6px;
  align-items: center; background: #2f4d5e; color: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: bold; letter-spacing: .5px;
  padding: 9px 7px; border-radius: 0 6px 6px 0; box-shadow: 2px 2px 8px rgba(0,0,0,.3);
  writing-mode: vertical-rl;
}
body.rail-off .rail-handle { display: inline-flex; }
.rail-handle:hover { background: #3c5a6b; }
.rail-handle-n { writing-mode: horizontal-tb; background: #c0392b; border-radius: 8px;
  padding: 0 6px; font-size: 10px; }

/* ---------------- The suggestions panel, down the RIGHT ----------------
   Deliberately the mirror of .rail, and deliberately quieter: it is always there but it is
   not the work, so it is a muted slate rather than the navy of the Inbox. Same drawer
   behaviour, same always-present handle, opposite edge. */

/* The suggestions panel's styling moved to static/fbrail.css on 2026-09-18, so the
   tank car card can load it without this whole 27 KB file. base.html and
   survey_shell.html link it too - one definition for all three. */
/* Wide enough for a panel to sit beside the page rather than on top of it. The page is a
   fixed 980px centred in empty background, so this padding costs no content width - it
   only re-centres what is left. The right-hand panel needs MORE room before it earns its
   place, because the Inbox is already taking 300px on the left. */
@media (min-width: 1240px) {
  body.rail-on { padding-left: 300px; }
}
@media print {
  .nav, .toolbar, .filters, .quickbar, .savebar, .header-right, .fill-btn { display: none; }
  .rail, .rail-handle { display: none; }
  body.rail-on { padding-left: 0; }
  .page { box-shadow: none; }
}

/* "Acrobat" buttons: the SAME document as the button beside them, served as an attachment so
   Windows opens it in Acrobat instead of the browser previewing it. Deliberately quieter than
   the button it sits next to - it is the second way to do the same thing, not a new action. */
/* Where PDFs open. One control in the header, replacing the "Acrobat" button that used to
   sit beside every document button - it was never a per-document decision. */
.pdfmode { font-size:11px; color:#5b7886; display:block; margin-bottom:2px; }
.pdfmode select { font-size:11px; padding:1px 2px; margin-left:3px; }