:root{
  --snow:#e6f2ff; --paper:#fbfdff; --ink:#14212b; --muted:#5a6b78;
  --fjord:#2b6a99; --fjord-dark:#1c4a6e; --steel:#9ab6cc; --line:#c4d6e4;
  --ok:#1f7a4d; --ok-bg:#dff3e8; --warn:#8a5200; --warn-bg:#fdeccb;
  --err:#b3261e; --night:#101a22;
  --font:'Libre Caslon Text',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.6;
  background:var(--snow) url(../../image/back.jpg) center/cover fixed no-repeat}
img{max-width:100%;height:auto}
a{color:var(--fjord-dark)}
h1,h2,h3{line-height:1.25;margin:0 0 .6rem}
h1{font-size:clamp(1.8rem,5vw,2.6rem)} h2{font-size:1.3rem} h3{font-size:1.1rem}
:focus-visible{outline:3px solid var(--fjord);outline-offset:2px}

/* Header + menu */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;
  padding:.5rem 1rem;background:rgba(251,253,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{margin-left:auto;display:block}
.brand img{height:44px;width:auto;display:block}
.menu-btn{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-content:center;gap:5px}
.menu-btn span{display:block;width:26px;height:3px;background:var(--ink);border-radius:2px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25}
[hidden]{display:none!important}
.menu{position:fixed;inset:0 auto 0 0;width:min(340px,86vw);z-index:30;overflow-y:auto;
  background:var(--night);color:#fff;padding:1rem 1.25rem 2rem;transform:translateX(-100%);
  transition:transform .25s ease;visibility:hidden}
.menu.open{transform:none;visibility:visible}
.menu-close{float:right;width:44px;height:44px;border:0;background:none;color:#fff;font-size:2rem;cursor:pointer}
.menu ul{list-style:none;margin:0;padding:0}
.menu-group{clear:both;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.18)}
.menu-group:first-of-type{border-top:0}
.menu a{display:block;padding:.45rem 0;color:#fff;text-decoration:none}
.menu a:hover,.menu a:focus-visible{color:#cfe6f7;text-decoration:underline}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:1rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1.25rem;margin-bottom:1.25rem}
.status{max-width:1100px;margin:.75rem auto 0;padding:.6rem 1rem;border-radius:8px;font-weight:700;width:calc(100% - 2rem)}
.status-ok{background:var(--ok-bg);color:var(--ok)}
.status-warn{background:var(--warn-bg);color:var(--warn)}
.notice{background:#e8f1fa;border-left:4px solid var(--fjord);padding:.6rem 1rem;border-radius:4px}
.muted{color:var(--muted)}

/* Tables */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--line)}
.data-table th{background:var(--steel);font-size:.95rem}
.data-table tbody tr:nth-child(even){background:#eef5fb}
@media (max-width:720px){
  .data-table thead{position:absolute;left:-9999px}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{border:1px solid var(--line);border-radius:8px;margin-bottom:.75rem;padding:.25rem 0;background:#fff!important}
  .data-table td{border:0;padding:.3rem .9rem;text-align:right;overflow:hidden}
  .data-table td::before{content:attr(data-label);float:left;margin-right:1rem;font-weight:700;text-align:left;color:var(--muted)}
  .data-table td:first-child{font-weight:700;font-size:1.1rem;background:var(--steel);border-radius:7px 7px 0 0;margin-top:-.25rem;padding-top:.5rem;padding-bottom:.5rem}
  .data-table td:first-child::before{display:none}
}

/* Sensor chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:.4rem .9rem;border:1px solid var(--fjord);border-radius:999px;background:#fff;color:var(--fjord-dark)}
.chip input:checked+span{background:var(--fjord);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--fjord);outline-offset:2px}

/* Forms + buttons */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;margin-bottom:.25rem}
.field input{width:100%;padding:.7rem .8rem;font:inherit;border:1px solid var(--muted);border-radius:6px;background:#fff}
.field.has-error input{border-color:var(--err)}
.error{color:var(--err);margin:.25rem 0 0}
.btn{display:inline-block;padding:.7rem 1.2rem;font:inherit;border:1px solid var(--fjord);border-radius:6px;
  background:#fff;color:var(--fjord-dark);text-decoration:none;cursor:pointer}
.btn:hover{background:#eef5fb}
.btn-primary{background:var(--fjord);color:#fff;width:100%}
.btn-primary:hover{background:var(--fjord-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.login{max-width:440px;margin:1rem auto}
.hero{text-align:center;margin:1rem 0 1.5rem}

/* Blog teaser + cookies */
.blog img{display:block;margin:.75rem auto 0;max-width:min(500px,100%)}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--night);color:#fff;padding:1rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:center;text-align:center}
.cookie a{color:#cfe6f7}
@media (prefers-reduced-motion:reduce){.menu{transition:none}}

/* Trend page */
.slider{width:100%;accent-color:var(--fjord);margin:.5rem 0 0}
.slider-labels{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-bottom:1.25rem}
.chart{width:100%;height:420px}
@media (max-width:720px){.chart{height:340px}}

/* Road page: highlight when new snow exceeds the limit */
.alert-cell{background:tomato!important;font-weight:700}

/* Sensor map */
.map{width:100%;height:75vh;min-height:360px;border-radius:8px;overflow:hidden}

/* Smaller secondary chart */
.chart-sm{height:260px}

/* Load calculator */
.calc{max-width:480px}
.calc .field input{max-width:200px}
.result{font-size:1.2rem;margin:1rem 0}
.result strong{font-size:2rem}
.card ul{padding-left:1.25rem}
.card h3{margin-top:1.25rem}

/* Red action button */
.btn-danger{background:var(--err);border-color:var(--err);color:#fff}
.btn-danger:hover{background:#8f1d17}

/* Messages and forms on account pages */
.notice-ok{background:var(--ok-bg);border-left-color:var(--ok);color:var(--ok)}
.notice-err{background:#fde8e6;border-left-color:var(--err);color:var(--err)}
.form-narrow{max-width:420px}
.danger-zone{border-color:var(--err)}
.field label input[type=checkbox]{width:auto;margin-right:.5rem}