/* Timeless web 1.0, craigslist school: the content is the interface.
   Same palette as before (cream / ink / plaid yellow), none of the chrome. */

:root {
  --bg: #faf7f2;
  --ink: #2a2438;
  --muted: #7a7288;
  --accent: #f3d34a;      /* plaid yellow, used sparingly as highlight */
  --line: #c9c2b4;
  --link: #0000ee;
  --visited: #551a8b;
  --love: #d64570;
}

body {
  margin: 0;
  font-family: arial, helvetica, sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}
main { max-width: 760px; margin: 0 auto; padding: 0 12px 40px; }

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--visited); }
a.action, .topbar a { text-decoration: none; }
a.action:hover, .topbar a:hover { text-decoration: underline; }
a.action { cursor: pointer; }

h1 { font-size: 16px; margin: 14px 0 2px; }
h2 { font-size: 14px; margin: 16px 0 4px; }
h3 { font-size: 13px; margin: 10px 0 2px; }

.topbar {
  background: var(--accent);
  border-bottom: 1px solid var(--ink);
  padding: 4px 12px;
  font-size: 13px;
}
.brand { font-weight: bold; color: var(--ink) !important; }
.topbar nav { display: inline; }
.topbar nav a { color: var(--ink) !important; }
.topbar nav a::before { content: " | "; text-decoration: none; }
.whoami { float: right; font-size: 12px; }
.whoami form { display: inline; margin: 0; }
.whoami button { padding: 0 6px; font-size: 11px; }

.sub, .meta { color: var(--muted); font-size: 12px; }
.sub { margin: 0 0 8px; }

.filters { margin: 6px 0 10px; font-size: 12px; }
.filters a, .filters b { margin-right: 2px; }

/* item rows */
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li { padding: 3px 0; border-bottom: 1px dotted var(--line); }
.swatches { display: inline-block; vertical-align: -1px; margin-right: 4px; white-space: nowrap; }
.swatch { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--line); vertical-align: middle; }
.thumb { width: 28px; height: 28px; object-fit: cover; vertical-align: middle; margin-right: 4px; border: 1px solid var(--line); }
.actions { font-size: 12px; white-space: nowrap; }
.loved-mark { color: var(--love); font-weight: bold; }
.flash { color: var(--love); font-size: 11px; font-style: italic; }

.swatch-black{background:#1c1c1e}.swatch-white{background:#f4f4f2}
.swatch-gray{background:#9a9aa0}.swatch-beige{background:#d9c7a7}.swatch-brown{background:#7a5230}
.swatch-navy{background:#1f2a4d}.swatch-denim{background:#4668a0}.swatch-red{background:#c0392b}
.swatch-orange{background:#e67e22}.swatch-yellow{background:#f1c40f}.swatch-green{background:#5c7a3f}
.swatch-blue{background:#2f6fb2}.swatch-purple{background:#7d4aa0}.swatch-pink{background:#e88aad}
.swatch-gold{background:linear-gradient(135deg,#d4af37,#f5e08c)}.swatch-silver{background:linear-gradient(135deg,#b8b8be,#e4e4ea)}
.swatch-multi{background:linear-gradient(90deg,#c0392b,#f1c40f,#5c7a3f,#2f6fb2,#7d4aa0)}

/* forms: as close to browser default as dignity allows */
form { margin: 6px 0; }
fieldset { border: 1px solid var(--line); margin: 8px 0; padding: 6px 8px; }
legend { font-weight: bold; font-size: 12px; padding: 0 4px; }
label { font-size: 12px; }
input, select, button { font: inherit; font-size: 12px; }
input[type="text"], input[type="file"], input:not([type]), select {
  border: 1px solid var(--line); background: #fff; padding: 2px 4px;
}
button {
  background: #ece7dc; border: 1px solid var(--ink);
  padding: 2px 10px; cursor: pointer;
}
button:hover { background: var(--accent); }
.list-table { border-collapse: collapse; }
.list-table td { padding: 2px 10px 2px 0; font-size: 13px; }
.form-table { border-collapse: collapse; }
.form-table td { padding: 2px 6px 2px 0; vertical-align: top; font-size: 12px; }
.tick { margin-right: 8px; white-space: nowrap; }

/* builder */
.panel { border: 1px solid var(--line); background: #fffdf7; padding: 8px 10px; margin: 8px 0; }
.panel-hl { border: 1px solid var(--ink); background: #fff; }
.reasons { margin: 2px 0 6px; padding-left: 18px; font-size: 12px; color: var(--muted); font-style: italic; }
.judge { display: inline; }
.judge button, .save-outfit button { margin-right: 4px; }
.save-outfit { margin-top: 4px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

.foot {
  max-width: 760px; margin: 0 auto; padding: 10px 12px;
  color: var(--muted); font-size: 11px; border-top: 1px solid var(--line);
}
code { font-family: monaco, monospace; font-size: 11px; }

.swatchlink img { height: 40px; width: 30px; object-fit: cover; border: 1px solid var(--line); vertical-align: middle; }
.swatchlink.current img { border: 2px solid var(--ink); }
.swatchlink { text-decoration: none; margin-right: 2px; }

/* outfit cards (generate page): items float as cutouts on a card whose
   background matches the packshot canvas (244,244,244), Stitch-Fix-style */
.outfit-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.outfit-card { background: rgb(244,244,244); flex: 1 1 220px; max-width: 300px;
  min-height: 230px; padding: 10px 12px; display: flex; flex-direction: column; }
.outfit-card .pieces { flex: 1; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 6px 14px; }
.outfit-card .pieces a { display: inline-block; line-height: 0; }
.outfit-card img { max-width: 128px; mix-blend-mode: multiply; }
.outfit-card img.h-lg { max-height: 150px; }
.outfit-card img.h-md { max-height: 118px; }
.outfit-card img.h-sm { max-height: 80px; }
.outfit-card .cardfoot { display: flex; justify-content: space-between;
  align-items: baseline; margin-top: 8px; }

/* shuffle */
.shuffle-card { background: rgb(244,244,244); max-width: 420px;
  padding: 16px; text-align: center; }
.shuffle-card img { max-width: 100%; max-height: 380px; mix-blend-mode: multiply; }
.photo-box { position: relative; display: inline-block; max-width: 100%; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.8); border: 1px solid #999; border-radius: 50%;
  width: 34px; height: 34px; font-size: 22px; line-height: 30px; padding: 0;
  cursor: pointer; opacity: .75; }
.photo-nav:hover { opacity: 1; }
.photo-nav.prev { left: 6px; }
.photo-nav.next { right: 6px; }
.photo-count { position: absolute; right: 8px; bottom: 6px;
  background: rgba(255,255,255,.8); padding: 0 5px; border-radius: 3px; }
.shuffle-card .verdicts button { font-size: 14px; padding: 6px 18px; margin: 6px 8px 0; }

/* catalog grid views (founder 2026-08-15: list / grid / big toggle) */
ul.cards { list-style: none; margin: 8px 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
ul.cards.cards-big { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
ul.cards li { border: 1px solid var(--line); padding: 6px; }
.card-img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block;
  background: #f4f4f4; }
.card-noimg { display: block; }
.card-meta { font-size: 0.85em; line-height: 1.3; padding-top: 4px;
  display: flex; flex-direction: column; gap: 2px; }

/* item page: original + standardized side by side, large (founder
   2026-08-15); image-orientation is explicit so raw uploads honor
   their EXIF rotation in every browser */
.item-images { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.item-images figure { margin: 0; flex: 1 1 340px; max-width: 760px; }
.item-images figcaption { font-size: 0.85em; color: var(--muted, #666); padding-bottom: 3px; }
.item-images img { width: 100%; height: auto; border: 1px solid #999;
  image-orientation: from-image; }

/* lightbox: native dialog, Esc/click closes */
dialog#lightbox { border: none; background: transparent; padding: 0;
  max-width: 96vw; max-height: 96vh; }
dialog#lightbox::backdrop { background: rgba(0,0,0,0.82); }
dialog#lightbox img { max-width: 94vw; max-height: 92vh; display: block;
  image-orientation: from-image; cursor: zoom-out; }

/* taste meter (shuffle + style pages) */
.taste-meter { margin: 2px 0 10px; }
.taste-meter progress { width: 220px; height: 10px; vertical-align: middle;
  margin-right: 8px; accent-color: #444; }

/* style mood boards: scattered collage, cutouts blend into the canvas */
.board { background: rgb(244,244,244); padding: 18px 14px; margin: 8px 0 18px;
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  justify-content: center; }
.board a { line-height: 0; }
.board img { mix-blend-mode: multiply; max-height: 190px; }
.board-anti { background: rgb(236,238,241); }

/* login */
.bsky-login { margin: 14px 0 10px; }
.bsky-button { display: inline-flex; align-items: center; gap: 8px; font-size: 15px;
  padding: 8px 16px; background: #1185fe; color: #fff; border: 1px solid #0b6ed6;
  border-radius: 4px; cursor: pointer; }
.bsky-button:hover { background: #0b6ed6; }
.other-server { margin: 8px 0 14px; }
.other-server summary { cursor: pointer; }
.other-server form { margin-top: 8px; }

/* photo galleries on catalog cards: smaller arrows, only on hover */
.cards .photo-box { display: block; }
.cards .photo-nav { width: 26px; height: 26px; font-size: 18px; line-height: 22px; opacity: 0; }
.cards li:hover .photo-nav, .cards .photo-nav:focus { opacity: .85; }
.cards .photo-count { font-size: 11px; }

/* how-it-works screenshots and the on-page affiliate disclosure line */
img.shot { max-width: 100%; border: 1px solid var(--line); }
.disclosure { margin: 2px 0 10px; }