/* ============================================================
   GROWMARK — resources page
   The careers page's roles section, carrying the skills we give
   away: the heading and the note come from css/careers.css, the
   rows borrow its number, title and tags (.role__no, .role__title,
   .role__tag), and this file adds the rows' grid, the download, the
   how-to under the list and the thank-you card.
   ============================================================ */

/* a page that scrolls: the nav carries the paper from the start, as
   on the privacy page, so the list goes behind it, not through it */
.resources-page .nav{background:var(--paper)}

/* ---------------------------- the note --------------------- */

/* the two paragraphs side by side on the list's columns: the first
   under the heading, the second on the right, where the rows' words
   start */
.res-note{
  max-width:none;
  grid-template-columns:var(--cols);
  column-gap:20px;
  align-items:start;
  margin-bottom:clamp(44px,6vw,80px);
}
.res-note > :first-child{grid-column:1 / 3;padding-right:clamp(0px,3vw,40px)}
.res-note > :last-child{grid-column:3 / -1}

/* the email in the note: a press copies it (js/foot.js), as the
   footer's does. The address rolls up and out, "Email copied" rolls
   up into its place (both share one grid cell, so the line keeps its
   width), and it rolls back after a moment. The underline goes with
   the press and stays gone until the pointer leaves ([data-spent]) */
.res-mail{
  padding:0 0 2px;
  border:0;
  background:none;
  font:inherit;
  font-weight:500;
  text-align:left;
  color:var(--ink);
  cursor:pointer;
}
.res-mail[data-spent]::after{transform:scaleX(0)}
.res-mail:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
/* clipped by clip-path, not overflow, so the line's baseline holds */
.res-mail__roll{display:inline-grid;clip-path:inset(0)}
.res-mail__roll > span{
  grid-area:1 / 1;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
}
.res-mail__done{transform:translateY(100%);opacity:0}
.res-mail[data-copied] .res-mail__text{transform:translateY(-100%);opacity:0}
.res-mail[data-copied] .res-mail__done{transform:none;opacity:1}

/* ---------------------------- the list --------------------- */

/* number, name and tags, what it does, the download. One grid, so
   the columns line up from skill to skill, as the roles did, and the
   how-to under the list stands on the same columns */
.resources{--cols:3.4rem minmax(0,1fr) minmax(0,1.35fr) minmax(10.5rem,auto)}

.res-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--ink);
}

.res{
  display:grid;
  grid-template-columns:var(--cols);
  grid-template-areas:"no name about get";
  align-items:start;
  gap:20px;
  padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line);
  /* arrived at from a link (resources.html#store-teardown), the row
     stops clear of the band and the nav */
  scroll-margin-top:calc(var(--announce-h) + 96px);
}
.res .role__no{grid-area:no;padding-top:.62em}
.res__name{grid-area:name;display:flex;flex-direction:column;gap:14px}
.res__about{grid-area:about;max-width:36rem}
.res__get{
  grid-area:get;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.res__lead{
  margin:0;
  font-size:clamp(1.0625rem,1.4vw,1.18rem);
  line-height:1.55;
  color:var(--ink);
  text-wrap:pretty;
}
.res__when{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
  text-wrap:pretty;
}
/* the role's small caps label, set into the line */
.res__label{
  margin-right:6px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}

.res__btn{white-space:nowrap}
/* the dot chevron turned to point down, as the careers hero's was */
.res__down{transform:rotate(90deg)}
.res__btn:hover .res__down,
.res__btn:focus-visible .res__down{transform:rotate(90deg) translateX(2px)}

.res__file{
  margin:0;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* the app's privacy badge, under its tags in the name column
   (2026-10-30): boxed like the tags, in sentence case (it's a sentence) */
.res__private{
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:6px 10px;
  border:1px solid var(--line);
  font-size:12px;
  line-height:1.4;
  color:var(--ink);
}
/* line icons on the app's Desktop app tag (a screen), its offline
   badge (a shield) and the skills' SKILL.md tag (a page), drawn at
   1.2px like the band's arrow */
.res__icon{width:12px;height:12px;flex:none}
.res__private .res__icon{width:13px;height:13px}
.role__tag--icon{display:inline-flex;align-items:center;gap:6px}
/* a file's own name, in its own case */
.role__tag--file{text-transform:none;letter-spacing:.04em}

/* the app's own page and its source, under its Download, on its right
   edge as the skills' file lines are */
.res__more{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  margin:0;
}
/* the app's Download opens its builds (js/resources.js): a sheet under
   the button, on its right edge, each build with its size */
.res-dl{position:relative}
.res-dl .res__down{transition:transform var(--dur-2) var(--ease)}
.res-dl[data-open] .res__down,
.res-dl[data-open] .res__btn:hover .res__down,
.res-dl[data-open] .res__btn:focus-visible .res__down{transform:rotate(-90deg)}
.res-dl__menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:5;
  min-width:max(100%, 17rem);
  margin:0;
  padding:6px 0;
  list-style:none;
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility 0s var(--dur-2);
}
.res-dl[data-open] .res-dl__menu{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.res-dl__item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:11px 16px;
  font-size:14px;
  color:var(--ink);
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--dur-1) var(--ease);
}
.res-dl__item:hover,.res-dl__item:focus-visible{background:rgba(0,0,0,.05);outline:none}
.res-dl__item:focus-visible{box-shadow:inset 2px 0 0 var(--ink)}
.res-dl__size{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.res__src{font-size:13px;white-space:nowrap}
.res__src{color:var(--muted)}

/* the app's row: its words, then its three films side by side across
   the row (js/resources.js plays each while it's on screen) */
.res--app{grid-template-areas:"no name about get" ". show show show"}
.res__show{
  grid-area:show;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:clamp(4px,1vw,12px);
}
.res__film{
  aspect-ratio:16 / 9;
  background:#0A0A0A;
  border:1px solid var(--line);
  overflow:hidden;
}
.res__film video{display:block;width:100%;height:100%;object-fit:cover}
/* the app's own page (render-to-mp4.html): the films bigger (the user,
   2026-10-30), across the whole row from its edge, the first one wide
   and the other two side by side under it */
#render-to-mp4 .res--app{grid-template-areas:"no name about get" "show show show show"}
#render-to-mp4 .res__show{grid-template-columns:repeat(2,minmax(0,1fr))}
#render-to-mp4 .res__film:first-child{grid-column:1 / -1}
/* the app's tags and offline badge sit in the page head, right of the
   title at its first line (2026-11-06); under the title on phones */
.res-badges{align-self:start;display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding-top:clamp(8px,1.6vw,22px)}
.res-badges .role__meta{justify-content:flex-end}
#render-to-mp4 .res-list{border-top:0}
/* the Download sits over the tags in the head (2026-11-06), so the
   row below holds the films alone */
.res-badges .res__get{margin-bottom:10px}
/* its source link under the title, on the left (2026-11-06) */
.roles__intro .res__more{align-items:flex-start}
#render-to-mp4 .res-list .res--app{grid-template-columns:minmax(0,1fr);grid-template-areas:"show"}
@media (max-width:640px){.res-badges .res__get{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 18px}.res-badges .res-dl__menu{left:0;right:auto}}
@media (max-width:640px){.res-badges{align-items:flex-start;padding-top:0}.res-badges .role__meta{justify-content:flex-start}}

/* ---------------------------- the how-to ------------------- */

/* on the list's columns: the title under the names, the steps under
   the rest */
.res-how{
  display:grid;
  grid-template-columns:var(--cols);
  gap:20px;
  padding-top:clamp(48px,6vw,88px);
}
.res-how__title{
  grid-column:2;
  margin:0;
  font-size:clamp(1.35rem,2.2vw,1.9rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.res-how__steps{
  grid-column:3 / 5;
  max-width:46rem;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:step;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.res-how__steps li{
  counter-increment:step;
  position:relative;
  padding:16px 0 16px 2.6rem;
  border-bottom:1px solid var(--line);
  font-size:15.5px;
  line-height:1.55;
  color:var(--muted);
}
.res-how__steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute;
  left:0;
  top:16px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  line-height:1.55rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.res-how__steps strong{font-weight:500;color:var(--ink)}
.res-how__steps code{
  font-family:var(--mono);
  font-size:.86em;
  padding:1px 5px;
  background:var(--wash);
  border:1px solid var(--line);
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* ---------------------------- thank-you -------------------- */

/* the cookie card's language (carbon, square, its shadow, 24px off
   the screen's edge) at the other corner. Down, it waits under its
   place, invisible and out of the tab order; a download brings it up
   (js/resources.js sets data-on) */
.res-thanks{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:8000;
  width:min(440px, calc(100vw - 48px));
  padding:22px 24px 24px;
  background:var(--ground);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 24px 48px -16px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:
    opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease),
    visibility 0s linear var(--dur-3);
}
.res-thanks[data-on]{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:
    opacity .5s var(--ease),
    transform .7s var(--ease-soft),
    visibility 0s;
}

/* the careers' ice-blue glow: something has just arrived */
.res-thanks__got{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 40px 12px 0;
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.res-thanks__title{
  margin:0 40px 0 0;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
}
.res-thanks__text{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  text-wrap:pretty;
}
.res-thanks__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 22px;
  margin-top:20px;
}
.res-thanks__write{padding:10px 16px;font-size:14px}

.res-thanks__close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  background:none;
  color:var(--ink);
  cursor:pointer;
  transition:border-color var(--dur-1) var(--ease);
}
.res-thanks__close svg{width:12px;height:12px;transform:rotate(45deg)}
.res-thanks__close:hover,
.res-thanks__close:focus-visible{border-color:var(--ink)}
.res-thanks__close:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ---------------------------- smaller screens -------------- */

/* tablets: what it does drops under the name, the download stays at
   the row's end */
@media (max-width:1080px){
  .resources{--cols:3.4rem minmax(0,1fr) auto}
  /* the note in two even halves */
  .res-note{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,48px)}
  .res-note > :first-child,.res-note > :last-child{grid-column:auto;padding-right:0}
  .res{
    grid-template-areas:"no name get" ". about about";
    row-gap:18px;
  }
  .res__about{max-width:40rem}
  .res--app{grid-template-areas:"no name get" ". about about" ". show show"}
  #render-to-mp4 .res--app{grid-template-areas:"no name get" ". about about" "show show show"}
  .res__show{gap:12px}
  .res-how__title,.res-how__steps{grid-column:2 / -1}
}

/* phones: number beside the name, the rest under it, the download
   last and on its own line */
@media (max-width:640px){
  .resources{--cols:2rem minmax(0,1fr)}
  /* phones: one paragraph under the other again */
  .res-note{grid-template-columns:minmax(0,1fr)}
  .res{
    grid-template-areas:"no name" ". about" ". get";
    column-gap:12px;
    row-gap:16px;
  }
  .res .role__no{padding-top:.5em}
  .res__get{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 18px}
  /* the app: the films one under the other */
  .res--app{grid-template-areas:"no name" ". about" ". get" ". show"}
  #render-to-mp4 .res--app{grid-template-areas:"no name" ". about" ". get" "show show"}
  /* the builds open under the button from its left edge; the app's two
     links sit beside it */
  .res-dl__menu{right:auto;left:0}
  .res__more{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 18px}
  .res__show,#render-to-mp4 .res__show{grid-template-columns:minmax(0,1fr);gap:16px}
  .res-how{column-gap:12px}
  .res-how__steps li{padding-left:2.2rem}

  .res-thanks{
    left:12px;
    bottom:12px;
    width:calc(100vw - 24px);
    padding:20px 20px 22px;
  }
}
@media (max-width:400px){
  .resources{--cols:minmax(0,1fr)}
  .res{grid-template-areas:"no" "name" "about" "get";row-gap:12px}
  .res--app{grid-template-areas:"no" "name" "about" "get" "show"}
  .res .role__no{padding-top:0}
  .res-how__title,.res-how__steps{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  .res-thanks,
  .res-thanks[data-on]{transform:none}
  .res-mail__roll > span{transition:opacity .2s linear}
  .res-mail__done,.res-mail[data-copied] .res-mail__text{transform:none}
}