/* ---------- mobile: hidden by default, activated in the media query below.
   The left/right menu zones become slide-in drawers toggled from a top bar;
   the center content zone fills the screen. ---------- */
.mobile-bar { display: none; }
.drawer-backdrop { display: none; }
.drawer-close { display: none; }
.drawer-title { display: none; }

@media (max-width: 768px) {
  /* body becomes a vertical stack: fixed top bar + full-height content */
  body {
    display: flex;
    flex-direction: column;
  }

  .mobile-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }

  .mobile-bar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--elevated);
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
  }

  .mobile-bar-btn:active { transform: translateY(1px); }

  /* Left has 1 button (34px), right has 2 (34px*2 + gap = 80px) -- unequal,
     which pushed the flex:1 center content off true page-center (it lands
     centered between the two side groups, not the screen). Reserve equal
     width on both sides -- flush to their own screen edge -- so the center
     group's midpoint lands on the actual page center. */
  .mobile-bar-side {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: calc(34px * 2 + 12px);
  }

  .mobile-bar-side-left {
    justify-content: flex-start;
  }

  .mobile-bar-side-right {
    justify-content: flex-end;
  }

  /* compact brand (icon+title) + #count share the middle of the bar, stacked
     into two short lines so they fit in the same height as the hamburger/
     block-picker buttons either side. #count itself is moved here from
     .output-bar via JS (setupResponsiveCount in app.js). */
  .mobile-bar-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }

  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
  }

  .mobile-brand-icon {
    flex: none;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
    font-size: .62rem;
  }

  .mobile-brand-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text);
  }

  .mobile-bar-count-slot {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: .66rem;
  }

  /* icon-only action buttons: hide the text label, keep the icon + a11y
     tooltip (title attribute) so the row doesn't overflow/wrap on narrow
     screens. */
  .output-bar .btn-label {
    display: none;
  }

  /* The mylist bulk-action buttons (全て追加/全て削除) are replaced by a
     single combined ★ button in the top bar instead (see #mobile-mylist-btn
     / its click handler in app.js, which offers the 追加/削除 choice first),
     so hide the desktop pair here. Undo/redo are hidden too, swapped for
     the ↑/↓ caret-line buttons (more useful for a touch keyboard-less
     workflow) -- this keeps the row at exactly seven buttons
     (copy/paste/←/→/↑/↓/⌫), still filling the row edge-to-edge as squares. */
  #output-add-mylist-btn,
  #output-remove-mylist-btn,
  #undo-btn,
  #redo-btn {
    display: none;
  }

  /* Unicode Art: 作成/名前変更/削除 collapse into one "マイリスト操作" button
     to save horizontal space next to the view dropdown. */
  #art-mylist-add,
  #art-mylist-rename,
  #art-mylist-delete {
    display: none;
  }

  #art-mylist-menu-btn {
    display: inline-flex;
  }

  /* Tile-to-tile spacing halved -- with the vertical (margin-bottom) and
     horizontal (column-gap) gaps now matching, instead of the desktop
     10px/10px which happened to already be equal but is halved here
     regardless.
     column-count:2 (deterministic) instead of the desktop's column-width
     hint -- letting the browser pick a column count from column-width alone
     was what previously caused tiles to land in an alternating left/right
     order at some in-between mobile widths (~350-400px), since the browser
     could end up choosing either 1 or 2 columns depending on exact width.
     column-width:auto here means count:2 is the only thing deciding it. */
  .art-grid {
    column-count: 2;
    column-width: auto;
    column-gap: 5px;
  }

  .art-tile {
    margin-bottom: 5px;
  }

  /* Same halved spacing as .art-grid; a fixed 2 columns keeps tiles from
     collapsing into a single over-wide column at in-between widths. */
  .pattern-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  /* Half the shared 10px margin-top, and inset horizontally by the shadow's
     own reach (3px offset + 6px blur = ~9px) so the shadow-inclusive visual
     width of the button row lines up with #output's edges above it, instead
     of the shadows bleeding past them. */
  .output-bar {
    margin-top: 5px;
    padding: 0 9px;
  }

  /* Fixed-size buttons (not flex:1-stretched) spread evenly across the full
     row width via justify-content:space-between -- always exactly one row
     (nowrap), with the leftover space becoming the gaps between buttons
     rather than a fixed gap value, so it stays flush edge-to-edge on any
     screen width. */
  .output-bar .btn-group {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .output-bar .btn-group .btn {
    /* 1.2x the previous 25px frame, font-size unchanged (still 1.15rem below) */
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
  }

  /* ~80% of the (already-shrunk) desktop .8rem. The HTML rows="8" attribute
     (see index.html) gives desktop +5 rows over the old rows=3 baseline;
     mobile only wants +2, so height is set explicitly here to override the
     shared rows attribute -- 5 rows' worth at this breakpoint's own
     line-height/font-size (padding+border: 10px*2 + 1px*2 = 22px). */
  #output {
    font-size: .64rem;
    height: calc(1.6em * 5 + 22px);
  }

  /* Central block-picker modal: use the full site height instead of 70vh,
     since the legend/list shrinking below gives it much more headroom to
     actually use. */
  .block-pop-box {
    height: min(96vh, 96dvh);
  }

  /* side-by-side (legend : color-mode toggle) grid columns squeeze the
     legend into a sliver on a narrow screen (the auto-sized toggle column
     wins the space fight). Stack them instead so .legend-items gets the
     modal's full width to wrap across, same fix already applied to the
     left-menu legend (see .menu-left .attr-legend). */
  .block-pop-box .block-legend {
    grid-template-columns: 1fr;
  }

  /* 4 legend items per row (was a fixed 128px, fitting ~2) at ~80% text
     size, to save vertical space now that the legend spans full width. */
  .block-pop-box .legend-item {
    width: calc(25% - 5px);
    font-size: .58rem;
  }

  /* "色分けなし（No coloring）" is a single long item shown instead of the
     usual group list when color-mode is "none" -- it doesn't fit the
     4-per-row width above without wrapping, so give it the full row instead
     (this is the only item ever shown in that mode, so no other columns to
     share space with). */
  .block-pop-box .legend-item.legend-none {
    width: 100%;
    white-space: nowrap;
  }

  .block-pop-box .legend-label .legend-ja {
    font-size: .58rem;
  }

  .block-pop-box .legend-label .legend-en {
    font-size: .5rem;
  }

  /* block list: 1 per row (base rule is 4) -- the full row width means text
     can grow to ~1.3x the previous 2-column sizes instead of staying
     cramped. */
  .block-pop-box .block-list {
    grid-template-columns: repeat(1, 1fr);
  }

  /* 3-column layout: name (ja above en) | code range | sample glyphs.
     The grid has to live on .block-item itself, not .block-item-head:
     .block-item-head/.block-item-samples used to be two independent flex
     boxes (head flex:1, samples flex:none) whose *widths* varied row to
     row (samples' width depends on how many/which glyphs a block has,
     shrinking head's share), so even a perfectly consistent inner layout
     still landed the range column at a different x per row. Unwrapping
     both .block-item-head and .block-item-name (display:contents; they
     contribute no box, just expose their children) puts swatch, name-ja,
     name-en, block-item-range, and block-item-samples all directly on one
     shared grid with fixed-width range/sample columns, so every row lines
     up identically -- like tab stops. block-item-fav (the favorite-star
     badge) is pulled out of flow entirely (position:absolute) since it's
     only ever shown for a handful of rows and isn't part of this alignment. */
  .block-pop-box .block-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 5.5rem 4.6rem;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
  }

  .block-pop-box .block-item-head,
  .block-pop-box .block-item-name {
    display: contents;
  }

  .block-pop-box .block-item > .block-item-head > .swatch {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .block-pop-box .block-item .name-ja {
    grid-column: 2;
    grid-row: 1;
    font-size: .96rem;
    line-height: 1.15;
  }

  .block-pop-box .block-item .name-en {
    grid-column: 2;
    grid-row: 2;
    font-size: .52rem;
    line-height: 1.15;
    margin-top: -3px;
  }

  .block-pop-box .block-item-range {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: .47rem;
  }

  .block-pop-box .block-item-fav {
    position: absolute;
    top: 2px;
    right: 2px;
    margin-left: 0;
  }

  .block-pop-box .block-item-samples {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .block-pop-box .sample-glyph {
    font-size: .86rem;
  }

  /* tabs shrunk ~70% so all four titles stay on one line without wrapping */
  .mode-tab {
    font-size: .7rem;
    white-space: nowrap;
    padding: 6px 10px;
  }

  /* 8 codepoints per row instead of 16 (see grid.js refreshLayout /
     D.setCols) -- easier to tap on a narrow screen. Also applied to the
     other three tabs' character boards for consistency. */
  :root {
    --cols: 8;
  }

  .fav-grid {
    grid-template-columns: repeat(var(--cols), 1fr);
  }

  /* No row-address gutter column at all on mobile (dropped left AND right --
     desktop only drops the right spacer): each cell already shows its own
     full "U+XXXX" (see the .cell .cp rule below), making a separate address
     column redundant. See grid.js buildRow()/buildColHeader(). */
  .grid-row {
    grid-template-columns: repeat(var(--cols), var(--cell-size));
  }

  /* Column-index header dropped entirely (see grid.js buildColHeader): with
     no row-address gutter left to label, and each cell showing its own full
     "U+XXXX", it has nothing left to add. grid.js leaves it empty; collapse
     its box so it doesn't leave a blank bar. */
  .col-header {
    display: none;
  }

  /* only the content zone stays in flow; the menu zones are pulled out into
     fixed drawers, so collapse the 3-column grid to a single column. */
  .page {
    grid-template-columns: 1fr;
    height: auto;
    flex: 1;
    min-height: 0;
  }

  .content-zone {
    border-left: none;
    border-right: none;
  }

  /* タイトル・アイコンはモバイルでは省略 */
  .site-header { display: none; }

  .menu-left,
  .menu-right {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 85;
    width: min(86vw, 330px);
    padding-top: 44px;
    background: var(--bg);
    /* No shadow while closed -- it's a symmetric 0 0 40px blur, so even
       fully translated off-screen it still bled 40px back into the visible
       viewport, darkening both screen edges. Only shown once open (below),
       when the drawer is actually meant to look raised above the page. */
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease;
    -webkit-overflow-scrolling: touch;
  }

  .menu-left {
    left: 0;
    transform: translateX(-100%);
    border-right: 1px solid var(--border);
    overflow-y: auto;
  }

  .menu-right {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid var(--border);
  }

  .menu-left.open,
  .menu-right.open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  }

  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 84;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .drawer-close {
    position: absolute;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--elevated) 70%, transparent);
    color: var(--muted);
    font-size: 1.44rem;
    line-height: 1;
    z-index: 1;
  }

  .menu-left .drawer-close { left: 8px; }
  .menu-right .drawer-close { right: 8px; }

  /* Drawer titles: 表示 (display/settings) for the left menu, 移動
     (navigate) for the right one -- sit at the *opposite* edge from the
     close button (which is on the same side as the drawer itself), so the
     two don't crowd together at one corner. */
  .drawer-title {
    position: absolute;
    top: 0;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
  }

  .menu-left .drawer-title {
    right: 16px;
  }

  .menu-right .drawer-title {
    left: 16px;
  }

  /* Detail modal: .modal itself used to also be a scroll container
     (overflow-y:auto), and its 100vh-based max-height calc could exceed the
     *visible* viewport once the mobile browser's chrome (URL bar, etc.)
     shrinks it -- producing two nested scrollbars. Switch to dvh (tracks the
     actual visible viewport) and make .modal-box the only scroller. */
  .modal {
    overflow: hidden;
    align-items: center;
    padding: 12px;
  }

  .modal-box {
    width: min(94vw, 440px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  /* Sized up from the desktop 32px, then back down through a couple of
     rounds of feedback (64px -> 51px -> 36px, ~70% each time); circular;
     reverted to a dark-background/light-text scheme (fixed colors, not the
     theme variables, so it reads the same regardless of site theme); and
     pulled in to sit right at the corner (12px offset -> 6px) -- shrinking
     it that much also stopped it overlapping .nav-next (see modal-glyph's
     min-height comment for why that pairing is otherwise close). */
  .modal-close {
    top: 6px;
    right: 6px;
    width: 29px;
    height: 29px;
    font-size: 1.12rem;
    border-radius: 50%;
    background: #1a1d24;
    color: #f5f6f8;
  }

  /* action row: all 5 buttons (including the text-labeled 符号表へ/入力)
     become equal squares spanning the modal's full width, instead of
     unequal rectangles (reveal/insert flexed wide, fav fixed at 42px). */
  .modal-actions {
    flex-wrap: nowrap;
  }

  .modal-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
  }

  .fav-btn {
    width: auto;
  }

  /* icon-only buttons (copy/fav/add -- unlike reveal/insert, which have text
     labels) grow their icon ~1.3x: .8rem (inherited from .modal-actions) and
     fav-btn's own 1.1rem become 1.04rem/1.43rem. */
  .modal-actions .copy-btn,
  .modal-actions .add-btn {
    font-size: 1.04rem;
  }

  .modal-actions .fav-btn {
    font-size: 1.43rem;
  }

  /* spec rows below the action buttons shrunk to ~80% */
  .info-row {
    font-size: .8em;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 3.6rem;
  }

  .info-row {
    grid-template-columns: 5.5rem 1fr;
  }
}