/* The samples-stack page — no framework, no build step: this folder IS the
   deployed site, uploaded as the Pages artefact unchanged.

   The custom properties are the ones abap2UI5/samples-controls uses, on
   purpose: three sibling repositories publish three pages, and a reader who
   walks the learning path should not have to re-learn what a badge looks like
   halfway up. Light and dark are both driven off this one set, so a colour is
   decided once. */

:root {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --panel: #ffffff;
  --card: #ffffff;
  --ink: #1c2126;
  --ink-soft: #5b6771;
  --ink-faint: #86929c;
  --line: #dde3e9;
  --line-soft: #eaeef2;
  --accent: #d03c4a;
  --accent-ink: #ffffff;
  --accent-soft: #fceced;
  --ok: #256f3a;
  --ok-soft: #e6f3ea;
  --warn: #8a5300;
  --warn-soft: #fdf1de;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;

  /* The container every one of the three sample pages centres in, and its
   * gutter. Identical in all three - a reader switching page must not see the
   * column move. The shared blocks at the end of this file hard-code the same
   * two numbers; these are here for the rules above. */
  --wide: 1180px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181c;
    --panel: #1b2026;
    --card: #1b2026;
    --ink: #e6ebef;
    --ink-soft: #a3b0ba;
    --ink-faint: #7c8892;
    --line: #2b333b;
    --line-soft: #232a31;
    --accent: #ef8b93;
    --accent-ink: #1a1013;
    --accent-soft: #3a2126;
    --ok: #7fca97;
    --ok-soft: #1c2b22;
    --warn: #e0b072;
    --warn-soft: #2d2519;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* No side padding: the gutter belongs to the containers, so the masthead and
     the bar above it can run to the edge of the window like the sibling pages. */
  padding: 0 0 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); }

code {
  font-family: var(--mono);
  font-size: .92em;
  word-break: break-word;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------- masthead */

/* .masthead, .brand, h1 and .lede are shared with the two sibling pages and
   live at the end of this file. What follows is this page's own: the smaller
   lede the packages section uses, and the note about the missing playground
   button, which neither of the others has. */

.lede.small { font-size: .9rem; max-width: 46rem; }

.masthead .note {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- panel */

main { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

.panel {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem .6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

.q { position: relative; }

.q input {
  width: 100%;
  padding: .75rem 2.6rem .75rem .9rem;
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.q input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--panel);
}

.q .hint {
  position: absolute;
  right: .7rem; top: 50%;
  transform: translateY(-50%);
  padding: .1rem .4rem;
  font: 400 .75rem/1.4 var(--mono);
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 4px;
  pointer-events: none;
}
.q input:not(:placeholder-shown) ~ .hint { display: none; }

/* The technology facet is chips rather than a select: ten values, and seeing
   all ten at once IS half the answer to "what is in this repository". */
.chips { margin: .8rem 0 0; padding: 0; border: 0; }
.chips > div { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
  padding: .25rem .6rem;
  font: 500 .82rem/1.4 inherit;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.chip .n { font: 600 .74rem var(--mono); opacity: .75; }

.facet { margin: .8rem 0 0; }

.facet label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.facet select {
  width: 100%;
  max-width: 26rem;
  margin-top: .15rem;
  padding: .4rem .5rem;
  font-size: .92rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.facet .note {
  display: block;
  margin-top: .15rem;
  font-size: .74rem;
  color: var(--ink-faint);
}

.resultline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  margin: .75rem 0 .4rem;
  font-size: .85rem;
  color: var(--ink-soft);
}

.linkish {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* The line above the results when one technology is picked: what the package
   is, what it plays with, where its branch is. */
.pkgline {
  margin: 0 0 1.2rem;
  padding: .75rem .9rem;
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--accent-soft);
  border-radius: var(--radius);
}
.pkgline b { color: var(--ink); }

/* --------------------------------------------------------------- cards */

#results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr));
  gap: .9rem;
}

.card {
  display: flex;
  flex-direction: column;
  padding: .95rem 1rem .8rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* The thumbnail: the render gate's photograph of the first screen. The
   sibling pages float it beside the text; these cards are narrow grid columns
   (and flex columns, where a float is just another item), so here it is a
   banner across the top instead. Shot at 800x600 and cropped from the top by
   object-fit, so nothing is squashed. Always on a white ground - the
   screenshots are taken in the light theme, and a transparent edge on a dark
   card would read as a rendering mistake. An <img> that fails to load has
   removed itself (stack.js), so there is no broken-picture state to style. */
.card .shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  margin: 0 0 .6rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
}

.card h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.card .sub {
  margin: .2rem 0 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* The class name, which is how a sample is NAMED here: a number on its own
   does not qualify one — the three sample repositories reuse each other's
   freely, and only the prefix separates them. */
.card .cls {
  margin: .25rem 0 0;
  font: .78rem/1.4 var(--mono);
  color: var(--ink-faint);
  word-break: break-all;
}

.card .blurb {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .6rem 0 0;
}

.badge {
  padding: .1rem .45rem;
  font: 600 .72rem/1.6 var(--mono);
  border-radius: 999px;
  white-space: nowrap;
}
.badge.tech  { color: var(--accent); background: var(--accent-soft); }
.badge.cloud { color: var(--ok);     background: var(--ok-soft); }
.badge.std   { color: var(--warn);   background: var(--warn-soft); }
.badge.plain { color: var(--ink-soft); background: var(--line-soft); }

.facts {
  margin: .7rem 0 0;
  font-size: .82rem;
}
.facts > div {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: .5rem;
  padding: .12rem 0;
}
.facts dt {
  color: var(--ink-faint);
  font-weight: 600;
}
.facts dd { margin: 0; color: var(--ink-soft); }
.facts code { color: var(--ink); }

.start {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
}
.copy {
  padding: 0 .3rem;
  font: 500 .72rem/1.5 inherit;
  color: var(--ink-faint);
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.copy:hover { color: var(--accent); border-color: var(--accent); }

/* The keywords, as buttons: the line exists so somebody who does not know a
   sample exists can still type their way to it — clicking one does the typing. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.tags button {
  padding: .05rem .4rem;
  font: 400 .73rem/1.5 var(--mono);
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  cursor: pointer;
}
.tags button:hover { color: var(--accent); border-color: var(--accent); }

.card details { margin: .65rem 0 0; font-size: .85rem; }
.card summary { color: var(--ink-faint); cursor: pointer; }
.card details .doc { margin-top: .4rem; color: var(--ink-soft); }
.card details .doc p { margin: .5rem 0; }
.card details .doc ul { margin: .5rem 0; padding-left: 1.1rem; }
.card details .doc li { margin: .25rem 0; }
.card details .doc pre {
  margin: .5rem 0;
  padding: .5rem .6rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
  padding-top: .85rem;
}

.actions a {
  padding: .32rem .6rem;
  font-size: .82rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.actions a:hover { border-color: var(--accent); color: var(--accent); }
.actions a.primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.actions a.primary:hover { color: var(--accent-ink); filter: brightness(1.08); }

mark {
  padding: 0 .1em;
  color: inherit;
  background: var(--accent-soft);
  border-radius: 3px;
}

/* ---------------------------------------------------- the prose sections */

.empty { margin: 2rem 0; color: var(--ink-soft); }

.how, .packages {
  margin: 3rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  /* the filter panel is sticky, so a jump to one of these has to clear it */
  scroll-margin-top: 15rem;
}

.how h2, .packages h2 {
  margin: 0 0 .7rem;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.how ol {
  max-width: 46rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink-soft);
  font-size: .92rem;
}
.how li { margin: .45rem 0; }
.how b { color: var(--ink); }

#pkgcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: .7rem;
  margin-top: 1rem;
}

.pkgcard {
  padding: .8rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--ink-soft);
}
.pkgcard h3 {
  margin: 0 0 .15rem;
  font-size: .98rem;
  color: var(--ink);
}
.pkgcard h3 button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.pkgcard h3 button:hover { color: var(--accent); }
.pkgcard p { margin: .35rem 0 0; }
.pkgcard .meta {
  margin-top: .5rem;
  font: .74rem/1.5 var(--mono);
  color: var(--ink-faint);
}
.pkgcard .note {
  margin-top: .5rem;
  padding: .4rem .5rem;
  font-size: .78rem;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 6px;
}

footer {
  max-width: var(--wide);
  margin: 3rem auto 0;
  padding: 1.2rem var(--gutter) 0;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-faint);
}
footer p { margin: .4rem 0; }

@media (max-width: 40rem) {
  .panel { position: static; }
  .facts > div { grid-template-columns: 1fr; gap: 0; }
  .facts dt { font-size: .74rem; text-transform: uppercase; }
}

/* ------------------------------------------------------------ family nav */

/* family-nav:start
 *
 * The frame the three sample pages share: the bar that ties them together, the
 * masthead they all sit under, and the card strip at the end. IDENTICAL in
 * abap2UI5/samples, abap2UI5/samples-controls and abap2UI5/samples-stack -
 * change it in all three repositories or in none. `npm run check:family-nav`
 * fails when a copy drifts.
 *
 * It is self-contained: two constants of its own (1180px, the container every
 * page centres in, and its 24px gutter - so the content column is 1132px
 * everywhere) and otherwise nothing but the palette above, so light and dark
 * come free. Every page therefore has to leave <body> unpadded and give its own
 * containers the same 1180px/24px, or the bar and the page under it will not
 * line up.
 *
 * That alignment is the whole point. Three pages centring in three different
 * widths made the brand, the heading and the first card jump sideways on every
 * switch, which reads as three sites rather than one.
 *
 * The bar is deliberately NOT sticky: two of the three pages already stick
 * their filter panel to the top, and a second sticky strip above it would eat
 * a phone screen twice over. */

.family {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.family-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: .35rem 24px;
}

.family-brand {
  margin-right: .7rem;
  font: 700 .78rem/1 var(--mono);
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.family-brand:hover { color: var(--accent); }

/* The verb is what a reader recognises - "samples-controls" tells a newcomer
 * nothing, "Controls / every UI5 control, searchable" tells them everything -
 * so the repository name is in the tooltip and the footer, not here. */
.family-page {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding: .3em .65em;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: .85rem;
  text-decoration: none;
}
.family-page b { font-weight: 600; color: var(--ink); }
.family-page span { font-size: .8rem; color: var(--ink-faint); }
.family-page:hover { background: var(--line-soft); }

/* The one thing this bar has to say without spending a word on it: which of
 * the three you are reading. Drawn off aria-current, so the markup is the
 * same file on all three pages and only that attribute moves.
 *
 * The current page is coloured with --accent and not --accent-ink: the two
 * repositories next door use --accent-ink for text ON the accent fill, where
 * it is white, and white on --accent-soft is nothing at all. */
.family-page[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.family-page[aria-current="page"] b { color: var(--accent); }
.family-page[aria-current="page"] span { color: var(--ink-soft); }

.family-spacer { flex: 1 1 auto; }

/* The playground and the documentation are tools, not sibling pages: they sit
 * apart from the three and carry the outward arrow. */
.family-tool {
  padding: .3em .5em;
  font-size: .8rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.family-tool:hover { color: var(--accent); }

.family a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 99px;
}

/* On a phone the three verbs and the two tools still fit once the subtitles
 * go. Dropping the bar entirely would be dropping the way out. */
@media (max-width: 47rem) {
  .family-page span { display: none; }
  .family-brand { margin-right: .35rem; }
}

/* ------------------------------------------------------------- masthead */

/* Shared for the same reason as the bar: a reader switching pages should see
 * the words change and nothing else. Each page fills the frame with its own
 * title, lede and actions - what sits BELOW the lede is the page's own
 * business and is styled in its own stylesheet. */

.masthead {
  background: linear-gradient(160deg, var(--accent-soft), transparent 70%), var(--panel);
  border-bottom: 1px solid var(--line);
}
.masthead .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 24px 30px;
}

/* NOT uppercased. The product is written abap2UI5, and an eyebrow that
 * shouts ABAP2UI5 is the one place on the page that gets its own name wrong. */
.brand {
  margin: 0 0 14px;
  font: 600 .8rem/1 var(--mono);
  letter-spacing: .04em;
}
.brand a { color: var(--ink-faint); text-decoration: none; }
.brand a:hover { color: var(--accent); }

.masthead h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* No max-width: the lede is the page's description and lines up with the
 * column under it - the search box, the cards, the rail - rather than ending
 * two thirds of the way across and leaving the masthead looking unfinished. */
.lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.03rem;
}
.lede strong { color: var(--ink); }

/* --------------------------------------------------------- three pages */

/* The bar at the top answers "where am I". This answers "why would I go
 * anywhere else", and it sits at the end because that is where a reader who
 * is done with this page arrives. */

.three {
  max-width: 1180px;
  margin: 3rem auto 0;
  /* A rule above it, because on one of the three pages this lands directly
   * under another prose section that has one, and without it the strip reads
   * as that section's tail rather than as its own thing. */
  padding: 1.4rem 24px 0;
  border-top: 1px solid var(--line);
}
.three > h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.three-lede {
  margin: 0 0 1rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

.three-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .7rem;
}

.three-card {
  display: block;
  padding: .85rem .95rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.three-card:hover { border-color: var(--accent); }
.three-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.three-verb {
  display: block;
  margin-bottom: .15rem;
  font: 600 .7rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.three-repo { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
.three-q {
  display: block;
  margin: .3rem 0 .2rem;
  font-size: .88rem;
  font-style: italic;
  color: var(--ink);
}
.three-what { display: block; font-size: .85rem; color: var(--ink-soft); }

/* Same trick as the bar, same reason. */
.three-here { display: none; }
.three-card[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.three-card[aria-current="page"] .three-here {
  display: block;
  margin-top: .5rem;
  font: 600 .74rem/1 var(--mono);
  color: var(--accent);
}

/* family-nav:end */