/* The house layout of every guide page (feature-guides skill): type scale, steps, figures, notes.
   It never names a colour or a font: those are the project's, set in guides.config.json → theme and
   written to theme.css by build.mjs (reference/theming.md). The build puts this file first in the
   site's one stylesheet, guides.css. */
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--body); font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:56px 22px 96px}

  .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent); margin:0 0 14px;
  }
  h1{
    font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(34px,7vw,50px);
    line-height:1.04; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance;
  }
  .lede{font-size:20px; line-height:1.55; color:var(--ink); margin:0 0 10px; text-wrap:balance}
  .sub{color:var(--muted); margin:0 0 40px}

  h2{
    font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.01em;
    margin:52px 0 14px; text-wrap:balance;
  }
  h3{font-family:var(--display); font-weight:700; font-size:18px; margin:0 0 6px}
  p{margin:0 0 16px}
  a{color:var(--accent)}
  strong{color:var(--ink); font-weight:600}

  .rule{height:1px; background:var(--line); border:0; margin:48px 0}

  .steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:40px}
  .steps > li{counter-increment:s; display:flex; flex-direction:column; gap:14px}
  .steps > li .head{display:flex; gap:14px; align-items:baseline}
  .steps > li .head::before{
    content:counter(s); font-family:var(--mono); font-size:12px; color:var(--on-accent);
    background:var(--accent); min-width:24px; height:24px; border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    transform:translateY(2px);
  }
  .steps p{margin:0; color:var(--muted)}
  .steps .head h3{margin:0}

  figure{margin:0; display:flex; flex-direction:column; gap:9px}
  figure img{
    display:block; width:100%; height:auto; border-radius:var(--radius);
    border:1px solid var(--line); background:var(--surface);
  }
  figure.phone img{max-width:330px}
  figcaption{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.02em}

  .pair{display:flex; flex-wrap:wrap; gap:22px}
  .pair figure{flex:1 1 260px}

  .note{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 22px; margin:26px 0;
  }
  .note p:last-child{margin-bottom:0}
  .note .tag{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent); display:block; margin-bottom:8px;
  }
  .note.warn .tag{color:var(--warn)}

  code{font-family:var(--mono); font-size:.92em; color:var(--ink);
       background:var(--surface-2); border-radius:5px; padding:1px 5px}

  ul.plain{margin:0 0 16px; padding-left:20px; color:var(--muted)}
  ul.plain li{margin-bottom:9px}
  ul.plain li strong{color:var(--ink); font-weight:600}

  footer{
    margin-top:64px; padding-top:22px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11.5px; color:var(--muted); line-height:1.9;
  }

  /* the project's logo, when its theme names one: in the bar on every guide and above the index */
  .brand-logo{display:block; height:22px; width:auto; max-width:120px; object-fit:contain}
  .hub-brand{margin:0 0 18px}
  .hub-brand .brand-logo{height:32px; max-width:180px}

/* The guide site's navigation and index (feature-guides skill): a search field with live suggestions
   on every page, the filter chips and the cards of the generated index, a slim bar back to the
   index on every guide, and the copy pills. build.mjs appends it to page-style.css as the site's guides.css. Colours,
   fonts and radius are the project's tokens (theme.css, from guides.config.json → theme); nothing
   here names one. One curve and two durations; nothing moves while you type; reduced motion turns
   it all off. */
:root{
  --gs-ease:cubic-bezier(.32,.72,0,1); --gs-fast:140ms; --gs-med:220ms;
  --gs-focus:var(--accent);
  --gb-h:65px;                                /* the bar on every guide: 10 + 44 + 10 + 1 */
}
.gs-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---- the search field ---- */
.gs{position:relative}
.gs-box{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.gs-box:focus-within{border-color:var(--gs-focus); outline:2px solid var(--gs-focus)}
.gs-box svg{flex:none; width:18px; height:18px; color:var(--muted)}
.gs-box input{
  flex:1; min-width:0; min-height:46px; border:0; outline:0; background:transparent;
  color:var(--ink); font:inherit; font-size:17px;   /* ≥16px, or iOS zooms on focus */
}
.gs-box input::placeholder{color:var(--muted); opacity:1}
.gs-box input::-webkit-search-cancel-button{-webkit-appearance:none}
.gs-key{
  flex:none; font-family:var(--mono); font-size:12px; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:1px 7px;
}
@media (hover:none){.gs-key{display:none}}          /* no keyboard to press it with */
.gs-clear{
  flex:none; display:none; position:relative; width:28px; height:28px; border:0; border-radius:8px;
  background:var(--surface-2); color:var(--ink); font-size:16px; line-height:1; cursor:pointer;
}
.gs-clear::after{content:""; position:absolute; inset:-8px}   /* a 44px target around a 28px face */
.gs.has-q .gs-clear{display:block}
.gs.has-q .gs-key{display:none}

/* ---- the suggestions ---- */
.gs-pop{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 48px rgba(0,0,0,.55); padding:6px; max-height:min(70vh,560px); overflow:auto;
  overscroll-behavior:contain; color-scheme:dark;
}
.gs-cap{
  margin:6px 10px 4px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.gs-list{list-style:none; margin:0; padding:0}
.gs-opt{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 12px; border-radius:12px;
  cursor:pointer; min-height:44px;
}
.gs-opt[aria-selected="true"]{background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--gs-focus)}
@media (hover:hover){.gs-opt:hover{background:var(--surface-2)}}
.gs-t{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); line-height:1.3}
.gs-m{
  align-self:start; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); padding-top:3px; white-space:nowrap;
}
.gs-l{
  grid-column:1 / -1; font-size:14px; line-height:1.45; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gs mark{background:color-mix(in srgb,var(--accent) 24%,transparent); color:inherit; border-radius:3px; padding:0 1px}
.gs-none{margin:10px 12px; color:var(--muted); font-size:15px}

@media (prefers-reduced-motion:no-preference){
  .gs-pop{animation:gs-in var(--gs-med) var(--gs-ease)}
  .gs-pop.is-leaving{animation:gs-out var(--gs-fast) var(--gs-ease) forwards}
  .gs-chip,.gs-clear{transition:transform var(--gs-fast) var(--gs-ease), background-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease)}
  .gs-chip:active,.gs-clear:active{transform:scale(.975)}
}
@keyframes gs-in{from{opacity:0; transform:translateY(-4px) scale(.98)}}
@keyframes gs-out{to{opacity:0}}

/* ---- the index: a field that stays with you, chips, a count ---- */
.gs-hub{
  position:sticky; top:0; z-index:10; margin:0 -22px; padding:12px 22px;
  background:var(--bg);
}
.gs-hub .gs-pop{left:22px; right:22px}
.gs-chips{display:flex; flex-wrap:wrap; gap:8px; padding:2px 0}
.gs-chip{
  flex:none; min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font:inherit; font-size:15px;
}
.gs-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.gs-count{margin:10px 0 18px; font-family:var(--mono); font-size:12px; color:var(--muted); min-height:1.2em}
.gs-reset{
  min-height:44px; font:inherit; color:var(--accent); background:none; border:0; padding:0 4px; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
/* A filtered-out card, and a section left with none, really leave: the index's own `.card` and
   `.grid` set a display, which would otherwise beat the browser's rule for [hidden]. */
.grid[hidden], .grid .card[hidden], .area[hidden]{display:none}
/* While a filter is on, only the cards answer: the notes step aside. */
.is-filtering .note,
.is-filtering .area:not(:has(+ .grid)),
.is-filtering .area:not(:has(+ .grid)) + p.sub,
.is-filtering .grid + p.sub{display:none}

/* ---- every guide: a slim bar back to the index ---- */
.gb{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; box-sizing:border-box;
  min-height:var(--gb-h); padding:10px 16px; background:var(--bg); border-bottom:1px solid var(--line);
}
/* Anything a guide pins to the top of its own page sits under the bar, not behind it. */
html:has(.gb){scroll-padding-top:calc(var(--gb-h) + 8px)}
.gb-back{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px;
  color:var(--ink); text-decoration:none; font-size:15px; font-weight:600;
}
@media (hover:hover){.gb-back:hover{color:var(--accent)}}
.gb .gs{flex:1; min-width:0; max-width:520px; margin-left:auto; position:static}
/* The list hangs from the whole bar, not from the field, so on a phone it gets the screen's width. */
.gb .gs-pop{left:auto; right:16px; width:min(560px, calc(100% - 32px)); top:calc(100% + 6px)}
.gb .gs-box{min-height:44px}
.gb .gs-box input{min-height:42px}
.gb-short{display:none}
@media (max-width:30rem){.gb-long{display:none} .gb-short{display:inline}}

.gs-chip:focus-visible,.gs-clear:focus-visible,.gb-back:focus-visible,.gs-reset:focus-visible{
  outline:2px solid var(--gs-focus); outline-offset:2px;
}

/* ---- the generated index: its sections and cards ---- */
.wrap.hub{max-width:860px}
.hub .count{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; margin:0 0 18px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:18px 0 0}
.card{
  display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px 18px;
}
a.card:hover, a.card:focus-visible{border-color:var(--accent); outline:none}
.card .name{font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.25}
.card .what{font-size:14px; color:var(--muted); line-height:1.5}
.card .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.area{display:flex; align-items:baseline; gap:12px; margin:46px 0 0}
.area h2{margin:0}
.area .n{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
/* When each feature landed: quiet by default, loud only where there is something to go and read. */
.card .stamp{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted); margin-top:2px}
.card .stamp b{font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.card .stamp .new{color:var(--accent)}
.card .stamp .upd{color:var(--good)}

/* a heading focused by script after an in-place move between guides (assistant.js): read, not outlined */
h1[tabindex="-1"]:focus{outline:none}

/* the logo in the bar, beside «All guides» */
.gb-back .brand-logo{height:20px; max-width:96px}

/* the front page as documentation: how to use it and the two shelves («Start here», «What's new»)
   — copies of cards, hidden while the search filters */
.howto-box{margin:22px 0 0}
.howto{margin:6px 0 0; padding-left:1.1em; display:grid; gap:6px; line-height:1.55; color:var(--muted)}
.howto strong{color:var(--ink)}
.howto .new{color:var(--accent)}
.howto .upd{color:var(--good)}
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:18px 0 0}
.is-filtering .howto-box,.is-filtering .shelf,.is-filtering #empieza,.is-filtering #novedades{display:none}

/* ---- copy pills: `<code class="copy">` wrapped by build.mjs, answered by copy.js ----
   The whole pill is the target; the button is what a keyboard reaches. The code stays selectable in
   one piece (user-select: all), so a browser that refuses the clipboard still lets the reader take
   it by hand. On a phone the text wraps inside the pill instead of running off the screen. */
.copy-pill{
  display:inline-flex; align-items:center; gap:8px; max-width:100%; vertical-align:middle;
  margin:2px 0; padding:2px 3px 2px 10px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2); color:var(--ink); line-height:1.4; cursor:pointer;
}
.copy-pill code{
  flex:0 1 auto; min-width:0; padding:0; border-radius:0; background:none; color:inherit;
  overflow-wrap:anywhere; -webkit-user-select:all; user-select:all;
}
.copy-btn{
  flex:none; display:inline-flex; align-items:center; min-height:26px; margin:0; padding:0 10px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--accent);
  font:600 12.5px/1 var(--body); letter-spacing:.01em; white-space:nowrap; cursor:pointer;
}
.copy-say{display:inline-block}
.copy-btn:focus-visible{outline:2px solid var(--gs-focus); outline-offset:2px}
@media (hover:hover){.copy-pill:hover{border-color:var(--accent)}}
.copy-pill.is-copied,.copy-pill.is-copied .copy-btn{border-color:var(--good)}
.copy-pill.is-copied .copy-btn{color:var(--good)}
.copy-pill.is-hint,.copy-pill.is-hint .copy-btn{border-color:var(--warn)}
.copy-pill.is-hint .copy-btn{color:var(--warn)}
@media (prefers-reduced-motion:no-preference){
  .copy-pill,.copy-btn{transition:border-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease), transform var(--gs-fast) var(--gs-ease)}
  .copy-pill:active .copy-btn{transform:scale(.975)}
  .copy-pill.is-copied .copy-say,.copy-pill.is-hint .copy-say{animation:copy-say var(--gs-med) var(--gs-ease)}
}
@keyframes copy-say{from{opacity:.3; transform:translateY(3px) scale(.94)}}