/* Create — the compose screen: Create New / Add Link, PUBLISH TO, per-platform
   options and publish results.

   Lives in its own file because mobile.html is one huge template: two people
   editing it at once cannot merge, and the last save silently wins the whole
   file. Everything Create owns belongs here so it can be edited on its own. */

/* ---- Create New / Add Link mode toggle ----
   color-mix against --text-color keeps these correct in light and dark
   without a second set of rules. */
.bytes-source-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.bytes-source-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 13px;
    border-radius: 14px;
    cursor: pointer;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.bytes-source-mode-btn.is-active {
    border-color: color-mix(in srgb, var(--primary-color) 65%, transparent);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-color, var(--bg-primary)));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.bytes-source-mode-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-secondary);
}
.bytes-source-mode-btn.is-active .bytes-source-mode-icon {
    background: var(--primary-color);
    color: var(--bg-primary);
}
.bytes-source-mode-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bytes-source-mode-title { font-size: 13px; font-weight: 800; }
.bytes-source-mode-btn.is-active .bytes-source-mode-title { color: var(--primary-color); }
.bytes-source-mode-meta { font-size: 11px; color: var(--text-secondary); }
.bytes-caption-count { float: right; font-size: 11px; color: var(--text-secondary); }

/* ---- staged media thumbnails (Create New) ----
   The mock shows attached media as tiles with a remove control and an
   "Add more" tile, rather than a text-only filename row. */
.bytes-media-tiles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.bytes-media-tile {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    flex: 0 0 auto;
}
.bytes-media-tile img,
.bytes-media-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bytes-media-tile-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
html body .bytes-media-tile-remove,
html body .bytes-media-tile-remove * {
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.bytes-media-tile-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    font-size: 10px;
    font-weight: 700;
}
html body .bytes-media-tile-badge {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.bytes-media-tile-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border-style: dashed;
    border-width: 1.5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.bytes-media-tile-add i { font-size: 15px; }

/* ---- PUBLISH TO ---- */
.bytes-publish-section { margin-bottom: 30px; }
.bytes-publish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.bytes-publish-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.bytes-publish-selectall {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
}
.bytes-publish-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.bytes-publish-tile {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color);
    transition: border-color 0.18s ease, background 0.18s ease;
}
/* Green rather than --primary-color: an athlete's brand colour can be
   white or near-background, which left selected looking unselected. */
.bytes-publish-tile.is-selected {
    border-color: #16a34a;
    background: color-mix(in srgb, #16a34a 12%, var(--surface-color, var(--bg-primary)));
}
.bytes-publish-tile.is-disconnected { cursor: pointer; }
.bytes-publish-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    overflow: hidden;
}
.bytes-publish-icon img { width: 100%; height: 100%; object-fit: cover; }
/* Marks are white in the SVG source (they sit on dark/branded chips).
   The light-accent theme forces `fill: #000 !important` on every
   descendant of body, which painted these black-on-black — so the
   publish chips opt out explicitly. */
.bytes-publish-icon svg { width: 17px; height: 17px; display: block; }
html body .bytes-publish-icon svg,
html body .bytes-publish-icon svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* Instagram is the one outline mark: stroke it, don't flood it. */
html body .bytes-publish-icon svg.pt-outline rect,
html body .bytes-publish-icon svg.pt-outline circle {
    fill: none !important;
    stroke: #fff !important;
}
html body .bytes-publish-icon svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}
.bytes-publish-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bytes-publish-name { font-size: 12.5px; font-weight: 700; }
.bytes-publish-handle {
    font-size: 10.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bytes-publish-handle.is-connect { color: var(--primary-color); font-weight: 700; }
/* Unselected is an empty ring — no glyph at all, so it can't read as
   already-ticked. Selected fills in and shows the check. */
.bytes-publish-check {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--text-color) 26%, transparent);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bytes-publish-check i { display: none; }
.bytes-publish-tile.is-selected .bytes-publish-check {
    background: #16a34a;
    border-color: #16a34a;
    transform: scale(1.04);
}
.bytes-publish-tile.is-selected .bytes-publish-check i { display: block; }
html body .bytes-publish-tile.is-selected .bytes-publish-check i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Not-connected tiles get a chevron, not a checkbox — tapping them
   starts a connection rather than selecting a destination. */
.bytes-publish-go {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-secondary);
}
.bytes-publish-note {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.bytes-publish-note.is-warn { color: #f0a500; }

/* Media Type pills: two columns, five rows -- ten destinations read as a
   list, not a scattered six-across grid. */
/* #new-custom-modal rules in mobile.html target these buttons with an id, so
   match that weight here or the layout below never applies. */
#new-custom-modal .bytes-media-type-grid,
.bytes-media-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
/* Media Type reads like the PUBLISH TO tiles it sits under: the same surface,
   the same hairline, the same left-aligned mark-then-label. The markup ships
   inline styles and the modal targets these through #new-custom-modal, so the
   weight has to be matched and the inline background overridden outright. */
#new-custom-modal .bytes-media-type-grid > button,
.bytes-media-type-grid > button {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 11px 12px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%) !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.18s ease, background 0.18s ease;
    /* The shared rule sets overflow:hidden, which clipped the marks away. */
    overflow: visible !important;
}

/* Selected: a tinted surface and a coloured edge in the platform's own colour,
   which the script hands over as --media-active-color. One quiet state rather
   than a 2px border, a triple shadow and a lift. */
#new-custom-modal .bytes-media-type-grid > button.is-media-selected,
.bytes-media-type-grid > button.is-media-selected {
    border-color: color-mix(in srgb, var(--media-active-color, #16a34a) 70%, transparent) !important;
    background: color-mix(in srgb, var(--media-active-color, #16a34a) 10%,
                          var(--surface-color, var(--bg-primary))) !important;
    font-weight: 700 !important;
}
/* Sized like the publish tiles' icon, just smaller: a fixed square that cannot
   be squeezed by a long label, with the glyph centred inside it. */
#new-custom-modal .byte-pill-mark,
.byte-pill-mark {
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex: 0 0 26px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
#new-custom-modal .byte-pill-mark svg,
.byte-pill-mark svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: block;
}
/* The marks are white in the SVG source because they sit on a brand colour,
   and the light-accent theme forces fill and stroke to #000 on every
   descendant of body. That painted the glyphs black on their own chips --
   TikTok and X, both black, went to solid squares. Opt out, the way the
   publish tiles already do. */
html body .byte-pill-mark svg,
html body .byte-pill-mark svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* The outline marks are drawn with strokes, so they need the stroke back. */
html body .byte-pill-mark svg.pt-outline,
html body .byte-pill-mark svg.pt-outline *,
html body .byte-pill-mark svg.pt-stroke,
html body .byte-pill-mark svg.pt-stroke * {
    fill: none !important;
    stroke: #fff !important;
}
html body .byte-pill-mark svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}

/* The way out of "you have 0 left" — inline in the sentence, so the
   instruction and the action are the same words. */
.byte-publish-buy-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

/* Buy sheet.
 *
 * Plans are cards here rather than hairline rows: the sheet has to carry a
 * selected state and a sticky action, and a ring around the picked card says
 * that where a rule between rows cannot. The accent is the one saturated
 * colour on the screen, spent only on selection and the connected dots.
 *
 * Colours come from the theme vars, not the flat greys of the mock, so the
 * sheet holds up in dark as well as light.
 */
#bytes-store-sheet {
    --byte-store-accent: #0e9c8a;
    position: fixed;
    inset: 0;
    z-index: 140000;
    pointer-events: none;
}
#bytes-store-sheet.is-open { pointer-events: auto; }
#bytes-store-sheet.is-open .bytes-sheet-scrim { opacity: 1; }
#bytes-store-sheet.is-open .bytes-sheet-panel { transform: translateY(0); }

/* The panel is a column: head and tabs pinned, plans scrolling, CTA on the
   floor. Capped so a tall phone does not stretch the sheet to full height. */
#bytes-store-sheet .bytes-sheet-panel {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
#bytes-store-sheet .bytes-sheet-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#bytes-store-sheet .bytes-sheet-head {
    padding: 10px 20px 0;
    align-items: flex-start;
}
#bytes-store-sheet .bytes-sheet-head strong { font-size: 26px; letter-spacing: -0.02em; }
#bytes-store-sheet .bytes-sheet-head small { margin-top: 3px; font-size: 13px; }

.bytes-sheet-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bytes-sheet-close:active { opacity: 0.5; }

/* Connected accounts, six across. A live account gets the accent dot; one
   that is not connected keeps its slot but stays grey, so the row doubles as
   a reminder of what is still unhooked. */
.byte-store-strip {
    display: flex;
    gap: 6px;
    padding: 14px 20px 0;
}
.byte-store-chip {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.byte-store-chip .byte-store-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
}
/* The brand mark, in the platform's own colour when that account is hooked up.
   Not connected keeps the shape but drops to grey, so the row reads as status
   rather than as a logo strip. */
.byte-store-mark {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow must stay visible: these marks are drawn to the edge of their
       box and a hidden overflow shears them, the way it clipped the pills. */
    overflow: visible;
    background: color-mix(in srgb, var(--text-color) 25%, transparent);
}
/* A connected account carries its real brand colour; the rest stay muted, so
   the row reads as what is hooked up rather than as a strip of logos. */
/* Every mark keeps its brand colour. Which accounts are connected is carried by
   the dot under each one, not by draining the logos.
   TikTok, X and Threads are all black, which disappears against a dark sheet,
   so on dark the marks get a hairline to sit their shape against. */
[data-theme="dark"] .byte-store-mark,
[data-theme="dark-accent"] .byte-store-mark,
body[data-theme="dark"] .byte-store-mark,
body[data-theme="dark-accent"] .byte-store-mark {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.byte-store-mark svg { width: 14px; height: 14px; display: block; }
/* Same treatment as the publish chips: these marks are white in the SVG source
   because they sit on a brand colour, and the themes force fill:#000 on every
   descendant of body -- which paints them black-on-black and floods the one
   outline mark into a solid blob. Opt out explicitly. */
html body .byte-store-mark svg,
html body .byte-store-mark svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* Instagram is the one outline mark: stroke it, don't flood it. */
html body .byte-store-mark svg.pt-outline rect,
html body .byte-store-mark svg.pt-outline circle {
    fill: none !important;
    stroke: #fff !important;
}
html body .byte-store-mark svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}
.byte-store-chip i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 22%, transparent);
}
.byte-store-chip.is-live .byte-store-tag { color: var(--text-color); }
.byte-store-chip.is-live i { background: var(--byte-store-accent); }

/* Segmented control: one-time against monthly. */
.byte-store-tabs {
    margin: 16px 20px 0;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.byte-store-tabs button {
    padding: 9px 0;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
html body .byte-store-tabs button.is-on {
    background: var(--bg-primary);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.byte-store-rows {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 20px 0;
    gap: 12px;
}
/* A badged card carries its own top margin. The badge is positioned above the
   card edge, so without this the scroller's overflow shears it in half --
   padding on the scroller cannot help, the badge escapes the card either way. */
.byte-store-plan:has(.byte-store-badge) { margin-top: 9px; }

.byte-store-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1.5px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    background: var(--bg-primary);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.byte-store-plan:active { opacity: 0.7; }
html body .byte-store-plan.is-picked {
    border-color: var(--byte-store-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--byte-store-accent) 18%, transparent);
}
.byte-store-plan-top,
.byte-store-plan-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.byte-store-plan-top strong {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.byte-store-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.byte-store-plan-sub small {
    font-size: 13px;
    color: var(--text-secondary);
}
.byte-store-unit {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.byte-store-badge {
    position: absolute;
    top: -9px;
    left: 14px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--byte-store-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.byte-store-fine {
    padding: 4px 10px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* The action sits on the floor of the sheet, clear of the home indicator. */
.byte-store-foot {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    background: var(--bg-primary);
}
/* Deliberately not background:var(--text-color);color:var(--bg-primary). Those
   two do not move together -- the light theme overrides --text-color without
   restating --bg-primary, which leaves it black and paints black on black. The
   button is a solid dark slab with white on it in both themes. */
.byte-store-cta {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 15px;
    background: #111214;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.byte-store-cta:active { opacity: 0.75; }
/* The themes paint every element through a blanket [data-theme] * rule that
   sets -webkit-text-fill-color as well as color, and text-fill beats colour
   whatever the specificity. Matching that weight and setting both is what it
   takes to keep the label legible on its own slab. */
html body[data-theme] #bytes-store-sheet .byte-store-cta,
html [data-theme] #bytes-store-sheet .byte-store-cta,
html body #bytes-store-sheet .byte-store-cta {
    background: #111214;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* On a dark sheet the dark slab vanishes into it, so flip to white on black. */
html body[data-theme="dark"] #bytes-store-sheet .byte-store-cta,
html body[data-theme="dark-accent"] #bytes-store-sheet .byte-store-cta,
html [data-theme="dark"] #bytes-store-sheet .byte-store-cta,
html [data-theme="dark-accent"] #bytes-store-sheet .byte-store-cta {
    background: #ffffff;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
}


/* Pay step: wallet button, card fields, one solid action. */
.byte-pay-card { margin: 18px 0 0; }
/* Same trap as the buy sheet's action: --text-color and --bg-primary do not
   move together, and the themes paint through a blanket [data-theme] * rule
   that sets -webkit-text-fill-color, which beats colour whatever the
   specificity. State the colours outright, at that weight, both properties. */
.byte-pay-submit {
    width: 100%;
    margin: 18px 0 0;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
}
html body[data-theme] #bytes-store-sheet .byte-pay-submit,
html [data-theme] #bytes-store-sheet .byte-pay-submit,
html body #bytes-store-sheet .byte-pay-submit {
    background: #111214;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body[data-theme="dark"] #bytes-store-sheet .byte-pay-submit,
html body[data-theme="dark-accent"] #bytes-store-sheet .byte-pay-submit,
html [data-theme="dark"] #bytes-store-sheet .byte-pay-submit,
html [data-theme="dark-accent"] #bytes-store-sheet .byte-pay-submit {
    background: #ffffff;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
}
.byte-pay-submit:disabled { opacity: 0.5; }
.byte-pay-status {
    margin: 12px 0 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-align: center;
    min-height: 16px;
}
.byte-pay-status.is-error { color: #e5484d; }

/* ---- per-platform choices and scheduling ----
   Held apart by space rather than boxed: the only line drawn is the one
   separating one platform's choices from the next. */
.bytes-publish-options { margin-top: 26px; display: flex; flex-direction: column; gap: 24px; }
.bytes-publish-opt-group { display: flex; flex-direction: column; gap: 15px; }
.bytes-publish-opt-group + .bytes-publish-opt-group {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
/* Each platform's block arrives on its own beat, so choosing a platform
   reads as the options unfolding rather than the page jumping. */
.bytes-publish-opt-group {
    animation: bytesPublishRise 380ms cubic-bezier(.2,.8,.2,1) both;
}
.bytes-publish-opt-group:nth-child(2) { animation-delay: 60ms; }
.bytes-publish-opt-group:nth-child(3) { animation-delay: 120ms; }
.bytes-publish-opt-group:nth-child(4) { animation-delay: 180ms; }
@keyframes bytesPublishRise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bytes-publish-opt-group { animation: none; }
    .bytes-publish-opt-choice button,
    .bytes-publish-sched-times button,
    .bytes-publish-sched-days button { transition: none; }
}
.bytes-publish-opt-group h6 {
    margin: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bytes-publish-opt-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13.5px;
}
.bytes-publish-opt-toggle input { width: 20px; height: 20px; accent-color: var(--text-color); }
.bytes-publish-opt-choice { display: flex; flex-direction: column; gap: 8px; }
.bytes-publish-opt-choice > span { font-size: 13.5px; }
.bytes-publish-opt-choice > div { display: flex; flex-wrap: wrap; gap: 7px; }
.bytes-publish-opt-choice button,
.bytes-publish-sched-times button,
.bytes-publish-sched-days button {
    /* The app styles buttons globally with a fill and a shadow; these
       are chips on an open page, so they carry neither. */
    box-shadow: none !important;
    text-shadow: none !important;
    appearance: none;
}
.bytes-publish-opt-choice button,
.bytes-publish-sched-times button {
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    border-radius: 999px;
    padding: 8px 13px;
    background: transparent;
    color: var(--text-color);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    /* Colour and border ease; the press is a quick spring. */
    transition: background-color 260ms cubic-bezier(.2,.8,.2,1),
                border-color 260ms cubic-bezier(.2,.8,.2,1),
                color 200ms ease,
                transform 140ms cubic-bezier(.2,.8,.2,1);
}
.bytes-publish-opt-choice button:active,
.bytes-publish-sched-times button:not(:disabled):active,
.bytes-publish-sched-days button:active { transform: scale(0.94); }
/* Qualified with html and the modal id to outrank the theme rule
   `html[data-theme="light"] body .modal *`, which paints every
   descendant black and would hide a white label on a black chip. */
html body #new-custom-modal .bytes-publish-opt-choice button.is-on,
html body #new-custom-modal .bytes-publish-sched-times button.is-on,
html body #new-custom-modal .bytes-publish-sched-days button.is-on,
html body #new-custom-modal .bytes-publish-sched-days button.is-on b,
html body .bytes-publish-opt-choice button.is-on,
html body .bytes-publish-sched-times button.is-on,
html body .bytes-publish-sched-days button.is-on,
html body .bytes-publish-sched-days button.is-on b {
    border-color: #16161c !important;
    background: #16161c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 800;
}
html body #new-custom-modal .bytes-publish-sched-days button.is-on i,
html body .bytes-publish-sched-days button.is-on i {
    color: rgba(255, 255, 255, 0.64) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.64) !important;
}
.bytes-publish-sched-times button:disabled { opacity: 0.3; cursor: default; }
.bytes-publish-opt-text { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
/* A rule underneath rather than a filled field. Qualified with the modal
   id because `#new-custom-modal input` paints a dark box, which reads
   as a container on a page built out of space. */
html[data-theme] body #new-custom-modal input[data-publish-field],
html[data-theme] body [id*="modal"] input[data-publish-field],
html body #new-custom-modal input[data-publish-field],
html body input[data-publish-field] {
    border: 0 !important;
    border-bottom: 1px solid rgba(127, 127, 137, 0.34) !important;
    border-radius: 0 !important;
    padding: 7px 0 !important;
    /* Explicit rather than themed: --text-color is black under the
       light theme, and a themed fill here paints the field solid. */
    background: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: inherit;
    font-size: 15px;
}
html[data-theme] body #new-custom-modal input[data-publish-field]:focus,
html[data-theme] body [id*="modal"] input[data-publish-field]:focus,
html body input[data-publish-field]:focus {
    outline: 0 !important;
    border-bottom-color: currentColor !important;
}
.bytes-publish-opt-text input:focus { outline: 0; border-bottom-color: var(--text-color); }

/* The "⋯" that opens a platform's own settings. */
.bytes-publish-slot { position: relative; display: flex; }
.bytes-publish-slot .bytes-publish-tile { flex: 1; }
.bytes-publish-more {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 27px;
    height: 27px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    background: var(--surface-color, var(--bg-primary));
    color: var(--text-secondary);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--text-color) 12%, transparent);
    z-index: 2;
}
.bytes-publish-more:active { transform: scale(0.92); }

/* ---- platform options sheet ---- */
#bytes-options-sheet {
    position: fixed;
    inset: 0;
    z-index: 140000;
    pointer-events: none;
}
#bytes-options-sheet.is-open { pointer-events: auto; }
.bytes-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 220ms ease;
}
#bytes-options-sheet.is-open .bytes-sheet-scrim { opacity: 1; }
.bytes-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(.2, .9, .2, 1);
    max-height: 82vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
}
#bytes-options-sheet.is-open .bytes-sheet-panel { transform: translateY(0); }
.bytes-sheet-grab {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
    margin: 10px auto 4px;
}
.bytes-sheet-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px 16px;
}
.bytes-sheet-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bytes-sheet-head strong { font-size: 16px; font-weight: 800; }
.bytes-sheet-head small { font-size: 12px; color: var(--text-secondary); }
.bytes-sheet-done {
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    cursor: pointer;
    padding: 6px 2px;
}
.bytes-sheet-rows { padding: 0 18px; display: flex; flex-direction: column; }
.bytes-sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    font-size: 15px;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
}
.bytes-sheet-row.is-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.bytes-sheet-row.is-stack > span { font-size: 13px; color: var(--text-secondary); }
.bytes-sheet-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.bytes-sheet-choices button {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    background: color-mix(in srgb, var(--text-color) 4%, transparent);
    color: var(--text-color);
}
html body .bytes-sheet-choices button.is-on {
    background: #16161c !important;
    border-color: #16161c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.bytes-sheet-input {
    width: 100%;
    background: color-mix(in srgb, var(--text-color) 4%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent) !important;
    border-radius: 12px !important;
    padding: 12px 13px !important;
    font-size: 15px !important;
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    box-sizing: border-box;
}
/* iOS-style switch: the checkbox itself is hidden behind it. */
.bytes-sheet-switch {
    position: relative;
    width: 49px;
    height: 30px;
    flex: 0 0 49px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 16%, transparent);
    transition: background 200ms ease;
}
.bytes-sheet-switch.is-on { background: #16a34a; }
.bytes-sheet-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.bytes-sheet-switch i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    transition: transform 200ms cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}
.bytes-sheet-switch.is-on i { transform: translateX(19px); }

/* ---- per-platform publish results ---- */
.bytes-publish-results { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.bytes-publish-result {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    padding: 9px 11px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
}
.bytes-publish-result-name { font-weight: 700; flex: 0 0 auto; }
.bytes-publish-result-msg { color: var(--text-secondary); flex: 1; min-width: 0; }
.bytes-publish-result.is-ok .bytes-publish-result-icon { color: #22c55e; }
.bytes-publish-result.is-fail .bytes-publish-result-icon { color: #ef4444; }
.bytes-publish-result.is-pending .bytes-publish-result-icon { color: var(--text-secondary); }
.bytes-publish-result.is-pending { opacity: 0.85; }
.bytes-publish-result a { color: var(--primary-color); text-decoration: none; font-weight: 700; }

.bytes-bloc-dropdown {
    position: relative;
    width: 100%;
}
.bytes-bloc-dropdown-btn {
    width: 100%;
    text-align: left;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 18px;
    padding: 13px 46px 13px 14px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--text-color) 8%, transparent);
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.bytes-bloc-dropdown-btn::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    transform: translateY(-50%);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.bytes-bloc-dropdown.is-open .bytes-bloc-dropdown-btn {
    border-color: color-mix(in srgb, var(--text-color) 20%, transparent);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--text-color) 12%, transparent);
}
.bytes-bloc-dropdown.is-open .bytes-bloc-dropdown-btn::after {
    transform: translateY(-50%) rotate(180deg);
    background: var(--text-primary, var(--text-color));
    color: var(--bg-primary);
}
.bytes-bloc-dropdown-btn .bloc-drop-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bytes-bloc-dropdown-btn .bloc-drop-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bytes-bloc-dropdown-btn .bloc-drop-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    background: var(--text-primary, var(--text-color));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--text-color) 12%, transparent);
    overflow: visible;
}
/* Same opt-out as the pills: white marks on a brand chip, and the light-accent
   theme paints fill and stroke black on every descendant of body. */
.bytes-bloc-dropdown-btn .bloc-drop-icon svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
}
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-outline,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-outline *,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-stroke,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-stroke * {
    fill: none !important;
    stroke: #fff !important;
}
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}
.bytes-bloc-dropdown-btn .bloc-drop-meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .bytes-bloc-dropdown-btn,
[data-theme="light-accent"] .bytes-bloc-dropdown-btn {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
[data-theme="light"] .bytes-bloc-dropdown-btn::after,
[data-theme="light-accent"] .bytes-bloc-dropdown-btn::after {
    color: rgba(15,23,42,0.56);
}