/* V1 planned-tool negative state, adapted only to TARGETED.ARMY Components V2 tokens. */
.ta-planned-tool-page main { overflow: hidden; }

.panel-page-header {
  position: relative;
  padding: 2rem 0 4.5rem;
  overflow: hidden;
  background: #0d0e10;
  color: #fff;
}
.panel-page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
  pointer-events: none;
}
.panel-page-frame {
  position: relative;
  padding: 24px;
  border: 1px solid #4b4d52;
  border-radius: 0;
  background: linear-gradient(145deg, #1c1d20, #111214);
  box-shadow: 13px 14px 0 rgba(0,0,0,.28), -4px -4px 0 color-mix(in srgb, var(--ta-accent) 11%, transparent);
}
.panel-page-frame::before,
.panel-page-frame::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.panel-page-frame::before { left: -1px; top: -1px; border-left: 2px solid var(--ta-accent); border-top: 2px solid var(--ta-accent); }
.panel-page-frame::after { right: -1px; bottom: -1px; border-right: 2px solid var(--ta-accent); border-bottom: 2px solid var(--ta-accent); }
.panel-page-topline {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #7f8187;
  font: 10px/1.25 var(--ta-font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.panel-page-status {
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid #7b5b28;
  border-radius: 2px;
  background: #2a2115;
  color: #e2b766;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}
.panel-page-title-row {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: center;
  gap: 18px;
  margin: 23px 0 22px;
}
.panel-page-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #4b4d52;
  border-left: 3px solid var(--ta-accent);
  border-radius: 7px;
  background: #151618;
  color: var(--ta-accent);
}
.panel-page-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.panel-page-title-copy { min-width: 0; }
.panel-page-title-copy h1 { margin: 0 0 8px; color: #fff; font-size: clamp(32px,4vw,46px); line-height: 1.05; letter-spacing: -.045em; }
.panel-page-title-copy p { max-width: 780px; margin: 0; color: #9b9da3; font-size: .8125rem; line-height: 1.6; }
.panel-page-body { margin: 0 -24px -24px; padding: 24px; border-top: 1px solid #36383d; border-radius: 0; background: #141517; }

.topic-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.topic-badges a { padding: .35rem .55rem; border: 1px solid #4b4242; background: #171313; color: #e5ded6; font-size: .7rem; font-weight: 700; line-height: 1.1; text-decoration: none; }
.topic-badges a:hover, .topic-badges a:focus-visible { border-color: var(--ta-accent); color: #fff; }

.tool-workspace { padding: 18px 0 8px; background: transparent; }
.workspace-panel { max-width: 760px; margin: 0 auto; padding: 50px; border: 1px solid var(--ta-line); background: var(--ta-surface); color: var(--ta-text); box-shadow: 12px 12px 0 rgba(0,0,0,.35), -3px -3px 0 color-mix(in srgb, var(--ta-accent) 10%, transparent); }
.workspace-status { color: var(--ta-accent); font: 10px/1 var(--ta-font-mono), monospace; letter-spacing: .16em; text-transform: uppercase; }
.workspace-panel h2 { margin: 24px 0 14px; color: var(--ta-text); font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: -.018em; text-transform: uppercase; }
.workspace-panel p { max-width: 590px; margin: 0 0 32px; color: var(--ta-copy); line-height: 1.7; }
.workspace-panel .button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 0 22px; border: 1px solid #55575c; background: #1b1c1f; color: #e1e3e6; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; box-shadow: 5px 5px 0 color-mix(in srgb, var(--ta-accent) 16%, transparent); transition: background .16s ease,border-color .16s ease,color .16s ease; }
.workspace-panel .button:hover, .workspace-panel .button:focus-visible { border-color: var(--ta-accent); background: var(--ta-accent); color: var(--ta-accent-contrast); }

@media (max-width: 51.25rem) {
  .panel-page-title-row { grid-template-columns: 52px minmax(0,1fr); }
  .panel-page-icon { width: 52px; height: 52px; }
}

@media (max-width: 38.75rem) {
  .panel-page-header { padding: 1.5rem 0 3rem; }
  .panel-page-header .ta-shell { width: min(100% - 30px,1180px); }
  .panel-page-frame { padding: 17px; box-shadow: 7px 8px 0 rgba(0,0,0,.28), -2px -2px 0 color-mix(in srgb, var(--ta-accent) 10%, transparent); }
  .panel-page-topline { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .panel-page-body { margin: 0 -17px -17px; padding: 17px; }
  .panel-page-title-row { grid-template-columns: 44px minmax(0,1fr); gap: 13px; margin: 18px 0; }
  .panel-page-icon { width: 44px; height: 44px; }
  .panel-page-icon svg { width: 22px; height: 22px; }
  .panel-page-title-copy h1 { font-size: clamp(29px,9vw,36px); }
  .panel-page-title-copy p { font-size: 12px; }
  .workspace-panel { padding: 32px 24px; }
}