/***********************************************************************
 *      c_yui_shell.css — Layers + zones + nav layouts
 *
 *      Depends on Bulma being loaded (uses .tabs, .menu, .level, is-*, etc.)
 ***********************************************************************/

/*============================================================
 *      Native control scheme
 *
 *      The browser draws the ornaments of native controls itself —
 *      number-input spinners, the select chevron, scrollbars, the
 *      date picker — and picks their colours from `color-scheme`,
 *      NOT from the background/color we set. Nobody declared it, so
 *      they rendered light in a dark app whatever the CSS said.
 *      Bulma flips its palette on [data-theme]; this makes the
 *      browser's own chrome follow the same switch.
 *============================================================*/
/*  No [data-theme] is the "system" theme: Bulma renders per
 *  prefers-color-scheme, so `light dark` — "supports both, follow the
 *  OS" — is what tracks it. Pinning `light` here would force light
 *  controls inside a system-dark app: the very bug this fixes. */
:root {
    color-scheme: light dark;
}
:root[data-theme="light"] {
    color-scheme: light;
}
:root[data-theme="dark"] {
    color-scheme: dark;
}

/*============================================================
 *      Root + layers
 *============================================================*/
.yui-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}
.yui-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.yui-layer > * {
    pointer-events: auto;
}

.yui-layer-base         { z-index: 1;   }
.yui-layer-overlay      { z-index: 15;  }
.yui-layer-popup        { z-index: 20;  }
.yui-layer-modal        { z-index: 99;  }
.yui-layer-notification { z-index: 120; }
.yui-layer-loading      { z-index: 150; }

.yui-layer-notification,
.yui-layer-loading {
    pointer-events: none;
}
.yui-layer-loading.is-active,
.yui-layer-modal.is-active { pointer-events: auto; }

/*============================================================
 *      Base grid (zones)
 *
 *      grid-template-areas:
 *          top     top     top
 *          left    topsub  right
 *          left    center  right
 *          botsub  botsub  botsub
 *          bottom  bottom  bottom
 *
 *      `top-sub` sits at the TOP OF THE CONTENT column (above
 *      `center`), not as a full-width band — so on desktop the
 *      secondary nav (tabs) does not span over the `left` primary
 *      menu, which keeps its full height beside the content.  On
 *      mobile `left`/`right` are hidden, their `auto` columns
 *      collapse to 0, and `top-sub`/`center` take the full width.
 *============================================================*/
.yui-base-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "top    top    top"
        "left   topsub right"
        "left   center right"
        "botsub botsub botsub"
        "bottom bottom bottom";
    width: 100%;
    height: 100%;
}

.yui-zone {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}
.yui-zone-top,
.yui-zone-bottom,
.yui-zone-top-sub,
.yui-zone-bottom-sub {
    overflow: hidden;
}
.yui-zone-left,
.yui-zone-right {
    border-inline: 1px solid var(--bulma-border-weak, #dbdbdb);
}
.yui-zone-top,
.yui-zone-top-sub {
    border-bottom: 1px solid var(--bulma-border-weak, #dbdbdb);
}
.yui-zone-bottom,
.yui-zone-bottom-sub {
    border-top: 1px solid var(--bulma-border-weak, #dbdbdb);
}

/*  The center zone is a stage: its routed gobj $container fills it.
 *  flex-shrink MUST be 0: with shrink:1 + min-height:0 a view whose
 *  content is taller than the zone gets shrunk below its content,
 *  the content overflows the (short) box with no scrollbar, and the
 *  view background only covers that short box (white/blank below).
 *  shrink:0 → short content: flex-grow fills the zone (bg covers
 *  all); tall content: the box keeps its content height and the
 *  zone (overflow:auto) scrolls. Correct at every screen size. */
.yui-zone-center > * {
    flex: 1 0 auto;
    min-height: 0;
}

/*============================================================
 *      Show-on visibility helpers
 *
 *      Bulma has is-hidden-mobile/-tablet/-desktop/-widescreen/-fullhd
 *      but does NOT have "tablet-only" or "desktop-only" hiders per
 *      single breakpoint slice.  Define ours.
 *============================================================*/
@media (max-width: 768px) {
    .yui-hidden-mobile { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1023px) {
    .yui-hidden-tablet-only { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1215px) {
    .yui-hidden-desktop-only { display: none !important; }
}
@media (min-width: 1216px) and (max-width: 1407px) {
    .yui-hidden-widescreen-only { display: none !important; }
}
@media (min-width: 1408px) {
    .yui-hidden-fullhd { display: none !important; }
}

/*============================================================
 *      Nav layouts
 *============================================================*/

/*--- vertical (Bulma .menu) ---*/
.yui-nav-vertical {
    width: 100%;
}
.yui-nav-vertical .menu-list a { display: flex; align-items: center; gap: 0.5rem; }
.yui-nav-vertical .yui-nav-label { white-space: nowrap; }

/*--- icon-bar (bottom/top icon bar) ---*/
/*  Distribute-or-scroll: items grow to share spare width but never
 *  shrink below their content (flex: 1 0 auto); when they don't fit the
 *  bar scrolls horizontally. justify-content must stay flex-start —
 *  with space-around + overflow the leading items get clipped past the
 *  left edge and become unreachable. */
.yui-nav-iconbar {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0;
    padding: 0.25rem 0;
    width: 100%;
    background: var(--bulma-scheme-main, #fff);
    overflow-x: auto;
    scrollbar-width: thin;
}
.yui-nav-iconbar .level-item { flex: 1 0 auto; justify-content: center; }
.yui-nav-iconbar .yui-nav-label { white-space: nowrap; }
.yui-nav-iconbar .yui-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    gap: 0.125rem;
    min-width: 0;
    line-height: 1.1;
    text-align: center;
    color: var(--bulma-text, inherit);
    text-decoration: none;
    border-radius: 0.375rem;
}
.yui-nav-iconbar .yui-nav-item.is-active,
.yui-nav-iconbar li.is-active > .yui-nav-item {
    background-color: var(--bulma-link, #485fc7);
    color: var(--bulma-link-invert, #fff);
}

/*--- tabs (Bulma .tabs) ---*/
.yui-nav-tabs .tabs ul { flex-wrap: wrap; }

/*  Secondary-nav tab strip (top-sub zone): Bulma gives `.tabs:not(:last-child)`
 *  a 1.5rem block-spacing margin-bottom, which steals content height on every
 *  view (worst on mobile). The zone already has its own bottom border for
 *  separation, so drop the margin. Specificity (3 classes) beats Bulma's rule. */
.yui-zone-top-sub .yui-nav-tabs.tabs {
    margin-bottom: 0.25rem;
}

/*--- closable tab: trailing ✕ affordance (item.closable) ---*/
.yui-nav-close {
    opacity: 0.55;
    cursor: pointer;
    border-radius: 3px;
}
.yui-nav-close:hover {
    opacity: 1;
    background: var(--bulma-danger, #f14668);
    color: #fff;
}

/*--- per-item state class (item.class) — generic disconnected tint ---*/
.yui-nav-tabs .tabs li.yui-nav-disconnected a {
    color: var(--bulma-danger-on-scheme, var(--bulma-danger, #f14668));
}

/*--- cards (section-index landing grid, mounted as a stage view) ---*/
.yui-nav-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    width: 100%;
    align-content: start;
}
.yui-nav-cards .yui-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    border: 1px solid var(--bulma-border-weak, #dbdbdb);
    border-radius: 0.5rem;
    background: var(--bulma-scheme-main, #fff);
    color: var(--bulma-text, inherit);
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}
/*  yui_icons are 1em CSS masks: font-size scales them. */
.yui-nav-cards .yui-nav-card .icon {
    font-size: 1.5rem;
}
.yui-nav-cards .yui-nav-card:hover,
.yui-nav-cards .yui-nav-card:focus-visible {
    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
}
.yui-nav-cards .yui-nav-card.is-active {
    border-color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
}
/*  Dimmed, not erased. WCAG exempts a DISABLED control from its
 *  contrast minimum, and half opacity is 2.85:1 in light -- but a nav
 *  entry you cannot reach is one you still have to be able to READ, or
 *  it is a door with no sign. 0.7 is 4.96 and still plainly quieter
 *  than a live card at 12.67.  */
.yui-nav-cards .yui-nav-card[data-disabled="1"] {
    opacity: 0.7;
}

/*--- breadcrumb: the path as one line (C_YUI_NODE's `projection.path`) ---*/
.yui-nav-breadcrumb {
    padding: 0.35rem 0.75rem;
}
.yui-nav-breadcrumb .yui-nav-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
/*  Bulma marks the last crumb with li.is-active and greys it; the
 *  active_route highlight lands there, so "where I am" reads as the end
 *  of the trail instead of as one more link. */
.yui-nav-breadcrumb li.is-active > a {
    color: var(--bulma-text-strong, #363636);
    font-weight: 600;
    pointer-events: none;
}

/*--- backbar (mobile "← <section>" back-to-index, submenu.index) ---*/
.yui-nav-backbar {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
}
.yui-nav-backbar .yui-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--bulma-text, inherit);
    text-decoration: none;
    font-weight: 600;
}

/*--- stacked item (icon above label) ---*/
.yui-nav-stacked {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

/*--- drawer ---*/
.yui-drawer {
    position: fixed;
    inset: 0;
    z-index: 18;
    display: none;
}
.yui-drawer.is-active { display: block; }
.yui-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.yui-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 18rem;
    max-width: 85vw;
    background: var(--bulma-scheme-main, #fff);
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    overflow: auto;
}

/*--- accordion ---*/
.yui-nav-accordion .yui-accordion-head {
    cursor: pointer;
    user-select: none;
}
.yui-nav-accordion .yui-accordion-head::after {
    content: "▾";
    float: right;
    transition: transform 0.15s ease;
    transform: rotate(-90deg);
}
.yui-nav-accordion .yui-accordion-head.is-open::after {
    transform: none;
}

/*--- section header / divider (decorative items inside vertical/submenu) ---*/
.yui-nav .menu-list .yui-nav-section-header {
    list-style: none;
    margin: 0.75rem 0 0.125rem;
    padding: 0.125rem 0.5rem;
}
.yui-nav .menu-list .yui-nav-section-header:first-child {
    margin-top: 0.125rem;
}
.yui-nav .menu-list .yui-nav-section-header-label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--bulma-text-weak, #6b7280);
}
.yui-nav .menu-list .yui-nav-section-divider {
    list-style: none;
    height: 1px;
    margin: 0.5rem 0.5rem;
    background-color: var(--bulma-border-weak, #dbdbdb);
}

/*============================================================
 *      Active item highlight (Bulma already styles .is-active
 *      on .menu-list a and on .tabs li; we just ensure a
 *      consistent look when we toggle it ourselves).
 *============================================================*/
.yui-nav .menu-list a.is-active {
    background-color: var(--bulma-link, #485fc7);
    color: var(--bulma-link-invert, #fff);
}

/*============================================================
 *      Toolbar
 *============================================================*/
.yui-toolbar {
    min-height: 2.5rem;
}
/*  Fixed app toolbar: ALWAYS a single row.  Bulma's .navbar stacks
 *  .navbar-end below .navbar-brand on touch (<1024px) because the end
 *  group is not wrapped in a burger .navbar-menu.  For a fixed shell
 *  toolbar that is wrong — override Bulma's responsive navbar so the
 *  start and end groups stay on one line at every breakpoint. */
.yui-toolbar.navbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.yui-toolbar .yui-toolbar-start {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    flex-wrap: nowrap;
}
.yui-toolbar .yui-toolbar-end {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: nowrap;
    margin-left: auto;
}
/*  Phones: keep the toolbar compact — drop the brand wordmark and the
 *  item text labels, keep the small logo + icons (icon-only toolbar). */
@media screen and (max-width: 768px) {
    .yui-toolbar-brand-wordmark,
    .yui-toolbar-item-label {
        display: none;
    }
}
.yui-toolbar-item {
    background: transparent;
    border: none;
    cursor: pointer;
    /*  Generous touch target: comfortable for a thumb (>= ~44px). */
    padding: 0.5rem 0.85rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--bulma-text, inherit);
}
.yui-toolbar-item .icon {
    /*  yi-* glyphs are 1em (mask) — scale them up so they are easy
     *  to hit/read in the toolbar. */
    font-size: 1.35rem;
}
.yui-toolbar-item:hover {
    background-color: var(--bulma-scheme-main-bis, rgba(0,0,0,0.04));
}

/*------------------------------------------------------------
 *      Toolbar badge — the count pinned to an item's icon
 *
 *  Anchored to the ICON and not to the button: with its label on
 *  (desktop) the button is wide, and a badge in its corner would
 *  float away from the glyph it counts.
 *
 *  `hidden` is honoured explicitly: the element is always in the
 *  DOM (so the runtime setter has somewhere to write) and
 *  [hidden] loses to `display:inline-flex` without this rule.
 *
 *  Danger colour on purpose — a badge exists to pull the eye.  It
 *  is its own colour pair in both schemes rather than a Bulma
 *  helper, so it keeps its contrast when the toolbar background
 *  changes with the theme.  No transition: house rule.
 *------------------------------------------------------------*/
.yui-toolbar-icon {
    position: relative;
    overflow: visible;
}
.yui-toolbar-badge {
    position: absolute;
    top: -0.35em;
    right: -0.55em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /*  A round dot for one digit, a pill from two on. */
    min-width: 1.15em;
    height: 1.15em;
    padding: 0 0.3em;
    border-radius: 999px;
    font-size: 0.62em;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    background-color: var(--bulma-danger, #f14668);
    color: var(--bulma-danger-invert, #fff);
    /*  Separates the pill from the glyph when they overlap. */
    box-shadow: 0 0 0 0.12em var(--bulma-scheme-main, #fff);
    pointer-events: none;
}
.yui-toolbar-badge[hidden] {
    display: none;
}

/*============================================================
 *      Toolbar — type:"brand"
 *      Logo image + wordmark text. Renders as <button> when
 *      `action` is set, otherwise as a passive <div>.
 *============================================================*/
.yui-toolbar-brand {
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}
.yui-toolbar-brand-logo {
    height: 1.75rem;
    width: auto;
    flex: 0 0 auto;
    display: block;
}
.yui-toolbar-brand-wordmark {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/*============================================================
 *      Legibility: two rules the whole library leans on
 *
 *      A PLACEHOLDER is text, and Bulma paints it with the text
 *      colour at 30% alpha: 2.47:1 on the dark scheme, 1.79 on
 *      the light one. It is what says what a box is FOR -- the
 *      graph's `search`, a form's hint -- so it is written at
 *      70%: 7.96 and 4.95, and plainly still secondary. The
 *      `opacity: 1` is for Firefox, which dims a placeholder
 *      again on top of its colour.
 *
 *      And `.yui-text-quiet` is what the library uses where it
 *      used to say `has-text-grey`: Bulma's grey is ONE mid tone
 *      for both schemes (3.86:1 on the dark one), and every use
 *      of it in here is text somebody has to read -- an empty
 *      state, a timestamp, a topic id, the detail of a notice.
 *      The text colour at 75% is the same intent, legible.
 *============================================================*/
/*  Bulma declares `--bulma-input-placeholder-color` INSIDE the
 *  `.input, .textarea, .select` block (its `.input::placeholder` rule
 *  reads it there), so a `:root` override never reaches it and a bare
 *  `input::placeholder` loses to Bulma's class selector. The variable
 *  is redefined where Bulma defines it, with the alpha it should have
 *  had: same hue, same lightness, 0.7 instead of 0.3.  */
.input,
.textarea,
.select select {
    --bulma-input-placeholder-color:
        hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.7);
}

input::placeholder,
textarea::placeholder {
    opacity: 1;     /*  Firefox dims a placeholder again, on top of its colour  */
}

.yui-text-quiet {
    opacity: 0.75;
}

/*============================================================
 *      Toolbar — type:"avatar"
 *      Circular badge populated by the host-registered provider
 *      via yui_shell_set_avatar_provider().
 *============================================================*/
/*  The badge is 2rem, and the item's own 0.5rem padding put the
 *  avatar at 48px in a row of 44px items -- the only thing in the app
 *  bar that stood taller than the rest. The padding gives way; the
 *  badge (which is the identity, and the hit target) does not, and the
 *  item keeps the row's 2.75rem min-height.  */
.yui-toolbar-item.yui-toolbar-avatar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.yui-toolbar-avatar .yui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--bulma-link, #485fc7);
    color: var(--bulma-link-invert, #ffffff);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

/*============================================================
 *      Toolbar — type:"connection"
 *      Backend-connection status dot.  State toggled by the
 *      host via yui_shell_set_connection_state(shell, bool).
 *============================================================*/
.yui-toolbar-conn .yui-conn-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background-color: #9aa5b1;
    box-shadow: 0 0 0 2px rgba(154, 165, 177, 0.25);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.yui-toolbar-conn.is-connected .yui-conn-dot {
    background-color: #1FAE6F;
    box-shadow: 0 0 0 2px rgba(31, 174, 111, 0.30);
}
.yui-toolbar-conn.is-disconnected .yui-conn-dot {
    background-color: #D64545;
    box-shadow: 0 0 0 2px rgba(214, 69, 69, 0.30);
}

/*============================================================
 *      Toolbar — action.type:"dropdown"
 *      Panel anchored to the trigger; mounted on the popup
 *      layer so it sits above the base grid but below modals.
 *============================================================*/
.yui-toolbar-dropdown-panel {
    background-color: var(--bulma-scheme-main, #ffffff);
    color: var(--bulma-text, inherit);
    border: 1px solid var(--bulma-border, rgba(0, 0, 0, 0.1));
    border-radius: 0.375rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    min-width: 12rem;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
}
.yui-toolbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.yui-toolbar-dropdown-item:hover {
    background-color: var(--bulma-scheme-main-bis, rgba(0, 0, 0, 0.06));
}
/*  Label takes the slack so the trailing check sits flush right.  */
.yui-toolbar-dropdown-label {
    flex: 1;
}
/*  Image glyph (flags): boxed to the icon size so rows stay aligned
 *  whether an item uses an icon class or an image.  */
.yui-toolbar-dropdown-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    flex: 0 0 auto;
}
.yui-toolbar-dropdown-glyph img {
    width: 1.15rem;
    height: auto;
    display: block;
    border-radius: 2px;
}
/*  The check is always in the DOM and only hidden, so selecting a
 *  different option does not change any row's width.  */
.yui-toolbar-dropdown-check {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    visibility: hidden;
    color: var(--bulma-link-on-scheme, var(--bulma-link, #485fc7));
}
.yui-toolbar-dropdown-item.is-selected .yui-toolbar-dropdown-check {
    visibility: visible;
}
.yui-toolbar-dropdown-item.is-selected .yui-toolbar-dropdown-label {
    font-weight: 600;
}
.yui-toolbar-dropdown-item:focus-visible {
    outline: 2px solid var(--bulma-link, #485fc7);
    outline-offset: -2px;
}
.yui-toolbar-dropdown-divider {
    height: 1px;
    margin: 0.25rem 0;
    background-color: var(--bulma-border, rgba(0, 0, 0, 0.1));
}

/*============================================================
 *      Keyboard focus (accessibility)
 *      Use :focus-visible so we don't show an outline on click.
 *============================================================*/
.yui-nav a:focus-visible,
.yui-nav button:focus-visible,
.yui-toolbar-item:focus-visible,
.yui-accordion-head:focus-visible {
    outline: 2px solid var(--bulma-link, #485fc7);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/*============================================================
 *      Shell placeholder (shown when navigation fails silently)
 *============================================================*/
.yui-shell-placeholder {
    max-width: 60rem;
}

/*============================================================
 *      Accordion head styling — needed because it is now a
 *      <button>, which has default button styles to override.
 *============================================================*/
.yui-nav-accordion .yui-accordion-head {
    display: block;
    width: 100%;
    text-align: inherit;
    background: transparent;
    border: none;
    padding: 0.5em 0.75em;
    margin: 0;
    font: inherit;
    color: inherit;
}

/*============================================================
 *      Adaptive dialog (yui_shell_show_modal, opts.dialog:true)
 *
 *      The standardized "single window / popup" chrome:
 *        - Desktop  : a centered card, close X at the top-right.
 *        - Mobile   : a full-screen sheet, back arrow at the top-left.
 *      One dismiss control shows per breakpoint; both call close().
 *      768px is the shell-wide mobile breakpoint (matches the dock).
 *============================================================*/
/*  Lighter backdrop than Bulma's default (0.86): a popup should dim the
 *  page, not black it out. */
.yui-dialog .modal-background {
    background-color: rgba(10, 10, 10, 0.4);
}
.yui-dialog .yui-dialog-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--bulma-scheme-main, #fff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
/*  A dialog holding a DOCUMENT (`opts.wide`): a json viewer, a record, a
 *  log. The cap above is a width for a question with two buttons.  */
.yui-dialog.yui-dialog-wide .yui-dialog-content {
    max-width: 1000px;
}

.yui-dialog-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--bulma-border-weak, #dbdbdb);
}
.yui-dialog-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
/*  Separator between the data half and the translated kind half. CSS,
 *  not a text node: createElement2 trims text nodes and eats the spaces. */
.MODAL_TITLE_PREFIX + .MODAL_TITLE_KIND::before {
    content: "·";
    padding: 0 0.4em;
    color: var(--bulma-text-weak);
    font-weight: 400;
}
.yui-dialog-back,
.yui-dialog-x {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bulma-text, currentColor);
    cursor: pointer;
}
.yui-dialog-back:hover,
.yui-dialog-x:hover {
    background: var(--bulma-background, rgba(0, 0, 0, 0.06));
}
.yui-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

/*  Desktop: X (right) shown, back arrow hidden. */
.yui-dialog-back {
    display: none;
}

/*  Mobile: full-screen sheet, back arrow (left) shown, X hidden. */
@media (max-width: 768px) {
    .yui-dialog .modal-content {
        margin: 0;
        width: 100%;
        max-height: 100%;
        height: 100%;
    }
    .yui-dialog .yui-dialog-content {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    .yui-dialog-back {
        display: inline-flex;
    }
    .yui-dialog-x {
        display: none;
    }
}

/*  Moved from c_yui_main.css (2.6.1): mobile Bulma columns edge-to-edge.
 *  Self-contained here so every consumer gets it without the
 *  legacy stack's stylesheet. */

@media screen and (max-width: 768px) {
    .column {
        padding: 0 !important;
        margin-bottom: 16px !important;
    }
}


/*============================================================
 *      Shell confirm dialogs (yui_shell_confirm_*):
 *      icon-centric layout ported from the legacy volatil
 *      modals (2.5.0 redesign; c_yui_main.js removed in 3.0.0).
 *      A narrow rounded card with a tinted round icon of the
 *      type; everything maps to Bulma vars so one rule set
 *      follows light and dark.
 *============================================================*/
.modal.yui-confirm .modal-background {
    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
}
.modal.yui-confirm .modal-card {
    position: relative;
    width: min(26rem, calc(100vw - 2rem));
    border-radius: 0.75rem;
    background: var(--bulma-scheme-main, #fff);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--bulma-scheme-invert, #000) 30%, transparent);
    padding: 1.5rem 1.5rem 1.25rem;
}
.modal.yui-confirm .modal-card-body {
    background: transparent;
    padding: 0;
}
.modal.yui-confirm .modal-card-foot {
    background: transparent;
    border-top: none;
    padding: 1rem 0 0;
    justify-content: center;
}
.yui-confirm-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--yui-confirm-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
    color: var(--yui-confirm-ink, var(--bulma-info, #3e8ed0));
}
.modal.yui-confirm.is-info,
.modal.yui-confirm.is-question {
    --yui-confirm-base: var(--bulma-info, #3e8ed0);
    --yui-confirm-ink: var(--bulma-info-on-scheme, #3e8ed0);
}
.modal.yui-confirm.is-success {
    --yui-confirm-base: var(--bulma-success, #48c78e);
    --yui-confirm-ink: var(--bulma-success-on-scheme, #257953);
}
.modal.yui-confirm.is-warning {
    --yui-confirm-base: var(--bulma-warning, #ffe08a);
    --yui-confirm-ink: var(--bulma-warning-on-scheme, #946c00);
}
.modal.yui-confirm.is-error {
    --yui-confirm-base: var(--bulma-danger, #f14668);
    --yui-confirm-ink: var(--bulma-danger-on-scheme, #cc0f35);
}
.yui-confirm-title {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 0.25rem;
    color: var(--bulma-text-strong, inherit);
}
.yui-confirm-x {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}
.yui-confirm-msg {
    font-size: 1.05rem;
    color: var(--bulma-text, inherit);
}