/* The ChatGPT Shortcuts page (a free resource from the MC Letter). The page loads /assets/site.css first and this
   file second, so a rule here wins a tie with a shared rule at every width, phones included.

   From the shared file: the header, the chip, the buttons, the photo frames and their tilts, the bands (.sec,
   .sec--deep, .on-dark), the step table for an olive band (.table3 with .tcell and .badge), the italic line under it
   (.after-line), the number pill, the form box (.field), the MC Letter band (.split, .formcard--stack, .pg__box),
   the fade-ups and the footer.
   This file holds only what the shared file doesn't cover: the centered hero, the six picture cards, the search box,
   the group chips, the shortcut buttons with their "Copied" tag, and the MC Letter band's own rules, copied from the
   Content page's page.css.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them. */

/* a press on "See All 249 Shortcuts" or on a group chip glides to it (not when he has asked for less motion) */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- 1. hero: centered words, with the cloud and the two birds from the shared doodles on wide screens ---------- */
.sc-hero{position:relative;overflow:hidden;padding-block:56px 40px;text-align:center}
.sc-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.sc-hero__h1{max-width:920px;margin:22px 0 18px;font-size:clamp(44px, 4.6vw, 66px);line-height:1.02}
.sc-hero__lede{max-width:680px;font-size:20px;line-height:1.55;text-wrap:pretty}
.sc-hero__cta{margin-top:28px}
.sc-hero__doodle{position:absolute;z-index:1;pointer-events:none}
.sc-hero__cloud{width:150px;left:max(24px, calc(50% - 600px));top:54px}
.sc-hero__bird-a{width:44px;right:max(64px, calc(50% - 560px));top:78px}
.sc-hero__bird-b{width:32px;right:max(124px, calc(50% - 500px));top:120px}

/* ---------- 2. the six pictures: square framed cards, three across. The five made with a shortcut are buttons that
   copy it; their label is a Peach Red pill with the copy icon. The original's label is a plain pill. ---------- */
.sc-pics{padding-block:24px 112px}
.sc-pics__grid{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 36px}
.sc-pic{min-width:0}
.sc-pic__fig,.sc-pic__btn{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;margin:0}
.sc-pic__btn{position:relative;padding:0;border:0;border-radius:18px;background:none;color:var(--ink);font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sc-pic__btn:focus-visible{outline:3px solid var(--red);outline-offset:8px}
.sc-pic__frame{display:block;width:100%;aspect-ratio:1/1}
.sc-pic__tag{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:46px;padding:10px 20px 9px;border:2px solid var(--ink);border-radius:999px;background:var(--red);color:var(--ink);font:800 19px/1.2 var(--sans);box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease, box-shadow .12s ease}
.sc-pic__tag svg{width:20px;height:20px;flex:none}
.sc-pic__tag--plain{background:var(--paper);box-shadow:none}
@media (hover:hover){
  .sc-pic__btn:hover .sc-pic__tag{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
}
.sc-pic__btn:active .sc-pic__tag{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
/* Justin's note under the cards */
.sc-pics__note{max-width:820px;margin:76px auto 0;padding:4px 0 4px 26px;border-left:5px solid var(--red)}
.sc-pics__note p{font-size:20px;line-height:1.6}
.sc-pics__note p + p{margin-top:16px}

/* ---------- 3. how to use them: the shared step table for an olive band, as a numbered list ---------- */
.sc-how__h{max-width:900px;margin-bottom:48px}
.sc-steps{list-style:none;margin:0;padding:0}
.sc-steps .tcell p{font-size:20px;line-height:1.5}
.sc-steps strong{font-weight:800}

/* ---------- 4. the library ---------- */
.sc-lib__h{max-width:900px}
/* the search box (it only works with scripts on, so it is not drawn without them) */
.sc-search{margin-top:36px;max-width:620px}
html:not(.js) .sc-search{display:none}
.sc-search__in{-webkit-appearance:none;appearance:none;min-height:56px;padding-left:50px;font-size:19px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6' fill='none' stroke='%23253122' stroke-width='2.6'/%3E%3Cpath d='M15.6 15.6 L20.5 20.5' fill='none' stroke='%23253122' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center;background-size:22px 22px}
.sc-search__in::placeholder{color:rgba(37,49,34,.72);opacity:1}
/* the browser's own clear button, drawn as an olive cross so it matches the site */
.sc-search__in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-left:8px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5 L17.5 17.5 M17.5 6.5 L6.5 17.5' fill='none' stroke='%23253122' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px}
/* the group chips: they wrap on wide screens. Below 900 wide they are one row that scrolls sideways (see the end of
   this file) and stays under the header while he scrolls the list. */
.sc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sc-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px 7px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:700 15px/1.25 var(--sans);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s ease, color .15s ease}
/* hovered or pressed, a chip turns olive with Naples Yellow words (the open MENU button's colors). Peach Red would put
   15px olive words on Peach Red, which the site only allows at 19px bold and up. */
@media (hover:hover){
  .sc-chip:hover{background:var(--ink);color:var(--paper)}
}
.sc-chip:active{background:var(--ink);color:var(--paper)}
/* nothing matches */
.sc-empty{margin-top:40px;max-width:620px;padding:18px 22px 18px 28px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:inset 8px 0 0 var(--red);font-size:19px;font-weight:700;line-height:1.45}
/* the groups: a heading with the count, then a grid of shortcut buttons */
.sc-group{margin-top:60px;scroll-margin-top:calc(var(--nav-h) + 28px)}
/* the heading wraps like plain words; the last word and the count are held together (.sc-group__end), so the count never
   ends up on a line of its own */
.sc-group__h{margin-bottom:24px;font-size:clamp(28px, 2.6vw, 36px)}
.sc-group__end{white-space:nowrap}
.sc-group__n{position:relative;top:-.12em;margin-left:4px;vertical-align:middle;font-family:var(--sans);letter-spacing:.04em}
.sc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sc-item{display:flex;min-width:0}
.sc-btn{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:78px;margin:0;padding:14px 48px 14px 18px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover){
  .sc-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
  .sc-btn:hover .sc-btn__ic{opacity:1}
}
.sc-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.sc-btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sc-btn__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-btn__name{font:800 18px/1.25 var(--sans);overflow-wrap:anywhere}
.sc-btn__desc{font-size:16px;font-weight:500;line-height:1.4}
.sc-btn__thumb{flex:none;width:60px;height:60px;border:2px solid var(--ink);border-radius:10px;background:#000;object-fit:cover}
.sc-btn__ic{position:absolute;top:12px;right:12px;width:20px;height:20px;opacity:.55}
.is-copied .sc-btn__ic{visibility:hidden}
/* the note after the last group */
.sc-note{margin-top:44px;max-width:820px;padding-left:22px;border-left:5px solid var(--red);font-size:19px;font-weight:600;line-height:1.5}

/* ---------- the "Copied" tag: the script puts it in a button after a copy, for 1.5 seconds ---------- */
.sc-ok{display:none;position:absolute;z-index:3;align-items:center;padding:5px 12px 4px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:800 15px/1.2 var(--sans);letter-spacing:.04em;pointer-events:none}
.is-copied .sc-ok{display:inline-flex;animation:sc-pop .18s ease-out}
/* in a list button the tag sits on the top edge, like a sticker, above the line the shortcut is written on, so it never
   covers the shortcut or its description at any width (it used to sit inside the corner and covered the end of
   "/multipleexposure" when the list was two across at 600 to 619 wide) */
.sc-btn .sc-ok{top:-13px;right:12px;padding:3px 10px 2px;font-size:14px;line-height:1.1}
.sc-pic__btn .sc-ok{top:16px;right:16px;padding:7px 16px 6px;font-size:17px;border-color:var(--paper)}
@keyframes sc-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ---------- 5. the MC Letter: the Content page's own rules for this band, copied unchanged from content/page.css ---------- */
/* the right column holds the form card and, under it, a framed photo */
.letter__side{min-width:0;display:flex;flex-direction:column}
.letter__side > .formcard{margin-top:0}
.letter__ph{width:72%;margin:36px 0 0;align-self:flex-end}

/* ===================== responsive ===================== */
@media (max-width:1100px){
  .sc-pics__grid{gap:40px 28px}
}
@media (max-width:1023px){
  .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .sc-hero{padding-block:40px 32px}
  .sc-hero__doodle{display:none}
  .sc-pics{padding-block:16px 80px}
  .sc-pics__grid{gap:32px 22px}
  .sc-pic__fig,.sc-pic__btn{gap:18px}
  /* the label takes the card's width; its words stay 19px bold, as olive on Peach Red must (site.css, A1 and C7) */
  .sc-pic__tag{width:100%;gap:8px;padding:8px 10px 7px;box-shadow:3px 3px 0 var(--ink)}
  .sc-pic__tag--plain{box-shadow:none}
  .sc-pic__tag svg{width:18px;height:18px}
  .sc-pics__note{margin-top:56px}
  .sc-how__h{margin-bottom:36px}
  /* the chips: one row that scrolls sideways, from one edge of the screen to the other, and stays under the header */
  .sc-chips{position:sticky;top:calc(var(--nav-h) + 2px);z-index:20;flex-wrap:nowrap;gap:8px;margin:20px calc(-1 * var(--gut)) 0;padding:10px var(--gut);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--paper-deep), var(--paper);border-bottom:2px solid rgba(37,49,34,.16)}
  .sc-chips::-webkit-scrollbar{display:none}
  .sc-chips::after{content:"";flex:0 0 calc(var(--gut) - 8px)}
  .sc-chip{flex:none}
  html:not(.js) .sc-chips{top:0}
  .sc-group{margin-top:48px;scroll-margin-top:calc(var(--nav-h) + 92px)}
}
@media (max-width:599px){
  .sc-hero{padding-block:24px 26px}
  .sc-hero__h1{margin:14px 0 12px;font-size:clamp(31px, 9.2vw, 40px)}
  .sc-hero__lede{font-size:16px;line-height:1.5}
  .sc-hero__cta{margin-top:20px;align-self:stretch}
  .sc-hero__cta .btn{width:100%}
  .sc-pics{padding-block:14px 64px}
  .sc-pics__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .sc-pic__frame.frame{box-shadow:5px 5px 0 var(--ink)}
  .sc-pic__fig,.sc-pic__btn{gap:16px}
  .sc-pic__tag{min-height:44px;gap:6px;padding:8px 6px 7px}
  .sc-pic__tag svg{width:16px;height:16px}
  .sc-pic__btn .sc-ok{top:10px;right:10px;padding:5px 10px 4px;font-size:15px}
  .sc-pic__btn:focus-visible{outline-offset:5px}
  .sc-pics__note{margin-top:44px;padding-left:18px}
  .sc-pics__note p{font-size:17px}
  .sc-steps .tcell p{font-size:17px}
  .sc-search{margin-top:24px}
  .sc-search__in{min-height:52px;padding-left:46px;font-size:16px;background-position:left 14px center;background-size:20px 20px}
  .sc-chip{font-size:14px;padding:8px 14px 7px;letter-spacing:.05em}
  .sc-empty{margin-top:28px;padding:16px 18px 16px 24px;font-size:17px}
  .sc-group{margin-top:40px}
  .sc-group__h{margin-bottom:16px;font-size:26px}
  .sc-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .sc-btn{min-height:64px;padding:12px 44px 12px 14px;box-shadow:3px 3px 0 var(--ink)}
  .sc-btn__name{font-size:17px}
  .sc-btn__desc{font-size:15px}
  .sc-btn__thumb{width:52px;height:52px}
  .sc-note{margin-top:32px;padding-left:16px;font-size:17px}
  /* phones, the MC Letter (copied unchanged from content/page.css): the signup form is drawn straight under the
     headline. The band is drawn in this order: chip, headline, form, photo, the two paragraphs, the bordered box.
     Only the drawing order changes; the page itself keeps words first, form second (the order a screen reader reads). */
  .letter{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .letter > .flow,.letter > .letter__side{display:contents}
  .letter > .flow > *{order:5}
  .letter > .flow > .chip{order:1}
  .letter > .flow > h2{order:2}
  .letter__side > .formcard{order:3;margin-top:22px}
  .letter__ph{order:4;width:100%;margin:30px 0 12px;align-self:stretch}
}
@media (max-width:374px){
  /* the smallest phones: the hero button keeps its words on one line (the words stay 19px bold, as on every Peach Red button) */
  .sc-hero__cta .btn{gap:8px;padding-inline:12px}
  .sc-hero__cta .btn svg{width:20px;height:20px}
  .sc-pic__tag svg{display:none}
  /* the smallest phones: the shared file makes a form button 43.8px tall there. The signup button stays 44. */
  .formcard--stack .form-row .btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .sc-btn,.sc-pic__tag,.sc-chip{transition:none}
  .is-copied .sc-ok{animation:none}
}