/* ============================================================================
   INTELTHERAPY — TOOL USABILITY PASS, 13 AUGUST 2026

   The landing-page composition remains intact. This layer keeps the actual
   task — paste, choose, read — together before the editorial option cards.
   ============================================================================ */

.tool-workbench{
  padding:clamp(24px,4vw,54px);
  border:1px solid rgba(0,0,0,.24);
  background:rgba(255,255,255,.32);
  z-index:10
}

.tool-status{
  display:grid;
  grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);
  gap:clamp(18px,4vw,60px);
  align-items:start;
  margin-bottom:clamp(34px,6vh,72px);
  padding-top:16px;
  border-top:2px solid var(--orange)
}
.tool-status-title{
  font-family:var(--anton);
  font-size:clamp(30px,3.6vw,54px);
  line-height:.95;
  color:var(--orange);
  text-transform:uppercase
}
.tool-status-copy{
  max-width:540px;
  font-size:clamp(15px,1.4vw,20px);
  font-weight:600;
  line-height:1.35
}

.tool-action-head{margin-top:clamp(34px,7vh,76px)}
.tool-action-head p{
  margin:12px 0 0;
  color:var(--mute);
  font-size:12px;
  line-height:1.45
}

.tool-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px
}
.tool-action{
  appearance:none;
  min-height:78px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.35);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:600 clamp(13px,1.15vw,16px)/1.25 var(--inter);
  text-align:left;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease
}
.tool-action-number{
  color:var(--mute);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em
}
.tool-action:hover,
.tool-action:focus-visible{
  border-color:var(--orange);
  outline:2px solid transparent
}
.tool-action[aria-pressed="true"]{
  border-color:var(--orange);
  background:var(--orange);
  color:var(--white)
}
.tool-action[aria-pressed="true"] .tool-action-number{color:var(--white)}
.tool-action:disabled{cursor:wait;opacity:.58}

.tool-workbench .result{margin-top:clamp(38px,7vh,76px)}
.tool-workbench .result .out{
  min-height:clamp(220px,38vh,430px);
  padding:20px 0;
  border-top:1px solid rgba(0,0,0,.12);
  outline:none
}
.tool-workbench .out[data-state="empty"]{color:var(--mute)}
.tool-workbench .out[data-state="loading"]{color:var(--orange)}
.tool-workbench .out[data-state="error"]{color:var(--ink)}

#tool .tool-explainers-head{margin-top:clamp(54px,13vh,150px)}
#tool .tool-explainers{margin-top:18px}
#tool .tool-explainers .opt{cursor:default}
#tool .tool-explainers .opt:hover .ti{font-size:clamp(19px,2.4vw,36px)}
#tool .tool-explainers .opt[data-active="true"]{border-top-color:var(--orange)}
#tool .tool-explainers .opt[data-active="true"] .ix,
#tool .tool-explainers .opt[data-active="true"] .ti{color:var(--orange)}
#tool .tool-explainers .opt[data-active="true"] .kd,
#tool .tool-explainers .opt[data-active="true"] .ds{color:var(--ink)}

/* Tool-only refinements. Landing-page frame lengths remain owned by the
   approved base choreography. */
@media(min-width:861px){
  /* The bordered prompt template meets the black column on the same top edge. */
  #tool .pane{padding-top:0;padding-bottom:clamp(70px,14vh,170px)}
  .tool-workbench .field textarea{height:clamp(200px,34vh,390px)}
  #tool .tool-explainers .opt{padding:clamp(52px,12vh,150px) 0}
}

@media(max-width:860px){
  .tool-workbench{padding:clamp(22px,5vw,48px)}
  .tool-status{grid-template-columns:1fr;gap:12px}
  .tool-status-copy{max-width:620px}
  #tool .tool-explainers-head{margin-top:clamp(38px,8vh,76px)}
}

@media(max-width:640px){
  .tool-actions{grid-template-columns:1fr}
  .tool-action{min-height:68px}
  .tool-workbench .result .out{min-height:190px}
}