/* Tool-specific: JWT Decoder
   Layout-only. All colors come from src/shared/css/base.css tokens. */

/* The token input is always LTR (JWTs are ASCII) and uses the mono stack so
   the boundaries between the three segments are visually scannable. */
#text-format #input,
#header-panel #output_header,
#payload-panel #output_payload {
  font-family: var(--font-mono, monospace);
}

#text-format #input {
  min-height: 140px;
  word-break: break-all;
}

/* Privacy callout — single horizontal strip above the input panel. Uses the
   signal-soft token (existing terracotta tint) so it sits adjacent to the
   palette without introducing new colors. */
.privacy-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-signal-soft);
  border-left: 2px solid var(--color-signal);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

[dir="rtl"] .privacy-callout {
  border-left: 0;
  border-right: 2px solid var(--color-signal);
}

.privacy-callout__glyph {
  color: var(--color-signal);
  font-weight: 700;
  flex-shrink: 0;
}

.privacy-callout__body {
  flex: 1;
  line-height: var(--leading-snug);
}

.privacy-callout__title {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.privacy-callout__detail {
  display: block;
  font-family: var(--font-sans);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Claim summary strip — horizontal row of chips between the input and the
   output grid. Each chip is a label+value pair. Wraps to multi-line on
   narrow viewports. */
.claim-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.claim-strip[hidden] {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  border-radius: var(--radius-0);
  max-width: 100%;
  overflow: hidden;
}

.chip__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-faint);
  font-weight: 700;
}

.chip__value {
  color: var(--color-ink);
  font-weight: 600;
  word-break: break-all;
  unicode-bidi: isolate;
}

.chip__relative {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: 2px;
  grid-column: 2;
}

/* Expiry chip carries an explicit state. Two states for v1: active / expired. */
.chip--exp[data-state="active"] {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}

.chip--exp[data-state="active"] .chip__label,
.chip--exp[data-state="active"] .chip__relative {
  color: var(--color-success);
}

.chip--exp[data-state="expired"] {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.chip--exp[data-state="expired"] .chip__label,
.chip--exp[data-state="expired"] .chip__relative {
  color: var(--color-danger);
}

/* Output grid — two read-only panels (header + payload) side by side on
   wide viewports, stacked on mobile. */
.jwt-output-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .jwt-output-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.jwt-output-grid .panel {
  margin-bottom: 0;
}

.jwt-output-grid textarea {
  min-height: 200px;
}

/* Tinted output panel headers — subtle hue distinction between header and
   payload (still entirely from existing tokens). The accent strip uses the
   signal token for the header (header = the algorithm declaration) and the
   ink-muted band for the payload (payload = the data). */
#header-panel .panel__header {
  border-bottom-color: var(--color-signal-soft);
}

#payload-panel .panel__header {
  border-bottom-color: var(--color-rule);
}

/* Verify panel — full-width below the output grid. Hosts the secret input,
   the verify button, and the result strip. */
.verify-panel .panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.verify-panel .secret-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: stretch;
}

.verify-panel input[type="text"],
.verify-panel input[type="password"] {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-code-bg);
  color: var(--color-code-fg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.verify-panel input[type="text"]:focus,
.verify-panel input[type="password"]:focus {
  outline: none;
  border-color: var(--color-signal);
  box-shadow: inset 0 0 0 1px var(--color-signal);
}

/* Verify result strip — a single horizontal box that crossfades between
   three states. Only one micro-interaction on the page: the opacity
   transition on state change. */
.verify-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-rule);
  background: var(--color-bg-elevated);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-radius: var(--radius-0);
  transition: opacity 160ms ease-out, background-color 160ms ease-out,
              border-color 160ms ease-out, color 160ms ease-out;
}

.verify-result__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  font-weight: 700;
}

.verify-result__body {
  flex: 1;
  line-height: var(--leading-snug);
  word-break: break-word;
}

.verify-result--valid {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}

.verify-result--invalid {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.verify-result--unsupported,
.verify-result--alg-none,
.verify-result--no-secret,
.verify-result--no-token {
  background: var(--color-bg-elevated);
  border-color: var(--color-rule-strong);
  color: var(--color-ink-muted);
}

.verify-result--alg-none {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.verify-result--verifying {
  color: var(--color-ink-muted);
  opacity: 0.7;
}

/* Per-panel actions row sits at the bottom of each output textarea panel. */
.jwt-output-grid .actions-row {
  margin-top: var(--space-3);
}

/* RTL: claim strip flows right-to-left automatically (flex). The JWT input
   is forced LTR via dir="ltr" on the element itself. */
[dir="rtl"] .privacy-callout__glyph {
  /* glyph stays on the leading edge — flex handles direction */
}

/* Prose: render the inline three-line token sample as a single block of
   mono text without wrapping inside the segment. */
.prose .example-token {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-code-bg);
  color: var(--color-code-fg);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border-radius: var(--radius-1);
  word-break: break-all;
  white-space: pre-wrap;
}