/* ==========================================================================
   Browser Extensions page only (browser-extensions.html,
   _build/extension_page.py). Loaded after systems.css; behaviour is all in
   systems.js.
   ========================================================================== */

#extensions { padding-bottom: clamp(36px, 4.5vw, 60px); }

/* ---- hero: one extension, every tab -------------------------------------------
   The hero IS one big browser (_build/extension_page.py tabs_hero): the page's
   words on the left of its page stay put, and the tabs change the site on the
   right. scrubhero.js pins it on wide screens (the .sh- rules live in
   systems.css) and scales it to fit the screen's height. */
.ex-big { padding-block: clamp(16px, 2.4vw, 32px) clamp(28px, 4vw, 56px); }
.ex-big__wrap { width: min(1380px, 100% - 2 * clamp(16px, 2.6vw, 40px)); margin-inline: auto; }
.ex-hero .sh-fit__in { width: 100%; }
.ex-u.ex-win { max-width: none; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 30px 70px -30px rgba(0, 0, 0, .35); }

/* the chrome: tabs, then the address bar with the extension's icon */
.ex-htabs { display: flex; align-items: flex-end; gap: 3px; padding: 10px 14px 0; background: #e8e8e4; }
.ex-htabs .ex-dots { align-self: center; margin: 0 14px 5px 2px; }
.ex-htabs .ex-dots i { width: 11px; height: 11px; }
.ex-htab {
  display: flex; align-items: center; gap: 8px; flex: 0 1 210px; min-width: 0; padding: 9px 16px 10px; border: 0; border-radius: 10px 10px 0 0; background: none;
  font: 12.5px/1.2 Arial, Helvetica, sans-serif; color: #5f6368; cursor: pointer; transition: background .2s, color .2s;
}
.ex-htab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-htab:hover { background: rgba(255, 255, 255, .5); }
.ex-htab.is-on { background: #f6f6f4; color: #202124; }
.ex-htab:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.ex-fav { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; font-style: normal; font-size: 9.5px; font-weight: 700; color: #fff; }
/* each site has its own colour (--site to fill, --site-ink for text on a tint); orange is kept for the extension */
.ex-win { --site: #2F5BD3; --site-ink: #2F5BD3; }
.ex-win:has(.ex-hpage[data-m="1"].is-on) { --site: #7A4FD3; --site-ink: #6A3FC4; }
.ex-win:has(.ex-hpage[data-m="2"].is-on) { --site: #E8A317; --site-ink: #8F5B00; }
.ex-win:has(.ex-hpage[data-m="3"].is-on) { --site: #C2407A; --site-ink: #A8326A; }
.ex-fav--0 { background: #2F5BD3; }
.ex-fav--1 { background: #7A4FD3; }
.ex-fav--2 { background: #E8A317; }
.ex-fav--3 { background: #C2407A; }
.ex-win > .ex-bar { padding: 9px 14px; }
.ex-win > .ex-bar .ex-url { padding: 6px 16px; font-size: 12.5px; }
.ex-win > .ex-bar .ex-ext .sy-mono { width: 24px; height: 24px; font-size: 11px; }
.ex-urls { flex: 1; }

/* the page: the words stay, the site beside them changes */
.ex-big__body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center;
  padding: clamp(24px, 3.6vw, 56px); background: var(--bg, #F4F3EF); font-family: var(--font-sans); color: var(--text);
}
.ex-big__copy .display { margin-top: 16px; font-size: clamp(38px, 4.9vw, 74px); }
.ex-big__copy .lede { margin-top: 18px; }
.ex-big__site {
  display: grid; gap: 16px; align-content: center; padding: clamp(18px, 2.2vw, 30px); border-radius: 18px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--site) 30%, transparent), transparent 62%),
              color-mix(in srgb, var(--site) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site) 22%, transparent);
  transition: background .6s ease, box-shadow .6s ease;
}
.ex-hpage { border-color: color-mix(in srgb, var(--site) 25%, #e3e3df); }
.ex-hcap b { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 400; line-height: 1.15; }
.ex-hcap p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ex-hpage { position: relative; border-radius: 12px; border: 1px solid #e3e3df; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #202124; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .3); }
.ex-hpage .ex-page { min-height: 340px; padding: 20px; }
.ex-hpage .ex-split { margin: -20px -20px -20px 0; }
.ex-hpage .ex-side { min-height: 340px; border-radius: 0 12px 12px 0; }
.ex-win .ex-pop { top: 12px; right: 12px; }

.ex-hcap .sg-k { color: var(--site-ink); font-weight: 600; }

/* every tab switch plays as an event, about a second long, in three beats:
   the browser loads (address types in, loading bar, the tab lights), the page
   slides in, then the extension acts on it (its icon pings, then its piece
   lands). Each rule keys off its moment's .is-on, so it replays every switch. */
.ex-win > .ex-bar { position: relative; }
.ex-url__t { display: inline-block; }
.ex-htab { position: relative; }
.ex-htab::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; border-radius: 2px; background: var(--site); transform: scaleX(0); }
.ex-htab.is-on::before { transform: none; }
.ex-ext { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ex-htab.is-on::before { animation: ex-grow .45s cubic-bezier(.2, .8, .2, 1) both; }
  .ex-url.is-on .ex-url__t { animation: ex-type .45s steps(24) both; }
  .ex-url.is-on::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--site); animation: ex-load .8s ease-out both;
  }
  /* the page slides in; the one leaving just fades */
  .ex-hpages > [data-m] { transform: none; transition: opacity .2s ease, visibility 0s .2s; }
  .ex-hpages > .is-on { animation: ex-page .6s cubic-bezier(.2, .8, .2, 1) both; transition-delay: 0s; }
  /* the old caption clears before the new one rises, so the two never overlap */
  .ex-hcaps > [data-m] { transform: none; transition: opacity .15s ease, visibility 0s .15s; }
  .ex-hcaps > .is-on { animation: ex-rise .45s .12s cubic-bezier(.2, .8, .2, 1) both; transition-delay: 0s; }
  .ex-ext.is-ping::after {
    content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
    animation: ex-ping .8s .3s ease-out both;
  }
  /* then the extension's piece lands */
  .ex-hpage.is-on .ex-inject { animation: ex-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
  .ex-hpage.is-on .ex-crm li:nth-child(1) .ex-inject { animation-delay: .5s; }
  .ex-hpage.is-on .ex-crm li:nth-child(2) .ex-inject { animation-delay: .65s; }
  .ex-hpage.is-on .ex-crm li:nth-child(3) .ex-inject { animation-delay: .8s; }
  .ex-hpage.is-on .ex-tip { animation: ex-rise .4s 1.05s ease-out both; }
  .ex-hpage.is-on .ex-side { animation: ex-side .55s .45s cubic-bezier(.2, .8, .2, 1) both; }
  .ex-hpage.is-on .ex-cap li.is-on { animation: ex-tick .35s ease-out both; }
  .ex-hpage.is-on .ex-cap li:nth-child(1) { animation-delay: .5s; }
  .ex-hpage.is-on .ex-cap li:nth-child(2) { animation-delay: .65s; }
  .ex-hpage.is-on .ex-cap li:nth-child(4) { animation-delay: .8s; }
  .ex-hpage.is-on .ex-float { animation: ex-rise .45s 1s cubic-bezier(.2, .8, .2, 1) both; }
  .ex-hpage.is-on .ex-pop { transform-origin: top right; animation: ex-drop .5s .45s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes ex-grow { from { transform: scaleX(0); } }
@keyframes ex-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ex-load { 0% { width: 0; opacity: 1; } 75% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@keyframes ex-page { from { opacity: 0; transform: translateX(56px); } }
@keyframes ex-ping { from { box-shadow: 0 0 0 0 rgba(226, 82, 15, .65); } to { box-shadow: 0 0 0 16px rgba(226, 82, 15, 0); } }
@keyframes ex-pop {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; box-shadow: 0 0 0 0 rgba(226, 82, 15, .55); }
  100% { transform: none; box-shadow: 0 0 0 10px rgba(226, 82, 15, 0); }
}
@keyframes ex-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ex-side { from { opacity: 0; transform: translateX(100%); } }
@keyframes ex-tick { 0% { background: transparent; border-color: #ececea; } 50% { background: rgba(226, 82, 15, .14); } }
@keyframes ex-drop { from { opacity: 0; transform: translateY(-12px) scale(.9); } }

@media (max-width: 900px) {
  .ex-big__body { grid-template-columns: minmax(0, 1fr); }
  .ex-htabs { padding-inline: 10px; }
  .ex-htabs .ex-dots { display: none; }
  .ex-htab { padding-inline: 10px; }
  .ex-htab.is-on { flex-shrink: 0; }
}

/* ---- a browser, drawn in CSS ------------------------------------------------- */
.ex-u { position: relative; max-width: 390px; width: 100%; font-family: Arial, Helvetica, sans-serif; }
.ex-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #ececec; background: #f6f6f4; }
.ex-dots { display: flex; gap: 5px; }
.ex-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d6d6d2; }
.ex-url { flex: 1; padding: 4px 12px; border-radius: 100px; background: #fff; font-size: 10.5px; color: #8a8f94; }
.ex-ext { padding: 3px; border-radius: 8px; background: rgba(226, 82, 15, .14); box-shadow: 0 0 0 2px rgba(226, 82, 15, .35); }
.ex-ext .sy-mono { width: 20px; height: 20px; font-size: 10px; }
.ex-page { position: relative; min-height: 318px; padding: 16px; display: grid; gap: 10px; align-content: start; }
.ex-sk { display: block; height: 10px; border-radius: 100px; background: #eeeeeb; }
.ex-sk--h { width: 60%; height: 18px; }
.ex-sk--m { width: 85%; }
.ex-sk--box { height: 64px; border-radius: 8px; }
.ex-sk--s { width: 70%; }
.ex-pop {
  position: absolute; top: 44px; right: 10px; width: 232px; display: grid; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid #e6e6e3;
  background: #fff; box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .32);
}
.ex-pop::before { content: ""; position: absolute; top: -6px; right: 14px; width: 10px; height: 10px; border-left: 1px solid #e6e6e3; border-top: 1px solid #e6e6e3; background: #fff; transform: rotate(45deg); }
.ex-pop__h { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; margin: 0; }
.ex-pop__h .sy-mono { width: 22px; height: 22px; font-size: 10px; }
.ex-pop__h b { font-size: 12.5px; }
.ex-pop__h small { font-size: 9.5px; color: #8a8f94; }
.ex-pop__k { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.ex-f { display: grid; gap: 3px; margin: 0; }
.ex-f small { font-size: 9.5px; color: #70757a; }
.ex-f span { padding: 6px 9px; border-radius: 7px; border: 1px solid #e3e3e0; font-size: 11.5px; }
.ex-tags { display: flex; gap: 5px; margin: 0; }
.ex-tags em { padding: 2px 8px; border-radius: 100px; background: #f1f1ef; font-style: normal; font-size: 10.5px; color: #555; }
.ex-tags em:last-child { background: none; border: 1px dashed #d6d6d2; }
.ex-btn { display: block; padding: 8px; border-radius: 8px; background: #E2520F; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.ex-btn--ghost { background: none; border: 1px solid #d6d6d2; color: #202124; }
.ex-ok { margin: 0; font-size: 10.5px; color: #1d6b3c; text-align: center; }

.ex-split { display: grid; grid-template-columns: 1fr 172px; gap: 12px; margin: -16px -16px -16px 0; }
.ex-split > div { display: grid; gap: 10px; align-content: start; padding-top: 16px; }
.ex-side { display: grid; gap: 9px; align-content: start; padding: 14px 12px; border-left: 1px solid #ececec; background: #fafaf8; min-height: 318px; box-sizing: border-box; }
.ex-side__k { margin: 4px 0 0; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #70757a; }
.ex-side__co { display: grid; margin: 0; }
.ex-side__co b { font-size: 13px; }
.ex-side__co small { font-size: 10px; color: #8a8f94; }
.ex-facts { list-style: none; margin: 0; padding: 0; display: grid; }
.ex-facts li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #ededea; font-size: 11px; color: #555; }
.ex-facts b { color: #202124; }

.ex-crm__h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 15px; font-weight: 700; }
.ex-crm__h small { font-size: 11px; font-weight: 400; color: #8a8f94; }
.ex-crm { list-style: none; margin: 0; padding: 0; display: grid; }
.ex-crm li { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #f0f0ee; }
.ex-crm li > i { width: 28px; height: 28px; border-radius: 50%; background: #e4e6ea; }
.ex-crm span { display: grid; flex: 1; }
.ex-crm b { font-size: 12px; }
.ex-crm small { font-size: 10px; color: #8a8f94; }
.ex-inject { padding: 5px 9px; border-radius: 7px; background: #E2520F; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 3px rgba(226, 82, 15, .18); }
.ex-inject--done { background: #e6f2ea; color: #1d6b3c; box-shadow: none; }
.ex-tip { justify-self: end; padding: 6px 10px; border-radius: 8px; background: #202124; color: #fff; font-size: 10px; }

.ex-cap { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-cap li { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; border: 1px solid #ececea; }
.ex-cap li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #c9c9c5; }
.ex-cap li.is-on { border-color: rgba(226, 82, 15, .45); background: rgba(226, 82, 15, .05); }
.ex-cap li.is-on::before { border-color: #E2520F; background: #E2520F; box-shadow: inset 0 0 0 2px #fff; }
.ex-cap li i { width: 40px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #d6d6d2, #eeeeeb); }
.ex-cap span { display: grid; }
.ex-cap b { font-size: 12px; }
.ex-cap small { font-size: 10px; color: #8a8f94; }
.ex-float { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 100px; background: #202124; color: #fff; font-size: 11.5px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.ex-float span { padding: 5px 10px; border-radius: 100px; background: #E2520F; font-weight: 700; }

/* ---- ask for less: the install prompt ------------------------------------------ */
.ex-dlg { position: relative; min-height: 380px; background: #f1f1ee; }
.ex-dlg__page { display: grid; gap: 10px; padding: 22px; opacity: .5; }
.ex-dlg__box {
  position: absolute; top: 26px; left: 50%; width: min(400px, calc(100% - 32px)); transform: translateX(-50%); display: grid; gap: 10px; padding: 18px 20px;
  border-radius: 12px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .4); box-sizing: border-box;
}
.ex-dlg__h { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; }
.ex-mono--grey { background: #8C95A0; }
.ex-dlg__k { margin: 0; font-size: 12.5px; color: #555; }
.ex-dlg__list { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13px; }
.ex-dlg__note { display: block; padding: 7px 10px; border-radius: 8px; background: #e6f2ea; color: #1d6b3c; font-size: 11.5px; font-weight: 700; }
.ex-dlg__note--warn { background: #fde4da; color: #B4400A; }
p.sy-hl:has(.ex-dlg__note) { margin: 0; padding: 0; box-shadow: none; background: none; }
.ex-dlg__btns { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; font-size: 12.5px; }
.ex-dlg__btns span, .ex-dlg__btns b { padding: 8px 14px; border-radius: 100px; border: 1px solid #d6d6d2; }
.ex-dlg__btns b { border-color: #2F5BD3; background: #2F5BD3; color: #fff; }

/* ---- the browser assembling -------------------------------------------------- */
.ex-frame { fill: rgba(var(--ov), .02); stroke: var(--line-2); stroke-width: 1.5; }
.ex-frame__rule { stroke: var(--line-2); }
.ex-tab path { fill: rgba(var(--ov), .03); stroke: var(--line-2); stroke-width: 1.2; transition: fill var(--mid), stroke var(--mid); }
.ex-tab text { fill: var(--text-3); font-size: 11px; letter-spacing: .12em; transition: fill var(--mid); }
.ex-tab.is-live path { fill: rgba(226, 82, 15, .08); stroke: rgba(226, 82, 15, .55); }
.ex-tab.is-live text { fill: var(--text); }
.ex-addr { fill: rgba(var(--ov), .03); stroke: var(--line-2); }
.ex-addr__fill { fill: url(#syLine); opacity: .85; }
.ex-plan { fill: none; stroke: var(--text-3); stroke-width: 1.3; stroke-dasharray: 5 6; opacity: .6; }
.ex-piece { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.sg-js .ex-piece:not(.is-live) { opacity: 0; transform: translateY(6px); }
.ex-ico { fill: var(--orange); }
.ex-ico__t { fill: #fff; font-family: var(--font-display); font-size: 15px; }
.ex-pop__bg { fill: var(--ink); stroke: var(--line-2); stroke-width: 1.5; filter: drop-shadow(0 16px 24px rgba(20, 20, 20, .16)); }
.ex-svg__h { fill: var(--text); font-family: var(--font-display); font-size: 24px; letter-spacing: -.01em; }
.ex-svg__t { fill: var(--text-2); font-family: var(--font-body, Georgia, serif); font-size: 14px; }
.ex-field { fill: rgba(var(--ov), .03); stroke: var(--line-2); }
.ex-go { fill: var(--orange); }
.ex-go__t { fill: #fff; font-size: 12px; letter-spacing: .14em; }
.ex-site circle { fill: rgba(127, 184, 240, .25); stroke: #7FB8F0; }
.ex-site path { fill: none; stroke: var(--cobalt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-store rect { fill: none; stroke: var(--cobalt); stroke-width: 1.3; }
.ex-store text { fill: var(--cobalt); font-size: 10px; letter-spacing: .1em; }
.ex-user { fill: url(#syLine); stroke: var(--ink); stroke-width: 2; }
@media (max-width: 900px) {
  /* the window has no free headroom: the figure keeps its full height */
  .ex-split { grid-template-columns: 1fr 150px; }
}
@media (prefers-reduced-motion: reduce) { .ex-piece { transition: none; } }