/* ==========================================================================
iDontNews — Dark Green Theme + Controls (stacked layout)
Maintainer notes:
- All theme colors are centralized in :root CSS variables.
- “Action” buttons (Expand/Collapse All) and Sources toggle have separate
palettes so they can be themed independently of the main CTA button.
- Topic list is a single column (stacked). Main content width is 80%.
- Summary includes a hint that toggles (“Click to see what’s up …” / “Collapse Topic”).
- This sheet uses italics selectively (honors user preference: italics over bold for body).
========================================================================== */

/* ---------------------------
Global theme variables
--------------------------- */
/* <Removed> */

/* ---------------------------
Base resets & typography
--------------------------- */
*{
  box-sizing:border-box;

}

/* Global document typography and background. */
html,body{
  height:100%;

}

body{

  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter,
  "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  background:linear-gradient(180deg,var(--bg),#0d1311);
  /* soft dark gradient */
  color:var(--text);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

}

a{

  color:var(--accent-3);
  /* bright green links */
  text-decoration:none;

}

a:hover{
  text-decoration:underline;

}

/* ---------------------------
Main layout container
--------------------------- */
/* Main content wrapper. Sets width and column rhythm. */
main{

  /* Constrain content column to 80% of viewport width */
  width:80%;
  max-width:none;
  /* remove built-in max-width limits */
  margin:0 auto;
  /* horizontally center the column */
  padding:0 16px 48px;
  /* side breathing room + bottom space */

}

/* ---------------------------
Site header (title/subtitle)
--------------------------- */
/* Site header area (title + tagline). */
header{

  width:80%;
  /* match main’s width for visual rhythm */
  margin:28px auto 8px;
  padding:16px;
  background:var(--header-bg);
  /* customize or keep transparent */
  text-align:left;
  border-radius:14px;

}

header h1{

  margin:0 0 4px 0;
  font-size:2rem;
  letter-spacing:.5px;
  color:var(--header-title);
  /* independent header title color */

}

header p{

  margin:0 0 16px 0;
  color:var(--header-subtitle);
  /* independent subtitle color */

}

header em{
  font-style:italic;

}

/* maintain italic style in tagline */

/* ---------------------------
Expand/Collapse All controls
(Option A: align with left edge of topic cards)
--------------------------- */
.topics-controls{

  width:100%;
  /* inherit main’s width */
  margin:8px 0 16px;
  /* simple vertical spacing */
  padding:0;
  /* <-- aligns with card edge (no extra left pad) */
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  /* left-aligned buttons */

}

/* Control bar button look/feel */
.act-btn{

  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--action-btn-border);
  background: var(--action-btn-bg);
  color: var(--action-btn-text);
  font-weight:700;
  /* stronger label is OK on controls */
  letter-spacing:.3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,207,138,.25);
  /* warm glow */
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;

}

.act-btn:hover{
  transform: translateY(-1px);

}

.act-btn:active{
  transform: translateY(0);

}

.act-btn:focus{

  outline:none;
  box-shadow:0 0 0 3px rgba(255,207,138,.35);
  /* accessible focus ring */

}

/* ---------------------------
Topics list (stacked layout)
--------------------------- */
/* The list container that holds all topic 'cards'. */
ul.topics{

  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  /* stacked flex column */
  flex-direction:column;
  gap:14px;
  /* vertical space between cards */

}

/* ---------------------------
Topic “card” container
--------------------------- */
/* Single topic 'card' container. */
li.topic{

  width:100%;
  background:linear-gradient(180deg,var(--panel),var(--muted));
  /* soft depth */
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  /* lift */
  overflow:hidden;

}

/* ---------------------------
<details> and <summary> styling
--------------------------- */
/* The HTML <details> element wrapper for each topic (collapsible). */
details{

  padding: var(--card-pad);
  /* inner padding shared via variable */

}

/* The clickable summary line for each topic (title + meta + badge). */
summary{

  cursor:pointer;
  list-style:none;
  /* hide marker in Firefox */
  margin:0 0 8px 0;
  font-size: var(--topic-title-size);
  font-weight: var(--topic-title-weight);
  /* headings OK to be bold */
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;

}

/* Hide default disclosure triangle in WebKit */
summary::-webkit-details-marker{
  display:none;

}

/* Topic count “(N sources)” next to the title */
/* The '(N sources)' meta text next to the summary title. */
.meta{

  opacity:.85;
  font-size: var(--topic-meta-size);
  font-weight:400;
  color:var(--subtle);

}

/* Summary hint (customizable: color/size/font) */
/* The 'Click to see what’s up …' / 'Collapse Topic' hint text. */
.collapse-hint{

  color: var(--hint-color);
  font-size: var(--hint-size);
  font-family: var(--hint-font);
  font-style: normal;
  /* monospace looks cleaner upright */
  opacity: 0.95;

}

/* ---------------------------
Section chips (TL;
DR, Briefing)
--------------------------- */
/* Small uppercase label used for 'TL;DR' and 'Briefing'. */
.section-label{

  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--label-color);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  letter-spacing:var(--label-tracking);
  text-transform:uppercase;
  font-style:italic;
  /* keeps your body emphasis preference */
  line-height:1;
  padding:0;
  /* no pill padding */
  border:0;
  /* no outline */
  background:transparent;
  /* no chip background */

}

/* Content blocks (around TL;
DR/Briefing) */
/* Container box around TL;DR and Briefing sections. */
.block{

  padding:10px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:rgba(26,33,30,.35);

}

/* TL;
DR text spacing/legibility */
/* The TL;DR paragraph text. */
p.tldr{

  margin:6px 0 0 0;
  line-height:1.5;
  color:var(--text);

}

/* Divider above the lazily loaded detail area */
/* Container that holds the lazily loaded Briefing & Sources. */
.detail{

  margin-top:12px;
  padding-top:6px;
  border-top:1px solid var(--border);

}

/* ---------------------------
Main CTA button (Show/Hide briefing & sources)
--------------------------- */
/* Button that toggles the 'Briefing & Sources' details. */
button.more{

  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--accent-2);
  background:linear-gradient(180deg,
  rgba(31,138,107,.25), rgba(31,138,107,.10));
  color:var(--text);
  font-weight:600;
  letter-spacing:.3px;
  backdrop-filter:blur(6px);
  /* modern glassy feel (supported browsers) */
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 6px 18px var(--ring);
  display:inline-flex;
  /* left-aligned, not full-width */
  align-items:center;
  justify-content:center;
  margin-left:0;

}

button.more:hover{

  transform: translateY(-1px);
  border-color: var(--accent-3);

}

button.more:active{
  transform: translateY(0);

}

button.more:focus{

  outline:none;
  box-shadow:0 0 0 3px var(--ring);

}

/* ---------------------------
Sources accordion (styled like its own CTA)
--------------------------- */
.sources{

  margin-top:12px;

}

/* Summary “button” look for Sources (separate theme vars) */
/* The Sources accordion styling (summary looks like a button). */
.sources summary{

  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--sources-cta-border);
  background: var(--sources-cta-bg);
  color: var(--sources-cta-text);
  font-weight:600;
  letter-spacing:.3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:0 6px 18px var(--ring);

}

.sources[open] summary{
  border-color: var(--accent-3);

}

.sources summary:hover{
  transform: translateY(-1px);

}

/* Source list */
/* List of sources (unordered list). */
.sources ul{

  margin:10px 0 0 0;
  padding-left:18px;

}

/* Individual source rows. */
.sources li{

  margin:6px 0;
  font-size:.95rem;
  /* slightly smaller than body */

}

/* Date part before the URL (e.g., “2025-10-12 14:05 - …”) */
/* The date label in a source row. */
.sources .src-date{

  color:var(--subtle);
  font-style:italic;

}

/* Link part (raw URL as text) */
/* The link (URL) part of a source row. */
.sources a{

  color:var(--accent-3);
  font-size:.95rem;
  /* match line size */

}

/* ---------------------------
Empty state (no topics)
--------------------------- */
/* Empty-state message when there are no topics. */
li.empty{

  padding:18px;
  text-align:center;
  color:var(--subtle);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;

}

/* ---------------------------
Motion preferences
--------------------------- */
/* Accessibility: reduces motion/animations when user prefers less motion. */
@media (prefers-reduced-motion: reduce){

  *{
    transition:none !important;
    animation:none !important;

  }

}

/* === Filter bar & chips === */

/* === Hamburger menu === */

/* === Category badge on topic summary === */
/* Summary row on each topic; flex so the category badge can align right. */
.topic summary{
  display:flex;
  align-items:center;
  gap:.75rem;

}

/* Pill-shaped category badge shown on the right side of the summary. */
.topic .category-badge{
  margin-left:auto;
  font-size:.85rem;
  padding:.15rem .5rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  white-space:nowrap;
  color:var(--text-muted);

}

/* === Tags chip list above TL;
DR === */
/* Row of tags above TL;DR inside an expanded topic. */
.tags-row{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:.4rem 0 .4rem;

}

.tags-row .tag-chip{
  font-size:.8rem;
  padding:.15rem .45rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-1);
  color:var(--text-muted);

}

/* === cleanup: finalize hidden & filterbar rules === */

/* Always hide elements marked as [hidden] */
/* Utility rule to hide elements driven by JS 'hidden' attribute. */
[hidden] {

  display: none !important;

}

/* Fallback layout for filter bar (in case theme file fails to load) */
/* Global filter bar wrapper below the header (sticks to top on scroll). */
.filterbar {

  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  justify-content: center;

}

/* Filter chips */
#filterbar {
  display: flex; 
  flex-wrap: wrap; 
  gap: .4rem; 
  padding: .5rem 1rem; }

#filterbar .chip {
  padding: .25rem .6rem;
  border: 1px solid var(--border, #1e2f29);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--subtle, #bcd5ce);
  font-size: .9rem;
  cursor: pointer;
}

#filterbar .chip.active {
  background: rgba(255,255,255,0.08);
  color: var(--text, #f2f7f5);
  border-color: var(--accent, #1fb287);
}

/* === Disclaimer banner === */
.disclaimer {
  width: 90%;
  margin: 0.75rem auto;
  padding: 0.75rem 1rem 0.6rem;
  background: #3d1517;               /* dark subdued red */
  color: #f4eaea;                    /* light readable text */
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;            /* stack text above buttons */
  gap: 0.5rem;
}

.disclaimer-text {
  margin: 0;
  line-height: 1.35;
  font-size: 0.90rem;
  width: 100%;                       /* span full width minus padding */
  text-align: left;
}

.disclaimer-actions {
  display: flex;
  justify-content: flex-start;         /* align buttons to the right */
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn {
  font: inherit;
  font-size: 0.8rem;          /* slightly smaller text */
  padding: 0.25rem 0.55rem;   /* smaller height + width */
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.btn-accept {
  background: #16a34a;        /* green */
  color: #ecfdf5;
  border-color: rgba(34,197,94,0.5);
  box-shadow: 0 0 6px rgba(34,197,94,0.6); /* smaller glow */
}

.btn-leave {
  background: #b91c1c;        /* red */
  color: #fee2e2;
  border-color: rgba(239,68,68,0.5);
  box-shadow: 0 0 6px rgba(239,68,68,0.6); /* smaller glow */
}

.btn-accept:hover,
.btn-leave:hover {
  filter: brightness(1.05);
}