:root{color-scheme:light;--primary:#2563eb;--muted:#6b7280;--line:#e5e7eb;--paper:#fff;--bg:#f5f7fb;--red:#dc2626;--amber:#825200;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1f2937;background:var(--bg)}
*{box-sizing:border-box}body{margin:0}a{color:var(--primary)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}button,.primary{min-height:46px;border-radius:12px;padding:11px 16px;border:1px solid transparent;font-weight:650}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.primary{background:var(--primary);color:white}.quiet{background:transparent;color:var(--primary);border-color:var(--line)}.full{width:100%;margin-top:24px}.topbar{background:white;border-bottom:1px solid var(--line);padding:calc(14px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:23px;font-weight:800;line-height:1.2}.brand img{border-radius:10px}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:3px}main{max-width:1000px;margin:auto;padding:30px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}h1{font-size:clamp(25px,5vw,34px);line-height:1.15;margin:8px 0 14px;letter-spacing:-.8px}h2{font-size:20px;margin:0 0 5px;overflow-wrap:anywhere}p{line-height:1.55}.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--muted);font-weight:750;margin:12px 0}.muted{color:var(--muted);font-size:14px}.heading-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.heading-row h1{margin:8px 0}.heading>p.muted{margin:8px 0 16px}.status{font-size:13px;color:var(--muted);border-left:3px solid #2563eb;padding:8px 12px;background:#eff6ff;border-radius:0 8px 8px 0;line-height:1.5}.status.warning{background:#fff2d5;border-color:#b77f18;color:#714b04}.status.error,.notice.error{background:#fff0ed;color:var(--red);border-color:var(--red)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:22px}.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:23px;box-shadow:0 4px 16px #0f172a0f}.card-head{display:flex;justify-content:space-between;align-items:start;gap:12px}.address{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:4px 0 14px}.description{margin:8px 0 12px;overflow-wrap:anywhere}.badge{font-size:11px;white-space:nowrap;background:#eff6ff;color:var(--primary);padding:5px 9px;border-radius:7px}.badge.stale{background:#fff2d5;color:var(--amber)}.readings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.reading{background:var(--bg);border-radius:13px;padding:14px 10px}.reading-label{color:var(--muted);font-size:12px}.value{display:block;font-size:27px;font-weight:750;letter-spacing:-1px;margin:5px 0;white-space:nowrap}.value small{font-size:15px;letter-spacing:0;font-weight:500}.trend{font-size:12px;color:var(--muted)}.value.high,.value.low{color:var(--red)}.threshold{font-size:11px;color:var(--red);display:block}.metadata{font-size:12px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.metadata p{margin:5px 0}.open-device{display:flex;justify-content:space-between;align-items:center;min-height:46px;margin-top:12px;font-size:14px;font-weight:700;text-decoration:none}.text-link{display:inline-block;padding:10px 0;min-height:44px;font-size:14px}.text-link.primary{padding:12px 18px;text-decoration:none}.login{max-width:460px;margin:24px auto}.login h1{font-size:32px}.login label{display:block;font-size:14px;font-weight:650;margin:20px 0 7px}.login input{width:100%;min-height:49px;border:1px solid #d1d5db;border-radius:11px;padding:11px;background:white;color:#1f2937;font-size:16px}.login .text-link{display:block;text-align:center;margin-top:12px}.install{display:flex;align-items:center;gap:20px;margin:30px 0 12px;background:#f8fafc;box-shadow:none;padding:20px}.install strong{font-size:14px}.install p{margin:6px 0 0;font-size:12px}.notice{padding:15px;border-radius:12px}footer{text-align:center;font-size:12px;color:var(--muted);padding:18px 20px calc(24px + env(safe-area-inset-bottom))}.empty{grid-column:1/-1;text-align:center;padding:40px 24px}.empty h2{font-size:22px}@media(max-width:380px){main{padding-left:14px;padding-right:14px}.topbar{padding-left:14px;padding-right:14px}.card{padding:18px}.brand small{max-width:130px}.value{font-size:24px}.heading-row{gap:8px}.heading-row .primary{padding:10px}.install{display:block}.install button{margin-top:14px}}@media(display-mode:standalone){.install{display:none}}

/* Readable phone layout. Allow every panel to shrink. */
html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { min-width: 0; line-height: 1.5; }
main { width: 100%; }
img { max-width: 100%; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cards > *, .card-head > *, .heading-row > *, .brand > *, .install > * {
    min-width: 0;
}
.card, .heading, .install, .metadata, .status { overflow-wrap: anywhere; }
.card-head, .heading-row, .topbar { flex-wrap: wrap; }
.card-head h2 { flex: 1 1 160px; }
h1 { font-size: 2rem; letter-spacing: -.5px; }
h2 { font-size: 1.4rem; line-height: 1.3; }
.muted, .status, .description, .address, .reading-label, .trend,
.metadata, .text-link, .login label, .install strong, .install p {
    font-size: 1rem;
}
.eyebrow, .badge, .threshold, .brand small, footer { font-size: .875rem; }
.eyebrow { letter-spacing: 1px; }
.badge { white-space: normal; }
.brand { min-width: 0; font-size: 1.5rem; }
.brand img { flex-shrink: 0; }
.brand small { max-width: none; }
button, .primary, .quiet, .open-device, .text-link {
    min-height: 50px;
    font-size: 1rem;
}
.topbar form { margin: 0; }
.heading-row h1 { flex: 1 1 200px; }
.readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reading { min-width: 0; padding: 16px 12px; }
.value {
    font-size: 2.1rem;
    line-height: 1.2;
    letter-spacing: -.5px;
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    margin: 10px 0;
}
.value small { display: inline-block; font-size: 1.1rem; }
.trend { display: block; }
.metadata { line-height: 1.6; padding-top: 16px; }
.metadata p { margin: 8px 0; }
.open-device { gap: 12px; padding: 12px 0; }
.login input { min-height: 54px; font-size: 1rem; }
.login h1 { font-size: 2rem; }
.install { flex-wrap: wrap; }
.install > div { flex: 1 1 260px; }
.install p { line-height: 1.6; }

@media (max-width: 700px) {
    main {
        padding: 20px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
    }
    .topbar {
        padding: calc(12px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
        gap: 12px;
    }
    .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
    .card { padding: 18px; border-radius: 16px; }
    .heading-row { align-items: stretch; gap: 12px; }
    .heading-row h1 { flex-basis: 100%; margin-bottom: 0; }
    .heading-row .primary { width: 100%; padding: 13px 16px; }
    .heading > p.muted { margin-top: 16px; }
    .status { padding: 12px; }
    .login { margin: 12px auto; }
    .install { margin-top: 24px; }
    .install button { width: 100%; }
    .empty { padding: 28px 18px; }
}

/* Stack readings rather than shrinking the numbers on narrow phones. */
@media (max-width: 399px) {
    .readings { grid-template-columns: minmax(0, 1fr); }
    .reading { padding: 16px; }
    .value { font-size: 2.25rem; }
    .topbar .brand { flex: 1 1 100%; }
    .topbar form { margin-left: auto; }
}

/* Button colors match mobile/styles.css. */
.primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.quiet:hover { background: #f0f0f0; }

/* Login follows the Mobile branding, with phone-sized controls. */
body.auth-page { position: relative; min-height: 100vh; min-height: 100dvh; }
body.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('img/Background.webp') no-repeat center / cover;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.auth-page main, .auth-page footer { position: relative; z-index: 1; }
.auth-page main { max-width: 480px; padding-top: calc(24px + env(safe-area-inset-top)); }
.auth-page .login {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.login-header { text-align: center; }
.login-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 150px; margin: 0 auto 16px; }
.login-header h1 { font-size: 1.5rem; text-align: center; margin: 0 0 20px; letter-spacing: 0; }
.auth-page .login label { font-weight: 500; margin-top: 16px; }
.auth-page .login input { border-color: var(--line); border-radius: 8px; }
.auth-page .login input:focus { border-color: var(--primary); }
.login-links { text-align: center; color: var(--muted); margin-top: 20px; }
.login-links .text-link { margin-top: 0; text-decoration: none; }
.login-links .text-link:hover { text-decoration: underline; }
.auth-page .install { max-width: 420px; margin: 20px auto 0; background: #fff; }
@media (max-width: 480px) {
    .auth-page main { padding-top: calc(18px + env(safe-area-inset-top)); }
    .auth-page .login { padding: 18px; }
    .login-logo { max-height: 130px; }
}

/* Mobile list presentation, with readable text and touch targets. */
.mobile-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 15px 13px 13px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: 0 5px 16px rgb(15 23 42 / 12%);
}
.mobile-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--mobile-card-accent, var(--primary));
}
.mobile-card-object {
    --mobile-card-accent: #2563eb;
    border-color: #bfdbfe;
    box-shadow: 0 5px 17px rgb(37 99 235 / 14%);
}
.mobile-card-sensor {
    --mobile-card-accent: #6366f1;
    border-color: #c7d2fe;
    box-shadow: 0 5px 17px rgb(99 102 241 / 14%);
}
.mobile-card .card-head { flex-wrap: nowrap; gap: 8px; margin-bottom: 7px; }
.mobile-card .card-info { flex: 1; min-width: 0; }
.mobile-card h2 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 2px; }
.device-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.device-title-line h2 { margin: 0; }
.device-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.4; background: #f1f5f9; color: #64748b; }
.device-status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.device-status-online { background: #dcfce7; color: #15803d; }
.device-status-offline { background: #fee2e2; color: #b91c1c; }
.device-status-never { background: #f1f5f9; color: #64748b; }
.mobile-card .description { margin: 2px 0; font-size: .94rem; line-height: 1.35; }
.mobile-card .address { margin: 2px 0; font-size: .94rem; line-height: 1.35; }
.card-number { display: inline-grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; border-radius: 50%; padding: 0; white-space: nowrap; font-size: .8125rem; font-weight: 750; line-height: 1; }
.mobile-card-object .card-number { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.mobile-card-sensor .card-number { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.mobile-rows { border-top: 1px solid #dbe3ec; padding-top: 3px; }
.mobile-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f5f9; }
.mobile-row:last-child { border-bottom: 0; }
.mobile-row .reading-label { flex: 1 1 40%; text-transform: none; letter-spacing: 0; font-size: .94rem; line-height: 1.35; }
.mobile-values { min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: right; }
.mobile-row .value { font-size: 1.25rem; margin: 0; font-weight: 650; letter-spacing: 0; }
.mobile-row .value small { font-size: 1rem; }
.mobile-row .trend { font-size: .94rem; font-weight: 600; line-height: 1.25; }
.mobile-row .trend.up, .mobile-row .value.high { color: #dc2626; }
.mobile-row .trend.down, .mobile-row .value.low { color: #2563eb; }
.mobile-row .trend.flat { color: #475569; }
.mobile-data { flex: 0 1 60%; min-width: 0; text-align: right; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.mobile-data.is-stale, .mobile-data.battery-low { color: #d32f2f; }
.mobile-data.battery-mid { color: #d97706; }
.mobile-data.battery-good { color: #15803d; }
.mobile-card .open-device { justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; margin-top: 8px; background: #f8fafc; color: var(--primary); border: 1px solid #cbd5e1; font-weight: 650; }
.mobile-card-sensor .open-device { color: #4f46e5; border-color: #c7d2fe; background: #eef2ff; }
@media (max-width: 359px) {
    .mobile-row { flex-wrap: wrap; gap: 6px; }
    .mobile-row .reading-label { flex-basis: 100%; }
    .mobile-values, .mobile-data { flex-basis: 100%; text-align: left; }
}

.chart-modal { width: min(960px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; overflow: auto; background: transparent; }
.chart-modal::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(2px); }
.chart-panel { margin: 0; min-width: 0; padding: 16px; border-radius: 16px; box-shadow: 0 20px 60px #0f172a33; }
.chart-modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.chart-modal-heading h2 { min-width: 0; margin: 0; }
.chart-modal-heading button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; }
.chart-controls, .chart-dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.chart-controls { margin-top: 10px; }
.chart-controls label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; font-size: 1rem; }
.chart-dates { flex: 1 1 100%; }
.chart-controls select, .chart-controls input { font: inherit; color: #1f2937; background: white; border: 1px solid var(--line); border-radius: 8px; min-height: 50px; width: 100%; min-width: 0; max-width: 100%; padding: 10px; }
.chart-controls button { flex: 1 1 160px; }
.chart-plot { position: relative; height: 340px; width: 100%; min-width: 0; }
.chart-tools, .chart-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chart-tools button { flex: 1 1 100px; }
.chart-series { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.chart-series[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }
.chart-summary { border-top: 1px dashed var(--line); font-size: 1rem; overflow-wrap: anywhere; }
.chart-summary p { margin: 6px 0; line-height: 1.4; }
@media (max-width: 480px) {
    .chart-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
    .chart-panel { padding: 12px; }
    .chart-modal-heading { align-items: flex-start; }
    .chart-modal-heading h2 { font-size: 1rem; }
    .chart-plot { height: 300px; }
    .chart-controls label { flex-basis: 100%; }
}

/* Compact spacing around data views; retain readable values and touch targets. */
.app-page main { padding-top: 12px; }
.app-page .cards { gap: 10px; margin-top: 12px; }
.app-page .heading-row { gap: 8px; align-items: center; flex-wrap: wrap; }
.app-page .heading-row h1 { flex: 1 1 180px; font-size: 1.5rem; margin: 4px 0; }
.app-page .heading-row .primary { width: auto; min-height: 44px; padding: 8px 12px; }
.app-page .heading > p.muted { margin: 6px 0; line-height: 1.4; }
.app-page .status { padding: 7px 10px; margin: 8px 0; line-height: 1.4; background: #f8fafc; border-left-width: 2px; }
.app-page .status.warning { background: #fff2d5; }
.app-page .status.error { background: #fff0ed; }
.mobile-card .open-device:hover { background: #eff6ff; border-color: #93c5fd; }
.mobile-card-sensor .open-device:hover { background: #e0e7ff; border-color: #a5b4fc; }
.mobile-card .card-number { padding: 0; }
.app-page .install { padding: 12px; border-radius: 10px; box-shadow: none; margin-top: 16px; }
.app-page footer { padding-top: 8px; }
.chart-panel h2 { font-size: 1.15rem; margin-bottom: 6px; }
.chart-panel > p.muted { font-size: .94rem; line-height: 1.4; margin: 8px 0; }
.chart-tools button, .chart-series { min-height: 44px; padding: 8px 10px; }
/* Balanced phone typography: compact labels, clear readings, one-line toolbar. */
html { font-size: 16px; }
.app-page { font-size: .875rem; }
.app-page .topbar { flex-wrap: nowrap; align-items: center; gap: 10px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
.app-page .topbar .brand { flex: 1 1 auto; min-width: 0; gap: 8px; font-size: 1.375rem; }
.app-page .brand img { width: 32px; height: 32px; }
.app-page .brand small { font-size: .75rem; line-height: 1.3; }
.app-page .topbar form { flex: 0 0 auto; margin: 0; }
.app-page button, .app-page .primary, .app-page .quiet, .app-page .text-link { font-size: .875rem; min-height: 44px; padding: 8px 10px; }
.app-page .heading-row { flex-wrap: nowrap; }
.app-page .heading-row h1 { flex: 1 1 auto; min-width: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.2px; }
.app-page .heading-row .primary { flex: 0 0 auto; width: auto; }
.app-page .heading > p.muted, .app-page .status { font-size: .8125rem; line-height: 1.4; }
.app-page .mobile-card h2, .app-page .chart-panel h2 { font-size: 1rem; line-height: 1.35; }
.app-page .mobile-card .description, .app-page .mobile-card .address { font-size: .8125rem; line-height: 1.35; }
.app-page .mobile-row .reading-label { font-size: .8125rem; flex: 1 1 35%; }
.app-page .mobile-data { font-size: .8125rem; flex: 0 1 65%; }
.app-page .mobile-row .trend { font-size: .8125rem; }
.app-page .mobile-row .value { font-size: 1.125rem; line-height: 1.3; }
.app-page .mobile-row .value small { font-size: .875rem; }
.app-page .card-number, .app-page .badge { font-size: .75rem; }
.app-page .mobile-row { padding: 6px 0; }
.app-page .mobile-card .open-device { font-size: .875rem; }
.app-page .install strong, .app-page .install p,
.app-page .chart-panel > p.muted, .app-page .chart-summary,
.app-page .chart-controls label { font-size: .8125rem; }
.app-page footer { font-size: .75rem; }
/* Inputs stay 16px to avoid automatic zoom while entering dates or credentials. */
.chart-controls select, .chart-controls input, .login input { font-size: 16px; }
.auth-page .login-header h1 { font-size: 1.25rem; }
.auth-page .login label, .auth-page .login-links, .auth-page .login .text-link,
.auth-page .install strong, .auth-page .install p { font-size: .875rem; }
@media (max-width: 359px) {
    .app-page .mobile-row { flex-wrap: nowrap; gap: 8px; }
    .app-page .mobile-row .reading-label { flex-basis: 35%; }
    .app-page .mobile-values { flex: 0 1 65%; text-align: right; }
    .app-page .mobile-data { flex-basis: 65%; text-align: right; }
}

/* Navigation links use the light button treatment from Mobile. */
.nav-button, .app-page .nav-button, .login .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    text-align: center;
    overflow-wrap: anywhere;
}
.nav-button:hover, .login-links .nav-button:hover { background: #f0f0f0; text-decoration: none; }
.heading > .nav-button { margin-bottom: 8px; }
.login-links .nav-button { display: flex; margin-top: 10px; }

/* Allow scrolling without page pinch or double-tap zoom. */
html, body { touch-action: pan-x pan-y; }

/* Canvas gestures are handled by the chart, not by page scrolling/zoom. */
#temperature-chart { touch-action: none; user-select: none; -webkit-user-select: none; }

.exit-notice { position: fixed; z-index: 1000; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; padding: 12px 16px; border-radius: 10px; background: #1f2937; color: #fff; font-size: 14px; line-height: 1.45; text-align: center; box-shadow: 0 4px 16px #0002; }

.measurements { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; min-width: 0; }
.measurements-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.measurements-table { width: 100%; min-width: 410px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.measurements-table th, .measurements-table td { padding: 8px; text-align: right; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.measurements-table th { background: #f8fafc; color: #475569; font-weight: 600; }
.measurements-table td:last-child, .measurements-table th:last-child { text-align: left; }
.measurements-table tbody tr:last-child td { border-bottom: 0; }
.measurements-table tbody tr:nth-child(even) { background: #fafbfd; }
.measurements-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13px; }
#measurements-range { font-size: 13px; line-height: 1.4; margin: 6px 0 10px; }

/* Fill the header with the existing GTC mark, trimming its white image margins. */
.app-page .topbar { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
.app-page .topbar .brand { flex: 0 0 80px; width: 80px; height: 64px; overflow: hidden; justify-content: center; gap: 0; }
.app-page .brand img { display: block; width: 116px; height: 116px; max-width: none; object-fit: contain; border-radius: 0; }
.app-page .topbar form { margin-left: auto; }

/* Persistent-login option: keep the checkbox compact and its label touch friendly. */
.auth-page .login .remember-me { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 0; cursor: pointer; }
.auth-page .login .remember-me input { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; accent-color: var(--primary); }
.remember-hint { font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0 0 4px; }


.button-icon { display: inline-flex; align-items: center; flex-shrink: 0; }

.mobile-sort-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 8px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
}
.mobile-sort-control label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 650;
}
.mobile-sort-control select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    font-size: 16px;
}
.mobile-sort-control select:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

@media (max-width: 359px) {
    .mobile-sort-control {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }
    .mobile-sort-control select { width: 100%; }
}

/* Read-only maps: editing remains available only in the desktop application. */
.view-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.view-actions .nav-button { flex: 0 1 auto; }
.mobile-map-modal { width: min(1000px, calc(100vw - 20px)); overflow: hidden; }
.map-viewer-panel { margin: 0; padding: 14px; border-radius: 16px; box-shadow: 0 20px 60px #0f172a33; }
.map-viewer-panel .chart-modal-heading > div { min-width: 0; }
.map-viewer-panel .chart-modal-heading h2 { margin-top: 4px; }
.mobile-map-heatmap-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 8px 0; }
.mobile-map-heatmap-controls[hidden] { display: none; }
.mobile-map-heatmap-controls label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.mobile-map-heatmap-controls select { min-width: 82px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font: inherit; }
.mobile-map-heatmap-toggle { min-height: 40px; }
.mobile-map-heatmap-toggle.is-active { border-color: #dc2626; background: linear-gradient(90deg, #2563eb, #06b6d4, #22c55e, #facc15, #dc2626); color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 45%); }
.mobile-map-heatmap-legend { margin: 7px 0 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafc; }
.mobile-map-heatmap-legend[hidden] { display: none; }
.mobile-map-heatmap-legend-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; color: var(--text); font-size: .74rem; }
.mobile-map-heatmap-scale { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #2563eb 0%, #06b6d4 25%, #22c55e 50%, #facc15 75%, #dc2626 100%); }
.mobile-map-heatmap-legend small { display: block; margin-top: 4px; color: var(--muted); font-size: .66rem; line-height: 1.25; }
.mobile-map-viewport { width: 100%; max-height: calc(100dvh - 150px); overflow: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; overscroll-behavior: contain; touch-action: none; user-select: none; -webkit-user-select: none; }
.mobile-map-stage { position: relative; width: 100%; min-height: 220px; overflow: hidden; background: #fff; transform-origin: top left; }
.mobile-map-stage.is-blank { background-color: #fff; background-image: linear-gradient(#eef2f7 1px, transparent 1px), linear-gradient(90deg, #eef2f7 1px, transparent 1px); background-size: 20px 20px; }
.mobile-map-stage > img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-select: none; }
.mobile-map-elements { position: absolute; inset: 0; }
.mobile-map-heatmap-canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.mobile-map-heatmap-canvas[hidden] { display: none; }
.mobile-map-shape, .mobile-map-marker { position: absolute; box-sizing: border-box; }
.mobile-map-shape { z-index: 1; border: 2px solid; pointer-events: none; }
.mobile-map-shape.shape-rectangle { border-radius: 3px; }
.mobile-map-shape.shape-circle { border-radius: 50%; }
.mobile-map-shape.shape-triangle { border: 0; clip-path: polygon(50% 2%, 98% 98%, 2% 98%); }
.mobile-map-shape.shape-line { height: 0 !important; border: 0; border-top-style: solid; }
.mobile-map-shape.shape-text { display: flex; align-items: center; justify-content: center; overflow: visible; border: 0; background: transparent !important; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.mobile-map-marker { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 5px 6px; border: 1px solid; text-align: center; line-height: 1.05; overflow-wrap: anywhere; text-shadow: 0 1px 1px rgb(0 0 0 / 45%); box-shadow: 0 1px 4px rgb(15 23 42 / 16%); transition: filter .18s ease; }
.mobile-map-elements.is-heatmap-active .mobile-map-marker.is-sensor { filter: opacity(.62); }
.mobile-map-marker strong { display: block; max-width: 100%; margin-bottom: 3px; overflow: hidden; font-size: .98em; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.mobile-map-marker-reading { display: flex; align-items: center; justify-content: center; max-width: 100%; font-size: .78em; font-weight: 700; line-height: 1.18; white-space: nowrap; }
.mobile-map-marker-trend { display: inline-block; margin-left: .32em; font-size: 1.22em; font-weight: 900; line-height: .8; text-shadow: 0 1px 1px rgb(0 0 0 / 85%), 0 0 2px rgb(0 0 0 / 55%); }
.mobile-map-marker-trend.is-up { color: #fca5a5; }
.mobile-map-marker-trend.is-down { color: #7dd3fc; }
.mobile-map-marker-trend.is-flat { color: #f8fafc; }
.mobile-map-marker-date, .mobile-map-marker-time { display: block; max-width: 100%; font-size: .7em; font-weight: 700; line-height: 1.16; white-space: nowrap; }
.mobile-map-marker-date { margin-top: 2px; }
.mobile-map-empty { display: grid; justify-items: center; gap: 7px; padding: 38px 20px; margin-top: 10px; border: 1px dashed var(--line); border-radius: 12px; background: #f8fafc; color: var(--muted); text-align: center; }
.mobile-map-empty strong { color: var(--text); font-size: 1rem; }
@media (max-width: 480px) {
    .mobile-map-modal { width: calc(100vw - 8px); height: calc(100dvh - 8px); max-height: calc(100dvh - 8px); }
    .map-viewer-panel { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; }
    .map-viewer-panel .chart-modal-heading, .map-viewer-panel > .status, .mobile-map-heatmap-controls, .mobile-map-heatmap-legend { flex: 0 0 auto; }
    .mobile-map-viewport { flex: 1 1 auto; min-height: 260px; max-height: none; margin-top: 6px; }
    .view-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .view-actions .nav-button { width: 100%; }
    .view-actions .nav-button:only-child { grid-column: 1 / -1; }
}

.app-page .status-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; }
.status-row #status { flex: 1; min-width: 0; }
.status-row .refresh-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--primary); }
.status-row .refresh-icon:hover { background: #e8efff; }

/* Header options menu and application settings. */
.app-menu { position: relative; flex: 0 0 auto; margin-left: auto; }
.app-menu-toggle { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 9px; }
.app-menu-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.app-menu-panel { position: absolute; top: calc(100% + 7px); right: 0; z-index: 1000; width: min(220px, calc(100vw - 28px)); padding: 6px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgb(15 23 42 / 20%); }
.app-menu-panel form { width: 100%; margin: 0; }
.app-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; color: #1f2937; font: inherit; font-weight: 650; text-align: left; }
.app-menu-item:hover, .app-menu-item:focus-visible { background: #eff6ff; }
.app-menu-item svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-menu-logout { color: #b91c1c; }
.app-menu-logout:hover, .app-menu-logout:focus-visible { background: #fef2f2; }

.settings-modal { width: min(520px, calc(100vw - 20px)); max-width: none; padding: 0; border: 0; border-radius: 16px; background: transparent; }
.settings-modal::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(2px); }
.settings-panel { margin: 0; padding: 16px; border-radius: 16px; box-shadow: 0 20px 60px rgb(15 23 42 / 28%); }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.settings-heading h2 { margin: 0; }
.settings-heading button { flex: 0 0 auto; }

/* Web Push controls live in the settings dialog. */
.push-settings { display: grid; gap: 16px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.push-settings > div:first-child { min-width: 0; }
.push-settings strong { font-size: 1rem; }
.push-status { margin: 6px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.push-status.success { color: #166534; }
.push-status.warning { color: #825200; }
.push-status.error { color: var(--red); }
.push-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.push-actions button { width: 100%; }
.push-actions .danger-action { border-color: #fecaca; color: #b91c1c; background: #fff; }
.push-actions .danger-action:hover { background: #fef2f2; }
@media (max-width: 700px) {
    .settings-modal { width: calc(100vw - 12px); }
    .settings-panel { padding: 12px; }
    .push-settings { padding: 14px; }
}