/* abstracts.css: the Abstracts page's own few pieces.

   Loaded after doc.css, summit-pages.css and visit.css on /summit/abstracts/
   only. The page is an itinerary like Registration and the visit pages, so
   the arrival, the route strip, the stops and the hand-over all come from
   visit.css, and the form comes from theme.css and doc.css (.reg, .field-row,
   .consent-line). What is here is only what no other page has: a numbered
   rule list, the deadline tables, a native select with the site's chevron,
   and the word meter under the abstract body.

   Everything rides on the document tokens, so the dark ground is answered by
   the flip theme.css already makes. House rule: no em dashes anywhere. */

/* ────────────────────────────────────────────────────── the thirteen rules */

/* A block with the number set in the margin, not a grid: in a grid every
   text run and every inline link becomes an item of its own, so rule 05's
   "(see Submission tracks)" broke out of its sentence onto a row by itself. */
.rules { list-style: none; margin: .2rem 0 0; padding: 0; counter-reset: r; max-width: var(--read); }
.rules li {
  counter-increment: r; position: relative;
  padding: .85rem 0 .85rem 2.7rem; border-top: 1px solid var(--line); line-height: 1.55;
}
.rules li:last-child { border-bottom: 1px solid var(--line); }
.rules li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: .85rem;
  font-size: .74rem; letter-spacing: .12em; font-weight: 600; color: var(--gold-deep);
  padding-top: .4em; font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────── themes and tracks */

/* doc.css gives .theme and .track their cell; the headings inside a cell
   start flush, and the lists inside a theme are plain. */
.doc__body .theme h3, .doc__body .track h3 { margin-top: 0; }
.theme .list { gap: .4rem; font-size: .98rem; }
.theme__other { color: var(--ink-soft); font-style: italic; }
.track p { max-width: none; }

/* ──────────────────────────────────────────────────── the deadline tables */

.doc__body .dl__h { margin-top: 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.dl__t { width: 100%; border-collapse: collapse; }
.dl__t th, .dl__t td {
  text-align: left; vertical-align: top; padding: .5rem 0;
  border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.45;
}
.dl__t tr:first-child :is(th, td) { border-top: 0; }
.dl__t th { font-weight: 400; color: var(--ink-soft); padding-right: .9rem; width: 52%; }
.dl__t td { font-family: var(--serif); font-size: 1.08rem; color: var(--gold-deep); }

/* ─────────────────────────────────────────────── what is confirmed */

/* The confirmed block is a size container (confirmed.css), so it contributes
   no width of its own. On this page it is the only thing in its stop, and it
   was seen 56px wide with its two columns stacked 4,000px tall: doc.css centres
   .doc__body with auto side margins, and inside a grid column auto margins
   shrink an item to its content, which for a size container is nothing.
   visit.css answers that for every stop (".stop .doc__body { margin-inline: 0 }",
   9 September); it is restated here because this is the one page where the
   block stands alone, so the page holds up even if that line ever moves. */
#confirmed .doc__body { margin-inline: 0; }
#confirmed .cf { margin-block: 0; }

/* ─────────────────────────────────────────────────────────── the form */

.doc .reg--abstract { max-width: 46rem; }
.reg--abstract .reg__grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Two groups, About you and Your abstract. A fieldset brings a border and a
   padding of its own; both go, and the rule between the groups is drawn here. */
.reg__set { border: 0; margin: 0; padding: 0; min-width: 0; width: 100%; display: grid; gap: .9rem; }
.reg__set + .reg__set { margin-top: .3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.reg__legend {
  padding: 0; margin: 0 0 .15rem; float: left; width: 100%;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--ink);
  letter-spacing: 0; text-transform: none; font-weight: 400;
}
.reg__legend + .reg__grid { clear: both; }

/* A line of help under a field, and the track's headings above the body. */
.field-row__help { font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.field-row__help[hidden] { display: none; }
.doc__body .field-row__help a { color: var(--gold-deep); }

/* A native select with the site's chevron. On a phone it opens the phone's
   own picker; the theme's color-scheme makes the list follow the ground. The
   chevron is measured from the top, not centred, because forms.js inserts
   its error line inside this wrapper and a centred chevron would slide down
   with it. */
.sel { position: relative; display: block; }
.sel select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 1rem; line-height: 1.3; width: 100%;
  color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--line); border-radius: .45rem;
  padding: .82rem 2.6rem .82rem 1rem; cursor: pointer; text-overflow: ellipsis;
}
.sel::after {
  content: ""; position: absolute; right: 1.05rem; top: 1.25rem; pointer-events: none;
  width: .5rem; height: .5rem;
  border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
  transform: rotate(45deg);
}
.sel select:hover { border-color: var(--gold-deep); }
.sel select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.sel select[aria-invalid="true"] { border-color: var(--bad); }
.sel .field__msg { display: block; }

.reg--abstract textarea { resize: vertical; line-height: 1.55; }
.reg--abstract #body { min-height: 16rem; }

/* The word meter under the abstract body. The number turns when the limit
   is passed; the sentence beside it is the rule the number is measured by. */
.meter { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); }
.meter__n { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter__n[data-over] { color: var(--bad); }

.reg--abstract .consent-line + .consent-line { margin-top: .1rem; }

/* Under 40rem the form's cell padding is the page gutter's worth, which on
   a 390px phone left 254px for a field. The plate keeps a hairline and a
   smaller inset so the fields get the width back. */
@media (max-width: 40rem) {
  .doc .reg--abstract { padding: 1rem .9rem 1.1rem; }
}

/* The guidelines link, now a sibling of the declaration rather than a target
   competing with it inside the label. Tight to the line it belongs to, and
   indented to the label's own left edge rather than the checkbox's. */
.reg--abstract .reg__note--tight {
  margin-top: -.35rem; padding-left: 1.85rem;
}

/* ------------------------------------------------ the sticky strip's room
   A focus scroll puts a field flush under the FIXED bar, which is all the
   browser knows about; the itinerary's route strip is sticky under that bar
   and the browser does not count it. On a tablet in landscape the word-limit
   guard's own focus call therefore put the top 52px of the abstract box
   behind the strip, and a tap on the first line of the text you had just
   been told to shorten landed on the strip's Deadlines link and threw the
   page 6,134px away. Every field on this page now keeps the strip's height
   clear of any scroll that brings it into view, the guard's included. */
.reg--abstract input, .reg--abstract select, .reg--abstract textarea {
  scroll-margin-top: calc(var(--visit-bar, 4.6rem) + var(--route-h, 3.4rem) + 1rem);
}