@thl-ui/styles 0.0.0-stage → 0.1.1

package/src/components/_widgets.scss

@@ -0,0 +1,1102 @@
+@use '../mixins' as *;
+
+/* info-box */
+.#{$p}-info-box {
+  --_c: #{v(theme)};
+  --_on: #{v(on-theme)};
+  --_t: #{v(theme-text)};
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+  /* when the box is too narrow for icon + text side by side (e.g. four boxes in a docs-width row),
+     the text wraps below the icon instead of breaking the title one letter per line */
+  flex-wrap: wrap;
+  row-gap: 12px;
+  background: v(surface);
+  padding: 30px 25px;
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  height: 100%;
+  /* the box is a size container so icon and value can shrink when four boxes share a narrow row */
+  container-type: inline-size;
+  @each $c in $colors {
+    &--#{$c} {
+      --_c: #{v(color-#{$c})};
+      --_on: #{on($c)};
+      --_t: #{tx($c)};
+    }
+  }
+  &__icon {
+    width: 60px;
+    height: 60px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+    color: var(--_on);
+    background: var(--_c);
+  }
+  &__body {
+    flex: 1 1 110px;
+    min-width: 0;
+  }
+  &__value {
+    font-size: 30px !important;
+    line-height: 1.1 !important;
+    margin: 0 0 4px !important;
+    color: var(--_t) !important;
+    font-weight: 400;
+  }
+  &__title {
+    font-size: 12px;
+    text-transform: uppercase;
+    color: v(text);
+    margin: 0;
+    letter-spacing: 0.03em;
+  }
+  &__line {
+    display: block;
+    height: 1px;
+    background: v(border-color);
+    margin: 12px 0;
+  }
+  &__foot {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 4px 8px;
+    font-size: 14px;
+    color: v(text-strong);
+    margin: 0;
+  }
+  @container (max-width: 230px) {
+    &__icon {
+      width: 44px;
+      height: 44px;
+      font-size: 20px;
+    }
+    &__value {
+      font-size: 24px !important;
+    }
+  }
+
+  &--filled {
+    background: var(--_c);
+    border-color: var(--_c);
+    color: var(--_on);
+    .#{$p}-info-box__icon {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .#{$p}-info-box__value,
+    .#{$p}-info-box__title,
+    .#{$p}-info-box__foot {
+      color: var(--_on) !important;
+    }
+    .#{$p}-info-box__line {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+  &--soft .#{$p}-info-box__icon {
+    background: color-mix(in srgb, var(--_c) 15%, transparent);
+    color: var(--_t);
+  }
+}
+/* stat-widget with progress (index2–4) */
+.#{$p}-stat {
+  --_c: #{v(theme)};
+  --_t: #{v(theme-text)};
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  padding: 25px;
+  height: 100%;
+  @each $c in $colors {
+    &--#{$c} {
+      --_c: #{v(color-#{$c})};
+      --_t: #{tx($c)};
+    }
+  }
+  &__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+  }
+  &__title {
+    margin: 0 !important;
+    font-size: 14px !important;
+    line-height: 22px !important;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: v(heading);
+    letter-spacing: 0.03em;
+  }
+  &__icon {
+    font-size: 30px;
+    color: var(--_t);
+  }
+  &__value {
+    font-size: 28px;
+    color: v(heading);
+    margin: 12px 0 6px;
+    font-weight: 300;
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+  }
+  &__delta {
+    font-size: 13px;
+    font-weight: 600;
+    &--up {
+      color: v(color-success-text);
+    }
+    &--down {
+      color: v(color-danger-text);
+    }
+  }
+  .#{$p}-progress {
+    margin: 10px 0 0;
+  }
+}
+/* color-box / small box */
+.#{$p}-color-box {
+  --_c: #{v(theme)};
+  --_on: #{v(on-theme)};
+  background: var(--_c);
+  color: var(--_on);
+  padding: 25px;
+  border-radius: v(radius);
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  @each $c in $colors {
+    &--#{$c} {
+      --_c: #{v(color-#{$c})};
+      --_on: #{on($c)};
+    }
+  }
+  h3,
+  h4,
+  h1,
+  h2,
+  &__value {
+    color: var(--_on) !important;
+    margin: 0 !important;
+  }
+  &__value {
+    font-size: v(h2);
+    line-height: 36px;
+    font-weight: 400;
+  }
+  &__icon {
+    position: absolute;
+    inset-inline-end: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 60px;
+    opacity: 0.25;
+  }
+  &__label {
+    font-size: 13px;
+    text-transform: uppercase;
+  }
+}
+
+/* analytics row (stats-row / stat-item) */
+.#{$p}-stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  border-top: 1px solid v(border-color);
+  &__item {
+    flex: 1;
+    min-width: 100px;
+    padding: 15px 10px;
+    text-align: center;
+    border-inline-end: 1px solid v(border-color);
+    &:last-child {
+      border: 0;
+    }
+    h6,
+    .#{$p}-stats-row__label {
+      margin: 0 0 4px !important;
+      color: v(text) !important;
+      text-transform: uppercase;
+      font-size: 12px !important;
+    }
+    b {
+      font-size: 18px;
+      color: v(heading);
+      font-weight: 600;
+    }
+  }
+}
+
+/* feed / list widgets */
+.#{$p}-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  &__item {
+    display: flex;
+    gap: 14px;
+    align-items: center;
+    padding: 14px 0;
+    border-bottom: 1px solid v(border-color);
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+  &__title {
+    color: v(text-strong);
+    font-weight: 500;
+    margin: 0 0 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__desc {
+    font-size: 13px;
+    color: v(text);
+    margin: 0;
+  }
+  &__meta {
+    font-size: 12px;
+    color: v(text);
+    white-space: nowrap;
+  }
+  &__icon {
+    --_c: #{v(theme)};
+    --_on: #{v(on-theme)};
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_on);
+    background: var(--_c);
+    @each $c in $colors {
+      &--#{$c} {
+        --_c: #{v(color-#{$c})};
+        --_on: #{on($c)};
+      }
+    }
+  }
+  &--hover &__item {
+    cursor: pointer;
+    padding-inline: 10px;
+    &:hover {
+      background: v(surface-muted);
+    }
+  }
+}
+
+/* chat (chat-widget / chat listing) */
+.#{$p}-chat {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  container-type: inline-size;
+  &__msg {
+    display: flex;
+    gap: 12px;
+    align-items: flex-end;
+    max-width: 85%;
+    /* the text column takes the free width, so a narrow card does not squeeze bubbles to one word per line */
+    > :not(img) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    &--me {
+      flex-direction: row-reverse;
+      align-self: flex-end;
+      .#{$p}-chat__bubble {
+        background: v(theme);
+        color: v(on-theme);
+        border-end-end-radius: 0;
+        border-end-start-radius: v(radius-lg);
+      }
+    }
+  }
+  &__bubble {
+    padding: 10px 14px;
+    border-radius: v(radius-lg);
+    border-end-start-radius: 0;
+    background: v(surface-muted);
+    color: v(text-strong);
+    font-size: 14px;
+  }
+  &__name {
+    font-size: 12px;
+    font-weight: 600;
+    color: v(heading);
+    margin-bottom: 2px;
+  }
+  &__time {
+    font-size: 11px;
+    color: v(text);
+    margin-top: 4px;
+  }
+  &__composer {
+    display: flex;
+    gap: 8px;
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid v(border-color);
+  }
+  /* narrow card: bubbles use the full width and avatars shrink, so text is not one word per line */
+  @container (max-width: 260px) {
+    &__msg {
+      max-width: 100%;
+      gap: 8px;
+      > img {
+        width: 28px !important;
+        height: 28px !important;
+      }
+    }
+  }
+}
+
+/* todo / task widget */
+.#{$p}-todo {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  container-type: inline-size;
+  &__item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 10px;
+    padding: 12px 14px;
+    margin-bottom: 8px;
+    background: v(surface-muted);
+    border-radius: v(radius);
+    border-inline-start: 4px solid v(color-warning);
+    &.is-done {
+      border-inline-start-color: v(theme);
+      .#{$p}-todo__text {
+        text-decoration: line-through;
+        color: v(text);
+      }
+    }
+  }
+  &__text {
+    flex: 1 1 120px;
+    min-width: 0;
+    color: v(text-strong);
+  }
+  &__remove {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    color: v(text);
+    opacity: 0;
+    &:hover {
+      color: v(color-danger-text);
+    }
+  }
+  &__item:hover &__remove,
+  &__remove:focus-visible {
+    opacity: 1;
+  }
+}
+
+/* profile widget / user-bg */
+.#{$p}-profile-card {
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  overflow: hidden;
+  margin-bottom: v(space-7);
+  &__cover {
+    position: relative;
+    height: 230px;
+    overflow: hidden;
+    background: linear-gradient(to right, #{v(topbar-1)}, #{v(topbar-2)});
+    > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: blur(3px);
+      transform: scale(1.1);
+      opacity: 0.7;
+    }
+  }
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #fff;
+    text-align: center;
+    h4,
+    h5,
+    h2 {
+      color: #fff !important;
+      margin: 0 !important;
+    }
+    h2 {
+      font-size: v(h4) !important;
+      line-height: 22px;
+    }
+    > div {
+      font-size: v(h5);
+    }
+  }
+  &__stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    text-align: center;
+    border-bottom: 1px solid v(border-color);
+    > div {
+      padding: 15px 8px;
+      border-inline-end: 1px solid v(border-color);
+      &:last-child {
+        border: 0;
+      }
+    }
+    b {
+      display: block;
+      font-size: 20px;
+      color: v(heading);
+      font-weight: 400;
+    }
+    small {
+      color: v(text);
+    }
+  }
+  &__body {
+    padding: 20px 25px;
+  }
+}
+
+/* user card with hover overlay */
+.#{$p}-user-card {
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  overflow: hidden;
+  margin-bottom: v(space-7);
+  text-align: center;
+  &__media {
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: transform 0.4s;
+    }
+  }
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.3s;
+    .#{$p}-btn {
+      transform: translateY(-20px);
+      transition: transform 0.3s;
+    }
+  }
+  &__media:hover img,
+  &__media:focus-within img {
+    transform: scale(1.12);
+  }
+  &__media:hover &__overlay,
+  &__media:focus-within &__overlay {
+    opacity: 1;
+    .#{$p}-btn {
+      transform: none;
+    }
+  }
+  &__content {
+    padding: 15px;
+    h2,
+    h3,
+    h4 {
+      margin: 0 0 2px !important;
+      font-size: 18px !important;
+      color: v(heading);
+    }
+    small {
+      color: v(text);
+    }
+  }
+}
+
+/* pricing */
+/* columns follow the table's own width (not the viewport), so 4 plans never wrap 3 + 1:
+   4 across when there is room, then 2 × 2, then a single column. */
+.#{$p}-pricing-wrap {
+  container-type: inline-size;
+}
+.#{$p}-pricing {
+  --_cols: 4;
+  display: grid;
+  grid-template-columns: repeat(min(var(--_cols), var(--_n, 4)), minmax(0, 1fr));
+  gap: 0;
+  align-items: center;
+}
+@container (max-width: 879px) {
+  .#{$p}-pricing {
+    --_cols: 2;
+    row-gap: 30px;
+  }
+  /* in a 2 × 2 grid an enlarged plan would cover its neighbours */
+  .#{$p}-pricing-plan--featured {
+    transform: none;
+  }
+}
+@container (max-width: 479px) {
+  .#{$p}-pricing {
+    --_cols: 1;
+  }
+}
+.#{$p}-pricing-plan {
+  position: relative;
+  background: v(surface);
+  border: 1px solid v(border-color);
+  text-align: center;
+  transition: all 0.3s;
+  & + & {
+    margin-inline-start: -1px;
+  }
+  &__header {
+    padding: 30px 20px 15px;
+    border-bottom: 1px solid v(border-color);
+    h2,
+    h4 {
+      margin: 0 0 10px !important;
+      font-weight: 500;
+      color: v(heading);
+      text-transform: uppercase;
+      font-size: 18px !important;
+      line-height: 22px;
+    }
+  }
+  &__price {
+    font-size: 60px;
+    font-weight: 600;
+    color: v(heading);
+    line-height: 1;
+    margin: 10px 0;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 2px;
+    sup {
+      font-size: 24px;
+      margin-top: 8px;
+      color: v(text);
+    }
+  }
+  &__period {
+    text-transform: uppercase;
+    color: v(text);
+    font-size: 13px;
+    margin: 0;
+  }
+  &__features {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  &__feature {
+    padding: 14px 20px;
+    border-bottom: 1px solid v(border-color);
+    color: v(text-strong);
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    align-items: center;
+  }
+  &__action {
+    padding: 25px 20px;
+  }
+  &__tag {
+    position: absolute;
+    top: 0;
+    inset-inline: 0;
+    background: v(color-danger);
+    color: v(on-danger);
+    padding: 4px;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  &--featured {
+    z-index: 1;
+    transform: scale(1.06);
+    box-shadow: v(shadow-lg);
+    border-color: transparent;
+    .#{$p}-pricing-plan__header {
+      padding-top: 46px;
+    }
+    .#{$p}-pricing-plan__price {
+      color: v(theme-text);
+    }
+  }
+  @include down(sm) {
+    & + & {
+      margin: 0 0 20px;
+    }
+    &--featured {
+      transform: none;
+    }
+  }
+}
+
+/* weather (temp-widget) */
+.#{$p}-weather {
+  --_c1: #{v(topbar-1)};
+  --_c2: #{v(topbar-2)};
+  background: linear-gradient(135deg, var(--_c1), var(--_c2));
+  color: #fff;
+  border-radius: v(radius);
+  padding: 25px;
+  height: 100%;
+  &__temp {
+    font-size: 54px;
+    font-weight: 300;
+    line-height: 1;
+    sup {
+      font-size: 24px;
+    }
+  }
+  &__icon {
+    font-size: 50px;
+  }
+  &__days {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 4px;
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.25);
+    text-align: center;
+    font-size: 13px;
+    /* icon on its own centered line between day and temperature */
+    .#{$p}-icon {
+      display: block;
+      margin: 4px auto;
+      font-size: 18px;
+    }
+    b {
+      display: block;
+      font-size: 16px;
+    }
+  }
+}
+
+/* counter / mini chart host */
+.#{$p}-chart {
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  svg {
+    display: block;
+    width: 100%;
+    overflow: visible;
+  }
+}
+.#{$p}-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  list-style: none;
+  margin: 0 0 10px;
+  padding: 0;
+  font-size: 13px;
+  color: v(text-strong);
+  li {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  i {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+}
+.#{$p}-chart-tooltip {
+  position: absolute;
+  pointer-events: none;
+  z-index: 5;
+  background: v(color-inverse);
+  color: #fff;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: v(radius-sm);
+  white-space: nowrap;
+  transform: translate(-50%, calc(-100% - 10px));
+}
+
+/* carousel */
+.#{$p}-carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: v(radius);
+  &__track {
+    display: flex;
+    transition: transform 0.5s ease;
+  }
+  &__slide {
+    flex: 0 0 100%;
+    min-width: 0;
+    position: relative;
+    img {
+      width: 100%;
+      display: block;
+    }
+  }
+  &__caption {
+    position: absolute;
+    inset-inline: 15%;
+    bottom: 20px;
+    text-align: center;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.55);
+    padding: 6px 14px;
+    border-radius: v(radius);
+    h3,
+    h4 {
+      color: #fff !important;
+    }
+  }
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 0;
+    background: rgba(0, 0, 0, 0.35);
+    color: #fff;
+    font-size: 22px;
+    cursor: pointer;
+    z-index: 2;
+    &:hover {
+      background: rgba(0, 0, 0, 0.6);
+    }
+    &--prev {
+      inset-inline-start: 12px;
+    }
+    &--next {
+      inset-inline-end: 12px;
+    }
+  }
+  &__dots {
+    position: absolute;
+    bottom: 10px;
+    inset-inline: 0;
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+    z-index: 2;
+    button {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      border: 0;
+      background: rgba(255, 255, 255, 0.5);
+      cursor: pointer;
+      padding: 0;
+      &.is-active {
+        background: #fff;
+        width: 22px;
+        border-radius: 5px;
+      }
+    }
+  }
+  &--fade &__track {
+    display: grid;
+  }
+  &--fade &__slide {
+    grid-area: 1 / 1;
+    opacity: 0;
+    transition: opacity 0.6s;
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
+[dir='rtl'] .#{$p}-carousel__track {
+  flex-direction: row-reverse;
+}
+
+/* gallery */
+.#{$p}-gallery {
+  display: grid;
+  gap: 15px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  &__item {
+    position: relative;
+    overflow: hidden;
+    border-radius: v(radius);
+    cursor: zoom-in;
+    aspect-ratio: 4 / 3;
+    border: 0;
+    padding: 0;
+    background: none;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: transform 0.4s;
+    }
+    &:hover img {
+      transform: scale(1.08);
+    }
+  }
+}
+.#{$p}-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: v(z-modal);
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: #{$p}-fade-in 0.2s;
+  img {
+    max-width: 90vw;
+    max-height: 85vh;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
+    animation: #{$p}-zoom-in 0.25s;
+  }
+  &__close,
+  &__nav {
+    position: absolute;
+    background: none;
+    border: 0;
+    color: #fff;
+    font-size: 34px;
+    cursor: pointer;
+    padding: 10px;
+    opacity: 0.8;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  &__close {
+    top: 10px;
+    inset-inline-end: 16px;
+  }
+  &__nav--prev {
+    inset-inline-start: 10px;
+  }
+  &__nav--next {
+    inset-inline-end: 10px;
+  }
+  &__caption {
+    position: absolute;
+    bottom: 16px;
+    inset-inline: 0;
+    text-align: center;
+    color: #fff;
+  }
+}
+
+/* calendar (month view) */
+.#{$p}-calendar {
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 15px;
+    h2,
+    h3 {
+      margin: 0 !important;
+      font-size: v(h3);
+      line-height: 30px;
+    }
+  }
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    border-top: 1px solid v(border-color);
+    border-inline-start: 1px solid v(border-color);
+  }
+  &__dow {
+    padding: 10px 6px;
+    text-align: center;
+    font-weight: 600;
+    color: v(heading);
+    border-inline-end: 1px solid v(border-color);
+    border-bottom: 1px solid v(border-color);
+    background: v(surface-muted);
+    font-size: 13px;
+  }
+  &__cell {
+    min-height: 110px;
+    padding: 6px;
+    border-inline-end: 1px solid v(border-color);
+    border-bottom: 1px solid v(border-color);
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s;
+    &:hover {
+      background: v(surface-muted);
+    }
+    &.is-outside {
+      background: v(surface-muted);
+      .#{$p}-calendar__date {
+        color: v(text);
+      }
+    }
+    &.is-today {
+      background: color-mix(in srgb, #{v(color-warning)} 10%, transparent);
+    }
+    &.is-drop {
+      outline: 2px dashed v(theme);
+      outline-offset: -2px;
+    }
+  }
+  &__date {
+    font-size: 13px;
+    color: v(text-strong);
+    text-align: end;
+    display: block;
+    margin-bottom: 4px;
+  }
+  &__event {
+    --_c: #{v(theme)};
+    --_on: #{v(on-theme)};
+    display: block;
+    width: 100%;
+    padding: 3px 6px;
+    margin-bottom: 3px;
+    font-size: 12px;
+    color: var(--_on);
+    background: var(--_c);
+    border-radius: v(radius-sm);
+    border: 0;
+    text-align: start;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: grab;
+    @each $c in $colors {
+      &--#{$c} {
+        --_c: #{v(color-#{$c})};
+        --_on: #{on($c)};
+      }
+    }
+  }
+  @include down(sm) {
+    &__cell {
+      min-height: 64px;
+    }
+    &__event {
+      font-size: 0;
+      height: 6px;
+      padding: 0;
+    }
+  }
+}
+
+/* map placeholder */
+.#{$p}-map {
+  position: relative;
+  width: 100%;
+  min-height: 360px;
+  border-radius: v(radius);
+  overflow: hidden;
+  background: v(surface-muted);
+  iframe {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  svg {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  &__region {
+    fill: v(color-light);
+    stroke: v(surface);
+    stroke-width: 0.5;
+    transition: fill 0.2s;
+    cursor: pointer;
+    &:hover,
+    &.is-active {
+      fill: v(theme);
+    }
+  }
+}
+
+/* icon grid */
+.#{$p}-icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 4px;
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    border-radius: v(radius-sm);
+    color: v(text-strong);
+    font-size: 13px;
+    cursor: pointer;
+    border: 0;
+    background: none;
+    text-align: start;
+    &:hover {
+      background: v(theme);
+      color: v(on-theme);
+    }
+    svg {
+      flex-shrink: 0;
+    }
+  }
+}
+
+/* dashboard widgets stack like cards: rows rely on each block's bottom margin for vertical rhythm.
+   They fill the column height (equal-height boxes in a row), so subtract the margin from 100%. */
+.#{$p}-info-box,
+.#{$p}-stat,
+.#{$p}-color-box,
+.#{$p}-weather {
+  margin-bottom: v(space-7);
+}
+.#{$p}-info-box,
+.#{$p}-stat,
+.#{$p}-color-box,
+.#{$p}-weather {
+  height: calc(100% - #{v(space-7)});
+}