/* The home page's Features section (#system): the part row, the "See this in action" link and the screenshot.
   Colours and type are the site's own (style.css :root). */

/* ---------- the part row: the current part on the yellow pill (the logo's "OS" tag) ---------- */
.fh-parts { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 18px 0 2px; }
.fh-parts[hidden] { display: none; }
.fh-parts button { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 6px;
  background: transparent; font: inherit; font-size: 13px; line-height: 1.25; color: #68675f; cursor: pointer; text-align: left;
  transition: background-color .2s, color .2s; }
.fh-parts button:hover { color: var(--ink); background: rgba(27, 26, 23, .06); }
.fh-parts button[aria-selected="true"] { background: var(--yellow); color: var(--ink); font-weight: 650; }
.fh-parts button:focus-visible { outline: 2px solid #936700; outline-offset: 2px; }
.fh-s { display: none; }

/* ---------- heading and description: every part's copy is laid in one place, so the panel never jumps ---------- */
.fh-copy { display: grid; }
.fh-copy > .fh-live, .fh-copy > .fh-ghosts { grid-area: 1 / 1; min-width: 0; }
.fh-ghosts { display: grid; visibility: hidden; pointer-events: none; }
.fh-ghosts > div { grid-area: 1 / 1; }
.fh-live, #feature-title, #feature-description { transition: opacity .14s ease; }
.fh-out #feature-title, .fh-out #feature-description { opacity: 0; }

/* A tab with parts shows the parts in place of the tab's tags and note. */
.fh-has-parts #feature-tags, .fh-has-parts #feature-note { display: none !important; }

/* ---------- the row under the tab's name: its parts, or its tags (laid hidden with the copy in .fh-ghosts too) ---------- */
.fh-ghosts .fh-rows button { font-weight: 650; }
.fh-rows .feature-tags { align-items: center; align-content: flex-start; min-height: 32px; margin: 18px 0 2px; }
.fh-rows .fh-parts[hidden], .fh-rows .feature-tags[hidden] { display: none; }
.fh-copy .feature-note { margin: 8px 0 0; }
.fh-copy .feature-note[hidden] { display: none; }

/* ---------- the call to action ---------- */
.fh-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 20px; padding: 10px 18px;
  border-radius: 5px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3;
  text-decoration: none; transition: background .2s, transform .2s, gap .2s; }
.fh-cta[hidden] { display: none; }
.fh-cta span[aria-hidden] { font-size: 17px; line-height: 1; }
.fh-cta:hover { background: #3c3a32; gap: 16px; }
.fh-cta:focus-visible { outline: 2px solid #936700; outline-offset: 3px; }
.fh-ghosts .fh-cta { justify-self: start; }
.fh-live { align-self: start; }

/* ---------- the screenshot: the demos' own browser window on their backdrop, 5:3 ---------- */
.feature-panel .fh-shot { margin: 0 36px; max-height: none; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .07);
  aspect-ratio: 900 / 540; overflow: hidden; background: linear-gradient(180deg, #f8f6f0, #f1ece0); }
.feature-panel .fh-shot[hidden] { display: none; }
.feature-panel .fh-shot picture, .feature-panel .fh-shot img { display: block; width: 100%; max-width: 100%; height: 100%; }
.feature-panel .fh-shot img { object-fit: cover; transition: opacity .14s ease; }
.fh-out .fh-shot img { opacity: .35; }
/* A picture still on its way (only after the wait cap): the backdrop shows, then the picture fades in. */
.feature-panel .fh-shot.fh-loading img { opacity: 0; }
/* A tab or part waiting for its picture: a quiet sign that the press was taken. */
.feature-tabs .fh-busy, .fh-parts .fh-busy { cursor: progress; opacity: .7; transition: opacity .15s; }
.feature-panel .feature-concept + .caption, .feature-panel .fh-shot + .caption { margin-top: 12px; }

@media (max-width: 900px) {
  .feature-panel .fh-shot { margin: 0 35px; }
}
@media (max-width: 650px) {
  .fh-parts { gap: 4px 2px; margin-top: 14px; }
  .fh-rows .feature-tags { margin-top: 14px; min-height: 36px; }
  .fh-parts button { min-height: 36px; padding: 4px 8px; font-size: 12.5px; }
  .fh-parts button:has(.fh-s) .fh-l { display: none; }
  .fh-s { display: inline; }
  .fh-cta { display: flex; justify-content: space-between; width: 100%; margin-top: 18px; }
  .feature-panel .fh-shot { margin: 0 20px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .fh-parts button, .fh-cta, .fh-live, #feature-title, #feature-description, .feature-panel .fh-shot img, .feature-tabs .fh-busy, .fh-parts .fh-busy { transition: none; }
}

/* ---------- phones: every feature in turn, no tabs (features-home.js builds .fh-stack) ---------- */
.fh-stack { display: none; }
@media (max-width: 650px) {
  .fh-stacked .system-layout { display: none; }
  .fh-stack { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
  .fh-item > article { background: #eeeadf; border-radius: 8px; padding: 22px 20px 22px; }
  .fh-item h3 { margin: 12px 0 8px; font-size: 24px; line-height: 1.12; }
  .fh-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
  .fh-sshot { margin: 16px 0 0; border-radius: 9px; overflow: hidden; aspect-ratio: 5 / 3;
    background: linear-gradient(180deg, #f8f6f0, #f1ece0); box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .07); }
  .fh-sshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fh-item .fh-cta { margin-top: 16px; }
}

/* ---------- desktop: heading and tabs in the left column, the panel beside them from the top (no intro line) ---------- */
@media (min-width: 901px) {
  #system > .wrap { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr); column-gap: 55px; align-items: start; }
  #system .section-top { grid-column: 1; grid-row: 1; margin-bottom: 24px; }
  #system .system-layout { display: contents; }
  #system .feature-tabs { grid-column: 1; grid-row: 2; padding-top: 0; }
  #system .feature-panel { grid-column: 2; grid-row: 1 / span 2; }
  #system .section-top > div { min-width: 0; }
}