/* viewer-home.css — index (home) and search pages.
   Design tokens live in viewer.css; this file is layout for the ledger, the
   hero, pagination, search form, and the sign-in card. Loaded only on `/`,
   `/page/{n}`, and `/search` so artifact pages don't pay for it.

   Everything is scoped under `body.viewer-home-host` where it overrides shared
   chrome, so it never competes at equal specificity with the host-scoped rules
   in viewer.css (e.g. `body.viewer-markdown-host .viewer-main`). */

body.viewer-home-host .viewer-main {
  /* Tabular data earns a wider measure than the 52rem prose column. */
  max-width: var(--measure-data);
  padding-top: clamp(1.75rem, 6vw, 4rem);
}

body.viewer-home-host .viewer-main-signin {
  max-width: var(--measure-prose);
}

/* --- Hero -------------------------------------------------------------------
   The deliverable of this product is a URL, so the URL is the headline. The
   host is set solid; the trailing `/p/` is muted because it is an open slot,
   not a destination — each ledger row below completes the sentence. --------- */

.home-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A URL is case-significant, so it opts out of the eyebrow's uppercasing. */
.home-eyebrow-url {
  text-transform: none;
  letter-spacing: 0.04em;
}

.home-hero-url {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.375rem, 4.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.home-hero-url-slot {
  color: var(--muted);
}

.home-lede {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: var(--muted);
}

.home-stats {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* --- Search form ----------------------------------------------------------- */

.ledger-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  max-width: 34rem;
}

.ledger-search input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

.ledger-search input[type="text"] {
  flex: 0 1 10rem;
  min-width: 8rem;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
}

.ledger-search input[type="search"]:focus-visible,
.ledger-search input[type="text"]:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.ledger-search button {
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.ledger-search button:hover {
  opacity: 0.88;
}

.ledger-search button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.search-status {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.search-status-results {
  color: var(--text-strong);
}

.search-status-guidance,
.search-status-error {
  color: var(--muted);
}

.search-status-error {
  padding: 0.6rem 0.75rem;
  color: var(--text);
  background: var(--code-bg);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
}

.search-selected-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.875rem;
  max-width: 34rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.search-selected-tags-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.search-tag,
.search-clear-tags {
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.search-tag {
  padding: 0.2rem 0.4rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}

.search-tag:hover,
.search-clear-tags:hover {
  text-decoration: underline;
}

.search-clear-tags {
  margin-left: 0.2rem;
}

.search-ledger-link {
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.search-ledger-link a {
  color: var(--link);
  text-decoration: none;
}

.search-ledger-link a:hover {
  text-decoration: underline;
}

.search-ledger-link a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Compact header for /page/{n}, where repeating the hero would be dead weight. */
.home-subhead {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

/* --- Ledger ----------------------------------------------------------------
   Rows group into one tbody per UTC update date, so the sort key is printed
   once as a band instead of repeated on all ten rows. That is why the Updated
   column carries only a time while Uploaded (a different timeline) keeps its
   own date. ---------------------------------------------------------------- */

.ledger-wrap {
  margin-top: clamp(1.75rem, 5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Clips the full-bleed group bands to the card's rounded corners. */
  overflow: hidden;
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.ledger thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
}

.ledger thead .ledger-col-version {
  text-align: right;
}

.ledger-group th {
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ledger tbody:first-of-type .ledger-group th {
  border-top: 0;
}

.ledger-row > * {
  padding: 0.75rem 1rem;
  vertical-align: baseline;
  border-bottom: 1px solid var(--border);
}

.ledger tbody:last-child .ledger-row:last-child > * {
  border-bottom: 0;
}

.ledger-row:hover {
  background: var(--hover-bg);
}

/* Format is the ledger's only color, and the color is data: Markdown is plain
   ink because it is plain text, HTML takes the accent because it renders.
   Sigils come from each format's own vernacular. */
.ledger-format {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: 0.75rem;
}

.ledger-format-sigil {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ledger-format-markdown {
  color: var(--fmt-markdown);
}

.ledger-format-html {
  color: var(--fmt-html);
}

.ledger-lock {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--muted);
}

.ledger-lock-sigil {
  font-size: 0.8125rem;
  font-weight: 700;
}

.ledger-no-expiry {
  color: var(--muted);
}

/* Shrink-to-fit the machine columns so the title gets the free space. */
.ledger-col-format,
.ledger-col-access,
.ledger-col-uploaded,
.ledger-col-updated,
.ledger-col-expires,
.ledger-col-version {
  width: 1%;
}

.ledger-cell-page {
  width: auto;
}

.ledger-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-strong);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.ledger-title:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ledger-slug {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ledger-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.ledger-tag {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.35rem;
  overflow-wrap: anywhere;
  color: var(--muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.ledger-tag:hover {
  text-decoration: underline;
}

.ledger-cell-uploaded {
  white-space: nowrap;
  color: var(--muted);
}

.ledger-cell-updated {
  white-space: nowrap;
}

.ledger-cell-access,
.ledger-cell-expires {
  white-space: nowrap;
  color: var(--muted);
}

.ledger-cell-version {
  text-align: right;
  white-space: nowrap;
}

/* A page still at v1 has never been revised; one with history reads solid. */
.ledger-version {
  color: var(--muted);
}

.ledger-version-revised {
  color: var(--text-strong);
  font-weight: 500;
}

/* --- Empty state ----------------------------------------------------------- */

.home-empty {
  padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
  text-align: center;
}

.home-empty-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.home-empty-message {
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  color: var(--muted);
}

.home-empty-code {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0.6rem 0.9rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: left;
  color: var(--text);
  background: var(--code-bg);
  border-radius: var(--radius-md);
}

/* --- Pagination ------------------------------------------------------------ */

.home-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.home-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-pagination-link,
.home-pagination-current,
.home-pagination-gap {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.3rem 0.45rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid transparent;
}

.home-pagination-link {
  color: var(--link);
  text-decoration: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.home-pagination-link:hover {
  background: var(--hover-bg);
}

/* Current page is marked by a rule, not a filled pill. */
.home-pagination-current {
  color: var(--accent);
  font-weight: 500;
  border-bottom-color: var(--accent);
}

.home-pagination-gap {
  color: var(--muted);
}

.home-pagination-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.home-pagination-step:hover {
  background: var(--hover-bg);
}

.home-pagination-step-disabled {
  color: var(--muted);
}

/* Chevrons are inline SVG: the vendored mono's Latin subset has no arrow
   glyphs, and falling back mid-line would break the type. */
.home-pagination-icon {
  flex: 0 0 auto;
}

.home-range {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Sign-in --------------------------------------------------------------- */

.home-signin {
  max-width: 26rem;
  margin-top: clamp(1.75rem, 5vw, 2.75rem);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.home-signin-error {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--code-bg);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
}

.home-signin-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-signin-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

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

.home-signin-submit {
  margin-top: 0.875rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  /* Pairs with --accent in both themes: ink-on-mint dark, white-on-teal light. */
  color: var(--surface);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.home-signin-submit:hover {
  opacity: 0.88;
}

.home-signin-note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.home-signin-note code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  background: var(--code-bg);
  border-radius: var(--radius-sm);
}

.viewer-toolbar-signout {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--link);
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.viewer-toolbar-signout:hover {
  text-decoration: underline;
}

.viewer-toolbar-signout-form {
  display: flex;
  margin: 0;
}

.home-signin-submit:focus-visible,
.viewer-toolbar-signout:focus-visible,
.home-pagination-link:focus-visible,
.home-pagination-step:focus-visible,
.ledger-title:focus-visible,
.ledger-tag:focus-visible,
.search-tag:focus-visible,
.search-clear-tags:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Narrow viewports ------------------------------------------------------
   Rows collapse to a four-line grid: title full width, then format + version,
   then access + expiry, then the two timestamps with micro-labels. No column
   is hidden and nothing is duplicated. The table keeps explicit ARIA roles in
   the markup so overriding `display` cannot strip its semantics. ------------- */

@media (max-width: 48rem) {
  .ledger thead {
    display: none;
  }

  .ledger tbody,
  .ledger tr,
  .ledger-group th {
    display: block;
  }

  /* Qualified with `tr` on purpose: a bare `.ledger-row` (0,1,0) loses to
     `.ledger tr` (0,1,1) above and the row would never become a grid. */
  .ledger tr.ledger-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
  }

  .ledger .ledger-row > * {
    padding: 0;
    border-bottom: 0;
  }

  .ledger tbody:last-child tr.ledger-row:last-child {
    border-bottom: 0;
  }

  /* Rows and columns are both explicit. Auto-placement would follow DOM order
     (which is the table's column order) and strand the title mid-row; the
     title has to lead. The title and its tag pills are focusable in the same
     DOM order as their visual order. */
  .ledger-cell-page {
    width: auto;
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .ledger-cell-format {
    grid-row: 2;
    grid-column: 1;
    margin-top: 0.35rem;
  }

  .ledger-cell-version {
    grid-row: 2;
    grid-column: 2;
    margin-top: 0.35rem;
  }

  .ledger-cell-access {
    grid-row: 3;
    grid-column: 1;
  }

  .ledger-cell-expires {
    grid-row: 3;
    grid-column: 2;
    text-align: right;
  }

  .ledger-cell-uploaded {
    grid-row: 4;
    grid-column: 1;
  }

  .ledger-cell-updated {
    grid-row: 4;
    grid-column: 2;
    text-align: right;
  }

  .ledger-cell-uploaded::before,
  .ledger-cell-updated::before,
  .ledger-cell-access::before,
  .ledger-cell-expires::before {
    content: attr(data-label) " ";
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .home-range {
    margin-left: 0;
    flex-basis: 100%;
  }
}