/* NewsHub UI. Colours come only from nukrax.css tokens. No gradients, no glows except the input focus halo. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--nukrax-color-bg-page);
  color: var(--nukrax-color-text-primary);
  font: 300 15px/1.55 var(--nukrax-font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--nukrax-font-mono); }
.muted { color: var(--nukrax-color-text-muted-accessible); }
.label {
  font: 400 11px/1.2 var(--nukrax-font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--nukrax-color-text-muted-accessible);
}

/* ---------- controls ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
.btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--nukrax-color-border-default);
  background: var(--nukrax-color-surface-control);
  color: var(--nukrax-color-text-primary);
  border-radius: 8px; padding: 8px 14px; font-weight: 400; line-height: 1.2;
}
.btn.primary {
  background: var(--nukrax-color-button-primary-bg);
  border-color: var(--nukrax-color-button-primary-bg);
  color: var(--nukrax-color-text-inverse);
  font-weight: 500;
}
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.danger { background: var(--nukrax-color-button-destructive-bg); border-color: var(--nukrax-color-button-destructive-bg); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--nukrax-color-surface-control-hover); border-color: var(--nukrax-color-border-hover); }
  .btn.primary:hover { background: var(--nukrax-color-button-primary-bg-hover); border-color: var(--nukrax-color-button-primary-bg-hover); }
  .link:hover, .nav a:hover { color: var(--nukrax-color-link-hover); }
  .link:hover { text-decoration-color: var(--nukrax-color-link-underline-hover); }
  .card:hover { border-color: var(--nukrax-color-border-hover); }
  .chip:hover:not([aria-pressed="true"]) { background: var(--nukrax-color-surface-hover); }
}
.btn:active { background: var(--nukrax-color-surface-control-pressed); }
.btn.primary:active { background: var(--nukrax-color-button-primary-bg-pressed); border-color: var(--nukrax-color-button-primary-bg-pressed); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--nukrax-color-surface-disabled); border-color: var(--nukrax-color-border-subtle);
  color: var(--nukrax-color-text-disabled); cursor: not-allowed;
}
.btn.primary:disabled { background: var(--nukrax-color-button-primary-bg-disabled); color: var(--nukrax-color-button-primary-text-disabled); }
:focus-visible { outline: 2px solid var(--nukrax-color-focus-ring); outline-offset: 2px; }

input[type="text"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  background: var(--nukrax-color-surface-input);
  border: 1px solid var(--nukrax-color-border-input);
  border-radius: 8px; padding: 9px 12px;
}
input::placeholder, textarea::placeholder { color: var(--nukrax-color-text-placeholder); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 4px var(--nukrax-color-accent-glow); /* the one allowed glow: input focus halo */
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
textarea.code, input.code { font: 400 13px/1.55 var(--nukrax-font-mono); }
select { appearance: none; padding-right: 28px; background-image: none; }
label.field { display: grid; gap: 6px; }
label.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--nukrax-color-text-accent); }

.link { color: var(--nukrax-color-link); text-decoration: underline; text-decoration-color: var(--nukrax-color-border-strong); text-underline-offset: 3px; }
a { color: inherit; }

/* ---------- login ---------- */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.panel {
  width: min(400px, 100%);
  background: var(--nukrax-color-surface-base);
  border: 1px solid var(--nukrax-color-border-default);
  border-radius: 12px; padding: 28px;
}
.panel.float { box-shadow: 0 12px 32px -8px var(--nukrax-color-shadow-overlay); } /* the one floating-panel shadow */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.mark { width: 28px; height: 26px; color: var(--nukrax-color-accent-mark); flex: none; }
.login-wrap h1 { font-weight: 300; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; margin: 26px 0 6px; }
.stack { display: grid; gap: 14px; }
.stack.tight { gap: 10px; }
.msg { border: 1px solid; border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.msg.error { color: var(--nukrax-color-status-error-text); background: var(--nukrax-color-status-error-bg); border-color: var(--nukrax-color-status-error-border); }
.msg.warn { color: var(--nukrax-color-status-warning-text); background: var(--nukrax-color-status-warning-bg); border-color: var(--nukrax-color-status-warning-border); }
.msg.ok { color: var(--nukrax-color-status-success-text); background: var(--nukrax-color-status-success-bg); border-color: var(--nukrax-color-status-success-border); }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 224px 1fr; height: 100%; }
.rail {
  background: var(--nukrax-color-bg-recessed);
  border-right: 1px solid var(--nukrax-color-border-default);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 22px; min-height: 0;
}
.nav { display: grid; gap: 2px; }
.nav a {
  display: block; padding: 9px 12px 9px 14px; border-radius: 8px; text-decoration: none; cursor: pointer;
  color: var(--nukrax-color-text-muted-accessible); position: relative;
}
.nav a[aria-current="page"] { background: var(--nukrax-color-surface-selected); color: var(--nukrax-color-text-primary); font-weight: 400; }
.nav a[aria-current="page"]::before { /* thin accent signal on the selected item */
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--nukrax-color-accent-mark);
}
.rail-foot { margin-top: auto; display: grid; gap: 8px; font-size: 13px; }
.main { overflow: auto; min-width: 0; }
.page { max-width: 1040px; margin: 0 auto; padding: 28px 32px 64px; display: grid; gap: 22px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h2 { font-weight: 300; font-size: 30px; letter-spacing: -.02em; line-height: 1.15; }
.status { display: flex; align-items: center; gap: 8px; font: 400 12px var(--nukrax-font-mono); color: var(--nukrax-color-text-muted-accessible); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nukrax-color-status-success-text); }
.dot.busy { background: var(--nukrax-color-status-warning-text); }
.dot.err { background: var(--nukrax-color-status-error-text); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .grow { flex: 1 1 220px; }
.seg { display: inline-flex; border: 1px solid var(--nukrax-color-border-default); border-radius: 8px; overflow: hidden; }
.chip { appearance: none; cursor: pointer; border: 0; background: transparent; padding: 7px 14px; font-weight: 400; font-size: 14px; color: var(--nukrax-color-text-muted-accessible); }
.chip + .chip { border-left: 1px solid var(--nukrax-color-border-default); }
.chip[aria-pressed="true"] { background: var(--nukrax-color-surface-selected); color: var(--nukrax-color-text-primary); }
.chip:active { background: var(--nukrax-color-surface-pressed); }

/* ---------- news ---------- */
.list { display: grid; gap: 12px; }
.card {
  background: var(--nukrax-color-surface-base);
  border: 1px solid var(--nukrax-color-border-default);
  border-radius: 12px; padding: 12px 12px 16px; display: grid; gap: 12px; overflow: hidden;
}
.card-body { display: grid; gap: 8px; padding: 0 6px; }
.thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 7; max-height: 200px; border-radius: 8px; overflow: hidden;
  background: var(--nukrax-color-bg-recessed); border: 1px solid var(--nukrax-color-border-subtle);
}
.thumb .mark { position: absolute; inset: 0; margin: auto; width: 54px; height: 50px; opacity: .55; color: var(--nukrax-color-text-muted-accessible); }
.thumb .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--nukrax-color-bg-recessed); }
.sect { margin-top: 6px; }
.empty.slim { padding: 22px 0; }
.nav a.ext { text-decoration: none; }
/* No scrollbars anywhere: scrolling still works with wheel, touch and keys. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
.card h3 { font-weight: 500; font-size: 18px; line-height: 1.3; letter-spacing: -.005em; }
.card .sum { color: var(--nukrax-color-text-secondary); font-size: 14.5px; }
.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 400 12px var(--nukrax-font-mono); color: var(--nukrax-color-text-muted-accessible); }
.badge { border: 1px solid; border-radius: 999px; padding: 1px 9px; font: 700 11px var(--nukrax-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.badge.breaking { color: var(--nukrax-color-status-error-text); background: var(--nukrax-color-status-error-bg); border-color: var(--nukrax-color-status-error-border); }
.badge.major { color: var(--nukrax-color-text-accent); background: var(--nukrax-color-accent-soft); border-color: var(--nukrax-color-accent-border); }
.badge.notable { color: var(--nukrax-color-text-secondary); background: var(--nukrax-color-surface-tag); border-color: var(--nukrax-color-border-default); }
.new { color: var(--nukrax-color-status-success-text); font: 700 11px var(--nukrax-font-mono); letter-spacing: .08em; }
.empty { text-align: center; color: var(--nukrax-color-text-muted-accessible); padding: 64px 0; }

/* ---------- math + scripts ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.box { background: var(--nukrax-color-surface-base); border: 1px solid var(--nukrax-color-border-default); border-radius: 12px; padding: 18px; display: grid; gap: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { cursor: pointer; border: 1px solid var(--nukrax-color-border-default); background: var(--nukrax-color-surface-tag); border-radius: 999px; padding: 3px 11px; font: 400 12px var(--nukrax-font-mono); color: var(--nukrax-color-text-secondary); }
.tag:active { background: var(--nukrax-color-surface-pressed); }
.result { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--nukrax-color-border-subtle); }
.result:first-child { border-top: 0; padding-top: 0; }
.result .val { font: 400 17px/1.4 var(--nukrax-font-mono); word-break: break-word; }
pre.out { margin: 0; padding: 12px; border-radius: 8px; background: var(--nukrax-color-bg-recessed); border: 1px solid var(--nukrax-color-border-default); font: 400 13px/1.5 var(--nukrax-font-mono); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
pre.out.err { color: var(--nukrax-color-code-string); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--nukrax-color-text-muted-accessible); } .kv dd { margin: 0; font-family: var(--nukrax-font-mono); }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--nukrax-color-border-default); }
  .nav { display: flex; } .rail-foot { margin: 0 0 0 auto; display: flex; }
  .cols, .row2 { grid-template-columns: 1fr; }
  .page { padding: 20px 16px 48px; }
}

.note { font-size: 13.5px; }
.pre { white-space: pre-wrap; }
textarea.tall { min-height: 240px; }

.who { font: 400 14px var(--nukrax-font-mono); color: var(--nukrax-color-text-secondary); word-break: break-all; }

/* ---------- live feed: sort, filters, new stories ---------- */
.toolbar.sub { gap: 14px; }
.inline { display: inline-flex; align-items: center; gap: 8px; }
.inline select { width: auto; padding: 6px 10px; }
.btn.small { min-width: 30px; }
.dot.live { animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.fpanel[hidden] { display: none; }
.fpanel {
  background: var(--nukrax-color-surface-overlay); border: 1px solid var(--nukrax-color-border-default);
  border-radius: 12px; padding: 14px 16px; display: grid; gap: 12px; box-shadow: 0 12px 32px -8px var(--nukrax-color-shadow-overlay);
}
.frow { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
.frow.end { align-items: center; grid-template-columns: auto 1fr; }
.frow .label { padding-top: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.pill { border: 1px solid var(--nukrax-color-border-default); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.chip.pill + .chip.pill { border-left: 1px solid var(--nukrax-color-border-default); }
.small-note { font-size: 12px; }
.kv2 { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px 12px; align-items: center; font-size: 13.5px; }
kbd {
  font: 400 12px var(--nukrax-font-mono); border: 1px solid var(--nukrax-color-border-default); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 7px; background: var(--nukrax-color-surface-control); color: var(--nukrax-color-text-primary);
}

.newpill {
  position: sticky; top: 10px; z-index: 5; justify-self: center; cursor: pointer;
  background: var(--nukrax-color-button-primary-bg); color: var(--nukrax-color-text-inverse);
  border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 500; font-size: 13px;
}
.newpill[hidden] { display: none; }

.star { appearance: none; border: 0; background: transparent; cursor: pointer; margin-left: auto; font-size: 17px; line-height: 1; padding: 2px 4px; color: var(--nukrax-color-text-muted-accessible); }
.star[aria-pressed="true"] { color: var(--nukrax-color-text-accent); }
.card.read h3 .link { color: var(--nukrax-color-text-muted-accessible); }
.card.sel { border-color: var(--nukrax-color-accent-border); outline: 1px solid var(--nukrax-color-accent-border); }
.card.enter { animation: story-in .55s cubic-bezier(.2, .8, .2, 1) both, story-flash 1.6s ease-out both; }
@keyframes story-in { from { opacity: 0; transform: translateY(-16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes story-flash { from { border-color: var(--nukrax-color-text-accent); } to { border-color: var(--nukrax-color-border-default); } }
@media (prefers-reduced-motion: reduce) { .card.enter, .dot.live { animation: none; } }
@media (max-width: 720px) { .frow { grid-template-columns: 1fr; } .frow .label { padding-top: 0; } }