/* ALLMC tools-only styles. Signal palette. Do not import into homepage layout.
   Prefer shared tokens from allmc.css, with fallbacks.
   Accent #FF3D14 is for marks, large type, icons and focus. Filled controls use --btn.
   Never use 14px white text on #FF3D14. Motion: transform and opacity, 150-250ms. */

.tools-page{
  --tools-bg: var(--bg, #080808);
  --tools-surface: var(--surface, var(--card, #141414));
  --tools-surface-2: var(--surface2, var(--card-2, #1A1A1A));
  --tools-line: var(--line, #2E2E2E);
  --tools-line-2: var(--line-2, #3A3A3A);
  --tools-text: var(--ink, var(--text, #FFFFFF));
  --tools-muted: var(--mut, var(--muted, #A3A3A3));
  --tools-accent: var(--accent, #FF3D14);
  --tools-accent-hover: var(--accent-hover, #FF5329);
  --tools-btn: var(--btn, #DC3010);
  --tools-btn-hover: var(--btn-hover, #D12C0D);
  --tools-btn-active: var(--btn-active, #C4280A);
  --tools-focus: var(--focus, var(--accent, #FF3D14));
  --tools-radius: 15px;
  overflow-x: hidden;
  background-color: var(--tools-bg);
  color: var(--tools-text);
}
.tools-page main.page{
  position: relative;
  isolation: isolate;
}
.tools-page main.page::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.028) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 12% 0%, rgba(255,61,20,.10), transparent 42%);
}
.tools-page main.page > .wrap{position:relative;z-index:1;max-width:1120px}

.tools-page .section-k,
.tools-page .tools-k,
.tools-page .panel-h,
.tools-page .tools-cat{
  font-family: var(--f-mono), "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tools-accent);
  margin: 0 0 16px;
}
.tools-page .tools-cat{
  color: var(--tools-muted);
  margin: 56px 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tools-page .tools-cat::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tools-line);
}

.tools-page h1{
  font-family: var(--f-display), "Syne", var(--sans), sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: .96;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin: 0 0 20px;
  color: var(--tools-text);
}
.tools-page .lead{
  max-width: 38em;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--tools-muted);
  margin: 0 0 32px;
}

.tools-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.tools-jump a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--tools-line);
  border-radius: 999px;
  color: var(--tools-text);
  text-decoration: none;
  font-family: var(--f-mono), "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  transition: transform 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
.tools-jump a:hover{border-color: var(--tools-accent); transform: translateY(-2px)}
.tools-jump a:focus-visible{outline: 2px solid var(--tools-focus); outline-offset: 2px}

.tools-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
a.tool-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px;
  min-height: 220px;
  border-radius: 15px;
  background: var(--tools-surface);
  border: 1px solid var(--tools-line);
  text-decoration: none;
  color: var(--tools-text);
  box-shadow: none;
  transition: transform 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
a.tool-card:hover,
a.tool-card:focus-visible{
  transform: translateY(-3px);
  border-color: var(--tools-accent-hover);
  box-shadow: none;
}
.tool-card-top{display:flex;align-items:flex-start;gap:12px}
.tool-icon{
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  color: var(--tools-accent);
  border: 1px solid var(--tools-line);
  border-radius: 8px;
  background: var(--tools-surface-2);
}
.tool-icon svg{width:20px;height:20px;display:block}
.tool-card b{
  display: block;
  font: 600 16px/1.25 var(--sans);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--tools-text);
}
.tool-card .tool-card-copy{flex:1;min-width:0}
.tool-card span.tool-card-desc,
.tool-card .tool-card-desc{
  display: block;
  color: var(--tools-muted);
  font: 400 13px/1.45 var(--sans);
}
.tool-preview{
  margin-top: auto;
  height: 72px;
  border: 1px solid var(--tools-line);
  border-radius: 8px;
  background: var(--tools-bg);
  padding: 8px;
  overflow: hidden;
  pointer-events: none;
}
.tool-preview .pv-line{height:6px;border-radius:2px;background:rgba(255,255,255,.12);margin:0 0 6px}
.tool-preview .pv-line:nth-child(1){width:82%}
.tool-preview .pv-line:nth-child(2){width:64%}
.tool-preview .pv-line:nth-child(3){width:48%;margin:0}
.tool-preview .pv-pills{display:flex;gap:4px;flex-wrap:wrap}
.tool-preview .pv-pill{
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--tools-line-2);
  background: var(--tools-surface-2);
  width: 42px;
  flex: 0 0 auto;
}
.tool-preview .pv-phone{
  width: 28px;
  height: 52px;
  margin: 0 auto;
  border: 1px solid var(--tools-line-2);
  border-radius: 5px;
  position: relative;
}
.tool-preview .pv-phone i{
  position: absolute;
  left: 3px; right: 3px; bottom: 4px;
  height: 10px;
  background: var(--tools-btn);
  display: block;
}
.tool-preview .pv-bars{display:flex;align-items:flex-end;gap:5px;height:100%;padding:4px 6px}
.tool-preview .pv-bars i{
  display: block;
  width: 14px;
  background: var(--tools-btn);
  border-radius: 1px 1px 0 0;
}
.tool-preview .pv-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:100%}
.tool-preview .pv-cal i{display:block;border:1px solid var(--tools-line);border-radius:2px}
.tool-preview .pv-cal i.on{background: var(--tools-btn); border-color: var(--tools-btn)}
.tool-preview .pv-frame{
  width: 26px;
  height: 46px;
  margin: 0 auto;
  border: 1px dashed rgba(255,61,20,.55);
  border-radius: 3px;
  position: relative;
}
.tool-preview .pv-frame::after{
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 4px;
  height: 8px;
  background: rgba(255,255,255,.1);
}

.tools-note{
  margin-top: 40px;
  padding: 20px;
  border: 1px solid var(--tools-line);
  border-radius: 15px;
  color: var(--tools-muted);
  font-size: 14px;
  line-height: 1.5;
}
.tools-note a{color: var(--tools-text)}

.tools-page .tool{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
  margin-top: 36px;
  align-items: start;
}
.tools-page .panel{
  border: 1px solid var(--tools-line);
  border-radius: 15px;
  background: var(--tools-surface);
  padding: 18px;
}
.tools-page label.f{
  display: block;
  margin: 0 0 12px;
  font-family: var(--f-mono), "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tools-muted);
}
.tools-page input.in,
.tools-page select.in,
.tools-page textarea.in,
.tools-page input,
.tools-page select,
.tools-page textarea{
  font-size: 16px;
  line-height: 1.4;
  border-radius: 15px;
  border: 1px solid var(--tools-line-2);
  min-height: 44px;
  background: var(--tools-surface-2);
  color: var(--tools-text);
}
.tools-page textarea.in{min-height:120px;padding-top:12px}
.tools-page .hero-cta,
.tools-page .tool-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tools-page .hero-cta .btn,
.tools-page .tool-actions .btn,
.tools-page button.btn{
  min-height: 44px;
  min-width: 44px;
}
.tools-page .btn-acc,
.tools-page button.btn-acc{
  background: var(--tools-btn);
  color: #fff;
}
.tools-page .btn-acc:hover,
.tools-page button.btn-acc:hover{background: var(--tools-btn-hover)}
.tools-page .btn-acc:active,
.tools-page button.btn-acc:active{background: var(--tools-btn-active)}
.tools-page pre.out,
.tools-page .out{
  min-height: 240px;
  margin: 0;
  border: 1px solid var(--tools-line);
  border-radius: 15px;
  background: var(--tools-bg);
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--f-mono), "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tools-text);
}
.tools-page .tool-related{
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--tools-line);
}
.tools-page .tool-related .tools-k{margin-bottom:12px}
.tools-page .tool-related-list{display:flex;flex-wrap:wrap;gap:8px}
.tools-page .tool-related-list a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tools-line);
  border-radius: 999px;
  color: var(--tools-text);
  text-decoration: none;
  font-size: 14px;
  background: transparent;
  transition: transform 200ms ease, border-color 200ms ease;
}
.tools-page .tool-related-list a:hover{border-color: var(--tools-accent); transform: translateY(-2px)}
.tools-page .menu-btn{width:44px;height:44px;min-width:44px;min-height:44px}

.tools-page .safezone-stage{
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9/16;
  margin: 0 auto;
  border: 1px solid var(--tools-line);
  border-radius: 15px;
  background: var(--tools-bg);
  position: relative;
  overflow: hidden;
}
.tools-page .safezone-stage canvas{width:100%;height:100%;display:block}

.tools-page .limit-row{margin:0 0 14px}
.tools-page .limit-row header{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--f-mono), "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tools-muted);
  margin-bottom: 6px;
}
.tools-page .limit-bar{
  height: 8px;
  border-radius: 999px;
  background: var(--tools-surface-2);
  border: 1px solid var(--tools-line);
  overflow: hidden;
}
.tools-page .limit-bar > span{
  display: block;
  height: 100%;
  width: 0;
  background: var(--tools-btn);
  transition: transform 200ms ease;
  transform-origin: left center;
}
.tools-page .limit-row.is-over .limit-bar > span{background: var(--tools-btn-active)}
.tools-page .limit-note,
.tools-page .tool-hint{
  color: var(--tools-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* Reveal in allmc.js adds .reveal {opacity:0} to .tool-card. Keep tools visible immediately. */
.tools-page a.tool-card,
.tools-page a.tool-card.reveal,
.tools-page .tool-card,
.tools-page .tool-card.reveal{
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: transform 200ms ease, opacity 200ms ease, border-color 200ms ease;
  transition-delay: 0s;
}
.tools-page a.tool-card:hover,
.tools-page a.tool-card:focus-visible{
  transform: translateY(-3px);
  border-color: var(--tools-accent-hover);
}

@media (max-width: 900px){
  .tools-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .tools-page .tool{grid-template-columns: 1fr}
}
@media (max-width: 700px){
  .tools-grid{grid-template-columns: 1fr}
  .tools-page h1{font-size: clamp(40px, 11vw, 56px); max-width: none}
  a.tool-card{min-height: 200px}
}
@media (prefers-reduced-motion: reduce){
  .tools-page a.tool-card,
  .tools-page .tools-jump a,
  .tools-page .tool-related-list a,
  .tools-page .btn,
  .tools-page .limit-bar > span{
    transition: none;
    transform: none;
  }
  .tools-page a.tool-card:hover,
  .tools-page .tools-jump a:hover,
  .tools-page .tool-related-list a:hover{transform: none}
}

/* Copy buttons and empty/invalid output. Tools pages only. */
.tools-page button.copy,
.tools-page .copy,
.tools-page [data-copy-out],
.tools-page button[data-copy],
.tools-page #copy,
.tools-page .ibtn,
.tools-page .tb9-act,
.tools-page button.btn-ghost{
  min-height: 44px;
  min-width: 44px;
}
.tools-page button.copy,
.tools-page .copy{
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--tools-line);
  border-radius: 15px;
  background: var(--tools-surface);
  color: var(--tools-text);
  font: 600 14px/1 inherit;
  cursor: pointer;
}
.tools-page pre.out.is-empty,
.tools-page .out.is-empty{
  color: var(--tools-muted);
}
@media (prefers-reduced-motion: reduce){
  .tools-page .tool-related-list a,
  .tools-page .tool-related-list a:hover,
  .tools-page button.copy,
  .tools-page [data-copy-out]{
    transition: none;
    transform: none;
  }
}