/* =====================================================
   JWT Decoder - Tool-only Styles
   Sits on top of ChrysoKit's styles.css / themes.
   All classes are prefixed with .jwt- to avoid conflicts.
   =====================================================

   Colour tokens used here are mapped to ChrysoKit's
   existing custom properties where possible, with
   jwt-specific overrides in light/dark blocks.
   ===================================================== */

/* ── JWT-specific colour tokens ── */
:root,
[data-theme="light"] {
  --jwt-surface:       #ffffff;
  --jwt-surface-2:     #f9f5e8;
  --jwt-surface-3:     #f3edda;
  --jwt-border:        #e8dfc0;
  --jwt-border-2:      #d4c9a8;
  --jwt-text:          #1e1a10;
  --jwt-text-2:        #4a3f28;
  --jwt-text-muted:    #7a6a50;
  --jwt-accent:        #d4a373;
  --jwt-accent-dark:   #b8865a;
  --jwt-accent-glow:   rgba(212, 163, 115, 0.14);
  --jwt-textarea-focus-bg: #fdf8ee;

  /* JWT segment palette */
  --jwt-hdr:  #c0392b;
  --jwt-pay:  #6d28d9;
  --jwt-sig:  #0369a1;

  /* Semantic states */
  --jwt-ok:       #16a34a;
  --jwt-ok-bg:    #f0fdf4;
  --jwt-ok-bdr:   #bbf7d0;
  --jwt-err:      #dc2626;
  --jwt-err-bg:   #fff1f2;
  --jwt-err-bdr:  #fecdd3;
  --jwt-warn:     #b45309;
  --jwt-warn-bg:  #fffbeb;
  --jwt-warn-bdr: #fde68a;

  /* Code panel */
  --jwt-code-bg:   #1a160e;
  --jwt-code-text: #e8dfc0;
  --jwt-c-key:     #f6b73c;
  --jwt-c-str:     #6ee7b7;
  --jwt-c-num:     #93c5fd;
  --jwt-c-bool:    #c084fc;
  --jwt-c-null:    #6b7280;
}

[data-theme="dark"] {
  --jwt-surface:    #1c1810;
  --jwt-surface-2:  #231e14;
  --jwt-surface-3:  #2b2418;
  --jwt-border:     #362d1e;
  --jwt-border-2:   #4a3f28;
  --jwt-text:       #f0e8d0;
  --jwt-text-2:     #c8b898;
  --jwt-text-muted: #8a7860;
  --jwt-accent:        #d4a373;
  --jwt-accent-dark:   #e8bb8a;
  --jwt-accent-glow:   rgba(212, 163, 115, 0.10);
  --jwt-textarea-focus-bg: #201b12;

  --jwt-hdr: #f87171;
  --jwt-pay: #a78bfa;
  --jwt-sig: #38bdf8;

  --jwt-ok:       #4ade80;
  --jwt-ok-bg:    #052e16;
  --jwt-ok-bdr:   #166534;
  --jwt-err:      #f87171;
  --jwt-err-bg:   #3b0a0a;
  --jwt-err-bdr:  #7f1d1d;
  --jwt-warn:     #fbbf24;
  --jwt-warn-bg:  #2d1f00;
  --jwt-warn-bdr: #78350f;

  --jwt-code-bg:   #0d0a06;
  --jwt-code-text: #e8dfc0;

  /* dark overrides for hardcoded rgba sig colors */
  --jwt-sig-chip-bg:  rgba(56, 189, 248, 0.18);
  --jwt-sig-chip-bdr: rgba(56, 189, 248, 0.38);
  --jwt-sig-note-bg:  rgba(251, 191, 36, 0.09);
}

/* =====================================================
   TOOL WRAPPER
   ===================================================== */
.jwt-tool {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 2.5rem;
}

/* =====================================================
   CARD  (input container)
   ===================================================== */
.jwt-card {
  background: var(--jwt-surface);
  border: 1.5px solid var(--jwt-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.jwt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.125rem;
  background: var(--jwt-surface-2);
  border-bottom: 1px solid var(--jwt-border);
  gap: .75rem;
  flex-wrap: wrap;
}

.jwt-card-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--jwt-text-muted);
}
.jwt-card-label svg { width: 13px; height: 13px; }

/* ── Action buttons ── */
.jwt-btn-group {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.jwt-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .8rem;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1.5px solid var(--jwt-border-2);
  background: var(--jwt-surface);
  color: var(--jwt-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  line-height: 1;
  white-space: nowrap;
}
.jwt-action-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.jwt-action-btn:hover {
  border-color: var(--jwt-accent);
  color: var(--jwt-accent);
  background: var(--jwt-accent-glow);
}

.jwt-action-btn--danger:hover {
  border-color: var(--jwt-err);
  color: var(--jwt-err);
  background: rgba(220, 38, 38, 0.08);
}

/* ── Textarea ── */
.jwt-textarea {
  width: 100%;
  min-height: 128px;
  padding: 1rem 1.125rem;
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--jwt-text);
  background: var(--jwt-surface);
  border: none;
  outline: none;
  resize: vertical;
  display: block;
  word-break: break-all;
  transition: background .2s;
}
.jwt-textarea::placeholder {
  color: var(--jwt-text-muted);
  opacity: .55;
}
.jwt-textarea:focus {
  background: var(--jwt-textarea-focus-bg);
}

/* ── Colored token preview ── */
.jwt-preview {
  display: none;
  padding: .65rem 1.125rem;
  border-top: 1px solid var(--jwt-border);
  background: var(--jwt-surface-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: .775rem;
  line-height: 1.6;
  word-break: break-all;
}
.jwt-preview.show { display: block; }

.jwt-seg-h   { color: var(--jwt-hdr); font-weight: 700; }
.jwt-seg-p   { color: var(--jwt-pay); font-weight: 700; }
.jwt-seg-s   { color: var(--jwt-sig); font-weight: 700; }
.jwt-seg-dot { color: var(--jwt-text-muted); }

/* =====================================================
   STATUS BAR
   ===================================================== */
.jwt-status {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 600;
  border: 1.5px solid;
  line-height: 1.4;
}
.jwt-status.show { display: flex; }
.jwt-status svg  { width: 15px; height: 15px; flex-shrink: 0; }

.jwt-status--ok   { background: var(--jwt-ok-bg);   border-color: var(--jwt-ok-bdr);   color: var(--jwt-ok);   }
.jwt-status--err  { background: var(--jwt-err-bg);  border-color: var(--jwt-err-bdr);  color: var(--jwt-err);  }
.jwt-status--warn { background: var(--jwt-warn-bg); border-color: var(--jwt-warn-bdr); color: var(--jwt-warn); }
.jwt-status--exp  { background: var(--jwt-err-bg);  border-color: var(--jwt-err-bdr);  color: var(--jwt-err);  }

/* =====================================================
   INFO STRIP
   ===================================================== */
.jwt-strip {
  display: none;
  background: var(--jwt-surface);
  border: 1.5px solid var(--jwt-border);
  border-radius: 12px;
  overflow: hidden;
}
.jwt-strip.show {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.jwt-strip-item {
  padding: .65rem .875rem;
  border-right: 1px solid var(--jwt-border);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.jwt-strip-item:last-child { border-right: none; }

.jwt-strip-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--jwt-text-muted);
}
.jwt-strip-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: .875rem;
  font-weight: 700;
  color: var(--jwt-text);
}

/* =====================================================
   PLACEHOLDER
   ===================================================== */
.jwt-placeholder {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--jwt-text-muted);
}
.jwt-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: .15;
  display: block;
  margin: 0 auto 1.125rem;
}
.jwt-placeholder h3,
.jwt-placeholder h2 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jwt-text-2);
  opacity: .55;
  margin-bottom: .4rem;
}
.jwt-placeholder p {
  font-size: .875rem;
  opacity: .5;
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =====================================================
   OUTPUT PANELS
   ===================================================== */
.jwt-output {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.jwt-panels-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 700px) {
  .jwt-panels-2col { grid-template-columns: 1fr; }
}

/* ── Panel card ── */
.jwt-panel {
  background: var(--jwt-surface);
  border: 1.5px solid var(--jwt-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.jwt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  background: var(--jwt-surface-2);
  border-bottom: 1px solid var(--jwt-border);
}

.jwt-panel-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jwt-text-muted);
}

/* Colored dots */
.jwt-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.jwt-dot--header  { background: var(--jwt-hdr); }
.jwt-dot--payload { background: var(--jwt-pay); }
.jwt-dot--sig     { background: var(--jwt-sig); }

/* Copy button */
.jwt-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .6rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  border: 1px solid var(--jwt-border-2);
  border-radius: 6px;
  background: transparent;
  color: var(--jwt-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.jwt-copy-btn svg { width: 11px; height: 11px; }
.jwt-copy-btn:hover { border-color: var(--jwt-accent); color: var(--jwt-accent); }
.jwt-copy-btn.copied { border-color: var(--jwt-ok); color: var(--jwt-ok); }

/* ── Code blocks ── */
.jwt-code {
  flex: 1;
  margin: 0;
  padding: 1rem 1.125rem;
  background: var(--jwt-code-bg);
  color: var(--jwt-code-text);
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: .8125rem;
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
  min-height: 100px;
}
.jwt-code::-webkit-scrollbar { height: 5px; }
.jwt-code::-webkit-scrollbar-track { background: transparent; }
.jwt-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* JSON syntax tokens */
.jt-key  { color: var(--jwt-c-key); }
.jt-str  { color: var(--jwt-c-str); }
.jt-num  { color: var(--jwt-c-num); }
.jt-bool { color: var(--jwt-c-bool); }
.jt-null { color: var(--jwt-c-null); }

/* =====================================================
   CLAIMS TABLE
   ===================================================== */
.jwt-table-wrap { overflow-x: auto; }

.jwt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
.jwt-table th {
  padding: .55rem 1rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--jwt-text-muted);
  background: var(--jwt-surface-2);
  border-bottom: 1px solid var(--jwt-border);
  white-space: nowrap;
}
.jwt-table td {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--jwt-border);
  vertical-align: top;
}
.jwt-table tr:last-child td { border-bottom: none; }
.jwt-table tr:hover td {
  background: var(--jwt-accent-glow);
}

.jwt-claim-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
  color: var(--jwt-pay);
  white-space: nowrap;
}
.jwt-claim-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  color: var(--jwt-text);
  word-break: break-all;
  line-height: 1.5;
}
.jwt-claim-time {
  display: block;
  font-size: .72rem;
  color: var(--jwt-text-muted);
  margin-top: .1rem;
}
.jwt-claim-desc {
  font-size: .78rem;
  color: var(--jwt-text-muted);
  line-height: 1.5;
}

/* Badges */
.jwt-badge {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: .3rem;
  border: 1px solid;
}
.jwt-badge svg { width: 9px; height: 9px; }
.jwt-badge--ok   { background: var(--jwt-ok-bg);   color: var(--jwt-ok);   border-color: var(--jwt-ok-bdr);   }
.jwt-badge--err  { background: var(--jwt-err-bg);  color: var(--jwt-err);  border-color: var(--jwt-err-bdr);  }
.jwt-badge--warn { background: var(--jwt-warn-bg); color: var(--jwt-warn); border-color: var(--jwt-warn-bdr); }

/* =====================================================
   SIGNATURE PANEL
   ===================================================== */
.jwt-sig-body {
  padding: 1.125rem;
  background: var(--jwt-code-bg);
  flex: 1;
}
.jwt-sig-algo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .875rem;
}
.jwt-sig-algo-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--jwt-code-text);
  opacity: .4;
}
.jwt-sig-chip {
  padding: .2rem .6rem;
  background: var(--jwt-sig-chip-bg, rgba(3, 105, 161, 0.18));
  border: 1px solid var(--jwt-sig-chip-bdr, rgba(3, 105, 161, 0.38));
  color: var(--jwt-sig);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
}
.jwt-sig-raw {
  font-family: 'JetBrains Mono', monospace;
  font-size: .775rem;
  color: var(--jwt-sig);
  word-break: break-all;
  line-height: 1.65;
  opacity: .85;
}
.jwt-sig-note {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-top: .875rem;
  padding: .7rem .9rem;
  background: var(--jwt-sig-note-bg, rgba(180, 83, 9, 0.09));
  border: 1px solid var(--jwt-warn-bdr);
  border-radius: 8px;
  font-size: .775rem;
  color: var(--jwt-warn);
  line-height: 1.55;
}
.jwt-sig-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

/* =====================================================
   ABOUT / FAQ
   ===================================================== */
.jwt-about {
  background: var(--jwt-surface);
  border: 1.5px solid var(--jwt-border);
  border-radius: 14px;
  overflow: hidden;
}
.jwt-about summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.125rem;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--jwt-text-muted);
  background: var(--jwt-surface-2);
  list-style: none;
  user-select: none;
  justify-content: space-between;
}
.jwt-about summary::-webkit-details-marker { display: none; }
.jwt-about summary svg { width: 13px; height: 13px; }
.jwt-about summary::after {
  content: '›';
  font-size: 1.2rem;
  line-height: 1;
  opacity: .45;
  transition: transform .2s;
}
.jwt-about[open] summary::after { transform: rotate(90deg); }

.jwt-about-body {
  padding: 1.125rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--jwt-text-2);
  border-top: 1px solid var(--jwt-border);
}
.jwt-about-body p  { margin-bottom: .75rem; }
.jwt-about-body ul { padding-left: 1.25rem; }
.jwt-about-body li { margin-bottom: .3rem; }
.jwt-about-body a  { color: var(--jwt-accent); text-decoration: none; }
.jwt-about-body a:hover { text-decoration: underline; }
.jwt-about-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82em;
  background: var(--jwt-surface-3);
  padding: .1em .35em;
  border-radius: 4px;
}

/* Segment color helpers used in about section */
.jwt-color--header  { color: var(--jwt-hdr); }
.jwt-color--payload { color: var(--jwt-pay); }
.jwt-color--sig     { color: var(--jwt-sig); }

/* =====================================================
   ANIMATION
   ===================================================== */
@keyframes jwt-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jwt-panel,
.jwt-strip,
.jwt-status { animation: jwt-fade-up .22s ease; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 560px) {
  .jwt-card-head   { flex-direction: column; align-items: flex-start; }
  .jwt-btn-group   { width: 100%; }
  .jwt-action-btn  { flex: 1; justify-content: center; }

  .jwt-strip.show  { grid-template-columns: repeat(3, 1fr); }
  .jwt-strip-item  { border-bottom: 1px solid var(--jwt-border); }

  /* hide Description column on very small screens */
  .jwt-table th:last-child,
  .jwt-table td:last-child { display: none; }
}
@media (max-width: 380px) {
  .jwt-strip.show { grid-template-columns: repeat(2, 1fr); }
}