/* Ethos chan — the chan layer, painted with Ethos DS v2 tokens.
   Light = 4chan Yotsuba B structure on Ethos parchment; dark = Tomorrow mapped onto Ethos ink.
   Only two colours here are chan-specific (greentext, light and dark); everything else is a token. */

.chan {
  --chan-bg: var(--ethos-bg-base);
  --chan-reply: var(--ethos-bg-container);
  --chan-elevated: var(--ethos-bg-elevated);
  --chan-sunken: var(--ethos-bg-sunken);
  --chan-border: color-mix(in srgb, var(--ethos-text-default) 25%, transparent);
  --chan-text: var(--ethos-text-default);
  --chan-muted: var(--ethos-text-muted);
  --chan-subject: var(--ethos-primary-default);
  --chan-name: var(--ethos-success-default);
  --chan-link: var(--ethos-primary-link);
  --chan-green: #445810;
  --chan-error: var(--ethos-danger-default);
  --chan-warning: var(--ethos-warning-default);
  font-family: var(--ethos-font-family-sans);
  font-size: 13px;
  line-height: 1.25;
  color: var(--chan-text);
  background: var(--chan-bg);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.chan.dark, [data-theme="dark"] .chan {
  --chan-green: #B5BD68;
  --chan-border: var(--ethos-border-split);
}
.chan *, .chan *::before, .chan *::after { box-sizing: border-box; }
.chan a { color: var(--chan-link); text-decoration: none; }
.chan a:hover { text-decoration: underline; }
.chan p { margin: 0; }
.chan .mono { font-family: var(--ethos-font-family-mono); }
.chan .muted { color: var(--chan-muted); }
.chan .small { font-size: 12px; }
.chan .queens { font-family: var(--ethos-font-family-display); font-weight: 400; }

/* Bracketed text buttons — [Reply] [Hide] [Report] */
.chan .br {
  display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--chan-link); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.chan .br::before { content: "["; color: var(--chan-text); }
.chan .br::after { content: "]"; color: var(--chan-text); }
.chan .br:hover { text-decoration: underline; }
.chan .br:disabled { color: var(--chan-muted); cursor: default; }

/* Top nav and footer */
.chan .topnav {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 3px 8px; font-size: 12px; border-bottom: 1px solid var(--chan-border);
}
.chan .topnav .grp { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chan .foot {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 24px;
  border-top: 1px solid var(--chan-border); font-size: 12px; color: var(--chan-muted); text-align: center;
}

/* Board header */
.chan .boardhead { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 6px; text-align: center; }
.chan .banner {
  width: 300px; height: 100px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--ethos-color-ink-700); color: var(--ethos-color-paper-800); border: 1px solid var(--chan-border);
}
.chan .boardtitle { font-family: var(--ethos-font-family-display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--chan-subject); margin: 6px 0 0; }
.chan .tagline { font-size: 12px; color: var(--chan-muted); }
.chan .announce { text-align: center; font-size: 12px; color: var(--chan-subject); padding: 6px 8px; }
.chan hr.thr { border: 0; border-top: 1px solid var(--chan-border); margin: 8px 0; }

/* Posts */
.chan .thread { padding: 0 8px; }
.chan .post { position: relative; }
.chan .op { padding: 6px 0 2px; }
.chan .rc { display: flex; align-items: flex-start; gap: 4px; margin: 4px 0; }
.chan .side { color: var(--chan-border); font-size: 11px; line-height: 20px; width: 14px; text-align: center; flex: none; user-select: none; }
.chan .reply {
  background: var(--chan-reply); border: 1px solid var(--chan-border); padding: 4px 8px 6px 6px;
  width: fit-content; max-width: 100%; min-width: 0;
}
.chan .reply.hl { background: var(--chan-elevated); }
.chan .reply.you-post { border-color: color-mix(in srgb, var(--chan-link) 45%, transparent); }
.chan .nameline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 12px; line-height: 18px; }
.chan .subject { font-weight: 700; color: var(--chan-subject); }
.chan .name { font-weight: 700; color: var(--chan-name); }
.chan .name a { color: inherit; }
.chan .trip { font-weight: 400; color: var(--chan-name); }
.chan .you { color: var(--chan-text); font-weight: 400; }
.chan .capcode { font-weight: 700; color: var(--chan-error); }
.chan .idpill {
  display: inline-block; font-family: var(--ethos-font-family-mono); font-size: 10px; line-height: 14px; padding: 0 5px;
  border-radius: 7px; vertical-align: 1px; cursor: pointer;
}
.chan .human { display: inline-flex; width: 11px; height: 11px; vertical-align: -1px; color: var(--chan-text); opacity: .65; cursor: help; }
.chan .human svg { width: 11px; height: 11px; display: block; }
.chan .score { font-weight: 700; display: inline-flex; align-items: center; gap: 1px; }
.chan .time { color: var(--chan-text); }
.chan .no a { color: var(--chan-link); }
.chan .no .n2 { color: var(--chan-text); }
.chan .menu { display: inline; border: 0; background: none; padding: 0 2px; font: inherit; font-size: 10px; color: var(--chan-text); cursor: pointer; line-height: 1; }
.chan .backlinks { display: inline-flex; flex-wrap: wrap; gap: 6px; font-size: 11px; }
.chan .ql { color: var(--chan-link); text-decoration: underline; }
.chan .ql.dead { color: var(--chan-muted); text-decoration: line-through; }
.chan .ctrls { display: inline-flex; gap: 6px; align-items: baseline; }

.chan .filetext { font-size: 12px; margin: 6px 0 0 0; }
.chan .filetext a { color: var(--chan-link); }
.chan .thumb { float: left; margin: 3px 20px 5px 20px; }
.chan .reply .thumb { margin: 3px 20px 5px 0; }
.chan .ph {
  display: flex; align-items: center; justify-content: center; background: var(--chan-sunken);
  border: 1px solid var(--chan-border); color: var(--chan-muted); position: relative; overflow: hidden;
}
.chan .ph svg { width: 28%; height: 28%; opacity: .5; }
.chan .ph.spoiler-img { background: var(--chan-reply); color: var(--chan-text); }
.chan .ph.spoiler-img .ei { font-size: 28px; opacity: .55; }
.chan .msg { margin: 10px 40px 8px 40px; min-width: 0; overflow-wrap: anywhere; }
.chan .reply .msg { margin: 8px 24px 4px 40px; }
.chan .msg br + br { display: block; content: ""; margin-top: 8px; }
.chan .gt { color: var(--chan-green); }
.chan .spoiler { background: var(--chan-text); color: var(--chan-text); }
.chan .spoiler:hover { color: var(--chan-bg); }
.chan .toolong { font-size: 12px; margin-top: 6px; }
.chan .omitted { color: var(--chan-muted); font-size: 12px; margin: 2px 0 2px 20px; }
.chan .omitted .br { font-size: 12px; }
.chan .hidden-post { color: var(--chan-error); opacity: .65; font-size: 12px; display: flex; gap: 8px; align-items: baseline; }
.chan .hidden-post .br::before, .chan .hidden-post .br::after { color: var(--chan-error); }
.chan .clear { clear: both; }

/* Stats bar, pager */
.chan .statsbar {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; padding: 6px 8px;
  border-top: 1px solid var(--chan-border); border-bottom: 1px solid var(--chan-border);
}
.chan .statsbar .warn { color: var(--chan-warning); font-weight: 700; }
.chan .pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; font-size: 12px; }
.chan .pages { display: inline-flex; gap: 6px; padding: 3px 6px; background: var(--chan-reply); border: 1px solid var(--chan-border); }
.chan .pages .cur { font-weight: 700; color: var(--chan-text); }

/* Forms — 4chan's table form at Ethos's small-radius input style, 22px tall */
.chan .pf { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px; width: 100%; max-width: 560px; margin: 8px auto; font-size: 12px; }
.chan .pf .lbl { display: flex; align-items: center; padding: 0 8px; height: 22px; background: var(--chan-reply); border: 1px solid var(--chan-border); font-weight: 700; color: var(--chan-text); }
.chan .pf .lbl.tall { height: auto; align-items: flex-start; padding-top: 3px; }
.chan .pf .cell { display: flex; gap: 6px; align-items: center; min-width: 0; flex-wrap: wrap; }
.chan .in {
  height: 22px; padding: 0 6px; border: 1px solid var(--chan-border); border-radius: var(--ethos-radius-sm, 4px);
  background: var(--chan-elevated); color: var(--chan-text); font: inherit; font-size: 12px; min-width: 0;
}
.chan .in:focus { outline: 0; border-color: var(--chan-link); }
.chan .in::placeholder { color: var(--ethos-text-placeholder); }
.chan textarea.in { height: auto; min-height: 96px; padding: 4px 6px; resize: vertical; width: 100%; line-height: 1.3; }
.chan .in.err { border-color: var(--chan-error); }
.chan .in:disabled { color: var(--ethos-text-faint); background: var(--chan-reply); }
.chan .chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.chan .chk input { margin: 0; width: 13px; height: 13px; accent-color: var(--chan-link); }
.chan .help { font-size: 11px; color: var(--chan-muted); }
.chan .errline { font-size: 12px; color: var(--chan-error); }
.chan .toggle-line { text-align: center; font-size: 12px; padding: 6px 0; }
.chan .counter { font-size: 11px; color: var(--chan-muted); font-family: var(--ethos-font-family-mono); }
.chan .counter.hot { color: var(--chan-warning); }

/* Quick reply, dialogs, menus */
.chan .qr {
  position: absolute; width: 380px; background: var(--chan-elevated); border: 1px solid var(--chan-border);
  box-shadow: var(--ethos-shadow-card, 0 2px 8px rgba(0,0,0,.15)); font-size: 12px;
}
.chan .qr .qrhead { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; background: var(--chan-reply); border-bottom: 1px solid var(--chan-border); cursor: move; font-weight: 700; }
.chan .qr .qrbody { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.chan .qr .qrrow { display: flex; gap: 4px; align-items: center; }
.chan .dialog {
  background: var(--chan-elevated); border: 1px solid var(--chan-border); box-shadow: var(--ethos-shadow-card, 0 2px 8px rgba(0,0,0,.15));
  font-size: 12px; width: 420px; max-width: 100%;
}
.chan .dialog .dhead { padding: 5px 8px; background: var(--chan-reply); border-bottom: 1px solid var(--chan-border); font-weight: 700; display: flex; justify-content: space-between; }
.chan .dialog .dbody { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.chan .dialog .dfoot { padding: 6px 12px 10px; display: flex; gap: 12px; justify-content: flex-end; }
.chan .pmenu { position: absolute; background: var(--chan-elevated); border: 1px solid var(--chan-border); box-shadow: var(--ethos-shadow-card, 0 2px 8px rgba(0,0,0,.15)); font-size: 12px; min-width: 150px; z-index: 2; }
.chan .pmenu button, .chan .pmenu a { display: block; width: 100%; text-align: left; padding: 4px 10px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--chan-text); cursor: pointer; }
.chan .pmenu button:hover, .chan .pmenu a:hover { background: var(--chan-reply); text-decoration: none; }
.chan .pmenu .sep { border-top: 1px solid var(--chan-border); margin: 2px 0; }
.chan .preview { position: absolute; z-index: 3; }

/* Catalog */
.chan .catbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: 12px; padding: 4px 8px 10px; }
.chan .catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr)); gap: 14px 10px; padding: 0 8px 16px; }
.chan .tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; font-size: 11px; line-height: 1.3; min-width: 0; }
.chan .tile .ph { width: 150px; height: 150px; }
.chan .tile .meta { font-size: 11px; font-weight: 700; }
.chan .tile .subj { font-weight: 700; color: var(--chan-subject); }
.chan .tile .teaser { max-height: 5.2em; overflow: hidden; }

/* Static pages (rules, join, settings) */
.chan .page { max-width: 720px; margin: 0 auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.chan .page h1 { font-family: var(--ethos-font-family-display); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--chan-subject); margin: 0; }
.chan .page h2 { font-family: var(--ethos-font-family-display); font-weight: 400; font-size: 20px; line-height: 1.2; margin: 10px 0 0; color: var(--chan-text); }
.chan .page p, .chan .page li { font-size: 13px; line-height: 1.4; }
.chan .page ol, .chan .page ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.chan .box { background: var(--chan-reply); border: 1px solid var(--chan-border); padding: 10px 12px; }
.chan table.t { border-collapse: collapse; width: 100%; font-size: 12px; }
.chan table.t th, .chan table.t td { border: 1px solid var(--chan-border); padding: 4px 8px; text-align: left; vertical-align: top; }
.chan table.t th { background: var(--chan-reply); font-weight: 700; }
.chan .fullstate { min-height: 100%; display: flex; flex-direction: column; }
.chan .center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 48px 16px; }
.chan .steps { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--chan-muted); align-items: center; }
.chan .steps .on { color: var(--chan-text); font-weight: 700; }
.chan .steps .done { color: var(--chan-name); }
.chan .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 12px; align-items: baseline; }
.chan .kv dt { color: var(--chan-muted); }
.chan .kv dd { margin: 0; }