/* ============================================================================
   Floom — Resources (floom-resources.js filters it)
   ----------------------------------------------------------------------------
   The page is the editorial sheet (floom-editorial.css), the one About,
   Contact, Demo and Security are set on: a split hero, then ruled bands, and
   About's pinned panel to close. This file adds only what a hub of guides and
   updates needs on top of the sheet:

     the bar      filter and search, a band of its own that holds at the top
                  while the page moves (tablet and desk)
     the guides   the sheet's ruled cards, three across, each with its thread
                  drawing: loose strands arriving from the left, braided while
                  Floom reads them, leaving as a ruled line into the record's
                  cell, one strand per kind of input the guide is about
     the updates  ruled rows, the picture on the left half and the date and
                  words on the right, split on the sheet's middle gutter

   Labels, headings, links, buttons and the close are the sheet's own and the
   site's; nothing here restyles them. Small words are Dark Gray, not Medium
   Gray: on this page's canvas (--fl-canvas) Medium Gray measures 4.49:1.
   ========================================================================== */

/* a hyphenated word is not a place to break the headline */
.rs-nw{ white-space: nowrap; }

/* ── the bar ──────────────────────────────────────────────────────────────
   Ruled like a band. Once it holds at the top it draws a hairline under
   itself (floom-resources.js sets .is-stuck), over a wash of the canvas. */
.rs-bar{
  position: sticky;
  top: 0;
  z-index: 30;
  border-top: 1px solid var(--ed-rule);
  background: color-mix(in srgb, var(--fl-canvas) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow .3s ease;
}
.rs-bar.is-stuck{ box-shadow: 0 1px 0 var(--ed-rule); }
.rs-bar-in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}

/* The filter: a segmented control in the site's control dress (.ap-ctl: 5px
   corners, the hairline, 13px capitals, 44 tall). The chosen kind is the
   palette's selected state — Light Gray under an Off Black label — and its
   cell fills orange; the others keep an outlined cell. The Light Gray thumb
   travels between them on the spring the home page's tab pill rides. */
.rs-seg{
  position: relative;
  display: inline-flex;
  gap: var(--sp-1);
  padding: 4px;                                   /* 4 + 36 + 4 = 44 */
  border-radius: 5px;
  /* the control's hairline, drawn inside so the padding stays on the grid */
  box-shadow: inset 0 0 0 1px rgba(24, 24, 24, .10);
}
.rs-seg-pill{
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: var(--w, 0px);
  transform: translateX(var(--x, 0px));
  border-radius: 3px;
  background: var(--fl-panel);
  transition:
    transform .62s var(--ap-swipe-ease, cubic-bezier(.2, 1.2, .35, 1)),
    width     .46s var(--ap-swipe-ease, cubic-bezier(.2, 1.2, .35, 1));
}
.rs-seg button{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 3px;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #312E2E;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color .24s ease;
}
.rs-seg button:hover{ color: var(--fl-ink); }
.rs-seg button[aria-pressed="true"]{ color: var(--fl-ink); }
.rs-seg button:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 2px; }
.rs-seg .th-cell{
  background: transparent;
  box-shadow: inset 0 0 0 1.25px currentColor;
  transition: background-color .24s ease, box-shadow .24s ease;
}
.rs-seg button[aria-pressed="true"] .th-cell{ background: var(--ap-orange); box-shadow: none; }
.rs-n{ font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* before the script has measured, the chosen one carries its own ground */
.rs-seg:not(.is-ready) button[aria-pressed="true"]{ background: var(--fl-panel); }

/* The search: a field in the same dress, White as every field is. Hover
   answers in the border (Light Orange), focus in Orange with its halo. */
.rs-search{
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 344px);
}
.rs-search > svg{
  position: absolute;
  left: 16px;
  width: 16px; height: 16px;
  color: var(--fl-ink-soft);
  pointer-events: none;
}
.rs-search input{
  width: 100%;
  margin: 0;
  padding: 12px 48px 12px 40px;                   /* 12 + 18 + 12 + 2 = 44 */
  border: 1px solid rgba(24, 24, 24, .10);
  border-radius: 5px;
  background: #FFFFFF;
  font-family: var(--font);
  font-size: 15.79px;
  font-weight: 450;
  line-height: 18px;
  color: var(--fl-ink);
  -webkit-appearance: none;
          appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rs-search input::placeholder{ color: var(--fl-ink-soft); }   /* Medium Gray on White: 4.76:1 */
.rs-search input:hover{ border-color: #FF8A4D; }
.rs-search input:focus{
  outline: none;
  border-color: var(--ap-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-orange) 18%, transparent);
}
.rs-search input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.rs-search kbd{
  position: absolute;
  right: 12px;
  min-width: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(24, 24, 24, .10);
  border-radius: 3px;
  font-family: var(--font);
  font-size: 12.41px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--fl-ink-soft);
  pointer-events: none;
  transition: opacity .2s ease;
}
.rs-search input:focus ~ kbd,
.rs-search input:not(:placeholder-shown) ~ kbd{ opacity: 0; }
.rs-clear-x{
  position: absolute;
  right: 4px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  margin: 0; padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--fl-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rs-clear-x[hidden]{ display: none; }
.rs-clear-x:hover{ color: var(--fl-ink); background: var(--fl-panel); }
.rs-clear-x:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 1px; }
.rs-clear-x svg{ width: 16px; height: 16px; }
/* a finger gets the full 44 */
.rs-clear-x::before{ content: ""; position: absolute; inset: -4px; }

.rs-live{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── sections ─────────────────────────────────────────────────────────────*/
.rs-sec[hidden],
.rs-card[hidden],
.rs-log-item[hidden]{ display: none; }

/* ── the guides: the sheet's ruled cards, two across ──────────────────────
   Two across, so every row splits on the sheet's middle gutter (6 | 7) and the
   rule between them runs on from the heading row above and into the updates
   below, one line down the page, as the sheet means its rules to.

   The sheet places its card rules by position (About's four). Here the filter
   and the search take cards out, so every rule is placed by position among the
   cards still showing (:nth-child(… of …)): the rule in the gutter before the
   right-hand card, a rule across the top of every card past the first row, and
   no padding on the outer edges. */
.rs .rs-cards > .rs-card{
  grid-column: span 6;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}
.rs .rs-cards > .rs-card::before{ display: none; }
.rs .rs-cards > .rs-card::after{ content: none; }
.rs .rs-cards > .rs-card:nth-child(2n of .rs-card:not([hidden]))::before{ display: block; }
.rs .rs-cards > .rs-card:nth-child(2n+1 of .rs-card:not([hidden])){ padding-left: 0; }
.rs .rs-cards > .rs-card:nth-child(2n of .rs-card:not([hidden])){ padding-right: 0; }
.rs .rs-cards > .rs-card:nth-child(n+3 of .rs-card:not([hidden]))::after{
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  background: var(--ed-rule);
}
.rs .rs-cards > .rs-card:nth-child(2n+1 of .rs-card:not([hidden]))::after{ left: 0; right: var(--ed-mid); }
.rs .rs-cards > .rs-card:nth-child(2n of .rs-card:not([hidden]))::after{ left: var(--ed-mid); right: 0; }

/* Long titles: balanced, so no word is left alone on the last line. */
.rs .ed-tile-t{ text-wrap: balance; }

/* The demo: the guide's feature working, a scene from the scene library
   (floom-scenes.html, the same one the Features menu shows), filled in by
   floom-artifact.js and playing while it is on screen. It takes the card's
   full width at the scenes' own 7:5, on a 16px plate, in the place the
   thread drawing held (replaced at the user's request, 2026-11-02). An
   empty one — the library could not be had — takes no room at all. */
.rs-demo{
  position: relative;
  display: block;
  aspect-ratio: 7 / 5;
  margin-top: var(--sp-6);
  border-radius: 16px;
  overflow: hidden;
}
.rs-demo:empty{ display: none; }
.rs-demo > .aa{ transition: transform .5s var(--fl-ease-out); }
@media (hover: hover){
  .rs-card:hover .rs-demo > .aa{ transform: scale(1.03); }
}

/* ── the updates: ruled rows ──────────────────────────────────────────────*/
.rs-log{ margin: 0; padding: 0; list-style: none; }
.rs-log-item:nth-child(n+2 of .rs-log-item:not([hidden])){ border-top: 1px solid var(--ed-rule); }
.rs-upd{ color: var(--black); text-decoration: none; }
.rs-upd > .ed-cell{ grid-column: span 6; padding-block: var(--ed-pad); }
.rs-upd > .ed-cell + .ed-cell{ padding-left: var(--sp-6); }
.rs-upd:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: var(--sp-2); }
.rs-upd-art{ display: block; }
.rs-upd-pic{
  display: block;
  aspect-ratio: 2000 / 922;
  overflow: clip;
  border-radius: clamp(10px, 1.1vw, 16px);
  background: var(--fl-ink);
}
/* the light picture stands off the canvas by a hairline */
.rs-upd-pic.is-light{ background: #FFFFFF; outline: 1px solid var(--ed-rule); outline-offset: -1px; }
.rs-upd-pic img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--fl-ease-out);
}
.rs-upd-pic.is-top img{ object-position: top; }
.rs-upd-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* No date line over the title (removed at the user's request, 2026-11-02):
   the title leads, level with the picture's top. */
.rs-upd-body > .ed-tile-t:first-child{ margin-top: 0; }
.rs-upd .ed-tile-d{ display: block; }
.rs-upd .ed-tile-a{ display: block; }
.rs-upd:is(:hover, :focus-visible) .st-link{ color: var(--ap-orange); }
@media (hover: hover){
  .rs-upd:hover .rs-upd-pic img{ transform: scale(1.03); }
}

/* ── nothing matched: one line, and the way back ──────────────────────────*/
.rs-empty{ padding-block: var(--ed-pad); }
.rs-empty[hidden]{ display: none; }
.rs-empty .container{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-6);
}
.rs-empty p{
  font-size: clamp(15.79px, 1.24vw, 17.81px);
  line-height: 1.3;
  color: #312E2E;
}
.rs-empty .st-link{
  margin: 0; padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rs-empty .st-link:focus-visible{ outline: 2px solid var(--ap-orange); outline-offset: 4px; }

/* a card a filter has just brought back arrives rather than appearing */
.rs-arrive{ animation: rs-arrive .42s var(--fl-ease-out) both; }
@keyframes rs-arrive{ from{ opacity: 0; transform: translateY(8px); } }

/* ── tablet: an update's picture over its words ──────────────────────────*/
@media (max-width: 1023.98px){
  .rs-upd > .ed-cell{ grid-column: 1 / -1; }
  .rs-upd > .ed-cell:first-child{ padding-bottom: 0; }
  .rs-upd > .ed-cell + .ed-cell{ padding-top: var(--sp-6); padding-left: 0; }
  .rs-upd > .ed-cell + .ed-cell::before{ display: none; }
}

/* ── phone: one guide to a row, and the bar scrolls with the page ─────────
   Two by two, as About keeps its four, a guide's words would be 163 wide at
   390 — its title runs to five lines beside a drawing half its size. */
@media (max-width: 719.98px){
  .rs-bar{ position: relative; }
  .rs-bar-in{ flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .rs-seg{ display: flex; }
  .rs-seg button{ flex: 1 1 auto; padding-inline: var(--sp-2); }
  .rs-wide{ display: none; }
  .rs-search{ width: 100%; }
  .rs-search kbd{ display: none; }

  /* at the tablet's weight, (0,6,0), so its by-position paddings give way */
  .rs .rs-cards > .rs-card,
  .rs .rs-cards > .rs-card:nth-child(n of .rs-card:not([hidden])){ grid-column: 1 / -1; padding: var(--sp-8) 0; }
  .rs .rs-cards > .rs-card:nth-child(2n of .rs-card:not([hidden]))::before{ display: none; }
  .rs .rs-cards > .rs-card:nth-child(n+2 of .rs-card:not([hidden]))::after{
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
    background: var(--ed-rule);
  }
  .rs .rs-cards > .rs-card:nth-child(n of .rs-card:not([hidden]))::after{ left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce){
  .rs-seg-pill,
  .rs-upd-pic img,
  .rs-demo > .aa{ transition: none; }
  .rs-card:hover .rs-demo > .aa{ transform: none; }
  .rs-arrive{ animation: none; }
}