/* PADIENIUI - the day-period reading view.
 *
 * CEO 2026-09-09: the archive reads newest-first and "human very difficult cape backwards
 * reading the flow". ?mode=days reads FORWARD inside a reading day, and this sheet is the
 * only thing that makes the day CHANGE visible.
 *
 * WHY A FILE AND NOT AN INLINE <style>. The reader answers with
 * `Content-Security-Policy: ... style-src 'self'`, so an inline <style> block and a style=
 * attribute are both DROPPED BY THE BROWSER WITH NO ERROR ANYWHERE - the markup would land,
 * the rules would never apply, and the rail would silently not exist. A same-origin file is
 * the only shape that works under this policy.
 *
 * It loads on every page and styles nothing until .day-period appears, so the default view
 * is byte-for-byte unaffected.
 */

/* The two rail tones. Declared on :root so a theme can override them in one place, with
 * literal fallbacks so the rail is never invisible if a variable is missing.
 * Two hues rather than two shades of one: a shade difference is what a colour-blind reader
 * and a phone in sunlight both lose first. */
:root {
  --period-rail-a: #2f7d8f;
  --period-rail-b: #c98a1a;
}
[data-theme="dark"], :root.dark, body.dark {
  --period-rail-a: #56b7cc;
  --period-rail-b: #e6b45a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --period-rail-a: #56b7cc;
    --period-rail-b: #e6b45a;
  }
}

/* THE RAIL. Absolutely positioned INSIDE the section's own padding, so it never widens the
 * document: an element that added width would give a phone a horizontal scrollbar, and
 * 90% of this archive's readers are on a phone. */
.archive-reader .day-period {
  position: relative;
  padding-right: 14px;
}
.archive-reader .day-period::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  border-radius: 3px;
  background: var(--period-rail-a, #2f7d8f);
  opacity: .85;
  pointer-events: none;
}
.archive-reader .day-period.period-tone-b::after {
  background: var(--period-rail-b, #c98a1a);
}

/* The marker says WHICH day the rail belongs to, in the rail's own colour, so the two read
 * as one object rather than as a stripe of unexplained colour. */
.archive-reader .day-period > .day-marker {
  border-left: 3px solid var(--period-rail-a, #2f7d8f);
  padding-left: .5rem;
}
.archive-reader .day-period.period-tone-b > .day-marker {
  border-left-color: var(--period-rail-b, #c98a1a);
}

/* THE THIRD BUTTON, in yellow, because the CEO asked for it by name - it is the new option
 * and it has to be findable among two that have been there for weeks. `currentColor` is not
 * used: the border must stay yellow in both themes. */
.archive-reader .read-mode .mode-step-days {
  border: 1px solid #e0a800;
  box-shadow: inset 0 0 0 1px rgba(224, 168, 0, .25);
}
.archive-reader .read-mode .mode-step-days[aria-current="true"] {
  border-color: #b98600;
  box-shadow: inset 0 0 0 2px rgba(224, 168, 0, .45);
}

/* ---------------------------------------------------------------------------------------
 * PHONES. CEO 2026-09-09: "people use websites 90% on mobile various phones so
 * responsiveness is critical". Measured at 375, 390 and 414 CSS px.
 *
 * The rail NARROWS rather than disappearing: at 375px there is no spare horizontal room, and
 * a rail a reader cannot see has not been built. 4px still reads as a colour band, and the
 * section's padding-right keeps it clear of the text and of the scrollbar gutter.
 * ------------------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .archive-reader .day-period {
    padding-right: 9px;
  }
  .archive-reader .day-period::after {
    width: 4px;
    border-radius: 2px;
    opacity: 1;
  }
  /* The switcher is three buttons now, on a row that already carries the size control. It
   * WRAPS instead of overflowing - a row that scrolls sideways hides its last option, and
   * the last option here is Srautas. */
  .archive-reader .read-mode {
    flex-wrap: wrap;
  }
  .archive-reader .read-mode .mode-step {
    flex: 0 1 auto;
  }
  /* A phone viewport is short, and the site already has ONE sticky band at the top (the logo
   * row). A second full-height sticky header would leave almost no room for the messages, so
   * the day marker keeps its stickiness and gives back its vertical padding instead. */
  .archive-reader .day-period > .day-marker {
    padding-top: .15rem;
    padding-bottom: .15rem;
    padding-left: .4rem;
  }
}

/* Nothing here may introduce horizontal scrolling at any width. The rail is positioned, the
 * padding is inside the section, and this is the guard that keeps a future addition honest. */
.archive-reader .day-period,
.archive-reader .day-period::after {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
 * THE CROSS-VIEW JUMP CIRCLE. CEO 2026-09-09: "small circle top right corner of each message
 * to jump to the same message on Padieniui view ... vice versa on Padieniui white circle to
 * jump to same message on Grupuota view ... On mouse hoover/click those circles fill in the
 * same color as was its border. Those symbols must be small but easy to hoover with mouse or
 * touch on the phone view."
 *
 * NO SCRIPT, and that is the whole design. Every message already renders as
 * <article class="bubble" id="m<id>"> in all three modes, so the jump is an ordinary link to
 * ?mode=days#m<id> (or ?mode=#m<id>). It survives a hard refresh, it is copyable and
 * shareable, the browser does the scrolling, and it works under script-src 'self' - the same
 * reasoning public_reader_mode_control already records for the mode switch itself.
 *
 * SMALL BUT EASY TO HIT is not a contradiction: the CEO asked for both, and the answer is a
 * 44x44 hit area (the site's touch standard) wrapped around a 14px visible dot. The padding
 * carries the target; the dot carries the design.
 * ------------------------------------------------------------------------------------- */
.archive-reader .bubble {
  /* The anchor for the absolutely-placed circle. Bubbles were static; nothing inside them is
   * positioned against the page, so this changes no existing layout. */
  position: relative;
}

.archive-reader .view-jump {
  position: absolute;
  top: 0;
  right: 0;
  /* 44x44 total, 14px dot: (44 - 14) / 2 = 15px of padding on every side. */
  width: 44px;
  height: 44px;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  text-decoration: none;
  /* Above the bubble's own text, below the lightbox. */
  z-index: 2;
}

/* box-sizing AND flex:none are both load-bearing, and the first version had neither.
 * MEASURED: without them the dot rendered 10x14 - an ELLIPSE. The ::before does not inherit
 * the parent's border-box, so 14px + 2px border on each side is an 18px box competing for a
 * 14px flex line, and flex shrank the WIDTH (height is unconstrained) until it fit. A circle
 * that is a circle only in the CSS source is not a circle. */
.archive-reader .view-jump::before {
  content: "";
  box-sizing: border-box;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  transition: background-color .12s ease-in-out, transform .12s ease-in-out;
}

/* HOVER *AND* FOCUS-VISIBLE. Hover alone gives a keyboard reader nothing, and this control is
 * a link - it is in the tab order whether or not it is styled for it. */
.archive-reader .view-jump:hover::before,
.archive-reader .view-jump:focus-visible::before,
.archive-reader .view-jump:active::before {
  background: currentColor;
  transform: scale(1.15);
}

.archive-reader .view-jump:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
  border-radius: 50%;
}

/* GRUPUOTA and SRAUTAS -> PADIENIUI. The yellow is the Padieniui pill's own border, so the
 * circle names its destination by colour: #e0a800 is the same value the .mode-step-days rule
 * above uses, deliberately repeated rather than tokenised only because these two rules are
 * eleven lines apart in one file - if a third user appears, make it a custom property. */
.archive-reader .view-jump-days {
  color: #e0a800;
}

/* PADIENIUI -> GRUPUOTA. The CEO asked for white, which is right on the dark theme the reader
 * opens in. A literal #fff on the LIGHT theme would be an invisible control, so the light
 * theme gets the same idea expressed in its own palette: the page's ink, which is the plainest
 * non-yellow the design already owns. Distinct from the yellow in both themes, which is the
 * property that actually matters. */
.archive-reader .view-jump-grouped {
  color: #f2f5f7;
}
@media (prefers-color-scheme: light) {
  .archive-reader .view-jump-grouped {
    color: var(--ink, #10202c);
  }
}
:root[data-theme="light"] .archive-reader .view-jump-grouped,
.theme-light .archive-reader .view-jump-grouped {
  color: var(--ink, #10202c);
}
:root[data-theme="dark"] .archive-reader .view-jump-grouped,
.theme-dark .archive-reader .view-jump-grouped {
  color: #f2f5f7;
}

/* PHONES. The hit area stays 44x44 - shrinking it is the one thing this control must never do
 * (CEO: "easy to hoover with mouse or touch on the phone view"). Only the inset changes, so
 * the circle does not crowd the author name on a narrow bubble. */
@media (max-width: 480px) {
  .archive-reader .view-jump {
    padding: 16px;
  }
  .archive-reader .view-jump::before {
    width: 12px;
    height: 12px;
  }
}

/* The guard that keeps this honest: an absolutely-positioned child must never widen the page.
 * right:0 pins it inside the bubble, and the bubble is already max-width bounded. */
.archive-reader .view-jump {
  max-width: 44px;
}

/* THE CORNER IS RESERVED. The circle is absolutely placed, so the flow does not know it is
 * there - and archive.css pushes .bubble-topics to the same right edge with
 * margin-inline-start:auto. MEASURED live 2026-09-20 (card m7930 at 1280px): the chip box
 * ended at x=907.67, the 44px control started at 875.67, and the 14px dot (15px in from the
 * right) sat squarely on the chip's last 17px - 14 of 30 sampled chips in all three modes,
 * both widths; the CEO's screenshot shows exactly that. The element that follows the circle
 * in the flow is the one whose top-right corner sits under the dot (the head row when there
 * is one, the message text when there is not), so THAT element gives up the corner: the dot
 * spans 15..29px from the bubble edge, the content edge is 12px in, so 24px of end padding
 * puts the chip's right edge 36px from the bubble edge - 7px clear of the dot. Same figure on
 * phones (16..28px). A padding, not a margin: a flex row's auto margin resolves inside the
 * padding box, so the chip stops where the padding starts. */
.archive-reader .view-jump + * {
  padding-inline-end: 24px;
}