#gearhouse-app {
  background: #f3f5f7;
  color: #17212b;
  min-height: 100%;
  overflow: auto;
}

/* phase102 intentionally hides direct-body app panes unless they are explicitly
   allowlisted. Gear House is a direct-body pane, so give its active route a
   deterministic display contract without widening that older global rule. */
html body[data-active-view="gearhouse-app"] > #gearhouse-app#gearhouse-app {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  background: #f3f5f7 !important;
}

/* Direct-body tools sit after the legacy .view-container. Collapse that empty
   container on this route so phone layouts start directly below the app bar. */
html body[data-active-view="gearhouse-app"] > .view-container {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

.gh-shell {
  width: min(1460px, 100%);
  margin: 0 auto;
  padding: 24px clamp(16px, 2.5vw, 36px) 48px;
}

.gh-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #d8dde3;
}
.gh-shell > .gh-header {
  margin: 0 !important;
  padding: 0 0 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gh-header h1,
.gh-dialog h2,
.gh-empty h2 {
  margin: 0;
  letter-spacing: 0;
  color: #101820;
}

.gh-header h1 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.gh-eyebrow {
  margin: 0 0 5px;
  color: #a83b24;
  font-size: .69rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gh-subtitle { margin: 7px 0 0; max-width: 720px; color: #586574; font-size: .91rem; line-height: 1.5; }
.gh-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.gh-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 13px;
  font: inherit;
  font-size: .78rem;
  font-weight: 780;
  letter-spacing: 0;
  cursor: pointer;
}
.gh-btn.primary { background: #a83b24; color: #fff; }
.gh-btn.primary:hover { background: #872f1d; }
.gh-btn.secondary { background: #fff; color: #263442; border-color: #ccd3da; }
.gh-btn.secondary:hover { border-color: #8794a1; background: #f9fafb; }

.gh-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0;
  overflow: hidden;
  border: 1px solid #d7dde3;
  border-radius: 7px;
  background: #d7dde3;
}
.gh-metric {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 105px;
  padding: 15px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #17212b;
  text-align: left;
  font: inherit;
}
button.gh-metric { cursor: pointer; }
button.gh-metric:hover,
button.gh-metric.active { box-shadow: inset 0 3px 0 #a83b24; background: #fffaf8; }
.gh-metric span { color: #697684; font-size: .69rem; font-weight: 760; text-transform: uppercase; }
.gh-metric strong { margin: 5px 0 2px; overflow: hidden; font-size: 1.55rem; line-height: 1.2; text-overflow: ellipsis; }
.gh-metric small { color: #7c8792; font-size: .7rem; }

.gh-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.gh-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #cbd3db;
  border-radius: 6px;
  background: #fff;
}
.gh-search-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .8rem; }
.gh-toolbar select,
.gh-dialog select,
.gh-dialog input,
.gh-dialog textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #c8d0d8;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  color: #17212b;
  font: inherit;
  font-size: .8rem;
  letter-spacing: 0;
}
.gh-dialog textarea { min-height: 78px; resize: vertical; }
.gh-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid #cbd3db;
  border-radius: 6px;
  background: #fff;
}
.gh-filter-tabs button {
  min-height: 38px;
  padding: 6px 10px;
  border: 0;
  border-right: 1px solid #e2e6ea;
  background: transparent;
  color: #5b6875;
  font: inherit;
  font-size: .72rem;
  font-weight: 750;
  cursor: pointer;
}
.gh-filter-tabs button:last-child { border-right: 0; }
.gh-filter-tabs button.active { background: #263442; color: #fff; }

.gh-list { display: grid; gap: 8px; }
.gh-item {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(150px, .25fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 13px 14px;
  border: 1px solid #d7dde3;
  border-radius: 7px;
  background: #fff;
}
.gh-item:hover { border-color: #b2bdc7; box-shadow: 0 3px 12px rgba(20, 30, 40, .05); }
.gh-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gh-item-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d7dde3;
  border-radius: 6px;
  background: #eef1f4;
  color: #384756;
  font-size: 1rem;
}
.gh-item-copy { min-width: 0; }
.gh-item-titleline { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gh-item h3 { margin: 0; overflow: hidden; color: #17212b; font-size: .92rem; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.gh-item p { margin: 3px 0 6px; overflow: hidden; color: #677481; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.gh-source { flex: 0 0 auto; color: #9b3a26; font-size: .66rem; font-weight: 750; text-decoration: none; }
.gh-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gh-tags span {
  padding: 2px 6px;
  border: 1px solid #dde2e7;
  border-radius: 3px;
  background: #f6f7f8;
  color: #66727e;
  font-size: .61rem;
  font-weight: 700;
  text-transform: capitalize;
}
.gh-item-cost { display: grid; min-width: 0; }
.gh-item-cost strong { color: #17212b; font-size: .96rem; }
.gh-item-cost span { color: #65727f; font-size: .63rem; font-weight: 750; text-transform: uppercase; }
.gh-item-cost small { margin-top: 3px; overflow: hidden; color: #7a8691; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.gh-status-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid #d2d8de;
  border-radius: 5px;
}
.gh-status-btn {
  min-width: 52px;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-right: 1px solid #e0e4e8;
  background: #fff;
  color: #687581;
  font: inherit;
  font-size: .66rem;
  font-weight: 760;
  cursor: pointer;
}
.gh-status-btn:last-child { border-right: 0; }
.gh-status-btn.active[data-gh-status="have"] { background: #dff3e8; color: #116039; }
.gh-status-btn.active[data-gh-status="need"] { background: #fde8e4; color: #9b2f21; }
.gh-status-btn.active[data-gh-status="want"] { background: #fff1cf; color: #79530a; }
.gh-item-actions { display: flex; gap: 4px; }
.gh-icon-btn {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #d2d8de;
  border-radius: 5px;
  background: #fff;
  color: #374553;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
.gh-icon-btn:hover { background: #f1f4f6; }
.gh-icon-btn.danger { color: #9b2f21; }

.gh-empty {
  display: grid;
  justify-items: center;
  padding: 64px 20px;
  border: 1px dashed #c8d0d8;
  border-radius: 7px;
  background: #fff;
  color: #667481;
  text-align: center;
}
.gh-empty > div { margin-bottom: 9px; color: #82909c; font-size: 2rem; }
.gh-empty h2 { font-size: 1.1rem; }
.gh-empty p { max-width: 480px; margin: 6px 0 16px; font-size: .8rem; line-height: 1.5; }
.gh-footnote { padding: 15px 2px; color: #7a8792; font-size: .68rem; }

.gh-dialog {
  width: min(720px, calc(100vw - 28px));
  max-height: min(88vh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #bdc6cf;
  border-radius: 7px;
  background: #fff;
  color: #17212b;
  box-shadow: 0 24px 80px rgba(10, 18, 25, .28);
}
.gh-dialog::backdrop { background: rgba(16, 24, 32, .58); }
.gh-dialog-card { display: flex; flex-direction: column; max-height: min(88vh, 820px); padding: 22px; overflow: auto; }
.gh-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.gh-dialog h2 { font-size: 1.25rem; }
.gh-dialog-close {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d3d9df;
  border-radius: 5px;
  background: #fff;
  color: #394754;
  font-size: 1.2rem;
  cursor: pointer;
}
.gh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gh-form-grid label { display: grid; gap: 5px; min-width: 0; color: #566370; font-size: .67rem; font-weight: 760; }
.gh-span-2 { grid-column: 1 / -1; }
.gh-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px solid #e1e5e9; }
.gh-catalog-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #dde2e7;
  border-radius: 6px;
  background: #dde2e7;
}
.gh-catalog-preview > div { display: grid; gap: 3px; padding: 11px; background: #f6f8f9; }
.gh-catalog-preview span { color: #6f7b87; font-size: .62rem; text-transform: uppercase; }
.gh-catalog-preview strong { font-size: .8rem; }
.gh-catalog-preview a { grid-column: 1 / -1; padding: 9px 11px; background: #fff; color: #973822; font-size: .7rem; font-weight: 760; text-decoration: none; }

body.dark #gearhouse-app { background: #151b21; color: #e8edf1; }
body.dark .gh-header,
body.dark .gh-dialog-actions { border-color: #39434c; }
body.dark .gh-header h1,
body.dark .gh-item h3,
body.dark .gh-item-cost strong,
body.dark .gh-dialog h2,
body.dark .gh-empty h2 { color: #f3f6f8; }
body.dark .gh-item,
body.dark .gh-metric,
body.dark .gh-toolbar select,
body.dark .gh-search-wrap,
body.dark .gh-filter-tabs,
body.dark .gh-status-btn,
body.dark .gh-icon-btn,
body.dark .gh-empty,
body.dark .gh-dialog,
body.dark .gh-dialog input,
body.dark .gh-dialog select,
body.dark .gh-dialog textarea,
body.dark .gh-dialog-close { background: #202830; color: #e7ebef; border-color: #3b4650; }
body.dark .gh-metrics { border-color: #3b4650; background: #3b4650; }
body.dark .gh-item-icon,
body.dark .gh-tags span { background: #29333c; color: #cbd3da; border-color: #414c55; }
body.dark .gh-filter-tabs button { color: #c3ccd4; border-color: #414b54; }
body.dark .gh-filter-tabs button.active { background: #d15a3e; color: #fff; }

@media (max-width: 980px) {
  .gh-metrics { grid-template-columns: repeat(3, 1fr); }
  .gh-toolbar { grid-template-columns: 1fr 220px; }
  .gh-filter-tabs { grid-column: 1 / -1; }
  .gh-item { grid-template-columns: minmax(250px, 1fr) minmax(140px, .35fr) auto; }
  .gh-item-actions { grid-column: 3; }
  .gh-status-group { grid-column: 1 / 3; }
}

@media (max-width: 700px) {
  html body[data-active-view="gearhouse-app"] > #gearhouse-app#gearhouse-app {
    height: calc(100dvh - 52px - 66px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - 52px - 66px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #gearhouse-app { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .gh-shell { padding: 14px 12px 28px; }
  .gh-header { align-items: stretch; flex-direction: column; gap: 13px; }
  .gh-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-header-actions .gh-btn.primary { grid-column: 1 / -1; grid-row: 1; }
  .gh-header-actions [data-gh-open-custom] { order: 2; }
  .gh-header-actions [data-gh-export] { order: 3; }
  .gh-subtitle { font-size: .78rem; }
  .gh-metrics { grid-template-columns: repeat(2, 1fr); }
  .gh-metric { min-height: 88px; padding: 12px; }
  .gh-metric strong { font-size: 1.18rem; }
  .gh-toolbar { grid-template-columns: 1fr; }
  .gh-filter-tabs { grid-column: auto; }
  .gh-item {
    grid-template-columns: 1fr auto;
    gap: 11px;
    padding: 12px;
  }
  .gh-item-main { grid-column: 1 / -1; }
  .gh-item-cost { grid-column: 1; }
  .gh-status-group { grid-column: 1 / -1; grid-row: auto; }
  .gh-item-actions { grid-column: 2; grid-row: 2; align-self: end; }
  .gh-status-btn { min-height: 38px; }
  .gh-form-grid { grid-template-columns: 1fr; }
  .gh-span-2 { grid-column: auto; }
  .gh-dialog-card { padding: 16px; }
  .gh-catalog-preview { grid-template-columns: 1fr; }
  .gh-catalog-preview a { grid-column: auto; }
}

@media (max-width: 390px) {
  .gh-header-actions { grid-template-columns: 1fr; }
  .gh-header-actions .gh-btn.primary { grid-column: auto; }
  .gh-metrics { grid-template-columns: 1fr 1fr; }
  .gh-metric:last-child { grid-column: 1 / -1; }
  .gh-item-icon { flex-basis: 36px; width: 36px; height: 36px; }
}