/* SmoothDraw Online Coloring - clean white layout */
.sdoc-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    color: #1f2328;
    font-family: "Nunito", "Fredoka", "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sdoc-title {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sdoc-breadcrumbs {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 4px;
}
.sdoc-breadcrumbs a { color: inherit; text-decoration: none; }
.sdoc-breadcrumbs a:hover { text-decoration: underline; }

.sdoc-intro {
    max-width: 820px;
    color: #374151;
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* App shell: no outer background or border */
.sdoc-app {
    --sdoc-accent: #7c3aed;
    --sdoc-border: #e5e7eb;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Layout: canvas column flexes to fill leftover viewport space (after the
 * fixed 300px tool sidebar and 300px ad sidebar), and the image inside
 * scales up to fill it. This removes all whitespace next to the line-art
 * because the stage width is set inline by fitSize() to match the column.
 * The ad column collapses below 1040px so canvas keeps useful real estate
 * on smaller laptops/tablets. */
.sdoc-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 300px 300px;
    gap: 16px;
    align-items: start;
}

.sdoc-canvas-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Action bar (now above the canvas) */
.sdoc-actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--sdoc-border);
    border-radius: 14px;
}

.sdoc-action-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sdoc-action {
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    box-shadow: 0 2px 0 rgba(0,0,0,0.06);
    transition: transform 0.08s ease, filter 0.12s ease;
    min-height: 40px;
}
.sdoc-action:hover { filter: brightness(1.05); }
.sdoc-action:active { transform: translateY(1px); }
.sdoc-action-icon { font-size: 1.05rem; line-height: 1; }

.sdoc-action--yellow { background: #fbbf24; color: #5b3a00; }
.sdoc-action--pink   { background: #ec4899; color: #fff; }
.sdoc-action--green  { background: #22c55e; color: #06340f; }
.sdoc-action--blue   { background: #3b82f6; color: #fff; }
.sdoc-action--purple { background: #a78bfa; }

/* Zoom cluster: three separate squares */
.sdoc-zoom-cluster {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.sdoc-zoom-btn,
.sdoc-zoom-percent {
    appearance: none;
    border: 1px solid var(--sdoc-border);
    background: #ffffff;
    color: #111827;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.sdoc-zoom-btn:hover { background: #f3f4f6; }
.sdoc-zoom-btn { font-size: 1.2rem; }
.sdoc-zoom-percent {
    width: auto;
    min-width: 58px;
    padding: 0 10px;
    font-size: 0.9rem;
    color: #6b7280;
}
.sdoc-zoom-percent:hover { border-color: #a78bfa; color: #4c1d95; }

/* Canvas stage — fixed bounded box. Scrolls internally if zoomed image exceeds it.
 * `safe center` keeps the wrap centered when smaller than the stage but anchors
 * to the top-left (instead of scrolling off-screen) when it overflows.
 * `overscroll-behavior: contain` stops the page from rubber-banding on iOS
 * when the user drags past the stage edge while drawing. */
.sdoc-stage {
    position: relative;
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--sdoc-border);
    border-radius: 14px;
    height: calc(100vh - 220px);
    min-height: 420px;
    padding: 6px;
    display: flex;
    justify-content: safe center;
    align-items: safe center;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Fills the canvas column (1fr grid track). The image inside scales up
     * to the stage's content width via fitSize() in JS — no inline width
     * juggling needed. */
    width: 100%;
    box-sizing: border-box;
}

.sdoc-canvas-wrap {
    position: relative;
    background: #fff;
    border-radius: 8px;
    flex: 0 0 auto;
    touch-action: none;
}

.sdoc-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.sdoc-canvas--paint {
    z-index: 1;
    cursor: crosshair;
    /* Prevent browser from treating touch as scroll/zoom on this layer. */
    touch-action: none;
}
.sdoc-canvas--line  { z-index: 2; pointer-events: none; }

.sdoc-status {
    position: absolute;
    bottom: 10px;
    left: 14px;
    font-size: 0.85rem;
    color: #4b5563;
    background: rgba(255,255,255,0.95);
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid var(--sdoc-border);
}
.sdoc-status:empty { display: none; }

/* Sidebar: grows naturally with its content (no fixed height, no internal
 * scroll). The page itself scrolls if the palettes are taller than the
 * viewport on very short windows. */
.sdoc-sidebar {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--sdoc-border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Tools */
.sdoc-tool-row {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.sdoc-tool {
    appearance: none;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 12px;
    background: #ffffff;
    color: #374151;
    font-weight: 700;
    font-size: 0.85rem;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    min-height: 64px;
}
.sdoc-tool:hover { border-color: #c4b5fd; }
.sdoc-tool.is-active {
    background: #7c3aed;
    color: #fff;
    border-color: #6d28d9;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.sdoc-tool-icon {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sdoc-tool-icon svg { display: block; }

/* Size slider */
.sdoc-size { display: flex; flex-direction: column; gap: 6px; }
.sdoc-size label { font-weight: 700; font-size: 0.85rem; color: #374151; }
.sdoc-size-controls { display: flex; align-items: center; gap: 10px; }
.sdoc-size input[type=range] {
    flex: 1;
    accent-color: #7c3aed;
    height: 6px;
}
.sdoc-size-value {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    color: #374151;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.85rem;
    border: 1px solid var(--sdoc-border);
}

/* Palettes: fill remaining vertical space evenly */
.sdoc-palettes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}
.sdoc-palette-section {
    background: #ffffff;
    border: 1px solid var(--sdoc-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.sdoc-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.sdoc-palette-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: 0;
    text-transform: none;
}
.sdoc-see-all {
    appearance: none;
    background: transparent;
    border: none;
    color: #4b5563;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}
.sdoc-see-all:hover { color: #111827; text-decoration: underline; }

/* Circular swatches, uniform size across all sections */
.sdoc-palette {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.sdoc-swatch {
    appearance: none;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.sdoc-swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.sdoc-swatch.is-active {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #7c3aed,
        0 3px 6px rgba(124,58,237,0.25);
    transform: scale(1.08);
}
.sdoc-swatch--gradient { border-radius: 999px; }

/* Custom color: round wheel with its "Custom Color" label sitting inline
 * to its right. No surrounding box / border / header — the row anchors
 * left at the same gutter as the palette section titles below it. */
.sdoc-custom-row {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 4px 2px;
}
.sdoc-custom {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}
.sdoc-color-picker {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.sdoc-color-wheel {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ffffff 0 28%, transparent 28% 34%),
        conic-gradient(
            hsl(0,100%,55%),
            hsl(30,100%,55%),
            hsl(60,100%,55%),
            hsl(90,100%,45%),
            hsl(120,100%,42%),
            hsl(150,100%,42%),
            hsl(180,100%,42%),
            hsl(210,100%,50%),
            hsl(240,100%,60%),
            hsl(270,100%,55%),
            hsl(300,100%,55%),
            hsl(330,100%,55%),
            hsl(360,100%,55%)
        );
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.sdoc-color-picker:hover .sdoc-color-wheel {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* After the user has picked a custom color, show that color as a solid swatch. */
.sdoc-color-wheel.is-selected {
    background: var(--sdoc-custom-color, #ff3b3b) !important;
    border: 1px solid rgba(0,0,0,0.12);
}
.sdoc-color-wheel.is-selected .sdoc-color-wheel-plus { display: none; }
.sdoc-color-wheel-plus {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.2px solid #111827;
    color: #111827;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sdoc-color-picker input[type=color] {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}
.sdoc-color-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}

/* Custom Color row — borderless, headerless. The label "Custom Color"
   sits inline to the right of the color wheel and aligns with the section
   titles ("Solid Colors", "Pastels", "Gradients") below it. */
.sdoc-custom-row .sdoc-color-picker {
    flex-direction: row;
    gap: 12px;
}
.sdoc-custom-row .sdoc-color-label {
    color: #1f2937;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0;
}

/* Right-rail content slot (formerly .sdoc-ad-sidebar). Renamed to neutral
   "rail" terminology because EasyList ad-blocker rules hide anything
   containing "ad-" / "advert" / "advertisement" in class/id/aria-label/
   data-attrs. The slot is sticky so it stays in view as the user
   scrolls/colors. Hidden on screens narrower than the 3-column breakpoint
   (see media queries below) so the canvas keeps enough room. */
.sdoc-rail {
    position: sticky;
    top: 16px;
    align-self: start;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    /* Pin to the left edge of the grid cell so it sits as close to the
       tool sidebar as possible (no awkward gap). */
    margin-left: 0;
    margin-right: auto;
    justify-self: start;
}
.sdoc-rail-slot {
    width: 100%;
    min-height: 600px;
    background: transparent;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}
/* When the slot is empty (e.g. while Raptive is still loading or no
   filter has injected markup yet), keep its dimensions reserved so the
   page layout doesn't shift when the ad finally renders. The
   ::placeholder rule below is a no-op visually but prevents the flex
   container from collapsing. */
.sdoc-rail-slot:empty {
    background: transparent;
    border: none;
}

/* ---- Suppress ad-network "Advertisement" label text -----------------
 * Raptive (formerly AdThrive), Mediavine, Ezoic, AdSense and others
 * sometimes inject a tiny "Advertisement" caption above/below their ad
 * units. The user requested those labels not appear. We hide them via
 * a broad set of selectors so it works regardless of which provider is
 * active. The ads themselves still render — only the label text is
 * suppressed. */
.adlabel,
.ad-label,
.ad-label-text,
.advertisement,
.advertisement-label,
.ad-header,
[class*="adunit__label"],
[class*="advertisement-label"],
[class*="ad-unit-label"],
[class*="ad__label"],
[data-ad-label],
.adthrive-ad-label,
.adthrive-collapse-ad-label,
.mv-ad-label,
.mv-ad-disclosure,
.ez-toc-debug-messages, /* incidentally also Ezoic noise */
.video-ads-label {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}
/* Some networks render the label as a ::before/::after pseudo on the
   slot wrapper itself rather than as a child element. Wipe the content
   string so the pseudo collapses to zero size. */
.adthrive-ad::before,
.adthrive-ad::after,
.mv-ad::before,
.mv-ad::after,
[id^="div-gpt-ad"]::before,
[id^="div-gpt-ad"]::after {
    content: none !important;
}

/* Hide theme-supplied "Skip to Content" link visually while keeping it
   accessible to screen readers and keyboard users (focusable). The user
   asked to remove the visible button from the top-left of coloring pages
   without breaking the accessibility affordance entirely. */
.skip-link,
.skip-to-content,
a.screen-reader-shortcut,
a[href="#content"]:not(:focus):not(:focus-visible),
a[href="#main"]:not(:focus):not(:focus-visible),
a[href="#primary"]:not(:focus):not(:focus-visible) {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
.skip-link:focus,
.skip-link:focus-visible,
.skip-to-content:focus,
.skip-to-content:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Notices */
.sdoc-notice {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    color: #713f12;
}
.sdoc-notice--error {
    background: #fee2e2;
    border-color: #fecaca;
    color: #7f1d1d;
}

/* Related + description */
.sdoc-description, .sdoc-related { margin-top: 32px; }
.sdoc-description h2, .sdoc-related h2 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 12px;
}

/* "See all <Associated Page>" CTA — centered under the coloring tool,
   styled like the Print button up top (blue pill, white text). It re-uses
   the .sdoc-action / .sdoc-action--blue classes for the button look and
   only adds layout/centering rules here. */
.sdoc-see-all-row {
    margin: 20px 0 4px;
    text-align: center;
}
.sdoc-see-all-link {
    text-decoration: none !important;
    color: #fff !important;
}
.sdoc-see-all-link:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* "How to use the Online Coloring Tool" help link, sits below the H1
   and above the action toolbar. */
.sdoc-howto-row {
    margin: 12px 0 18px;
}
.sdoc-howto-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1f7ab8;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(31, 122, 184, 0.45);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sdoc-howto-link:hover,
.sdoc-howto-link:focus {
    color: #17608f;
    border-bottom-color: #17608f;
    text-decoration: none;
}
.sdoc-howto-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.sdoc-related-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}
.sdoc-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .sdoc-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sdoc-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sdoc-related-item a, .sdoc-grid-item a {
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--sdoc-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sdoc-related-item a:hover, .sdoc-grid-item a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    border-color: #c4b5fd;
}
.sdoc-related-item img, .sdoc-grid-item img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: contain;
    background: #fff;
    padding: 8px;
}
.sdoc-related-item span, .sdoc-grid-title {
    display: block;
    padding: 10px 12px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.sdoc-archive-header { margin-bottom: 20px; }
.sdoc-archive-header h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 800; }
.sdoc-archive-intro { color: #4b5563; max-width: 720px; }

/* Topic archive card grid (3-up, matches source-page cards, single CTA). */
.sdoc-card-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.sdoc-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .10), 0 4px 6px rgba(0, 0, 0, .06);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.sdoc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .12), 0 6px 10px rgba(0, 0, 0, .08);
}
.sdoc-card-image {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    line-height: 0;
}
.sdoc-card-image img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding: 0;
    background: transparent;
}
.sdoc-card-meta {
    display: block;
    color: #6b7280;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

/* Shortcode controls + containers */
.sdoc-shortcode { margin: 0 0 24px; }
.sdoc-shortcode-title { margin: 0 0 12px; font-weight: 800; }
.sdoc-archive-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    margin: 10px 0 20px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.sdoc-archive-controls .sdoc-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #374151;
}
.sdoc-archive-controls select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    color: #111827;
    cursor: pointer;
}
.sdoc-archive-controls .sdoc-control-apply {
    padding: 6px 14px;
    background: #374151;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
/* Card title — rendered as a plain <p> with NO class to match the
   Image PDF Columns Cards plugin's markup. Styled via structural selector. */
.sdoc-card-grid > li.sdoc-card > p {
    margin: 10px 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}
.sdoc-card-grid > li.sdoc-card > p a {
    color: inherit;
    text-decoration: none;
}
.sdoc-card-grid > li.sdoc-card > p a:hover { text-decoration: none; }
.sdoc-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #e34a7e 0%, #d91b5c 100%);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(217, 27, 92, 0.3);
    transition: 0.2s ease-in-out;
}
.sdoc-card-cta:hover {
    background: linear-gradient(135deg, #d91b5c 0%, #b9154a 100%);
    box-shadow: 0 4px 8px rgba(217, 27, 92, 0.4);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.sdoc-card-cta svg { flex-shrink: 0; }

/* Responsive */
/* Drop the ad column when the viewport gets too narrow to fit canvas + tool
   sidebar + 300px ad slot comfortably. Tool sidebar stays on the right.
   Lowered from 1180 to 1040 so the ad slot is visible on standard 1280-wide
   laptops too, not just larger desktops. */
@media (max-width: 1040px) {
    .sdoc-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
    .sdoc-rail { display: none; }
}

@media (max-width: 900px) {
    .sdoc-layout {
        grid-template-columns: 1fr;
    }
    .sdoc-sidebar {
        height: auto;
        max-height: none;
        order: 2;
        overflow: visible;
    }
    .sdoc-stage {
        /* Bigger canvas on tablets/phones so there's real drawing surface. */
        height: 70vh;
        min-height: 420px;
    }
    .sdoc-canvas-column { order: 1; }
    .sdoc-palette { grid-template-columns: repeat(10, 1fr); }
}

@media (max-width: 560px) {
    .sdoc-action-label { display: none; }
    .sdoc-action { padding: 9px 12px; min-height: 44px; }
    .sdoc-palette { grid-template-columns: repeat(7, 1fr); }
    .sdoc-tool-label { font-size: 0.75rem; }
    /* Ensure tool buttons are tap-friendly (≥44px Apple HIG). */
    .sdoc-tool, .sdoc-zoom-btn, .sdoc-zoom-percent { min-height: 44px; }
    .sdoc-swatch { min-width: 32px; min-height: 32px; }
    /* Slightly shorter canvas on phones so the toolbar/palette stay in view. */
    .sdoc-stage { height: 60vh; min-height: 360px; }
}

/* Responsive override for shortcode-rendered grids that set explicit
   columns via inline style. The inline grid-template-columns would
   otherwise win at any viewport size; matching on `[style*="--sdoc-cols"]`
   scopes these overrides to grids the renderer wants us to manage. */
@media (max-width: 960px) {
    .sdoc-card-grid[style*="--sdoc-cols"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 700px) {
    .sdoc-card-grid[style*="--sdoc-cols"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 420px) {
    .sdoc-card-grid[style*="--sdoc-cols"] {
        grid-template-columns: 1fr !important;
    }
}

/* Shortcode wrappers (decorative). */
.sdoc-shortcode { margin: 24px 0; }
.sdoc-shortcode-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 14px;
}
.sdoc-shortcode-featured .sdoc-card-grid { margin-bottom: 8px; }

@media print {
    .sdoc-sidebar, .sdoc-rail, .sdoc-actionbar, .sdoc-status, .sdoc-related, .sdoc-description, header, footer, nav, .sdoc-modal { display: none !important; }
    .sdoc-layout { grid-template-columns: 1fr; }
    .sdoc-stage { border: none; background: #fff; }
}

/* --- See-all modal: lives inside the sidebar and covers it. --- */
.sdoc-modal {
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: none;
    flex-direction: column;
    z-index: 10;
    border-radius: 14px;
}
.sdoc-modal.is-open { display: flex; }

.sdoc-modal-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.sdoc-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.sdoc-modal-back,
.sdoc-modal-close {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sdoc-modal-back:hover,
.sdoc-modal-close:hover { background: #f3f4f6; }
.sdoc-modal-title {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.sdoc-modal-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Match sidebar defaults: 7 cols, circular swatches, same gap. */
.sdoc-modal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
.sdoc-modal-grid .sdoc-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
}

.sdoc-modal-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sdoc-modal-group-title {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4b5563;
}

@media (max-width: 900px) {
    .sdoc-modal {
        position: fixed;
        inset: 12px;
        border-radius: 16px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    }
}