/* Ethos chan — Option B, the Ethos-native board.
   Layers over chan.css. Same chan skeleton (bump order, post numbers, >>quotes, greentext, per-thread IDs,
   density, no avatars); the surface is Ethos: elevation steps instead of borders, radius-lg containers,
   real buttons, Queens headings, 14px body. Dark-first like the rest of Ethos. */

.chan.modern {
  --chan-radius: var(--ethos-radius-lg, 8px);
  --chan-border: transparent;
  font-size: 14px;
  line-height: 22px;
}
.chan.modern .wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* Top bar replaces the bracket nav and the banner */
.chan.modern .topbar { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--chan-reply); }
.chan.modern .topbar .nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.chan.modern .tb {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--ethos-radius-md, 6px);
  background: transparent; color: var(--chan-text); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.chan.modern .tb:hover { background: var(--chan-elevated); text-decoration: none; }
.chan.modern .tb.on { background: var(--chan-elevated); }
.chan.modern .tb.icon { width: 32px; padding: 0; justify-content: center; font-size: 18px; }
.chan.modern .slash { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border-radius: var(--ethos-radius-sm); background: var(--chan-elevated); font-family: var(--ethos-font-family-mono); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--chan-text); }

.chan.modern .bhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px 0 16px; }
.chan.modern .bhead h1 { font-family: var(--ethos-font-family-display); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 0; color: var(--chan-text); }
.chan.modern .bhead h1 em, .chan.modern .page h1 em.board { display: inline-flex; align-items: center; vertical-align: middle; height: 28px; padding: 0 9px; margin: 0 6px 6px 0; border-radius: var(--ethos-radius-sm); background: var(--chan-elevated); font-family: var(--ethos-font-family-mono); font-style: normal; font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--chan-text); }
.chan.modern .bhead .tagline { font-size: 14px; color: var(--chan-muted); margin-top: 6px; }
.chan.modern .announce { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--chan-reply); border-radius: var(--chan-radius); color: var(--chan-text); font-size: 13px; text-align: left; margin: 0 0 6px; }

/* Posts */
.chan.modern .thread { padding: 0; }
.chan.modern .tgroup { padding: 20px 0 22px; border-top: 1px solid var(--ethos-border-split); }
.chan.modern .tgroup.first { border-top: 0; padding-top: 6px; }
.chan.modern .op { padding: 0; }
.chan.modern .nameline { font-size: 12px; line-height: 20px; gap: 2px 8px; align-items: center; }
.chan.modern .subject { display: block; width: 100%; font-family: var(--ethos-font-family-display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--chan-text); margin-bottom: 4px; }
.chan.modern .name { font-weight: 600; color: var(--chan-name); }
.chan.modern .idpill { font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: var(--ethos-radius-sm, 4px); }
.chan.modern .time, .chan.modern .no, .chan.modern .no .n2 { color: var(--chan-muted); }
.chan.modern .no a { color: var(--chan-muted); font-family: var(--ethos-font-family-mono); }
.chan.modern .no a:hover { color: var(--chan-link); }
.chan.modern .menu { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--ethos-radius-sm); font-size: 16px; color: var(--chan-muted); }
.chan.modern .menu:hover { background: var(--chan-elevated); color: var(--chan-text); }
.chan.modern .ctrls { margin-left: auto; gap: 2px; align-items: center; }
.chan.modern .br::before, .chan.modern .br::after { content: none; }
.chan.modern .br { font-size: 12px; font-weight: 500; }
.chan.modern .backlinks { gap: 8px; }
.chan.modern .backlinks .ql { font-family: var(--ethos-font-family-mono); font-size: 11px; color: var(--chan-muted); text-decoration: none; }
.chan.modern .backlinks .ql:hover { color: var(--chan-link); }
.chan.modern .ql { text-decoration: none; font-weight: 500; }
.chan.modern .ql:hover { text-decoration: underline; }
.chan.modern .ql.dead { text-decoration: line-through; font-weight: 400; }
.chan.modern .msg { margin: 8px 0 0; font-size: 14px; line-height: 22px; max-width: 76ch; }
.chan.modern .filetext { font-size: 12px; color: var(--chan-muted); margin: 6px 0 0; }
.chan.modern .thumb { float: left; margin: 6px 16px 6px 0; }
.chan.modern .reply .thumb { margin: 4px 14px 4px 0; }
.chan.modern .ph { border: 0; border-radius: var(--chan-radius); background: var(--chan-elevated); color: var(--chan-muted); }
.chan.modern .op .ph { background: var(--chan-reply); }
.chan.modern .rc { margin: 8px 0 0; gap: 0; }
.chan.modern .side { display: none; }
.chan.modern .reply { width: 100%; border: 0; border-radius: var(--chan-radius); background: var(--chan-reply); padding: 10px 14px 12px; }
.chan.modern .reply.hl { background: var(--chan-elevated); }
.chan.modern .reply.you-post { outline: 1px solid color-mix(in srgb, var(--chan-link) 40%, transparent); outline-offset: -1px; }
.chan.modern .reply .msg { margin: 6px 0 0; }
.chan.modern .omitted { margin: 10px 0 0; font-size: 12px; display: flex; gap: 10px; align-items: center; }
.chan.modern .hidden-post { font-size: 12px; }
.chan.modern .preview { border-radius: var(--chan-radius); box-shadow: var(--ethos-shadow-card); }

/* Stats, pager, footer */
.chan.modern .statsbar { border: 0; background: var(--chan-reply); border-radius: var(--chan-radius); padding: 10px 14px; gap: 6px 18px; margin-top: 12px; }
.chan.modern .tagw { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ethos-radius-sm); background: color-mix(in srgb, var(--chan-warning) 18%, transparent); color: var(--chan-warning); font-size: 12px; font-weight: 500; }
.chan.modern .pager { padding: 18px 0 8px; gap: 6px; }
.chan.modern .pages { background: transparent; border: 0; padding: 0; gap: 4px; }
.chan.modern .pages a, .chan.modern .pages .cur { display: inline-flex; min-width: 32px; height: 32px; padding: 0 6px; align-items: center; justify-content: center; border-radius: var(--ethos-radius-md); color: var(--chan-text); font-size: 13px; font-weight: 500; text-decoration: none; }
.chan.modern .pages a:hover { background: var(--chan-elevated); }
.chan.modern .pages .cur { background: var(--chan-link); color: var(--ethos-text-on-primary); }
.chan.modern .foot { border: 0; padding: 32px 16px 40px; }

/* Form */
.chan.modern .mf { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: var(--chan-reply); border-radius: var(--chan-radius); margin: 6px 0 22px; }
.chan.modern .mf .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Segmented control — the DS class assumes non-button children, so reset the UA button styles everywhere */
.chan.modern .e-segmented { background: var(--chan-sunken); border-radius: var(--ethos-radius-md); padding: 2px; gap: 2px; }
.chan.modern .e-segmented .seg {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; outline: 0; box-shadow: none; cursor: pointer;
  background: transparent; color: var(--chan-muted); font: inherit; font-size: 13px; font-weight: 500; line-height: 20px;
  padding: 4px 12px; border-radius: var(--ethos-radius-sm);
}
.chan.modern .e-segmented .seg:hover { color: var(--chan-text); }
.chan.modern .e-segmented .seg.active { background: var(--chan-elevated); color: var(--chan-text); }
.chan.modern .e-segmented .seg:focus-visible { outline: 2px solid var(--chan-link); outline-offset: -2px; }
.chan.modern .mf .e-segmented, .chan.modern .qr .e-segmented { background: var(--chan-sunken); }
.chan.modern select.min { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
.chan.modern .min { height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--ethos-radius-md); background: var(--chan-elevated); color: var(--chan-text); font: inherit; font-size: 14px; min-width: 0; }
.chan.modern textarea.min { height: auto; min-height: 96px; padding: 7px 10px; width: 100%; resize: vertical; line-height: 22px; }
.chan.modern .min:focus { outline: 0; border-color: var(--chan-link); }
.chan.modern .min::placeholder { color: var(--ethos-text-placeholder); }
.chan.modern .min:disabled { color: var(--ethos-text-faint); }
.chan.modern .chk { font-size: 13px; gap: 6px; }
.chan.modern .chk input { width: 14px; height: 14px; }
.chan.modern .help { font-size: 12px; }

/* Quick reply and menus */
.chan.modern .qr { width: 420px; border: 0; border-radius: var(--ethos-radius-xl, 12px); background: var(--chan-elevated); box-shadow: var(--ethos-shadow-card); overflow: hidden; }
.chan.modern .qr .qrhead { background: transparent; border-bottom: 1px solid var(--ethos-border-split); padding: 8px 12px; font-size: 13px; }
.chan.modern .qr .qrbody { padding: 10px 12px 12px; gap: 8px; }
.chan.modern .qr .min { background: var(--chan-reply); }
.chan.modern .pmenu { border: 0; border-radius: var(--ethos-radius-md); background: var(--chan-elevated); box-shadow: var(--ethos-shadow-card); padding: 4px; min-width: 200px; }
.chan.modern .pmenu button, .chan.modern .pmenu a { border-radius: var(--ethos-radius-sm); padding: 6px 10px; font-size: 13px; }
.chan.modern .pmenu button:hover, .chan.modern .pmenu a:hover { background: var(--chan-reply); }
.chan.modern a.e-btn, .chan.modern a.e-btn:hover { text-decoration: none; }

/* Static pages, tables, dialogs, catalog */
.chan.modern .page { max-width: 760px; padding: 24px 16px 36px; gap: 14px; }
.chan.modern .page h1 { font-size: 36px; line-height: 1.1; color: var(--chan-text); }
.chan.modern .page h1 em { font-style: normal; color: var(--chan-subject); }
.chan.modern .page h2 { font-size: 22px; margin-top: 14px; }
.chan.modern .page p, .chan.modern .page li { font-size: 14px; line-height: 22px; }
.chan.modern .page ol, .chan.modern .page ul { gap: 6px; }
.chan.modern .box { border: 0; border-radius: var(--chan-radius); padding: 14px 16px; background: var(--chan-reply); }
.chan.modern .box.quiet { background: transparent; padding: 0; }
.chan.modern table.t { font-size: 13px; }
.chan.modern table.t th, .chan.modern table.t td { border: 0; border-bottom: 1px solid var(--ethos-border-split); padding: 9px 10px; line-height: 20px; }
.chan.modern table.t th { background: transparent; color: var(--chan-muted); font-weight: 500; font-size: 12px; }
.chan.modern table.t tr:last-child td { border-bottom: 0; }
.chan.modern .tablebox { background: var(--chan-reply); border-radius: var(--chan-radius); padding: 4px 6px; overflow-x: auto; }
.chan.modern .steps { font-size: 13px; gap: 4px 8px; }
.chan.modern .kv { font-size: 13px; gap: 8px 20px; }
.chan.modern .center { gap: 12px; }
.chan.modern .center h1 { font-size: 36px; line-height: 1.1; color: var(--chan-text); }
.chan.modern .center p { font-size: 14px; line-height: 22px; }
.chan.modern .errline { font-size: 13px; }
.chan.modern .counter { font-size: 12px; }
.chan.modern .dialog { border: 0; border-radius: var(--ethos-radius-xl, 12px); background: var(--chan-elevated); box-shadow: var(--ethos-shadow-card); width: 460px; font-size: 13px; }
.chan.modern .dialog .dhead { background: transparent; border-bottom: 1px solid var(--ethos-border-split); padding: 12px 16px; font-size: 15px; font-weight: 600; }
.chan.modern .dialog .dbody { padding: 14px 16px; gap: 10px; }
.chan.modern .dialog .dbody p { font-size: 13px; line-height: 20px; }
.chan.modern .dialog .dfoot { padding: 4px 16px 16px; gap: 8px; }
.chan.modern .dialog .chk { padding: 6px 8px; border-radius: var(--ethos-radius-sm); }
.chan.modern .dialog .chk:hover { background: var(--chan-reply); }
.chan.modern .catbar { justify-content: flex-start; padding: 0 0 16px; gap: 8px 14px; }
.chan.modern .catgrid { padding: 0 0 24px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(196px, 100%), 1fr)); }
.chan.modern .tile { background: var(--chan-reply); border-radius: var(--chan-radius); padding: 10px; text-align: left; align-items: stretch; gap: 6px; font-size: 12px; line-height: 18px; color: var(--chan-text); text-decoration: none; }
.chan.modern .tile:hover { background: var(--chan-elevated); text-decoration: none; }
.chan.modern .tile .ph { width: 100%; height: 140px; background: var(--chan-elevated); }
.chan.modern .tile:hover .ph { background: var(--chan-sunken); }
.chan.modern .tile .meta { color: var(--chan-muted); font-weight: 500; font-size: 11px; }
.chan.modern .tile .subj { font-family: var(--ethos-font-family-display); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--chan-text); }
.chan.modern .tile .teaser { color: var(--ethos-text-body); max-height: 5.4em; }
.chan.modern .arow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 70px 150px 300px; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--chan-radius); }
.chan.modern .arow:hover { background: var(--chan-reply); }
.chan.modern .arow.head { color: var(--chan-muted); font-size: 12px; font-weight: 500; padding-top: 0; padding-bottom: 6px; }
.chan.modern .arow.head:hover { background: transparent; }
.chan.modern .status { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.chan.modern .status.ok { color: var(--chan-text); }
.chan.modern .status.pending { color: var(--chan-warning); }
.chan.modern .status.purged { color: var(--chan-muted); }
.chan.modern .queue-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 24px; padding: 16px; background: var(--chan-reply); border-radius: var(--chan-radius); }
.chan.modern .queue-item .reply { background: var(--chan-elevated); }
.chan.modern .setrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--ethos-border-split); }
.chan.modern .setrow:last-child { border-bottom: 0; }
.chan.modern .setrow .lead { font-weight: 600; font-size: 14px; }
.chan.modern .ei.lg { font-size: 20px; }