[data-dining],
[data-dining-week] {
  min-width: 0;
}

.dining-mount {
  --dining-ink: #29475f;
  --dining-blue: #2b7fd8;
  --dining-blue-soft: #edf6ff;
  --dining-cream: #fffaf0;
  --dining-cream-deep: #f4e8d2;
  --dining-border: #d5e4f1;
  min-width: 0;
  color: var(--dining-ink);
}

.dining-widget {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  min-width: 0;
  overflow: hidden;
  font-family: "Segoe Print", "Bradley Hand", "KaiTi", "STKaiti", cursive;
}

.dining-status {
  min-height: 1.6em;
  margin: 0 0 10px;
  color: #53718a;
  font: 500 13px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}

.dining-status-loading {
  color: #53718a;
}

.dining-status-ready {
  color: #4e6f82;
}

.dining-status-empty {
  color: #896e4d;
}

.dining-status-error {
  color: #9a493c;
}

.dining-status-info {
  color: #456a8a;
}

.dining-toolbar,
.dining-week-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0 0 14px;
}

.dining-date {
  color: #315b78;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.5;
}

.dining-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.dining-control,
.dining-detail-close {
  border: 1px solid #b8d3e7;
  border-radius: 999px;
  padding: 7px 12px;
  color: #2c668f;
  background: #f5faff;
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.dining-control:hover,
.dining-control:focus-visible,
.dining-detail-close:hover,
.dining-detail-close:focus-visible {
  border-color: #76add5;
  color: #1d5279;
  background: #e8f4ff;
}

.dining-control:active,
.dining-detail-close:active {
  transform: translateY(1px);
}

.dining-control[aria-pressed="true"] {
  border-color: #2b7fd8;
  color: #fff;
  background: #2b7fd8;
}

.dining-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: clamp(280px, 64vmin, 620px);
  padding: clamp(6px, 2vmin, 20px);
  border: 1px solid var(--dining-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .9), rgba(255, 250, 240, .7) 65%, rgba(244, 232, 210, .48)),
    var(--dining-cream);
  box-sizing: border-box;
  overflow: hidden;
}

.dining-table {
  position: relative;
  width: min(100%, 82vmin, 600px);
  max-width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 50%;
  outline: none;
  touch-action: none;
  user-select: none;
}

.dining-table:focus-visible {
  box-shadow: 0 0 0 4px rgba(43, 127, 216, .22);
}

.dining-table-surface {
  position: absolute;
  inset: 4%;
  border: 12px solid #e4cda9;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 38%, #fffdf6 0, #fff8e9 57%, #f4dfb9 100%);
  box-shadow: 0 14px 22px rgba(57, 82, 102, .16), inset 0 0 0 2px rgba(255, 255, 255, .76), inset 0 -8px 12px rgba(174, 133, 74, .13);
}

.dining-table-surface::before,
.dining-table-surface::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border-radius: 50%;
}

.dining-table-surface::before {
  inset: 8%;
  border: 1px dashed rgba(176, 133, 69, .32);
}

.dining-table-surface::after {
  inset: 26%;
  border: 1px solid rgba(176, 133, 69, .17);
}

.dining-table-top {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.dining-table-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(70px, 18vmin, 128px);
  aspect-ratio: 1;
  border: 2px solid rgba(179, 135, 72, .34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 253, 246, .78);
  box-shadow: 0 2px 9px rgba(107, 80, 41, .1);
  pointer-events: none;
}

.dining-table-center-mark {
  color: #af8248;
  font-size: clamp(15px, 3vmin, 23px);
  letter-spacing: .08em;
  transform: rotate(-7deg);
}

.dining-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(76px, 15vmin, 132px);
  min-width: 76px;
  aspect-ratio: .88;
  transform: translate(-50%, -50%) rotate(var(--dining-dish-angle, 0deg)) translateY(calc(-1 * var(--dining-orbit-radius, 0px)));
  transform-origin: 50% 50%;
  transition: filter 220ms ease;
}

.dining-plate::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.dining-dish {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 7px 6px 8px;
  border: 4px solid #fffdf7;
  border-radius: 48% 52% 45% 55%;
  color: #334c5c;
  background: #fbf6e9;
  box-shadow: 0 5px 12px rgba(64, 78, 91, .16), inset 0 0 0 1px rgba(216, 184, 124, .45);
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  transform: rotate(calc(-1 * var(--dining-dish-angle, 0deg)));
  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.dining-dish:hover,
.dining-dish:focus-visible,
.dining-dish[aria-pressed="true"] {
  border-color: #f2c979;
  background: #fffdf6;
  box-shadow: 0 7px 15px rgba(64, 78, 91, .22), 0 0 0 3px rgba(242, 201, 121, .23);
  outline: none;
}

.dining-dish:focus-visible {
  box-shadow: 0 7px 15px rgba(64, 78, 91, .22), 0 0 0 4px rgba(43, 127, 216, .3);
}

.dining-dish-media {
  display: grid;
  place-items: center;
  width: min(100%, 72px);
  aspect-ratio: 1;
  margin: 0 auto 4px;
  overflow: hidden;
  border-radius: 50%;
  background: #eaf3f7;
  color: #64889c;
  font: 600 12px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}

.dining-dish-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dining-dish-label {
  display: block;
  width: 100%;
  color: #2f4b5c;
  font-size: clamp(12px, 1.8vmin, 17px);
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dining-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(72%, 300px);
  padding: 16px 18px;
  border: 1px dashed #d8bd8d;
  border-radius: 18px;
  color: #896e4d;
  background: rgba(255, 250, 240, .9);
  font-size: clamp(16px, 2.5vmin, 21px);
  line-height: 1.6;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-3deg);
}

.dining-stage.is-empty .dining-table-surface {
  filter: saturate(.72);
}

.dining-detail {
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d6e6ef;
  border-radius: 16px;
  background: rgba(250, 253, 255, .94);
  box-sizing: border-box;
}

.dining-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dining-detail-title {
  min-width: 0;
  margin: 0;
  color: #2d536d;
  font-size: clamp(18px, 3vmin, 25px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dining-detail-close {
  flex: 0 0 auto;
  padding: 6px 10px;
}

.dining-detail-content {
  display: grid;
  grid-template-columns: minmax(84px, 136px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 12px;
}

.dining-detail-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 13px;
  object-fit: cover;
}

.dining-detail-copy {
  min-width: 0;
  font: 14px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dining-detail-copy p {
  margin: 0 0 7px;
  overflow-wrap: anywhere;
}

.dining-detail-type {
  color: #3479a9;
  font-weight: 700;
}

.dining-detail-allergens {
  color: #765d43;
}

.dining-detail-note {
  color: #4b697e;
  font-family: "Segoe Print", "Bradley Hand", "KaiTi", "STKaiti", cursive;
  font-size: 15px;
}

.dining-week-mount {
  min-width: 0;
}

.dining-week-controls {
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid #d6e6ef;
  border-radius: 13px;
  background: #f7fbfe;
}

.dining-week-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #385b72;
  font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dining-week-input,
.dining-date-select {
  max-width: 100%;
  min-height: 34px;
  border: 1px solid #b8d3e7;
  border-radius: 8px;
  padding: 6px 9px;
  color: #29475f;
  background: #fff;
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dining-week-input:focus-visible,
.dining-date-select:focus-visible {
  border-color: #2b7fd8;
  outline: 3px solid rgba(43, 127, 216, .2);
  outline-offset: 1px;
}

@media (max-width: 560px) {
  .dining-toolbar {
    align-items: flex-start;
  }

  .dining-actions {
    width: 100%;
  }

  .dining-control {
    flex: 1 1 auto;
  }

  .dining-stage {
    min-height: min(94vw, 440px);
    padding: 3px;
    border-radius: 19px;
  }

  .dining-table {
    width: min(100%, 90vmin, 440px);
  }

  .dining-table-surface {
    border-width: 8px;
  }

  .dining-plate {
    width: clamp(58px, 17vmin, 70px);
    min-width: 0;
  }

  .dining-plate::before {
    inset: -3px;
  }

  .dining-dish {
    padding: 4px 3px;
    border-width: 3px;
  }

  .dining-detail-content {
    grid-template-columns: minmax(72px, 104px) minmax(0, 1fr);
    gap: 10px;
  }
}

@media (max-width: 360px) {
  .dining-dish {
    padding-inline: 3px;
  }

  .dining-dish-media {
    width: min(100%, 58px);
  }

  .dining-detail-header {
    align-items: flex-start;
  }

  .dining-detail-close {
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dining-control,
  .dining-detail-close,
  .dining-dish,
  .dining-plate {
    transition-duration: 0.01ms;
  }
}