/* ==========================================================================
   NOVA — responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__title { max-width: 20ch; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
}

/* ---------- Mobile / tablet: modern left sidebar drawer ---------- */
@media (max-width: 1180px) {
  .topbar {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .menu-toggle { display: inline-flex; }

  /* Mobile: avoid backdrop blur + transform layers that make text look blurry */
  .page-loader {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }
  .nav-backdrop,
  .palette__backdrop,
  .modal__backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .view.view-enter { animation: novaFadeIn 260ms var(--ease) both; }
  .anim-in { animation: novaFadeIn 300ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 24ms); }
  .noise { display: none; }

  /* Mobile top bar: right-aligned actions, no floating divider, tighter height */
  .topbar__inner { min-height: 64px; padding-block: var(--space-2); gap: var(--space-4); }
  .brand__mark { width: 40px; height: 40px; }
  .brand__text strong { font-size: 1.3rem; }
  /* Push the mobile actions to the right edge */
  .topbar__actions { margin-left: auto; margin-inline-start: auto; padding-left: 0; border-left: none; }

  /* Start tool pages higher up */
  .view > .section:first-child { padding-top: var(--space-5); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

  .topnav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 300px;
    max-width: 86vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border-left: none;
    border-radius: 0 24px 24px 0;
    box-shadow: var(--shadow-2);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease), visibility var(--dur-3) var(--ease);
    z-index: 2;
    overflow: hidden;
    color: var(--text);
  }
  .topnav.is-open { transform: translateX(0); visibility: visible; }

  .topnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex: 0 0 auto;
    padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-5) var(--space-4);
    background: var(--surface);
    border-bottom: var(--border-w) solid var(--line);
  }
  .topnav__head .brand__text strong { font-size: var(--step-1); letter-spacing: 0.05em; }
  .topnav__head .brand__text small { font-size: 0.6rem; letter-spacing: 0.24em; color: var(--text-faint); margin-top: 3px; }
  .topnav__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .topnav__brand .brand__mark { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; }
  .topnav__brand .brand__text strong { font-size: var(--step-1); letter-spacing: 0.02em; }
  .topnav__close { border-radius: 50%; flex: 0 0 auto; }

  .topnav__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: var(--space-5) 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .topnav__group { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .topnav__label {
    display: block;
    padding: 0 0.75rem;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-faint);
  }
  .topnav__links { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }

  .topnav__links a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 46px;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    font-size: var(--step-0);
    font-weight: 500;
    color: var(--text-dim);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
                background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .topnav.is-open .topnav__links a { opacity: 1; transform: none; }
  .topnav.is-open .topnav__links a:nth-child(1) { transition-delay: 70ms; }
  .topnav.is-open .topnav__links a:nth-child(2) { transition-delay: 110ms; }
  .topnav.is-open .topnav__links a:nth-child(3) { transition-delay: 150ms; }
  .topnav.is-open .topnav__links a:nth-child(4) { transition-delay: 190ms; }
  .topnav.is-open .topnav__group:nth-child(2) .topnav__links a:nth-child(1) { transition-delay: 230ms; }
  .topnav.is-open .topnav__group:nth-child(2) .topnav__links a:nth-child(2) { transition-delay: 270ms; }
  .topnav.is-open .topnav__group:nth-child(2) .topnav__links a:nth-child(3) { transition-delay: 310ms; }
  .topnav.is-open .topnav__group:nth-child(2) .topnav__links a:nth-child(4) { transition-delay: 350ms; }

  .topnav__links a:active { background: var(--surface-3); }
  .topnav__links a[aria-current="page"] {
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
  }

  .tnav__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-faint);
    transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
  }
  .tnav__icon svg { width: 18px; height: 18px; }
  .topnav__links a[aria-current="page"] .tnav__icon { background: none; border: none; color: var(--bg); }
  .tnav__count {
    display: inline-flex;
    margin-left: auto;
    padding: 0.1em 0.6em;
    border-radius: var(--radius-pill);
    background: none;
    border: none;
    font-size: var(--step--2);
    color: var(--text-faint);
  }

  .drawer-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: var(--border-w) solid var(--line);
    background: var(--surface-2);
    color: var(--text-faint);
    text-align: left;
    transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
  }
  .drawer-search span { flex: 1; font-size: var(--step--1); }
  .drawer-search kbd { font-size: var(--step--2); }
  .drawer-search:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--text); }

  .drawer-theme {
    display: flex;
    gap: 4px;
    width: 100%;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
  }
  .drawer-theme button {
    flex: 1;
    padding: 0.45em 0.6em;
    border-radius: var(--radius-pill);
    font-size: var(--step--2);
    font-weight: 600;
    color: var(--text-dim);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .drawer-theme button:hover { color: var(--text); }
  .drawer-theme button.is-active { background: var(--text); color: var(--bg); }

  .topnav__foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-top: var(--border-w) solid var(--line);
    background: var(--surface-2);
  }
  .topnav__status { margin-bottom: var(--space-1); }
  .topnav__foot .btn--block { width: 100%; }
  .topnav__foot .btn--ghost:hover { background: var(--surface-3); }


  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .ws-main { gap: var(--space-4); }
  .ws-side { position: static; min-width: 0; gap: var(--space-3); }
  .ws-side__head { display: none; }
  .ws-side__back {
    align-self: flex-start;
    padding: 0.4em 0.85em;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
  }
  /* Modern horizontal pill tab strip */
  .ws-side__list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 5px;
    overflow-x: auto;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius-pill);
    scroll-snap-type: x proximity;
  }
  .ws-side__list a {
    flex: 0 0 auto;
    padding: 0.5em 0.95em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    scroll-snap-align: start;
    background: transparent;
    color: var(--text-dim);
    font-weight: 500;
  }
  .ws-side__list a:hover { background: var(--surface-2); color: var(--text); }
  .ws-side__list a.is-active { background: var(--text); color: var(--bg); font-weight: 600; }
  .text-split { grid-template-columns: 1fr; }
  .sitefoot__inner { grid-template-columns: 1fr; }
}

@media (min-width: 1181px) {
  .menu-toggle { display: none; }
  .nav-backdrop { display: none; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .sitefoot__links { grid-template-columns: 1fr 1fr; }
  .hero__stats { gap: var(--space-5); }
  .section { padding-block: var(--space-7); }
  .search-trigger__label, .search-trigger kbd { display: none; }
  .palette { padding-top: 6vh; }
  .palette__hint { display: none; }
  .brand__text small { display: none; }
  .toasts { left: var(--space-4); right: var(--space-4); width: auto; }
  .ws-panel__body { padding: var(--space-4); }
  .ws-panel__head, .ws-panel__foot { padding: var(--space-3) var(--space-4); }
  .field-grid { grid-template-columns: 1fr; }
  .view > .section:first-child { padding-top: var(--space-4); }
  .ws-header h1 { font-size: var(--step-4); }
  .ws-header__desc { font-size: var(--step-1); }
  .hero__panel { padding: var(--space-4); }
  .ws-panel__foot { justify-content: stretch; }
  .ws-panel__foot .btn { flex: 1 1 auto; }

  /* iOS zooms the page when focusing inputs under 16px — keep them at 16px */
  input, select, textarea, .input, .select, .textarea { font-size: 16px; }
}

@media (max-width: 420px) {
  .hero__title { font-size: var(--step-4); }
  .icon-btn { padding-inline: var(--space-2); }
  .dropzone { padding: var(--space-6) var(--space-4); }
}

@media (hover: none) {
  .card--link:hover { transform: none; }
  .btn:hover { transform: none; }
}