/* Page layout and type for the redesign. Loaded last. */

/* Fonts: Newsreader (headings) and Inter (text), self-hosted under the SIL
   Open Font License (see fonts/*-OFL.txt), so font-src 'self' still holds.
   The older stylesheets name Georgia, Arial, Playfair Display and DM Sans
   directly in many rules. The aliases below make those names load these two
   files inside this app, so every existing rule picks up the new type
   without being rewritten one by one. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

@font-face { font-family: "Georgia"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Georgia"; src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Georgia"; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Arial"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arial"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  --serif: "Newsreader", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Header and main navigation */
header .brand {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

header nav button {
  font-family: var(--sans);
  font-weight: 500;
}

header nav button:not(.active) {
  font-weight: 400;
}

/* Week strip (date navigation). Light by default; dark inside the Plan panel. */
.week-strip {
  --fg: #1d1d1b;
  --muted: #77736b;
  --sel-bg: #1d1d1b;
  --sel-fg: #f5f1ea;
  --line: #d8d2c6;
  --dot: #a64b2d;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 0 6px;
  color: var(--fg);
}

.editorial-stage .week-strip {
  --fg: #f2eee6;
  --muted: #b9b4aa;
  --sel-bg: #f2eee6;
  --sel-fg: #1d1d1b;
  --line: #4a4945;
  --dot: #c9b48a;
}

.week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
}

.week-strip button,
.simple-builder .editorial-stage .week-strip button {
  font: inherit;
  color: var(--fg);
  background: none;
  border: 0;
  border-radius: 12px;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
}

.week-strip .week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 58px;
  color: var(--muted);
}

.week-strip .week-day span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.week-strip .week-day b {
  font-size: 17px;
  font-weight: 500;
  color: var(--fg);
}

.week-strip .week-day i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.week-strip .week-day i.saved {
  background: var(--dot);
}

.week-strip .week-day.today:not(.selected) b {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.week-strip .week-day.selected,
.simple-builder .editorial-stage .week-strip .week-day.selected {
  background: var(--sel-bg);
  color: var(--sel-fg);
}

.week-strip .week-day.selected b {
  color: var(--sel-fg);
}

.week-strip .week-step,
.simple-builder .editorial-stage .week-strip .week-step {
  width: 36px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
}

.week-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.week-strip .week-today,
.simple-builder .editorial-stage .week-strip .week-today {
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}

.week-picker {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}

.week-picker span::after {
  content: " ▾";
  color: var(--muted);
}

/* The real date input covers the label so taps open the native picker. */
.week-picker input,
.simple-builder .week-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.week-strip button:focus-visible,
.week-picker:focus-within {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  /* Arrows and days on one row; Today and the month picker below. */
  .week-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .week-days {
    max-width: none;
  }

  .week-tools {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-left: 0;
  }

  .week-strip .week-step,
  .simple-builder .editorial-stage .week-strip .week-step {
    width: 28px;
  }
}

@media (max-width: 360px) {
  .week-strip .week-day span {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  .week-strip .week-day b {
    font-size: 16px;
  }
}

/* Plan page: board panel left, wardrobe right (stacked on phones). */
.plan-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.editorial-shell.plan-layout {
  grid-template-areas: "stage wardrobe";
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr);
}

.editorial-shell.plan-layout.wardrobe-closed {
  grid-template-areas: "stage";
  grid-template-columns: minmax(0, 1fr);
}

.simple-builder.plan-layout .plan-stage {
  padding: 22px 32px 30px;
}

.editorial-shell.plan-layout.wardrobe-closed .plan-stage {
  padding-inline: max(32px, calc((100vw - 1100px) / 2));
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 12px 0 4px;
}

.plan-head h1 {
  margin: 0;
  color: #f2eee6;
  font: 300 clamp(30px, 3vw, 42px)/1.08 var(--serif);
  letter-spacing: -0.015em;
}

.plan-head .simple-preferences {
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.plan-head .simple-preferences label {
  display: block;
  flex: none;
}

.simple-builder .plan-head select {
  height: 44px;
  min-height: 44px;
  padding: 0 38px 0 16px;
  color: #f2eee6;
  background: #232321 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b9b4aa' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid #4a4945;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 14px;
}

.simple-builder .editorial-stage .plan-head [data-refine],
.simple-builder .editorial-stage .plan-head .plan-open {
  height: 44px;
  padding: 0 16px;
  border: 1px solid #4a4945;
  border-radius: 999px;
  font-size: 14px;
}

.plan-head .simple-refine #refine-panel {
  border-radius: 14px;
  border-color: #4a4945;
}

.simple-builder .editorial-stage #refine-panel button {
  margin: 8px 8px 0 0;
  border-radius: 10px;
}

/* Source label on the board */
.plan-source-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 5;
  padding: 5px 10px;
  color: #b9b4aa;
  background: rgba(29, 29, 27, 0.6);
  border: 1px solid #4a4945;
  border-radius: 999px;
  font-size: 12px;
  pointer-events: none;
}

.plan-layout .flatlay-stage {
  /* Fit the board so the status and buttons stay on screen. */
  height: clamp(340px, calc(100vh - 400px), 720px);
  padding-top: 56px;
}

@media (max-width: 700px) {
  .plan-layout .flatlay-stage {
    height: 440px;
  }

  .simple-builder .plan-notice {
    top: 48px;
    left: 8px;
    right: 8px;
    max-width: none;
  }
}

.plan-help {
  margin: 0 0 6px;
  color: #b9b4aa;
  font-size: 13px;
}

.simple-builder .plan-notice {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(460px, calc(100% - 24px));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  margin: 0;
  padding: 8px 8px 8px 14px;
  color: #e9e1cf;
  background: #2b2b29;
  border-left: 3px solid #c9b48a;
  border-radius: 8px;
  font-size: 13px;
}

.simple-builder .editorial-stage .plan-notice button {
  min-height: 36px;
  padding: 0 12px;
  border-color: #4a4945;
  border-radius: 8px;
  font-size: 13px;
}

/* Status and actions */
.plan-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.plan-status {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #b9b4aa;
  font-size: 13px;
  line-height: 1.45;
}

.plan-status b {
  color: #f2eee6;
  font-weight: 500;
}

.plan-bar .simple-actions {
  flex: none;
  gap: 10px;
}

.simple-builder .editorial-stage .plan-bar button {
  height: 48px;
  padding: 0 22px;
  color: #f2eee6;
  background: none;
  border: 1px solid #5a5953;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.simple-builder .editorial-stage .plan-bar button.editorial-primary {
  color: #1d1d1b;
  background: #f2eee6;
  border-color: #f2eee6;
}

.simple-builder .editorial-stage .plan-bar button:disabled {
  opacity: 0.4;
}

.plan-caption {
  margin: 10px 0 0;
  color: #8f8a81;
}

/* Pieces list: collapsed text summary with Pin and Remove */
.plan-pieces {
  margin-top: 16px;
  border-top: 1px solid #3a3a37;
}

.plan-pieces summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.plan-pieces summary::-webkit-details-marker {
  display: none;
}

.plan-pieces summary::after {
  content: "▾";
  margin-left: 8px;
  color: #8f8a81;
}

.plan-pieces[open] summary::after {
  content: "▴";
}

.plan-pieces summary h2 {
  margin: 0;
  color: #d8d3cc;
  font: 500 12px/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.simple-builder .editorial-stage .plan-pieces .simple-selected-row button {
  min-height: 40px;
  padding: 0 14px;
  border-color: #4a4945;
  border-radius: 10px;
  font-size: 13px;
}

/* Wardrobe panel */
.simple-builder.plan-layout .plan-wardrobe {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 22px 28px 32px;
}

.simple-builder .plan-wardrobe-head h2 {
  margin: 0;
  font: 400 28px/1.1 var(--serif);
  letter-spacing: -0.01em;
}

.plan-wardrobe .plan-wardrobe-head p {
  margin: 4px 0 0;
  color: #77736b;
  font-size: 14px;
}

.plan-close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  color: #4b4842;
  background: none;
  border: 1px solid #d8d2c6;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}

.wardrobe-source-tabs.plan-source {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 16px 0 12px;
  padding: 4px;
  background: #ece7de;
  border-radius: 12px;
}

.wardrobe-source-tabs.plan-source button {
  height: 40px;
  min-height: 40px;
  padding: 0 8px;
  color: #6c6860;
  background: none;
  border: 0;
  border-radius: 9px;
  font-size: 14px;
}

.wardrobe-source-tabs.plan-source button[aria-pressed="true"] {
  color: #1d1d1b;
  background: #fff;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.wardrobe-source-tabs.plan-source span {
  margin-left: 4px;
  color: #8f8a81;
  font-size: 13px;
  font-weight: 400;
}

.editorial-filter-row.plan-chips {
  gap: 6px;
  padding-bottom: 2px;
  border: 0;
  scrollbar-width: none;
}

.editorial-filter-row.plan-chips button {
  height: 36px;
  min-height: 36px;
  padding: 0 13px;
  color: #4b4842;
  border: 1px solid #ddd7cc;
  border-radius: 999px;
  font-weight: 400;
  font-size: 13px;
}

.editorial-filter-row.plan-chips button.active {
  color: #f5f1ea;
  background: #1d1d1b;
  border-color: #1d1d1b;
  font-weight: 500;
}

.simple-builder .editorial-piece-grid.plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: none;
  margin-top: 12px;
  padding: 0;
  overflow: visible;
}

.editorial-piece.plan-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 10px 12px;
  background: #ece7de;
  border: 1.5px solid transparent;
  border-radius: 14px;
}

.editorial-piece.plan-card:hover {
  border-color: #b9b2a6;
}

.editorial-piece.plan-card.in-look {
  background: #e6e0d4;
  border-color: #1d1d1b;
}

.simple-builder .plan-card .editorial-piece-art {
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 6px;
}

.plan-card strong {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

.plan-card small {
  margin: 2px 0 0;
  color: #77736b;
  font-size: 12px;
}

.plan-in-look {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  color: #f5f1ea;
  background: #1d1d1b;
  border-radius: 999px;
  font-size: 11px;
}

.plan-empty {
  margin: 16px 0 0;
  color: #4b4842;
}

.simple-builder .plan-wardrobe > .plan-add {
  margin-top: 16px;
  border-radius: 12px;
}

.plan-note {
  color: #77736b;
  font-size: 12px;
  line-height: 1.5;
}

/* Replacement question, docked at the bottom of the board like the piece menu. */
.simple-builder .plan-confirm {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 41;
  width: min(380px, calc(100% - 28px));
  margin: 0;
  padding: 14px;
  color: #1d1d1b;
  background: #f5f1ea;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.simple-builder .plan-confirm h2 {
  margin: 0 0 4px;
  font: 600 14px/1.35 var(--sans);
}

.simple-builder .plan-confirm p {
  margin: 0 0 12px;
  color: #6c6860;
  font-size: 12px;
  line-height: 1.4;
}

.plan-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.simple-builder .editorial-stage .plan-confirm button {
  min-height: 44px;
  margin: 0;
  color: #1d1d1b;
  background: #fff;
  border: 1px solid #d8d2c6;
  border-radius: 10px;
  font-size: 13px;
}

.simple-builder .editorial-stage .plan-confirm button.editorial-primary {
  color: #f5f1ea;
  background: #1d1d1b;
  border-color: #1d1d1b;
}

@media (max-width: 700px) {
  .simple-builder .plan-confirm {
    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
  }
}

/* Phones and narrow tablets: one column, board first, wardrobe below. */
@media (max-width: 860px) {
  .editorial-shell.plan-layout {
    display: flex;
    flex-direction: column;
  }

  .simple-builder.plan-layout .plan-stage {
    padding: 14px 16px 18px;
  }

  .plan-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 8px 0 2px;
  }

  /* The week strip already shows the selected day and month on phones;
     the date heading stays available to screen readers. */
  .plan-head h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Size the board so the status and buttons fit on the first screen. */
  .plan-layout .flatlay-stage {
    height: clamp(300px, calc(100svh - 450px), 460px);
  }

  .plan-head .simple-preferences {
    display: flex;
    width: 100%;
  }

  .plan-head .simple-preferences label {
    flex: 1;
    min-width: 0;
  }

  .simple-builder .plan-head select {
    width: 100%;
  }

  .plan-head .simple-refine #refine-panel {
    right: 0;
    width: min(320px, calc(100vw - 32px));
  }

  .plan-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .plan-bar .simple-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .simple-builder .editorial-stage .plan-bar button {
    padding: 0 10px;
    font-size: 15px;
  }

  /* The desktop sticky panel would shrink to its widest row here. */
  .simple-builder.plan-layout .plan-wardrobe {
    position: static;
    align-self: stretch;
    max-height: none;
    overflow: visible;
    min-width: 0;
    padding: 20px 16px 28px;
  }

  .simple-builder .plan-wardrobe-head h2 {
    font-size: 24px;
  }

  .editorial-filter-row.plan-chips {
    overflow-x: auto;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .simple-builder .editorial-piece-grid.plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simple-builder .plan-card .editorial-piece-art {
    height: auto;
  }
}

@media (max-width: 360px) {
  header .brand {
    font-size: 23px;
  }

  .simple-builder .editorial-stage .plan-bar button {
    font-size: 14px;
  }
}

/* The Closet tab count included untouched starter examples, which the
   Plan page does not treat as owned. Hide it to avoid two conflicting
   numbers; Closet itself still lists every record. */
#closet-count {
  display: none;
}

.simple-builder .editorial-stage .plan-notice button.plan-dismiss {
  flex: 0 0 36px;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  margin-left: auto;
  border: 0;
  font-size: 18px;
  line-height: 1;
}

.simple-builder .plan-notice {
  flex-wrap: nowrap;
}

@media (max-width: 860px) {
  .simple-builder .plan-notice {
    top: 8px;
    padding: 4px 4px 4px 12px;
    font-size: 12px;
    line-height: 1.35;
  }
}

/* Days with a sample idea: hollow ring (saved looks use a filled dot). */
.week-strip .week-day i.idea {
  box-shadow: inset 0 0 0 1px var(--dot);
}

/* Sample ideas on the Saved looks page */
.ideas-section {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid #d8d2c6;
}

.ideas-section h2 {
  margin: 0 0 4px;
  font: 400 26px/1.2 var(--serif);
}

.ideas-note {
  margin: 0 0 16px;
  color: #77736b;
  font-size: 13px;
}

.idea-card button + button {
  margin-left: 8px;
}

/* Saved looks page */
.saved-page {
  max-width: 1100px;
  margin: 0 auto;
}

.saved-head h1 {
  margin: 0;
  font: 400 clamp(32px, 4vw, 44px)/1.1 var(--serif);
  letter-spacing: -0.015em;
}

.saved-head p {
  margin: 6px 0 20px;
  color: #77736b;
  font-size: 14px;
}

.saved-group {
  margin-top: 28px;
}

.saved-group > h2,
.ideas-section > h2 {
  margin: 0 0 12px;
  font: 400 24px/1.2 var(--serif);
}

.saved-sub {
  margin: 22px 0 10px;
  font: 500 13px/1.4 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #77736b;
}

.saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.look-card.saved-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #fffdf9;
  border: 1px solid #e4ded3;
  border-radius: 16px;
}

/* Keep garment shadows inside each card's board. */
.flatlay-small {
  overflow: hidden;
}

.saved-card .flatlay-small {
  height: 230px;
}

.saved-card-body h3 {
  margin: 0;
  font: 400 20px/1.2 var(--serif);
}

.saved-card-body p {
  margin: 4px 0 0;
  color: #77736b;
  font-size: 13px;
}

.saved-card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: auto;
}

.saved-card-actions button,
.saved-plan {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.saved-open,
.saved-plan {
  color: #f5f1ea;
  background: #1d1d1b;
  border: 1px solid #1d1d1b;
}

.saved-delete {
  color: #4b4842;
  background: none;
  border: 1px solid #d8d2c6;
}

.saved-empty {
  margin: 0 0 12px;
  color: #4b4842;
}

.saved-page .ideas-section {
  margin-top: 36px;
}

@media (max-width: 600px) {
  .saved-grid {
    grid-template-columns: 1fr;
  }
}

/* Rating saved looks */
.rate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.rate button,
.simple-builder .editorial-stage .rate button {
  min-height: 40px;
  padding: 0 10px;
  color: #4b4842;
  background: none;
  border: 1px solid #d8d2c6;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.rate button[aria-pressed="true"],
.simple-builder .editorial-stage .rate button[aria-pressed="true"] {
  color: #f5f1ea;
  background: #1d1d1b;
  border-color: #1d1d1b;
}

.simple-builder .editorial-stage .plan-bar .rate {
  flex: none;
}

.simple-builder .editorial-stage .plan-bar .rate button {
  height: 48px;
  min-height: 48px;
  color: #f2eee6;
  border-color: #5a5953;
  border-radius: 12px;
  font-size: 14px;
}

.simple-builder .editorial-stage .plan-bar .rate button[aria-pressed="true"] {
  color: #1d1d1b;
  background: #f2eee6;
  border-color: #f2eee6;
}

/* Style learning page */
.learn-page .learn-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.learn-page h3 {
  margin: 0 0 6px;
  font: 500 13px/1.4 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #77736b;
}

.learn-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}

.learn-page .inline-check {
  font-size: 14px;
}

.learn-page .saved-delete {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
}

.learn-page .saved-delete:disabled {
  opacity: 0.45;
}

/* Keep confirmations above the bottom navigation on phones. */
@media (max-width: 860px) {
  #toast {
    bottom: 92px;
  }
}

/* Diary page */
.diary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 8px;
}

.diary-head p {
  margin-bottom: 0;
}

.diary-log,
.diary-primary,
.diary-secondary,
.diary-danger {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.diary-log,
.diary-primary {
  color: #f5f1ea;
  background: #1d1d1b;
  border: 1px solid #1d1d1b;
}

.diary-secondary {
  color: #1d1d1b;
  background: none;
  border: 1px solid #d8d2c6;
}

.diary-danger {
  color: #fff;
  background: #a3361f;
  border: 1px solid #a3361f;
}

.diary-log:focus-visible,
.diary-primary:focus-visible,
.diary-secondary:focus-visible,
.diary-danger:focus-visible,
.diary-card:focus-visible,
.diary-pick:focus-within {
  outline: 2px solid #1d1d1b;
  outline-offset: 2px;
}

.diary-primary:disabled {
  opacity: 0.45;
  cursor: default;
}

.diary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diary-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  background: #fffdf9;
  border: 1px solid #e4ded3;
  border-radius: 16px;
  cursor: pointer;
}

.diary-card:hover {
  border-color: #b9b2a5;
}

.diary-card-photo {
  display: block;
  aspect-ratio: 3 / 4;
  background: #ebe6dc;
}

.diary-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary-card-body {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
}

.diary-card-date {
  font: 400 18px/1.2 var(--serif);
}

.diary-card-note {
  display: -webkit-box;
  overflow: hidden;
  color: #4b4842;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.diary-card-meta {
  color: #77736b;
  font-size: 12px;
}

.diary-empty {
  max-width: 560px;
  margin-top: 20px;
  padding: 24px;
  background: #fffdf9;
  border: 1px dashed #d8d2c6;
  border-radius: 16px;
}

.diary-empty h2 {
  margin: 0 0 6px;
  font: 400 24px/1.2 var(--serif);
}

.diary-empty p {
  margin: 0 0 16px;
  color: #4b4842;
}

/* Diary dialogs: log, edit, view */
.diary-form,
.diary-view {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.diary-photo {
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  background: #ebe6dc;
  border-radius: 12px;
}

.diary-photo img {
  display: block;
  max-width: 100%;
  max-height: 40vh;
  object-fit: contain;
}

.diary-photo-empty {
  color: #77736b;
  font-size: 14px;
}

.diary-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.diary-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  overflow: hidden;
  color: #1d1d1b;
  font-size: 14px;
  background: none;
  border: 1px solid #d8d2c6;
  border-radius: 10px;
  cursor: pointer;
}

.diary-pick.diary-camera {
  color: #f5f1ea;
  background: #1d1d1b;
  border-color: #1d1d1b;
}

/* Without a touch screen the camera choice opens the same file picker, so
   only one button is shown. */
@media (pointer: fine) {
  .diary-pick.diary-camera {
    display: none;
  }

  .diary-pick {
    color: #f5f1ea;
    background: #1d1d1b;
    border-color: #1d1d1b;
  }
}

.diary-pick .closet-file,
.diary-pick .diary-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.diary-pick.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.diary-status,
.diary-hint {
  margin: 0;
  color: #4b4842;
  font-size: 13px;
  line-height: 1.5;
}

.diary-status:empty,
.diary-error:empty {
  display: none;
}

.diary-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.diary-label {
  color: inherit;
}

.diary-field .diary-label span,
.diary-pieces summary span {
  color: #77736b;
  font-weight: 400;
}

.diary-field input,
.diary-field textarea {
  width: 100%;
  padding: 10px 12px;
  color: #1d1d1b;
  font: 400 16px/1.4 var(--sans);
  background: #fffdf9;
  border: 1px solid #d8d2c6;
  border-radius: 10px;
}

.diary-field textarea {
  resize: vertical;
}

.diary-field small {
  justify-self: end;
  color: #77736b;
  font-size: 12px;
  font-weight: 400;
}

.diary-pieces {
  margin: 0;
  font-size: 14px;
}

.diary-pieces summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  list-style: none;
}

.diary-pieces summary::-webkit-details-marker {
  display: none;
}

.diary-pieces summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.diary-pieces[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.diary-piece-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 12px;
  max-height: 220px;
  overflow: auto;
}

.diary-piece-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.diary-piece-list input {
  width: 18px;
  height: 18px;
  accent-color: #1d1d1b;
}

.diary-error {
  margin: 0;
  color: #a3361f;
  font-size: 13px;
}

.diary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.diary-view-photo {
  width: 100%;
  height: auto;
  max-height: min(52vh, 560px);
  object-fit: contain;
  background: #ebe6dc;
  border-radius: 12px;
}

.diary-view-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.diary-sub {
  margin: 4px 0 0;
  color: #77736b;
  font: 500 12px/1.4 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.diary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diary-chips li {
  padding: 6px 10px;
  font-size: 13px;
  background: #fffdf9;
  border: 1px solid #d8d2c6;
  border-radius: 999px;
}

@media (max-width: 600px) {
  .diary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .diary-card-date {
    font-size: 16px;
  }
}

/* Small inline text button (for example "Remove examples") */
.plan-link {
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Pieces with no photo: a plain tile in the piece's color, type in text. */
.color-tile {
  display: grid;
  place-items: end start;
  width: 100%;
  height: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--tile, #d9d2bd);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%);
}

.color-tile-label {
  color: #fffaf2;
  font: 500 12px/1.2 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.color-tile.is-light .color-tile-label {
  color: #1d1d1b;
}

/* Closet page */
.closet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 8px;
}

.closet-head p {
  margin-bottom: 0;
}

.closet-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.closet-examples {
  max-width: 760px;
  margin: 16px 0 0;
  padding: 12px 14px;
  color: #4b4842;
  font-size: 14px;
  line-height: 1.5;
  background: #fffdf9;
  border: 1px solid #e4ded3;
  border-radius: 12px;
}

.closet-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 20px;
}

.closet-search {
  flex: 1 1 260px;
  max-width: 420px;
}

.closet-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  color: #1d1d1b;
  font: 400 16px/1.4 var(--sans);
  background: #fffdf9;
  border: 1px solid #d8d2c6;
  border-radius: 10px;
}

.closet-count {
  margin: 0;
  color: #77736b;
  font-size: 13px;
}

.closet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
}

.closet-chips button {
  min-height: 36px;
  padding: 0 14px;
  color: #1d1d1b;
  font: inherit;
  font-size: 13px;
  background: none;
  border: 1px solid #d8d2c6;
  border-radius: 999px;
  cursor: pointer;
}

.closet-chips button.active {
  color: #f5f1ea;
  background: #1d1d1b;
  border-color: #1d1d1b;
}

.closet-grid-new {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.closet-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fffdf9;
  border: 1px solid #e4ded3;
  border-radius: 16px;
}

.closet-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 14px;
  background: #ebe6dc;
}

.closet-art .photo-frame,
.closet-art .garment-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.closet-art .image-unavailable {
  display: grid;
  gap: 4px;
  color: #4b4842;
  font-size: 13px;
  text-align: center;
}

.closet-card.is-away .closet-art > :first-child {
  opacity: 0.45;
}

.closet-away {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  color: #4b4842;
  font-size: 12px;
  background: #fffdf9;
  border-radius: 999px;
}

.closet-body {
  padding: 10px 12px 4px;
}

.closet-body h3 {
  margin: 0;
  font: 400 18px/1.25 var(--serif);
}

.closet-body p {
  margin: 4px 0 0;
  color: #77736b;
  font-size: 13px;
}

.closet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: auto;
  padding: 8px 12px 12px;
}

.closet-actions button {
  min-height: 32px;
  padding: 0;
  color: #1d1d1b;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.closet-hint {
  margin: 20px 0 0;
  color: #77736b;
  font-size: 13px;
}

.closet-empty p + p {
  margin-top: -6px;
}

@media (max-width: 600px) {
  .closet-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .closet-body h3 {
    font-size: 16px;
  }

  .closet-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* How it works: header link (Help on phones), page and introduction */
header .header-help {
  padding: 10px 0 10px 32px;
  color: #d8d3cc;
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-left: 1px solid #8b8781;
  cursor: pointer;
}

header .header-help.active {
  color: #fffaf2;
}

header .header-help + .profile {
  padding-left: 24px;
  border-left: 0;
}

.help-short {
  display: none;
}

@media (max-width: 860px) {
  header {
    column-gap: 16px;
  }

  header .header-help,
  header .header-help.active {
    margin-left: auto;
    padding: 10px 0;
    color: #1d1d1b;
    border-left: 0;
  }

  header .header-help + .profile {
    margin-left: 0;
    padding-left: 16px;
  }

  .help-long {
    display: none;
  }

  .help-short {
    display: inline;
  }
}

@media (max-width: 360px) {
  header .brand {
    font-size: 23px;
    white-space: nowrap;
  }

  header .header-help + .profile {
    padding-left: 8px;
  }

  header {
    column-gap: 12px;
  }
}

.saved-tip {
  max-width: 760px;
  margin: 0 0 16px;
  padding: 12px 14px;
  color: #4b4842;
  font-size: 14px;
  line-height: 1.5;
  background: #fffdf9;
  border: 1px solid #e4ded3;
  border-radius: 12px;
}

.help-page {
  max-width: 760px;
}

.help-intro {
  margin: 4px 0 8px;
}

.help-section {
  margin-top: 28px;
}

.help-section h2 {
  margin: 0 0 8px;
  font: 400 24px/1.2 var(--serif);
}

.help-section p,
.help-more {
  margin: 0 0 10px;
  color: #2f2d29;
  font-size: 15px;
  line-height: 1.6;
}

.help-more {
  margin-top: 28px;
  color: #77736b;
}

.intro-dialog {
  width: min(460px, calc(100% - 32px));
  padding: 28px;
  color: #1d1d1b;
  background: #f5f1ea;
  border: 0;
  border-radius: 18px;
}

.intro-dialog::backdrop {
  background: rgb(29 29 27 / 55%);
}

.intro-count {
  margin: 0 0 8px;
  color: #77736b;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intro-dialog h2 {
  margin: 0 0 10px;
  font: 400 28px/1.15 var(--serif);
}

.intro-body {
  margin: 0;
  color: #2f2d29;
  font-size: 16px;
  line-height: 1.55;
}

.intro-dots {
  display: flex;
  gap: 6px;
  margin: 20px 0;
}

.intro-dots span {
  width: 7px;
  height: 7px;
  background: #d8d2c6;
  border-radius: 50%;
}

.intro-dots span.on {
  background: #1d1d1b;
}

.intro-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.intro-more {
  margin: 14px 0 0;
  color: #77736b;
  font-size: 13px;
}

/* On the Plan board, a photo-less piece keeps its color tile. */
.flatlay-tile .photo-frame.color-tile {
  display: grid;
  padding: 10px 12px;
  background: var(--tile, #d9d2bd);
}

/* The suggestion notice sits at the bottom of the board, so the Refine
   panel and the occasion menu (which open downward from the top) never
   cover it. */
.simple-builder .plan-notice {
  top: auto;
  right: auto;
  bottom: 12px;
  left: 12px;
}

@media (max-width: 700px) {
  .simple-builder .plan-notice {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
  }
}

/* Keep the Style label clear of the menu's focus outline. */
.simple-refine #refine-panel label {
  display: grid;
  gap: 8px;
}