/* Client portal. Layered on admin.css, which already supplies the app shell,
   sidebar, KPI cards, tables, tracking drawer and sign-in screen — only the
   portal-specific pieces live here. */

.portal a.new-shipment { display: inline-block; text-decoration: none; }
.login-checks a { color: var(--red); }
.mobile-sign-out { display: none; }

.portal-kpis { margin-bottom: 18px; }

/* --- Panels ------------------------------------------------------------- */

.panel {
  background: #fff;
  border: 1px solid #e1e1df;
  margin-bottom: 18px;
  scroll-margin-top: 24px;
}

.panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 21px;
  border-bottom: 1px solid #e3e2df;
}

.panel h2 { font: 500 20px var(--display); letter-spacing: -.05em; margin: 8px 0 0; }
.panel-meta { font: 8px var(--mono); letter-spacing: .08em; color: #999; }

.portal-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.portal-split .panel { margin-bottom: 0; }

.empty-note { padding: 22px 21px; font: 10px var(--mono); color: #888; letter-spacing: .04em; }

/* --- Shipments ---------------------------------------------------------- */

#shipment-rows tr { cursor: pointer; }
.ship-ref b { display: block; font: 500 10px var(--mono); }
.ship-ref small { display: block; margin-top: 4px; font: 8px var(--mono); color: #888; }

.table-status.booked { color: #3975cb; }
.table-status.delivered { color: #8a8a8a; }
.table-status.paid { color: #259954; }
.table-status.due { color: #b67300; }
.table-status.overdue { color: var(--red); }

/* --- Documents and invoices -------------------------------------------- */

.file-list { list-style: none; margin: 0; padding: 2px 21px 8px; }

.file-list li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #e8e7e4;
}

.file-list li:last-child { border-bottom: 0; }
.file-list li.empty-note { display: block; padding: 16px 0; }

.file-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #f1f0ee;
  color: #555;
  font: 600 7px var(--mono);
  letter-spacing: .04em;
}

.file-list b { display: block; font: 600 11px var(--body); }
.file-list small { display: block; margin-top: 4px; font: 8px var(--mono); color: #888; letter-spacing: .04em; }

.invoice-side { display: grid; justify-items: end; gap: 6px; }
.invoice-amount { font: 500 13px var(--display); letter-spacing: -.02em; }

.file-action {
  border: 1px solid var(--line);
  background: transparent;
  color: #555;
  padding: 7px 9px;
  font: 8px var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.file-action:hover { border-color: var(--red); color: var(--red); }
.file-action:disabled { opacity: .5; cursor: default; }

/* --- Quote form --------------------------------------------------------- */

.portal-form { display: grid; gap: 16px; padding: 18px 21px 22px; }
.portal-form .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.portal-form label { display: block; font: 8px var(--mono); letter-spacing: .08em; color: #777; }

.portal-form input,
.portal-form select,
.portal-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #cfcecb;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 13px var(--body);
  outline: none;
}

/* Cargo descriptions run to a paragraph; the box grows with a drag, never sideways. */
.portal-form textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

/* The red underline is the focus cue here, so the shell's outline would double it. */
.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus { border-bottom-color: var(--red); }
.portal-form input:focus-visible,
.portal-form select:focus-visible,
.portal-form textarea:focus-visible { outline: none; }

.portal-form button {
  justify-self: start;
  border: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 16px;
  font: 700 11px var(--display);
  cursor: pointer;
  transition: background .2s;
}

.portal-form button:hover { background: #bb000d; }
.portal-form button:disabled { opacity: .6; cursor: default; }
.form-note { margin: 0; min-height: 14px; font: 10px var(--mono); color: #555; line-height: 1.5; }

/* --- Account team ------------------------------------------------------- */

.team-card { display: grid; gap: 6px; padding: 20px 21px 24px; }
.team-name { margin: 0; font: 500 22px var(--display); letter-spacing: -.04em; }
.team-role { margin: 0 0 12px; font: 8px var(--mono); letter-spacing: .08em; color: #888; }

.team-line {
  font: 500 15px var(--display);
  letter-spacing: -.02em;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}

a.team-line:hover { color: var(--red); }
.team-hours { margin: 12px 0 0; font: 9px var(--mono); letter-spacing: .05em; color: #888; }

/* --- Tracking drawer ---------------------------------------------------- */

.drawer-meta { margin: 6px 0 0; font: 9px var(--mono); letter-spacing: .05em; color: #777; }
/* Live vessel position under the route. */
.drawer-live { margin: 0 0 22px; }
.drawer-live .vessel-map { height: 220px; }

/* The close button takes the panel's text colour; a button's default black vanished
   on the dark panel. */
.shipment-drawer .drawer-close { color: inherit; }
.drawer-status.delivered { color: #259954; }

.milestones { list-style: none; margin: 8px 0 0; padding: 0; }
.milestones li { position: relative; padding: 0 0 22px 28px; }

.milestones li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 15px;
  bottom: 0;
  width: 1px;
  background: #d1d0cc;
}

.milestones li:last-child::before { display: none; }

.milestones li i {
  position: absolute;
  left: 0;
  top: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #bcbab6;
  background: #f5f4f2;
}

.milestones li b { display: block; font: 600 12px var(--body); }
.milestones li small { display: block; margin-top: 3px; font: 9px var(--mono); letter-spacing: .04em; color: #888; }
.milestones li.done i { background: var(--red); border-color: var(--red); }
.milestones li.done::before { background: var(--red); }
.milestones li.current i { box-shadow: 0 0 0 4px rgba(227, 6, 19, .14); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1030px) {
  .portal-split { grid-template-columns: 1fr; }
}

/* admin.css hides the sidebar footer on phones, so sign-out moves to the header. */
@media (max-width: 720px) {
  .portal-form .form-pair { grid-template-columns: 1fr; }
  .mobile-sign-out { display: inline-block; }
}

/* --- Dark theme --------------------------------------------------------- */

.dark .panel { background: #202021; color: #f4f3f1; border-color: #39393a; }
.dark .panel > header,
.dark .file-list li { border-color: #3a3a3b; }
.dark .file-icon { background: #2c2c2e; color: #bbb; }
.dark .file-action { border-color: #4a4a4b; color: #ddd; }
.dark .portal-form input,
.dark .portal-form select,
.dark .portal-form textarea { color: #fff; border-bottom-color: #555; }
.dark .portal-form select option { color: #111; }
.dark .portal-form label,
.dark .form-note { color: #aaa; }

/* :not(.done) keeps the red progress line and dots winning over these. */
.dark .milestones li:not(.done) i { background: #202021; }
.dark .milestones li:not(.done)::before { background: #414143; }

/* --- Invoice list --------------------------------------------------------- */

.invoice-row { cursor: pointer; transition: background .18s ease; }
.invoice-row:hover { background: #faf9f8; }
.invoice-row:hover b { color: var(--red); }
.invoice-desc { display: block; margin-top: 3px; font-size: 11px; color: #555; }
.invoice-side .file-action { margin-top: 2px; }

.dark .invoice-row:hover { background: #27272b; }
.dark .invoice-desc { color: #bbb; }

/* --- Invoice view ---------------------------------------------------------
   Always paper-white, in either theme: it is a document, and it prints as one. */

body.invoice-open { overflow: hidden; }

.invoice-modal { display: none; position: fixed; inset: 0; z-index: 40; }
.invoice-modal.open { display: block; }
.invoice-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 9, .66); }

.invoice-shell {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 22px 16px 56px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  /* The shell is the scroller, so it must take touches: with pointer-events off,
     phones had nothing to swipe and the invoice could not scroll. A tap on its empty
     margin closes the invoice instead (portal.js). */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.invoice-toolbar,
.invoice-sheet { width: min(840px, 100%); }

.invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice-toolbar .eyebrow { color: #d6d5d2; }
.invoice-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.invoice-tools .file-action { background: #fff; border-color: #fff; color: #141416; }
.invoice-tools .file-action:hover { background: var(--red); border-color: var(--red); color: #fff; }
.invoice-close { background: transparent; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 0 4px; cursor: pointer; }

.invoice-sheet {
  background: #fff;
  color: #141416;
  padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  font: 12px/1.55 var(--body);
}

.invoice-sheet h1,
.invoice-sheet h2,
.invoice-sheet p { color: inherit; }

.inv-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 2px solid #141416; }
.inv-issuer { display: flex; gap: 14px; align-items: flex-start; }
.inv-issuer img { width: 40px; height: auto; flex: 0 0 auto; }
.inv-issuer b { display: block; margin-bottom: 4px; font: 600 16px var(--display); letter-spacing: -.02em; }
.inv-issuer p { margin: 0; font-size: 11px; color: #555; }

.inv-title { text-align: right; }
.inv-title h1 { margin: 0; font: 500 38px/1 var(--display); letter-spacing: -.05em; }
.inv-number { margin: 8px 0 10px; font: 500 12px var(--mono); letter-spacing: .04em; }

.inv-status { display: inline-block; padding: 4px 9px; border: 1px solid currentColor; font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.inv-status.due { color: #9a6200; }
.inv-status.overdue { color: #c8000e; }
.inv-status.paid { color: #1e8a4c; }

.inv-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px 0; border-bottom: 1px solid #e3e2df; }
.inv-meta span,
.inv-parties h2,
.inv-pay h2 { display: block; margin: 0 0 6px; font: 500 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #888; }
.inv-meta b { display: block; font: 500 13px var(--display); overflow-wrap: anywhere; }
.inv-meta small { display: block; margin-top: 2px; font-size: 10px; color: #777; }

.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px 0 18px; }
.inv-parties b { display: block; margin-bottom: 4px; font: 600 14px var(--display); }
.inv-parties p { margin: 0 0 2px; color: #444; }
.inv-address,
.inv-note { white-space: pre-line; }

.inv-table { overflow-x: auto; }

/* admin.css styles every table for the dashboard; an invoice needs none of that. */
.invoice-sheet table.inv-lines { width: 100%; min-width: 480px; border-collapse: collapse; }
.invoice-sheet .inv-lines th {
  padding: 10px 8px;
  background: none;
  border-bottom: 1px solid #141416;
  text-align: left;
  font: 500 8px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #888;
}
.invoice-sheet .inv-lines td {
  padding: 12px 8px;
  border-top: 0;
  border-bottom: 1px solid #ecebe8;
  font-size: 12px;
  white-space: normal;
  color: #141416;
}
.invoice-sheet .inv-lines tbody tr:hover { background: none; }
.invoice-sheet .inv-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.inv-totals { display: flex; justify-content: flex-end; padding: 16px 0 6px; }
.inv-totals dl { display: grid; grid-template-columns: auto auto; gap: 8px 40px; margin: 0; min-width: 260px; }
.inv-totals dt { color: #666; }
.inv-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals .grand { padding-top: 10px; border-top: 2px solid #141416; font: 600 17px var(--display); color: #141416; }

.inv-pay { margin-top: 22px; padding: 18px 20px; background: #f6f5f2; }
.inv-pay.overdue { background: #fdeeee; }
.inv-pay.paid { background: #eef7f1; }
.inv-pay dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; margin: 0 0 10px; }
.inv-pay dt { color: #777; }
.inv-pay dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.inv-pay p { margin: 0; color: #444; }

.inv-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #e3e2df; font-size: 10px; color: #888; }

/* Dark mode leaves the sheet alone — only the surroundings change. */
.dark .invoice-sheet .inv-lines th { background: none; color: #888; }
.dark .invoice-sheet .inv-lines td { border-color: #ecebe8; color: #141416; }
.dark .invoice-sheet .inv-lines tbody tr:hover { background: none; }

/* A single column that can shrink below the line-item table's width; without it the
   grid grows to fit the table and the sheet runs off the side of a phone. */
.invoice-shell { grid-template-columns: minmax(0, 1fr); }
.invoice-toolbar,
.invoice-sheet { min-width: 0; }

@media (max-width: 720px) {
  .inv-head { flex-direction: column-reverse; }
  .inv-title { text-align: left; }
  .inv-meta { grid-template-columns: 1fr 1fr; }
  .inv-parties { grid-template-columns: 1fr; }
  .inv-totals dl { min-width: 0; width: 100%; }
  .inv-pay dl { grid-template-columns: 1fr; }
  .invoice-toolbar { flex-wrap: wrap; }
  .invoice-backdrop { background: rgba(8, 8, 9, .92); }
  .inv-issuer p { overflow-wrap: anywhere; }
}

/* On a phone each line reads as a block: the description, then quantity × price and
   VAT on the left with the amount on the right. Screen only — print keeps the table. */
@media screen and (max-width: 560px) {
  .invoice-sheet table.inv-lines { min-width: 0; }
  .invoice-sheet .inv-lines thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .invoice-sheet .inv-lines tbody { display: block; border-top: 1px solid #141416; }
  .invoice-sheet .inv-lines tr {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    grid-template-areas:
      "desc desc desc desc"
      "qty unit vat amount";
    align-items: baseline;
    gap: 4px 6px;
    padding: 12px 0;
    border-bottom: 1px solid #ecebe8;
  }
  .invoice-sheet .inv-lines td { display: block; padding: 0; border: 0; }
  .invoice-sheet .inv-lines .inv-desc { grid-area: desc; font-size: 13px; }
  .invoice-sheet .inv-lines .inv-qty,
  .invoice-sheet .inv-lines .inv-unit,
  .invoice-sheet .inv-lines .inv-vat { font-size: 11px; color: #666; text-align: left; }
  .invoice-sheet .inv-lines .inv-qty { grid-area: qty; }
  .invoice-sheet .inv-lines .inv-qty::after { content: " ×"; }
  .invoice-sheet .inv-lines .inv-unit { grid-area: unit; }
  .invoice-sheet .inv-lines .inv-vat { grid-area: vat; }
  .invoice-sheet .inv-lines .inv-vat::before { content: "· VAT "; }
  .invoice-sheet .inv-lines .inv-amount { grid-area: amount; font-weight: 600; }
  .inv-totals dl { gap: 8px 20px; }
}

@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  body > *:not(.invoice-modal) { display: none !important; }
  .invoice-modal.open { position: static; display: block; }
  .invoice-backdrop,
  .invoice-toolbar { display: none !important; }
  .invoice-shell { position: static; display: block; padding: 0; overflow: visible; }
  .invoice-sheet { width: auto; padding: 0; box-shadow: none; }
  .inv-pay,
  .inv-status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Needs your attention ------------------------------------------------- */

.attention-strip { margin: -8px 0 18px; background: #fff; border: 1px solid #e1e1df; border-left: 3px solid var(--red); }
.attention-strip h2 { margin: 0; padding: 12px 18px; border-bottom: 1px solid #ecebe8; font: 500 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #777; }
.attention-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px; border-bottom: 1px solid #ecebe8; }
.attention-item:last-child { border-bottom: 0; }
.attention-item p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; }
.attention-item p i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #b67300; }
.attention-item.alert p i { background: var(--red); }

.dark .attention-strip { background: #202021; border-color: #39393a; border-left-color: var(--red); }
.dark .attention-strip h2,
.dark .attention-item { border-color: #3a3a3b; }
.dark .attention-item p { color: #f4f3f1; }

/* The summary cards jump to their section. */
.portal-kpis article[data-view] { cursor: pointer; transition: border-color .18s ease; }
.portal-kpis article[data-view]:hover,
.portal-kpis article[data-view]:focus-visible { border-color: var(--red); }

/* --- Tracking drawer extras ----------------------------------------------- */

/* admin.css fixes the drawer's height without letting it scroll. */
.portal .shipment-drawer article { overflow-y: auto; }

.drawer-facts { display: grid; grid-template-columns: 118px 1fr; gap: 7px 14px; margin: 0 0 24px; }
.drawer-facts:empty { display: none; }
.drawer-facts dt { padding-top: 2px; font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #888; }
.drawer-facts dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }

.drawer-links { display: grid; gap: 18px; margin-top: 6px; }
.drawer-links h3,
.quote-history h3 { margin: 0 0 4px; font: 500 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #888; }
.drawer-links .file-list,
.quote-history .file-list { padding: 0; }

.dark .drawer-facts dd { color: #f4f3f1; }

/* --- Quote history -------------------------------------------------------- */

.quote-history { padding: 16px 21px 8px; border-top: 1px solid #e3e2df; }
.dark .quote-history { border-color: #3a3a3b; }

/* --- Invoice polish ------------------------------------------------------- */

/* Rules drawn across the gaps, rather than broken at each column. */
.invoice-sheet table.inv-lines { border-spacing: 0; }
.inv-totals dl { column-gap: 0; }
.inv-totals dd { padding-left: 40px; }

@media (max-width: 720px) {
  .attention-item { flex-direction: column; align-items: flex-start; }
}

/* --- Screens -------------------------------------------------------------- */

.panel-link { font: 9px var(--mono); letter-spacing: .06em; color: #555; text-decoration: none; white-space: nowrap; }
.panel-link:hover { color: var(--red); }
.kpi-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.view-hint { margin: -6px 0 0; font: 9px var(--mono); letter-spacing: .04em; color: #888; }
.team-address { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #555; white-space: pre-line; }
.portal .panel-body .details { margin-bottom: 4px; }

.dark .panel-link { color: #bbb; }
.dark .team-address { color: #bbb; }

@media (max-width: 1030px) {
  .kpi-grid.three { grid-template-columns: 1fr; }
}

/* --- Phones ------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* A seven-column table can't fit a phone or a portrait tablet beside the sidebar,
     so each shipment becomes a card: reference and status, then the route, then
     vessel, date and Track. */
  .portal .table-wrap { overflow: visible; }
  .portal .table-wrap table { min-width: 0; }
  .portal .table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .portal .table-wrap tbody { display: block; }

  .portal .table-wrap tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "ref ref status"
      "route route route"
      "vessel eta track";
    align-items: center;
    gap: 8px 14px;
    padding: 15px 16px;
    border-top: 1px solid #e8e7e4;
  }

  .portal .table-wrap td { display: block; padding: 0; border: 0; white-space: normal; }
  .portal .table-wrap td.empty-note { grid-column: 1 / -1; }
  .portal .ship-ref { grid-area: ref; }
  .portal .ship-status { grid-area: status; justify-self: end; text-align: right; }
  .portal .ship-route { grid-area: route; font-size: 13px; line-height: 1.4; }
  .portal .ship-vessel,
  .portal .ship-eta { font: 10px var(--mono); letter-spacing: .03em; color: #777; }
  .portal .ship-vessel { grid-area: vessel; }
  .portal .ship-eta { grid-area: eta; }
  .portal .ship-eta::before { content: attr(data-label) " "; color: #999; }
  .portal .table-wrap td.ship-etd { display: none; }
  .portal .ship-track { grid-area: track; justify-self: end; }
  .portal .ship-ref b { font-size: 12px; }
  .portal .ship-ref small { font-size: 9px; }
}

@media (max-width: 720px) {
  /* Sections as a swipeable strip with finger-sized tabs. */
  .portal .app-nav a { padding: 11px 13px; font-size: 11px; }

  /* iPhone zooms the page into any field under 16px when it is tapped. */
  .portal input,
  .portal select,
  .portal textarea { font-size: 16px; }

  .panel-link { padding: 10px 0; font-size: 10px; }
  .view-hint { font-size: 10px; }

  /* The smallest mono labels, nudged up to a readable size. */
  .portal-form label,
  .portal .kpi-grid p,
  .panel-meta,
  .team-role { font-size: 10px; }
  .portal .kpi-grid article > span,
  .file-list small,
  .team-hours { font-size: 10px; }
  .file-action { padding: 10px 11px; font-size: 9px; }
}

/* Keep the four summary cards as a 2×2 block on the narrowest phones, rather than
   four full-height cards to scroll past before the first shipment. */
@media (max-width: 390px) {
  .portal-kpis:not(.three) { grid-template-columns: 1fr 1fr; }
  .portal-kpis article { min-height: 0; padding: 15px 14px; }
  .portal-kpis article > b { font-size: 24px; }
}

@media (max-width: 720px) {
  .kpi-grid.three article { min-height: 0; }
}

.dark.portal .table-wrap tr { border-color: #3a3a3b; }

/* --- Sign-in screens on phones -------------------------------------------- */
/* Shared by the client portal and the staff sign-in. A near full-width card with a
   three-line headline left no room for the wave behind it, so the card is narrower
   and tighter, and it sits between the top bar and the footer. */

@media (max-width: 720px) {
  .staff-login { min-height: 100svh; padding: 84px 0 64px; }

  .login-card {
    width: min(340px, calc(100% - 56px));
    margin-top: 0;
    padding: 24px 22px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  }

  .login-card h1 { font-size: 36px; margin: 12px 0; }
  .login-copy { margin-bottom: 14px; line-height: 1.6; }
  .login-card label { margin: 12px 0; font-size: 10px; }
  /* 16px so iPhone doesn't zoom into the field when it is tapped, and tall
     enough to hit: a 39px field on a phone is a near-miss waiting to happen,
     and this is the one someone taps with a password half-typed. */
  .login-card input { padding: 12px 0; font-size: 16px; min-height: 44px; }
  .sign-in { padding: 15px; min-height: 48px; }
  .login-checks { margin-top: 16px; padding-top: 12px; gap: 6px; }
  .login-checks div { font-size: 9px; }

  /* The theme switch sat on the card's corner; it takes the security pill's place
     in the top bar instead. */
  .security-pill { display: none; }
  .login-theme { top: 16px; right: 20px; }
}

/* The tick beside each assurance line belongs on the first line, not centred on
   the block. admin.css centres it, which read correctly while these were one
   line each -- they are in English. French and German wrap to three or four,
   and the tick drifted into the middle of the paragraph. */
.login-checks div { align-items: flex-start; }
.login-checks i { line-height: 1.5; }

/* --- Which screen ------------------------------------------------------------
   The page is served with the sign-in card showing and the app hidden, then
   JavaScript asks whether there is a session and swaps them. That is two round
   trips, so someone already signed in -- switching language, say -- was shown a
   sign-in form for about half a second before their own portal appeared.

   Neither screen is shown until that question is answered. visibility rather
   than display, so the panel keeps its size and nothing jumps when it resolves.
   portal.js clears the class however the check ends; <noscript> reveals the
   sign-in for anyone who will never run it. */
.portal-deciding #portal-login { visibility: hidden; }