/* burble-core.css / core-text.css: Running text, truncated text, numbers, text links, tooltips.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Running text ─────────────────────────────────────────────
   Text outside a card body or panel, which style their own:
     .bc-text        a paragraph of explanation (13px)
     .bc-text--soft  the same, quieter
     .bc-note        small print under a form or a button (12px)
     .bc-group-label a small capitalised label over a group of choices */
.bc-text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-strong);
}
.bc-text--soft {
  color: var(--text-soft);
}
.bc-text:last-child {
  margin-bottom: 0;
}
.bc-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-soft);
}
.bc-group-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sl-500);
}

/* ── Truncated text ───────────────────────────────────────────
   One line, cut off with an ellipsis where it runs out of room. It needs a
   width to run out of: a table cell only clips in a table-layout: fixed
   table (an auto table widens the column instead). min-width: 0 lets it
   shrink and clip as an item in a flex row; elsewhere it does nothing. */
.bc-text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Numbers ──────────────────────────────────────────────────
   Every digit the same width, so a column of amounts or counts lines up
   digit for digit. */
.bc-text-num {
  font-variant-numeric: tabular-nums;
}

/* ── Text link ────────────────────────────────────────────────
   A real <a> that reads as a link rather than a control — Preview, Delete, a
   mailto, a "read more". Anything that looks like a button belongs to .bc-btn
   instead, and anything that navigates the app chrome (sidebar, tabs, cards,
   breadcrumb) has its own component.

   Two forms, because it started as a wrapper:

     <a class="bc-link">Delete</a>            one link
     <div class="bc-link"> <a>…</a> </div>    a row of them, 10px apart

   The row form sets display:flex, which would turn a single inline link into a
   block and break it mid-sentence — hence :not(a). */
.bc-link:not(a) {
  display: flex;
  align-items: center;
  gap: 10px;
}

a.bc-link,
.bc-link a {
  color: var(--teal);
  text-decoration: none;
}
/* Every standard text link is 13.5px. The row is small print under a
   control, so its links set their own, smaller size. */
a.bc-link {
  font-size: 13.5px;
}
.bc-link a {
  font-size: 12px;
}
a.bc-link:hover,
.bc-link a:hover {
  color: var(--teal-strong);
  text-decoration: underline;
}
/* An animated link ("Read more"): bolder than a link in a sentence, and its arrow slides
   out on hover. The arrow is the link's <i>, after its <span> text. */
a.bc-link--animated {
  gap: 6px;
  transition: gap 0.15s;
}
a.bc-link--animated:hover {
  gap: 10px;
}
/* A link that is a <button> (it runs a script rather than going somewhere):
   the button's own box is taken away so it reads as the link beside it. */
button.bc-link {
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--teal);
  background: none;
  border: 0;
  cursor: pointer;
}
button.bc-link:hover {
  color: var(--teal-strong);
  text-decoration: underline;
}
button.bc-link:disabled {
  color: var(--sl-400);
  text-decoration: none;
  cursor: not-allowed;
}
/* The pipe between View and Remove is .bc-sep. */

.bc-tooltip {
  display: inline-flex;
  align-items: center;
  color: var(--sl-400);
  cursor: help;
}
.bc-tooltip:hover {
  color: var(--sl-500);
}
/* A note that warns: something is set but will not take effect. */
.bc-tooltip--warn,
.bc-tooltip--warn:hover {
  color: var(--warn);
}

/* ── Tooltip bubble ───────────────────────────────────────────
   The panel Bootstrap builds from a title, paired with the .bc-tooltip mark
   above. Its own look is a black box at 90% opacity; this is the redesign's.

   Unscoped on purpose. Bootstrap inserts the bubble next to the trigger, not
   inside any page wrapper, so .bc-page would not always reach it — and it does
   not need the extra weight: burble-core.css is loaded after bootstrap.min.css
   in both redesign shells, so an equal-specificity rule wins on order. The
   classic pages never load this file.

   The arrow is a CSS triangle made of borders, so its colour has to be set per
   placement — four fixed, plus the four Bootstrap picks when placement is auto. */
.tooltip.show {
  /* 0.9 over white reads as washed-out grey; the shadow gives the separation
     the transparency was doing. */
  opacity: 1;
}
.tooltip-inner {
  max-width: 260px;
  padding: 7px 10px;
  background: var(--white);
  color: var(--text-strong);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-rest);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
/* Two layers. ::before is Bootstrap's own triangle, recoloured to the border;
   ::after is a second one of the same size laid 1px further into the bubble, so
   what survives of the first is a rim along the two slanted edges. A single
   triangle can only be one colour, and a border-coloured one against a white
   bubble reads as a grey blob rather than a pointer.

   1px of the white layer lands on the bubble's own border, which is what closes
   the seam: .arrow is positioned and .tooltip-inner is not, so the arrow paints
   above it and the border disappears across the arrow's width.

   Each ::after repeats its ::before's border-width — a border triangle has no
   shape of its own to inherit — and shifts on the axis that points at the
   bubble: up for a tooltip above the trigger, down for one below, and so on. */
.tooltip .arrow::after {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--border-color);
}
.bs-tooltip-top .arrow::after,
.bs-tooltip-auto[x-placement^="top"] .arrow::after {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: var(--white);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--border-color);
}
.bs-tooltip-bottom .arrow::after,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::after {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: var(--white);
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--border-color);
}
.bs-tooltip-left .arrow::after,
.bs-tooltip-auto[x-placement^="left"] .arrow::after {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: var(--white);
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--border-color);
}
.bs-tooltip-right .arrow::after,
.bs-tooltip-auto[x-placement^="right"] .arrow::after {
  right: -1px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: var(--white);
}

/* ── URL row ──────────────────────────────────────────────────
   A web address to copy: an optional label, the address in the mono face
   (it wraps anywhere, so a long one never widens its column), and usually a
   copy button. A row sits in a grid cell or a panel; rows stacked in one
   place are 8px apart.

     <div class="bc-url-row">
       <span class="bc-url-label">Home page:</span>
       <a class="bc-url-link" href="…">https://…</a>
       <button class="bc-btn bc-btn--outline bc-btn--sm bc-btn--icon">…</button>
     </div>                                                           */
.bc-url-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 9px;
}
.bc-url-row + .bc-url-row {
  margin-top: 8px;
}
/* Side by side in a grid, the grid's gap spaces them instead. */
:is(.bc-grid, .bc-grid-2, .bc-grid-3, .bc-grid-4, .bc-grid-auto, .bc-grid-fill)
  > .bc-url-row
  + .bc-url-row {
  margin-top: 0;
}
.bc-url-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.bc-url-link {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  word-break: break-all;
  text-decoration: none;
}
.bc-url-link:hover {
  color: var(--teal-strong);
  text-decoration: underline;
}
.bc-url-link code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
}

/* ── Steps ────────────────────────────────────────────────────
   A numbered how-to. --nested for a list of sub-steps inside one step, under
   a .bc-steps-title.                                                  */
.bc-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-strong);
}
.bc-steps:last-child {
  margin-bottom: 0;
}
.bc-steps > li {
  margin-bottom: 8px;
}
.bc-steps--nested {
  margin: 8px 0 0;
}
.bc-steps-title {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

/* ── Prose ────────────────────────────────────────────────────
   Text someone wrote in an editor and the page shows as it came — release
   notes, announcements: paragraphs, lists, links, inline code. Only the
   spacing and the few elements an editor produces are set; links are the
   usual teal link.                                                   */
.bc-prose {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-strong);
}
.bc-prose p {
  margin: 0 0 0.6em;
}
.bc-prose ul,
.bc-prose ol {
  margin: 0.4em 0 0.6em;
  padding-left: 22px;
}
.bc-prose li {
  margin-bottom: 3px;
}
.bc-prose > :last-child {
  margin-bottom: 0;
}
.bc-prose a {
  word-break: break-word;
}
.bc-prose strong {
  color: var(--text);
}
.bc-prose code {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--sl-100);
  border-radius: 4px;
}