/* Kindle delivery */
.rss-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 40px;
}

.rss-header h1 {
  margin-bottom: 4px;
}

.rss-muted {
  color: var(--ink-faint);
  font-size: var(--fs-sm);
}

.rss-page h2 {
  font-size: var(--fs-md);
  margin-bottom: 10px;
}

/* Onboarding */
.rss-onboarding {
  padding: 20px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  background-color: var(--raised);
}

.rss-onboarding--verified {
  border-color: var(--rule);
}

/* Equal thirds, so the three segments hold their grid at any width and a long
   label wraps inside its own column instead of pushing the next step onto a
   line of its own. Capped, because stretched across a desktop container the
   rail turns into three long hairlines with nothing under them. */
.rss-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8px;
  max-width: 34rem;
  list-style: none;
  margin-bottom: 20px;
  padding: 0;
}

.rss-step {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.rss-step-bar {
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--rule-soft);
}

/* Current is weight and ink, not just a lighter green: tone alone would put the
   whole "where am I" signal in a hue difference. Done keeps the tick. */
.rss-step.is-current {
  color: var(--ink);
  font-weight: 600;
}

.rss-step.is-current .rss-step-bar {
  background-color: var(--leaf-edge);
}

.rss-step.is-done {
  color: var(--leaf);
}

.rss-step.is-done .rss-step-bar {
  background-color: var(--leaf);
}

/* Inline in the text flow rather than a flex child, so a two-line label wraps
   under itself and not around the tick. */
.rss-step-icon {
  width: 11px;
  height: 11px;
  stroke-width: 3;
  vertical-align: -1px;
  margin-right: 3px;
}

/* An address in prose is set in the data face rather than boxed. The boxes were
   stacking three deep on a phone -- card, sender block, code -- and a boxed
   address in a sentence sheds its trailing punctuation onto the next line. The
   mono face against the surrounding grotesk is the distinction that was
   actually doing the work. */
.rss-onboarding code {
  font-family: var(--font-data);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The address the user must whitelist with Amazon -- the single most important
   string on this page, so it gets its own block rather than sitting inline. */
.rss-sender {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--leaf);
  border-radius: var(--radius);
  background-color: var(--field);
}

.rss-sender-label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  flex-basis: 100%;
}

.rss-sender-address {
  flex: 1 1 auto;
  font-size: var(--fs-md);
}

.rss-sender-copy {
  padding: 6px 14px;
  font-size: var(--fs-sm);
}

/* Way back to the address step from any later state. */
.rss-change-address {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.rss-change-address summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  list-style: none;
}

.rss-change-address summary::-webkit-details-marker {
  display: none;
}

.rss-change-address summary::before {
  content: "+ ";
  color: var(--leaf);
}

.rss-change-address[open] summary::before {
  content: "\2212 ";
}

.rss-change-address summary:hover {
  color: var(--ink);
}

.rss-change-address > p {
  margin-top: 10px;
}

.rss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Forms */
.rss-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

/* Inputs mirror .form-field in forms.css so this page matches the rest of the
   app. Buttons reuse .button primary/secondary directly -- no local overrides. */
.rss-form input[type="url"],
.rss-form input[type="email"],
.rss-form input[type="text"],
.rss-form select {
  flex: 1 1 220px;
  padding: 12px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background-color: var(--field);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rss-form input:focus,
.rss-form select:focus {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px var(--leaf-lift);
}

.rss-form .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.rss-limit {
  margin-top: 8px;
}

/* Delivery schedule form. Reads as one sentence -- "Send my digest [weekly] on
   [Sunday] at [7:00 AM] in [Chicago]" -- so the labels stay inline and the
   selects size to their content instead of stretching like the add-feed form. */
.rss-schedule-form {
  gap: 8px 10px;
}

.rss-schedule-form label {
  color: var(--ink);
}

.rss-schedule-form select {
  flex: 0 1 auto;
}

.rss-schedule-weekday {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* .rss-schedule-weekday sets display, which would otherwise beat the hidden
   attribute the Stimulus controller toggles. */
.rss-schedule-weekday[hidden] {
  display: none;
}

/* The zone names are long ("International Date Line West"), and a select's
   min-content width is its widest option -- so min-width: auto floored this
   one above the width of a phone and it ran off the side of the screen. The
   basis stays auto so it still sizes to its content on a wide screen; the
   floor is what had to go, with the ellipsis picking up once it has wrapped
   to its own line and still has nowhere left to shrink into. */
.rss-schedule-form select.rss-schedule-zone {
  min-width: 0;
  text-overflow: ellipsis;
}

/* Tabs -- two pages, so these are plain links, not a widget */
.rss-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule-soft);
}

.rss-tab {
  padding: 10px 16px;
  min-height: 44px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
  /* Transparent rather than absent, so the current tab's border does not
     shift the row by a pixel when it appears. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.rss-tab:hover {
  color: var(--ink);
}

.rss-tab--current {
  color: var(--ink);
  border-bottom-color: var(--leaf);
  font-weight: 600;
}

/* Past digests */
.rss-archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

/* flex-start rather than center: an open contents table makes the entry
   several hundred pixels tall, and centred buttons then float in the middle of
   a wall of titles with nothing beside them. Anchored to the top they stay next
   to the digest name, which is what they act on. */
.rss-archive-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  background-color: var(--raised);
}

.rss-archive-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rss-archive-name {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.rss-archive-summary {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  /* The summary is capped at 400 characters, but a long one still should not
     push the row taller than the actions beside it. */
  max-width: 68ch;
}

.rss-archive-unavailable {
  font-style: italic;
}

/* Contents table */
.rss-archive-contents {
  margin-top: 10px;
}

/* The whole line is the target, not just the words: on a phone this is the
   only tap in the entry that isn't a button, and a 13px string of text is not
   something a thumb can be expected to find. */
.rss-archive-contents > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  list-style: none;
}

.rss-archive-contents > summary::-webkit-details-marker {
  display: none;
}

/* Drawn rather than a character: a rotating caret says "this opens downward"
   in a way + / - does not, and it animates. */
.rss-archive-contents > summary::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--leaf);
  border-bottom: 1.5px solid var(--leaf);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.rss-archive-contents[open] > summary::before {
  transform: rotate(45deg);
}

.rss-archive-contents > summary:hover {
  color: var(--ink);
}

.rss-archive-contents > summary:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .rss-archive-contents > summary::before {
    transition: none;
  }
}

/* Hung off a rule down the left rather than boxed: the entry is already a card
   inside a list, and a third border inside it reads as clutter on a narrow
   screen. The rule is enough to say "this belongs to the digest above". */
.rss-archive-toc {
  margin: 8px 0 2px;
  padding-left: 12px;
  border-left: 2px solid var(--rule-soft);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rss-archive-toc-source {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

/* Titles are the content here, so they get the readable size and the full ink;
   the feed above them is the label. Left-aligned with the feed name rather than
   indented under it -- a second indent inside a 320px column costs more than
   the grouping is worth, and the label already groups them. */
.rss-archive-toc-titles {
  margin-top: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rss-archive-toc-titles li {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink);
  max-width: 68ch;
  overflow-wrap: anywhere;
}

.rss-archive-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Resend is a button_to and Download is a link, so without a shared height the
   two sit at different sizes beside each other. 44px is also the target a
   thumb needs, which these did not have. */
.rss-archive-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.rss-archive-actions .rss-inline-form {
  display: flex;
}

/* Delivery status */
.rss-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  background-color: var(--raised);
}

/* The status reads as one line of metadata, so it borrows the row eyebrow
   wholesale -- including the dots between items. */
.rss-status .row-eyebrow {
  margin-bottom: 0;
}

.rss-status-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.rss-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  min-height: 44px;
  font-size: var(--fs-sm);
}

.rss-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.rss-icon {
  width: 15px;
  height: 15px;
}

.rss-poll-note {
  margin-bottom: 12px;
}

/* Subscription cards */
.rss-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 8px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  background-color: var(--raised);
}

.rss-card:hover {
  border-color: var(--rule);
}

.rss-card--broken {
  border-color: var(--danger-edge);
}

.rss-card-main {
  min-width: 0;
}

.rss-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: flex-start;
}

/* Icon-only, and fixed so both buttons are identical squares regardless of
   which icon sits inside them. */
.rss-square-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
}

.rss-square-button .rss-icon {
  width: 17px;
  height: 17px;
}

/* button_to wraps its button in a form, which would otherwise stretch and
   break the square. */
.rss-card-actions .rss-inline-form {
  display: inline-flex;
  flex: 0 0 auto;
}

.rss-card-title {
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.rss-card-title a {
  color: var(--ink);
  text-decoration: none;
}

.rss-card-title a:hover {
  color: var(--leaf);
}

.rss-card-url,
.rss-card-meta {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

/* Per-feed volume control. Sits under the meta line rather than in
   .rss-card-actions, which is sized for square icon buttons. */
.rss-lookback {
  margin-top: 8px;
}

.rss-lookback-label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.rss-lookback-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

.rss-lookback-control input[type="range"] {
  flex: 1 1 auto;
  max-width: 220px;
  accent-color: var(--leaf);
  cursor: pointer;
}

/* Tabular figures and a fixed width so the slider does not shift sideways as
   the value crosses from one digit to two. */
.rss-lookback-value {
  font-size: var(--fs-xs);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}

.rss-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.rss-badge--warn {
  background-color: var(--warn-lift);
  color: var(--warn);
}

.rss-badge--error {
  background-color: var(--danger-lift);
  color: var(--danger);
}

/* Popular feeds */
.rss-popular-list {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.rss-popular-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.rss-popular-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rss-popular-form {
  flex: 0 0 auto;
}

/* Two tiers. At 768px the card stays a row and only the action column/status
   row shrink -- .rss-card-main already has min-width: 0 so the text column
   can give up the space. Below 480px there isn't enough width left for a
   persistent 44+44 action column beside the title/meta/slider, so the card
   stacks instead. */
@media (max-width: 768px) {
  .rss-card {
    gap: 8px;
  }

  .rss-card-actions {
    gap: 6px;
  }

  .rss-status-actions {
    margin-left: 0;
  }

  /* An inline-block failure message wraps awkwardly against the accent
     border in a narrow card; block reads as its own line. */
  .rss-badge {
    display: block;
  }

  /* The raw URL is present for reference, not the primary content -- clamp
     it so it can't push the more useful "N new articles" line down the
     card. overflow-wrap: anywhere still applies within the clamped box. */
  .rss-card-url {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* A digest entry cannot fit its title, its counts and two buttons across a
   phone: the buttons hold their width, so everything that actually identifies
   the digest was being squeezed to one word a line. Below 640 the entry stacks
   and the actions become a pair of equal targets under it -- which is also
   where the status bar's own actions stop trying to sit beside the metadata. */
@media (max-width: 640px) {
  .rss-archive-item {
    flex-direction: column;
    align-items: stretch;
  }

  /* Full thumb target once this is the widest thing in a stacked entry, and
     spaced off the buttons that now sit under it rather than beside it. */
  .rss-archive-contents > summary {
    min-height: 44px;
  }

  .rss-archive-contents {
    margin-bottom: 6px;
  }

  .rss-archive-actions {
    margin-left: 0;
  }

  .rss-archive-actions > * {
    flex: 1 1 0;
  }

  .rss-archive-actions .tooltip-wrapper {
    display: flex;
  }

  .rss-archive-actions .button {
    width: 100%;
  }

  .rss-status-actions {
    width: 100%;
  }

  .rss-status-actions > * {
    flex: 1 1 0;
  }

  .rss-status-actions .tooltip-wrapper,
  .rss-status-actions .rss-inline-form {
    display: flex;
  }

  .rss-status-actions .button {
    width: 100%;
  }

  /* Both inputs already wrap to their own line at this width, so Subscribe
     takes the third rather than sitting short and orphaned beside nothing. */
  .rss-form--add .button {
    flex: 1 1 100%;
  }

  /* Onboarding is a one-action-per-screen flow on a phone, and every action in
     it had wrapped onto a line of its own anyway -- short, left-aligned and
     ragged against the full-width field above it. They take the line. */
  .rss-onboarding .button {
    width: 100%;
    min-height: 44px;
  }

  .rss-actions > * {
    flex: 1 1 100%;
  }

  /* The address is the whole point of this block, so it gets the line, and Copy
     -- which had been dropping below it and sitting short -- gets the next. */
  .rss-sender {
    gap: 10px;
    padding: 14px;
  }

  .rss-sender-address {
    flex-basis: 100%;
  }

  /* The schedule reads as a sentence across a desktop. On a phone it wrapped
     into fragments -- a lone "in" on one line, the zone select on the next --
     so the sentence turns a corner instead: connectives right-aligned in a
     column against the control each one governs, still reading top to bottom. */
  .rss-schedule-form {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 10px;
  }

  .rss-schedule-form label {
    justify-self: end;
  }

  /* Grid items floor at min-content, which for a select is its widest option --
     the same thing that ran the zone select off the screen when it was a flex
     child. */
  .rss-schedule-form select {
    width: 100%;
    min-width: 0;
  }

  /* Lifts the weekday label and select into the parent grid so they line up
     with the rows above and below rather than forming a row of their own. */
  .rss-schedule-weekday {
    display: contents;
  }

  .rss-schedule-form .button {
    grid-column: 1 / -1;
  }

  /* A summary is a line of text with no padding of its own, which is a 20px
     target for a thumb. The gap replaces the space in the marker's content
     string, which a flex container trims off the end of its own box. */
  .rss-change-address summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .rss-card {
    flex-direction: column;
  }

  /* The container is already down to 20px of its own at this width, and the
     card's 20px on top of that left the flow a 270px column to work in. */
  .rss-onboarding {
    padding: 16px;
  }

  /* A third of a 260px card is 76px, which is where the tick plus the first
     word of a step stopped fitting on one line and dropped a column to three
     lines while its neighbours stayed at two. */
  .rss-step {
    letter-spacing: 0.03em;
  }

  .rss-step-icon {
    margin-right: 2px;
  }

  /* One character over the width of the block at --fs-md, and the address broke
     after the second-to-last letter. It is still the largest thing in the box
     at the base size. */
  .rss-sender-address {
    font-size: var(--fs-base);
  }
}