/* Chapter 7: the Tool Library. One screen: a shelf that keeps filling, a way to add your own,
   and the marketplace to come. */

.tools { min-height: 100vh; min-height: 100dvh; display: grid; align-items: center; padding: 96px var(--gutter) 40px; }
.tools__inner { width: 100%; max-width: 1360px; margin: 0 auto; display: grid; gap: 26px; }
.tools__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.tools__head .h { font-size: clamp(32px, 3.4vw, 54px); max-width: 16ch; }
.tools__head .lede { margin-top: 12px; }
.tools__controls { display: grid; gap: 10px; justify-items: end; }
.tools__search { display: flex; align-items: center; gap: 10px; width: 280px; height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); color: var(--grey-2); }
.tools__search:focus-within { box-shadow: 0 0 0 1.5px var(--gold-deep), 0 0 0 5px var(--gold-soft); }
.tools__search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.tools__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px var(--sans); color: var(--ink); }
.tools__tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tools__tabs .pill { height: 34px; padding: 0 13px; font-size: 13px; }

.tools__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: stretch; }
.tools__shelf { position: relative; border-radius: 26px; padding: 18px; background: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 1px var(--hairline) inset; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.tools__ticker { display: flex; align-items: center; gap: 8px; color: #7a6231; font-size: 11.5px; }
.tools__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 166, 97, 0.2); }
.tools__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; min-height: 0; }
.tools__empty { grid-column: 1 / -1; color: var(--grey-2); padding: 30px 0; }

/* Each tool card is dressed as the tool: its brand colour, deepened so white type reads on any
   hue, and its logo blown up across the card behind the text. */
.tc { --deep: color-mix(in srgb, var(--b) 62%, #0a0a0a); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; overflow: hidden; isolation: isolate; min-height: 0; will-change: transform; color: #fff;
  background: radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--b) 92%, #fff 8%), transparent 60%), linear-gradient(160deg, var(--deep), color-mix(in srgb, var(--b) 30%, #0a0a0a));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 18px 34px -20px color-mix(in srgb, var(--b) 60%, #000); transition: box-shadow 300ms var(--ease-out); }
.tc__art { position: absolute; right: -16%; bottom: -26%; width: 74%; aspect-ratio: 1; z-index: -1; display: grid; place-items: center; opacity: 0.3; transform: rotate(-14deg); transition: transform 600ms var(--ease-out), opacity 400ms; pointer-events: none; }
.tc__art svg { width: 100%; height: 100%; fill: #fff; }
.tc__art .tc__mono { font: 700 clamp(60px, 7vw, 110px)/1 var(--sans); letter-spacing: -0.06em; color: #fff; }
.tc header { display: flex; align-items: center; gap: 8px; }
.tc__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); }
.tc__icon svg { width: 20px; height: 20px; fill: #fff; }
.tc__mono { font: 600 13px var(--mono); color: #fff; }
.tc__kind { color: rgba(255, 255, 255, 0.72); font-size: 10.5px; margin-left: auto; text-align: right; }
.tc__badge { position: absolute; right: 12px; top: 12px; color: #0e0d0b; background: var(--gold); padding: 3px 8px; border-radius: 999px; font-size: 10px; z-index: 1; }
.tc.is-new .tc__kind { visibility: hidden; }
.tc h3 { margin: auto 0 0; padding-top: 10px; font: 600 17px/1.15 var(--sans); letter-spacing: -0.02em; }
.tc p { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.tc__agents { display: flex; }
.tc__agents span { width: 20px; height: 20px; margin-right: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--deep); color: var(--ink); }
.tc__agents .monad-svg { width: 20px; height: 20px; }
.tc__add { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--deep); }
.tc.is-new { box-shadow: 0 0 0 2px var(--gold), 0 18px 34px -20px color-mix(in srgb, var(--b) 60%, #000); }
.tc.is-own { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), 0 18px 34px -20px rgba(0, 0, 0, 0.5); }
.tc.is-own .tc__add { background: var(--gold); color: #0e0d0b; }
@media (hover: hover) and (pointer: fine) {
  .tc:hover .tc__art { transform: rotate(-6deg) scale(1.08); opacity: 0.4; }
  .tc:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 26px 44px -20px color-mix(in srgb, var(--b) 70%, #000); }
}

.tools__side { display: grid; gap: 14px; grid-template-rows: auto 1fr; }
.tools__own { padding: 18px; display: grid; gap: 10px; align-content: start; }
.tools__own-t { margin: 0; font: 600 16px/1.2 var(--sans); letter-spacing: -0.015em; }
.tools__own-b { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--grey-1); }
.tools__own-f { display: flex; gap: 6px; }
.tools__own-f input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 12px; border: 0; background: #f5f4f0; font: 400 12.5px var(--mono); color: var(--ink); outline: 0; }
.tools__own-f input:focus { box-shadow: 0 0 0 1.5px var(--gold-deep); }
.tools__own-msg { margin: 0; min-height: 1.2em; color: var(--grey-2); font-size: 11.5px; }
.tools__own-msg.is-error { color: var(--late); }
.tools__market { padding: 20px; border-radius: 22px; background: linear-gradient(150deg, #1b1a16, #0e0d0b); color: #f1f0eb; display: grid; gap: 8px; align-content: start; position: relative; overflow: hidden; }
.tools__market::after { content: ''; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 166, 97, 0.35), transparent 65%); }
.tools__market .mono { color: var(--gold); font-size: 11px; }
.tools__market p { margin: 0; color: #a19e95; font-size: 13.5px; line-height: 1.45; position: relative; z-index: 1; }
.tools__market .tools__market-t { font: 600 20px/1.2 var(--sans); color: #f1f0eb; letter-spacing: -0.02em; }
.tools__listing { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); font-size: 13px; position: relative; z-index: 1; }
.tools__listing-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f1f0eb; color: #0e0d0b; font: 600 12px var(--mono); }
.tools__listing b { display: block; color: #f1f0eb; }
.tools__listing small { color: #8f8b82; font-size: 11.5px; }
.tools__listing-p { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: var(--gold); color: #0e0d0b !important; font-size: 11px; }

@media (min-width: 901px) and (max-height: 860px) {
  .tools { padding-top: 82px; padding-bottom: 24px; }
  .tools__inner { gap: 16px; }
  .tools__head .lede { display: none; }
  .tc { padding: 12px; gap: 6px; }
  .tc__icon { width: 34px; height: 34px; }
  .tc h3 { padding-top: 4px; }
  .tc p { -webkit-line-clamp: 1; }
}
@media (max-width: 1100px) { .tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .tools { min-height: 0; padding: 96px var(--gutter); }
  .tools__controls { justify-items: start; width: 100%; }
  .tools__search { width: 100%; }
  .tools__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); width: calc(100% + var(--gutter) * 2); }
  .tools__tabs::-webkit-scrollbar { display: none; }
  .tools__body { grid-template-columns: minmax(0, 1fr); }
  .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tools__shelf { padding: 12px; border-radius: 22px; }
  .tc { padding: 12px; gap: 6px; border-radius: 16px; }
  .tc { min-height: 168px; }
  .tc__icon { width: 32px; height: 32px; border-radius: 10px; }
  .tc__icon svg { width: 16px; height: 16px; }
  .tc__art { width: 90%; right: -24%; bottom: -20%; }
  .tc__kind { font-size: 9.5px; }
  .tc h3 { font-size: 15px; }
  .tc p { font-size: 12px; }
  .tc__agents span, .tc__agents .monad-svg { width: 18px; height: 18px; }
  .tc__add { padding: 4px 9px; font-size: 11px; }
}