/* ======================================================================
 * rnc.css: what the BeNav5 RNC site adds to site.css
 *
 * The RNC pages use the BeMap API site's stylesheet and components; this
 * file holds only what Confluence's pages bring that the API site has not:
 * info and warning panels, the collapsible examples, a figure, and a
 * command's name as its title. Its own file, so the BeMap API site's
 * stylesheet, and the hash its pages ask for it by, stay as they are.
 * Plain punctuation only, like every published file (site/typography.js).
 * ====================================================================== */

.callout-info { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-wash); }
.callout-info .icon { color: var(--accent); }
.callout-warning { border-color: color-mix(in srgb, #d97706 40%, var(--line)); background: color-mix(in srgb, #d97706 8%, var(--bg)); }
.callout-warning .icon { color: #d97706; }
.callout > div > p:first-child { margin-top: 0; }
.callout > div > p:last-child, .callout > div > ul:last-child { margin-bottom: 0; }

/* A Confluence "expand": an example of use, folded by default. */
details.rnc-example { margin: 1rem 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
details.rnc-example > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline; }
details.rnc-example > summary::-webkit-details-marker { display: none; }
details.rnc-example > summary::before { content: "+"; font-family: var(--mono); color: var(--accent); }
details[open].rnc-example > summary::before { content: "\2212"; }
details.rnc-example > summary:hover { color: var(--accent); }
details.rnc-example > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rnc-example-body { padding: 0 16px 6px; border-top: 1px solid var(--line); }

.rnc-figure { margin: 1.2rem 0; }
.rnc-figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* A command's or a notification's name is its title, as code reads it. */
.rnc-name { font-family: var(--mono); overflow-wrap: anywhere; }
.rnc-badges { margin: -.4rem 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; }
.rnc-method .lede code { font-size: .92em; }
.rnc-steps { margin: 1.4rem 0 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.doc .op-list .op-title code { font-size: .9em; }

/* A command in a list: its name, then what it does. The API site's rows
   keep a column for an HTTP method, which a command has not. */
.op-row.rnc-row { grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr); }
.op-row.rnc-row .op-path { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 900px) {
  .op-row.rnc-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .op-row.rnc-row .op-title { display: block; white-space: normal; }
}

/* A command named in the text links its page: its code reads as a link. */
.doc a > code { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.doc a:hover > code { text-decoration: underline; }

/* The generic errors: a message is one identifier, never broken. */
.rnc-errors td:nth-child(-n+2) code { white-space: nowrap; }
/* Its meaning stays readable on a phone: the table scrolls in its box rather than crush the column to a few letters. */
.rnc-errors td:nth-child(3) { min-width: 15rem; }

/* A list's description wraps, never cut with an ellipsis; its rows reach the box's edges. */
.doc .op-list { padding-left: 0; }
.doc .op-list li { margin: 0; }
.op-row.rnc-row .op-title { white-space: normal; overflow: visible; }

/* The home page: the API site's hero and bands. A group's commands are its
   chips; the introduction stands beside the pages' banner; the diagrams in
   two cards, each image whole and on white (they are drawn on white). */
.rnc-hero .eyebrow { letter-spacing: .08em; }
/* The count under the buttons, in the stronger grey: the faint one reads 4.37:1 on the hero's light glow. */
.rnc-hero .hero-meta { color: var(--ink-2); }
/* Where the words come from: under the count, plain, no dot. */
.rnc-hero .rnc-source { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; }
.rnc-hero .rnc-source a .icon { width: 13px; height: 13px; vertical-align: -2px; }
.page-home .card-chips .chip { font-family: var(--mono); font-size: 12px; }
.rnc-intro .rnc-figure { margin: 0; }
.rnc-intro .rnc-figure img { width: 100%; }
.rnc-diagrams { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.rnc-diagram { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rnc-diagram .rnc-figure { margin: 0; display: grid; place-items: center; background: #fff; border-radius: var(--radius); padding: 12px; }
.rnc-diagram .rnc-figure img { border: 0; max-height: 520px; width: auto; max-width: 100%; }
/* A heading inside a diagram's card is its subtitle, not a section's. */
.rnc-diagram :is(h2, h3, h4) { margin: 0; font-size: 14px; color: var(--ink-3); font-weight: 600; }
.rnc-diagram :is(h2, h3, h4) .anchor { display: none; }
/* Command groups four across (seven read 4 and 3); the two notification groups share the row. */
.rnc-groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.rnc-groups-fill { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.rnc-diagram p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* Last: a forced-colors rule loses to a later rule of the same weight. */
@media (forced-colors: active) {
  details.rnc-example, .rnc-figure img { border-color: CanvasText; }
  .callout-warning, .callout-info { border-color: CanvasText; }
}