/* BeCloser base + module styles — dashboard scaffold (see brand kit design.md §5–§11) */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body-color);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--text-body--line-height);
  font-weight:var(--font-weight-normal);
  -webkit-font-smoothing:antialiased;
  transition:background var(--duration-slow) var(--ease-in-out),color var(--duration-slow) var(--ease-in-out);
}
h1,h2,h3{font-family:var(--font-heading);color:var(--text-strong);margin:0}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
svg{display:block}

/* ---------- shell ---------- */
.shell{max-width:var(--container-site);margin:0 auto;padding:0 var(--gutter-lg)}
@media (max-width:768px){.shell{padding:0 var(--gutter)}}

.app-bar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface-page) 88%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-subtle);
}
.app-bar-inner{
  max-width:var(--container-site);margin:0 auto;
  padding:var(--space-4) var(--gutter-lg);
  display:flex;align-items:center;gap:var(--space-4);
}
@media (max-width:768px){.app-bar-inner{padding:var(--space-3) var(--gutter);gap:var(--space-3)}}
.brand-slot{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.brand-slot img{height:18px;width:auto}
.brand-rule{width:1px;height:22px;background:var(--border-subtle);flex:none}
.app-title{
  font-family:var(--font-heading);font-weight:var(--font-weight-black);
  font-size:var(--text-title);line-height:1;letter-spacing:var(--tracking-tight);
  color:var(--text-strong);white-space:nowrap;
}
.app-bar-spacer{flex:1 1 auto}
.bar-tools{display:flex;align-items:center;gap:var(--space-3)}

.live-tag{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-technical);font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);color:var(--text-muted);
  text-transform:uppercase;white-space:nowrap;
}
.live-dot{
  width:7px;height:7px;border-radius:var(--radius-full);
  background:var(--color-primary);box-shadow:var(--glow-toggle);flex:none;
  animation:pulse 2.4s var(--ease-in-out) infinite;
}
[data-theme="light"] .live-dot{background:var(--color-primary-900);box-shadow:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-tag[data-state="error"] .live-dot{background:var(--feedback-error-border);box-shadow:none;animation:none}
.live-tag[data-state="loading"] .live-dot{background:var(--text-muted);box-shadow:none}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;
  background:transparent;color:var(--text-strong);
  border:1px solid var(--border-subtle);border-radius:var(--radius-full);
  cursor:pointer;transition:color var(--duration-base) var(--ease-in-out),border-color var(--duration-base) var(--ease-in-out),background var(--duration-base) var(--ease-in-out);
}
.icon-btn:hover{color:var(--text-link-hover);border-color:var(--border-accent)}
.icon-btn svg{width:17px;height:17px}
.icon-btn[data-busy="1"] svg{animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- sections ---------- */
main{padding-bottom:var(--space-24)}
.band{padding-top:var(--space-12)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.eyebrow{
  font-family:var(--font-technical);font-size:var(--text-xs);font-weight:500;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);
  margin:0 0 var(--space-2);
}
.band-title{font-size:var(--text-headline);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-tight)}
.band-note{font-family:var(--font-technical);font-size:var(--text-xs);color:var(--text-muted);text-align:right;white-space:nowrap}

.panel{
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-6);
}
[data-theme="light"] .panel{box-shadow:var(--shadow-sm)}

/* ---------- module: kpi-row (adesso) ---------- */
.now-panel{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1.15fr);gap:var(--space-8);align-items:center}
@media (max-width:900px){.now-panel{grid-template-columns:1fr;gap:var(--space-6)}}

.now-main{display:flex;align-items:center;gap:var(--space-6)}
.now-glyph{width:76px;height:76px;flex:none;color:var(--color-primary)}
[data-theme="light"] .now-glyph{color:var(--color-primary-900)}
.now-glyph svg{width:100%;height:100%;stroke-width:1.4}
.now-read{min-width:0}
.now-temp{
  font-family:var(--font-heading);font-weight:var(--font-weight-black);
  font-size:clamp(3.25rem,1.6rem + 6vw,5.25rem);line-height:.92;
  letter-spacing:var(--tracking-tight);color:var(--text-strong);
  display:block;
}
.now-temp sup{font-size:.42em;font-weight:var(--font-weight-bold);vertical-align:super;letter-spacing:0}
.now-cond{font-size:var(--text-lg);color:var(--text-strong);font-weight:var(--font-weight-medium);margin-top:var(--space-2)}
.now-feels{font-family:var(--font-technical);font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2);letter-spacing:var(--tracking-wide);text-transform:uppercase}

.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:640px){.metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.metric{
  background:var(--surface-page);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:var(--space-4);min-width:0;
}
[data-theme="light"] .metric{background:var(--surface-sunken)}
.metric-name{
  font-family:var(--font-technical);font-size:var(--text-xs);font-weight:500;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);
  display:block;margin-bottom:var(--space-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.metric-value{
  font-family:var(--font-technical);font-size:var(--text-lg);font-weight:600;
  color:var(--text-strong);line-height:1.1;display:block;font-variant-numeric:tabular-nums;
}
.metric-value .unit{font-size:.62em;font-weight:400;color:var(--text-muted);margin-left:2px}
.metric-note{font-family:var(--font-technical);font-size:var(--text-xs);color:var(--text-muted);display:block;margin-top:var(--space-2)}

/* ---------- module: charts ---------- */
.plot{width:100%;height:340px}
.plot-sm{width:100%;height:280px}
@media (max-width:640px){.plot{height:280px}.plot-sm{height:260px}}
.takeaway{
  font-size:var(--text-body);color:var(--text-body-color);margin:var(--space-4) 0 0;
  padding-top:var(--space-4);border-top:1px solid var(--border-subtle);
}
.takeaway b{color:var(--text-strong);font-weight:var(--font-weight-bold)}

/* ---------- module: section-insight (dettagli giornata) ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-3)}
@media (max-width:640px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.detail-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);min-width:0}
[data-theme="light"] .detail-item{background:var(--surface-sunken)}
.detail-ico{width:22px;height:22px;flex:none;color:var(--text-muted)}
.detail-ico svg{width:100%;height:100%;stroke-width:1.8}
.detail-body{min-width:0}
.detail-item .metric-name{white-space:normal;overflow:visible}
@media (max-width:640px){
  .app-title{font-size:var(--text-base)}
  .live-tag .live-word{display:none}
  .live-tag .live-sep{display:none}
}

/* ---------- module: forecast-cards (7 giorni) ---------- */
.day-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:1100px){.day-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.day-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.day-card{
  background:var(--surface-raised);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;min-width:0;
  transition:border-color var(--duration-base) var(--ease-in-out);
}
.day-card:hover{border-color:var(--border-accent)}
[data-theme="light"] .day-card{box-shadow:var(--shadow-sm)}
.day-card[data-today="1"]{border-color:var(--color-primary);box-shadow:var(--glow-toggle)}
[data-theme="light"] .day-card[data-today="1"]{border-color:var(--color-primary-900);box-shadow:var(--shadow-md)}
.day-name{
  font-family:var(--font-technical);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-strong);
}
.day-date{font-family:var(--font-technical);font-size:var(--text-xs);color:var(--text-muted);display:block;margin-top:2px;font-weight:400;letter-spacing:0}
.day-glyph{width:38px;height:38px;color:var(--color-primary)}
[data-theme="light"] .day-glyph{color:var(--color-primary-900)}
.day-glyph svg{width:100%;height:100%;stroke-width:1.5}
.day-cond{font-size:var(--text-xs);font-family:var(--font-technical);color:var(--text-muted);line-height:1.35;min-height:2.7em;display:flex;align-items:center;justify-content:center}
.day-temps{font-family:var(--font-technical);font-size:var(--text-base);font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.day-temps .low{color:var(--text-muted);font-weight:400;margin-left:var(--space-2)}
.day-rain{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-technical);font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.day-rain svg{width:13px;height:13px;stroke-width:2;color:var(--chart-4)}

/* ---------- states ---------- */
.notice{
  display:none;margin-top:var(--space-6);padding:var(--space-4) var(--space-5);
  background:var(--feedback-error-bg);border:1px solid var(--feedback-error-border);
  color:var(--feedback-error-text);border-radius:var(--radius-sm);
  font-family:var(--font-technical);font-size:var(--text-xs);
}
.notice[data-on="1"]{display:block}
[data-loading="1"] .fades{opacity:.35}
.fades{transition:opacity var(--duration-slow) var(--ease-in-out)}

/* ---------- colophon ---------- */
.colophon{
  margin-top:var(--space-16);padding:var(--space-8) 0;border-top:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
}
.colophon img{height:15px;width:auto;opacity:.85}
.source-note{font-family:var(--font-technical);font-size:var(--text-xs);color:var(--text-muted);line-height:1.6}
.source-note a{color:var(--text-link);text-decoration:none}
.source-note a:hover{color:var(--text-link-hover)}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(36px);filter:blur(8px)}
.rise[data-shown="1"]{opacity:1;transform:none;filter:none;transition:opacity var(--duration-reveal) var(--ease-expressive),transform var(--duration-reveal) var(--ease-expressive),filter var(--duration-reveal) var(--ease-expressive)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none;filter:none}
}