/* 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); }
.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; }