/* Ferragudo agora as one screen: the most serious IPMA warning on top, the parking app on the left,
   the weather and the air quality stacked on the right. Below 900px: tabs, one part at a time. */

.page-agora .ag-app {
  --line: color-mix(in oklab, var(--p-ink) 10%, transparent);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100svh - var(--nav)); min-height: 620px; background: var(--p-surface); color: var(--p-ink);
}
.page-agora .ag-app .visually-hidden { position: absolute !important; }

/* ---------- the top bar: the page's title, then the warning as one line, the level as a pill ---------- */
.page-agora .ag-top { position: relative; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 14px 16px 0; }
.page-agora .ag-title { flex: none; margin: 0; font: var(--display-weight) 28px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--p-ink); }
.page-agora .ag-warning {
  --lv: #f2c94c; --lv-ink: var(--p-ink);
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 8px 6px 8px;
  border-radius: 999px; background: color-mix(in oklab, var(--lv) 16%, #fff); box-shadow: 0 0 0 1px color-mix(in oklab, var(--lv) 28%, transparent);
  font-size: 15px; line-height: 1.35;
}
.page-agora .ag-warning--laranja { --lv: #f08c00; }
.page-agora .ag-warning--vermelho { --lv: #c92a2a; --lv-ink: #fff; }
.page-agora .ag-warning__level {
  flex: none; padding: 6px 12px; border-radius: 999px; background: var(--lv); color: var(--lv-ink);
  font: 600 12px/1 var(--font-text); letter-spacing: .03em; text-transform: uppercase;
}
.page-agora .ag-warning--vermelho .ag-warning__level { animation: ag-pulse 2.4s ease-in-out infinite; }
@keyframes ag-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--lv) 22%, transparent); } }
.page-agora .ag-warning__type { flex: none; font-weight: 600; color: var(--p-ink); }
.page-agora .ag-warning__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-ink); }
.page-agora .ag-warning__when { flex: none; color: var(--p-muted); white-space: nowrap; }
.page-agora .ag-warning__more { position: relative; flex: none; }
.page-agora .ag-warning__more summary {
  list-style: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--p-ink); font: 500 13px/1 var(--font-text); cursor: pointer; white-space: nowrap;
}
.page-agora .ag-warning__more summary::-webkit-details-marker { display: none; }
.page-agora .ag-warning__more[open] summary { background: var(--p-ink); color: #fff; box-shadow: none; }
.page-agora .ag-warning__more ul {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(420px, 90vw); max-height: 60vh; overflow: auto; margin: 0; padding: 6px 18px;
  list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgb(20 41 58 / .22), 0 0 0 1px var(--line);
}
.page-agora .ag-warning__more li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--p-ink); }
.page-agora .ag-warning__more li:first-child { border-top: 0; }
.page-agora .ag-warning__more li strong { color: var(--p-ink); }
.page-agora .ag-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #f2c94c; }
.page-agora .ag-dot--laranja { background: #f08c00; }
.page-agora .ag-dot--vermelho { background: #c92a2a; }

/* ---------- the body: parking on the left two thirds, the rail on the right ---------- */
.page-agora .ag-tabs { display: none; }
.page-agora .ag-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(340px, 3fr); gap: 16px; min-height: 0; padding: 16px; }
.page-agora .ag-pane--parking.pk-app { height: auto; min-height: 0; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); }
.page-agora .ag-pane--parking .pk-panel { top: 14px; left: 14px; bottom: 14px; width: 352px; padding: 24px; }
.page-agora .ag-pane--parking .pk-panel .pk-title { font-size: 26px; }
.page-agora .ag-pane--parking .pk-now__num strong { font-size: 80px; }
.page-agora .ag-pane--parking .pk-donut { width: 96px; height: 96px; }
.page-agora .ag-rail { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

.page-agora .ag-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.page-agora .ag-card__head h2 { margin: 0; font: 500 18px/1.2 var(--font-display); letter-spacing: -0.01em; color: inherit; }
.page-agora .ag-card__src { font: 500 12px/1 var(--font-text); letter-spacing: .04em; opacity: .7; }
.page-agora .ag-card__note { margin: 0; font-size: 13px; opacity: .75; }

/* ---------- weather: the card takes the colour of the sky ---------- */
.page-agora .ag-weather {
  --sky: linear-gradient(160deg, #5b6f86, #93a5b8);
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; flex: none;
  padding: 20px 20px 18px; border-radius: 20px; background: var(--sky); color: #fff;
}
.page-agora .ag-weather--clear { --sky: linear-gradient(160deg, #1d6fd0 0%, #4aa2e9 65%, #f3c766 140%); }
.page-agora .ag-weather--fair { --sky: linear-gradient(160deg, #2f6fb8, #79afdf); }
.page-agora .ag-weather--cloud { --sky: linear-gradient(160deg, #536a83, #8fa3b8); }
.page-agora .ag-weather--rain { --sky: linear-gradient(160deg, #2c4865, #58799b); }
.page-agora .ag-weather--storm { --sky: linear-gradient(160deg, #222c3a, #4b5b74); }
.page-agora .ag-weather--fog { --sky: linear-gradient(160deg, #75879a, #b2bfcc); }
/* the sky is drawn on a canvas behind the numbers (js/weather-sky.js); the small tiles are frosted glass */
.page-agora .ag-weather > :not(.sky-canvas) { position: relative; z-index: 1; }
.page-agora .ag-weather__now { display: flex; align-items: center; gap: 14px; }
.page-agora .ag-weather__icon { width: 54px; height: 54px; flex: none; color: #fff; stroke-width: 1.3; }
.page-agora .ag-weather__temp { margin: 0; font: 300 66px/0.9 var(--font-display); letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; }
.page-agora .ag-weather__desc { display: grid; gap: 2px; margin: -4px 0 0; }
.page-agora .ag-weather__desc strong { font: 500 17px/1.3 var(--font-text); color: #fff; }
.page-agora .ag-weather__desc span { font-size: 14px; color: rgb(255 255 255 / .8); }
.page-agora .ag-weather__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.page-agora .ag-weather__facts > div { padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page-agora .ag-weather__facts dt { margin: 0 0 2px; font: 500 11px/1.2 var(--font-text); color: rgb(255 255 255 / .75); }
.page-agora .ag-weather__facts dd { margin: 0; font: 600 14px/1.25 var(--font-text); color: #fff; white-space: nowrap; }
.page-agora .ag-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.page-agora .ag-days li { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 8px 4px; border-radius: 12px; background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page-agora .ag-days li:first-child { background: rgb(255 255 255 / .22); }
.page-agora .ag-days__day { font: 600 12px/1.2 var(--font-text); color: #fff; }
.page-agora .ag-days__icon { width: 26px; height: 26px; color: #fff; }
.page-agora .ag-days__max { font: 600 15px/1 var(--font-text); color: #fff; font-variant-numeric: tabular-nums; }
.page-agora .ag-days__min { font: 400 13px/1 var(--font-text); color: rgb(255 255 255 / .7); font-variant-numeric: tabular-nums; }

/* ---------- air quality: a gauge of the five levels ---------- */
.page-agora .ag-air { display: flex; flex-direction: column; gap: 10px; flex: none; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--p-ink); }
.page-agora .ag-gauge { position: relative; width: min(100%, 200px); margin: 0 auto; }
.page-agora .ag-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-agora .ag-gauge path { fill: none; stroke: var(--air); stroke-width: 14; stroke-linecap: butt; opacity: .25; }
.page-agora .ag-gauge path.is-on { opacity: 1; }
.page-agora .ag-gauge__mark { fill: var(--air); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 2px 4px rgb(20 41 58 / .3)); }
.page-agora .ag-gauge__label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 400 30px/1 var(--font-display); letter-spacing: -0.03em; color: var(--p-ink); }
.page-agora .ag-pollutants { margin: 0; padding: 0; list-style: none; }
.page-agora .ag-pollutants li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.page-agora .ag-pollutants__name { color: var(--p-ink); }
.page-agora .ag-pollutants__name small { margin-left: 4px; font-size: 12px; color: var(--p-muted); }
.page-agora .ag-pollutants__value { color: var(--p-muted); font-size: 13px; white-space: nowrap; }
.page-agora .ag-pollutants__value b { font: 600 17px/1 var(--font-text); color: var(--p-ink); font-variant-numeric: tabular-nums; }
.page-agora .ag-pollutants__level { display: inline-flex; align-items: center; gap: 6px; min-width: 76px; font-weight: 500; color: var(--p-ink); }
.page-agora .ag-pollutants__level::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--air); }
.page-agora .ag-air .ag-card__note { color: var(--p-muted); opacity: 1; }

.page-agora .ag-empty { padding: 32px 20px; text-align: center; color: var(--p-muted); }

/* ---------- tablet and phone: one part at a time, chosen from tabs ---------- */
@media (max-width: 899px) {
  .page-agora .ag-app { height: auto; min-height: 0; grid-template-rows: none; }
  .page-agora .ag-top { flex-wrap: wrap; gap: 10px; padding: 14px 16px 0; }
  .page-agora .ag-title { font-size: 26px; }
  .page-agora .ag-warning { flex-basis: 100%; flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; border-radius: 16px; }
  .page-agora .ag-warning__text { flex-basis: 100%; order: 3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .page-agora .ag-warning__when { order: 2; }
  .page-agora .ag-warning__more { order: 4; }
  .page-agora .ag-warning__more ul { right: auto; left: 0; }
  .page-agora .ag-tabs {
    display: flex; gap: 4px; margin: 12px 16px 0; padding: 4px; border-radius: 999px; background: color-mix(in oklab, var(--p-ink) 7%, transparent);
  }
  .page-agora .ag-tab {
    flex: 1; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
    color: var(--p-muted); font: 500 15px/1 var(--font-text); cursor: pointer;
  }
  .page-agora .ag-tab.is-on { background: #fff; color: var(--p-ink); box-shadow: 0 1px 2px rgb(20 41 58 / .14), 0 0 0 1px rgb(20 41 58 / .05); }
  .page-agora .ag-body { display: block; padding: 12px 16px 16px; }
  .page-agora .ag-rail { display: contents; }
  .page-agora .ag-pane { display: none; }
  .page-agora .ag-pane.is-on { display: flex; }
  .page-agora .ag-pane--parking.pk-app.is-on { display: block; height: calc(100svh - var(--nav) - 150px); min-height: 520px; }
}
@media (max-width: 767px) {
  .page-agora .ag-pane--parking .pk-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: 8px 20px 20px; }
  .page-agora .ag-pane--parking .pk-now__num strong { font-size: 60px; }
  .page-agora .ag-pane--parking .pk-donut { width: 80px; height: 80px; }
}
@media (max-width: 420px) {
  .page-agora .ag-weather__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .page-agora .ag-warning--vermelho .ag-warning__level { animation: none; }
}

/* the assistant's floating button would sit on the rail: on this screen it stays out of the way */
.page-agora #openChatBtn { display: none; }