/* web/styles/discussion-panel.css */
/* The effective layout is derived by MVU; requested mode remains a preference. */
/* The window below the pages pane, as one grid the three presentations arrange: the bar on its
   own line above the page, and the discussion beside it, under it, or in its margin. The bar is
   part of it rather than above it so that a panel beside the page is a column of the window —
   reaching the top as the pages pane does, with the bar running between the two. */
.reading-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  --discussion-size: 340px;
  /* The loader's insets and the height of the line it stands on, below: the toasts' stack keeps
     that line free (`toasts.css`). The words are 0.85rem, the loader's type. */
  --loader-inset: 0.65rem;
  --retry-inset: 0.2rem;
  --loader-line: calc(0.85rem + 2 * var(--retry-inset) + 2 * var(--loader-inset) + 2px);
}

.reading-area > .toolbar {
  grid-row: 1;
  grid-column: 1;
}

/* A frame is a replaced element: it keeps its own 300×150 unless it is told to fill the cell. */
.reading-area > .document {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* What is laid over the page is laid over the page, not over the bar: an absolutely positioned
   grid child is bounded by the cell it is placed in. */
#document-loader,
.discussion-margin-cards {
  --margin-info-width: 28px;
  --margin-selector-gap: 0.25rem;
  --margin-card-right: 8px;
  grid-row: 2;
  grid-column: 1;
}

/* One loader, one rule: its top on the line of the page's top left corner, the watchers' mark's
   line (`editing-bar.css`), after the mark (its right edge, or the corner with no mark drawn), its
   margins two bar gaps and its width its content's. One inset on every side, and at least Retry's
   height within it in every state alike, so Retry stands as far from each edge it is beside, on
   the words' line or under them, and nothing moves as one state becomes another. */
#document-loader {
  position: absolute;
  z-index: 2;
  top: 0;
  left: anchor(--haiyo-watchers right, 0px);
  right: 0;
  width: fit-content;
  /* Every box holds its padding and border (`shell.css`), so both are counted. */
  min-height: var(--loader-line);
  margin: calc(2 * var(--bar-gap, 0.35rem));
  padding: var(--loader-inset);
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--background) 94%, transparent);
  color: var(--muted);
  font-size: 0.85rem;
  /* What the loader says, and the way to load the document again when it has failed or gone
     quiet, on one line where there is room and one under the other where there is not. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}
#document-loader[hidden] {
  display: none;
}
/* How much of the shell and of the document has arrived, which the early module and then the
   shell draw on the loader's bar. */
#document-loader .loader-bar {
  width: 8rem;
}
#document-retry {
  padding: var(--retry-inset) 0.65rem;
  border-radius: 4px;
}
/* A finger needs a target of its own size: on a phone's width, and wherever the pointer is one,
   Retry is pressed over 44 px of height around it, drawn as it is all the same. It is wider than
   that already. */
@media (max-width: 760px), (pointer: coarse) {
  #document-retry {
    position: relative;
  }
  #document-retry::before {
    content: '';
    position: absolute;
    inset: calc((1em + 2 * var(--retry-inset) - 44px) / 2) 0;
  }
}
/* The edge the panel is dragged by. It carries no label: what puts the panel away is the control
   in the panel's own corner, as it is for the pages pane. */
.discussion-separator {
  width: 10px;
  padding: 0;
  touch-action: none;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 0;
  cursor: col-resize;
}

.discussion-separator:hover {
  background: color-mix(in srgb, var(--accent), transparent 80%);
}

/* The control that puts the panel away, in the panel's own top corner. */
/* The panel's own corner, on the line the bar's controls stand on: the panel begins where the
   bar begins, so its first line is the bar's line. */
#discussion > header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--reader-toolbar-height, 30px);
  padding: 0.25rem var(--corner-inset);
  margin: 0;
  box-sizing: border-box;
  background: var(--reader-toolbar-background, var(--sidebar));
  border-bottom: 1px solid var(--line);
  flex-wrap: nowrap;
}

/* Both are drawn with the pages pane's pair, in `reader.css`: they are the same control. */
.discussion-separator:focus-visible {
  background: var(--held);
}
.discussion {
  min-width: 0;
  min-height: 0;
  border: 0;
  /* Its first line is the bar's line, so it begins where the bar's controls begin. */
  padding: 0;
  display: grid;
  grid-template-rows: var(--reader-toolbar-height, 30px) minmax(0, 1fr);
  overflow: hidden;
  overscroll-behavior: contain;
  font-size: 0.85rem;
  background: var(--sidebar);
}
#threads, #comment-composer {
  grid-row: 2;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 1rem 1rem;
}
#threads > .thread { scroll-margin-top: 0; }
#discussion-collapse svg { width: 18px; height: 18px; }
#discussion-collapse .collapse-bottom { display: none; }
[data-layout-mode='bottom'] #discussion-collapse .collapse-side { display: none; }
[data-layout-mode='bottom'] #discussion-collapse .collapse-bottom { display: inline-flex; }

.discussion header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.discussion header h2 {
  margin-top: 0;
  margin-right: auto;
}
.discussion blockquote {
  margin: 1rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--sidebar);
}
.discussion textarea,
.discussion-margin-cards textarea {
  display: block;
  width: 100%;
  padding: 0.6rem;
  margin: 0.5rem 0;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
}
/* What is written in a discussion is set as what is read in it: a comment's size, which follows
   the reader's comment text size, and its line height. A field holds ten lines before it scrolls,
   its padding and border included (`box-sizing: border-box`). It is drawn as the title field
   above it (`shell.css`): on the page's background, not the browser's own field colour. */
:is(.discussion, .discussion-margin-cards, #publication-discussion) textarea {
  background: var(--background);
  font-size: calc(0.85rem * var(--comment-text-size, 1));
  line-height: inherit;
  min-height: calc(10lh + 1.2rem + 2px);
}
/* A discussion's own buttons. The bar's marks it holds, such as the comment size control, are the
   bar's controls and keep the bar's drawing (`.bar-mark`). The exception adds no weight, so every
   rule for a discussion's own buttons still outranks this one as before. */
.discussion button:where(:not(.bar-mark)),
.discussion-margin-cards button:where(:not(.bar-mark)) {
  font-size: 0.8rem;
  margin: 0.2rem;
  padding: 0.4rem 0.6rem;
}
.discussion form[hidden] {
  display: none;
}
/* Put away, the panel takes no room and neither does the edge it is dragged by: what brings it
   back is the control in the bar. */
.reading-area:has(> .discussion.collapsed) > .discussion-separator {
  display: none;
}

.reading-area .discussion.collapsed {
  /* Put away is put away: what the panel holds is not shown, so nothing in it is drawn, measured or
     held to a signal of its own while the panel is away. */
  display: none;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* Beside the page: a column of the window, from the top of it to the bottom. */
.reading-area[data-layout-mode='right'] {
  grid-template-columns: minmax(0, 1fr) auto var(--discussion-size);
}

.reading-area[data-layout-mode='right']:has(> .discussion.collapsed) {
  grid-template-columns: minmax(0, 1fr) auto 0;
}

.reading-area[data-layout-mode='right'] > .discussion-separator,
.reading-area[data-layout-mode='right'] > .discussion {
  grid-row: 1 / span 2;
}

.reading-area[data-layout-mode='right'] > .discussion-separator {
  grid-column: 2;
  /* Drawn as the pages pane's edge (`pane.css`), mirrored: one line, the pane's border, and over it
     the seven-pixel strip it is caught by, lit the same way when pointed at — two pixels of it on the
     panel's side and four on the page's, as the pages pane's has. */
  position: relative;
  z-index: 5;
  width: 1px;
  border: 0;
  background: var(--line);
}
.reading-area[data-layout-mode='right'] > .discussion-separator::before {
  content: '';
  position: absolute;
  inset: 0 -2px 0 -4px;
}
.reading-area[data-layout-mode='right'] > .discussion-separator:hover {
  background: var(--line);
}
.reading-area[data-layout-mode='right'] > .discussion-separator:hover::before {
  background: color-mix(in srgb, var(--accent), transparent 70%);
}
.reading-area[data-layout-mode='right'] > .discussion-separator:focus-visible::before {
  background: var(--held);
}

.reading-area[data-layout-mode='right'] > .discussion {
  grid-column: 3;
}
.thread {
  border-top: 1px solid var(--line);
  margin-top: 1.3rem;
  padding-top: 1rem;
  overflow-wrap: anywhere;
}
.thread h3 {
  font-size: calc(0.85rem * var(--comment-text-size, 1));
}
.thread:focus-visible,
#threads > .thread.is-active {
  outline: 2px solid var(--focus);
  /* The ring stands off the discussion, whose heading and comments begin at its edge, within the
     list's padding. */
  outline-offset: 0.5rem;
  /* Scrolled to its top, the discussion keeps its ring in the list's view. */
  scroll-margin-top: calc(0.5rem + 2px);
}
.comment {
  border-top: 1px solid var(--line);
  padding: 0.5rem 0;
}
.comment-meta {
  font-size: 0.7rem;
  color: var(--muted);
}
.comment-body {
  font-size: calc(0.85rem * var(--comment-text-size, 1));
  white-space: pre-wrap;
}
/* A write of this browser's not sent yet (`reader/discussion-pending.mjs`): drawn as done, with
   what became of it in words beside it, and nothing else to do with it but what the mark offers. */
.pending-mark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0.25rem 0 0;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
}
.pending-mark[data-pending-state=failed] {
  font-style: normal;
  color: var(--text);
}
.pending-mark button {
  font-size: inherit;
}
/* A refusal's Retry and Discard stand together, after its reason. */
.pending-choices {
  display: inline-flex;
  gap: 0.5rem;
}
.comment-editor {
  margin-block: 1em;
}
.comment-editor textarea {
  margin: 0;
}
.comment details {
  margin: 0.5rem 0;
}
.discussion summary,
.thread summary {
  cursor: pointer;
}
.edited {
  font-weight: 600;
}
.comment-tree {
  list-style: none;
  margin: 0.4rem 0 0;
  padding-left: 0.5rem;
  border-left: 1px solid var(--line);
}
/* Preserve nested list relationships while bounding indentation in narrow panels and cards. */
.comment-tree .comment-tree .comment-tree .comment-tree .comment-tree {
  padding-left: 0;
  border-left: 0;
}
.comment-tree > li {
  margin: 0;
}
.thread[data-attached='false'],
.margin-card.is-unattached {
  background: var(--raised);
  color: var(--muted);
  border-color: var(--line);
}
/* A discussion whose passage is gone has no place in the panel: beside the page, under it, or in
   a phone's sheet. In cards mode it stands as a muted card. */
.reading-area:not([data-layout-mode='margin']) #threads > .thread[data-attached='false'] {
  display: none;
}
.margin-card.is-unattached .margin-card-selector {
  background: var(--held);
  color: inherit;
}

.thread-heading,
.margin-card-heading {
  display: flex;
  align-items: center;
  gap: var(--margin-selector-gap, 0.25rem);
  position: relative;
}
.thread-heading h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
}
[data-layout-mode='right'] .thread-heading {
  gap: 32px;
}
.thread-info {
  flex: none;
}
.thread-info > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--margin-info-width, 28px);
  height: 28px;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.thread-info > summary::-webkit-details-marker {
  display: none;
}
.thread-info-content {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  width: min(300px, 100%);
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--background);
  box-shadow: 0 3px 12px var(--shadow);
  overflow-wrap: anywhere;
}
.margin-card .thread-heading {
  display: none;
}
.margin-card-heading .margin-card-selector {
  flex: 1;
  min-width: 0;
}
.comment-actions {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  /* Six controls stand here and the panel beside a page is narrow; they are spaced to fit on the
     one line rather than to leave one of them alone on a second. */
  gap: 0.2rem;
  margin-block: 0.35rem;
}
/* A finger needs a target of its own size: on a phone's width, and wherever the pointer is one,
   each action is pressed over 44 px around it, drawn as it is all the same. The controls are 28 px,
   so each reaches 8 px past its edges, and the row leaves 8 px above and below it and 18 px between
   them: no action's reach covers another's, with a pixel to spare on each side, since a press is
   found on whole pixels and the row may stand on a half one. */
@media (max-width: 760px), (pointer: coarse) {
  .comment-actions {
    gap: 18px;
    margin-block: 8px;
  }
  .comment-actions > button,
  .comment-actions > form > button,
  .comment-actions .reaction-trigger {
    position: relative;
  }
  .comment-actions > button::before,
  .comment-actions > form > button::before,
  .comment-actions .reaction-trigger::before {
    content: '';
    position: absolute;
    /* 8 px past the drawn edge: the inset is measured from inside the 1 px border. */
    inset: -9px;
  }
}
/* The reactions a comment holds, under it: each emoji with its count, and the control that offers
   another at the end. It wraps rather than pushing the panel sideways. */
.comment-reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block: 0.35rem 0;
}
.comment-actions > form,
.comment-reactions > form {
  display: contents;
}
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 28px;
  padding: 0.1rem 0.5rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.reaction-count {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
/* The reader's own reaction is marked in the colour the application draws attention in. */
.reaction-chip[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.reaction-chip[aria-pressed='true'] .reaction-count {
  color: var(--accent);
}
.reaction-chip:hover {
  background: var(--raised);
}
.comment-actions > form > button,
.comment-actions > button,
:is(#comment-composer, #page-comment-composer, .reply-actions) > button,
.thread-info-content button,
.comment-actions .reaction-trigger,
.comment-reactions .reaction-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.35rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  list-style: none;
}
/* A control that is only its mark: square, and the height of the controls it stands beside, so
   the row of them reads as one row rather than as one tall thing among short ones. */
.comment-actions .comment-mark,
.comment-reactions .comment-mark {
  width: 28px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
}

.comment-actions .comment-mark > svg,
.comment-reactions .comment-mark > svg {
  width: 1rem;
  height: 1rem;
}

/* Reply says its name beside its mark, the mark a little larger than the name. */
.comment-actions .reply-open {
  gap: 0.25rem;
}
.comment-actions .reply-open > .control-glyph {
  width: 0.875rem;
  height: 0.875rem;
}

/* A comment still waiting to be read says so in the colour the application draws attention in. */
.comment-actions .comment-read[data-read='false'] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--accent);
}
.reply-actions,
.editor-actions {
  display: flex;
  gap: 0.35rem;
}
/* The composer's buttons stand apart as a reply's do. */
#comment-composer > button + button {
  margin-inline-start: 0.35rem;
}
.comment-actions button:hover,
:is(#comment-composer, #page-comment-composer, .reply-actions) > button:hover,
.comment-reactions .reaction-trigger:hover,
.thread-info > summary:hover {
  background: var(--raised);
  color: var(--text);
}
.reaction-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(344px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 16px));
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--background);
  color: var(--text);
  box-shadow: 0 5px 24px rgb(36 51 46 / 0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.reaction-picker input {
  width: 100%;
  margin-block: 0.3rem;
}
.reaction-favorites,
.reaction-results {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.2rem;
}
.reaction-favorites {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.reaction-picker button[data-emoji] {
  min-height: 36px;
  padding: 0.25rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
}
.reaction-picker button[data-emoji]:hover,
.reaction-picker button[aria-pressed='true'] {
  background: var(--raised);
  border-color: var(--line);
}
/* Under the page: the bar, the page, the edge, and the discussion, in that order. */
.reading-area[data-layout-mode='bottom'] {
  grid-template-rows: auto minmax(0, 1fr) auto var(--discussion-size);
}

.reading-area[data-layout-mode='bottom']:has(> .discussion.collapsed) {
  grid-template-rows: auto minmax(0, 1fr) auto 0;
}

.reading-area[data-layout-mode='bottom'] > .discussion-separator {
  grid-row: 3;
  grid-column: 1;
  width: 100%;
  height: 10px;
  border: 0;
  border-block: 1px solid var(--line);
  cursor: row-resize;
}

.reading-area[data-layout-mode='bottom'] > .discussion {
  grid-row: 4;
  grid-column: 1;
  width: 100%;
}
.reading-area[data-layout-mode='margin'] > .document {
  width: 100%;
}
/* Over the margin the discussion is the page's cards, not a panel: what the panel holds is shown
   only while the reader is writing in it there. */
.reading-area[data-layout-mode='margin']:not([data-margin-composer]) > .discussion {
  display: none;
}
.reading-area[data-layout-mode='margin'] .discussion {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.reading-area[data-layout-mode='margin'] .discussion-separator {
  display: none;
}
.reading-area[data-layout-mode='margin'][data-margin-composer] .discussion {
  grid-row: 2;
  grid-column: 1;
  z-index: 4;
  right: 8px;
  top: 8px;
  width: var(--margin-card-width);
  height: auto;
  max-height: calc(100% - 16px);
  padding: 0.8rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow);
}
.discussion-margin-cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.margin-card-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  scrollbar-gutter: stable;
  pointer-events: none;
}
.discussion-margin-cards[data-active='true'] .margin-card-viewport {
  left: auto;
  width: calc(var(--margin-card-width) + 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-block: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}
/* A margin too narrow for a card stands the open card over the page, where the markers beside the
   passages stand too. What holds it is as tall as the card, and at most the page's height, where it
   scrolls: below it the presses are the page's, so another marker opens its own card and a press on
   the page puts this one away. */
.reading-area[data-cards-overlay] .discussion-margin-cards[data-active='true'] .margin-card-viewport {
  bottom: auto;
  max-height: 100%;
}
.margin-card-deck {
  position: relative;
  height: 0;
  z-index: 2;
  pointer-events: none;
}
.discussion-margin-cards[data-active='true'] .margin-card-deck {
  flex: none;
  width: var(--margin-card-width);
  margin-right: var(--margin-card-right);
}
.discussion-margin-cards[data-active='true'] .margin-card-deck .margin-card {
  right: 0;
}
.margin-card.is-active {
  position: relative;
  right: auto;
  flex: none;
  margin-right: var(--margin-card-right);
}

/* web/styles/discussion-cards.css */
/* The arrows at the document's top and bottom edges stand on the numbered source markers' axis,
   in every discussion mode: one at the top for the nearest discussion above what is in view, one
   at the bottom for the nearest below. They are drawn like the source markers, in the accent
   colour with the background colour on it, so they read in every theme. They stand over the page and
   its connectors, and under the cards in the margin (`discussion-panel.css`): where a card and one
   of them meet, the card is on top (the user, 2026-10-21). */
.document-beyond,
.document-number-toggle {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--comment-marker-size);
  height: var(--comment-marker-size);
  padding: 0;
  margin: 0;
  border: 2px solid var(--background);
  border-radius: 50%;
  background: var(--accent);
  color: var(--background);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  cursor: pointer;
}
.document-beyond[data-direction='next'] {
  transform: translate(-50%, -100%);
}
.document-beyond[hidden],
.document-number-toggle[hidden] {
  display: none;
}
.document-beyond svg,
.document-number-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.document-beyond:hover,
.document-beyond:focus-visible,
.document-number-toggle:hover,
.document-number-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* The control beside the top arrow that goes to a discussion by its number: drawn as the arrows
   are, above. The field it opens beside it has the arrows' shape and height in the bar's own control
   colours, as the UI's field. Each stands the arrows' gap from the next. */
.document-number-toggle {
  /* It stands from its left edge, left of the arrow's place rather than on it. */
  transform: none;
}
.document-number {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  /* Four digits and the control's own padding, at the control's height. */
  width: calc(4ch + 1.4rem + 2px);
  height: var(--comment-marker-size);
  margin: 0;
  padding: 0 0.7rem;
  border: 1px solid var(--control-line);
  border-radius: calc(var(--comment-marker-size) / 2);
  background: var(--control);
  color: var(--control-text);
  font: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* The focus is the border's colour: the field is only ever open with the focus in it. */
  outline: none;
}
.document-number:focus,
.document-number:focus-visible {
  border-color: var(--focus);
  /* In place of the shell's ring for a focused field (`shell.css`). */
  outline: none;
}
.document-number:not([data-open]) {
  visibility: hidden;
}
.document-number[hidden] {
  display: none;
}
/* A phone's browser zooms in on a field whose text is under 16 px as it takes the focus: on a
   phone the digits are 16 px, and the field keeps the control's height, so its edges stay level
   with the control's; its width, in digits, grows with them. */
@media (max-width: 760px) {
  .document-number {
    font-size: 16px;
  }
}
/* A number none of the comments shown has: its border and its digits in the error's colour. */
.document-number[data-absent],
.document-number[data-absent]:focus {
  border-color: var(--alert);
  color: var(--alert);
}
/* A finger needs a target of its own size: on a phone's width, and wherever the pointer is one,
   the control is pressed over 44 px around it, drawn at the arrows' size all the same. The area is
   placed from inside the control's border, the arrows' 2px. The arrow, standing over it, keeps its
   own presses. */
@media (max-width: 760px), (pointer: coarse) {
  .document-number-toggle::before {
    content: '';
    position: absolute;
    inset: calc((var(--comment-marker-size) - 44px) / 2 - 2px);
  }
}

/* A card's number follows its title: the number the document gives the discussion, which its
   marker beside the passage shows. */
.margin-card-number {
  display: inline;
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.margin-card {
  position: absolute;
  right: var(--margin-card-right);
  width: var(--margin-card-width);
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(36 51 46 / 0.1);
  pointer-events: auto;
  font-size: 0.85rem;
}
.margin-card .margin-card-selector {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 8px;
  margin: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.margin-card-selector[aria-expanded='true'] {
  color: var(--accent);
  background: var(--raised);
}
.margin-card-selector:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.margin-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}
.margin-card.is-active .margin-card-body {
  grid-template-rows: 1fr;
  animation: card-reveal 180ms ease;
}
.margin-card-content {
  min-height: 0;
  overflow: hidden;
}
.margin-card .thread {
  margin: 0;
  padding: 0.8rem;
}
@keyframes card-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .margin-card,
  .margin-card-body {
    transition: none;
    animation: none !important;
  }
}
.discussion-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.discussion-connectors path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.discussion-connectors circle {
  fill: var(--background);
  stroke: var(--muted);
  stroke-width: 1;
}
/* web/styles/discussion-presentation.css */
/* How the discussion is presented keeps the end of the bar: what acts on the page sits beside the
   page's own controls, and this is what the reader is looking at it through. */
#discussion-mode {
  position: relative;
}
#discussion-mode summary {
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: 4px;
}
#discussion-mode summary:hover {
  background: var(--sidebar);
}
@media (prefers-contrast: more) {
  .discussion-connectors path,
  .discussion-connectors circle {
    stroke: CanvasText;
    stroke-width: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .layout > aside {
    transition: none;
  }
}

/* web/styles/discussion-phone.css */
/* Over the page: the phone's one presentation.
   There is no column beside the page and no panel under it, so a discussion is a sheet over the
   whole window, reached from the text by a marker or a comment control and left by the close that
   is always in the corner of it. What was being written is kept: closing puts the sheet away, it
   does not discard anything. */
.reading-area[data-layout-mode='sheet'] > .discussion {
  /* No row for a bar: the header stands in the corner, out of the sheet's flow. */
  grid-template-rows: 0 minmax(0, 1fr);
  position: fixed;
  inset: 0;
  z-index: 40;
  width: auto;
  height: auto;
  max-width: none;
  padding: 3.25rem 1rem 1.5rem;
  overflow: auto;
  background: var(--background);
}

.reading-area[data-layout-mode='sheet'] > .discussion.collapsed,
.reading-area[data-layout-mode='sheet'] > .discussion-separator,
.reading-area[data-layout-mode='sheet'] .discussion-connectors,
/* One way out, and it is the one in the corner that is always in view. */
.reading-area[data-layout-mode='sheet'] #discussion-collapse {
  display: none;
}

/* The sheet has no bar: its header holds only the comments' text size, which stands in the
   corner beside the close button, to its left, so the discussions take the sheet from its top. */
.reading-area[data-layout-mode='sheet'] > #discussion > header {
  position: fixed;
  z-index: 41;
  top: max(0.6rem, env(safe-area-inset-top));
  right: calc(max(0.6rem, env(safe-area-inset-right)) + 2.5rem + 0.5rem);
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 0;
}

/* Reached for one discussion, the sheet holds that discussion alone. */
.reading-area[data-layout-mode='sheet'] > .discussion[data-single] #threads > .thread:not(.is-active) {
  display: none;
}

#discussion-close {
  display: none;
}

.reading-area[data-layout-mode='sheet']:has(> .discussion:not(.collapsed)) > #discussion-close {
  display: grid;
  place-items: center;
  position: fixed;
  z-index: 41;
  top: max(0.6rem, env(safe-area-inset-top));
  right: max(0.6rem, env(safe-area-inset-right));
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--background);
  color: var(--text);
  box-shadow: 0 2px 10px var(--shadow);
}

.margin-card-title {
  font-size: calc(0.85rem * var(--comment-text-size, 1));
}
#discussion > header > .text-size {
  margin-left: auto;
}