/* ── Reset ─────────────────────────────────────────── */
.gaia-info-table table,
.gaia-info-table thead,
.gaia-info-table tbody,
.gaia-info-table tfoot,
.gaia-info-table tr,
.gaia-info-table td,
.gaia-info-table th {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* ── Table ─────────────────────────────────────────── */
/* border-radius + overflow:hidden here as a backup clip, but the real fix
   for rounded corners is border-collapse:separate below (see next
   comment) — border-collapse:collapse is spec-undefined for border-radius
   on table cells and most browsers simply never round them at all, no
   matter what the wrapper clips to. */
.gaia-info-table {
    width:         100%;
    border-radius: var(--radius-12, 12px);
    overflow:      hidden;
    margin-bottom: 1.5rem;
}

/* border-collapse:separate (not collapse) + border-spacing:0 — collapsed
   borders are explicitly spec-undefined for border-radius on table cells,
   and testing confirmed the earlier collapse-based attempt rendered
   perfectly square corners regardless of any border-radius applied
   anywhere. Separate mode uses the normal box model, so per-cell
   border-radius (below) genuinely renders. Each cell only draws its own
   right+bottom border (border-width 0 1px 1px 0); the first row adds its
   own top border and the first column adds its own left border, forming
   one non-doubled grid instead of every interior line being 2px from two
   adjacent cells each drawing all four sides. */
/* table-layout:auto (not fixed) — column widths follow actual content
   across every row instead of being locked in from the first row alone.
   Fixed layout was forcing the label column to whatever fixed/percentage
   width was set regardless of how much text it actually held, cramming
   long label text into a narrow column while a short value column sat
   mostly empty. The lw-* width presets below still work in auto layout —
   a specified width acts as a starting point that a column can still
   grow past if its content genuinely needs more room. */
.gaia-info-table table {
    border-collapse: separate;
    border-spacing:  0;
    width:           100%;
    table-layout:    auto;
}

.gaia-info-table td,
.gaia-info-table th {
    border-style:   solid;
    border-color:   var(--color-border-subtle, #ddd);
    border-width:   0 1px 1px 0;
    padding:        10px 16px;
    vertical-align: top;
    line-height:    1.5;
    word-break:     break-word;
}

.gaia-info-table table > thead:first-child > tr:first-child > th,
.gaia-info-table table > tbody:first-child > tr:first-child > td {
    border-top-width: 1px;
}

.gaia-info-table td:first-child,
.gaia-info-table th:first-child {
    border-left-width: 1px;
}

/* Corner radius on the actual outermost cells. */
.gaia-info-table table > thead:first-child > tr:first-child > th:first-child,
.gaia-info-table table > tbody:first-child > tr:first-child > td:first-child {
    border-top-left-radius: var(--radius-12, 12px);
}
.gaia-info-table table > thead:first-child > tr:first-child > th:last-child,
.gaia-info-table table > tbody:first-child > tr:first-child > td:last-child {
    border-top-right-radius: var(--radius-12, 12px);
}
.gaia-info-table table > tfoot:last-child > tr:last-child > td:first-child,
.gaia-info-table table > tbody:last-child > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--radius-12, 12px);
}
.gaia-info-table table > tfoot:last-child > tr:last-child > td:last-child,
.gaia-info-table table > tbody:last-child > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--radius-12, 12px);
}

/* Label column no longer has automatic bold/center/background — matches
   the header's own precedent: fixed, uniform styling instead of a
   per-instance choice most tables never touched. The header row keeps
   its own bold/center via .gaia-info-table__header-cell above; the body
   label column now renders identically to the value column by default.
   labelBg/labelWidth attributes and their tableClass() output are left
   in code for backward-compat (old posts' saved --lbg-* class is now a
   harmless unmatched class, same treatment as --hbg-*).

   white-space:nowrap is kept, though — removing the whole rule dropped
   this along with the bold/center, and losing it broke the point of
   table-layout:auto: a wrappable label competes with the value column on
   equal footing and can get squeezed down to an awkward 2-line wrap even
   when its own content is short (a long, unwrapped value elsewhere in the
   same column pulls width away from it). nowrap forces auto-layout to
   always reserve the label's full one-line width as a hard minimum, the
   same way the editor's separate gaia/info-row block already behaves via
   flex-shrink:0 on .gaia-info-row__label — this brings the real table in
   line with that, instead of the two visibly disagreeing on how wide a
   short label should be allowed to stay. */
.gaia-info-table td:first-child,
.gaia-info-table th:first-child {
    white-space: nowrap;
}

/* ── Label column width ────────────────────────────── */
/* No more fixed-percentage presets (was 自動/15%/22%/30%/40%, chosen per
   table) — every gaia-info-table--lw-* class now gets the same plain
   min-width safeguard, letting table-layout:auto (see .gaia-info-table
   table above) size the column from its own content instead. A percentage
   preset assumed the label column always holds short terms and the value
   column always holds the long content; that broke down the moment a
   "label" cell needed a full sentence of its own. min-width still keeps a
   short label (e.g. "test") from collapsing to an unreadably thin sliver
   just because the row next to it happens to have more text. */
.gaia-info-table--lw-auto td:first-child,
.gaia-info-table--lw-auto th:first-child,
.gaia-info-table--lw-sm   td:first-child,
.gaia-info-table--lw-sm   th:first-child,
.gaia-info-table--lw-md   td:first-child,
.gaia-info-table--lw-md   th:first-child,
.gaia-info-table--lw-lg   td:first-child,
.gaia-info-table--lw-lg   th:first-child,
.gaia-info-table--lw-xl   td:first-child,
.gaia-info-table--lw-xl   th:first-child,
.gaia-info-table .gaia-info-row__label { width: auto; min-width: 80px; }

/* ── Value column bg (global) ──────────────────────── */
.gaia-info-table--vbg-grey   td:not(:first-child),
.gaia-info-table--vbg-grey   .gaia-info-row__value  { background-color: var(--color-surface-subtle, #F5F5F5); }

.gaia-info-table--vbg-blue   td:not(:first-child),
.gaia-info-table--vbg-blue   .gaia-info-row__value  { background-color: var(--color-status-info-light, #EAF4FF); }

.gaia-info-table--vbg-green  td:not(:first-child),
.gaia-info-table--vbg-green  .gaia-info-row__value  { background-color: var(--color-status-success-light, #EAFAF1); }

.gaia-info-table--vbg-yellow td:not(:first-child),
.gaia-info-table--vbg-yellow .gaia-info-row__value  { background-color: var(--color-status-warning-light, #FEFAE0); }

/* ── Header / Footer: frontend (th/td) ───────────────
   Header background is now fixed — not a per-instance choice (was a
   6-option "ヘッダーの背景色" dropdown; see editor.js's own comment on
   why the dropdown was removed rather than just changed). No
   --color-grey-97 token exists anywhere in this project's Figma file or
   design-tokens/tokens.css (checked directly) — used the closest, only
   existing grey token instead. Dark body text, not white/inverse, since
   this grey is light.
   !important on background/font-weight: real <th> cells are also matched
   by the parent theme's .post_content th (background:#f7f7f7, specificity
   0,1,1 — beats this class-only rule's 0,1,0) and, on the first column,
   by this block's own .gaia-info-table--lbg-* th:first-child variants
   (0,2,1) — the header row must win over both. */
.gaia-info-table__header-cell {
    font-weight: var(--font-weight-bold, 700) !important;
    text-align:       center;
    background-color: var(--color-grey-92, #f7f6f0) !important;
    color: var(--color-text-body, #1a1a1a);
    border-color: var(--color-border-subtle, #ddd);
}

.gaia-info-table__footer-cell {
    font-size:        0.875em;
    text-align:       center;
}

/* ── Header / Footer: editor (flex rows) ───────────── */
.gaia-info-table__header-row,
.gaia-info-table__footer-row {
    display:    flex;
    width:      100%;
    border: 1px solid var(--color-border-subtle, #ddd);
    margin-top: -1px;
    box-sizing: border-box;
}

/* Fixed grey background here too, matching .header-cell above — this is
   the editor-preview equivalent (flex row of divs, not real th/td). */
.gaia-info-table__header-row .gaia-info-row__label,
.gaia-info-table__header-row .gaia-info-row__value {
    font-weight: var(--font-weight-bold, 700);
    background-color: var(--color-grey-92, #f7f6f0);
    color: var(--color-text-body, #1a1a1a);
}

.gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table__footer-row .gaia-info-row__value {
    font-size:        0.875em;
}

/* ── Footer bg variants ─────────────────────────────
   Frontend: td  |  Editor: .footer-row __label/__value
────────────────────────────────────────────────────── */

/* light-grey (default) */
.gaia-info-table--fbg-light-grey .gaia-info-table__footer-cell,
.gaia-info-table--fbg-light-grey .gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table--fbg-light-grey .gaia-info-table__footer-row .gaia-info-row__value {
    background-color: var(--color-surface-subtle, #f0f4f8); color: var(--color-text-body, #1A1A1A); border-color: var(--color-border-subtle, #ddd);
}

/* light-blue */
.gaia-info-table--fbg-light-blue .gaia-info-table__footer-cell,
.gaia-info-table--fbg-light-blue .gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table--fbg-light-blue .gaia-info-table__footer-row .gaia-info-row__value {
    background-color: var(--color-status-info-light, #EAF4FF); color: var(--color-status-info-dark, #1a4070); border-color: var(--color-status-info, #c5dff5);
}

/* dark-blue */
.gaia-info-table--fbg-dark-blue .gaia-info-table__footer-cell,
.gaia-info-table--fbg-dark-blue .gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table--fbg-dark-blue .gaia-info-table__footer-row .gaia-info-row__value {
    background-color: var(--color-status-info-dark, #2c5282); color: var(--color-text-inverse, #ffffff); border-color: var(--color-status-info-dark, #3a6398);
}

/* mid-blue -> brand accent-solid (distinct from dark-blue's brand-primary) */
.gaia-info-table--fbg-mid-blue .gaia-info-table__footer-cell,
.gaia-info-table--fbg-mid-blue .gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table--fbg-mid-blue .gaia-info-table__footer-row .gaia-info-row__value {
    background-color: var(--color-brand-accent-solid, #4a90d9); color: var(--color-text-inverse, #ffffff); border-color: var(--color-brand-accent-solid, #5a9fdf);
}

/* dark-grey */
.gaia-info-table--fbg-dark-grey .gaia-info-table__footer-cell,
.gaia-info-table--fbg-dark-grey .gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table--fbg-dark-grey .gaia-info-table__footer-row .gaia-info-row__value {
    background-color: var(--color-status-neutral-dark, #4a5568); color: var(--color-text-inverse, #ffffff); border-color: var(--color-status-neutral-dark, #5a6478);
}

/* white */
.gaia-info-table--fbg-white .gaia-info-table__footer-cell,
.gaia-info-table--fbg-white .gaia-info-table__footer-row .gaia-info-row__label,
.gaia-info-table--fbg-white .gaia-info-table__footer-row .gaia-info-row__value {
    background-color: var(--color-surface-page, #ffffff); color: var(--color-text-body, #1A1A1A); border-color: var(--color-border-subtle, #ddd);
}

/* ── Editor: setup screen ──────────────────────────── */
.gaia-info-table-setup {
    padding:    24px;
    border:     2px dashed var(--color-border-subtle, #ddd);
    text-align: center;
}

.gaia-info-table-setup strong {
    display:       block;
    margin-bottom: 16px;
    font-size:     1em;
}

.gaia-info-table-setup .components-base-control {
    max-width:  120px;
    margin:     0 auto 16px;
    text-align: left;
}

.gaia-info-table-setup__field {
    margin-bottom: 16px;
}

.gaia-info-table-setup__field > label {
    display:       block;
    margin-bottom: 6px;
    font-weight:   var(--font-weight-bold, 700);
    font-size:     0.875em;
}

.gaia-info-table-setup__col-btns {
    display: flex;
    gap:     8px;
    justify-content: center;
}

/* ── Editor: InnerBlocks wrapper fixes ─────────────── */
.gaia-info-table .block-editor-block-list__layout {
    padding: 0 !important;
    margin:  0 !important;
}

.gaia-info-table .block-editor-block-list__block {
    margin:    0 !important;
    padding:   0 !important;
    width:     100% !important;
    max-width: 100% !important;
}

/* ── Editor: shared-column grid across rows ──────────
   The frontend's real <table> naturally gives every row in one column
   the same width; the editor's body rows are separate gaia/info-row
   InnerBlocks instances (plus a separately-rendered header/footer row),
   each laid out independently with no relationship to its siblings'
   widths — a short "test" row and a long-content row could end up with
   completely different label widths stacked on top of each other.
   Subgrid threads one shared column definition down through WP's own
   auto-generated InnerBlocks wrapper divs so every row's cells actually
   align to the same columns, matching what a real <table> already does
   for free. Scoped to .wp-block — that class only ever appears on the
   editor's own block wrapper, never in frontend-rendered HTML, so this
   never touches the real <table> at all. */
.gaia-info-table.wp-block {
    display: grid;
}

.gaia-info-table.wp-block > .gaia-info-table-setup,
.gaia-info-table.wp-block > .gaia-info-table__header-row,
.gaia-info-table.wp-block > .block-editor-inner-blocks,
.gaia-info-table.wp-block .block-editor-block-list__layout,
.gaia-info-table.wp-block .gaia-info-row,
.gaia-info-table.wp-block .block-list-appender,
.gaia-info-table.wp-block .gaia-info-table__add-row-btn,
.gaia-info-table.wp-block > .gaia-info-table__footer-row {
    grid-column: 1 / -1;
}

/* .block-list-appender is WP-core markup with two problems for this grid:
   (1) it doesn't stretch to its grid area by default the way a plain
   block-level div would, so the button underneath it shrinks to its own
   "+ 行を追加" label text instead of the full table width; (2) WP gives it
   position:absolute with a JS-computed `top` (meant to float the "+"
   hint over ordinary block-stacked content without disturbing layout) —
   under this grid, that positioning math no longer matches where things
   actually are, so it lands overlapping the last row's cell instead of
   below it. Forcing position:static drops it back into normal grid flow,
   where it auto-places into a genuine new row like everything else here. */
.gaia-info-table.wp-block .block-list-appender {
    position: static;
    width:    100%;
}

.gaia-info-table.wp-block > .gaia-info-table__header-row,
.gaia-info-table.wp-block > .block-editor-inner-blocks,
.gaia-info-table.wp-block .block-editor-block-list__layout,
.gaia-info-table.wp-block .gaia-info-row,
.gaia-info-table.wp-block > .gaia-info-table__footer-row {
    display:              grid;
    grid-template-columns: subgrid;
}

.gaia-info-table--cols-2.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(1, 1fr); }
.gaia-info-table--cols-3.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(2, 1fr); }
.gaia-info-table--cols-4.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(3, 1fr); }
.gaia-info-table--cols-5.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(4, 1fr); }
.gaia-info-table--cols-6.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(5, 1fr); }
.gaia-info-table--cols-7.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(6, 1fr); }
.gaia-info-table--cols-8.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(7, 1fr); }
.gaia-info-table--cols-9.wp-block  { grid-template-columns: minmax(80px, max-content) repeat(8, 1fr); }
.gaia-info-table--cols-10.wp-block { grid-template-columns: minmax(80px, max-content) repeat(9, 1fr); }

/* ── Add row button ─────────────────────────────────── */
.gaia-info-table__add-row-btn {
    display:    block;
    width:      100%;
    margin-top: 4px;
    border:     1px dashed var(--color-border-subtle, #ddd) !important;
    background: transparent !important;
    color:      var(--color-text-muted, #999999) !important;
    text-align: center;
    padding:    8px !important;
    cursor:     pointer;
}

.gaia-info-table__add-row-btn:hover {
    border-color: var(--color-text-muted, #999) !important;
    color:        var(--color-text-body, #1A1A1A) !important;
}

/* ── Mobile ───────────────────────────────────────────
   Stays a real <table> — this used to convert every row into a stacked
   "label above value" card (display:block on table/tr/td, full-width
   cells, the header row repeating itself as its own separate block).
   Confirmed via a real screenshot on an actual phone that this reads as
   broken, not just "different": two header cells stacking on top of
   each other with no visible column relationship, a label sitting with
   no visible connection to its own value underneath it — the row/column
   structure a table exists to show was completely gone. Letting the
   table scroll horizontally instead (the standard technique for a data
   table that's wider than its container) keeps the exact same row/
   column relationship as desktop at every width — nothing to relearn
   between mobile and desktop, and nothing breaks even for a table with
   more columns than a narrow screen can show at once. */
@media ( max-width: 768px ) {
    .gaia-info-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gaia-info-table td,
    .gaia-info-table th {
        padding: 8px 12px;
    }
}