/*
 * style.css — Browser UI overrides only.
 *
 * This file controls ONLY the website appearance.
 * PDF styling is entirely separate and lives in api/export.py
 * (_build_html inline CSS for weasyprint, ParagraphStyle objects for reportlab).
 * Editing this file has no effect on exported PDFs.
 *
 * Pico.css v2 handles base layout, forms, buttons, article cards, and the
 * progress bar automatically via semantic HTML. Only add rules here for things
 * Pico doesn't provide or that you want to override.
 */


/* ==========================================================================
   PALETTE TOKENS
   cream · teal · amber · dusty purple
   ========================================================================== */

:root {
  --c-cream-bg:      #fff;   /* page background */
  --c-cream-surface: #DCECE5;   /* card / input surface */
  --c-cream-border:  #D9CDB0;   /* borders */

  --c-teal:          #79B499;   /* primary action */
  --c-teal-hover:    #226C62;
  --c-teal-light:    #D6EDEB;   /* radio checked bg, subtle fills */

  --c-yellow:        #C9A840;   /* headings accent, highlights */
  --c-yellow-light:  #F2E9C4;   /* tag / badge fills */

  --c-purple:        #7560A6;   /* secondary actions, links */
  --c-purple-hover:  #B47995;
  --c-purple-light:  #E5DEEF;

  --c-text:          #2C2E30;
  --c-muted:         #B47995;
  --c-error:         #B04848;
}





/* ==========================================================================
   DIRECT OVERRIDES — ensures colors show even if Pico ignores variables
   ========================================================================== */

body {
  background-color: var(--c-cream-bg);
  color: var(--c-text);
}

/* Primary button (Generate Digest) */
button[type="submit"],
[type="submit"] {
  background-color: var(--c-teal) !important;
  border-color: var(--c-teal) !important;
  color: #fff !important;
}

button[type="submit"]:hover,
[type="submit"]:hover {
  background-color: var(--c-teal-hover) !important;
  border-color: var(--c-teal-hover) !important;
}

/* Secondary button (Download PDF) */
a[role="button"].outline {
  color: var(--c-purple) !important;
  border-color: var(--c-purple) !important;
}

a[role="button"].outline:hover {
  background-color: var(--c-purple) !important;
  color: #fff !important;
}

/* Story cards */
article {
  background-color: var(--c-cream-surface) !important;
  border-color: var(--c-cream-border) !important;
}

/* Form inputs and fieldsets */
input[type="text"],
input[type="date"] {
  background-color: var(--c-cream-surface) !important;
  border-color: var(--c-cream-border) !important;
  color: var(--c-text) !important;
}

input[type="text"]:focus,
input[type="date"]:focus {
  border-color: var(--c-teal) !important;
  box-shadow: 0 0 0 3px rgba(75, 168, 160, 0.2) !important;
}

/* Radio accent color */
:root input[type="radio"]:checked,
[data-theme="light"] input[type="radio"]:checked,
[data-theme="dark"] input[type="radio"]:checked {
    --pico-primary-background: var(--c-teal) !important;
    --pico-primary-border: var(--c-teal) !important;
      --pico-primary-focus: color-mix(in srgb, var(--c-teal), transparent 80%) !important;
}

/* Also target the hover/focus states to prevent them flipping back to default */
input[type="radio"]:focus, 
input[type="radio"]:active {
      --pico-primary-focus: color-mix(in srgb, var(--c-teal), transparent 80%) !important;
    --pico-border-color: var(--c-teal) !important;
}

/* Links */
a {
  color: var(--c-purple);
  font-weight: 500;
}

a:hover {
  color: var(--c-purple-hover);
  font-weight: 500;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
  text-decoration: underline;
}




/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

header h1 {
  text-align: center;
  color: #226C62;
  border-bottom: 3px solid #B47995;
  padding-bottom: 0.3rem;
  display: inline-block;
}

header {
  text-align: center;
}

header .subtitle {
  color: var(--c-muted);
  text-align: center;
}


/* ==========================================================================
   FORM — folder input, preset buttons, date range, error state
   ========================================================================== */

/* .folder-items {
  width: 40vw;
} */
/* input[type="radio"] {
  accent-color: #ff5733;
}    */
#info {
  font-size: .8rem;
}
.info-2 {
  display: inline-block;
  width: 100%;
  text-align: right;
}
/* Other folder text field — sits inline after the radio label */
.folder-other-label, .date-start, .date-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.folder-other-label #folder-other {
  flex: 1;
  margin: 0;
}

/* Validation error shown below the date row */
.form-error {
  color: var(--c-error);
  font-size: 0.9rem;
  margin-top: calc(var(--pico-spacing) * -0.5);
}

progress { 
  color: #B47995;
}

progress:indeterminate {
background: #fff linear-gradient(to right,#B47995 30%,#fff 30%) top left/150% 150% no-repeat;
}

/* ==========================================================================
   RESULTS HEADER — digest title/meta on the left, Download PDF on the right
   ========================================================================== */

#results {
  margin-top: 3rem;
}

#results-header {
  /* display: flex;
  justify-content: space-between;
  align-items: flex-start; */
  /* gap: 1rem; */
  margin-bottom: var(--pico-spacing);
  /* flex-wrap: wrap; */
  text-align: right;
  background-color: #fff;
}

#results-header hgroup {
  margin: 0;
  text-align: center;
}

#results-header hgroup h2 {
  margin: 0;
  color: #626977
}

.results-meta {
  color: #B47995;
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}


/* ==========================================================================
   STORY CARDS
   Pico styles <article> as a card automatically. Rules here only adjust
   internal spacing and typography — feel free to edit freely.
   ========================================================================== */

#pdf-link {
  border-width: 2px;
  font-weight: 500;
}

#story-list article {
  margin-bottom: 2rem;
}

#story-list article header {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: none;
  background-color: #DCECE5;
}

#story-list article header h3 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
  color: #226C62;
  text-decoration: none;
}

/* Newsletter · date line */
.story-meta {
  color: #B47995;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 600;
}

/* Body text */
.story-body {
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Remove extra top margin from the first paragraph in each story body */
.story-body > p:first-child {
  margin-top: 0;
}

li p {
  margin-bottom: 0;
}

/* ==========================================================================
   STORY RESOURCES (links)
   ========================================================================== */

.resources-section {
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: 0.75rem;
  padding-top: 0.5rem;
}

.resources-label {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin: 0 0 0.25rem;
}

.resources {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  margin-left: 2rem;
}

.resources li {
  margin: 0.1rem 0;
}


/* ==========================================================================
   LOADING INDICATOR
   ========================================================================== */

#loading {
  margin: var(--pico-spacing) 0;
}