/* ClearStream Rates' own look (11/4/2026; Daniel: "it's still way too similar to GB's one... make it a bit different",
   then ClearStream's logo at 11:40 am). Loaded after app.css on ClearStream's site only (brand.py "css"); GB's site never
   loads it. What changes: IBM Plex type instead of Barlow, the logo's navy bar with its ship in white, the sign-in card
   (the whole logo on top) standing on a full photo (APM Terminals from the air), Search under the view from a ship's
   bridge, squarer corners and tags, the logo's navy and periwinkle instead of GB's red. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-sans-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-sans-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-sans-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-sans-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-sans-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-sans-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-sans-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-sans-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-sans-condensed-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-sans-condensed-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-sans-condensed-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-sans-condensed-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-sans-condensed-latin-ext-700.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-sans-condensed-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #eef0f6; --panel: #ffffff; --ink: #14173a; --muted: #555b80; --faint: #8186a6; --line: #dcdfec; --soft: #f4f5fa;
  --brand: #12125e; --brand-hover: #262680; --link: #3b4fb0; --chip: #e5e7f3; --plate-line: #dcdfec;
  --navy: #12125e; --peri: #8ea3e0; --swoosh: #5e7ab4;
  --shadow: 0 1px 2px rgba(18,18,94,.06), 0 2px 8px rgba(18,18,94,.05);
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --r: 4px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a0b1f; --panel: #12142e; --ink: #e6e8f6; --muted: #a3a9cf; --faint: #767ca3; --line: #262a4d;
          --soft: #171a38; --chip: #1f2347; --link: #a9b8f0; --brand: #4a5bd0; --brand-hover: #5d6ee0; --navy: #0b0b3e;
          --plate-line: #ffffff; --shadow: none; }
}
html, body { font: 14px/1.5 var(--sans); }
::selection { background: #d9def5; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 17px; }

/* the bar: the logo's navy with its ship in white, the open page underlined in periwinkle */
header.top { background: var(--navy); border-bottom: 0; }
header.top .brand { color: #ffffff; font: 600 18px/1 var(--cond); letter-spacing: 0; }
header.top .brand img { width: auto; height: 30px; }
header.top nav a { color: #b4bce3; font-family: var(--cond); font-size: 14px; padding: 0 7px; }
header.top .brand { font-size: 17px; }
header.top nav a:hover { color: #ffffff; box-shadow: inset 0 -3px 0 rgba(142,163,224,.4); }
header.top nav a.on { color: #ffffff; box-shadow: inset 0 -3px 0 var(--peri); }
header.top :focus-visible { outline-color: var(--peri); }
.me > summary { color: #e8eaf8; }
.me .av { background: var(--peri); color: #12125e; }
.me .menu { color: var(--ink); }

/* squarer corners, tags instead of round pills */
.panel, .btn, .flash, pre.copy, details.more .morebox { border-radius: var(--r); }
input:not([type]), input[type=text], input[type=date], input[type=number], input[type=email], input[type=search],
input[type=url], input[type=password], select, textarea { border-radius: var(--r); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(59,79,176,.2); }
.chip, .pill span, button.pill, .boxes label { border-radius: 3px; }
.pill input:checked + span, button.pill.on { background: var(--navy); color: #ffffff; }
@media (prefers-color-scheme: dark) { .pill input:checked + span, button.pill.on { background: var(--peri); color: #0a0b1f; } }
form.search2 .swap { border-radius: var(--r); }
th { background: #e9ebf5; color: #464c74; }
@media (prefers-color-scheme: dark) { th { background: var(--soft); color: var(--muted); } }
.total { font-family: var(--cond); }
.drop { border-color: #a7b1d8; background: #f7f8fc; border-radius: var(--r); }
.drop.over { border-color: var(--swoosh); background: #eceffa; }
@media (prefers-color-scheme: dark) { .drop { background: var(--soft); } .drop.over { background: #1c2150; } }

/* Search: the view from the bridge, darkening toward the form that sits on its foot */
.hero-photo { height: 300px; border-radius: var(--r); background: #8e97b8; position: relative; }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,94,0) 40%, rgba(18,18,94,.5) 100%); }
.hero-form { margin: -92px 22px 0; }
.hero-form > .panel { border-top: 3px solid var(--swoosh); box-shadow: 0 14px 36px rgba(10,10,50,.22); }

/* Sign in: the card stands on APM Terminals seen from the air, filling the screen under the bar */
.signin2 { grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--hdr) - 90px); background: none; border: 0;
  box-shadow: none; overflow: visible; align-items: center; justify-items: end; border-radius: 0; }
.signin-photo { position: fixed; inset: var(--hdr) 0 0 0; min-height: 0; z-index: 0; background: #3a4f86; }
.signin-photo img { object-position: 28% 50%; }
.signin-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,50,0) 35%, rgba(10,10,50,.5) 100%); }
.signin-forms { position: relative; z-index: 1; width: min(440px, 100%); background: var(--panel); border-radius: 6px;
  padding: 26px 32px 30px; box-shadow: 0 24px 60px rgba(8,8,40,.42); border-top: 4px solid var(--swoosh); }
.card-logo img { display: block; width: 230px; height: auto; margin: 0 0 18px -4px; }
main > .flash { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .signin2 { min-height: 0; justify-items: stretch; align-items: start; }
  .signin-photo { position: relative; inset: auto; height: 210px; margin: -16px -14px 0; }
  .signin-photo::after { background: linear-gradient(180deg, rgba(10,10,50,0) 50%, rgba(10,10,50,.35) 100%); }
  .signin-forms { width: auto; margin: -40px 4px 0; padding: 22px 18px; }
  .hero-form { margin: -60px 10px 0; }
}

/* Contracts: the three upload steps above the drop box (ClearStream's uploader may be new to it) */
.upsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0;
  list-style: none; counter-reset: up; }
.upsteps li { counter-increment: up; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px 10px 44px; position: relative; font-size: 13.5px; }
.upsteps li::before { content: counter(up); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--navy); color: #ffffff; font: 600 12.5px/22px var(--cond); text-align: center; }
@media (prefers-color-scheme: dark) { .upsteps li::before { background: var(--peri); color: #0a0b1f; } }
.upsteps b { display: block; margin-bottom: 2px; }
@media (max-width: 860px) { .upsteps { grid-template-columns: minmax(0, 1fr); } }