/* Home. One centred column — wordmark, search, tiles — over the particle
   field, with nothing boxed in a panel. The rail already lists every
   destination, so the home page's job is just to get you moving. */

/* The stage keeps its own margin-left for the rail; only the vertical
   rhythm is ours to set. */
    .ol-stage.home {
      display: flex;
      min-height: 100vh;
      padding: 40px clamp(16px, 3vw, 32px);
    }
    /* The home column is the one thing on the site that should sit on the
       window's centre line, not centred in whatever space is left beside the
       rail — which is what the stage's margin-left would give it. So it drops
       the margin and reserves the rail's width on *both* sides instead: dead
       centre, and still no way to slide under the rail.
       "body" is needed to outweigh ui.css's "body.rail-open .ol-stage". */
    @media (min-width: 821px) {
      body .ol-stage.home { margin-left: 0; padding-inline: var(--rail); }
      body.rail-open .ol-stage.home { padding-inline: var(--rail-open); }
    }
    /* "margin: auto" rather than align-items/place-items: centring this way
       degrades to top-aligned when the column is taller than the viewport,
       instead of overflowing off the top edge where it can't be scrolled to. */
    .home-inner {
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      width: min(680px, 100%);
    }

    .hero { position: relative; display: grid; justify-items: center; gap: 10px; }
    /* Soft bloom behind the wordmark, in the logo's own cyan. Sits under the
       text but over the particles. */
    .hero::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 46%;
      width: 460px;
      height: 230px;
      transform: translate(-50%, -50%);
      background: radial-gradient(50% 50% at 50% 50%,
        rgba(125, 211, 252, 0.26), rgba(45, 212, 191, 0.1) 45%, transparent 72%);
      filter: blur(30px);
      pointer-events: none;
    }
    .hero-logo {
      position: relative;
      width: min(380px, 84%);
      height: auto;
      display: block;
    }
    .hero-tag {
      position: relative;
      color: var(--text-dim);
      font-size: 14px;
      text-align: center;
    }

    .search-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 6px 8px 6px 18px;
      background: rgba(8, 12, 20, 0.72);
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      transition: border-color 0.16s ease, background 0.16s ease;
    }
    .search-bar:focus-within {
      border-color: rgba(125, 211, 252, 0.45);
      background: rgba(8, 12, 20, 0.88);
    }
    .search-bar svg { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }
    .search-input {
      flex: 1;
      min-width: 0;
      min-height: 44px;
      background: none;
      border: none;
      color: var(--text);
      font: inherit;
      font-size: 15px;
      outline: none;
    }
    .search-input::placeholder { color: var(--text-faint); }
    .search-engine {
      min-height: 32px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      background: var(--surface-raised);
      color: var(--text-dim);
      font: inherit;
      font-size: 12.5px;
      cursor: pointer;
      outline: none;
    }
    .search-engine option { background: #0b0f17; color: var(--text); }
    .search-kbd {
      flex-shrink: 0;
      margin-right: 6px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--surface-raised);
      color: var(--text-faint);
      font-size: 11px;
    }

    /* Tiles are a centred row that wraps, not a grid — a short row should sit
       in the middle under the search bar, not stretch to fill columns. */
    .app-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .app-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 96px;
      min-height: 96px;
      padding: 14px 8px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(8, 12, 20, 0.6);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      text-decoration: none;
      text-align: center;
      font: inherit;
      cursor: pointer;
      transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
    }
    .app-tile:hover {
      background: var(--surface-hover);
      border-color: rgba(125, 211, 252, 0.28);
      transform: translateY(-2px);
    }
    .app-tile img, .app-tile .letter, .app-tile .add-icon {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      object-fit: contain;
      flex-shrink: 0;
    }
    /* Kept at .app-tile-level specificity: the ".app-tile span" label rule
       below is (0,1,1) and would otherwise win the font-size here. */
    .app-tile .letter, .app-tile .add-icon {
      display: grid;
      place-items: center;
      font-size: 17px;
      font-weight: 600;
      color: #061019;
      background: var(--accent);
    }
    .app-tile .add-icon {
      background: none;
      border: 1.5px dashed var(--line-strong);
      color: var(--text-faint);
      font-size: 20px;
      font-weight: 400;
    }
    .app-tile span { font-size: 12px; color: var(--text-dim); line-height: 1.25; }
    .app-tile:hover span { color: var(--text); }

    .tile-wrap { position: relative; display: flex; }
    .tile-wrap .app-tile { flex: 1; }
    .tile-delete {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 22px;
      height: 22px;
      display: none;
      place-items: center;
      border: none;
      border-radius: 50%;
      background: var(--danger);
      color: #fff;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
    }
    .tile-wrap:hover .tile-delete, .tile-delete:focus-visible { display: grid; }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(3, 5, 9, 0.78);
      backdrop-filter: blur(6px);
    }
    .modal-overlay.open { display: grid; }
    .modal { width: min(400px, 100%); padding: 22px; }
    .modal h2 { font-size: 18px; margin-bottom: 16px; }
    .modal .ol-input { margin-bottom: 10px; }
    .modal-actions { display: flex; gap: 8px; margin-top: 14px; }
    .modal-actions .ol-btn { flex: 1; }

    /* Narrow: the rail is a bottom bar, so the column stops fighting it for
       vertical space and the engine picker gives up its seat in the pill. */
    @media (max-width: 820px) {
      /* Needs the descendant selector to outweigh ui.css's
         "body.rail-open .ol-stage" padding-bottom, which otherwise applies
         only when the rail happens to be open. */
      body .ol-stage.home {
        min-height: auto;
        padding: 32px clamp(16px, 3vw, 32px) 100px;
      }
      .hero::before { width: 300px; height: 170px; }
      .search-kbd { display: none; }
    }
    @media (max-width: 480px) {
      .search-engine { display: none; }
      .app-tile { width: 84px; }
    }