/* =========================================================
 * ATPages Block Toolkit — styles.css
 * Loaded on BOTH editor and frontend so previews match.
 *
 * v3 architecture notes:
 *  - Callouts and list bullets use ABSOLUTE positioning, never
 *    flex. Flex on a contenteditable <p> breaks the cursor in
 *    Gutenberg and can split CJK text into columns on some
 *    browsers (v2 issue #2).
 *  - padding-left on the editable element reserves space for
 *    the icon column + 1px separator (drawn with ::before and
 *    ::after pseudo-elements that do NOT take part in layout).
 *  - Layout-critical properties use !important so the JNews
 *    theme cannot override them.
 * ========================================================= */

:root {
    --atpbt-radius: 6px;
    --atpbt-pad-y: 16px;
    --atpbt-pad-x: 18px;
    --atpbt-icon-size: 22px;
    --atpbt-icon-col: 60px;  /* icon (22) + sep gap (8) + sep (1) + text gap (10) + initial offset */
    --atpbt-accent: #e11d48;
}

/* =========================================================
 * 1. Paragraph callouts
 * ========================================================= */

[class*="is-style-atp-callout-"] {
    position: relative !important;
    padding: var(--atpbt-pad-y) var(--atpbt-pad-x) var(--atpbt-pad-y) var(--atpbt-icon-col) !important;
    margin: 1.5em 0 !important;
    border: 1px solid var(--atpbt-c-border, #d8dde6);
    background: var(--atpbt-c-bg, #f8fafc);
    color: var(--atpbt-c-fg, #1f2937);
    border-radius: var(--atpbt-radius);
    line-height: 1.7;
    box-sizing: border-box;
}

[class*="is-style-atp-callout-"]::before {
    content: "";
    position: absolute;
    left: var(--atpbt-pad-x);
    top: calc(var(--atpbt-pad-y) + 2px);
    width: var(--atpbt-icon-size);
    height: var(--atpbt-icon-size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

/* Vertical separator between icon and text. */
[class*="is-style-atp-callout-"]::after {
    content: "";
    position: absolute;
    left: calc(var(--atpbt-pad-x) + var(--atpbt-icon-size) + 8px);
    top: var(--atpbt-pad-y);
    bottom: var(--atpbt-pad-y);
    width: 1px;
    background: var(--atpbt-c-border, #d8dde6);
    pointer-events: none;
}

/* --- variants --- */

.is-style-atp-callout-info {
    --atpbt-c-bg: #eff6ff;
    --atpbt-c-border: #bfdbfe;
    --atpbt-c-fg: #1e3a8a;
}
.is-style-atp-callout-info::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563eb'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/></svg>");
}

.is-style-atp-callout-warn {
    --atpbt-c-bg: #fffbeb;
    --atpbt-c-border: #fde68a;
    --atpbt-c-fg: #78350f;
}
.is-style-atp-callout-warn::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d97706'><path d='M12 2 1 21h22L12 2Zm1 14h-2v-2h2v2Zm0-4h-2V8h2v4Z'/></svg>");
}

.is-style-atp-callout-success {
    --atpbt-c-bg: #ecfdf5;
    --atpbt-c-border: #a7f3d0;
    --atpbt-c-fg: #065f46;
}
.is-style-atp-callout-success::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23059669'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1 14.5-5-5 1.4-1.4 3.6 3.6 7.1-7.1 1.4 1.4-8.5 8.5Z'/></svg>");
}

.is-style-atp-callout-danger {
    --atpbt-c-bg: #fef2f2;
    --atpbt-c-border: #fecaca;
    --atpbt-c-fg: #7f1d1d;
}
.is-style-atp-callout-danger::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm5 13.6L15.6 17 12 13.4 8.4 17 7 15.6 10.6 12 7 8.4 8.4 7 12 10.6 15.6 7 17 8.4 13.4 12 17 15.6Z'/></svg>");
}

.is-style-atp-callout-memo {
    --atpbt-c-bg: #f3f4f6;
    --atpbt-c-border: #d1d5db;
    --atpbt-c-fg: #374151;
}
.is-style-atp-callout-memo::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'><path d='M3 3h14l4 4v14H3V3Zm2 2v14h14V8h-3V5H5Z'/></svg>");
}

.is-style-atp-callout-question {
    --atpbt-c-bg: #faf5ff;
    --atpbt-c-border: #e9d5ff;
    --atpbt-c-fg: #581c87;
}
.is-style-atp-callout-question::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239333ea'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 17h-2v-2h2v2Zm2-7c-.6.5-1 1-1 2v1h-2v-1c0-1.4.6-2.1 1.4-2.7.6-.5 1-1 1-1.8a1.4 1.4 0 0 0-2.8 0H9.6a3.4 3.4 0 0 1 6.8 0c0 1.4-.6 2.1-1.4 2.5Z'/></svg>");
}

/* Filled thumbs-up — replaces v2 outline icon. */
.is-style-atp-callout-good {
    --atpbt-c-bg: #ecfdf5;
    --atpbt-c-border: #a7f3d0;
    --atpbt-c-fg: #065f46;
}
.is-style-atp-callout-good::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23059669'><path d='M2 9h4v12H2zM21.2 8.5h-6.3l.95-4.6c.03-.2.05-.4.05-.6a1.5 1.5 0 0 0-.44-1.06L13.2 1 7.6 6.6A2 2 0 0 0 7 8v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1a2 2 0 0 0-1.8-1.5Z'/></svg>");
}

/* Filled thumbs-down — flipped paint. */
.is-style-atp-callout-bad {
    --atpbt-c-bg: #fef2f2;
    --atpbt-c-border: #fecaca;
    --atpbt-c-fg: #7f1d1d;
}
.is-style-atp-callout-bad::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626'><path d='M22 15h-4V3h4zM2.8 15.5h6.3l-.95 4.6c-.03.2-.05.4-.05.6a1.5 1.5 0 0 0 .44 1.06L10.8 23l5.6-5.6A2 2 0 0 0 17 16V6c0-1.1-.9-2-2-2H6c-.83 0-1.54.5-1.84 1.22L1.14 12.27c-.09.23-.14.47-.14.73v1a2 2 0 0 0 1.8 1.5Z'/></svg>");
}

/* =========================================================
 * 2. Heading styles
 * ========================================================= */

.is-style-atp-h-underline {
    border-bottom: 3px solid var(--atpbt-accent) !important;
    padding: 0 0 0.4em 0 !important;
    margin-bottom: 1em !important;
    background: transparent !important;
}

.is-style-atp-h-tab {
    position: relative;
    padding: 0.4em 0.9em !important;
    background: #f3f4f6 !important;
    border-left: 5px solid var(--atpbt-accent) !important;
    margin-bottom: 1em !important;
    color: #1f2937 !important;
}

.is-style-atp-h-double {
    border-top: 4px double #6b7280 !important;
    border-bottom: 4px double #6b7280 !important;
    padding: 0.4em 0 !important;
    margin: 1em 0 !important;
    background: transparent !important;
}

/* v3 fix: explicit padding with high specificity beats JNews override. */
.is-style-atp-h-boxed {
    background: #1f2937 !important;
    color: #ffffff !important;
    padding: 0.6em 1em !important;
    padding-inline-start: 1em !important;
    border-radius: 4px !important;
    margin: 1em 0 !important;
    border: none !important;
}

/* =========================================================
 * 3. List styles
 * ========================================================= */

/* Check list (UL) */
.is-style-atp-list-check {
    list-style: none !important;
    padding-left: 0 !important;
}
.is-style-atp-list-check li {
    position: relative;
    padding: 6px 0 6px 32px !important;
    list-style: none !important;
    margin-left: 0 !important;
}
.is-style-atp-list-check li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4Z'/></svg>");
    pointer-events: none;
}

/* Arrow list (UL) */
.is-style-atp-list-arrow {
    list-style: none !important;
    padding-left: 0 !important;
}
.is-style-atp-list-arrow li {
    position: relative;
    padding: 6px 0 6px 28px !important;
    list-style: none !important;
    margin-left: 0 !important;
}
.is-style-atp-list-arrow li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e11d48'><path d='M9 6l6 6-6 6V6Z'/></svg>");
    pointer-events: none;
}

/* Numbered-circle list (OL) — v3: 56px padding for breathing room. */
.is-style-atp-list-num-circle {
    list-style: none !important;
    counter-reset: atpbtnum;
    padding-left: 0 !important;
}
.is-style-atp-list-num-circle li {
    position: relative;
    counter-increment: atpbtnum;
    padding: 8px 0 8px 56px !important;
    list-style: none !important;
    margin-left: 0 !important;
    min-height: 32px;
}
.is-style-atp-list-num-circle li::before {
    content: counter(atpbtnum);
    position: absolute;
    left: 4px;
    top: 6px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: var(--atpbt-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

/* Step list (OL) — v3: 56px padding, dashed row separator. */
.is-style-atp-list-step {
    list-style: none !important;
    counter-reset: atpbtstep;
    padding-left: 0 !important;
}
.is-style-atp-list-step li {
    position: relative;
    counter-increment: atpbtstep;
    padding: 14px 0 14px 56px !important;
    list-style: none !important;
    margin-left: 0 !important;
    border-bottom: 1px dashed #e5e7eb;
    min-height: 32px;
}
.is-style-atp-list-step li:last-child {
    border-bottom: none;
}
.is-style-atp-list-step li::before {
    content: "STEP " counter(atpbtstep);
    position: absolute;
    left: 0;
    top: 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--atpbt-accent);
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* Link-button list (UL) — lighter replacement for SWELL リンクリスト. */
.is-style-atp-list-buttons {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 1.2em 0 !important;
}
.is-style-atp-list-buttons li {
    list-style: none !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
.is-style-atp-list-buttons li::before { content: none !important; }
.is-style-atp-list-buttons li a {
    display: block;
    position: relative;
    padding: 14px 44px 14px 18px;
    background: var(--atpbt-accent);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.15s ease;
}
.is-style-atp-list-buttons li a:hover {
    background: #be123c;
}
.is-style-atp-list-buttons li a::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M9 6l6 6-6 6V6Z'/></svg>");
}

/* =========================================================
 * 4. Table — clean variant
 *    - body font matches surrounding text (no shrink)
 *    - DOES NOT override has-text-align-* (alignment must work)
 * ========================================================= */

.is-style-atp-table-clean table {
    border-collapse: collapse;
    width: 100%;
    font-size: inherit;
}
.is-style-atp-table-clean th,
.is-style-atp-table-clean td {
    border: 1px solid #e5e7eb;
    padding: 12px 14px;
    /* intentionally no text-align so core alignment classes win */
}
.is-style-atp-table-clean thead th {
    background: #f9fafb;
    color: #1f2937;
    font-weight: 700;
    border-bottom: 2px solid #d1d5db;
}
.is-style-atp-table-clean tbody tr:nth-child(even) td {
    background: #fafafa;
}
.is-style-atp-table-clean tfoot td {
    background: #f9fafb;
    font-weight: 600;
    border-top: 2px solid #d1d5db;
}

/* =========================================================
 * 5. Group: フルワイド (full-width breakout)
 * ========================================================= */

.is-style-atp-fullwide {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 3em max(2vw, 16px) !important;
    background: #f3f4f6;
    box-sizing: border-box;
}

/* =========================================================
 * 6. Inline formats (registered in formats.js)
 * ========================================================= */

/* text-color writes inline style; no rule needed here */

.atpbt-hl {
    background: #fef08a;
    padding: 0 2px;
    border-radius: 2px;
}

.atpbt-marker {
    background: linear-gradient(transparent 60%, #fde047 60%);
    padding: 0 1px;
}

.atpbt-marker-box {
    background: #fde047;
    padding: 2px 6px;
    border-radius: 3px;
    color: #422006;
    font-weight: 500;
}

.atpbt-code {
    background: #f3f4f6;
    color: #be123c;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}