/* Per-view styles for login, home, styleguide. */

/* Login */
.login { min-height: 100vh; display: flex; justify-content: center; background: var(--grad-screen); }
.login-inner { width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.login-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 40px; text-align: center; }
.login-head .hero-logo { width: 72px; height: 72px; margin-bottom: 4px; }
.login-head .wordmark { font-size: 34px; letter-spacing: 0; }
.login-fields { display: flex; flex-direction: column; gap: 14px; }
.login-alt { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.login-alt[hidden] { display: none; }
.login-alt .form-error:empty { display: none; }
.login-existing { border-top: 1px solid var(--border); padding-top: 16px; }
.login-existing > summary { cursor: pointer; text-align: center; color: var(--text-secondary); font-size: 15px; font-weight: 600; list-style-position: inside; }
.login-existing[open] > summary { margin-bottom: 16px; }
.login-existing .t-caption2 { text-align: center; }
.login-forgot { font-size: 13px; color: var(--text-secondary); text-align: center; }
.login-forgot summary { cursor: pointer; color: var(--blue); }
.login-forgot p { margin: 8px 0 0; text-align: left; }
.login-google { min-height: 44px; width: 100%; display: flex; justify-content: center; }

/* Home */
.home-greeting { font-size: 22px; font-weight: 700; }
.hero-card {
  background: var(--grad-brand); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg);
}
.hero-card h2 { font-size: 28px; font-weight: 800; }
.hero-card p { font-size: 15px; color: var(--text-secondary); margin-top: 4px; }
.tip-card { display: flex; align-items: center; gap: var(--space-md); }
.tip-card svg { width: 20px; height: 20px; flex: none; }
.tip-card .tip-text { flex: 1; font-size: 16px; }
.tip-card .chev { color: var(--text-tertiary); width: 14px; height: 14px; }
.wx { display: flex; align-items: center; gap: var(--space-md); }
.wx-icon { width: 36px; height: 36px; flex: none; color: var(--text-secondary); }
.wx-sun, .wx-cloud-sun { color: var(--gold); }
.wx-rain, .wx-drizzle, .wx-storm { color: var(--blue); }
.wx-temp { font-size: 40px; font-weight: 800; line-height: 1; }
.wx-meta { flex: 1; min-width: 0; }
.wx-cond { font-size: 16px; font-weight: 600; }
.wx-comment { margin-top: var(--space-md); font-size: 15px; color: var(--text-secondary); }
.last-score { font-size: 56px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.explore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.explore-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  padding: var(--space-xl) 0; font-size: 15px; font-weight: 600;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.explore-tile svg { width: 26px; height: 26px; color: var(--green); }
.explore-tile:hover { border-color: var(--border-strong); }
@media (min-width: 1000px) { .explore-grid { grid-template-columns: repeat(4, 1fr); } }

/* Styleguide */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-sm); }
.swatch { border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; font-size: 11px; }
.swatch i { display: block; height: 40px; }
.swatch span { display: block; padding: 4px 6px; color: var(--text-secondary); }