/* ==========================================================================
   SINGLE SYMBOL PAGE ONLY — v0.4
   Loaded only on singular sym_symbol pages where page_mode=single_symbol.

   Responsive checkpoints tested:
   - 360px / 390px phones
   - 768px tablet
   - 1024px small desktop
   - 1440px desktop

   Keep all rules scoped to .sym-single or .symbols-single-page so this file
   can be conditionally loaded without affecting the homepage or blog.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE SHELL, TYPE, AND SHARED CONTENT SPACING
   -------------------------------------------------------------------------- */
.symbols-single-page .site-content {
    padding: 0;
}

.sym-single {
    overflow: clip;
    color: #111827;
    background: #fff;
}

.sym-single h1,
.sym-single h2,
.sym-single h3,
.sym-single p,
.sym-single ul,
.sym-single ol,
.sym-single dl {
    margin-top: 0;
}

.sym-single h1 {
    max-width: 800px;
    margin-bottom: 18px;
    font-size: clamp(2.25rem, 6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.sym-single h2 {
    margin-bottom: 14px;
    font-size: clamp(1.55rem, 4vw, 2.18rem);
    line-height: 1.15;
    letter-spacing: -0.038em;
}

.sym-single h3 {
    margin-bottom: 0;
    font-size: 1.02rem;
    line-height: 1.35;
}

.sym-page-kicker,
.sym-section-label {
    width: fit-content;
    margin-bottom: 11px;
    color: var(--sym-color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sym-page-kicker {
    padding: 7px 11px;
    background: rgba(49, 94, 232, 0.09);
    border: 1px solid rgba(49, 94, 232, 0.18);
    border-radius: 999px;
}

.sym-section-intro,
.sym-prose {
    color: #526176;
    font-size: 1rem;
    line-height: 1.78;
}

.sym-prose p {
    margin-bottom: 16px;
}

.sym-prose p:last-child,
.sym-section-intro:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. HERO — HIGH-VALUE SUMMARY + COPY WORKSPACE
   -------------------------------------------------------------------------- */
.sym-single__hero {
    position: relative;
    isolation: isolate;
    padding: 22px 0 38px;
    background: #ffffff;
}


.sym-single__hero-surface {
    position: relative;
    padding: clamp(22px, 4vw, 44px);
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 14%, rgba(124, 58, 237, 0.17), transparent 30%),
        radial-gradient(circle at 10% 88%, rgba(49, 94, 232, 0.15), transparent 33%),
        linear-gradient(145deg, #ffffff 0%, #f7f9ff 55%, #f5f0ff 100%);
    border: 1px solid #dce4f2;
    border-radius: clamp(24px, 4vw, 38px);
    box-shadow: 0 22px 55px rgba(39, 61, 123, 0.09);
}

.sym-single__hero-surface::after {
    position: absolute;
    inset: auto 7% 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, #315ee8 36%, #7c3aed 64%, transparent);
    opacity: 0.3;
}

.sym-single__hero-mark {
    position: absolute;
    z-index: -1;
    color: #315ee8;
    font-family: var(--sym-font-symbol);
    font-size: 8rem;
    line-height: 1;
    pointer-events: none;
    opacity: 0.035;
}

.sym-single__hero-mark--one {
    top: 120px;
    left: 2%;
    transform: rotate(-12deg);
}

.sym-single__hero-mark--two {
    right: 3%;
    bottom: 30px;
    color: #7c3aed;
    transform: rotate(13deg);
}

.sym-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-bottom: 34px;
    color: #748197;
    font-size: 0.82rem;
}

.sym-breadcrumbs a {
    color: #53627a;
    font-weight: 650;
    text-decoration: none;
}

.sym-breadcrumbs a:hover {
    color: var(--sym-color-primary);
}

.sym-single__hero-grid {
    display: grid;
    gap: 34px;
    align-items: center;
}

.sym-single__hero-copy {
    min-width: 0;
}

.sym-single__intro {
    max-width: 760px;
    color: #526176;
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.72;
}

.sym-single__intro p:last-child {
    margin-bottom: 0;
}

.sym-hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    max-width: 720px;
    margin: 25px 0 0;
}

.sym-hero-facts > div {
    min-width: 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(185, 199, 225, 0.86);
    border-radius: 11px;
    box-shadow: 0 5px 16px rgba(30, 58, 138, 0.035);
    backdrop-filter: blur(8px);
}

.sym-hero-facts dt {
    margin-bottom: 3px;
    color: #77849a;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.sym-hero-facts dd {
    margin: 0;
    overflow: hidden;
    color: #23324c;
    font-family: var(--sym-font-symbol);
    font-size: 0.88rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-single__quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.sym-single__quick-links a {
    padding: 7px 11px;
    color: #3151bf;
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid #cbd8ee;
    border-radius: 999px;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.sym-single__quick-links a:hover {
    color: #2448c8;
    background: #fff;
    border-color: #8fa9e7;
    transform: translateY(-1px);
}

/* Main copy panel in hero. */
.sym-copy-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 28px 24px 25px;
    overflow: hidden;
    text-align: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #c7d4ec;
    border-radius: 26px;
    box-shadow: 0 26px 55px rgba(44, 63, 121, 0.14);
    backdrop-filter: blur(14px);
}

.sym-copy-panel::before,
.sym-copy-panel::after {
    position: absolute;
    content: "";
    border-radius: 999px;
    pointer-events: none;
}

.sym-copy-panel::before {
    top: -70px;
    right: -42px;
    width: 180px;
    height: 180px;
    background: rgba(124, 58, 237, 0.12);
}

.sym-copy-panel::after {
    bottom: -65px;
    left: -48px;
    width: 150px;
    height: 150px;
    background: rgba(49, 94, 232, 0.11);
}

.sym-copy-panel__eyebrow {
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
    color: #6d55c8;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sym-copy-panel__visual {
    position: relative;
    z-index: 1;
    display: grid;
    width: 160px;
    aspect-ratio: 1;
    place-items: center;
    margin-bottom: 17px;
}

.sym-copy-panel__ring {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, #edf2ff 0 47%, transparent 48%),
        conic-gradient(from 120deg, #315ee8, #7c3aed, #315ee8);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(49, 94, 232, 0.15), 0 18px 35px rgba(49, 94, 232, 0.13);
}

.sym-copy-panel__ring::after {
    position: absolute;
    inset: 9px;
    content: "";
    background: #f8faff;
    border-radius: 50%;
}

.sym-copy-panel__character {
    position: relative;
    z-index: 2;
    color: #172b68;
    font-family: var(--sym-font-symbol);
    font-size: clamp(3.7rem, 10vw, 5.8rem);
    line-height: 1;
}

.sym-copy-panel__name {
    position: relative;
    z-index: 1;
    margin-bottom: 17px;
    color: #34435c;
    font-size: 1rem;
    font-weight: 780;
}

.sym-copy-panel__button,
.sym-summary-card__copy,
.sym-copy-workspace > button,
.sym-code-row > button {
    appearance: none;
    cursor: pointer;
    border: 0;
}

.sym-copy-panel__button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-width: 178px;
    min-height: 48px;
    padding: 11px 20px;
    color: #fff;
    font-weight: 790;
    background: linear-gradient(135deg, #315ee8, #6840e7);
    border-radius: 13px;
    box-shadow: 0 12px 24px rgba(65, 71, 202, 0.24);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.sym-copy-panel__button:hover {
    color: #fff;
    background: linear-gradient(135deg, #244fd0, #5c35d6);
    box-shadow: 0 15px 28px rgba(65, 71, 202, 0.29);
    transform: translateY(-1px);
}

.sym-copy-panel__button.is-copied,
.sym-copy-workspace > button.is-copied,
.sym-summary-card__copy.is-copied,
.sym-code-row > button.is-copied {
    color: #fff;
    background: #15803d;
}

.sym-copy-panel__codes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-top: 14px;
}

.sym-copy-panel__codes code {
    padding: 5px 8px;
    color: #4e5c74;
    font-size: 0.73rem;
    background: #f3f6fc;
    border: 1px solid #dce4f2;
    border-radius: 7px;
}

.sym-copy-panel__hint {
    position: relative;
    z-index: 1;
    margin: 11px 0 0;
    color: #8190a5;
    font-size: 0.79rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. MAIN LAYOUT + ADMIN DATA NOTICE
   -------------------------------------------------------------------------- */
.sym-single__layout {
    display: grid;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 76px;
}

.sym-single__content,
.sym-single__sidebar {
    min-width: 0;
}

.sym-content-section {
    padding: 0 0 45px;
    margin-bottom: 45px;
    scroll-margin-top: 24px;
    border-bottom: 1px solid #e1e7f0;
}

.sym-content-section:last-of-type {
    margin-bottom: 0;
}

.sym-editor-notice {
    padding: 13px 15px;
    margin-bottom: 28px;
    color: #69410c;
    font-size: 0.88rem;
    line-height: 1.55;
    background: #fff8df;
    border: 1px solid #f0d88d;
    border-radius: 11px;
}

.sym-editor-notice strong {
    display: block;
    margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   4. COPY-AND-PASTE SECTION
   -------------------------------------------------------------------------- */
.sym-copy-section {
    padding: 26px;
    background: linear-gradient(145deg, #fbfcff, #f5f3ff);
    border: 1px solid #d9e1f0;
    border-radius: 19px;
    box-shadow: var(--sym-shadow-card);
}

.sym-copy-workspace {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 14px;
    margin-top: 23px;
    background: #fff;
    border: 1px solid #cfdaf0;
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(49, 94, 232, 0.06);
}

.sym-copy-workspace__symbol {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    color: #1f3b91;
    font-family: var(--sym-font-symbol);
    font-size: 2.25rem;
    background: linear-gradient(135deg, #edf3ff, #f2ecff);
    border: 1px solid #cad7ef;
    border-radius: 13px;
}

.sym-copy-workspace__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sym-copy-workspace__body strong {
    color: #25344c;
    font-size: 0.98rem;
}

.sym-copy-workspace__body span {
    color: #718096;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sym-copy-workspace > button {
    min-width: 86px;
    min-height: 42px;
    padding: 9px 15px;
    color: #fff;
    font-weight: 780;
    background: #315ee8;
    border-radius: 10px;
}

.sym-copy-workspace > button:hover {
    color: #fff;
    background: #2448c8;
}

.sym-copy-steps {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 17px 0 0;
    list-style: none;
}

.sym-copy-steps li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 12px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid #dde5f2;
    border-radius: 12px;
}

.sym-copy-steps li > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    font-size: 0.77rem;
    font-weight: 850;
    background: linear-gradient(135deg, #315ee8, #7c3aed);
    border-radius: 999px;
}

.sym-copy-steps strong {
    display: block;
    margin-bottom: 2px;
    color: #2c3b53;
    font-size: 0.9rem;
}

.sym-copy-steps p {
    margin: 0;
    color: #718096;
    font-size: 0.82rem;
    line-height: 1.45;
}

.sym-use-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.sym-use-chips span {
    padding: 6px 9px;
    color: #4c5d75;
    font-size: 0.76rem;
    font-weight: 680;
    background: #fff;
    border: 1px solid #d7e0ef;
    border-radius: 999px;
}



/* One deterministic, server-rendered contextual link to the homepage. */
.sym-home-context-link {
    padding: 12px 14px;
    margin: 18px 0 0;
    color: #53627a;
    font-size: 0.91rem;
    line-height: 1.65;
    background: rgba(255, 255, 255, 0.72);
    border-left: 3px solid #315ee8;
    border-radius: 0 10px 10px 0;
}

.sym-home-context-link a {
    color: #3151bf;
    font-weight: 760;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. MEANING, COMMON USES, AND VARIANTS
   -------------------------------------------------------------------------- */
.sym-use-grid {
    display: grid;
    gap: 10px;
    margin-top: 23px;
}

.sym-use-grid > div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 13px;
    background: #f8faff;
    border: 1px solid #e0e7f3;
    border-radius: 11px;
}

.sym-use-grid span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #176b4d;
    font-size: 0.76rem;
    font-weight: 900;
    background: #e6f7ef;
    border-radius: 999px;
}

.sym-use-grid p {
    margin: 2px 0 0;
    color: #526176;
    font-size: 0.9rem;
    line-height: 1.5;
}

.sym-variant-grid {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.sym-variant-grid article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(15, 23, 42, 0.035);
}

.sym-variant-grid__symbol {
    display: grid;
    min-height: 64px;
    place-items: center;
    padding: 8px;
    color: #254197;
    font-family: var(--sym-font-symbol);
    font-size: 1.7rem;
    background: linear-gradient(135deg, #edf3ff, #f5efff);
    border: 1px solid #d6e0f2;
    border-radius: 11px;
}

.sym-variant-grid h3 {
    color: #27364e;
}

.sym-variant-grid p {
    margin: 5px 0 0;
    color: #6b7890;
    font-size: 0.86rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   6. QUICK METHOD SUMMARY + PLATFORM INSTRUCTIONS
   -------------------------------------------------------------------------- */
.sym-method-summary {
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

.sym-method-summary a {
    display: grid;
    grid-template-columns: minmax(100px, 0.42fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    color: #2d3c55;
    text-decoration: none;
    background: #f8faff;
    border: 1px solid #dde5f1;
    border-radius: 10px;
}

.sym-method-summary a:hover {
    color: #2448c8;
    background: #f1f5ff;
    border-color: #b9c9e7;
}

.sym-method-summary span {
    color: #69778d;
    font-size: 0.79rem;
    font-weight: 720;
}

.sym-method-summary strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-platform-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
}

.sym-platform-card {
    scroll-margin-top: 24px;
    padding: 17px;
    background: #fff;
    border: 1px solid #dde5f1;
    border-top: 3px solid #315ee8;
    border-radius: 14px;
    box-shadow: 0 6px 17px rgba(15, 23, 42, 0.04);
}

.sym-platform-card--mac,
.sym-platform-card--iphone {
    border-top-color: #7c3aed;
}

.sym-platform-card--android,
.sym-platform-card--google {
    border-top-color: #0f8f82;
}

.sym-platform-card--word,
.sym-platform-card--chromebook {
    border-top-color: #db2777;
}

.sym-platform-card__heading {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 13px;
}

.sym-platform-card__icon {
    position: relative;
    display: block;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    background: #edf3ff;
    border: 1px solid #d2ddf2;
    border-radius: 9px;
}

.sym-platform-card__icon::before {
    position: absolute;
    inset: 9px;
    content: "";
    background: #315ee8;
    border-radius: 3px;
}

.sym-platform-card ol {
    display: grid;
    gap: 9px;
    padding-left: 20px;
    margin: 0;
    color: #59677c;
    font-size: 0.88rem;
    line-height: 1.55;
}

.sym-platform-card p {
    margin: 0;
    color: #59677c;
    font-size: 0.88rem;
    line-height: 1.58;
}

@media (min-width: 700px) {
    .sym-platform-card {
        display: grid;
        grid-template-columns: minmax(190px, 0.36fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .sym-platform-card__heading {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   7. CHARACTER CODES
   -------------------------------------------------------------------------- */
.sym-code-list {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.sym-code-row {
    display: grid;
    grid-template-columns: minmax(112px, 0.4fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 11px 12px;
    background: #f8faff;
    border: 1px solid #dee6f2;
    border-radius: 10px;
}

.sym-code-row > span {
    color: #69778d;
    font-size: 0.78rem;
    font-weight: 720;
}

.sym-code-row code {
    min-width: 0;
    overflow-x: auto;
    color: #243b78;
    font-size: 0.84rem;
    font-weight: 720;
    white-space: nowrap;
}

.sym-code-row > button {
    min-width: 66px;
    min-height: 34px;
    padding: 6px 10px;
    color: #3151bf;
    font-size: 0.74rem;
    font-weight: 780;
    background: #fff;
    border: 1px solid #bdcbea;
    border-radius: 8px;
}

.sym-code-row > button:hover {
    color: #fff;
    background: #315ee8;
    border-color: #315ee8;
}

/* --------------------------------------------------------------------------
   8. EXAMPLES, WARNINGS, AND DETAIL LISTS
   -------------------------------------------------------------------------- */
.sym-example-list,
.sym-mistake-list,
.sym-detail-list {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 21px 0 0;
    list-style: none;
}

.sym-example-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 13px;
    background: #f8faff;
    border: 1px solid #e0e7f2;
    border-radius: 11px;
}

.sym-example-list li > span {
    color: #3151bf;
    font-family: var(--sym-font-symbol);
    font-size: 1.35rem;
    text-align: center;
}

.sym-example-list code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #334155;
    font-family: var(--sym-font-system);
    font-size: 0.9rem;
}

.sym-content-section--warning {
    padding: 24px;
    background: #fffaf0;
    border: 1px solid #efd7a9;
    border-radius: 16px;
}

.sym-mistake-list li,
.sym-detail-list li {
    position: relative;
    padding: 11px 12px 11px 36px;
    color: #59677c;
    font-size: 0.9rem;
    line-height: 1.55;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #eadfc9;
    border-radius: 10px;
}

.sym-mistake-list li::before,
.sym-detail-list li::before {
    position: absolute;
    top: 12px;
    left: 13px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    color: #a44b19;
    font-size: 0.7rem;
    font-weight: 900;
    content: "!";
    background: #fff0db;
    border-radius: 999px;
}

.sym-detail-list li {
    border-color: #dfe6f1;
}

.sym-detail-list li::before {
    color: #3151bf;
    content: "✓";
    background: #edf3ff;
}


/* --------------------------------------------------------------------------
   9. SEO CONTENT AND CONTEXTUAL INTERNAL LINKS
   -------------------------------------------------------------------------- */
.sym-content-section--seo {
    padding: clamp(22px, 4vw, 34px);
    background: linear-gradient(145deg, #f8faff, #ffffff);
    border: 1px solid #dfe6f2;
    border-radius: 18px;
}

.sym-seo-prose {
    max-width: 820px;
}

.sym-contextual-links {
    padding-top: 16px;
    margin: 20px 0 0;
    color: #5d6c82;
    line-height: 1.7;
    border-top: 1px solid #e0e7f2;
}

.sym-contextual-links a {
    color: #3151bf;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. RELATED SYMBOLS, FAQ, AND SOURCES
   -------------------------------------------------------------------------- */
.sym-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 21px;
}

.sym-related-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 2px 11px;
    align-items: center;
    padding: 12px;
    color: #2b3b54;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dde5f1;
    border-radius: 12px;
}

.sym-related-card:hover {
    color: #2448c8;
    border-color: #aebfe3;
    box-shadow: 0 7px 18px rgba(49, 94, 232, 0.08);
}

.sym-related-card > span {
    grid-row: 1 / 3;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #3151bf;
    font-family: var(--sym-font-symbol);
    font-size: 1.5rem;
    background: #edf3ff;
    border-radius: 10px;
}

.sym-related-card strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-related-card small {
    color: #718096;
    font-size: 0.73rem;
}

.sym-single-faq {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.sym-single-faq details {
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 11px;
}

.sym-single-faq summary {
    position: relative;
    padding: 14px 42px 14px 14px;
    color: #293950;
    font-size: 0.9rem;
    font-weight: 760;
    cursor: pointer;
    list-style: none;
}

.sym-single-faq summary::-webkit-details-marker {
    display: none;
}

.sym-single-faq summary::after {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #315ee8;
    font-size: 1.05rem;
    content: "+";
    transform: translateY(-50%);
}

.sym-single-faq details[open] summary::after {
    content: "−";
}

.sym-single-faq details > div {
    padding: 0 14px 14px;
    color: #5c6a7f;
    font-size: 0.88rem;
    line-height: 1.65;
}

.sym-single-faq details > div p:last-child {
    margin-bottom: 0;
}

.sym-reference-note {
    padding: 16px;
    color: #718096;
    font-size: 0.78rem;
    line-height: 1.55;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
}

.sym-reference-note p {
    margin-bottom: 8px;
}

.sym-reference-note ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 13px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sym-reference-note a {
    color: #4f67aa;
}

/* --------------------------------------------------------------------------
   10. STICKY SIDEBAR
   -------------------------------------------------------------------------- */
.sym-single__sidebar {
    display: grid;
    gap: 14px;
    align-content: start;
}

.sym-summary-card,
.sym-on-this-page {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: 17px;
    box-shadow: 0 15px 34px rgba(30, 58, 138, 0.08);
}

.sym-summary-card {
    padding: 17px;
}

.sym-summary-card__top {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.sym-summary-card__top > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #3151bf;
    font-family: var(--sym-font-symbol);
    font-size: 1.65rem;
    background: linear-gradient(135deg, #edf3ff, #f4edff);
    border-radius: 11px;
}

.sym-summary-card__top small {
    display: block;
    margin-bottom: 2px;
    color: #7d8a9e;
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sym-summary-card__top h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.sym-summary-card dl {
    margin: 0;
}

.sym-summary-card dl > div {
    display: grid;
    grid-template-columns: minmax(82px, 0.58fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #e6ebf2;
}

.sym-summary-card dt {
    color: #78869a;
    font-size: 0.77rem;
    font-weight: 700;
}

.sym-summary-card dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #2b3b54;
    font-size: 0.82rem;
    font-weight: 750;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sym-summary-card__symbol {
    color: #315ee8 !important;
    font-family: var(--sym-font-symbol);
    font-size: 1.15rem !important;
}

.sym-summary-card code {
    font-size: 0.75rem;
}

.sym-summary-card__copy {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    color: #fff;
    font-weight: 780;
    background: linear-gradient(135deg, #315ee8, #6840e7);
    border-radius: 10px;
}

.sym-summary-card__copy:hover {
    color: #fff;
    background: linear-gradient(135deg, #2448c8, #5d35d0);
}

.sym-on-this-page {
    display: grid;
    gap: 2px;
    padding: 14px;
}

.sym-on-this-page strong {
    margin-bottom: 6px;
    color: #334155;
    font-size: 0.82rem;
}

.sym-on-this-page a {
    padding: 7px 8px;
    color: #68768b;
    font-size: 0.78rem;
    text-decoration: none;
    border-radius: 7px;
}

.sym-on-this-page a:hover {
    color: #2448c8;
    background: #edf3ff;
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE — MOBILE FIRST
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .sym-single__hero {
        padding: 14px 0 28px;
    }

    .sym-single__hero-surface {
        padding: 22px 18px;
        border-radius: 24px;
    }

    .sym-breadcrumbs {
        margin-bottom: 25px;
        font-size: 0.74rem;
    }

    .sym-single h1 {
        font-size: clamp(2.15rem, 12vw, 3rem);
    }

    .sym-hero-facts {
        grid-template-columns: 1fr 1fr;
    }

    .sym-copy-panel {
        padding: 23px 18px;
        border-radius: 20px;
    }

    .sym-copy-panel__visual {
        width: 136px;
    }

    .sym-single__layout {
        gap: 30px;
        padding-top: 34px;
        padding-bottom: 56px;
    }

    .sym-content-section {
        padding-bottom: 34px;
        margin-bottom: 34px;
    }

    .sym-copy-section,
    .sym-content-section--warning {
        padding: 18px;
    }

    .sym-copy-workspace {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .sym-copy-workspace__symbol {
        width: 52px;
        height: 52px;
        font-size: 1.9rem;
    }

    .sym-copy-workspace > button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .sym-method-summary a {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .sym-code-row {
        grid-template-columns: minmax(88px, 0.48fr) minmax(0, 1fr);
    }

    .sym-code-row > button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .sym-related-grid {
        grid-template-columns: 1fr;
    }

    .sym-variant-grid article {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .sym-variant-grid__symbol {
        min-height: 58px;
        font-size: 1.45rem;
    }
}

@media (min-width: 600px) {
    .sym-copy-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sym-use-grid,
    .sym-variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sym-platform-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 860px) {
    .sym-single__hero-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    }

    .sym-hero-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sym-single__layout {
        grid-template-columns: minmax(0, 1fr) 284px;
        align-items: start;
    }

    .sym-single__sidebar {
        position: sticky;
        top: 24px;
    }
}

@media (min-width: 1100px) {
    .sym-related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sym-single__hero {
        padding-bottom: 44px;
    }

    .sym-single__hero-grid {
        gap: 64px;
        grid-template-columns: minmax(0, 1.5fr) 350px;
    }

    .sym-single__layout {
        gap: 58px;
        grid-template-columns: minmax(0, 1fr) 310px;
    }

    .sym-platform-grid {
        grid-template-columns: 1fr;
    }
}


/* v0.6 contextual internal-link previews for editors. */
.sym-related-card.is-preview small {
    color: #8a5a0a;
}


/* v0.11 — richer use and formatting guidance */
.sym-formatting-section__intro {
    max-width: 76ch;
    margin-bottom: 22px;
}

.sym-formatting-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sym-formatting-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 14px 16px;
    background: #f8faff;
    border: 1px solid #dfe6f4;
    border-radius: 14px;
}

.sym-formatting-list li > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #315ee8;
    font-size: 0.85rem;
    font-weight: 850;
    background: #e9efff;
    border-radius: 50%;
}

.sym-formatting-list p {
    margin: 1px 0 0;
    color: #44536a;
    line-height: 1.68;
}