/**

 * HYDRA Tools workspace — basic mobile (≤700px)

 */

@media (max-width: 700px) {

  #hydraToolsShell .hydra-tools-shell__header,

  #hydraToolsShell .tools-header {

    --tools-header-pad-y: 12px;

    padding-top: calc(var(--tools-header-pad-y) + env(safe-area-inset-top, 0px));

    padding-bottom: var(--tools-header-pad-y);

    padding-left: max(16px, env(safe-area-inset-left, 0px));

    padding-right: max(16px, env(safe-area-inset-right, 0px));

    max-height: none;

    min-height: 0;

    height: auto;

    box-sizing: border-box;

  }



  body.is-pwa-standalone.tools-mode #hydraToolsShell .hydra-tools-shell__header,

  body.use-new-ui.is-pwa-standalone.tools-mode #hydraToolsShell .hydra-tools-shell__header {

    padding-top: max(env(safe-area-inset-top, 0px), 28px);

    padding-bottom: 12px;

  }



  body.is-mobile-safari.tools-mode #hydraToolsShell .hydra-tools-shell__header,

  body.use-new-ui.is-mobile-safari.tools-mode #hydraToolsShell .hydra-tools-shell__header {

    padding-top: calc(12px + env(safe-area-inset-top, 0px));

  }



  #hydraToolsShell .tools-header__top {

    gap: 10px;

    align-items: center;

  }



  #hydraToolsShell .hydra-tools-shell__brand,

  #hydraToolsShell .tools-brand {

    flex: 1 1 auto;

    min-width: 0;

    gap: 0;

  }



  #hydraToolsShell .hydra-tools-shell__kicker {

    font-size: 20px;

    letter-spacing: 0.14em;

    margin: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  #hydraToolsShell .hydra-tools-shell__ecosystem {

    font-size: 11px;

    margin: 2px 0 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  #hydraToolsShell .hydra-tools-shell__tagline {

    font-size: 11px;

    margin: 1px 0 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  #hydraToolsShell .tools-brand__tagline--long {

    display: none;

  }



  #hydraToolsShell .tools-brand__tagline--short {

    display: inline;

  }



  #hydraToolsShell .hydra-tools-shell__actions,

  #hydraToolsShell .tools-header__actions {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 6px;

    width: auto;

    justify-content: flex-end;

  }



  #hydraToolsShell .hydra-tools-shell__back-btn {

    flex: 0 0 auto;

    height: 34px;

    min-height: 34px;

    padding: 0 10px;

    font-size: 12px;

    border-radius: 12px;

  }



  #hydraToolsShell .hydra-tools-shell__btn-label--long {

    display: none;

  }



  #hydraToolsShell .hydra-tools-shell__btn-label--short {

    display: inline;

  }



  #hydraToolsShell .hydra-tools-shell__avatar {

    width: 38px;

    height: 38px;

    font-size: 13px;

  }



  #hydraToolsShell .hydra-tools-shell__main {

    padding: 16px 16px 28px;

  }



  #hydraToolsShell .pw-tool__top {

    display: none !important;

  }



  #hydraToolsShell .tools-empty-panel__card {

    padding: 32px 22px 28px;

    border-radius: 20px;

  }



  #hydraToolsShell .tools-empty-panel__icon {

    width: 72px;

    height: 72px;

    margin-bottom: 16px;

    border-radius: 18px;

  }



  #hydraToolsShell .tools-empty-panel__svg {

    width: 44px;

    height: 44px;

  }



  #hydraToolsShell .tools-empty-panel__lead {

    font-size: 16px;

  }



  #hydraToolsShell .tools-empty-panel__note {

    font-size: 14px;

  }



  #hydraToolsShell .tools-dash-tile {

    min-height: 110px;

    max-height: 124px;

    padding: 12px 14px;

    grid-template-columns: 40px 1fr 26px;

    gap: 10px 12px;

  }



  #hydraToolsShell .tools-dash-tile__icon {

    width: 40px;

    height: 40px;

    border-radius: 11px;

  }



  #hydraToolsShell .tools-dash-tile__icon svg {

    width: 20px;

    height: 20px;

  }



  #hydraToolsShell .tools-dash-tile__title {

    font-size: 15px;

  }



  #hydraToolsShell .tools-dash-tile__stat {

    font-size: 13px;

  }



  #hydraToolsShell .tools-apps-container--dashboard {

    gap: 10px;

  }



  #hydraToolsShell .tools-workspace__inner--pw,

  #hydraToolsShell .tools-workspace__inner--ht,

  #hydraToolsShell .tools-workspace__inner--st {

    max-width: 100%;

  }



  #hydraToolsShell .pw-tool__hero {

    flex-direction: column;

    align-items: stretch;

    padding: 16px 18px;

  }



  #hydraToolsShell .pw-rate {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    width: 100%;

  }



  #hydraToolsShell .pw-rate__input {

    width: 100px;

  }



  #hydraToolsShell .pw-list-toolbar {

    flex-direction: column;

    align-items: stretch;

    gap: 8px;

    padding: 12px 14px;

  }



  #hydraToolsShell .pw-list-toolbar__search-wrap {

    flex: 1 1 auto;

    min-width: 0;

  }



  #hydraToolsShell .pw-list-toolbar__select {

    width: 100%;

  }



  #hydraToolsShell .pw-list-toolbar__count {

    margin-left: 0;

    text-align: right;

  }



  #hydraToolsShell .pw-tool__actions {

    flex-direction: column;

    width: 100%;

  }



  #hydraToolsShell .pw-btn:not(.pw-acq__refresh-all),

  #hydraToolsShell .pw-btn--file {

    width: 100%;

    justify-content: center;

  }

  /* TASK-788/789: Acq footer CTAs must stay one row — undo width:100% above. */
  #hydraToolsShell .pw-acq__footer > .pw-btn,
  #hydraToolsShell .pw-acq__input-toolbar .pw-acq__refresh-all {

    width: auto !important;

    max-width: none !important;

    flex: 1 1 0 !important;

  }

  #hydraToolsShell .pw-acq__input-toolbar .pw-acq__refresh-all {

    flex: 0 0 auto !important;

  }

  #hydraToolsShell .pw-acq__input-toolbar {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

  }

  #hydraToolsShell .pw-acq__input-toolbar .pw-acq__tabs {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

  }



  #hydraToolsShell .pw-desktop-only {

    display: none !important;

  }



  #hydraToolsShell .pw-mobile-only {

    display: block !important;

  }

  #hydraToolsShell .pw-module-header.pw-mobile-only {

    display: flex !important;

    flex-flow: row nowrap;

    align-items: center;

  }



  #hydraToolsShell .pw-import-result__stats {

    grid-template-columns: repeat(2, 1fr);

  }



  #hydraToolsShell .pw-drawer,

  #hydraToolsShell .pw-drawer--wide,

  #hydraToolsShell .pw-hist-drawer {

    width: 100vw;

    max-width: 100vw;

  }



  #hydraToolsShell .pw-drawer__kpis {

    grid-template-columns: 1fr;

  }



  #hydraToolsShell .pw-hist-analytics,
  #hydraToolsShell .pw-hist-analytics--primary,
  #hydraToolsShell .pw-hist-analytics--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #hydraToolsShell .pw-hist-hero .hti-detail-hero__img {
    max-height: 120px;
  }

  #hydraToolsShell .pw-table--history .pw-col-src,
  #hydraToolsShell .pw-table--history th.pw-col-src {
    display: none;
  }

  #hydraToolsShell .pw-drawer__close {

    width: 44px;

    height: 44px;

    font-size: 22px;

  }



  /* ---- Modal close: iOS safe-area + 44px touch targets (all Hydra Tools popups) ---- */

  body.is-pwa-standalone.tools-mode #hydraToolsShell,
  body.use-new-ui.is-pwa-standalone.tools-mode #hydraToolsShell,
  body.is-pwa-standalone.tools-mode #hitModalHost,
  body.use-new-ui.is-pwa-standalone.tools-mode #hitModalHost,
  body.is-pwa-standalone.tools-mode #storageItemModalHost,
  body.use-new-ui.is-pwa-standalone.tools-mode #storageItemModalHost {
    --tools-modal-header-pad-top: max(calc(var(--tools-modal-close-inset) + var(--tools-modal-safe-top)), 28px);
  }



  #hydraToolsShell .pw-modal__close,
  #hydraToolsShell .pw-drawer__close,
  #hitModalHost .hit-modal__close,
  #storageItemModalHost .storage-item-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }



  #hydraToolsShell .pw-modal--form .pw-modal__header,
  #hitModalHost .hit-modal--mobile-full .hit-modal__header,
  #hitModalHost .hit-modal--week-hit .hit-modal__header,
  #hitModalHost .hit-entry-modal .hit-modal__header,
  #hydraToolsShell .pw-drawer__head,
  #hydraToolsShell .pw-drawer__head--sticky {
    padding-top: var(--tools-modal-header-pad-top);
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }



  #hitModalHost .hit-modal--mobile-full .hit-modal__header,
  #hitModalHost .hit-modal--week-hit .hit-modal__header,
  #hitModalHost .hit-entry-modal .hit-modal__header {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }



  #hydraToolsShell .pw-drawer__head,
  #hydraToolsShell .pw-drawer__head--sticky {
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }

}



@media (max-width: 380px) {

  #hydraToolsShell .hydra-tools-shell__back-btn--sub .hydra-tools-shell__btn-label--text {

    display: none;

  }



  #hydraToolsShell .hydra-tools-shell__back-btn--sub {

    width: 34px;

    min-width: 34px;

    padding: 0;

  }

}


