@media (max-width: 1100px) {
  header { grid-template-columns: minmax(0, 1fr) auto; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}
@media (max-width: 900px) {
  html:is([data-skin="shuimo"], [data-skin="daiqing"], [data-skin="zhusha"], [data-skin="yemo"]) { --skin-position: 80% center; }
  header, .layout { grid-template-columns: 1fr; }
  .hello { justify-self: center; }
  .search { grid-column: auto; grid-row: auto; }
  .tools { justify-content: center; }
  .nav-cols { position: static; flex-wrap: wrap; }
  .appearance-panel { top: 64px; max-height: calc(100dvh - 80px); }
}
@media (max-width: 720px) {
  html[data-layout="list"] .grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .appearance-detail { right: 16px; width: min(660px, calc(100vw - 32px)); }
  body.appearance-section-open .appearance-menu { visibility: hidden; pointer-events: none; }
}
@media (max-width: 600px) {
  .appearance-detail .choice-grid,
  .appearance-detail #skinChoices,
  .appearance-detail #trailChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appearance-detail .trail-size-row { gap: 6px; }
}
@media (max-width: 720px) {
  .hello { width: 100%; height: auto; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
  .calendar-dates, .weather-row { padding-left: 0; border-left: 0; }
}
body.appearance-open header { z-index: 60; }
@media (prefers-reduced-motion: reduce) {
  html[data-fx="off"] .aurora::before,
  html[data-fx="off"] .card,
  html[data-fx="off"] .appearance-panel,
  html[data-fx="off"] .ico,
  html[data-fx="off"] .ico::before,
  html[data-fx="off"] .motion-swatch .motion-anim,
  html[data-fx="off"] .trail-swatch { animation: none !important; }
  html[data-fx="off"] .card,
  html[data-fx="off"] .card::before,
  html[data-fx="off"] .ico,
  html[data-fx="off"] .ico::after,
  html[data-fx="off"] .ico img,
  html[data-fx="off"] .choice { transition: none !important; }
  html[data-fx="off"][data-icon="holo"] .card:is(:hover, :focus-visible) .ico::after { transform: translateX(-120%); }
  html[data-fx="off"] .aurora::before,
  html[data-fx="off"] .aurora::after {
    translate: none !important;
    transition: none !important;
  }
  html[data-fx="off"] .aurora,
  html[data-fx="off"] #fx-canvas {
    transition: none !important;
  }
  html[data-fx="off"] .card-glow {
    transition: none;
  }
}

@media (max-width: 600px) {
  .appearance-detail #layoutChoices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appearance-detail #layoutChoices .choice { min-width: 0; padding-inline: 4px; }
}

/* Phones: bookmarks start within the first screen. The header folds into two rows (time and
   date beside icon-only tools, then search), and categories scroll sideways as chips. */
@media (max-width: 600px) {
  html:not([data-layout="start"]) header {
    --header-control-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "hello tools" "search search";
    gap: 12px 8px;
    padding: 14px 12px 6px;
  }
  html:not([data-layout="start"]) .hello {
    grid-area: hello;
    justify-self: start;
    align-items: center;
    width: auto;
    height: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px 12px;
  }
  html:not([data-layout="start"]) .hello .time { height: auto; min-width: 0; font-size: 32px; line-height: 1.15; }
  html:not([data-layout="start"]) .calendar-dates { height: auto; gap: 0; font-size: 12px; }
  html:not([data-layout="start"]) .calendar-solar { font-size: 13px; }
  html:not([data-layout="start"]) .weather-row { flex-basis: 100%; height: 26px; max-width: none; }
  html:not([data-layout="start"]) .tools { grid-area: tools; align-self: start; flex-wrap: nowrap; gap: 6px; }
  html:not([data-layout="start"]) .search { grid-area: search; }
  html:not([data-layout="start"]) #stats,
  html:not([data-layout="start"]) .sync-trigger span,
  html:not([data-layout="start"]) #appearanceLabel { display: none; }
  html:not([data-layout="start"]) .tools .stat { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
  /* minmax(0, …) lets the chip row scroll instead of widening the page. */
  .layout { grid-template-columns: minmax(0, 1fr); padding: 4px 12px 32px; }
  /* Only the navigation strip: board columns in #main also carry .nav-col. */
  html:is([data-layout="classic"], [data-layout="compact"], [data-layout="list"], [data-layout="icons"], [data-layout="board"]) .nav-cols {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    max-height: none;
  }
  html:is([data-layout="classic"], [data-layout="compact"], [data-layout="list"], [data-layout="icons"], [data-layout="board"]) .nav-cols > .nav-col {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    padding: 6px;
  }
  html:is([data-layout="classic"], [data-layout="compact"], [data-layout="list"], [data-layout="icons"], [data-layout="board"]) .nav-cols .folder { flex: 0 0 auto; width: auto; }
  html:is([data-layout="classic"], [data-layout="compact"], [data-layout="list"], [data-layout="icons"], [data-layout="board"]) .nav-cols .folder b { flex: 0 0 auto; width: auto; }
  html:is([data-layout="classic"], [data-layout="compact"], [data-layout="list"], [data-layout="icons"], [data-layout="board"]) .nav-cols .folder:not(.has-kids)::after { display: none; }
  /* The directory tree folds to one caption row showing the current folder; tap to open it. */
  html[data-layout="tree"] .tree-nav.nav-col { width: 100%; max-width: 100%; max-height: none; padding: 4px 6px; }
  html[data-layout="tree"] .tree-caption-static { display: none; }
  html[data-layout="tree"] .tree-caption-toggle { display: flex; align-items: center; padding: 10px 8px; cursor: pointer; }
  html[data-layout="tree"] .tree-caption span { flex: 1; text-align: right; font-size: 12px; }
  html[data-layout="tree"] .tree-caption-toggle::after { content: "\203A"; color: var(--muted); font-size: 18px; line-height: 1; transform: rotate(90deg); }
  html[data-layout="tree"] .tree-nav.is-open .tree-caption-toggle::after { transform: rotate(-90deg); }
  html[data-layout="tree"] .tree-nav:not(.is-open) > :not(.tree-caption) { display: none; }
  html[data-layout="tree"] .tree-nav.is-open > ul { max-height: 50vh; overflow-y: auto; }
  /* Two cards per row instead of one wide card with an empty right half. */
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--bookmark-card-min, 210px), calc(50% - var(--bookmark-grid-gap, 12px) / 2)), 1fr)); }
  html[data-layout="compact"] .grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--bookmark-compact-min, 170px), calc(50% - var(--bookmark-compact-gap, 8px) / 2)), 1fr)); }
  .section { margin-inline: 0; }
  .app-version { display: none; }
}

/* Touch screens have no hover tooltip, so narrow cards give titles a second line instead. */
@media (max-width: 600px), (hover: none) {
  .card h3,
  html[data-layout="list"] .card h3 { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
}