:root {
  --oys-ink: var(--omayhtio-primary, #102a58);
  --oys-blue: var(--omayhtio-accent, #1466d9);
  --oys-surface: var(--omayhtio-card, #ffffff);
  --oys-page: #f2f7fb;
  --oys-muted: #60718f;
  --oys-border: #dce7f1;
  --oys-good: #04745e;
  --oys-good-bg: #eaf8f3;
  --oys-note-bg: #edf5ff;
}

.oys-widget,
.oys-widget * { box-sizing: border-box; }

.oys-widget {
  color: var(--oys-ink);
  background: var(--oys-surface);
  border: 1px solid var(--oys-border);
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(25, 58, 102, .08);
  font-family: inherit;
  margin: 24px auto;
  max-width: 1440px;
  overflow: hidden;
  padding: clamp(22px, 3vw, 40px);
}

.oys-widget__head { align-items: flex-start; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 30px; }
.oys-widget__head-actions { align-items: center; display: flex; gap: 14px; }
.oys-widget__eyebrow { color: var(--oys-blue); font-size: 12px; font-weight: 750; letter-spacing: .08em; margin: 0 0 6px; text-transform: uppercase; }
.oys-widget h2 { color: var(--oys-ink); font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; line-height: 1; margin: 0; }
.oys-widget__live { align-items: center; color: var(--oys-muted); display: flex; font-size: 13px; gap: 7px; white-space: nowrap; }
.oys-widget__live i { background: #24ae76; border-radius: 50%; box-shadow: 0 0 0 4px #e5f8ef; display: block; height: 7px; width: 7px; }
.oys-widget__collapse { align-items: center; background: #f5f9ff; border: 1px solid #cbdced; border-radius: 999px; color: var(--oys-blue); cursor: pointer; display: none; font: inherit; font-size: 13px; font-weight: 750; min-height: 34px; padding: 6px 13px; }
.oys-widget__collapse:hover { background: #edf5ff; border-color: #a9c9e7; }
.oys-widget__collapse:focus-visible { outline: 3px solid var(--oys-blue); outline-offset: 3px; }

.oys-widget__grid { display: grid; grid-template-columns: .88fr 1.06fr 1.08fr; }
.oys-widget__weather, .oys-widget__electricity { border-right: 1px solid var(--oys-border); padding: 8px clamp(22px, 3vw, 42px); }
.oys-widget__weather { align-items: center; display: flex; gap: 20px; padding-left: 0; }
.oys-widget__electricity { min-width: 0; }
.oys-widget__action { padding: 8px 0 8px clamp(22px, 3vw, 42px); }
.oys-widget__label { color: var(--oys-muted); font-size: 13px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.oys-widget__muted { color: var(--oys-muted); font-size: 13px; margin: 8px 0 0; }
.oys-widget__temperature { color: var(--oys-ink); font-size: clamp(54px, 6vw, 76px); font-weight: 760; letter-spacing: -.08em; line-height: .9; margin: 10px 0 13px; }
.oys-widget__temperature sup { font-size: .53em; vertical-align: top; }
.oys-widget__description { font-size: 17px; font-weight: 670; margin: 0; }
.oys-widget__price { color: var(--oys-good); font-size: clamp(42px, 4vw, 60px); font-weight: 780; letter-spacing: -.065em; line-height: 1; margin: 2px 0 18px; }
.oys-widget__price small { font-size: .42em; letter-spacing: -.025em; }
.oys-widget__vat { margin-top: 8px; }
.oys-widget__empty { color: var(--oys-muted); font-size: 15px; margin: 20px 0; }
.oys-electricity__headline { align-items: center; display: flex; gap: 9px; justify-content: space-between; }
.oys-current-hour { background: #e6f7ef; border-radius: 999px; color: var(--oys-good); font-size: 12px; font-weight: 750; padding: 5px 8px; }
.oys-city-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.oys-city-tab, .oys-chart-tabs button { appearance: none; background: transparent; border: 0; color: var(--oys-muted); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 4px 0; }
.oys-city-tab + .oys-city-tab::before { color: var(--oys-border); content: '•'; margin: 0 7px 0 1px; }
.oys-city-tab.is-active { color: var(--oys-blue); }
.oys-city-tab:focus-visible, .oys-chart-tabs button:focus-visible, .oys-compact-summary:focus-visible { outline: 3px solid var(--oys-blue); outline-offset: 3px; }

.oys-pin { background: var(--oys-blue); border-radius: 50% 50% 50% 0; display: inline-block; height: 10px; margin-right: 6px; transform: rotate(-45deg); width: 10px; }
.oys-pin::after { background: white; border-radius: 50%; content: ''; display: block; height: 3px; margin: 3.5px; width: 3px; }

.oys-weather-icon { flex: 0 0 auto; height: 82px; position: relative; width: 102px; }
.oys-weather-icon::before, .oys-weather-icon::after { content: ''; position: absolute; }
.oys-weather-icon--sun::before { background: #ffc334; border-radius: 50%; box-shadow: 0 -15px 0 -5px #ffc334, 0 15px 0 -5px #ffc334, 15px 0 0 -5px #ffc334, -15px 0 0 -5px #ffc334; height: 44px; left: 29px; top: 19px; width: 44px; }
.oys-weather-icon--moon::before { background: #9db9ea; border-radius: 50%; box-shadow: 16px -5px 0 3px var(--oys-surface); height: 48px; left: 22px; top: 16px; width: 48px; }
.oys-weather-icon--cloud::before, .oys-weather-icon--rain::before, .oys-weather-icon--snow::before, .oys-weather-icon--storm::before, .oys-weather-icon--fog::before { background: #a7cdf7; border-radius: 45px; box-shadow: -20px 12px 0 -3px #bfdcff, 20px 14px 0 -4px #a7cdf7; height: 44px; left: 30px; top: 24px; width: 58px; }
.oys-weather-icon--cloud::after { background: #ffc334; border-radius: 50%; height: 38px; left: 13px; top: 8px; width: 38px; z-index: -1; }
.oys-weather-icon--rain::after { background: linear-gradient(110deg, transparent 43%, #2b86e9 44% 57%, transparent 58%) 0 0 / 20px 25px; height: 30px; left: 34px; top: 61px; width: 58px; }
.oys-weather-icon--snow::after { color: #559cf0; content: '✦  ✦  ✦'; font-size: 17px; left: 22px; letter-spacing: 1px; top: 56px; white-space: nowrap; }
.oys-weather-icon--storm::after { color: #f7af22; content: 'ϟ'; font-size: 46px; font-weight: 800; left: 48px; top: 48px; }
.oys-weather-icon--fog::after { background: #a5b8cf; box-shadow: 10px 10px 0 #a5b8cf; height: 3px; left: 12px; top: 58px; width: 70px; }

.oys-chart-tabs { display: flex; gap: 14px; margin: 0 0 4px; }
.oys-chart-tabs button { border-bottom: 2px solid transparent; padding: 2px 1px 5px; }
.oys-chart-tabs button.is-active { border-bottom-color: var(--oys-blue); color: var(--oys-ink); }
.oys-chart { align-items: end; display: flex; gap: 3px; height: 88px; padding: 4px 1px 0; }
.oys-chart__item { align-items: stretch; align-self: stretch; display: flex; flex: 1; flex-direction: column; justify-content: end; min-width: 0; }
.oys-chart__bar { background: #b7d8fa; border-radius: 4px 4px 1px 1px; min-height: 6px; position: relative; }
.oys-chart__bar.is-current { background: var(--oys-good); box-shadow: 0 0 0 2px rgba(4, 116, 94, .16); }
.oys-chart__bar.is-past { opacity: .37; }
.oys-chart__bar.is-expensive { background: #ffc764; }
.oys-chart__bar.is-current.is-expensive { background: var(--oys-good); }
.oys-chart__hour { color: var(--oys-muted); font-size: 9px; line-height: 1; margin-top: 5px; text-align: center; }
.oys-chart-note { color: var(--oys-muted); font-size: 11px; margin: 5px 0 0; }
.oys-chart__bar:hover::after { background: var(--oys-ink); border-radius: 5px; color: white; content: attr(data-price) ' snt/kWh'; font-size: 11px; left: 50%; padding: 5px 6px; position: absolute; top: -32px; transform: translateX(-50%); white-space: nowrap; z-index: 2; }

.oys-widget__action { display: grid; gap: 12px; }
.oys-action__window, .oys-action__tip { align-items: flex-start; border-radius: 14px; display: flex; gap: 14px; padding: 15px 16px; }
.oys-action__window { background: var(--oys-good-bg); }
.oys-action__tip { background: var(--oys-note-bg); }
.oys-action__window .oys-widget__label { margin-bottom: 2px; }
.oys-action__window strong { color: var(--oys-good); display: block; font-size: 29px; letter-spacing: -.04em; line-height: 1; }
.oys-action__window p:not(.oys-widget__label), .oys-action__tip p { font-size: 14px; margin: 5px 0 0; }
.oys-action__tip strong { display: block; font-size: 15px; }
.oys-action__icon { border: 2px solid currentColor; border-radius: 50%; color: var(--oys-good); display: block; flex: 0 0 auto; height: 32px; position: relative; width: 32px; }
.oys-action__icon--clock::before, .oys-action__icon--clock::after { background: currentColor; content: ''; left: 14px; position: absolute; top: 6px; transform-origin: bottom; width: 2px; }
.oys-action__icon--clock::before { height: 10px; transform: rotate(-35deg); }
.oys-action__icon--clock::after { height: 7px; transform: rotate(60deg); }
.oys-action__icon--spark { border-color: var(--oys-blue); color: var(--oys-blue); }
.oys-action__icon--spark::after { content: '✦'; font-size: 20px; left: 4px; position: absolute; top: 1px; }
.oys-widget__footer { border-top: 1px solid var(--oys-border); color: var(--oys-muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 7px; margin: 26px 0 0; padding-top: 16px; }

.oys-widget--compact { background: #fff; border-radius: 24px; padding: 22px; }
.oys-compact-summary { align-items: center; background: #f5f9ff; border: 1px solid #d4e2f2; border-radius: 22px; color: var(--oys-ink); cursor: pointer; display: grid; font: inherit; gap: 18px; grid-template-columns: minmax(150px, .82fr) minmax(200px, 1fr) 48px; min-height: 116px; padding: 18px 22px; text-align: left; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; width: 100%; }
.oys-compact-summary:hover { background: #eff6ff; border-color: #b8d4ef; box-shadow: 0 9px 20px rgba(30, 83, 143, .10); transform: translateY(-1px); }
.oys-compact-summary__weather { align-items: center; display: grid; gap: 1px; grid-template-columns: 54px minmax(0, 1fr); min-width: 0; }
.oys-compact-summary .oys-weather-icon { height: 82px; margin-right: -48px; transform: scale(.52); transform-origin: left center; width: 102px; }
.oys-compact-summary__temperature { min-width: 0; }
.oys-compact-summary strong { display: block; font-size: 32px; letter-spacing: -.055em; line-height: .94; }
.oys-compact-summary__temperature sup { font-size: .52em; vertical-align: top; }
.oys-compact-summary small { color: var(--oys-muted); display: block; font-size: 13px; font-weight: 720; line-height: 1.2; margin-top: 5px; }
.oys-compact-summary__price { align-self: center; min-width: 0; }
.oys-compact-summary__price small { font-size: 14px; }
.oys-compact-summary__price strong { font-size: 32px; white-space: nowrap; }
.oys-compact-summary__price em { font-size: 15px; font-style: normal; letter-spacing: -.02em; }
.oys-compact-summary__open { align-items: center; color: var(--oys-blue); display: flex; font-size: 13px; font-weight: 750; gap: 10px; justify-content: flex-end; white-space: nowrap; }
.oys-compact-summary__open span { font-size: 27px; line-height: 1; }
.oys-widget--compact .oys-widget__detail { display: none; }
.oys-widget--compact.is-expanded { padding: clamp(22px, 3vw, 40px); }
.oys-widget--compact.is-expanded .oys-compact-summary { display: none; }
.oys-widget--compact.is-expanded .oys-widget__detail { display: block; }
.oys-widget--compact.is-expanded .oys-widget__collapse { display: inline-flex; }

/* Dashboardissa tiivis muoto on yksi selkeä tilannekortti eikä kortti kortin sisällä. */
.oys-widget--dashboard.oys-widget--compact { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 16px 0; max-width: none; overflow: visible; padding: 0; }
.oys-widget--dashboard.oys-widget--compact .oys-compact-summary { border-radius: 20px; min-height: 104px; }
.oys-widget--dashboard.oys-widget--compact.is-expanded { background: var(--oys-surface); border: 1px solid var(--oys-border); border-radius: 22px; box-shadow: 0 12px 35px rgba(25, 58, 102, .08); overflow: hidden; padding: clamp(22px, 3vw, 40px); }

@media (max-width: 900px) {
  .oys-widget__grid { grid-template-columns: 1fr 1.25fr; }
  .oys-widget__action { border-top: 1px solid var(--oys-border); grid-column: 1 / -1; margin-top: 24px; padding: 24px 0 0; }
  .oys-widget__action { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .oys-widget { border-radius: 16px; margin: 14px 0; padding: 21px 18px; }
  .oys-widget__head { margin-bottom: 22px; }
  .oys-widget__head-actions { gap: 10px; }
  .oys-widget__collapse { min-height: 32px; padding: 5px 11px; }
  .oys-widget__live { font-size: 0; }
  .oys-widget__live i { height: 9px; width: 9px; }
  .oys-widget__grid { display: block; }
  .oys-widget__weather, .oys-widget__electricity { border-bottom: 1px solid var(--oys-border); border-right: 0; padding: 18px 0; }
  .oys-widget__weather { padding-top: 0; }
  .oys-widget__electricity { padding-bottom: 22px; }
  .oys-widget__action { display: grid; grid-template-columns: 1fr; margin-top: 0; padding-top: 22px; }
  .oys-weather-icon { transform: scale(.78); transform-origin: left center; margin-right: -17px; }
  .oys-widget__temperature { font-size: 59px; }
  .oys-widget__footer { line-height: 1.45; }
  .oys-chart { gap: 2px; }
  .oys-chart__hour { font-size: 8px; }
  .oys-widget--compact { border-radius: 22px; padding: 14px; }
  .oys-compact-summary { gap: 9px; grid-template-columns: minmax(96px, .8fr) minmax(132px, 1fr) 28px; min-height: 130px; padding: 15px 14px; }
  .oys-compact-summary__weather { grid-template-columns: 42px minmax(0, 1fr); }
  .oys-compact-summary .oys-weather-icon { margin-right: -60px; transform: scale(.42); }
  .oys-compact-summary strong, .oys-compact-summary__price strong { font-size: 28px; }
  .oys-compact-summary small, .oys-compact-summary__price small { font-size: 12px; }
  .oys-compact-summary__price em { font-size: 12px; }
  .oys-compact-summary__open { font-size: 0; }
  .oys-compact-summary__open span { font-size: 29px; }
  .oys-widget--dashboard.oys-widget--compact { margin: 14px 0; padding: 0; }
  .oys-widget--dashboard.oys-widget--compact .oys-compact-summary { border-radius: 18px; min-height: 112px; }
  .oys-widget--dashboard.oys-widget--compact.is-expanded { border-radius: 16px; padding: 21px 18px; }
}

.oys-widget [hidden] { display: none !important; }
.oys-widget { container-type: inline-size; }
.oys-widget__status { color: var(--oys-muted); font-size: 13px; }
.oys-widget__grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.06fr) minmax(0, 1.08fr); }
@container (max-width: 850px) {
 .oys-widget__grid { display: block; }
 .oys-widget__weather, .oys-widget__electricity { border-right: 0; border-bottom: 1px solid var(--oys-border); padding: 18px 0; }
 .oys-widget__action { border: 0; padding: 18px 0 0; margin: 0; }
 .oys-widget__head { flex-wrap: wrap; }
}