/* Kadabra Room v20 — Tools for Devs cassette and catalog
   Loaded after the room styles so this can refine the service reel and the
   dedicated tools program without changing game/demo behavior. */

:root {
  --tools-blue: #6f9aab;
  --tools-blue-deep: #233f4c;
  --tools-cream: #e9ddba;
  --tools-brass: #b89554;
  --tools-ink: #0b1012;
}

.tools-services-link {
  border-color: rgba(112, 166, 184, .54) !important;
  background: linear-gradient(180deg, rgba(91, 145, 163, .14), rgba(0, 0, 0, .12)) !important;
  color: #b8dce6 !important;
}
.tools-services-link:hover,
.tools-services-link:focus-visible {
  border-color: rgba(157, 214, 229, .86) !important;
  color: #e2f4f7 !important;
}

.library-tools-key { color: #9fcbd5 !important; }
.library-tools-key i { color: #6fa9ba; font-style: normal; }

/* Physical service reel. It intentionally uses a cool inventory label so it
   cannot be confused with the red/green Demo Ready stickers. */
.tape-stack .tools-service-tape {
  box-shadow:
    inset 0 1px rgba(255,255,255,.1),
    inset 0 -2px 2px rgba(0,0,0,.72),
    0 8px 14px rgba(0,0,0,.55),
    0 0 0 1px rgba(92,154,174,.22) !important;
}
.tape-stack .tools-service-tape .tape-meta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.1) 22%, rgba(0,0,0,.07) 100%),
    linear-gradient(90deg, rgba(0,0,0,.1), transparent 12% 88%, rgba(0,0,0,.15)),
    #6d96a5 !important;
  border-color: rgba(17, 42, 50, .58) !important;
}
.tape-stack .tools-service-tape .tape-title,
.tape-stack .tools-service-tape .tape-code {
  color: #0d1b20 !important;
  text-shadow: 0 1px rgba(255,255,255,.2) !important;
}
.tape-stack .tools-service-tape .tape-title {
  font-size: 8.7px !important;
  letter-spacing: .055em !important;
}
.tape-stack .tools-service-tape .tape-format { font-size: 6.7px !important; }

.tape-service-sticker {
  position: absolute !important;
  z-index: 13 !important;
  top: 4px;
  right: 31px;
  display: grid;
  justify-items: center;
  min-width: 46px;
  padding: 2px 4px 2px;
  border: 1px solid rgba(10, 28, 34, .76);
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), transparent 40%),
    #71b1c4;
  color: #0b2027;
  box-shadow: 0 1px 2px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: rotate(1.4deg);
  pointer-events: none;
  font-family: var(--mono);
  text-transform: uppercase;
}
.tape-service-sticker strong {
  font: 900 5.6px/1 var(--mono);
  letter-spacing: .09em;
  white-space: nowrap;
}
.tape-service-sticker small {
  margin-top: 1px;
  padding: 1px 3px;
  background: #203e4a;
  color: #d9edf2;
  font: 900 4.3px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Dedicated TV catalog. */
.tools-program {
  --tools-panel: rgba(12, 18, 19, .88);
  --tools-line: rgba(190, 157, 91, .42);
  --tools-muted: #a9b9ad;
  padding-bottom: 24px;
  color: #dce6d7;
}
.tools-program .program-topline { color: #8fbac4; }
.tools-heading .program-kicker { color: #85b5c2; }
.tools-heading .program-title {
  color: #eef3e5;
  text-shadow: 1px 0 rgba(75, 153, 170, .28), -1px 0 rgba(211, 157, 91, .18), 0 0 13px rgba(151, 202, 214, .14);
}
.tools-heading .program-tagline { color: #c9d8cd; }

.tools-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(190px, .88fr);
  gap: 13px;
  margin: 11px 0 13px;
  padding: 10px;
  border: 1px solid var(--tools-line);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(59, 110, 122, .12), transparent 52%),
    rgba(5, 8, 9, .78);
  box-shadow: inset 0 0 22px rgba(0,0,0,.42), 0 4px 11px rgba(0,0,0,.32);
}
.tools-hero-panel::after {
  content: "KCV DEVELOPMENT SERVICES · CATALOG 08";
  position: absolute;
  right: 9px;
  bottom: 6px;
  color: rgba(176, 198, 190, .34);
  font: 700 6px/1 var(--mono);
  letter-spacing: .15em;
  pointer-events: none;
}
.tools-hero-panel > img {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid rgba(117, 159, 170, .36);
  background: #060a0b;
}
.tools-hero-panel > div {
  align-self: center;
  min-width: 0;
  padding: 9px 9px 17px 2px;
}
.tools-hero-panel > div > span {
  color: #8bc3cf;
  font: 900 7px/1 var(--mono);
  letter-spacing: .2em;
}
.tools-hero-panel h3 {
  margin: 8px 0 8px;
  color: #eadcb8;
  font: 900 clamp(14px, 2.5vw, 24px)/1.02 var(--ui);
  letter-spacing: .02em;
}
.tools-hero-panel p {
  margin: 0;
  color: #b9c8bd;
  font: 10px/1.5 var(--mono);
}

.tools-program-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
}
.tools-index-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid rgba(105, 151, 163, .38);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%),
    rgba(17, 31, 35, .86);
  color: #c5d8d9;
  font: 800 8px/1.15 var(--ui);
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.tools-index-button span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(188, 153, 83, .46);
  border-radius: 50%;
  color: #dcc58f;
  font: 800 8px/1 var(--mono);
}
.tools-index-button:hover,
.tools-index-button:focus-visible,
.tools-index-button[aria-current="true"] {
  border-color: rgba(137, 193, 207, .78);
  background: linear-gradient(180deg, rgba(104,169,184,.16), rgba(17,31,35,.9));
  color: #f2ead2;
  outline: none;
}

.tools-suite-note {
  margin: 0 0 13px;
  padding: 9px 11px;
  border-left: 3px solid #7cb6c4;
  background: rgba(51, 90, 98, .12);
}
.tools-suite-note strong {
  color: #d7bf82;
  font: 900 7px/1 var(--mono);
  letter-spacing: .19em;
}
.tools-suite-note p {
  margin: 5px 0 0;
  color: #aebfb4;
  font: 9px/1.45 var(--mono);
}

.tool-offer-card {
  scroll-margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(170px, .88fr) minmax(0, 1.12fr);
  gap: 13px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(183, 149, 81, .36);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(65, 110, 117, .08), transparent 56%),
    var(--tools-panel);
  box-shadow: inset 0 0 19px rgba(0,0,0,.28), 0 5px 10px rgba(0,0,0,.24);
}
.tool-offer-card.is-reversed { grid-template-columns: minmax(0, 1.12fr) minmax(170px, .88fr); }
.tool-offer-card.is-reversed .tool-offer-media { order: 2; }
.tool-offer-card.is-reversed .tool-offer-copy { order: 1; }
.tool-offer-media {
  align-self: start;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(105, 157, 168, .3);
  background: #050809;
}
.tool-offer-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #050809;
}
.tool-offer-copy { min-width: 0; }
.tool-offer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.tool-offer-meta span {
  color: #7fb5c1;
  font: 900 15px/1 var(--mono);
}
.tool-offer-meta b {
  max-width: 75%;
  padding: 3px 5px;
  border: 1px solid rgba(113, 164, 176, .36);
  background: rgba(47, 87, 95, .18);
  color: #a8d2d9;
  font: 800 5.8px/1.1 var(--mono);
  letter-spacing: .11em;
  text-align: right;
}
.tool-offer-kicker {
  margin: 0 0 5px;
  color: #bda36a;
  font: 800 6.4px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.tool-offer-copy h3 {
  margin: 0 0 7px;
  color: #eee2c0;
  font: 900 clamp(13px, 2.2vw, 21px)/1.05 var(--ui);
  letter-spacing: .015em;
}
.tool-offer-summary {
  margin: 0 0 9px;
  color: #bdcbbf;
  font: 9.4px/1.5 var(--mono);
}
.tool-offer-copy h4 {
  margin: 0 0 5px;
  color: #82b7c2;
  font: 900 6px/1 var(--mono);
  letter-spacing: .19em;
}
.tool-offer-copy ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tool-offer-copy li {
  position: relative;
  padding-left: 12px;
  color: #acbaaf;
  font: 8.5px/1.38 var(--mono);
}
.tool-offer-copy li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: .05em;
  color: #6fa4b0;
  font-size: 6px;
}
.tool-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.tool-audience span {
  padding: 3px 5px;
  border: 1px solid rgba(185, 151, 85, .28);
  border-radius: 999px;
  background: rgba(103, 78, 35, .12);
  color: #d0bd91;
  font: 700 5.8px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tool-availability {
  display: grid;
  gap: 3px;
  margin: 9px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(184, 151, 84, .18);
  color: #aebcb2;
  font: 7.8px/1.35 var(--mono);
}
.tool-availability strong {
  color: #7fb1bd;
  font: 900 5.8px/1 var(--mono);
  letter-spacing: .18em;
}

.tools-engagement-panel {
  margin: 3px 0 14px;
  padding: 13px;
  border: 1px solid rgba(110, 169, 183, .46);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(76, 137, 151, .17), transparent 58%),
    rgba(8, 13, 14, .9);
  box-shadow: inset 0 0 24px rgba(0,0,0,.32);
}
.tools-engagement-panel h3 {
  margin: 5px 0 7px;
  color: #ece0bd;
  font: 900 clamp(14px, 2.4vw, 22px)/1.05 var(--ui);
}
.tools-engagement-panel > p:not(.tool-offer-kicker) {
  margin: 0;
  color: #b5c4b9;
  font: 9px/1.5 var(--mono);
}
.tools-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.tools-contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(119, 179, 193, .58);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(105, 167, 181, .15), rgba(0,0,0,.14));
  color: #d6ebed;
  font: 800 7px/1 var(--ui);
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
.tools-contact-actions a:hover,
.tools-contact-actions a:focus-visible {
  border-color: #a5d8e3;
  background: rgba(89, 145, 158, .28);
  color: #fff6dc;
  outline: none;
}

@media (max-width: 760px) {
  .tools-hero-panel { grid-template-columns: 1fr; }
  .tools-hero-panel > div { padding: 3px 3px 17px; }
  .tool-offer-card,
  .tool-offer-card.is-reversed { grid-template-columns: 1fr; }
  .tool-offer-card.is-reversed .tool-offer-media,
  .tool-offer-card.is-reversed .tool-offer-copy { order: initial; }
  .tool-offer-media img { max-height: 230px; }
}

@media (max-width: 560px), (pointer: coarse) {
  .tools-services-link { min-height: 44px; }
  .tools-program-index { grid-template-columns: 1fr; }
  .tools-index-button,
  .tools-contact-actions a { min-height: 44px; }
  .tools-hero-panel { padding: 8px; }
  .tool-offer-card { padding: 8px; }
  .tool-offer-copy h3 { font-size: 16px; }
  .tool-offer-summary { font-size: 9px; }
  .tool-offer-copy li { font-size: 8.4px; }
  .tape-service-sticker { right: 29px; min-width: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .tools-index-button,
  .tools-contact-actions a { scroll-behavior: auto; }
}