/* What the live board adds to the design's chan.css and chan-modern.css. */

/* The design canvas's tokens.css names its font stacks --font-ethos-font-family-*; the chan styles read the
   --ethos-font-family-* names the design system's ethos.css uses. */
:root {
  --ethos-font-family-sans: var(--font-ethos-font-family-sans);
  --ethos-font-family-display: var(--font-ethos-font-family-display);
  --ethos-font-family-mono: var(--font-ethos-font-family-mono);
}

body {
  margin: 0;
  background: var(--ethos-bg-base);
}
.chan {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.chan.modern .slash {
  text-decoration: none;
}
.chan.modern .slash:hover {
  text-decoration: none;
  background: var(--chan-sunken);
}
.chan [hidden] {
  display: none !important;
}
.chan .e-segmented .seg:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chan .e-segmented a.seg {
  display: inline-flex;
  align-items: center;
}
.chan .center {
  min-height: 50vh;
}

/* Quick reply floats over the page. */
.chan.modern .qr {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: calc(100vw - 32px);
}
@media (max-width: 600px) {
  .chan.modern .qr {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: var(--ethos-radius-xl, 12px) var(--ethos-radius-xl, 12px) 0 0;
  }
}

/* Hover previews of quoted posts. */
.chan .preview {
  position: fixed;
  z-index: 30;
  max-width: min(560px, calc(100vw - 24px));
  pointer-events: none;
}
.chan .preview .rc {
  margin: 0;
}
.chan .preview .reply {
  background: var(--chan-elevated);
  box-shadow: var(--ethos-shadow-card);
}

/* A post someone jumped to, or one by a highlighted ID. */
.chan .reply.hl,
.chan .post.op.hl {
  background: var(--chan-elevated);
}
.chan .post.op.hl {
  border-radius: var(--chan-radius);
  box-shadow: 0 0 0 8px var(--chan-elevated);
}
.chan .reply:target {
  background: var(--chan-elevated);
}
.chan .flash {
  animation: flash 1.2s ease-out 1;
}
@keyframes flash {
  from {
    background: var(--chan-elevated);
  }
}

/* (You) */
.chan .you {
  font-weight: 400;
  color: var(--chan-text);
  margin-left: 2px;
}

/* Post menu */
.chan .pmenu {
  position: absolute;
}

/* Hidden threads on the index */
.chan .tgroup.gone > :not(.hidden-thread) {
  display: none;
}
.chan .hidden-thread {
  font-size: 12px;
  color: var(--chan-muted);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.chan.modern .errline {
  color: var(--chan-error);
}
.chan.modern .mf textarea.min {
  min-height: 120px;
}
@media (max-width: 600px) {
  .chan.modern .topbar {
    padding: 0 8px;
    gap: 2px;
    overflow-x: auto;
  }
  .chan.modern .topbar .nav {
    flex-wrap: nowrap;
    margin-left: 0 !important;
  }
  .chan.modern .topbar .nav:last-child {
    margin-left: auto !important;
  }
  .chan.modern .topbar .tb {
    padding: 0 7px;
  }
  .chan.modern .topbar .ei-ethos-wordmark {
    display: none !important;
  }
  .chan.modern .bhead h1 {
    font-size: 32px;
  }
  .chan.modern .catbar label {
    margin-left: 0 !important;
  }
  .chan.modern .catbar input {
    width: 100% !important;
  }
}

/* In-page notices, in place of the browser's alert box. */
.chan .notice {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 14px;
  align-items: baseline;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--ethos-radius-lg, 8px);
  background: var(--chan-elevated);
  box-shadow: var(--ethos-shadow-card);
  color: var(--chan-text);
  font-size: 13px;
  line-height: 20px;
  border-left: 3px solid var(--chan-error);
}
.chan .notice .br {
  flex: none;
}
.chan.modern .center h1.queens {
  font-family: var(--ethos-font-family-display);
  font-weight: 400;
  max-width: 640px;
}

/* Hide / Reply beside the post menu. The modern theme drops chan brackets but keeps the icon button's 2px gap,
   which runs the words together; padding gives them room and a bigger target. */
.chan.modern .ctrls .br {
  padding: 2px 6px;
  border-radius: var(--ethos-radius-sm);
  line-height: 20px;
}
.chan.modern .ctrls .br:hover {
  background: var(--chan-elevated);
  text-decoration: none;
}