@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

:root {
  --bg: #f6f4ee;
  --surface: #fff;
  --fg: #1c2420;
  --muted: #5d695f;
  --border: #e2ded2;
  --flag-white: #d9d4c6;
  --accent: #00844a;
  --accent-fg: #fff;
  --accent-soft: #e4f2ea;
  --accent-strong: #00693b;
  --warn: #7a4e00;
  --warn-soft: #fdf1d6;
  --danger: #c8323f;
  --danger-soft: #fbe8ea;
  --ring: rgb(0 132 74 / .35);
  --shadow: 0 1px 2px rgb(30 40 30 / .06), 0 6px 18px rgb(30 40 30 / .05);
  --radius: .75rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111513;
    --surface: #1a201d;
    --fg: #e9eeea;
    --muted: #98a59d;
    --border: #2b3530;
    --flag-white: #f2f2f2;
    --accent: #45c486;
    --accent-fg: #06130c;
    --accent-soft: #173225;
    --accent-strong: #45c486;
    --warn: #f0c36a;
    --warn-soft: #3a2f14;
    --danger: #ff7a85;
    --danger-soft: #3b1b20;
    --ring: rgb(69 196 134 / .4);
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 18px rgb(0 0 0 / .25);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #009246 33.33%, var(--flag-white) 33.33% 66.66%, #ce2b37 66.66%);
}

:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
a { color: var(--accent); text-underline-offset: .2em; }

header {
  padding: 1rem max(1rem, calc((100% - 62rem) / 2 + 1rem)) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

h1 { margin: 0; font-size: 1.4rem; letter-spacing: -.02em; }

nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

nav a {
  flex: none;
  padding: .6rem .9rem;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

nav a:hover { color: var(--fg); }
nav a.active { color: var(--accent); border-bottom-color: var(--accent); }

nav #auth {
  margin: 0 0 0 auto;
  padding: .35rem .9rem;
  color: var(--fg);
  font-size: .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

nav #auth:hover { border-color: var(--accent); color: var(--accent); }

nav .session {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: none;
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: .9rem;
}

nav .session a { padding: 0; color: var(--muted); border: 0; }
nav .session a:hover { color: var(--accent); }
nav .session button { padding: .3rem .8rem; font-size: .85rem; }

@media (max-width: 34rem) {
  nav #auth, nav .session { margin: .25rem 0 .5rem auto; }
}

main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
main > section { animation: rise .25s ease both; }
main > section + section { margin-top: 2rem; }

h2 {
  margin: 0 0 .9rem;
  padding-left: .65rem;
  border-left: 4px solid var(--accent);
  font-size: 1.2rem;
  line-height: 1.3;
}

.cards {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.cards li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .35rem .5rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}

.cards li > :not(button, .dm, form.inline, details.confirm) { flex: 1 1 100%; }
.links li > a { font-size: 1.05rem; font-weight: 600; text-decoration: none; }
.links li > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.links li:hover > a { text-decoration: underline; }
.links .dm, .links details { position: relative; z-index: 1; }
section:has(> .links):not(:has(.links li)) { display: none; }
.cards strong { font-size: 1.05rem; }
.cards p { margin: 0; color: var(--muted); }
.cards .meta { font-size: .8rem; }
.cards .price { color: var(--fg); font-size: 1.15rem; font-weight: 700; }
.cards .price[data-free] { color: var(--accent-strong); }
.cards li[data-status="closed"], .cards li[data-status="sold"] { opacity: .72; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.chip, .badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .1rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 999px;
}

.chip { color: var(--muted); background: var(--bg); border-color: var(--border); font-weight: 500; }
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge[data-status="open"] { color: var(--accent-strong); background: var(--accent-soft); }
.badge[data-status="taken"] { color: var(--warn); background: var(--warn-soft); }
.badge[data-status="closed"], .badge[data-status="sold"] { color: var(--muted); background: var(--bg); border-color: var(--border); }
.cards .body { color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.cards button { margin-top: .5rem; padding: .4rem .85rem; font-size: .9rem; }
.cards button:not([type="button"]) { background: var(--surface); border-color: var(--border); color: var(--fg); }
.cards button:not([type="button"]):hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cards button.del:not([type="button"]) { color: var(--danger); }
.cards button.del:not([type="button"]):hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

@media (hover: hover) {
  .cards li:hover { transform: translateY(-2px); border-color: var(--accent); }
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  padding: .5rem 1rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

button:not([type="button"]) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

button:not([type="button"]):hover { background: var(--accent); filter: brightness(1.1); color: var(--accent-fg); }
.dm {
  align-self: flex-start;
  margin-top: .5rem;
  padding: .4rem .85rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
}

.dm:hover { background: var(--accent-soft); }
.del { color: var(--danger); }
.del:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.switch.switch { color: var(--muted); font-size: .9rem; background: none; border-color: var(--border); }
.choices { display: flex; flex-wrap: wrap; gap: .75rem; }
.choices button { padding: .75rem 1.4rem; font-size: 1.05rem; }

form.inline { display: block; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }

.filters a {
  padding: .3rem .85rem;
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.filters a:hover { border-color: var(--accent); color: var(--accent); }
.filters a.active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }

.notice { padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; }

form {
  display: grid;
  gap: .75rem;
  max-width: 38rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

form button { justify-self: start; }

input, select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .5rem;
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }
::placeholder { color: var(--muted); opacity: .8; }
textarea { min-height: 7rem; resize: vertical; }
p > select { width: auto; min-width: 14rem; max-width: 100%; }

details {
  max-width: 38rem;
  margin: 0 0 1.5rem;
  padding: .85rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

summary { color: var(--accent); font-weight: 600; cursor: pointer; }
details form { margin: 1rem 0 0; padding: 0; border: 0; box-shadow: none; }

details.confirm { max-width: none; margin: .5rem 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
details.confirm summary { display: inline-block; padding: .4rem .85rem; color: var(--danger); font-size: .9rem; font-weight: 500; list-style: none; border: 1px solid var(--border); border-radius: 999px; }
details.confirm summary::-webkit-details-marker { display: none; }
details.confirm form { margin-top: .5rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; }
.actions .dm { margin: 0; }

.log {
  display: flex;
  flex-direction: column-reverse;
  height: min(60vh, 32rem);
  min-height: 12rem;
  margin: 0 0 1rem;
  padding: 1rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#log { display: flex; flex-direction: column; gap: .5rem; }

.msg {
  max-width: min(34rem, 85%);
  padding: .5rem .85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem 1rem 1rem .25rem;
}

.msg.mine {
  align-self: flex-end;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  border-radius: 1rem 1rem .25rem 1rem;
}

.msg strong { font-size: .8rem; }
.msg .time { margin-left: .4rem; font-size: .72rem; opacity: .7; }
.msg p { margin: .1rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

form.send, form.search {
  grid-template-columns: 1fr auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

form.send button, form.search button { justify-self: stretch; }
form.search { margin-bottom: 1rem; }
#compose-error { grid-column: 1 / -1; margin: 0; }
#compose-error:empty { display: none; }

.error {
  padding: .75rem 1rem;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: .5rem;
}

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
}

footer { max-width: 62rem; margin: 0 auto; padding: 0 1rem 2rem; color: var(--muted); font-size: .85rem; }
footer a { color: inherit; }

.legal h3 { margin: 1.5rem 0 .4rem; font-size: 1rem; }
.legal p, .legal li { max-width: 46rem; line-height: 1.55; }
.legal ul { padding-left: 1.2rem; }
.legal .dm { margin-top: 0; }

.report { color: var(--muted); font-size: .8rem; }
.msg .report { margin-left: .5rem; }