/*
 * Final calendar composition layer.
 * Kept separate so the cohesion pass stays authoritative over the legacy
 * prototype layers in styles.css without changing the phone composition.
 */
body:has(.calendar-backdrop:not([hidden])) {
  overflow: hidden;
}

.calendar-idle-layout {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Farmer frame: independently scaling top, parchment body, and footer cap. */
body[data-ui-theme="farm"] .calendar-shell {
  --farmer-footer-height: 76px;
  --farmer-footer-safe-inline: clamp(96px, 12%, 132px);
}

body[data-ui-theme="farm"] .calendar-footer-art {
  position: absolute;
  inset: 50% -18px auto;
  z-index: 0;
  height: var(--farmer-footer-height);
  pointer-events: none;
  transform: translateY(-50%);
}

body[data-ui-theme="farm"] .calendar-footer-rail {
  position: absolute;
  inset: 17px 90px 8px;
  background: #91623d url("assets/ui/farmer-calendar/farmer-footer-rail-v1.png") center / auto 100% repeat-x;
  box-shadow: inset 0 1px rgb(255 225 163 / 30%), 0 5px 0 #3f2818, 0 9px 16px rgb(45 27 14 / 23%);
}

body[data-ui-theme="farm"] .calendar-footer-cap {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgb(51 31 16 / 28%));
}

body[data-ui-theme="farm"] .calendar-footer-cap-left { left: 0; bottom: 0; }
body[data-ui-theme="farm"] .calendar-footer-cap-right { right: 0; bottom: 0; }

body[data-ui-theme="farm"] .calendar-actions > :not(.calendar-footer-art) {
  position: relative;
  z-index: 2;
}

/* Han owns a separate Seoul chassis and never inherits Farmer decoration. */
body[data-ui-theme="city"] .calendar-footer-art { display: none; }

.discretionary-panel {
  min-width: 0;
  padding: 13px;
  display: flex;
  flex-direction: column;
  color: #4d3522;
  border: 7px solid #694326;
  border-radius: 7px;
  background:
    linear-gradient(rgb(255 247 211 / 32%), transparent 95px),
    #ead39a url("assets/ui/reference-slices/parchment-tile.png") center / 420px auto repeat;
  box-shadow: inset 0 0 0 2px rgb(255 242 195 / 58%), 0 6px 0 #422819, 0 10px 20px rgb(45 28 15 / 24%);
}

.discretionary-panel[hidden] { display: none; }

.discretionary-heading { padding: 3px 4px 8px; }
.discretionary-heading h2 { margin: 0 0 5px; color: #4c3320; font: 900 23px/.95 var(--story); }
.discretionary-list { min-height: 0; margin: 6px 0; display: grid; align-content: start; gap: 3px; overflow: auto; scrollbar-color: #8c673b transparent; }
.discretionary-choice { padding: 10px 9px; border-radius: 4px; background: rgb(255 246 211 / 26%); }
.discretionary-choice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.discretionary-choice-heading h3 { margin: 0; font: 900 11px/1.05 var(--story); }
.discretionary-choice-heading > strong { flex: 0 0 auto; color: #527044; font: 900 10px/1 var(--numbers); }
.discretionary-choice > p {
  margin: 5px 0 8px;
  overflow: hidden;
  display: -webkit-box;
  color: #725a40;
  font: 700 7px/1.35 var(--story);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.discretionary-choice-actions { display: grid; grid-template-columns: .8fr 1fr; gap: 6px; }
.discretionary-choice-actions button { min-height: 27px; border: 2px solid #765230; border-radius: 4px; color: #573a23; background: #ecd9a8; letter-spacing: .05em; font: 900 7px/1 var(--story); cursor: pointer; }
.discretionary-choice-actions button:last-child { border-color: #365932; color: #fff1c3; background: #527648; }
.discretionary-choice-actions button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.discretionary-choice-actions button:active:not(:disabled) { transform: translateY(1px); }
.discretionary-choice-actions button:disabled { border-color: #9a8361; color: #7b684e; background: #d4c39e; cursor: default; }
.discretionary-footnote { margin: auto 2px 0; padding-top: 2px; color: #806846; font: 800 6px/1.3 var(--story); text-align: center; }
.discretionary-empty { min-height: 135px; padding: 16px; display: grid; place-content: center; gap: 7px; color: #786044; text-align: center; }
.discretionary-empty strong { color: #4f3926; font: 900 11px/1.1 var(--story); }
.discretionary-empty span { font: 700 7px/1.4 var(--story); }

.day-node { cursor: default; }

.day-node.current-day time,
.day-node.actionable-day.current-day time {
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 0;
  color: #365736;
  background: transparent;
  box-shadow: none;
}

button.day-node.actionable-day {
  z-index: 2;
  cursor: pointer;
  outline: 3px solid #9abb73;
  outline-offset: -4px;
  background: rgb(202 218 137 / 18%);
  box-shadow: inset 0 0 0 1px rgb(239 246 203 / 85%);
}

button.day-node.actionable-day:hover,
button.day-node.actionable-day:focus-visible {
  outline-color: #b7d98a;
  background: rgb(215 232 151 / 30%);
  box-shadow: inset 0 0 0 2px rgb(245 250 211 / 88%);
}

.lifestyle-unlock-callout {
  position: absolute !important;
  right: 4%;
  bottom: calc(100% + 8px);
  z-index: 8 !important;
  min-width: 190px;
  padding: 9px 13px;
  display: grid;
  gap: 3px;
  border: 3px solid #6c4d29;
  border-radius: 7px;
  color: #4b321d;
  background: #f2dda4 url("assets/ui/reference-slices/parchment-tile.png") center / 360px auto repeat;
  box-shadow: inset 0 0 0 2px rgb(255 243 198 / 62%), 0 4px 0 #422819, 0 8px 16px rgb(45 28 15 / 25%);
  text-align: center;
}

.lifestyle-unlock-callout strong { color: #46653b; letter-spacing: .08em; font: 900 9px/1 var(--story); }
.lifestyle-unlock-callout span { font: 800 7px/1.2 var(--story); }
.calendar-actions > .calendar-lifestyle-button[hidden],
.calendar-actions > .lifestyle-unlock-callout[hidden] { display: none !important; }

.calendar-lifestyle-button.newly-unlocked {
  animation: lifestyle-button-reveal 850ms ease-out 1, lifestyle-button-pulse 1.8s ease-in-out 900ms 4;
}

@keyframes lifestyle-button-reveal {
  0% { opacity: 0; transform: translateY(12px) scale(.94); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.025); }
  100% { transform: none; }
}

@keyframes lifestyle-button-pulse {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.14) drop-shadow(0 0 8px rgb(205 232 125 / 72%)); }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-lifestyle-button.newly-unlocked { animation: none; outline: 3px solid #b7d98a; outline-offset: 2px; }
}

@media (min-width: 761px) {
  .calendar-backdrop {
    padding: 10px;
  }

  .calendar-shell {
    width: min(1080px, 100%);
    height: clamp(600px, calc(100dvh - 20px), 690px);
    min-height: 600px;
    max-height: 690px;
  }

  .calendar-idle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    align-items: stretch;
    gap: 10px;
  }

  .calendar-idle-layout:has(> .discretionary-panel[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-idle-layout > .calendar-month-card {
    width: 100%;
    height: 100%;
  }

  .discretionary-panel { max-height: 100%; }

  .calendar-topbar {
    height: 88px;
    min-height: 88px;
    padding: 9px 14px 10px;
    gap: 12px;
    border-width: 10px;
    border-image-width: 10px;
    border-radius: 12px 12px 2px 2px;
    box-shadow: inset 0 0 0 1px rgb(255 226 158 / 20%), 0 4px 0 #3f2818, 0 8px 16px rgb(45 27 14 / 24%);
  }

  .calendar-topbar::before,
  .calendar-topbar::after {
    left: 7px;
    right: 7px;
    height: 7px;
  }

  .calendar-topbar::before { top: 4px; }
  .calendar-topbar::after { bottom: 3px; }

  .calendar-identity {
    width: min(42%, 420px);
    gap: 5px;
  }

  .calendar-seal {
    width: 62px;
    height: 62px;
    margin-left: -5px;
  }

  .calendar-brand {
    width: min(336px, calc(100% - 58px));
    height: 57px;
    padding: 7px 17px;
    border-width: 1px;
    border-radius: 8px 4px 7px 3px;
  }

  .calendar-brand::after { inset: 4px; }

  .calendar-brand h1 {
    font-size: clamp(22px, 2.35vw, 30px);
    letter-spacing: -.018em;
  }

  .calendar-header-scene {
    width: 34%;
    height: 60px;
    left: 42.5%;
    top: 9px;
    border-width: 2px;
    opacity: .94;
  }

  .calendar-header-family {
    width: 176px;
    height: 106px;
    left: 50%;
    top: -9px;
  }

  .calendar-bill {
    width: min(222px, 23%);
    min-width: 200px;
    height: 59px;
    padding: 8px 12px;
    gap: 3px;
  }

  .calendar-bill span {
    font-size: clamp(6px, .64vw, 8px);
    letter-spacing: .085em;
  }

  .calendar-bill strong { font-size: clamp(13px, 1.45vw, 18px); }
  .calendar-bill small { font-size: clamp(5px, .55vw, 7px); }

  .calendar-month-card {
    min-height: 0;
    margin-top: -2px;
    padding: 7px 13px 10px;
    border-width: 16px;
    border-image-width: 16px;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px rgb(112 72 32 / 16%), inset 0 0 24px rgb(117 76 34 / 10%);
  }

  .calendar-month-heading {
    height: 34px;
    flex-basis: 34px;
    gap: 10px;
  }

  .calendar-month-heading h2 {
    font-size: clamp(22px, 2.25vw, 28px);
    letter-spacing: .055em;
  }

  .calendar-month-heading > span {
    font-size: 12px;
    opacity: .72;
  }

  .calendar-weekdays {
    height: 23px;
    flex-basis: 23px;
    font-size: clamp(7px, .68vw, 9px);
  }

  .calendar-route.calendar-month-grid { min-height: 0; }

  .calendar-day,
  .day-node {
    min-height: 0;
    padding: clamp(3px, .42vw, 6px);
    font-size: clamp(7px, .76vw, 11px);
  }

  .day-node time { font-size: clamp(8px, .86vw, 12px); }
  .day-node i { font-size: clamp(12px, 1.35vw, 18px); }
  .day-result { font-size: clamp(5px, .56vw, 8px); }

  .day-node.current-day time {
    width: clamp(34px, 3.55vw, 46px);
    height: clamp(34px, 3.55vw, 46px);
    font-size: clamp(15px, 1.55vw, 20px);
  }

  .calendar-actions {
    width: calc(100% - 30px);
    height: 70px;
    min-height: 70px;
    margin: 0 auto;
    padding: 8px var(--farmer-footer-safe-inline) 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: none;
    box-shadow: none;
  }

  .calendar-drawer summary,
  .calendar-actions > .calendar-menu-button,
  .calendar-actions > .calendar-shop-button,
  .calendar-actions > .calendar-lifestyle-button,
  .calendar-actions > .start-day-button,
  .log-drawer summary {
    height: 44px;
    min-height: 44px;
    padding: 7px 15px;
  }

  .calendar-actions .log-drawer summary {
    color: #51351f;
    background-image: url("assets/ui/reference-slices/button-cream-normal.png");
  }

  .calendar-actions .log-drawer summary:hover { background-image: url("assets/ui/reference-slices/button-cream-hover.png"); }
  .calendar-actions .log-drawer summary:active { background-image: url("assets/ui/reference-slices/button-cream-pressed.png"); }

  .calendar-actions > .calendar-shop-button,
  .calendar-actions > .calendar-lifestyle-button {
    color: #fff1c3;
    background-image: url("assets/ui/reference-slices/button-green-normal.png");
  }

  .calendar-actions > .calendar-lifestyle-button {
    height: 44px;
    min-height: 44px;
    padding: 7px 15px;
  }

  .calendar-actions > .calendar-shop-button:hover,
  .calendar-actions > .calendar-lifestyle-button:hover { background-image: url("assets/ui/reference-slices/button-green-hover.png"); }
  .calendar-actions > .calendar-shop-button:active,
  .calendar-actions > .calendar-lifestyle-button:active { background-image: url("assets/ui/reference-slices/button-green-pressed.png"); }

  .calendar-action-copy strong,
  .calendar-actions > .start-day-button .calendar-action-copy strong,
  .log-drawer .calendar-action-copy strong { font-size: clamp(12px, 1.12vw, 15px); }

  .calendar-actions > .start-day-button .calendar-action-copy strong {
    font-size: clamp(12px, 1.12vw, 15px);
  }

  .calendar-actions > .calendar-shop-button .calendar-action-copy strong {
    font-size: clamp(9px, 1vw, 13px);
  }

  .calendar-actions > .calendar-lifestyle-button .calendar-action-copy strong {
    font-size: clamp(9px, 1vw, 13px);
  }

  .calendar-action-trail,
  .calendar-actions > .start-day-button .calendar-action-trail,
  .log-drawer .calendar-action-trail {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

}

@media (max-width: 760px) {
  .lifestyle-unlock-callout { right: 8px; bottom: auto; top: calc(100% - 2px); min-width: 170px; }

  body[data-ui-theme="farm"] .calendar-shell {
    --farmer-footer-height: 88px;
    width: min(100%, 430px);
    margin-inline: auto;
  }

  body[data-ui-theme="farm"] .calendar-topbar {
    min-height: 142px;
    grid-template-columns: minmax(0, 1fr) minmax(108px, 34%);
    grid-template-rows: 54px 64px;
  }

  body[data-ui-theme="farm"] .calendar-identity { min-width: 0; }
  body[data-ui-theme="farm"] .calendar-brand { min-width: 0; }

  body[data-ui-theme="farm"] .calendar-header-scene {
    width: 100%;
    min-width: 0;
  }

  body[data-ui-theme="farm"] .calendar-header-family {
    width: clamp(108px, 36vw, 140px);
    height: 84px;
    left: 14%;
    top: 55px;
  }

  body[data-ui-theme="farm"] .calendar-bill {
    width: 100%;
    min-width: 0;
    height: 64px;
  }

  body[data-ui-theme="farm"] .calendar-actions {
    min-height: 148px;
    margin: 0 auto 16px;
    padding: 13px clamp(16px, 5vw, 24px) 20px;
    gap: 8px;
    overflow: visible;
  }

  body[data-ui-theme="farm"] .calendar-footer-art {
    inset: auto -5px 0;
    height: var(--farmer-footer-height);
    transform: none;
  }

  body[data-ui-theme="farm"] .calendar-footer-rail {
    inset: 23px 56px 6px;
  }

  body[data-ui-theme="farm"] .calendar-footer-cap-left,
  body[data-ui-theme="farm"] .calendar-footer-cap-right {
    max-width: 46%;
  }

  body[data-ui-theme="farm"] .calendar-actions > :is(.calendar-menu-button, .calendar-shop-button, .calendar-lifestyle-button, .start-day-button) {
    height: 58px;
    min-height: 58px;
  }
}

/* Keep the actionable emphasis on the day cell, never on a circled date number. */
.day-node.current-day time,
.day-node.actionable-day.current-day time {
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
}

/* A quiet, hand-scratched stop mark for dates that precede the playable route. */
.day-node.missed-day .day-result {
  margin-top: clamp(1px, .25vw, 4px);
  color: #75533d;
  text-shadow: none;
}

.day-node.missed-day > i { display: none; }

.pre-start-mark {
  width: clamp(15px, 1.55vw, 23px);
  height: clamp(15px, 1.55vw, 23px);
  margin-inline: auto;
  display: block;
  overflow: visible;
  transform: rotate(-3deg);
}

.pre-start-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pre-start-mark .scribble-echo {
  opacity: .34;
  stroke-width: 1.35;
}

body[data-ui-theme="city"] .day-node.missed-day .day-result {
  color: #b8c0ca;
  filter: drop-shadow(0 1px 0 rgb(5 9 15 / 72%));
}

@media (max-width: 760px) {
  .pre-start-mark {
    width: clamp(14px, 4.8vw, 20px);
    height: clamp(14px, 4.8vw, 20px);
  }
}

/* Han Seo-yun: the campaign presentation hook owns this route skin. */
body[data-ui-theme="city"] .calendar-backdrop {
  color-scheme: dark;
  background:
    linear-gradient(rgb(4 8 13 / 34%), rgb(5 8 13 / 62%)),
    url("assets/illustrations/city-chart-surface-v1.png") center / cover fixed no-repeat,
    #070c13;
}

body[data-ui-theme="city"] .calendar-shell {
  isolation: isolate;
  color: #dce2e7;
  filter: drop-shadow(0 17px 32px rgb(0 0 0 / 58%));
}

body[data-ui-theme="city"] .calendar-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("assets/ui/calendar-han-seoul-chassis-v2.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

body[data-ui-theme="city"] :is(.calendar-seal, .calendar-header-scene, .calendar-header-family, .calendar-garden-cluster) {
  display: none;
}

body[data-ui-theme="city"] .calendar-topbar,
body[data-ui-theme="city"] .calendar-month-card,
body[data-ui-theme="city"] .calendar-actions {
  border-image: none;
  background: transparent;
  box-shadow: none;
}

body[data-ui-theme="city"] .calendar-topbar {
  width: 100%;
  height: 17.5%;
  min-height: 0;
  padding: 0;
  position: relative;
  inset: auto;
  flex: 0 0 17.5%;
  display: block;
  border: 0;
  border-radius: 0;
}

body[data-ui-theme="city"] .calendar-topbar::before,
body[data-ui-theme="city"] .calendar-topbar::after,
body[data-ui-theme="city"] .calendar-brand::after {
  content: none;
}

body[data-ui-theme="city"] .calendar-identity {
  width: 57%;
  height: 62%;
  position: absolute;
  left: 16.5%;
  top: 17%;
  display: block;
}

body[data-ui-theme="city"] .calendar-brand {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0 3%;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-ui-theme="city"] .calendar-brand h1 {
  color: #ece6dd;
  letter-spacing: .055em;
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 680;
  text-shadow: 0 2px 8px rgb(0 0 0 / 74%);
  text-align: center;
  text-transform: uppercase;
}

body[data-ui-theme="city"] .calendar-bill {
  width: 18%;
  min-width: 0;
  height: 62%;
  padding: 0 1.4%;
  position: absolute;
  right: 8%;
  top: 18%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(188 151 91 / 28%);
  border-radius: 2px;
  color: #e6dfd3;
  background: linear-gradient(145deg, rgb(20 28 38 / 72%), rgb(8 13 20 / 84%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%), 0 8px 22px rgb(0 0 0 / 25%);
  filter: none;
}

body[data-ui-theme="city"] .calendar-bill span { color: #b89b70; text-shadow: none; }
body[data-ui-theme="city"] .calendar-bill strong { color: #f0e9dc; text-shadow: none; }
body[data-ui-theme="city"] .calendar-bill small { color: #9ba7b2; }

body[data-ui-theme="city"] .calendar-month-card {
  border: 0;
  outline: 0;
}

body[data-ui-theme="city"] .calendar-month-heading { color: #aab4bd; }
body[data-ui-theme="city"] .calendar-month-heading::before,
body[data-ui-theme="city"] .calendar-month-heading::after { content: none; }
body[data-ui-theme="city"] .calendar-month-heading h2 {
  color: #e8e2d8;
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-weight: 640;
  letter-spacing: .075em;
  text-shadow: 0 2px 7px rgb(0 0 0 / 65%);
}
body[data-ui-theme="city"] .calendar-month-heading > span { color: #9d815b; }
body[data-ui-theme="city"] .calendar-weekdays {
  color: #9ba6b0;
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  text-shadow: 0 1px 4px #020509;
}

body[data-ui-theme="city"] .calendar-route.calendar-month-grid {
  border-color: rgb(160 178 190 / 22%);
  background: rgb(4 10 16 / 27%);
  box-shadow: inset 0 0 28px rgb(0 0 0 / 15%);
}

body[data-ui-theme="city"] :is(.calendar-day, .day-node) {
  border-color: rgb(160 178 190 / 18%);
  color: #c5cdd3;
  background: rgb(9 16 24 / 14%);
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

body[data-ui-theme="city"] .calendar-day.outside-month { background: rgb(3 8 13 / 18%); }
body[data-ui-theme="city"] .day-node time { color: #d2d8dc; }
body[data-ui-theme="city"] .day-node:hover { background: rgb(160 179 190 / 11%); box-shadow: inset 0 0 0 1px rgb(203 215 221 / 24%); }
body[data-ui-theme="city"] .day-node.settled-day { background: rgb(73 112 97 / 17%); }
body[data-ui-theme="city"] .day-node.missed-day { background: rgb(87 90 98 / 9%); }
body[data-ui-theme="city"] .day-node.milestone { background: rgb(105 35 44 / 19%); }
body[data-ui-theme="city"] .day-node.current-day,
body[data-ui-theme="city"] .day-node.selected { background: rgb(119 29 42 / 23%); }
body[data-ui-theme="city"] button.day-node.actionable-day {
  outline-color: #b68a56;
  background: rgb(107 25 38 / 27%);
  box-shadow: inset 0 0 0 1px rgb(218 187 132 / 25%);
}
body[data-ui-theme="city"] button.day-node.actionable-day:hover,
body[data-ui-theme="city"] button.day-node.actionable-day:focus-visible {
  outline-color: #d0aa70;
  background: rgb(126 32 47 / 34%);
  box-shadow: inset 0 0 0 2px rgb(230 201 151 / 24%);
}
body[data-ui-theme="city"] .day-state { color: #b5bec6; }
body[data-ui-theme="city"] .day-node.current-day .day-state { color: #d6ad75; }
body[data-ui-theme="city"] .day-result { color: #bba171; }
body[data-ui-theme="city"] .day-node.settled-day .day-result { color: #91b7a0; }

body[data-ui-theme="city"] .calendar-actions {
  width: 66%;
  height: 9.4%;
  min-height: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: auto 17% 3.2%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  border: 0;
  border-radius: 0;
}

body[data-ui-theme="city"] .calendar-actions > :is(.calendar-menu-button, .calendar-shop-button) {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px 22px;
  position: relative;
  overflow: hidden;
  border: 2px solid rgb(188 151 91 / 58%);
  border-radius: 3px;
  color: #e9e3da;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 5%), transparent 36% 72%, rgb(0 0 0 / 20%)),
    linear-gradient(160deg, #202630, #0b1017 68%);
  box-shadow:
    inset 0 0 0 3px rgb(2 5 9 / 48%),
    inset 0 0 0 4px rgb(188 151 91 / 16%),
    0 7px 16px rgb(0 0 0 / 34%);
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  transform: none;
}

body[data-ui-theme="city"] .calendar-actions > .calendar-shop-button {
  border-color: rgb(166 65 76 / 82%);
  color: #f2e7e3;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 5%), transparent 36% 72%, rgb(0 0 0 / 22%)),
    linear-gradient(160deg, #70182b, #310914 72%);
  box-shadow:
    inset 0 0 0 3px rgb(14 3 7 / 52%),
    inset 0 0 0 4px rgb(207 102 112 / 15%),
    0 7px 16px rgb(0 0 0 / 36%);
}

body[data-ui-theme="city"] .calendar-actions > :is(.calendar-menu-button, .calendar-shop-button):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
body[data-ui-theme="city"] .calendar-actions > :is(.calendar-menu-button, .calendar-shop-button):active {
  filter: brightness(.98);
  transform: translateY(1px);
}
body[data-ui-theme="city"] .calendar-actions > :is(.calendar-menu-button, .calendar-shop-button):focus-visible {
  outline: 3px solid #e1b978;
  outline-offset: 3px;
  box-shadow: inset 0 0 0 3px rgb(2 5 9 / 52%), 0 0 0 5px rgb(4 8 13 / 82%);
}

body[data-ui-theme="city"] :is(.calendar-drawer-body, .discretionary-panel) {
  border-color: #46525e;
  color: #d7dde2;
  background: #111923;
  box-shadow: 0 0 0 100vmax rgb(2 5 9 / 64%), 0 16px 36px rgb(0 0 0 / 48%);
}

/*
 * The desktop chassis reserves its lower marble ledge for the live actions.
 * Keep the six calendar rows inside the illustrated city-window frame instead
 * of letting the inherited flex card grow behind that footer.
 */
@media (min-width: 761px) {
  body[data-ui-theme="city"] .calendar-idle-layout {
    display: block;
  }

  body[data-ui-theme="city"] .calendar-month-card {
    width: auto;
    height: 63.8%;
    padding: .7% 1.2% 1.2%;
    position: absolute;
    inset: 17.5% 6.8% auto;
    box-sizing: border-box;
  }

  body[data-ui-theme="city"] .calendar-route.calendar-month-grid {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-ui-theme="city"] .calendar-backdrop { background-attachment: scroll; }
  body[data-ui-theme="city"] .calendar-shell {
    width: 100%;
    min-height: 0;
    aspect-ratio: 941 / 1672;
    display: block;
  }
  body[data-ui-theme="city"] .calendar-shell::before {
    background-image: url("assets/ui/calendar-han-seoul-mobile-v2.png");
  }
  body[data-ui-theme="city"] .calendar-topbar {
    position: absolute;
    inset: 0 0 auto;
    height: 11%;
    min-height: 0;
  }
  body[data-ui-theme="city"] .calendar-identity {
    width: 49%;
    height: 62%;
    left: 19.5%;
    top: 18%;
    position: absolute;
  }
  body[data-ui-theme="city"] .calendar-brand { padding: 0 2%; }
  body[data-ui-theme="city"] .calendar-brand h1 { font-size: clamp(13px, 4vw, 16px); }
  body[data-ui-theme="city"] .calendar-bill {
    width: 25%;
    min-width: 0;
    height: 68%;
    right: 3.8%;
    top: 15%;
    padding: 3px 5px;
    position: absolute;
    display: flex;
    gap: 2px;
  }
  body[data-ui-theme="city"] .calendar-bill span { font-size: clamp(4px, 1.35vw, 5.5px); }
  body[data-ui-theme="city"] .calendar-bill strong { font-size: clamp(8px, 2.65vw, 11px); }
  body[data-ui-theme="city"] .calendar-bill small { font-size: clamp(4px, 1.25vw, 5px); }
  body[data-ui-theme="city"] .calendar-idle-layout { display: block; }
  body[data-ui-theme="city"] .calendar-month-card {
    width: auto;
    height: 51.5%;
    min-height: 0;
    padding: 2.2% 3.2% 2.4%;
    position: absolute;
    inset: 11% 4.6% auto;
  }
  body[data-ui-theme="city"] .calendar-month-heading { height: 9%; flex-basis: 9%; }
  body[data-ui-theme="city"] .calendar-weekdays { height: 7%; flex-basis: 7%; }
  body[data-ui-theme="city"] .calendar-route.calendar-month-grid {
    min-height: 0;
    overflow: hidden;
  }
  body[data-ui-theme="city"] .calendar-route.calendar-month-grid { background: rgb(4 10 16 / 36%); }
  body[data-ui-theme="city"] .calendar-actions {
    width: auto;
    height: 26.7%;
    inset: 67.2% 6.3% auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 5.2%;
  }
  body[data-ui-theme="city"] .calendar-actions > :is(.calendar-menu-button, .calendar-shop-button) {
    height: 100%;
    min-height: 0;
    padding: 10px 18px;
    border-width: 2px;
  }
}

/* Keep Han's terminal result/retry continuity inside the route presentation. */
body[data-ui-theme="city"] :is(.result-backdrop, .campaign-end-backdrop) {
  background:
    radial-gradient(circle at 50% 24%, rgb(119 28 43 / 14%), transparent 38%),
    linear-gradient(rgb(4 8 13 / 72%), rgb(2 5 9 / 91%)),
    url("assets/illustrations/city-chart-surface-v1.png") center / cover no-repeat;
  backdrop-filter: blur(9px) saturate(.66);
}

body[data-ui-theme="city"] :is(.day-result-card, .campaign-end-card) {
  color: #d7dde2;
  outline-color: #8f754e;
  background:
    linear-gradient(145deg, rgb(30 39 49 / 96%), rgb(8 13 20 / 98%)),
    #0d141d;
  box-shadow:
    inset 0 0 0 1px rgb(204 171 112 / 20%),
    inset 0 0 34px rgb(0 0 0 / 30%),
    0 28px 80px rgb(0 0 0 / 72%);
  font-family: Inter, "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

body[data-ui-theme="city"] .day-result-card::before {
  border-color: rgb(154 170 181 / 17%);
  background:
    linear-gradient(rgb(255 255 255 / 2%), rgb(4 8 13 / 12%)),
    repeating-linear-gradient(90deg, rgb(155 175 188 / 3%) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgb(155 175 188 / 3%) 0 1px, transparent 1px 42px),
    #111a24;
  box-shadow: inset 0 0 28px rgb(0 0 0 / 28%);
}

body[data-ui-theme="city"] .day-result-card::after {
  content: "";
  inset: 8px;
  border: 1px solid rgb(143 113 70 / 22%);
  pointer-events: none;
}

body[data-ui-theme="city"] .result-celebration::before,
body[data-ui-theme="city"] .result-celebration::after { content: none; }
body[data-ui-theme="city"] .day-result-card .result-kicker,
body[data-ui-theme="city"] .campaign-end-card .result-kicker { color: #bb9665; }
body[data-ui-theme="city"] .day-result-card .result-kicker::before,
body[data-ui-theme="city"] .day-result-card .result-kicker::after { background: #69563c; }
body[data-ui-theme="city"] :is(.day-result-card, .campaign-end-card) h2 {
  color: #f0e9df;
  text-shadow: 0 2px 10px rgb(0 0 0 / 74%);
}
body[data-ui-theme="city"] :is(.result-celebration > p, .campaign-end-card > p) { color: #aeb8c0; }

body[data-ui-theme="city"] .day-result-card .result-equity,
body[data-ui-theme="city"] .campaign-score-summary .result-equity {
  border-color: #465361;
  color: #dce2e7;
  background: linear-gradient(95deg, rgb(150 166 177 / 8%), transparent 55%), #151f2a;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%), 0 2px 0 rgb(0 0 0 / 28%);
}
body[data-ui-theme="city"] .day-result-card .result-equity::after { background: rgb(157 174 184 / 18%); }
body[data-ui-theme="city"] .day-result-card .result-equity svg { stroke: #b99463; }
body[data-ui-theme="city"] .day-result-card .result-equity span { color: #9ba8b2; }
body[data-ui-theme="city"] .day-result-card .result-equity strong { color: #f0e9dd; text-shadow: none; }
body[data-ui-theme="city"] .day-result-card .result-equity strong.negative { color: #d38a93; }

body[data-ui-theme="city"] .day-result-card .result-grid { border-color: #44515e; box-shadow: none; }
body[data-ui-theme="city"] .day-result-card .result-grid div { background: rgb(13 21 30 / 74%); }
body[data-ui-theme="city"] .day-result-card .result-grid span,
body[data-ui-theme="city"] .result-market-sense-breakdown { color: #8f9ca6; }
body[data-ui-theme="city"] .day-result-card .result-grid strong { color: #d8dee3; }
body[data-ui-theme="city"] .campaign-end-card .result-grid {
  border-color: #44515e;
  box-shadow: none;
}
body[data-ui-theme="city"] .campaign-end-card .result-grid div {
  border-right-color: rgb(157 174 184 / 16%);
  background: rgb(13 21 30 / 82%);
}
body[data-ui-theme="city"] .campaign-end-card .result-grid span { color: #9ba8b2; }
body[data-ui-theme="city"] .campaign-end-card .result-grid strong { color: #e1e6e9; }
body[data-ui-theme="city"] .campaign-end-card .result-equity span { color: #9ba8b2; }
body[data-ui-theme="city"] .campaign-end-card .result-equity strong { color: #f0e9dd; }

body[data-ui-theme="city"] .campaign-end-card .deadline-resolution,
body[data-ui-theme="city"] .campaign-end-card .deadline-resolution:is(.paid, .missed, .victory) {
  border-color: #725b3e;
  color: #cbd3d9;
  background: linear-gradient(135deg, #202b35, #121a23);
  box-shadow: inset 0 0 0 1px rgb(206 174 116 / 12%);
}
body[data-ui-theme="city"] .campaign-end-card .deadline-resolution strong { color: #d3ae79; }
body[data-ui-theme="city"] .campaign-end-card .deadline-resolution span { color: #c0c9cf; }
body[data-ui-theme="city"] .campaign-end-card .deadline-resolution.missed {
  border-color: #88424c;
  background: linear-gradient(135deg, #2a2029, #151821);
}
body[data-ui-theme="city"] .campaign-end-card .deadline-resolution.missed strong { color: #db9ca4; }
body[data-ui-theme="city"] .campaign-end-card .deadline-resolution.victory {
  border-color: #947344;
  background: linear-gradient(135deg, #2b2927, #171c22);
}

body[data-ui-theme="city"] .result-character-note { display: none; }
body[data-ui-theme="city"] .day-result-card .result-recap {
  border-color: #485560;
  color: #c8d0d6;
  background: rgb(15 24 34 / 82%);
}
body[data-ui-theme="city"] .day-result-card .result-recap span { color: #b59061; }

body[data-ui-theme="city"] .day-result-card .result-actions { border-top-color: rgb(157 174 184 / 16%); }
body[data-ui-theme="city"] .day-result-card .result-actions > small,
body[data-ui-theme="city"] :is(.day-result-card, .campaign-end-card) > small { color: #919da6; }
body[data-ui-theme="city"] .groundhog-explainer {
  border-color: #765f40;
  color: #d6dde2;
  background: linear-gradient(135deg, #202b35, #121a23);
  box-shadow: inset 0 0 0 1px rgb(202 168 105 / 13%);
}
body[data-ui-theme="city"] .groundhog-explainer span { color: #c18f62; }
body[data-ui-theme="city"] .groundhog-explainer strong { color: #e9e1d6; }
body[data-ui-theme="city"] .groundhog-explainer p { color: #aab5bd; }

body[data-ui-theme="city"] .day-result-card #continue-button,
body[data-ui-theme="city"] .day-result-card.groundhog-featured #groundhog-button,
body[data-ui-theme="city"] .campaign-end-card #quick-retry-campaign-button,
body[data-ui-theme="city"] .campaign-end-card #restart-campaign-button:not(.secondary) {
  border-color: #8d3744;
  color: #f6e9e6;
  background: linear-gradient(#76283a, #4d1725);
  box-shadow: inset 0 0 0 1px rgb(225 174 161 / 12%), 0 4px 0 #280b13;
}

body[data-ui-theme="city"] .day-result-card :is(#replay-button, #groundhog-button, #menu-button),
body[data-ui-theme="city"] .day-result-card.groundhog-featured :is(#continue-button, #replay-button),
body[data-ui-theme="city"] .campaign-end-card .secondary {
  border-color: #586573;
  color: #d2dae0;
  background: linear-gradient(#273340, #18222d);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%), 0 2px 0 #080c11;
}

body[data-ui-theme="city"] :is(.day-result-card, .campaign-end-card) button:focus-visible {
  outline-color: #d1aa72;
  box-shadow: 0 0 0 3px rgb(4 8 13 / 85%);
}