/* /library — the customer's own shelf.
 *
 * The window chrome, the buttons, the type scale and every color come from
 * august.css. What is here is only what does not exist anywhere else: the
 * sign-in field, and the way a release is listed.
 *
 * The field is defined here rather than reused because .follow-* lives in
 * index.css and freebies.css alone. Borrowing the class name without the rules
 * is exactly how the popup's form once rendered as a bare browser input on
 * four pages: right markup, no styling, and nothing to warn anybody.
 */

.lib-body { padding-bottom: 5rem }

/* ----------------------------------------------------------- the top half --

   The lede and the sign-in card sit side by side. One grid rather than two
   stacked sections, because two sections cannot be made to share a row without
   one of them knowing the other's height.

   Stacked below 900px. The breakpoint is where the card stops having room to
   be 22rem without squeezing the heading onto four lines - measured, not
   picked: "Everything you own" in the display face wants about 26rem to stay
   on two.
*/

/* .shell is 1480px wide because the homepage's calendar needs it. Two columns
   of text do not: left to itself the card ended up hard against the right edge
   with a meter of nothing between it and the lede. This is the measure the
   pair reads as one thing at. */
.lib-top {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
  max-width: 68rem;
  margin-inline: auto;
}

.lib-intro { min-width: 0 }

/* The heading sets its own measure. Without this it stretches to the column
   and the lede runs to eleven words a line, which reads as a paragraph rather
   than a lede. */
.lib-intro .legal-lede { max-width: 34ch }

.lib-panel { min-width: 0 }

@media (min-width: 900px) {
  .lib-top { grid-template-columns: minmax(0, 1fr) minmax(21rem, 26rem) }

  /* Centring the two boxes on the same axis is not the same as them LOOKING
     centered. The card is taller than the copy and carries a title bar, so its
     optical weight sits high; matched midpoints read as the card floating
     above the heading. Nudged down until the pair sits level by eye. */
  .lib-panel { margin-top: clamp(1.4rem, 3.5vw, 3rem) }
}

/* Signed in, the card is gone and the right column is empty - so the grid
   stops being a grid rather than leaving a hole beside the heading. */
.lib-top:has(> .lib-panel > .win[hidden]:only-child),
.lib-top:not(:has(> .lib-panel > .win:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.lib-win { max-width: 34rem; margin: 0 }

/* august.css styles .win and .win-bar; the body padding is each page's own,
   the way .legal-win-body is. The first draft of this page used a made-up
   .win-body and the content sat flush against the card border - the same
   class-that-does-not-exist mistake this file's header warns about for
   .follow-*, made twice in one page. Rendering it is what found both. */
.lib-win-body { padding: clamp(1.4rem, 3vw, 2.4rem) }

/* No .visually-hidden exists in this stylesheet set either. The sign-in
   field's label was rendering as visible text next to the input. */
.lib-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.lib-h2 { margin: 0 0 .55rem; font-size: 1.22rem; letter-spacing: -.01em }

.lib-p {
  margin: 0 0 1.35rem;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------ the field -- */

.lib-form { display: flex; gap: .6rem; flex-wrap: wrap }

.lib-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .78rem 1rem;
  font-size: .95rem;
  color: var(--text);
  background: var(--surface-2, rgba(127, 127, 127, .07));
  border: 1px solid var(--border);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.lib-input::placeholder { color: var(--text-faint) }

.lib-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.lib-submit { flex: 0 0 auto }

/* Hidden until it has something to say, so an empty status line never leaves
   a gap that reads as a missing element. */
.lib-msg {
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  display: none;
}

.lib-msg[data-state] { display: block }
.lib-msg[data-state="ok"] { color: #1F9254 }
.lib-msg[data-state="bad"] { color: #C0392B }

.lib-form[data-busy] { opacity: .55; pointer-events: none }

/* ------------------------------------------------------------- the shelf -- */

/* Every other page puts a <nav class="seg"> between the brand and the actions,
   and it is .seg that carries the margin-left:auto pushing the right-hand
   cluster to the right edge. The Library has no section nav, so without this
   the wordmark, the currency button and the theme toggle all bunch against the
   left edge with the rest of the bar empty. Scoped here rather than in
   august.css: adding it there would give the shared bar two auto margins and
   move the seg on all ten other pages. */
.menubar-actions { margin-left: auto }

/* One column, centered, whenever the lede is gone. The signed-out view is a
   deliberate two-column pair - copy left, card right - but once someone is
   through the door the lede is hidden, and a lone "empty" window then sat in
   the leftover left-hand column, hard against the edge of a wide page. */
.lib-top:has(> .lib-intro[hidden]) { grid-template-columns: minmax(0, 1fr) }
.lib-top:has(> .lib-intro[hidden]) .lib-win { margin-inline: auto }

/* ------------------------------------------------------------- the shelf --

   One window holding every application as a strip. The window is the library;
   the strips are what is in it. */

.lib-shelf-win { max-width: 46rem; margin: 0 auto }
.lib-shelf-body { padding: clamp(1.4rem, 3.5vw, 2.2rem) }
.lib-shelf-body .eyebrow { margin: 0 0 .5rem }

.lib-title { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin: 0 0 .45rem; line-height: 1 }
.lib-sub { margin: 0 0 1.6rem; color: var(--text-muted); font-size: .93rem }

/* Hairline between strips, none under the last: a trailing rule reads as a
   missing row. */
.lib-row { border-top: 1px solid var(--border) }
.lib-row:first-child { border-top: 0 }

/* The whole header is one button, so a keyboard gets one stop per application
   rather than hunting for a chevron. Reset the UA button styling rather than
   inheriting a form control into the middle of a reading surface. */
.lib-row-head {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 100%; text-align: left; font: inherit; color: inherit;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: 1rem 0;
  transition: color .2s ease;
}
.lib-row-head:hover { color: var(--accent) }
.lib-row-head:hover .lib-chev { opacity: 1 }

/* Color and opacity only. A row that moves under the cursor feels cheap, and
   ch.02 forbids hover states that shift layout. */
.lib-row-meta {
  flex: 1 1 auto; min-width: 0;
  font-size: .74rem; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lib-chev {
  flex: none; width: .8rem; color: var(--text-faint); opacity: .7;
  transition: transform .18s ease, opacity .2s ease;
}
.lib-chev::before { content: "\25B8" }
.lib-row[data-open="true"] .lib-chev { transform: rotate(90deg) }

.lib-row-body { padding: 0 0 1.4rem }

/* The page note under the shelf. Aligned to the same 46rem column as the
   window above it, so it reads as a footnote to the library rather than a
   stray line on the page - it had no rule at all and ran the full width of
   .shell, which is 1480px. */
.lib-foot {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  color: var(--text-faint);
  font-size: .82rem;
  line-height: 1.6;
}

.lib-foot p { margin: 0 }
.lib-foot p + p { margin-top: .2rem }

/* The address is a link and must look like one. Inheriting --text-faint from
   the paragraph left it the same gray as the sentence around it, so the one
   actionable thing in the footer was the one thing you could not see. */
.lib-foot a { color: var(--accent) }

/* What this release is, between the name and the button. Prose, so it takes
   the reading measure rather than the full width of the strip - ch.02 caps a
   line at 68 characters and a 46rem row is wider than that. */
.lib-desc {
  margin: 0 0 1.1rem;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.6;
}

/* Activation pips. Filled for used, hollow for free - the same hollow-means-
   available shape Lite already uses for a free edition. */
.lib-pips { display: flex; align-items: center; gap: .55rem; margin: .55rem 0 .5rem }
.lib-pip-row { display: inline-flex; gap: .3rem }
.lib-pip {
  width: .55rem; height: .55rem; border-radius: 999px;
  border: 1px solid var(--text-faint);
}
.lib-pip.is-used { background: var(--text-muted); border-color: var(--text-muted) }
.lib-pip-text { font-size: .78rem; color: var(--text-muted) }

@media (prefers-reduced-motion: reduce) {
  .lib-row-head, .lib-chev { transition: none }
}

.lib-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 .3rem;
}

.lib-name { margin: 0; font-size: 1.22rem; letter-spacing: -.01em }

.lib-current {
  font-size: .74rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.lib-headline { margin: 0 0 1rem; color: var(--text-muted); font-size: .93rem }

.lib-actions { display: flex; gap: .55rem; flex-wrap: wrap; margin: 0 0 1.2rem }

/* The license key is the one thing on this page somebody copies by hand off a
   screen, so it is set in the mono face at a size that survives a phone. */
.lib-key {
  display: block;
  padding: .7rem .85rem;
  margin: 0 0 .45rem;
  font-size: .95rem;
  letter-spacing: .04em;
  border: 1px dashed var(--border);
  border-radius: 10px;
  word-break: break-all;
}

.lib-note { margin: 0; font-size: .78rem; color: var(--text-faint); line-height: 1.55 }

/* --------------------------------------------------------- past releases -- */

.lib-earlier { margin: 1.2rem 0 0; border-top: 1px solid var(--border); padding-top: .9rem }

.lib-earlier-title {
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lib-old {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .42rem 0;
  font-size: .86rem;
  border-bottom: 1px solid var(--border);
}

.lib-old:last-child { border-bottom: 0 }

.lib-old-when { color: var(--text-faint); font-size: .78rem }

.lib-old a { color: var(--accent); text-decoration: none }
.lib-old a:hover { text-decoration: underline }

@media (max-width: 460px) {
  .lib-form { flex-direction: column }

  /* The basis has to go with the direction. `flex: 1 1 15rem` on the field
     is a WIDTH while the form is a row, and the moment the form becomes a
     column the same 15rem is read as a HEIGHT — a 240px box with the
     placeholder floating in the middle of it. Reported from a real phone,
     13 August 2026, by the customer sign-in link in the 1.4 announcement.
     Reproduced at 375px: the field measured exactly 240px tall. */
  .lib-input { flex: 0 0 auto }
  .lib-submit { width: 100% }
}