/* IshedDB public site: tokens, banner, header with its four menus, footer. Page styles live in each page. The
   layout uses its own `s-` and `mm-` classes so that a page's styles never change it. */
@import url(/fonts/fonts.css);

:root {
  /* The console's palette, for the whole site: black, white, sapin (console.css keeps the same values). */
  --k-bg: #0B0E0D; --k-panel: #111614; --k-raise: #161C19; --k-line: #222A26; --k-line-2: #2D3732;
  --k-text: #E9EEEB; --k-soft: #A9B4AE; --k-mute: #76827C;
  --k-sapin: #1F6B46; --k-sapin-hi: #25804F; --k-sapin-text: #74C99F; --k-sapin-tint: rgba(31,107,70,.20);
  --k-warn: #E2B65A; --k-warn-tint: rgba(226,182,90,.14); --k-danger: #F08A8A; --k-danger-tint: rgba(240,138,138,.12);
  /* The former names, kept for any style still using them, now in the same palette. */
  --navy: var(--k-text);
  --indigo: var(--k-sapin-text);
  --indigo-dark: var(--k-sapin-hi);
  --mint: var(--k-sapin-text);
  --gold: #E2B65A;
  --ink: var(--k-text);
  --muted: var(--k-soft);
  --line: var(--k-line);
  color-scheme: dark;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--k-bg); color: var(--k-text); font-family: Inter, system-ui, sans-serif; }
.s-skip { position: absolute; left: -9999px; }
.s-skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--k-panel); padding: 10px 14px; border-radius: 10px; }

.s-banner { background: var(--k-sapin); color: #FFFFFF; font-size: 14px; text-align: center; padding: 9px 16px; }
.s-banner strong { background: var(--k-panel); color: var(--k-sapin-text); border-radius: 999px; padding: 2px 10px; margin-right: 10px; font-size: 12px; }
.s-banner a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.s-banner { display: flex; align-items: center; justify-content: center; gap: 12px; }
.s-ann { margin: 0; display: none; }
.s-ann.on { display: block; animation: s-ann-in .5s var(--ease-out) both; }
@keyframes s-ann-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s-ann-arrow { background: none; border: none; color: #FFFFFF; font-size: 18px; cursor: pointer; padding: 0 6px; }

.s-header { position: sticky; top: 0; z-index: 50; background: var(--k-bg); border-bottom: 1px solid var(--k-line); }
.s-bar { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.s-logo { display: flex; align-items: center; gap: 9px; color: var(--k-text); text-decoration: none; font-family: 'DM Serif Display', Georgia, serif; font-size: 24px; }
.s-nav { flex: 1; display: flex; align-items: center; gap: 24px; }
.s-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.s-top { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font: inherit; font-size: 15px; color: var(--k-soft); padding: 8px 10px; border-radius: 999px; cursor: pointer; text-decoration: none; transition: color .2s var(--ease-out), background .2s var(--ease-out); }
.s-top:hover, .s-top[aria-expanded="true"], .s-top[aria-current="page"] { color: var(--k-sapin-text); }
.s-top[aria-expanded="true"] { font-weight: 600; }
.s-top .s-chev { transition: transform .3s var(--ease-out); }
.s-top[aria-expanded="true"] .s-chev { transform: rotate(180deg); }
.s-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.s-right a { color: var(--k-soft); text-decoration: none; font-size: 15px; }
.s-right a:hover { color: var(--k-sapin-text); }
.s-right a.s-cta, .s-cta { background: var(--k-sapin); color: #FFFFFF; border-radius: 999px; padding: 10px 20px; font-weight: 600; text-decoration: none; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.s-right a.s-cta:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(31,107,70,.35); }
.s-close { display: none; }
.s-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--k-line); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; color: var(--k-text); cursor: pointer; }

/* The four menus: a panel under the bar, opened by click (or hover with a mouse), closed by Escape or a click
   elsewhere. */
.mm { position: absolute; left: 0; right: 0; top: 100%; display: none; }
.mm.open { display: block; }
.mm-panel { max-width: 1180px; margin: 0 auto; background: var(--k-panel); border-radius: 0 0 22px 22px; box-shadow: 0 22px 44px rgba(0,0,0,0.35); display: flex; overflow: hidden; animation: mm-drop .45s var(--ease-out) both; }
@keyframes mm-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mm-cols { flex: 1 1 auto; padding: 26px 30px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 34px; }
.mm-cap { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; color: var(--k-text); margin: 8px 10px 4px; }
.mm-it { display: flex; gap: 14px; padding: 10px; border-radius: 14px; text-decoration: none; transition: background .2s var(--ease-out), transform .2s var(--ease-out); }
.mm-it:hover { background: var(--k-raise); transform: translateX(3px); }
.mm-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #070908; display: grid; place-items: center; }
.mm-t { display: block; font-weight: 600; color: var(--k-text); font-size: 16px; }
.mm-d { display: block; color: var(--k-soft); font-size: 14px; line-height: 1.45; }
.mm-soon { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--k-text); background: var(--k-sapin-tint); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.mm-foot { grid-column: 1 / -1; display: flex; gap: 60px; border-top: 1px solid var(--k-line); margin-top: 12px; padding: 16px 10px 0; }
.mm-foot a { text-decoration: none; }
.mm-side { flex: 0 0 300px; background: var(--k-raise); display: flex; flex-direction: column; }
.mm-promo { padding: 22px 24px; border-bottom: 1px solid var(--k-line); display: flex; flex-direction: column; gap: 8px; }
.mm-promo:last-child { border-bottom: none; }
.mm-pt { font-weight: 700; color: var(--k-text); font-size: 15px; }
.mm-pd { color: var(--k-soft); font-size: 14px; }
.mm-pill { text-align: center; border: 1px solid var(--k-sapin); border-radius: 999px; padding: 8px 0; color: var(--k-sapin-text); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 4px; }
.mm-pill:hover { background: var(--k-sapin); color: #FFFFFF; }
.mm-txt { display: block; padding: 9px 10px; border-radius: 12px; font-weight: 600; color: var(--k-text); font-size: 16px; text-decoration: none; transition: background .2s var(--ease-out), transform .2s var(--ease-out); }
.mm-txt:hover { background: var(--k-raise); transform: translateX(3px); }

.s-footer { background: var(--k-bg); color: var(--k-soft); }
.s-footer-in { max-width: 1280px; margin: 0 auto; padding: 60px 24px 34px; display: grid; grid-template-columns: 1fr repeat(4, minmax(0, 1fr)); gap: 28px; font-size: 15px; }
.s-footer h2 { margin: 0 0 16px; color: #FFFFFF; font-size: 15px; font-weight: 600; }
.s-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.s-footer a { color: var(--k-soft); text-decoration: none; }
.s-footer a:hover { color: #FFFFFF; }
.s-brand { display: flex; flex-direction: column; gap: 16px; }
.s-brand span:first-child { display: flex; align-items: center; gap: 9px; font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; color: #FFFFFF; }

/* Phones and small tablets: Bridge's signature, the menu slides in from the RIGHT. */
@media (max-width: 1000px) {
  .s-burger { display: inline-block; }
  .s-close { display: block; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--k-line); background: var(--k-panel); font-size: 16px; color: var(--k-text); cursor: pointer; }
  .s-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); flex-direction: column; align-items: stretch; gap: 10px; background: var(--k-panel); box-shadow: -20px 0 50px rgba(0,0,0,0.5); padding: 70px 18px 24px; overflow-y: auto; transform: translateX(105%); transition: transform .5s var(--ease-out); z-index: 60; }
  .s-nav.open { transform: none; }
  .s-menu { flex-direction: column; }
  .s-top { width: 100%; justify-content: space-between; font-size: 17px; padding: 12px 10px; }
  .mm { position: static; }
  .mm-panel { flex-direction: column; box-shadow: none; border-radius: 14px; background: var(--k-raise); animation: none; }
  .mm-cols { grid-template-columns: 1fr; padding: 8px; }
  .mm-side, .mm-foot { display: none; }
  .mm-ic { display: none; }
  .s-right { margin: 10px 0 0; flex-direction: column; align-items: stretch; gap: 14px; }
  .s-right a.s-cta { text-align: center; }
  .s-footer-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .s-footer-in { grid-template-columns: 1fr; } }

/* The pages on phones: one column, smaller titles, wide tables scroll inside their card, never the page. */
@media (max-width: 760px) {
  main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  main h1 { font-size: clamp(34px, 9vw, 46px) !important; }
  main h2 { font-size: clamp(26px, 7vw, 34px) !important; }
  main table { display: block; overflow-x: auto; max-width: 100%; }
  main input:not([type="checkbox"]), main select { min-width: 0; max-width: 100%; width: 100%; }
  main label, main form, main [style*="flex:"] { min-width: 0; }
  main [style*="padding: 34px"], main [style*="padding: 40px;"] { padding: 24px !important; }
  main [style*="padding: 40px 56px"], main [style*="padding: 40px 48px"], main [style*="padding: 64px 56px"], main [style*="padding: 56px 44px"] { padding: 28px 18px !important; }
}
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mm-panel, .s-nav { animation: none; transition: none; }
}

/* An integration's library files, to download. */
.files{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.files a{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:13px;padding:6px 10px;border:1px solid var(--k-line-2);border-radius:10px;text-decoration:none}

::selection { background: var(--k-sapin); color: #FFFFFF; }

/* The places of the palette (owner's decision, 10/11/2026): white dominates where one reads and fills forms; sapin
   in the big titles, the calls to action, the ServicesFann band, the sign-in panels and the footer; black in the
   console and the code. Each place redefines the same tokens, so the styles stay written once. */
.t-light {
  --k-bg: #FFFFFF; --k-panel: #FFFFFF; --k-raise: #F3F6F4; --k-line: #E1E7E3; --k-line-2: #C9D3CD;
  --k-text: #0B0E0D; --k-soft: #46524B; --k-mute: #66726B;
  --k-sapin: #1F6B46; --k-sapin-hi: #25804F; --k-sapin-text: #1F6B46; --k-sapin-tint: rgba(31,107,70,.10);
  --k-warn: #9A6400; --k-warn-tint: rgba(226,182,90,.20); --k-danger: #B3261E; --k-danger-tint: rgba(179,38,30,.08);
  color-scheme: light; color: var(--k-text);
}
.t-sapin {
  --k-bg: #1F6B46; --k-panel: #1A5C3C; --k-raise: #236F4B; --k-line: rgba(255,255,255,.16); --k-line-2: rgba(255,255,255,.28);
  --k-text: #FFFFFF; --k-soft: #DCEDE3; --k-mute: #B3D3C2;
  --k-sapin: #0B0E0D; --k-sapin-hi: #1E2522; --k-sapin-text: #BDE5CE; --k-sapin-tint: rgba(255,255,255,.14);
  --k-warn: #E2B65A; --k-warn-tint: rgba(226,182,90,.18); --k-danger: #FFD0D0; --k-danger-tint: rgba(255,208,208,.14);
  color-scheme: dark; color: var(--k-text);
}
.t-dark {
  --k-bg: #0B0E0D; --k-panel: #111614; --k-raise: #161C19; --k-line: #222A26; --k-line-2: #2D3732;
  --k-text: #E9EEEB; --k-soft: #A9B4AE; --k-mute: #76827C;
  --k-sapin: #1F6B46; --k-sapin-hi: #25804F; --k-sapin-text: #74C99F; --k-sapin-tint: rgba(31,107,70,.20);
  --k-warn: #E2B65A; --k-warn-tint: rgba(226,182,90,.14); --k-danger: #F08A8A; --k-danger-tint: rgba(240,138,138,.12);
  color-scheme: dark; color: var(--k-text);
}
body.t-light { background: var(--k-bg); }
/* A band that reaches both edges of the window, whatever the width of its content. */
.band { background: var(--k-bg); box-shadow: 0 0 0 100vmax var(--k-bg); clip-path: inset(0 -100vmax); }
.band-pad { padding-top: 56px !important; padding-bottom: 64px !important; }