/*
 * bars.css
 * Horizontal structural strips: action bars, section headers, labeled dividers.
 *
 * These are layout-only patterns — no surface treatment by default. Compose
 * with surface classes (.raised, .outlined) if you want a contained toolbar.
 */

/* ── Bar and Toolbar — two strips, one layout ──────────────────────
 *
 * They look identical and they are not the same thing.
 *
 *   Bar      a horizontal strip. Layout, nothing else. Its contents are
 *            whatever you put there — a heading, a count, a search box, a
 *            group of buttons. No role, no keyboard contract.
 *
 *   Toolbar  a strip whose contents are CONTROLS, presented to assistive
 *            tech as one widget with ONE tab stop. `role="toolbar"` is not
 *            decoration: it makes a promise about the keyboard, and the
 *            promise has to be kept.
 *
 * Default alignment differs because the defaults follow the meaning: a Bar
 * usually carries navigation on one side and actions on the other, so it
 * splits; a Toolbar's controls belong together, so it packs to the start.
 *
 *   <div class="bar">
 *     <div class="cluster"> … left group … </div>
 *     <div class="cluster"> … right group … </div>
 *   </div>
 *
 *   <div class="toolbar" role="toolbar" aria-label="Formatting">
 *     <button class="btn ghost square" aria-label="Bold">…</button>
 *     <button class="btn ghost square" aria-label="Italic">…</button>
 *   </div>
 *
 * ── What this file does not do (Principle 6) ────────────────────────
 *
 * Same split as tabs.css: visual treatment is a class, keyboard behavior
 * is a component. `role="toolbar"` obliges the app to provide
 *
 *   - roving tabindex — one control tabindex="0", the rest tabindex="-1"
 *   - Left/Right (Up/Down when vertical) move between controls
 *   - Home/End jump to first/last
 *
 * A toolbar that announces itself and then does not answer an arrow key is
 * worse than a plain Bar, because it has told the user a lie about how to
 * operate it. If you are not providing the keys, use `.bar` — it is the
 * same strip and it promises nothing.
 *
 * NOTE on `.bar.center`: `center` here is a Bar-scoped alignment modifier
 * (the flexbox value), not the Center layout term. Writing both on one
 * element happens to be harmless — Center's `place-items` lands on a flex
 * container where `.bar` already centers, and patterns beats layout on
 * `display` — but they are two different words that share three letters.
 */

/* Shared layout at zero specificity, so either class's own rules win. */
:where(.bar, .toolbar) {
  display:     flex;
  align-items: center;
  gap:         var(--space-lg);
  padding:     var(--space-sm) 0;
}

.bar     { justify-content: space-between; }
.toolbar { justify-content: flex-start; }

.bar.start,  .toolbar.start  { justify-content: flex-start; }
.bar.center, .toolbar.center { justify-content: center; }
.bar.end,    .toolbar.end    { justify-content: flex-end; }

/* Bordered variant — a contained strip with a bottom rule */
.bar.bordered,
.toolbar.bordered {
  padding:       var(--space-sm) var(--space-lg);
  border-bottom: var(--border-width) solid var(--rule);
}

/* ── Section header — heading on the left, affordance on the right ─
 * The canonical "Tags  [+]" pattern: a Section's title paired with a
 * single trailing control.
 *
 *   <div class="section-header">
 *     <h3 id="tags-heading">Tags</h3>
 *     <button class="btn square" aria-label="Add tag">…</button>
 *   </div>
 */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
  margin-bottom:   0.5rem;
}

/* ── Divider — a plain horizontal rule ─────────────────────────────
 * The Region-tier "Divider". <hr> is the element: it means "thematic
 * break", which is exactly what a rule between sections is, and it is
 * announced as a separator instead of being invisible to assistive tech
 * the way a styled <div> would be.
 *
 *   <hr>
 *   <div class="divider"></div>   <!-- only where <hr> is not allowed -->
 *
 * The UA default is a beveled 3D border that no theme wants, so the
 * border is removed outright and the line drawn as a background — that
 * also lets a theme retint it through --rule alone.
 */
hr, .divider {
  border:       0;
  block-size:   1px;
  inline-size:  100%;
  background:   var(--rule);
  margin-block: 1.5rem;
}

/* ── Divider label — a centered label on a horizontal rule ─────────
 * Day separators in a feed, "OR" between options, section breaks.
 *
 *   <div class="divider-label"><span>Thursday 05/21</span></div>
 */
.divider-label {
  display:     flex;
  align-items: center;
  gap:         var(--space-lg);
  margin:      0.5rem 0;
  color:       var(--ink-mute);
  font-size:   var(--text-sm);
}
.divider-label::before,
.divider-label::after {
  content: "";
  flex:    1;
  height:  1px;
  background: var(--rule);
}

/* ── Kicker — the short uppercase label above a title ──────────────
 *
 * Publishing's word for it: "Structure", "Learn", sitting over the heading it
 * introduces. Not a Badge, which is an inline status, and not a Divider label,
 * which is a break BETWEEN things rather than a label ON one.
 *
 * It ships because the shape existed twice with no owner and the two had
 * drifted apart on every axis — nav's group label at 2xs/600/0.04em/mute
 * against the guide's eyebrow at xs/500/0.1em/accent (`FJS-D253`). The
 * declarations are the ones nav had already tokenized, which is what makes
 * this a promotion rather than a design.
 *
 * No color of its own beyond the muted default: a Kicker that wants the accent
 * takes a tone, orthogonally, the way everything else here does.
 */
.kicker,
.navlist-label {
  font-size:      var(--text-2xs);
  font-weight:    var(--label-font-weight);
  text-transform: var(--label-text-transform);
  letter-spacing: var(--label-letter-spacing);
  color:          var(--ink-mute);
}