/* Overrides on top of simple.css, loaded after it.
   Design: Ideas2/11-spec-sidebar.html — a plain-text specification, with the
   contact record pinned in a rail beside the body.

   build-site.el attaches this via :html-head-extra on the `pages` project,
   so it reaches index.html, contact.html and sitemap.html only — the project
   and publication pages get bare simple.css. */


/* ========================================================================
   Shared: the plain-text base. Applies to both pages that load this file.
   ======================================================================== */

/* The whole retheme is one variable: simple.css sets
   html { font-family: var(--sans-font) }. */
:root { --sans-font: var(--mono-font); }

body { font-size: 0.93rem; line-height: 1.55; }

h1.title {
  font-size: 0.93rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-block: 1rem 0.8rem;
  padding-block-end: 0.4rem;
  border-block-end: 3px double var(--border);
}

/* simple.css boxes every section; a spec draws no boxes. */
section { border: 0; padding: 0; margin-block: 0 1.5rem; }

section > h2 {
  font-size: 0.93rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-block: 0 0.45rem;
}

.outline-text-2 p, .outline-text-3 p { margin-block: 0 0.55rem; }

.org-ul { list-style: none; padding-inline-start: 3ch; }
.org-ul > li::before { content: "— "; margin-inline-start: -3ch; color: var(--text-light); }

.timestamp { font-variant: tabular-nums; color: var(--text-light); }

footer.status {
  border-top: 3px double var(--border);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: start;
}


/* ========================================================================
   The table of contents: horizontal, top-level entries only.
   ======================================================================== */

#table-of-contents {
  margin-block-end: 1.5rem;
  padding-block-end: 0.5rem;
  border-block-end: var(--border-width) solid var(--border);
  font-size: 0.78rem;
}

/* The bar reads as navigation on its own; keep the label for screen readers. */
#table-of-contents > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#text-table-of-contents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#text-table-of-contents ul ul { display: none; }

#text-table-of-contents a {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-light);
  text-decoration: none;
}

#text-table-of-contents a:hover { color: var(--accent); text-decoration: underline; }


/* ========================================================================
   The rail.

   The record arrives as `div.contact` — index.org's `#+HTML:` wrapper around
   `#+INCLUDE: contact.org` — sitting between the table of contents and the
   first heading, rather than inside a Contact section. So `main:has(.contact)`
   is what keeps the rail off the other two pages that load this file:
   sitemap.html is a bare list in <main> with no <section>, and contact.html is
   contact.org published on its own — its routes are loose divs with no
   `.contact` wrapper. Either would otherwise fall into the 14rem rail column.

   Headings carry no numbers. build-site.el sets
   `org-export-with-section-numbers nil`, so nothing here reintroduces them
   with counters — the hierarchy is carried by type alone.
   ======================================================================== */

main:has(.contact) {
  display: grid;
  grid-template-columns: 14rem 1fr;
  column-gap: 2rem;
  align-items: start;
}

main:has(.contact) > header { grid-column: 1 / -1; }
#table-of-contents { grid-column: 2; }
section { grid-column: 2; }


/* --- front matter: the pinned record ------------------------------------ */

/* `span 20` rather than `/ -1`: with no explicit rows declared, -1 resolves
   against the explicit grid and the placement collapses. Surplus rows are
   empty and take no height. */
.contact {
  grid-column: 1;
  grid-row: 2 / span 20;
  align-self: start;
  position: sticky;
  inset-block-start: 1.5rem;
  border-inline-end: var(--border-width) solid var(--border);
  padding-inline-end: 1.3rem;
  font-size: 0.82rem;
}

/* One row per contact route: .xmpp, .webmail, .workmail, .PGP-KEY. Only the
   xmpp row is bare text; org wraps the link rows in a <p>. */
.contact > div + div { margin-block-start: 0.55rem; }
.contact p { margin-block: 0; }
.contact a { overflow-wrap: anywhere; }


/* Poison text spliced into the mail addresses, so extracting the rendered text
   harvests a dead address. Source order stays correct and `display: none` is
   excluded from both the clipboard and the accessibility tree, so a reader
   still copies and hears the real one.

   The class sits on the <a>, not the row div — the spans are the anchor's
   children, so that is what has to be the selector's subject. Hence the second
   child, not `.decoy` itself: hiding the anchor blanks the whole address.

   Only the visible text — `mailto:` in the href has to survive the parser for
   the link to work, and is entity-encoded in contact.org instead. */
.decoy > span:nth-child(2) { display: none; }


/* --- sub-headings ------------------------------------------------------- */

/* One step down from `section > h2` above: same uppercase run, lightened and
   set tighter so a Journals/Conferences pair reads as subordinate to its
   section without a number to say so. */
.outline-3 > h3 {
  font-size: 0.93rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-block: 1rem 0.35rem;
}


/* --- no room for a rail: the record rejoins the flow -------------------- */

@media (max-width: 52rem) {
  main:has(.contact) { display: block; }

  /* Full size again, flush with the prose it now sits above. */
  .contact {
    position: static;
    font-size: inherit;
    border-inline-end: 0;
    border-block-end: var(--border-width) solid var(--border);
    padding-inline: 0;
    padding-block-end: 1.1rem;
    margin-block-end: 1.3rem;
  }
}