:root {
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #dfe3e8;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-warning-bg: #fff7ed;
    --color-warning-border: #fdba74;
    --color-highlight-bg: #ecfdf5;
    --color-highlight-border: #6ee7b7;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    /* Stops iOS inflating text when a phone is turned sideways, which is what turns a table that
       just fits into one that pushes the whole page off the screen. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

/* The font stack is the operating system's own on purpose. There is no @font-face and no link to a
   font CDN anywhere in this file: the server is expected to run without outbound internet, and a
   stylesheet that reaches for a font it cannot fetch renders the whole dashboard in a fallback
   nobody chose, several seconds late. */

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.75rem;
}

/* Top navigation */
.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
}

.brand:hover {
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 1rem;
    flex: 1;
    /* Six links and no wrap is how the header pushed a 375px-wide page sideways. The header is the
       one band that is on every page, so it is the one that must never overflow. */
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--color-text-muted);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.org-pill {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    color: var(--color-text-muted);
}

.user-name {
    font-weight: 600;
}

.logout-link {
    color: var(--color-text-muted);
}

/* Page content */
.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* KPI cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}

.kpi-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
}

.kpi-warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.kpi-highlight {
    background: var(--color-highlight-bg);
    border-color: var(--color-highlight-border);
}

/* Org picker */
.org-list {
    list-style: none;
    padding: 0;
    max-width: 480px;
}

.org-list li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
}

.org-list a {
    font-weight: 600;
    display: block;
}

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-bar a {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.filter-bar a:hover {
    text-decoration: none;
    border-color: var(--color-primary);
}

.filter-bar a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Tables
   ------------------------------------------------------------------------
   Every table on the dashboard is wrapped in a .table-scroll. A route list has seven columns and a
   truck list has nine; on a phone one of them has to give, and the choice is between the table
   scrolling inside its own box and the entire page scrolling sideways. The second one is the bad
   one: it drags the header, the banners and the buttons off-screen with it, and there is no way to
   tell by looking that the page has done it.

   Deliberately no min-width on the table. Left alone a table cannot shrink below its own content,
   so the wrapper scrolls exactly when it has to and never on a desktop with room to spare. */
.table-scroll {
    overflow-x: auto;
    /* Paints the scrollbar's own edge with the table's radius instead of a square corner. */
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.data-table th {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: var(--color-bg);
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
}

.status-DRAFT {
    background: #e5e7eb;
    color: #374151;
}

.status-PUBLISHED {
    background: #dbeafe;
    color: #1e40af;
}

.status-ASSIGNED {
    background: #ede9fe;
    color: #5b21b6;
}

.status-IN_PROGRESS {
    background: #fef3c7;
    color: #92400e;
}

.status-COMPLETED {
    background: #d1fae5;
    color: #065f46;
}

.status-CANCELLED {
    background: #fee2e2;
    color: #991b1b;
}

/* Route detail */
.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.detail-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
}

.detail-card h2 {
    margin-top: 0;
}

.detail-card dl {
    margin: 0;
}

.detail-card dt {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.detail-card dt:first-child {
    margin-top: 0;
}

.detail-card dd {
    margin: 0.1rem 0 0;
    font-weight: 500;
}

.detail-section {
    margin-top: 1.5rem;
}

.checklist,
.note-list {
    list-style: none;
    padding: 0;
}

.checklist li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.4rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.note-list li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
}

.note-meta {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.note-text {
    white-space: pre-wrap;
}

/* Login page */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.login-card h1 {
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.login-error {
    background: #fee2e2;
    color: #991b1b;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.login-notice {
    background: var(--color-highlight-bg);
    border: 1px solid var(--color-highlight-border);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: left;
}

.telegram-widget-wrapper {
    display: flex;
    justify-content: center;
}

/* Email magic-link sign-in */
.login-alt {
    margin-top: 1.5rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.login-email-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.login-email-form label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.login-email-form input {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
}

.login-email-form button {
    padding: 0.6rem 0.9rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

.login-email-form button:hover {
    background: var(--color-primary-dark);
}

.login-hint {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: left;
}

/* Public pages: pricing and status */
.public-body {
    background: var(--color-bg);
}

.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.public-content {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.public-content .lead {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

.public-section {
    margin-top: 2rem;
}

.public-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.public-note {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.plan-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.plan-card h2 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}

.plan-price {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.plan-price-tbd {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.plan-currency,
.plan-period {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.plan-meter {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.status-headline {
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.status-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: 1rem;
}

.status-table th,
.status-table td {
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.status-table tr:last-child th,
.status-table tr:last-child td {
    border-bottom: none;
}

.status-ok {
    color: #047857;
}

.status-warn {
    color: #b45309;
}

.status-bad {
    color: #b91c1c;
}

.status-detail {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* Support footer */
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    margin-top: 2rem;
}

.login-body .site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.footer-links {
    display: flex;
    gap: 1rem;
}

.footer-support {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.footer-label {
    font-weight: 600;
    color: var(--color-text);
}

.footer-muted {
    font-style: italic;
}

/* Fleet map */
.fleet-map {
    width: 100%;
    height: 480px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Writes: banners, buttons, forms.

   Added when the dashboard stopped being read-only. Kept in the same file and
   the same variables as everything above it: a second stylesheet is a second
   set of colours that drift apart, and the no-external-resources rule means
   there is no framework coming to reconcile them.
   --------------------------------------------------------------------------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    white-space: pre-line;
}

.alert-success {
    background: var(--color-highlight-bg);
    border-color: var(--color-highlight-border);
    color: #065f46;
}

.alert-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header h1 {
    margin-bottom: 1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
}

.btn:hover {
    text-decoration: none;
    border-color: var(--color-primary);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-danger {
    color: #991b1b;
    border-color: #fca5a5;
}

.btn-danger:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.btn-quiet {
    color: var(--color-text-muted);
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.action-bar form {
    margin: 0;
}

/* Forms */
.entity-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    max-width: 46rem;
}

.entity-form fieldset {
    border: none;
    border-top: 1px solid var(--color-border);
    padding: 1rem 0 0;
    margin: 0 0 1.25rem;
}

.entity-form fieldset:first-of-type {
    border-top: none;
    padding-top: 0;
}

.entity-form legend {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0;
    margin-bottom: 0.5rem;
}

.form-field {
    margin-bottom: 0.9rem;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.form-field input[type="text"],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.95rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.form-field input.has-error,
.form-field textarea.has-error,
.form-field select.has-error {
    border-color: #ef4444;
}

.form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.form-row .form-field {
    flex: 1 1 10rem;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.input-unit {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.form-field-error {
    display: block;
    font-size: 0.8rem;
    color: #991b1b;
    margin-top: 0.25rem;
}

.form-error-summary {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: #991b1b;
    max-width: 46rem;
}

.form-error-summary p {
    margin: 0;
}

.form-status-note {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    max-width: 46rem;
}

.repeatable-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.assign-forms {
    border-top: 1px solid var(--color-border);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.assign-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.assign-form label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    min-width: 3.5rem;
}

.assign-form select {
    flex: 1 1 8rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.9rem;
}

/* Row-level write controls on the list pages.
   Buttons and a one-field form living in a table cell, kept on one line where there is room and
   wrapping rather than overflowing where there is not: these tables are already wide, and a phone
   in a yard is a real place this gets opened. */
.table-actions {
    white-space: nowrap;
}

.table-actions > * {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem 0.25rem 0;
}

.table-actions form {
    display: inline-block;
}

.table-actions .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.inline-form select {
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
    border: 1px solid var(--border, #d5d9e0);
    border-radius: 4px;
    background: #fff;
}

/* Deactivated rows stay legible but stop competing with the live ones. Not display:none —
   the whole point of deactivating rather than deleting is that the record is still there. */
.row-inactive {
    opacity: 0.55;
}

/* Reports.
   Three independent GET pickers side by side, wrapping when there is no room for three. Each is its
   own form so that choosing a driver clears the period rather than submitting both and leaving the
   controller to guess which one the carrier meant. */
.report-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.report-picker {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 1 1 16rem;
}

.report-picker .form-field {
    flex: 1;
    margin-bottom: 0;
}

.report-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* An address, a cargo description or a customer's email can be one unbroken run of characters
   longer than the box it is in. Breaking it is better than letting it push the layout sideways. */
.detail-card dd,
.note-text,
.data-table td {
    overflow-wrap: anywhere;
}

/* Explanatory text under a heading: present, and clearly not one of the numbers. */
.muted {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9rem;
}

/* A carrier that generated nothing at all in the window, on the platform metrics table.

   Tinted rather than only badged, because that row is the reason the page is opened and a reader
   scanning six numeric columns will not notice a word in the first one. The badge stays: colour
   alone is not a label, and this has to survive both a monochrome print and a reader who cannot
   distinguish it. */
.row-silent > td {
    background: #fef3c7;
}

/* A label that exists for a screen reader and not for the eye. The role picker in a table cell
   has a visible column header but no room for a second label beside it. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Narrow viewports.

   The Mini App is out of scope, but the owner opens this on a phone anyway, so every page has to
   survive 360px. Two breakpoints, and each one earns its place:

   * 900px — tablets and split windows. Only the outer gutters change; nothing reflows.
   * 640px — phones. Controls grow to a thumb-sized target, single-column layouts replace the
     two-column grids, and every text input goes to 16px because anything below that makes Safari
     zoom the page on focus, which leaves the user scrolled sideways with no obvious way back.

   Nothing here uses `overflow-x: hidden` on the body. That hides a sideways scroll rather than
   fixing it, and then the next wide element is invisible instead of merely wrong.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .topbar-inner,
    .site-footer-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-content {
        padding: 1.25rem 1rem;
    }

    .public-content {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 640px) {
    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .nav-links {
        order: 2;
        gap: 0.5rem 1rem;
    }

    .topbar-user {
        order: 3;
        flex-wrap: wrap;
    }

    h1 {
        font-size: 1.3rem;
    }

    /* A thumb needs about 44px. The desktop button is 36px tall, which is a comfortable mouse
       target and a frustrating finger one. */
    .btn {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Stacked and full width. Side by side these wrap into two ragged rows of half-buttons, and
       "Cancel route" ending up beside "Complete route" at thumb size is worth avoiding on its own. */
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .action-bar > .btn,
    .action-bar form,
    .action-bar form > .btn {
        width: 100%;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* 16px exactly: anything smaller makes iOS Safari zoom in when the field takes focus. */
    .form-field input[type="text"],
    .form-field textarea,
    .form-field select,
    .login-email-form input,
    .assign-form select,
    .inline-form select {
        font-size: 16px;
    }

    .form-field input[type="text"],
    .form-field textarea,
    .form-field select {
        padding: 0.65rem;
    }

    .entity-form {
        padding: 1rem;
    }

    /* Label above control, control full width. The label's fixed 3.5rem gutter leaves a select
       about eleven characters wide on a 360px screen. */
    .assign-form {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .assign-form label {
        min-width: 0;
    }

    .assign-form select,
    .assign-form .btn {
        width: 100%;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }

    .kpi-value {
        font-size: 1.35rem;
    }

    .report-picker {
        flex-direction: column;
        align-items: stretch;
    }

    .report-picker .btn,
    .report-downloads .btn {
        width: 100%;
    }

    .fleet-map {
        height: 20rem;
    }

    .login-card {
        padding: 1.5rem;
    }

    /* Pinned to the bottom the footer covers the email form on a short screen, and there is no
       scrolling past something that is fixed. */
    .login-body .site-footer {
        position: static;
    }

    .note-meta {
        flex-direction: column;
        gap: 0.1rem;
    }
}