/*
 * The overview page. One stylesheet, no framework, no build step.
 *
 * The layout is the argument: a numbered rail on the left that says where you
 * are in the path and how far you have come, stages as chapters down the
 * middle, and a card per sample that answers "is this the one I want" before
 * anybody clicks. Search narrows the path in place rather than replacing it
 * with a result list - the order is the content here.
 */

:root {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #16181d;
  --ink-soft: #565b66;
  --ink-faint: #858b98;
  --line: #e2e5ea;
  --line-soft: #eef0f4;
  --accent: #d03c4a;          /* the abap2UI5 red, the colour the documentation is written in */
  --accent-soft: #fbecee;
  --accent-ink: #a83232;
  --done: #1a7f4b;
  --done-soft: #e6f4ec;
  --mark: #fff2a8;
  --shadow: 0 1px 2px rgba(16, 20, 30, .05), 0 8px 24px rgba(16, 20, 30, .05);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1c1f25;
    --ink: #e9ebf0;
    --ink-soft: #a7adba;
    --ink-faint: #7d8494;
    --line: #2c313a;
    --line-soft: #23272e;
    --accent: #ef8b93;
    --accent-soft: #3a2126;
    --accent-ink: #f6b6bc;
    --done: #5fc48d;
    --done-soft: #1a2c22;
    --mark: #5a4d12;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

/* `hidden` has to win over the display of anything the page hides - the
 * buttons and the cards a search removes both set one. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }

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

/* ------------------------------------------------------------- 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 two
 * buttons under the lede, which neither of the others has. */

.cta { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.button {
  display: inline-block; padding: 9px 16px; border: 1px solid transparent; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: .93rem; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.button:hover { filter: brightness(1.07); }
.button.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.button.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- layout */

.layout {
  max-width: 1180px; margin: 0 auto; padding: 26px 24px 60px;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ----------------------------------------------------------------- rail */

/* min-width so the swipeable stage row on a phone really scrolls inside the
 * rail instead of widening the grid column - a grid item is auto-sized to its
 * content unless it is told otherwise, and then the whole PAGE scrolls. */
.rail { position: sticky; top: 20px; min-width: 0; }
.layout > main { min-width: 0; }
@media (max-width: 900px) { .rail { position: static; } }

.progress {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.progress-line { margin: 0 0 8px; font-size: .92rem; color: var(--ink-soft); }
.progress-line b { color: var(--ink); }
.bar { height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--done); transition: width .25s ease; }
.progress .note { margin: 10px 0 0; font-size: .76rem; color: var(--ink-faint); line-height: 1.4; }
.linkish {
  background: none; border: 0; padding: 0; margin-top: 8px; color: var(--accent);
  font: inherit; font-size: .84rem; cursor: pointer; text-decoration: underline;
}

#stagenav ol { list-style: none; margin: 0; padding: 0; }
#stagenav li { position: relative; }
/* the path: one line running behind the stage numbers */
#stagenav li::before {
  content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--line);
}
#stagenav li:first-child::before { top: 50%; }
#stagenav li:last-child::before { bottom: 50%; }
#stagenav a {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px;
  align-items: center; padding: 7px 8px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: .9rem;
}
#stagenav a:hover { background: var(--line-soft); color: var(--ink); }
#stagenav a.here { color: var(--ink); font-weight: 600; }
#stagenav .n {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .84rem; font-weight: 600;
  background: var(--panel); border: 2px solid var(--line); color: var(--ink-faint);
}
#stagenav a.here .n { border-color: var(--accent); color: var(--accent); }
#stagenav a.complete .n { border-color: var(--done); background: var(--done-soft); color: var(--done); }
#stagenav .small { display: block; font-size: .76rem; color: var(--ink-faint); font-weight: 400; }

/* On a phone the rail is above the path rather than beside it, so the six
 * stages become a row you swipe instead of six rows the reader scrolls past
 * before reaching the first sample. */
@media (max-width: 900px) {
  #stagenav ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  #stagenav li { flex: 0 0 auto; }
  #stagenav li::before { display: none; }
  #stagenav a {
    grid-template-columns: 24px auto; gap: 8px;
    border: 1px solid var(--line); border-radius: 99px; background: var(--panel);
    padding: 5px 12px 5px 6px; white-space: nowrap;
  }
  #stagenav .n { width: 24px; height: 24px; font-size: .76rem; border-width: 1px; }
  #stagenav .small { display: none; }
}


/* --------------------------------------------------------------- search */

.find {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 24px; box-shadow: var(--shadow);
}
.find input {
  flex: 1 1 240px; min-width: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 1rem; padding: 4px 0;
}
.find input:focus { outline: none; }
.find kbd {
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; font-size: .74rem; color: var(--ink-faint);
}
.find .found { font-size: .86rem; color: var(--ink-faint); }
.find .linkish { margin: 0; }

.empty {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; color: var(--ink-soft);
}

/* --------------------------------------------------------------- stages */

.stage { margin: 0 0 44px; scroll-margin-top: 74px; }
.stage-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 18px; }
.stage-head .n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.stage.done .stage-head .n { background: var(--done); }
.stage-head h2 { margin: 6px 0 4px; font-size: 1.4rem; letter-spacing: -.01em; }
.stage-head .blurb { margin: 0; color: var(--ink-soft); max-width: 68ch; font-size: .96rem; }
.stage-head .tally { margin: 8px 0 0; font-size: .82rem; color: var(--ink-faint); }

.category { margin: 0 0 22px; padding-left: 58px; }
@media (max-width: 640px) { .category { padding-left: 0; } .stage-head { grid-template-columns: 36px minmax(0, 1fr); } .stage-head .n { width: 36px; height: 36px; font-size: .95rem; } }
.category h3 {
  margin: 0 0 10px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.category h3 span { font-weight: 400; text-transform: none; letter-spacing: 0; }

.cards { display: grid; gap: 12px; }

/* ---------------------------------------------------------------- card */

.card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 12px 46px; box-shadow: var(--shadow);
}
.card.read { border-color: var(--done); background: linear-gradient(90deg, var(--done-soft), var(--panel) 260px); }
.card.flash { animation: flash 1.4s ease; }
@keyframes flash { from { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } }

.tick {
  position: absolute; left: 13px; top: 15px; width: 21px; height: 21px; padding: 0;
  border: 2px solid var(--line); border-radius: 6px; background: var(--panel);
  color: transparent; cursor: pointer; font-size: .8rem; line-height: 1;
}
.tick:hover { border-color: var(--done); color: var(--ink-faint); }
.card.read .tick { background: var(--done); border-color: var(--done); color: #fff; }

/* The thumbnail: the render gate's photograph of the first screen, floated so
 * the text keeps ruling the card. Shot at 800x600 and cropped to the same 4:3
 * from the top, so nothing is squashed. Always on a white ground - the
 * screenshots are taken in the light theme, and a transparent edge on a dark
 * panel would read as a rendering mistake. An <img> that fails to load has
 * removed itself (overview.js), so there is no broken-picture state to style. */
.card .shot {
  float: right; width: 176px; aspect-ratio: 4 / 3; object-fit: cover; object-position: top;
  margin: 2px 0 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
@media (max-width: 620px) { .card .shot { display: none; } }
/* the actions row must clear the float, or a short card puts the buttons beside it */
.card .actions { clear: both; }

/* An abap2UI5 identifier does not break - `client->nav_app_call` is one word to
 * a browser - and on a phone one of them is wider than the card. */
.card h4, .card .what, .card .says { overflow-wrap: anywhere; }

.card h4 { margin: 0 0 2px; font-size: 1.02rem; letter-spacing: -.01em; }
.card h4 .step {
  display: inline-block; margin-right: 7px; padding: 0 7px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: .74rem; font-weight: 700;
  vertical-align: 2px;
}
.card .what { margin: 0 0 6px; color: var(--ink-soft); font-size: .93rem; }
.card .says { margin: 0 0 10px; font-size: .93rem; max-width: 74ch; }

.terms { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.terms button {
  border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--ink-faint);
  font: inherit; font-size: .74rem; padding: 1px 8px; cursor: pointer;
}
.terms button:hover { border-color: var(--accent); color: var(--accent); }

/* A documentation path is one long word too (cookbook/event_navigation/…), and
 * a flex item refuses to shrink below its longest word unless it is allowed
 * to break - which on a phone pushes the whole card past the screen. */
.actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .86rem; min-width: 0; }
.actions > * { min-width: 0; overflow-wrap: anywhere; }
.actions a { text-decoration: none; font-weight: 600; }
.actions a:hover { text-decoration: underline; }
.actions .copy { border: 0; background: none; padding: 0; font: inherit; font-size: .86rem; color: var(--ink-faint); cursor: pointer; }
.actions .copy:hover { color: var(--accent); }
.actions .chapters { color: var(--ink-faint); font-weight: 400; }
.actions .chapters a { font-weight: 400; color: var(--ink-faint); }
.actions .chapters a:hover { color: var(--accent); }

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

/* ----------------------------------------------------------- what's next */

/* The card at the end of the path. It is the only thing on this page drawn
 * from the reader's own progress rather than from the catalogue, so it is
 * styled as an arrival - the done green, not the accent red. */
.whatsnext {
  background: var(--done-soft); border: 1px solid var(--done); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 22px;
}
.whatsnext h2 { margin: 0 0 8px; font-size: 1.15rem; color: var(--done); }
.whatsnext p { margin: 0 0 10px; color: var(--ink-soft); max-width: 74ch; }
.whatsnext p b { color: var(--ink); }
.whatsnext ul { margin: 0; padding-left: 20px; }
.whatsnext li { margin-bottom: 8px; color: var(--ink-soft); max-width: 74ch; }
.whatsnext a { text-decoration: none; }
.whatsnext a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ how */

.how {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; scroll-margin-top: 74px;
}
.how h2 { margin: 0 0 12px; font-size: 1.15rem; }
.how ol { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.how li { margin-bottom: 10px; max-width: 74ch; }
.how b { color: var(--ink); }

/* --------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 26px 24px 40px; color: var(--ink-faint); font-size: .86rem;
}
footer p { max-width: 1132px; margin: 0 auto 10px; }
footer a { color: var(--ink-soft); }

/* ------------------------------------------------------------ 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 */