/* The sign-in screen: an industrial command centre in a dark navy interface.

   One grid: the brief and the illustrative schedule on the left, the sign-in card on the right,
   under a header bar. Everything on it is fixed copy and fixed illustration -- nothing is read from
   the plant before sign-in (js/login-status.js asks /api/health for "ok" and the time, no more).

   Palette:  page #071426 · panel #10243B · panel 2 #152C46 · cyan #35BDF2 · green #1FC995 ·
             orange #EF8735 · text #F4F7FB.
   Contrast: body text on the panel is #C9D8E8 or lighter on #10243B (about 10:1); the dimmest text,
             the card's footnotes, is #9FB4CA (about 6.5:1). Buttons use navy text on cyan (about 9:1).
   Motion:   one short entrance and a left-to-right reveal of the sample schedule, then stillness.
             prefers-reduced-motion removes all of it. */

.login-screen {
  --a-bg: #071426; --a-panel: #10243b; --a-panel-2: #152c46; --a-cyan: #35bdf2; --a-green: #1fc995;
  --a-orange: #ef8735; --a-text: #f4f7fb; --a-soft: #c9d8e8; --a-dim: #9fb4ca; --a-line: rgba(140, 185, 230, .22);
  background: var(--a-bg); color: var(--a-text); inset: 0; overflow: auto; position: fixed; z-index: 100;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.login-screen.hidden { display: none; }
/* The app is laid out once someone is signed in. Left in place behind this opaque screen, it kept
   animating its loading placeholders under a blur nobody could see: two-thirds of the page's work
   while a password was typed (measured 2026-11-05). render() lifts the screen before it draws. */
body:has(> .login-screen:not(.hidden)) > .app-shell { display: none; }

/* --- the background: the plant, kept recognisable, with the content side calmed down ------------ */
.auth-bg { inset: 0; position: fixed; z-index: 0; }
.auth-photo {
  /* One photograph in three sizes: a phone or small laptop downloads about 130 KB, a full-HD screen
     about 250 KB, and only a very large or high-density screen the 4K version (about 530 KB). */
  background: #0c1d33 url("/assets/plant_photo_1600.webp") center 52% / cover no-repeat;
  inset: 0; position: absolute;
}
@media (min-width: 1281px), (min-resolution: 1.5dppx) { .auth-photo { background-image: url("/assets/plant_photo_2560.webp"); } }
@media (min-width: 2200px), (min-width: 1500px) and (min-resolution: 1.5dppx) { .auth-photo { background-image: url("/assets/plant_photo_3840.webp"); } }
.auth-overlay {
  background:
    radial-gradient(70% 55% at 85% 12%, rgba(53, 189, 242, .20), transparent 70%),
    radial-gradient(55% 60% at 8% 105%, rgba(31, 201, 149, .08), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(3, 9, 18, .55) 100%),
    linear-gradient(90deg, rgba(7, 20, 38, .94) 0%, rgba(7, 20, 38, .80) 42%, rgba(7, 20, 38, .56) 100%);
  inset: 0; position: absolute;
}

.auth-shell {
  display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; position: relative; z-index: 1;
}

/* --- header --------------------------------------------------------------------------------- */
.auth-header {
  align-items: center; display: grid; gap: 16px; grid-template-columns: auto 1fr auto;
  margin: 0 auto; max-width: 1560px; padding: 22px 40px 0; width: 100%;
}
.auth-brand { align-items: center; display: flex; gap: 12px; min-width: 0; }
.auth-logo { align-items: center; background: #fff; border-radius: 11px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); display: grid; flex: none; height: 46px; place-items: center; width: 46px; }
.auth-logo img { border-radius: 6px; display: block; height: 36px; object-fit: contain; width: 36px; }
.auth-wordmark { display: grid; line-height: 1.2; min-width: 0; }
.auth-wordmark b { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.auth-wordmark small { color: var(--a-dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.auth-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.auth-chip {
  align-items: center; background: rgba(21, 44, 70, .82); border: 1px solid var(--a-line); border-radius: 999px;
  color: var(--a-soft); display: inline-flex; font-size: 12px; font-weight: 700; gap: 8px; letter-spacing: .05em;
  min-height: 30px; padding: 0 13px; text-transform: uppercase; white-space: nowrap;
}
.auth-dot { background: var(--a-dim); border-radius: 50%; height: 8px; width: 8px; }
.auth-status[data-state="ok"] { border-color: rgba(31, 201, 149, .45); color: #b8f2df; }
.auth-status[data-state="ok"] .auth-dot { background: var(--a-green); box-shadow: 0 0 0 4px rgba(31, 201, 149, .18); }
.auth-status[data-state="down"] { border-color: rgba(239, 135, 53, .55); color: #ffd2ad; }
.auth-status[data-state="down"] .auth-dot { background: var(--a-orange); box-shadow: 0 0 0 4px rgba(239, 135, 53, .18); }
.auth-time { display: grid; justify-items: end; line-height: 1.15; text-align: right; }
.auth-time time { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; }
.auth-time span { color: var(--a-dim); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

/* --- the page body ---------------------------------------------------------------------------- */
.auth-main {
  align-content: center; column-gap: 64px; display: grid; grid-template-areas: "brief card" "preview card";
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); margin: 0 auto; max-width: 1560px; padding: 28px 40px 16px; row-gap: 26px; width: 100%;
}
.auth-brief { grid-area: brief; max-width: 720px; }
.auth-preview { grid-area: preview; max-width: 720px; }
.auth-card { align-self: center; grid-area: card; }

.auth-eyebrow { color: var(--a-cyan); font-size: 13px; font-weight: 700; letter-spacing: .2em; margin: 0 0 12px; text-transform: uppercase; }
.auth-brief h1 { font-size: clamp(34px, 3.6vw, 58px); font-weight: 800; letter-spacing: -.015em; line-height: 1.04; margin: 0; text-wrap: balance; }
.auth-sub { color: var(--a-soft); font-size: clamp(15px, 1.35vw, 19px); font-weight: 600; letter-spacing: .04em; margin: 16px 0 0; }
.auth-sub i { color: var(--a-cyan); font-style: normal; margin: 0 .35em; }
.auth-note { color: var(--a-dim); font-size: 14px; margin: 8px 0 0; }

/* --- the illustrative schedule ------------------------------------------------------------------ */
.auth-preview {
  backdrop-filter: blur(10px); background: rgba(16, 36, 59, .78); border: 1px solid var(--a-line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .32); padding: 16px 20px 14px;
}
.auth-preview-head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 12px; }
.auth-preview-head h2 { color: var(--a-soft); font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0; text-transform: uppercase; }
.auth-preview-head span { color: var(--a-dim); font-size: 12px; letter-spacing: .04em; }
.auth-gantt { --label: 62px; }
.auth-axis { height: 20px; margin-left: var(--label); position: relative; }
.auth-axis span { color: var(--a-dim); font-size: 11px; font-variant-numeric: tabular-nums; position: absolute; top: 0; transform: translateX(-50%); }
.auth-axis span:first-child { transform: none; }
.auth-axis span:last-child { transform: translateX(-100%); }
.auth-rows { display: grid; gap: 7px; position: relative; }
.auth-row { align-items: center; display: grid; gap: 0; grid-template-columns: var(--label) 1fr; }
.auth-line { align-items: center; color: var(--a-soft); display: flex; font-size: 12px; font-weight: 700; gap: 7px; }
.auth-led { background: var(--a-green); border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.auth-track {
  background: repeating-linear-gradient(90deg, rgba(140, 185, 230, .08) 0 1px, transparent 1px 25%), rgba(5, 14, 27, .55);
  border-radius: 6px; height: 26px; overflow: hidden; position: relative;
}
.blk { border-radius: 4px; bottom: 3px; display: block; position: absolute; top: 3px; }
.blk.prod-a { background: linear-gradient(180deg, #3cc3f6, #1d9bd3); }
.blk.prod-b { background: linear-gradient(180deg, #2fd8a8, #17a77f); }
.blk.prod-c { background: linear-gradient(180deg, #5b8bd9, #3a64b4); }
.blk.chg { background: repeating-linear-gradient(135deg, #8d6bd6 0 4px, #6f4fb8 4px 8px); }
.blk.svc { background: linear-gradient(180deg, #f59a4d, #d9731f); }
.auth-now { background: var(--a-orange); bottom: -4px; margin-left: calc(var(--label) - 1px); pointer-events: none; position: absolute; top: -4px; width: 2px; }
.auth-rows .auth-now { left: auto; }
.auth-now em {
  background: var(--a-orange); border-radius: 4px; color: #1a0c00; font-size: 10px; font-style: normal; font-weight: 800; left: 50%;
  letter-spacing: .06em; padding: 1px 6px; position: absolute; text-transform: uppercase; top: -17px; transform: translateX(-50%);
}
.auth-legend { color: var(--a-soft); display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px 18px; list-style: none; margin: 14px 0 0; padding: 0; }
.auth-legend li { align-items: center; display: inline-flex; gap: 7px; }
.auth-legend .blk { height: 10px; position: static; width: 22px; }
.auth-now-key { background: var(--a-orange); display: inline-block; height: 12px; width: 3px; }

/* The marker sits over the tracks, not over the line names: its left is a share of the track. */
.auth-rows { --track-left: var(--label); }
.auth-rows > .auth-now { left: calc(var(--label) + (100% - var(--label)) * .38); margin-left: 0; }

/* --- the card ------------------------------------------------------------------------------------ */
.auth-card {
  backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(21, 44, 70, .94), rgba(16, 36, 59, .96));
  border: 1px solid rgba(53, 189, 242, .32); border-radius: 18px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07); padding: 34px 32px 26px; position: relative;
}
.auth-card::before {
  background: linear-gradient(90deg, transparent, var(--a-cyan), transparent); content: ""; height: 2px; left: 18px; opacity: .7; position: absolute; right: 18px; top: -1px;
}
.auth-welcome { color: var(--a-dim); font-size: 14px; margin: 0 0 4px; }
.auth-card h2 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.auth-lead { color: var(--a-soft); font-size: 14.5px; line-height: 1.45; margin: 8px 0 22px; }
.auth-card form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label, .auth-labelrow label { color: var(--a-soft); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-labelrow { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-height: 18px; }
.auth-caps { align-items: center; color: #ffd2ad; display: inline-flex; font-size: 12px; font-weight: 700; gap: 5px; }
.auth-caps[hidden] { display: none; }
.auth-caps svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 14px; }

.auth-card input[type="text"], .auth-card input[type="password"] {
  appearance: none; background: #0a1b30; border: 1px solid rgba(150, 190, 230, .3); border-radius: 10px; box-sizing: border-box; color: var(--a-text);
  font: inherit; font-size: 15px; height: 50px; padding: 0 14px; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; width: 100%;
}
.auth-card input::placeholder { color: #8fa7c0; opacity: 1; }
.auth-card input[type="text"]:hover, .auth-card input[type="password"]:hover { border-color: rgba(150, 190, 230, .5); }
.auth-card input[type="text"]:focus, .auth-card input[type="password"]:focus {
  background: #0b2038; border-color: var(--a-cyan); box-shadow: 0 0 0 3px rgba(53, 189, 242, .24); outline: 2px solid transparent;
}
.auth-card input:-webkit-autofill, .auth-card input:-webkit-autofill:hover, .auth-card input:-webkit-autofill:focus, .auth-card input:-webkit-autofill:active {
  /* A saved login chosen from the browser's list is painted pale blue by the browser, with light text
     left on it: unreadable. A huge inset shadow in the field's own colour covers the paint (the
     focus ring is drawn the same way), the text keeps its colour, and the delayed transition stops
     the browser's background from ever showing. !important is the only thing that outranks its own. */
  -webkit-box-shadow: 0 0 0 100px #0a1b30 inset, 0 0 0 3px rgba(53, 189, 242, .24) !important;
  box-shadow: 0 0 0 100px #0a1b30 inset, 0 0 0 3px rgba(53, 189, 242, .24) !important;
  -webkit-text-fill-color: var(--a-text) !important; caret-color: var(--a-text); transition: background-color 9999s ease-out 0s;
}
.auth-card input:-webkit-autofill:not(:focus) { -webkit-box-shadow: 0 0 0 100px #0a1b30 inset !important; box-shadow: 0 0 0 100px #0a1b30 inset !important; }
.auth-card { color-scheme: dark; }
.auth-password { position: relative; }
.auth-password input { padding-right: 52px !important; }
.auth-password button {
  align-items: center; background: none; border: 0; border-radius: 8px; bottom: 5px; color: var(--a-soft); cursor: pointer; display: grid; place-items: center;
  position: absolute; right: 5px; top: 5px; transition: color .16s ease, background-color .16s ease; width: 42px;
}
.auth-password button:hover { background: rgba(53, 189, 242, .12); color: #fff; }
.auth-password button svg { fill: none; grid-area: 1 / 1; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: opacity .18s ease; width: 22px; }
.auth-password button .eye-off, .auth-password button[aria-pressed="true"] .eye-on { opacity: 0; }
.auth-password button[aria-pressed="true"] .eye-off { opacity: 1; }

.auth-remember { display: grid; gap: 6px; }
.auth-check { align-items: center; color: var(--a-soft); cursor: pointer; display: flex; font-size: 14px; gap: 10px; min-height: 28px; }
.auth-check input { accent-color: var(--a-cyan); cursor: pointer; flex: none; height: 18px; margin: 0; width: 18px; }
.auth-remember p { color: var(--a-dim); font-size: 12.5px; line-height: 1.45; margin: 0 0 0 28px; }

.auth-submit {
  align-items: center; background: linear-gradient(180deg, #4cc9f7, #27a5de); border: 0; border-radius: 11px;
  box-shadow: 0 8px 22px rgba(39, 165, 222, .32), inset 0 1px 0 rgba(255, 255, 255, .35); color: #04121f; cursor: pointer; display: flex; font: inherit;
  font-size: 14px; font-weight: 800; gap: 10px; justify-content: center; letter-spacing: .08em; min-height: 52px; padding: 0 18px; text-transform: uppercase;
  transition: filter .16s ease, box-shadow .16s ease, transform .16s ease; width: 100%;
}
.auth-submit:hover { box-shadow: 0 10px 28px rgba(76, 201, 247, .42), inset 0 1px 0 rgba(255, 255, 255, .45); filter: brightness(1.07); }
.auth-submit:active { filter: brightness(.96); transform: translateY(1px); }
.auth-arrow { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: transform .16s ease; width: 20px; }
.auth-submit:hover .auth-arrow { transform: translateX(4px); }
.auth-spinner { animation: authSpin .8s linear infinite; border: 2.5px solid rgba(4, 18, 31, .3); border-radius: 50%; border-top-color: #04121f; display: none; flex: none; height: 18px; width: 18px; }
.auth-submit[aria-busy="true"] { cursor: progress; filter: saturate(.8); }
.auth-submit[aria-busy="true"] .auth-spinner { display: inline-block; }
.auth-submit[aria-busy="true"] .auth-arrow { display: none; }
.auth-submit:disabled { box-shadow: none; opacity: .72; transform: none; }
.auth-submit:focus-visible, .auth-link:focus-visible, .auth-secondary:focus-visible, .auth-check input:focus-visible, .auth-password button:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-secondary { background: transparent; border: 1px solid var(--a-line); border-radius: 10px; color: var(--a-soft); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; min-height: 44px; }
.auth-secondary[hidden] { display: none; }
.auth-help { display: flex; justify-content: center; }
.auth-link { background: none; border: 0; border-radius: 6px; color: #7fd4f7; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; min-height: 36px; padding: 0 8px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .16s ease, color .16s ease; }
.auth-link:hover { color: #fff; text-decoration-color: currentColor; }
@media (pointer: coarse) { .auth-link { min-height: 44px; } }

/* The failure panel: empty means hidden. Text set by the sign-in code lands here as it is. */
.auth-alert { background: rgba(214, 69, 80, .16); border: 1px solid rgba(255, 130, 130, .55); border-radius: 10px; color: #ffd3d0; display: none; font-size: 14px; line-height: 1.45; padding: 11px 14px 11px 40px; position: relative; }
.auth-alert:not(:empty) { display: block; }
.auth-alert::before { background: #ff8a85; border-radius: 50%; color: #3a0705; content: "!"; display: grid; font-size: 12px; font-weight: 900; height: 18px; left: 13px; place-items: center; position: absolute; top: 12px; width: 18px; }
.auth-notice { background: rgba(31, 201, 149, .14); border: 1px solid rgba(31, 201, 149, .5); border-radius: 10px; color: #c6f6e8; font-size: 14px; line-height: 1.45; margin: 0; padding: 11px 14px; }
.auth-notice[hidden] { display: none; }
.auth-notice b { color: #7ff0cb; }

.auth-foot { color: var(--a-dim); font-size: 12px; letter-spacing: .06em; margin: 0; padding: 6px 40px 20px; text-align: center; }

/* --- entrance: 400-500ms, staggered, once ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .auth-overlay { animation: authFade .5s ease both; }
  .auth-header { animation: authDown .45s ease both; }
  .auth-brief { animation: authUp .5s .08s ease both; }
  .auth-preview { animation: authFade .5s .16s ease both; }
  .auth-card { animation: authLeft .5s .1s ease both; }
  .auth-track .blk { animation: authReveal .6s ease both; }
  .auth-row:nth-child(1) .blk { animation-delay: .35s; }
  .auth-row:nth-child(2) .blk { animation-delay: .45s; }
  .auth-row:nth-child(3) .blk { animation-delay: .55s; }
  .auth-row:nth-child(4) .blk { animation-delay: .65s; }
  .auth-rows > .auth-now { animation: authFade .3s 1s ease both; }
}
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes authUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes authDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes authLeft { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes authReveal { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .auth-card input, .auth-submit, .auth-arrow, .auth-password button, .auth-password button svg, .auth-link { transition: none; }
  .auth-spinner { animation: none; border-top-color: #04121f; border-right-color: #04121f; }
  .auth-submit:hover .auth-arrow, .auth-submit:active { transform: none; }
}

/* --- laptops: a little tighter ------------------------------------------------------------------------ */
@media (max-width: 1280px) {
  .auth-main { column-gap: 40px; padding-left: 28px; padding-right: 28px; }
  .auth-header { padding-left: 28px; padding-right: 28px; }
  .auth-foot { padding-left: 28px; padding-right: 28px; }
}
@media (max-height: 800px) and (min-width: 1000px) {
  .auth-main { padding-top: 14px; row-gap: 18px; }
  .auth-brief h1 { font-size: clamp(30px, 3.1vw, 46px); }
  .auth-sub { margin-top: 10px; }
  .auth-note { display: none; }
  .auth-card { padding: 26px 28px 20px; }
  .auth-lead { margin-bottom: 16px; }
  .auth-card form { gap: 13px; }
  .auth-card input[type="text"], .auth-card input[type="password"] { height: 46px; }
  .auth-submit { min-height: 48px; }
  .auth-preview { padding: 12px 16px 10px; }
  .auth-track { height: 22px; }
  .auth-rows { gap: 5px; }
  .auth-legend { margin-top: 10px; }
}

/* --- tablets and narrow windows: one column, the card first after the heading -------------------------- */
@media (max-width: 1000px) {
  .auth-main { column-gap: 0; grid-template-areas: "brief" "card" "preview"; grid-template-columns: minmax(0, 560px); justify-content: center; padding: 26px 24px 12px; row-gap: 22px; }
  .auth-brief, .auth-preview { max-width: none; }
  .auth-brief { text-align: center; }
  .auth-brief h1 { font-size: clamp(32px, 6vw, 46px); }
  .auth-header { padding: 18px 24px 0; }
  .auth-foot { padding: 6px 24px 18px; }
}

/* --- phones: compact branding, the card is the page --------------------------------------------------- */
@media (max-width: 640px) {
  .auth-header { gap: 10px; grid-template-columns: 1fr auto; padding: 14px 16px 0; }
  .auth-badges { grid-column: 1 / -1; grid-row: 2; }
  .auth-time time { font-size: 18px; }
  .auth-time span { display: none; }
  .auth-logo { height: 40px; width: 40px; }
  .auth-logo img { height: 31px; width: 31px; }
  .auth-main { padding: 18px 16px 10px; row-gap: 16px; }
  .auth-eyebrow { font-size: 11px; letter-spacing: .16em; margin-bottom: 8px; }
  .auth-brief h1 { font-size: clamp(27px, 8.2vw, 34px); }
  .auth-sub { font-size: 13px; margin-top: 8px; }
  .auth-note { display: none; }
  .auth-card { border-radius: 16px; padding: 24px 18px 20px; }
  .auth-card h2 { font-size: 25px; }
  .auth-card input[type="text"], .auth-card input[type="password"] { font-size: 16px; height: 52px; }
  .auth-submit { font-size: 13px; letter-spacing: .05em; min-height: 54px; }
  .auth-check { min-height: 40px; }
  .auth-link { min-height: 44px; }
  .auth-preview { padding: 12px 12px 10px; }
  .auth-gantt { --label: 46px; }
  .auth-line { font-size: 11px; gap: 4px; }
  .auth-led { height: 6px; width: 6px; }
  .auth-axis span:nth-child(2n) { display: none; }
  .auth-track { height: 20px; }
  .auth-foot { padding: 4px 16px 16px; }
}
@media (max-width: 360px) {
  .auth-wordmark small { display: none; }
  .auth-card { padding: 20px 14px 16px; }
}