/* InterSpace Help Centre · isd-hc.css
   Help-centre layer on top of css/isd-site.css (the interspacemusic.com stylesheet,
   vendored verbatim). Everything here reuses the main site's tokens: --paper, --ink,
   --accent, --r-*, --shadow-*, --ease, Inter for display and Geist Mono for labels.
   Sections: 1 base · 2 nav extras · 3 shared bits · 4 home · 5 topic · 6 article ·
   7 search · 8 forms · 9 auth · 10 app-page bridge (attio) · 11 frappe bridge ·
   12 custom select · 13 motion */

/* ============ 1. Base ============ */
/* attio-theme.css forces InterVar with !important on these selectors; the main site
   sets Inter from Google Fonts. Same typeface family, this keeps the exact files. */
html, body, .attio, .attio button, .attio input, .attio select, .attio textarea, .attio optgroup,
body button, body input, body select, body textarea {
  font-family: var(--font-display) !important;
}
.mono, .tag, .chip, kbd, code, pre, .isd-mono { font-family: var(--font-mono) !important; }
body { background: var(--paper); color: var(--ink); }
.isd-page { min-height: 100vh; display: flex; flex-direction: column; }
.isd-page > main { flex: 1 0 auto; }
.isd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* css/style.css (notifications, user-settings) forces InterVar on every element with
   !important; outrank it with the main-site faces. */
html body.isd-legacy :is(button, input, select, textarea, optgroup, h1, h2, h3, h4, h5, h6, p, a, span, div, li, label, td, th) { font-family: var(--font-display) !important; }
html body.isd-legacy :is(.mono, .tag, code, pre, kbd, .brand span, .footer h4, .crumbs, .crumbs *, .isd-badge, .isd-nitem i, .notif-page__title span, .notif-full-item__meta, .notif-full-item__meta *, .notif-full-item__type, .notif-pagination a, .notif-pagination span, .badge, .isd-settings-head .mono) { font-family: var(--font-mono) !important; }

/* ---- 1b. Guards for pages that still load older stylesheets ----
   style.css (notifications, user-settings) pads .container 40px 60px and clips .nav a;
   frappe-hd.css (submit-ticket) is Tailwind, whose .container adds max-widths and
   5rem padding; attio-theme.css sets overflow-x:hidden on html/body, which turns body
   into a scroll container and stops the sticky header from sticking. */
html, body { overflow-x: clip; }
.nav > .container, .footer > .container, .isd-app-main > .container, .isd-hd-main > .container { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }
.nav a, .nav-sheet a, .footer a { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.nav-links > a, .nav-links .has-menu > a, .nav .btn, .footer .btn { white-space: nowrap; }
.nav .btn, .footer .btn { width: auto; max-width: none; overflow: visible; }
.nav-sheet .btn.sheet-cta { width: 100%; }
.footer .tag, .nav .tag { max-width: none; }
@media (max-width: 480px) {
  .footer .news-row .btn { width: 100%; }
  /* stacked news-row: flex:1 would collapse the input's height to nothing (same bug exists on interspacemusic.com) */
  .news-row input { flex: none; height: 44px; }
}

/* attio-theme.css sets .attio a { color: inherit } (0,1,1), which outranks the main-site
   button colours (0,1,0) on the signed-in pages: restate them. */
.attio a.btn-dark, .attio .btn-dark { color: var(--white); }
.attio a.btn-ghost, .attio a.btn-light { color: var(--ink); }
.attio .tile-dark a.link { color: var(--white); }

/* ============ 2. Nav extras ============ */
.nav .brand span { font-size: 13.5px; color: var(--ink-2); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(42, 42, 39, 0.05); }
.menu.isd-menu-topics { min-width: 760px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1180px) { .menu.isd-menu-topics { min-width: 560px; grid-template-columns: repeat(2, 1fr); } }
.isd-topics .menu { left: 0; transform: translate(-24px, 6px); }
.isd-topics:hover .menu, .isd-topics:focus-within .menu, .isd-topics.is-open .menu { transform: translate(-24px, 0); }

/* account menu: anchored to the right edge like the language menu */
.isd-user { position: relative; display: flex; align-items: center; }
.isd-user .menu { left: auto; right: 0; transform: translate(0, 6px); min-width: 240px; }
.isd-user:hover .menu, .isd-user:focus-within .menu, .isd-user.is-open .menu { transform: translate(0, 0); }
.isd-user__btn { gap: 8px; padding-left: 5px; }
.isd-user__who { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.isd-user__who b { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.isd-user__who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.isd-user__out b { color: var(--accent) !important; }
.isd-ava { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--ink); color: var(--white); font-size: 11.5px; font-weight: 500; letter-spacing: 0; }

/* notification bell */
.isd-notif { position: relative; }
.isd-iconbtn { position: relative; width: 36px; height: 36px; border-radius: var(--r-pill); display: inline-grid; place-items: center; color: var(--ink-2); background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); }
.isd-iconbtn:hover { background: var(--white); color: var(--ink); }
.isd-iconbtn:active { transform: scale(0.96); }
.isd-iconbtn svg { width: 17px; height: 17px; }
.isd-notif.is-open .isd-iconbtn { background: var(--ink); color: var(--white); box-shadow: var(--shadow-btn); }
.isd-badge { position: absolute; top: -4px; left: calc(100% - 12px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--accent); color: var(--white); font-family: var(--font-mono); font-size: 10px; font-weight: 500; box-shadow: 0 0 0 2px var(--paper); }
.isd-badge--inline { position: static; margin-left: auto; box-shadow: none; }
.isd-notif__panel { position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-width: calc(100vw - 32px); border-radius: 18px; background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-float); overflow: hidden; display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease), visibility 0s linear var(--t-std); z-index: 120; }
.isd-notif.is-open .isd-notif__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.isd-notif__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.isd-notif__readall { font-size: 13px; color: var(--ink-2); }
.isd-notif__readall:hover { color: var(--ink); }
.isd-notif__list { max-height: 380px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; }
.isd-notif__empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.isd-nitem { position: relative; display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px 10px 24px; border-radius: 12px; }
.isd-nitem:hover { background: var(--paper-2); }
.isd-nitem b { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.isd-nitem span { font-size: 13px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.isd-nitem i { font-style: normal; font-size: 10.5px; margin-top: 2px; }
.isd-nitem.is-unread::before { content: ""; position: absolute; left: 10px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.isd-notif__foot { display: block; padding: 12px 16px; text-align: center; font-size: 13.5px; font-weight: 500; color: var(--ink); border-top: 1px solid var(--line); }
.isd-notif__foot:hover { background: var(--paper-2); }
@media (max-width: 900px) { .nav-cta .isd-user, .nav-cta > .btn { display: none; } }
@media (max-width: 480px) { .isd-notif__panel { position: fixed; left: 16px; right: 16px; top: 68px; width: auto; } }
.isd-sheet-who { display: flex; align-items: center; gap: 12px; padding: 14px 4px 16px; }
.isd-sheet-who .isd-ava { width: 36px; height: 36px; font-size: 14px; }
.isd-sheet-who div { display: grid; gap: 2px; min-width: 0; }
.isd-sheet-who b { font-size: 16px; font-weight: 500; }
.isd-sheet-who span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.nav-sheet .sheet-row .isd-badge { margin-left: auto; }
@media (max-width: 900px) { .nav-sheet .btn.sheet-cta + .btn.sheet-cta { margin-top: 0; } }

/* ============ 3. Shared bits ============ */
.crumbs.mono { font-size: 11.5px; }
.crumbs span[aria-current] { color: var(--ink-2); }
.isd-search { position: relative; width: 100%; max-width: 640px; }
.isd-search__box { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 8px 0 22px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-float); transition: box-shadow var(--t-std) var(--ease); }
.isd-search__box:focus-within { box-shadow: 0 0 0 1.5px var(--ink), 0 14px 36px rgba(42, 42, 39, 0.10), 0 40px 90px rgba(42, 42, 39, 0.10); }
.isd-search__box > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.isd-search__box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16.5px; letter-spacing: -0.01em; color: var(--ink); }
.isd-search__box input::placeholder { color: var(--muted); }
.isd-search__box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.isd-search__box .btn { flex: none; }
.isd-search--sm .isd-search__box { height: 52px; box-shadow: var(--shadow-card); }
@media (max-width: 560px) { .isd-search__box { height: 54px; padding-left: 16px; } .isd-search__box .btn { padding: 0 14px; } }

/* live suggestions under the search pill */
.isd-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; padding: 8px; border-radius: 20px; background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-float); display: none; text-align: left; max-height: min(460px, 60vh); overflow-y: auto; }
.isd-suggest.active { display: grid; gap: 2px; }
.isd-suggest__item { display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px; cursor: pointer; }
.isd-suggest__item:hover, .isd-suggest__item.is-focus { background: var(--paper-2); }
.isd-suggest__item b { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.isd-suggest__item span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.isd-suggest__item .mono { font-size: 10.5px; }
.isd-suggest__item .isd-best { color: var(--live); }
.isd-suggest__empty { padding: 16px; font-size: 14px; color: var(--ink-2); }
.isd-suggest__empty a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.isd-suggest__all { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 4px; }
.isd-suggest__all:hover { color: var(--ink); background: var(--paper-2); }

.isd-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.isd-chips .mono { margin-right: 4px; }
.isd-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13.5px; color: var(--ink-2); background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease); white-space: nowrap; }
.isd-chip:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
.isd-chip.is-on { background: var(--ink); color: var(--white); box-shadow: none; }
.isd-chip small { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.6; }

.isd-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); flex: none; }
.isd-icon svg { width: 20px !important; height: 20px !important; display: block !important; }
.isd-arrow { display: inline-flex; align-items: center; gap: 6px; }
.isd-arrow svg { width: 14px; height: 14px; transition: transform var(--t-quick) var(--ease); }
a:hover .isd-arrow svg, .isd-arrow:hover svg { transform: translateX(2px); }

/* ink "mark" highlight reused for search hits */
mark, .isd-hit { background: linear-gradient(transparent 55%, rgba(222, 10, 38, 0.18) 55%); color: inherit; padding: 0 0.04em; border-radius: 2px; }

.isd-empty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(36px, 6vw, 64px) 24px; border-radius: var(--r-xl); background: linear-gradient(#f1f0eb 0%, #eae8e2 58%, #eceae4 100%); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.04); }
.isd-empty .isd-icon { background: var(--white); box-shadow: var(--shadow-card); margin-bottom: 6px; }
.isd-empty p { color: var(--ink-2); max-width: 460px; }

.isd-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.isd-pager a, .isd-pager span { min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line-2); }
.isd-pager a:hover { background: var(--white); color: var(--ink); }
.isd-pager .is-on { background: var(--ink); color: var(--white); box-shadow: var(--shadow-btn); }
.isd-pager .is-off { opacity: 0.4; }

/* job-style article rows (main site .job), with a description line */
.isd-rows { display: grid; gap: 10px; }
.isd-rows .job { grid-template-columns: 1fr auto auto; }
.isd-rows .job > div { min-width: 0; display: grid; gap: 4px; }
.isd-rows .job h3 { overflow-wrap: anywhere; }
.isd-rows .job p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.isd-rows .job .tag { white-space: nowrap; }
.isd-rows .job .isd-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.isd-rows .job .isd-top .tag { font-size: 10.5px; }
.tag.is-accent { background: var(--accent-soft); color: var(--accent); }
.tag.is-live { background: var(--live-soft); color: #23764f; }
.tag.is-wait { background: var(--wait-soft); color: #9a6a12; }
.tag.is-violet { background: var(--violet-soft); color: #5a4fd0; }
.tag.is-white { background: var(--white); box-shadow: var(--shadow-card); }

/* ============ 4. Home ============ */
.isd-hero { padding-bottom: clamp(48px, 7vw, 88px); }
.isd-hero .hero-copy { max-width: 860px; gap: 24px; }
.isd-hero .h1 { font-size: clamp(42px, 6.4vw, 76px); }
.isd-hero .lead { max-width: 640px; }
.isd-hero .isd-search { margin-top: 6px; }
.isd-hero .hero-meta { margin-top: 2px; }
.isd-hero .isd-chips { margin-top: -2px; max-width: none; }

.isd-topics-wrap { scroll-margin-top: 80px; }
.isd-stage { position: relative; border-radius: var(--r-xl); background: linear-gradient(#f1f0eb 0%, #eae8e2 58%, #eceae4 100%); padding: clamp(14px, 3vw, 32px); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.04); overflow: hidden; }
.isd-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 18% 0%, rgba(116, 102, 232, 0.10), transparent 70%), radial-gradient(50% 50% at 88% 100%, rgba(222, 10, 38, 0.08), transparent 70%); }
.isd-stage > * { position: relative; }
.isd-stage__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.isd-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .isd-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .isd-topic-grid { grid-template-columns: 1fr; } }
.isd-topic { gap: 12px; padding: 22px; border-radius: var(--r-lg); }
.isd-topic .body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.isd-topic__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.isd-topic__foot .mono { font-size: 11px; }
.isd-topic__foot svg { width: 16px; height: 16px; color: var(--muted); transition: transform var(--t-std) var(--ease), color var(--t-std) var(--ease); }
.isd-topic:hover .isd-topic__foot svg { transform: translateX(3px); color: var(--ink); }
.isd-topic:hover .isd-icon { background: var(--ink); color: var(--white); }
.isd-topic .isd-icon { transition: background-color var(--t-std) var(--ease), color var(--t-std) var(--ease); }

.isd-most { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 48px); counter-reset: most; }
@media (max-width: 860px) { .isd-most { grid-template-columns: 1fr; } }
.isd-most .job { grid-template-columns: auto 1fr auto; align-items: start; gap: 18px; padding: 20px 22px; }
.isd-most__n { font-size: 12px; color: var(--muted-2); padding-top: 3px; }
.isd-most .job h3 { font-size: 17px; line-height: 1.3; }
.isd-most .job .chev { margin-top: 3px; }

.isd-cta { padding-block: clamp(72px, 10vw, 128px); }
.isd-cta .cta-actions { margin-top: 6px; }
.isd-cta .hero-meta { margin-top: 4px; }
.isd-cta .hero-meta a { border-bottom: 1px solid var(--line-2); padding: 0; background: none; box-shadow: none; border-radius: 0; }
.isd-cta .hero-meta a:hover { color: var(--ink); border-color: var(--ink); }

/* ============ 5. Topic (category) ============ */
.isd-head .hero-copy { gap: 18px; }
.isd-head .h1 { font-size: clamp(34px, 5vw, 56px); }
.isd-cat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; padding-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 900px) { .isd-cat-layout { grid-template-columns: 1fr; } .isd-cat-layout .toc { display: none; } }
.toc a .isd-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); margin-left: 6px; }
.toc a { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.toc .isd-toc-tile { margin-top: 18px; box-shadow: none; }
.toc .tile a.btn { display: inline-flex; justify-content: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); font-size: 13.5px; color: var(--ink); background: var(--white); line-height: 1; }
.toc .tile a.btn:hover { color: var(--ink); background: var(--paper-2); }

/* ============ 6. Article ============ */
.isd-article-hero { padding-bottom: clamp(20px, 3vw, 32px); }
.isd-article-hero .h1 { font-size: clamp(32px, 4.6vw, 52px); }
.isd-article .legal { padding-top: clamp(12px, 2vw, 24px); padding-bottom: clamp(48px, 7vw, 96px); }
.isd-article .prose { max-width: 760px; overflow-wrap: break-word; }
.isd-article .prose > :first-child { margin-top: 0; }
.isd-article .prose h2, .isd-article .prose h3 { scroll-margin-top: 88px; }
.isd-article .prose h2:first-child { border-top: 0; padding-top: 0; }
.isd-article .prose img { max-width: 100%; height: auto; }
.isd-article .prose iframe, .isd-article .prose video { max-width: 100%; border-radius: var(--r-md); }
.isd-article .prose pre { font-family: var(--font-mono); font-size: 13px; background: var(--paper-2); padding: 14px 16px; border-radius: 12px; overflow-x: auto; }
.isd-article .prose pre code { background: none; padding: 0; word-break: normal; }
.isd-article .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.isd-article .prose strong, .isd-article .prose b { color: var(--ink); font-weight: 500; }
.isd-article .prose ol li::marker, .isd-article .prose ul li::marker { color: var(--muted); }
.isd-article .prose table { border: 0; }
.isd-article .prose blockquote p { margin: 0; }
/* old-editor wrappers and inline colours: let the prose system win */
.isd-article .prose [style*="font-family"] { font-family: inherit !important; }
.isd-article .prose span[style*="color"] { color: inherit !important; }
.isd-article .toc { gap: 2px; }
.isd-article .toc a { display: block; }
.isd-article .toc a.is-h3 { padding-left: 22px; font-size: 13px; }
@media (max-width: 900px) {
  .isd-article .toc { display: none; }
  .isd-article .toc.isd-toc--mobile { display: grid; }
}
.isd-toc-m { display: none; }
@media (max-width: 900px) {
  .isd-toc-m { display: block; margin-bottom: 22px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-card); }
  .isd-toc-m summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
  .isd-toc-m summary::-webkit-details-marker { display: none; }
  .isd-toc-m summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform var(--t-std) var(--ease); }
  .isd-toc-m[open] summary svg { transform: rotate(180deg); }
  .isd-toc-m nav { display: grid; gap: 2px; padding: 0 10px 12px; }
  .isd-toc-m nav a { font-size: 14px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; }
  .isd-toc-m nav a.is-h3 { padding-left: 24px; font-size: 13.5px; }
  .isd-toc-m nav a:hover { background: var(--paper-2); color: var(--ink); }
}

.isd-feedback { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center; padding: 24px 26px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-card); }
@media (max-width: 640px) { .isd-feedback { grid-template-columns: 1fr; } }
.isd-feedback h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.012em; }
.isd-feedback p { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.isd-feedback__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.isd-feedback__btns .btn svg { width: 16px; height: 16px; }
.isd-feedback__btns .btn.voted { background: var(--ink); color: var(--white); box-shadow: var(--shadow-btn); }
.isd-feedback__btns .btn.voted.not-helpful { background: var(--accent); }
.isd-feedback__count { grid-column: 1 / -1; font-size: 11px; padding-top: 14px; border-top: 1px solid var(--line); }
.isd-feedback__thanks { display: none; grid-column: 1 / -1; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); }
.isd-feedback__thanks.show { display: flex; }
.isd-feedback__thanks .isd-icon { background: var(--live-soft); color: #23764f; width: 36px; height: 36px; }
.isd-related { margin-top: clamp(40px, 6vw, 56px); display: grid; gap: 16px; }
.isd-related .isd-rows .job { padding: 16px 20px; }
.isd-related .isd-rows .job h3 { font-size: 16px; }
.isd-help-tile { margin-top: clamp(28px, 4vw, 40px); display: flex; justify-content: space-between; align-items: center; gap: 18px 24px; flex-wrap: wrap; padding: 26px 28px; }
.isd-help-tile h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--white); }
.isd-help-tile p.body { margin-top: 6px; max-width: 460px; }
.isd-help-tile .btn-light { box-shadow: none; }

/* ============ 7. Search ============ */
.isd-search-hero .hero-copy { gap: 20px; }
.isd-search-hero .h1 { font-size: clamp(36px, 5.2vw, 60px); }
.isd-search-hero .isd-search { margin-top: 4px; }
.isd-results { max-width: 900px; margin: 0 auto; padding-bottom: clamp(48px, 7vw, 96px); }
.isd-results__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.isd-results__meta p { font-size: 15px; color: var(--ink-2); }
.isd-results__meta b { color: var(--ink); font-weight: 500; }
.isd-results .isd-chips { justify-content: flex-start; margin-bottom: 26px; }
.isd-results h2.h4 { margin: clamp(36px, 5vw, 48px) 0 16px; }
.isd-suggest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .isd-suggest-grid { grid-template-columns: 1fr; } }

/* ============ 8. Forms ============ */
.isd-form-hero .h1 { font-size: clamp(36px, 5.2vw, 60px); }
.isd-form-wrap { padding-bottom: clamp(56px, 8vw, 112px); }
.form-card .form fieldset + fieldset > legend { width: 100%; padding-top: 24px; border-top: 1px solid var(--line); }
.field .req { color: var(--accent); margin-left: 2px; }
.field .hint, .form .hint { font-size: 13px; color: var(--muted); line-height: 1.45; }
.field input[type="file"] { height: auto; padding: 10px; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--paper-2); color: var(--muted); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.isd-alert { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.5; margin-bottom: 22px; }
.isd-alert .isd-icon { width: 34px; height: 34px; border-radius: 10px; }
.isd-alert .isd-icon svg { width: 18px !important; height: 18px !important; }
.isd-alert b { display: block; font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; margin-bottom: 2px; }
.isd-alert ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 3px; margin-top: 4px; }
.isd-alert--ok { background: var(--live-soft); color: #1d5f40; }
.isd-alert--ok .isd-icon { background: rgba(255, 255, 255, 0.7); color: #23764f; }
.isd-alert--err { background: var(--accent-soft); color: #9b0a1e; }
.isd-alert--err .isd-icon { background: rgba(255, 255, 255, 0.7); color: var(--accent); }
.isd-alert--info { background: var(--white); color: var(--ink-2); box-shadow: var(--shadow-card); }
.isd-alert .isd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.isd-who { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: var(--paper-2); }
.isd-who .isd-ava { width: 40px; height: 40px; font-size: 15px; }
.isd-who b { display: block; font-weight: 500; }
.isd-who span { font-size: 13.5px; color: var(--muted); }
.isd-who .tag { margin-left: auto; }
.isd-toggle { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--paper-2); cursor: pointer; font-size: 14.5px; color: var(--ink); }
.isd-toggle input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; flex: none; }
.isd-reveal { display: grid; gap: 14px; padding-top: 4px; }
.isd-drop { position: relative; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 20px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; transition: background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease); }
.isd-drop:hover, .isd-drop.dragover { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.isd-drop .isd-icon { background: var(--white); box-shadow: var(--shadow-card); margin-bottom: 4px; }
.isd-drop b { font-size: 15px; font-weight: 500; }
.isd-drop .mono { font-size: 10.5px; }
.isd-files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.isd-file { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-card); font-size: 13px; color: var(--ink); max-width: 100%; }
.isd-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.isd-file button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); font-size: 15px; line-height: 1; }
.isd-file button:hover { background: var(--ink); color: var(--white); }
.isd-kb { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--violet-soft); margin-top: 4px; }
.isd-kb > .mono { color: #5a4fd0; }
.isd-kb a { display: grid; gap: 2px; padding: 11px 14px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-card); }
.isd-kb a b { font-size: 14px; font-weight: 500; color: var(--ink); }
.isd-kb a span { font-size: 12.5px; color: var(--muted); }
.isd-kb a:hover { transform: translateY(-1px); }
.isd-kb button { justify-self: start; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); margin-top: 4px; }
.isd-kb button:hover { color: var(--ink); }
.aside .tile .isd-list { display: grid; gap: 8px; margin-top: 2px; }
.aside .tile .isd-list a { font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line-2); justify-self: start; }
.aside .tile .isd-list a:hover { border-color: var(--ink); }
.tile-dark a.link { color: var(--white) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important; }

/* ============ 9. Auth ============ */
.isd-auth { padding-block: clamp(40px, 7vw, 88px) clamp(56px, 8vw, 112px); }
.isd-auth__grid { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .isd-auth__grid { grid-template-columns: 1fr; } .isd-auth__copy .isd-ticks { display: none; } }
.isd-auth__copy { display: grid; gap: 20px; justify-items: start; }
.isd-auth__copy .h1 { font-size: clamp(40px, 5.6vw, 64px); }
.isd-auth__copy .lead { max-width: 520px; }
.isd-ticks { display: grid; gap: 12px; margin-top: 6px; }
.isd-ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.isd-ticks li svg { width: 18px; height: 18px; color: var(--live); flex: none; margin-top: 2px; }
.isd-ticks li b { color: var(--ink); font-weight: 500; }
.isd-auth .form-card { display: grid; gap: 20px; }
.isd-auth .form-card > h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.isd-auth .form-card > p { font-size: 14.5px; color: var(--ink-2); margin-top: -12px; }
.isd-auth .btn-lg { width: 100%; }
.isd-or { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.isd-or::before, .isd-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.isd-auth__alt { font-size: 14px; color: var(--ink-2); text-align: center; }
.isd-auth__alt a, .isd-link { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.isd-auth__alt a:hover, .isd-link:hover { border-color: var(--ink); }
.isd-auth__legal { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; }
.isd-auth__legal a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.isd-sent { display: grid; gap: 14px; justify-items: center; text-align: center; }
.isd-sent .isd-icon { width: 56px; height: 56px; border-radius: 18px; }
.isd-sent .isd-icon svg { width: 24px !important; height: 24px !important; }
.isd-sent b { color: var(--ink); font-weight: 500; }
.isd-passkey-msg { padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); color: #9b0a1e; font-size: 13.5px; }
.isd-strength { height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.isd-strength i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform var(--t-std) var(--ease), background-color var(--t-std) var(--ease); }

/* ============ 10. App pages (dashboard, my-tickets, ticket-detail) ============
   attio-theme.css supplies the .at-* components; these rules restate them in the
   main-site language. Tokens first, so inline styles that read var(--at-*) follow. */
body.attio {
  --at-purple: var(--ink); --at-purple-600: #000; --at-purple-50: var(--paper-2);
  --at-hero-from: #2a2a27; --at-hero-to: #1c1c1a;
  --at-bg: var(--paper); --at-surface: var(--white);
  --at-ink: var(--ink); --at-ink-2: var(--ink-2); --at-ink-3: var(--ink-2); --at-ink-4: var(--muted); --at-ink-5: var(--muted-2);
  --at-border: var(--line); --at-border-2: var(--line-2);
  --at-radius: var(--r-lg); --at-radius-sm: 12px;
  --at-shadow: var(--shadow-card); --at-shadow-h: 0 0 0 1px rgba(42, 42, 39, 0.06), 0 12px 30px rgba(42, 42, 39, 0.10);
  background: var(--paper); color: var(--ink);
}
.isd-app-main { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.isd-app-container.is-full { max-width: 1080px; }
.isd-app-crumbs { margin-bottom: 20px; }
.attio .at-page-head { margin-bottom: 28px; align-items: flex-end; }
.attio .at-h1 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.06; color: var(--ink); }
.attio .at-sub { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.attio .at-back { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.attio .at-back:hover { color: var(--ink); }
.attio .at-back svg { width: 14px; height: 14px; }

.attio .at-btn { height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.008em; gap: 8px; transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease); }
.attio .at-btn:active { transform: scale(0.96); }
.attio .at-btn--primary { background: var(--ink) !important; color: var(--white) !important; box-shadow: var(--shadow-btn); }
.attio .at-btn--primary:hover { background: #000 !important; transform: translateY(-1px); }
.attio .at-btn--ghost { background: rgba(255, 255, 255, 0.7); color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.attio .at-btn--ghost:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }

.attio .at-stats { gap: 12px; margin-bottom: 20px; }
.attio .at-stat { background: var(--white); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 20px 22px; }
.attio .at-stat__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.attio .at-stat__val { font-size: clamp(32px, 3.4vw, 42px); font-weight: 500; letter-spacing: -0.035em; color: var(--ink); }
.attio .at-stat__ic { width: 36px; height: 36px; border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.attio .at-stat__ic--red { background: var(--accent-soft); color: var(--accent); }
.attio .at-stat__ic--blue { background: var(--violet-soft); color: #5a4fd0; }
.attio .at-stat__ic--green { background: var(--live-soft); color: #23764f; }
.attio .at-stat__ic--amber { background: var(--wait-soft); color: #9a6a12; }
.attio .at-stat__chg { font-size: 12.5px; color: var(--muted); }

.attio .at-panel { background: var(--white); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 22px 24px; margin-bottom: 14px; }
.attio .at-panel__title { font-size: 17px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.attio .at-panel__link { font-size: 13.5px; font-weight: 400; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.attio .at-panel__link:hover { color: var(--ink); border-color: var(--ink); }
.attio .at-two { gap: 16px; grid-template-columns: minmax(0, 1fr) 320px; }

.attio .at-tlist { background: var(--white); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.attio .at-thead { background: transparent; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; font-weight: 400; color: var(--muted); padding: 14px 22px; }
.attio .at-trow { padding: 16px 22px; border-bottom: 1px solid var(--line); transition: background-color var(--t-quick) var(--ease); }
.attio .at-trow:hover { background: #fcfcfa; }
.attio .at-trow__subj { font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.attio .at-trow__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--muted); margin-top: 4px; }
.attio .at-trow__r { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.attio .at-tcell { font-size: 14px; color: var(--ink-2); }
.attio .at-row { border-radius: 14px; padding: 12px 14px; }
.attio .at-row:hover { background: var(--paper-2); }

.attio .at-dot { width: 7px; height: 7px; }
.attio .at-dot--open { background: var(--accent); }
.attio .at-dot--in_progress { background: var(--violet); }
.attio .at-dot--waiting_response { background: var(--wait); }
.attio .at-dot--resolved { background: var(--live); }
.attio .at-dot--closed { background: var(--muted-2); }
.attio .at-pill { height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; }
.attio .at-pri--urgent, .attio .at-st--open { background: var(--accent-soft); color: var(--accent); }
.attio .at-pri--high, .attio .at-st--waiting_response { background: var(--wait-soft); color: #9a6a12; }
.attio .at-pri--medium, .attio .at-st--in_progress { background: var(--violet-soft); color: #5a4fd0; }
.attio .at-pri--low, .attio .at-st--closed { background: rgba(42, 42, 39, 0.06); color: var(--muted); }
.attio .at-st--resolved { background: var(--live-soft); color: #23764f; }
.attio .at-badge-unread { background: var(--accent); color: var(--white); font-family: var(--font-mono); font-weight: 500; min-width: 18px; height: 18px; vertical-align: 2px; }

.attio .at-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: rgba(42, 42, 39, 0.05); margin-bottom: 0; }
.attio .at-tab { height: 34px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.attio .at-tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.attio .at-tab.active { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-card); }
.attio .at-tab__n { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }

.attio .at-input, .attio .at-textarea, .attio .at-select { border: 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 14px; height: 42px; font-size: 14.5px; color: var(--ink); }
.attio .at-textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.55; }
.attio .at-input:focus, .attio .at-textarea:focus, .attio .at-select:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.attio .at-label { font-size: 13.5px; font-weight: 500; color: var(--ink); }

.attio .at-msg { background: var(--white); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); margin-bottom: 12px; }
.attio .at-msg--me { background: #f6f5f0; box-shadow: inset 0 0 0 1px var(--line); }
.attio .at-msg__head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.attio .at-ava { width: 30px; height: 30px; background: var(--paper-2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; }
.attio .at-ava--staff { background: var(--ink); color: var(--white); }
.attio .at-msg__name { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.attio .at-msg__time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.attio .at-msg__body { padding: 16px 20px 18px; font-size: 15px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }

.attio .at-quick { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; margin-bottom: 8px; transition: background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); }
.attio .at-quick:hover { background: var(--white); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.attio .at-quick__ic { width: 38px; height: 38px; border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.attio .at-empty { color: var(--muted); font-size: 15px; padding: 56px 20px; }
.isd-note { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 14.5px; }
.isd-note svg { width: 16px; height: 16px; flex: none; }
.isd-note--ok { background: var(--live-soft); color: #1d5f40; }
.isd-note--err { background: var(--accent-soft); color: #9b0a1e; display: grid; gap: 4px; }
.isd-ticket-head { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.isd-note--wait { background: var(--wait-soft); color: #7a5410; }
/* customer ticket progress: Received -> with the team / waiting on you -> resolved */
.isd-steps { list-style: none; margin: 0 0 24px; padding: 20px 24px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.isd-steps li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 22px 12px 0 0; min-width: 0; }
.isd-steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--muted-2); z-index: 1; }
.isd-steps li::after { content: ""; position: absolute; left: 12px; right: 0; top: 5px; height: 2px; background: var(--line-2); }
.isd-steps li:last-child::after { display: none; }
.isd-steps li.is-done::before { background: var(--ink); box-shadow: none; }
.isd-steps li.is-done::after { background: var(--ink); }
.isd-steps li.is-current::before { background: var(--ink); box-shadow: 0 0 0 4px rgba(42, 42, 39, 0.1); }
.isd-steps--wait li.is-current::before { background: var(--wait); box-shadow: 0 0 0 4px var(--wait-soft); }
.isd-steps--done li.is-current::before { background: var(--live); box-shadow: 0 0 0 4px var(--live-soft); }
.isd-steps__label { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; }
.isd-steps li:not(.is-done):not(.is-current) .isd-steps__label { color: var(--muted); }
.isd-steps__sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.isd-steps--wait li.is-current .isd-steps__label { color: #8a5f10; }
@media (prefers-reduced-motion: no-preference) {
  .isd-steps li.is-current:not(.is-done)::before { animation: isd-step-pulse 2.4s var(--ease) infinite; }
  @keyframes isd-step-pulse { 50% { box-shadow: 0 0 0 7px rgba(42, 42, 39, 0.04); } }
  .isd-steps--wait li.is-current::before { animation-name: isd-step-pulse-wait; }
  @keyframes isd-step-pulse-wait { 50% { box-shadow: 0 0 0 7px rgba(214, 154, 42, 0.08); } }
}
@media (max-width: 560px) { .isd-steps { padding: 18px 16px 16px; } .isd-steps__label { font-size: 14px; } }
.isd-ticket-head .at-h1 { font-size: clamp(26px, 3.2vw, 36px); }
.isd-ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.isd-ticket-meta .mono { font-size: 11.5px; color: var(--ink); }
.isd-kv { display: grid; gap: 12px; font-size: 14px; }
.isd-kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.isd-kv > div > span:first-child { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.isd-att { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.isd-att:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 14px rgba(42, 42, 39, 0.06); color: var(--ink); }
@media (max-width: 880px) { .attio .at-two { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .attio .at-thead { display: none; } .attio .at-trow { padding: 14px 16px; } }

/* ============ 11. Submit-ticket (Frappe/Tailwind shell) and settings pages ============ */
.isd-hd-main { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 8vw, 96px); }
.isd-hd-main > .container { max-width: 1080px; }
.isd-hd .form-card form > .form-section:first-of-type { border-top: 0; padding-top: 0; }

/* Legacy pages that still load css/style.css (notifications, user-settings): remap its
   variables and restate its generic components in the main-site language. */
body.isd-legacy { --bg: var(--paper); --card-bg: var(--white); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--muted); --border: var(--line-2); --radius: var(--r-lg); --shadow: var(--shadow-card); background: var(--paper); color: var(--ink); }
body.isd-legacy > .container { width: min(920px, 100% - var(--gutter) * 2); max-width: none; margin-inline: auto; padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 8vw, 96px) !important; }
.isd-settings-head { display: grid; gap: 14px; margin-bottom: 28px; }
.isd-settings-head .h1 { font-size: clamp(34px, 4.6vw, 56px); }
.isd-legacy .settings-content { gap: 14px; }
.isd-legacy .settings-section { background: var(--white); border: 0; border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-card); }
.isd-legacy .settings-section__header { margin-bottom: 18px; }
.isd-legacy .settings-section__title { font-size: 22px !important; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.isd-legacy .settings-section__desc { font-size: 14.5px !important; color: var(--ink-2); margin-top: 4px; }
.isd-legacy .setting-item { border-bottom: 1px solid var(--line); padding: 18px 0; gap: 16px; }
.isd-legacy .setting-item__title { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.isd-legacy .setting-item__desc { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.isd-legacy .toggle-slider { background: rgba(42, 42, 39, 0.14); }
.isd-legacy .toggle-slider::before { box-shadow: 0 1px 2px rgba(42, 42, 39, 0.2); }
.isd-legacy .toggle-switch input:checked + .toggle-slider { background: var(--ink); }
.isd-legacy .profile-photo__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-card); }
.isd-legacy .form-label { font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.isd-legacy .form-label--required::after { color: var(--accent); }
.isd-legacy .form-input, .isd-legacy .form-select, .isd-legacy .form-textarea { height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--ink); }
.isd-legacy .form-textarea { height: auto; padding: 12px 14px; }
.isd-legacy .form-input:focus, .isd-legacy .form-select:focus, .isd-legacy .form-textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ink); border: 0; }
.isd-legacy .form-input:disabled { background: var(--paper-2); color: var(--muted); }
.isd-legacy .form-help { font-size: 13px; color: var(--muted); }
.isd-legacy .form-actions { border-top: 1px solid var(--line); }
.isd-legacy .btn { height: 44px; padding: 0 20px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 500; overflow: visible; }
.isd-legacy .btn--sm { height: 36px; padding: 0 16px; font-size: 13.5px; }
.isd-legacy .btn--primary { background: var(--ink); color: var(--white); border: 0; box-shadow: var(--shadow-btn); }
.isd-legacy .btn--primary:hover { background: #000; color: var(--white); box-shadow: 0 18px 34px rgba(42, 42, 39, 0.20), 0 2px 6px rgba(42, 42, 39, 0.10); }
.isd-legacy .btn--secondary { background: rgba(255, 255, 255, 0.7); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.isd-legacy .btn--secondary:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.2); }
.isd-legacy .btn--danger { background: var(--accent); color: var(--white); border: 0; }
.isd-legacy .btn--danger:hover { background: #b5081f; box-shadow: 0 10px 24px rgba(222, 10, 38, 0.22); }
.isd-legacy .danger-zone { background: linear-gradient(#ffffff 0%, #fdf4f4 100%); border: 0; box-shadow: inset 0 0 0 1px rgba(222, 10, 38, 0.14); }
.isd-legacy .danger-zone .settings-section__title { color: var(--accent); }
.isd-legacy .badge { border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; }
.isd-legacy .badge--success { background: var(--live-soft); color: #23764f; }
.isd-legacy .badge--warning { background: var(--wait-soft); color: #9a6a12; }
.isd-legacy .alert { border: 0 !important; border-radius: var(--r-md); }
.isd-legacy .alert--success { background: var(--live-soft) !important; color: #1d5f40 !important; }
.isd-legacy .alert--error { background: var(--accent-soft) !important; color: #9b0a1e !important; }
.isd-legacy .modal { background: rgba(42, 42, 39, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.isd-legacy .modal-content { border-radius: var(--r-xl); box-shadow: var(--shadow-float); }
.isd-legacy .modal-header h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }

/* Roy chat widget (includes/ai-chat-widget.php, signed-in customers only): remap its
   --ic-* tokens to the main-site palette. body #aicw outranks the widget's own #aicw. */
body #aicw {
  --ic-backdrop: var(--paper); --ic-surface: var(--white); --ic-surface-subtle: #fcfcfa;
  --ic-neutral: var(--paper-2); --ic-neutral-emph: #ebe9e2;
  --ic-text: var(--ink); --ic-text-muted: var(--ink-2); --ic-text-subtle: var(--muted); --ic-link: var(--ink);
  --ic-success: #23764f; --ic-border: var(--line); --ic-border-emph: var(--line-2);
  --ic-accent: var(--ink); --ic-accent-hover: #000; --ic-accent-soft: var(--paper-2); --ic-on-accent: var(--white);
  --ic-out: var(--ink); --ic-red: var(--accent); --ic-chrome: var(--ink);
  --ic-r-sm: 10px; --ic-r-md: 16px; --ic-r-lg: 24px;
  --ic-shadow-2: var(--shadow-btn); --ic-shadow-3: 0 18px 34px rgba(42, 42, 39, 0.20), 0 2px 6px rgba(42, 42, 39, 0.10);
  font-family: var(--font-display);
}
body #aicwHeader { background: var(--ink); }
body #aicwPanel { box-shadow: var(--shadow-float); }
body #aicw .aicw-hd-name { font-weight: 500; }
body #aicw .aicw-hd-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ============ 12. Custom select (js/custom-select.js) in main-site form language ============ */
/* structure (mirrors attio-theme.css, which the main-site pages do not load) */
.ispc { position: relative; vertical-align: middle; }
.ispc > select { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border: 0 !important; pointer-events: none !important; background: none !important; -webkit-appearance: none !important; appearance: none !important; }
.ispc-trigger { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.ispc-trigger:disabled { opacity: 0.6; cursor: not-allowed; }
.ispc-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ispc-chevron { flex: none; transition: transform var(--t-std) var(--ease); }
.ispc--open .ispc-chevron { transform: rotate(180deg); }
.ispc-menu { position: fixed; z-index: 100000; max-height: 260px; overflow-y: auto; }
.ispc-option { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--t-quick) var(--ease); }
.ispc-option--disabled { cursor: not-allowed; }
.ispc-menu::-webkit-scrollbar { width: 9px; }
.ispc-menu::-webkit-scrollbar-thumb { border-radius: 999px; border: 2px solid #fff; }
.ispc-trigger { min-height: 46px !important; padding: 0 14px !important; border: 0 !important; border-radius: 12px !important; background: var(--white) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; font-size: 15px !important; }
.ispc-trigger:hover { box-shadow: inset 0 0 0 1px rgba(42, 42, 39, 0.24) !important; }
.ispc--open .ispc-trigger, .ispc-trigger:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
.ispc-label--placeholder { color: var(--muted) !important; }
.ispc-chevron { color: var(--muted) !important; }
.ispc-menu { padding: 6px !important; border: 0 !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: var(--shadow-float) !important; }
.ispc-option { padding: 10px 12px !important; border-radius: 10px !important; font-size: 14.5px !important; color: var(--ink-2) !important; }
.ispc-option:hover { background: var(--paper-2) !important; color: var(--ink) !important; }
.ispc-option--selected { background: var(--paper-2) !important; color: var(--ink) !important; font-weight: 500 !important; }
.ispc-option--disabled { color: var(--muted-2) !important; }
.ispc-menu::-webkit-scrollbar-thumb { background: var(--panel-b) !important; }
.isd-compact .ispc-trigger, .ispc.isd-compact .ispc-trigger { min-height: 40px !important; border-radius: var(--r-pill) !important; }

/* ============ 13. Motion (same entrance language as the main site) ============ */
@keyframes isd-rise { from { opacity: 0; transform: translateY(var(--rise, 18px)); } to { opacity: 1; transform: none; } }
html.js:not(.no-motion) .isd-anim > * { animation: isd-rise 0.6s var(--ease-out) both; }
html.js:not(.no-motion) .isd-anim > :nth-child(2) { animation-delay: 0.06s; }
html.js:not(.no-motion) .isd-anim > :nth-child(3) { animation-delay: 0.12s; }
html.js:not(.no-motion) .isd-anim > :nth-child(4) { animation-delay: 0.18s; }
html.js:not(.no-motion) .isd-anim > :nth-child(5) { animation-delay: 0.24s; }
html.js:not(.no-motion) .isd-anim > :nth-child(n+6) { animation-delay: 0.3s; }
/* scroll reveals come from isd-site.css; cap the stagger so long grids land quickly */
html.js:not(.no-motion) [data-reveal-group] > [data-reveal-child] { transition-delay: calc(min(var(--i, 0), 8) * 45ms); }
@media (prefers-reduced-motion: reduce) { .isd-anim > * { animation: none !important; } }

/* customer dashboard: activity feed rows */
.attio a.isd-act, .isd-act { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 10px; margin: 0 -10px; border-radius: 12px; background: linear-gradient(var(--line), var(--line)) top / calc(100% - 20px) 1px no-repeat; color: var(--ink-2); text-decoration: none; transition: background-color var(--t-quick) var(--ease); }
.isd-act:hover { background: var(--paper); }
.isd-act__ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); }
.isd-act--reply .isd-act__ic { background: var(--violet-soft); color: #5a4fd0; }
.isd-act--done .isd-act__ic { background: var(--live-soft); color: #23764f; }
.isd-act--wait .isd-act__ic { background: var(--wait-soft); color: #9a6a12; }
.isd-act__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.isd-act__line { font-size: 14px; color: var(--ink-2); }
.isd-act__line strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.isd-act__subj { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isd-act__time { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }