.v3-almanac-card {
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.v3-almanac-intro-slot { align-self: end; min-width: 0; }

.v3-almanac-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.v3-almanac-heading time { color: rgba(255,255,255,.58); font-weight: 600; letter-spacing: .02em; }
.v3-almanac-date { margin-top: 12px; color: #f2f0ea; font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; }
.v3-almanac-meta, .v3-almanac-foot { margin: 9px 0 0; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.65; }
.v3-almanac-taboo { margin-top: 14px; display: grid; gap: 7px; }
.v3-almanac-taboo > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 11px; line-height: 1.6; }
.v3-almanac-taboo b { font-size: 11px; font-weight: 700; }
.v3-almanac-taboo > div:first-child b { color: var(--green); }
.v3-almanac-taboo > div:last-child b { color: #df8f8b; }
.v3-almanac-taboo span { color: rgba(255,255,255,.82); }
.v3-almanac-foot { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.50); font-size: 10px; }

/* V3 input state: the selected day drives every surface, not just the result column. */
.clothing-form {
  /* Keep the input panel in the same translucent layer as the left rail. */
  background: color-mix(in srgb, var(--page-color-mid) 20%, var(--glass-fill));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--page-color-soft) 12%, rgba(255,255,255,.08));
  backdrop-filter: blur(22px) saturate(112%);
  -webkit-backdrop-filter: blur(22px) saturate(112%);
}

.clothing-form::before {
  background: linear-gradient(145deg, color-mix(in srgb, var(--page-color-soft) 8%, transparent), transparent 46%);
  opacity: .72;
}

.clothing-form input,
.day-selector {
  border-color: color-mix(in srgb, var(--page-color-soft) 32%, rgba(255,255,255,.16));
  background: color-mix(in srgb, var(--page-color-mid) 38%, rgba(9,10,12,.68));
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--page-color-soft) 16%, rgba(255,255,255,.07));
}

.clothing-form input::placeholder { color: rgba(255,255,255,.54); }
.clothing-form input:focus { border-color: color-mix(in srgb, var(--action-color, #c64e4e) 70%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-color, #c64e4e) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.10); }

/* Keep browser autofill inside the same translucent, theme-aware glass surface. */
.clothing-form input:-webkit-autofill,
.clothing-form input:-webkit-autofill:hover,
.clothing-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255,255,255,.92);
  caret-color: rgba(255,255,255,.92);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--page-color-mid) 38%, rgba(9,10,12,.68)) inset, 0 0 0 3px color-mix(in srgb, var(--action-color, #c64e4e) 22%, transparent);
  transition: background-color 9999s ease-out;
}

.calculate-button {
  background: color-mix(in srgb, var(--action-color, #c64e4e) 88%, white);
  box-shadow: 0 5px 8px color-mix(in srgb, var(--action-color, #c64e4e) 20%, transparent);
}

.calculate-button:hover { background: color-mix(in srgb, var(--action-color, #c64e4e) 80%, white); filter: none; }

.day-selector[hidden],
.clothing-results[hidden] { display: none !important; }

/* Keep the five elements in one reading line so the ranking remains calm and continuous. */
.daily-preview-ranking { display: grid; gap: 18px; }
.daily-preview-ranking-grid { margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; list-style: none; }
.daily-preview-ranking-grid li { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 32px; }
.daily-preview-ranking-grid span { color: rgba(255,255,255,.56); font-size: 10px; }
.daily-preview-ranking-grid strong { font-size: 13px; }
.daily-preview-ranking-grid i { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.daily-preview-ranking-grid i::before { width: var(--score); height: 100%; display: block; content: ""; border-radius: inherit; background: var(--bar); }

@media (max-width: 620px) {
  .daily-preview-ranking-grid { gap: 10px; }
}

@media (max-width: 820px) {
  .clothing-intro:has(.v3-almanac-intro-slot) { min-height: 0; padding-bottom: 32px; gap: 24px; }
  .v3-almanac-intro-slot { width: 100%; }
  .v3-wide-rail { display: none; }
}

@media (min-width: 821px) {
  .clothing-workbench { align-items: stretch; }
  .v3-left-column { min-width: 0; border-right: 1px solid var(--line); background: var(--glass-fill); }
  .v3-left-column .clothing-form { border-right: 0; }
  .v3-wide-rail { display: grid; gap: 28px; padding: 0 30px 36px; }
  .v3-wide-rail > #v3WideAlmanacSlot { padding-top: 2px; }
  .v3-wide-rail > #v3WideClassicSlot { padding-top: 26px; border-top: 1px solid var(--glass-edge-soft); }
  .v3-left-column .daily-classic-insight { padding-bottom: 0; border-bottom: 0; }
  .clothing-form { align-self: stretch; height: auto; }
}