:root{
  --toh-blue:#224351;
  --toh-cream:#F0F0EC;
  --toh-accent:#C1B200;
  --toh-ink:#17323D;
  --toh-muted:#6D7E85;
  --toh-line:#D8DEE0;
  --toh-context:#9EA9AE;
}
.toh-jd{
  font-family:Lato,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--toh-ink);
  background:var(--toh-cream);
  border-radius:24px;
  padding:clamp(20px,4vw,42px);
  max-width:1180px;
  margin:0 auto;
}
.toh-jd *{box-sizing:border-box}
.toh-jd__eyebrow{
  color:#7E7500;
  font-weight:800;
  letter-spacing:.08em;
  font-size:12px;
  margin-bottom:8px;
}
.toh-jd h2,.toh-jd h3{
  color:var(--toh-blue);
  font-family:Futura,"Trebuchet MS",sans-serif;
}
.toh-jd__header h2{
  font-size:clamp(30px,4vw,48px);
  line-height:1.05;
  margin:0 0 12px;
  max-width:900px;
}
.toh-jd__header p{
  font-size:18px;
  line-height:1.55;
  color:#48616A;
  max-width:900px;
  margin:0 0 24px;
}
.toh-jd__input-card,
.toh-jd__interpretation,
.toh-jd__next{
  background:#fff;
  border:1px solid rgba(34,67,81,.12);
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 24px rgba(34,67,81,.05);
}
.toh-jd textarea{
  width:100%;
  min-height:320px;
  resize:vertical;
  margin-top:10px;
  border:1px solid var(--toh-line);
  border-radius:14px;
  padding:15px;
  color:var(--toh-ink);
  font:inherit;
  line-height:1.5;
  outline:none;
}
.toh-jd textarea:focus{
  border-color:var(--toh-blue);
  box-shadow:0 0 0 3px rgba(34,67,81,.08);
}
.toh-jd__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.toh-jd__button{
  display:inline-block;
  border:0;
  border-radius:12px;
  padding:11px 15px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.toh-jd__button--primary{background:var(--toh-blue);color:#fff}
.toh-jd__button--secondary{background:#fff;color:var(--toh-blue);border:1px solid var(--toh-line)}
.toh-jd__privacy{font-size:12px;color:var(--toh-muted);margin-top:12px;line-height:1.45}
.toh-jd__error{margin-top:12px;padding:12px 14px;background:#FCECEC;border:1px solid #E6BABA;border-radius:12px;color:#842A2A}
.toh-jd__loading{display:flex;align-items:center;gap:12px;padding:22px 4px;color:#526A73;font-weight:700}
.toh-jd__loading[hidden]{display:none!important}
.toh-jd__spinner{width:22px;height:22px;border:3px solid #CFD7DA;border-top-color:var(--toh-blue);border-radius:50%;animation:toh-spin .8s linear infinite}
@keyframes toh-spin{to{transform:rotate(360deg)}}
.toh-jd__results{margin-top:22px}
.toh-jd__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.toh-jd__metric{background:#fff;border:1px solid var(--toh-line);border-radius:16px;padding:16px}
.toh-jd__metric-number{display:block;font-size:34px;font-weight:900;line-height:1;color:var(--toh-ink)}
.toh-jd__metric-label{display:block;color:var(--toh-muted);margin-top:7px;font-size:14px}
.toh-jd__bar{height:13px;display:flex;overflow:hidden;border-radius:999px;background:#E9EDEE;margin:14px 0}
.toh-jd__bar-segment{height:100%;width:0;transition:width .3s ease}
.toh-jd__bar-segment--objective{background:var(--toh-blue)}
.toh-jd__bar-segment--subjective{background:var(--toh-accent)}
.toh-jd__bar-segment--context{background:var(--toh-context)}
.toh-jd__meaningful{display:flex;justify-content:space-between;gap:15px;align-items:center;background:#fff;border:1px solid var(--toh-line);border-radius:15px;padding:14px 16px;margin-bottom:14px}
.toh-jd__meaningful span{color:#526871}.toh-jd__meaningful strong{color:var(--toh-blue);font-size:18px}
.toh-jd__interpretation{margin-bottom:15px;background:var(--toh-blue);color:#fff;border-color:var(--toh-blue)}
.toh-jd__interpretation h3{color:#fff;margin:0 0 8px}
.toh-jd__interpretation p{margin:0;line-height:1.55}
.toh-jd__review-note{margin-top:8px!important;color:#F4F0BE}
.toh-jd__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 12px}
.toh-jd__tab{border:1px solid var(--toh-line);background:#fff;color:#526871;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.toh-jd__tab.is-active{background:var(--toh-blue);color:#fff;border-color:var(--toh-blue)}
.toh-jd__items{display:grid;gap:10px}
.toh-jd__item{background:#fff;border:1px solid var(--toh-line);border-left:7px solid var(--toh-context);border-radius:15px;padding:14px 15px}
.toh-jd__item[data-classification="objective"]{border-left-color:var(--toh-blue)}
.toh-jd__item[data-classification="subjective"]{border-left-color:var(--toh-accent)}
.toh-jd__item[data-classification="context"]{border-left-color:var(--toh-context)}
.toh-jd__item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.toh-jd__item-text{font-size:15px;line-height:1.5;margin:0;white-space:pre-wrap}
.toh-jd__pill{flex:none;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}
.toh-jd__pill--objective{background:rgba(34,67,81,.11);color:var(--toh-blue)}
.toh-jd__pill--subjective{background:rgba(193,178,0,.20);color:#6C6400}
.toh-jd__pill--context{background:#EDF0F1;color:#59686E}
.toh-jd__item-why,.toh-jd__item-guidance{font-size:12px;line-height:1.5;color:#64777F;margin-top:8px}
.toh-jd__confidence{display:inline-block;margin-left:7px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#7C8A8F}
.toh-jd__override{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.toh-jd__override button{border:1px solid var(--toh-line);background:#F7F8F8;color:#5B6E75;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800;cursor:pointer}
.toh-jd__override button.is-current{background:#E7ECEE;color:var(--toh-blue)}
.toh-jd__next{margin-top:18px}
.toh-jd__next h3{margin:0 0 8px;font-size:21px}
.toh-jd__next p{color:#49616A;line-height:1.55;margin:0 0 14px}
@media(max-width:700px){
  .toh-jd__metrics{grid-template-columns:1fr}
  .toh-jd__meaningful{display:block}
  .toh-jd__meaningful strong{display:block;margin-top:5px}
  .toh-jd__item-top{display:block}
  .toh-jd__pill{display:inline-block;margin-top:8px}
}
.toh-jd__download-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--toh-line);
  border-radius:15px;
  padding:13px 14px;
  margin:0 0 14px;
}
.toh-jd__download-row span{
  color:var(--toh-muted);
  font-size:12px;
  line-height:1.45;
  flex:1 1 320px;
}
.toh-jd__button--download{
  background:var(--toh-accent);
  color:var(--toh-blue);
  flex:none;
}
.toh-jd__button--download:hover{filter:brightness(.97)}
.toh-jd__button--download:disabled{opacity:.65;cursor:wait}

/* v1.3: paste / upload source selector */
.toh-jd__source-heading{font-size:15px;color:var(--toh-ink);margin-bottom:9px}
.toh-jd__source-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toh-jd__source-tab{
  border:1px solid var(--toh-line);
  background:#fff;
  color:#526871;
  border-radius:999px;
  padding:8px 13px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.toh-jd__source-tab.is-active{background:var(--toh-blue);color:#fff;border-color:var(--toh-blue)}
.toh-jd__source-panel[hidden]{display:none!important}
.toh-jd__upload-box{
  display:flex;
  min-height:260px;
  border:2px dashed #C8D1D4;
  border-radius:16px;
  background:#FAFBFB;
  padding:28px;
  text-align:center;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.toh-jd__upload-box:hover,
.toh-jd__upload-box.is-dragover{border-color:var(--toh-blue);background:#F4F7F7}
.toh-jd__upload-title{display:block;color:var(--toh-blue);font-size:21px;font-weight:900;margin-bottom:6px}
.toh-jd__upload-help{display:block;color:var(--toh-muted);font-size:13px;line-height:1.45;margin-bottom:16px}
.toh-jd__upload-button{display:inline-block;background:var(--toh-blue);color:#fff;border-radius:11px;padding:9px 14px;font-weight:800;font-size:13px;margin-bottom:12px}
.toh-jd__upload-name{display:block;color:#526871;font-size:13px;max-width:100%;overflow-wrap:anywhere}
.toh-jd__file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.toh-jd__sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* v1.5 — protect TOH button colours from Elementor/theme global button styles */
.toh-jd .toh-jd__button.toh-jd__button--primary,
.toh-jd button.toh-jd__button.toh-jd__button--primary,
.toh-jd a.toh-jd__button.toh-jd__button--primary {
  background: #224351 !important;
  background-color: #224351 !important;
  color: #ffffff !important;
  border-color: #224351 !important;
  box-shadow: none !important;
}

.toh-jd .toh-jd__button.toh-jd__button--primary:hover,
.toh-jd button.toh-jd__button.toh-jd__button--primary:hover,
.toh-jd a.toh-jd__button.toh-jd__button--primary:hover {
  background: #1b3641 !important;
  background-color: #1b3641 !important;
  color: #ffffff !important;
  border-color: #1b3641 !important;
}

.toh-jd .toh-jd__button.toh-jd__button--secondary,
.toh-jd button.toh-jd__button.toh-jd__button--secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #224351 !important;
  border: 1px solid #D8DEE0 !important;
}

/* Keep the PDF action deliberately in the TOH accent colour */
.toh-jd .toh-jd__pdf-button,
.toh-jd button.toh-jd__pdf-button,
.toh-jd a.toh-jd__pdf-button {
  background: #C1B200 !important;
  background-color: #C1B200 !important;
  color: #224351 !important;
  border-color: #C1B200 !important;
}


/* v1.7 — slightly larger type for readability across laptop, tablet and mobile */
.toh-jd {
  font-size: 17px;
}

.toh-jd__header p {
  font-size: 19px;
}

.toh-jd__input-card label,
.toh-jd textarea,
.toh-jd__button {
  font-size: 15.5px;
}

.toh-jd__privacy,
.toh-jd__item-why,
.toh-jd__item-guidance {
  font-size: 13.5px;
  line-height: 1.55;
}

.toh-jd__metric-label {
  font-size: 15px;
}

.toh-jd__meaningful {
  font-size: 16px;
}

.toh-jd__meaningful strong {
  font-size: 19.5px;
}

.toh-jd__interpretation p {
  font-size: 16px;
  line-height: 1.6;
}

.toh-jd__tab {
  font-size: 13.5px;
}

.toh-jd__item-text {
  font-size: 16.5px;
  line-height: 1.55;
}

.toh-jd__pill {
  font-size: 12px;
}

.toh-jd__confidence {
  font-size: 11px;
}

.toh-jd__override button {
  font-size: 11px;
}

.toh-jd__next p {
  font-size: 16px;
}

@media(max-width:700px){
  .toh-jd {
    font-size: 16px;
  }
  .toh-jd__header p {
    font-size: 17px;
  }
  .toh-jd__item-text {
    font-size: 16px;
  }
  .toh-jd__item-why,
  .toh-jd__item-guidance {
    font-size: 13px;
  }
}


/* v1.8 — TOH interactive colour update */
:root {
  --toh-interactive: #20828D;
  --toh-interactive-hover: #196D76;
}

/* Main action buttons */
.toh-jd .toh-jd__button.toh-jd__button--primary,
.toh-jd button.toh-jd__button.toh-jd__button--primary,
.toh-jd a.toh-jd__button.toh-jd__button--primary,
.elementor .toh-jd .toh-jd__button.toh-jd__button--primary,
.elementor .toh-jd button.toh-jd__button.toh-jd__button--primary {
  background: #20828D !important;
  background-color: #20828D !important;
  color: #ffffff !important;
  border-color: #20828D !important;
  box-shadow: none !important;
}

.toh-jd .toh-jd__button.toh-jd__button--primary:hover,
.toh-jd button.toh-jd__button.toh-jd__button--primary:hover,
.toh-jd a.toh-jd__button.toh-jd__button--primary:hover,
.elementor .toh-jd .toh-jd__button.toh-jd__button--primary:hover {
  background: #196D76 !important;
  background-color: #196D76 !important;
  border-color: #196D76 !important;
  color: #ffffff !important;
}

/* Active filter pills */
.toh-jd .toh-jd__tab.is-active,
.elementor .toh-jd .toh-jd__tab.is-active {
  background: #20828D !important;
  background-color: #20828D !important;
  border-color: #20828D !important;
  color: #ffffff !important;
}

/* Current manual classification selector */
.toh-jd .toh-jd__override button.is-current,
.elementor .toh-jd .toh-jd__override button.is-current {
  background: rgba(32,130,141,.14) !important;
  color: #20828D !important;
  border-color: rgba(32,130,141,.28) !important;
}

/* Keep Clear neutral */
.toh-jd .toh-jd__button.toh-jd__button--secondary,
.toh-jd button.toh-jd__button.toh-jd__button--secondary,
.elementor .toh-jd .toh-jd__button.toh-jd__button--secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #224351 !important;
  border: 1px solid #D8DEE0 !important;
}

/* PDF remains the brand accent yellow */
.toh-jd .toh-jd__pdf-button,
.toh-jd button.toh-jd__pdf-button,
.toh-jd a.toh-jd__pdf-button,
.elementor .toh-jd .toh-jd__pdf-button {
  background: #C1B200 !important;
  background-color: #C1B200 !important;
  color: #224351 !important;
  border-color: #C1B200 !important;
}


/* v1.9 — one consistent interactive colour across the Decoder */
.toh-jd {
  --toh-interactive: #20828D;
  --toh-interactive-hover: #196D76;
}

/* Analyse + Fundamentals CTA */
.toh-jd .toh-jd__button.toh-jd__button--primary,
.toh-jd button.toh-jd__button.toh-jd__button--primary,
.toh-jd a.toh-jd__button.toh-jd__button--primary,
.elementor .toh-jd .toh-jd__button.toh-jd__button--primary,
.elementor .toh-jd button.toh-jd__button.toh-jd__button--primary {
  background: #20828D !important;
  background-color: #20828D !important;
  border-color: #20828D !important;
  color: #ffffff !important;
}

/* Download PDF */
.toh-jd .toh-jd__button.toh-jd__button--download,
.toh-jd button.toh-jd__button.toh-jd__button--download,
.elementor .toh-jd .toh-jd__button.toh-jd__button--download {
  background: #20828D !important;
  background-color: #20828D !important;
  border-color: #20828D !important;
  color: #ffffff !important;
  filter: none !important;
}

/* Paste text / Upload file selector */
.toh-jd .toh-jd__source-tab.is-active,
.elementor .toh-jd .toh-jd__source-tab.is-active {
  background: #20828D !important;
  background-color: #20828D !important;
  border-color: #20828D !important;
  color: #ffffff !important;
}

/* Choose file */
.toh-jd .toh-jd__upload-button,
.elementor .toh-jd .toh-jd__upload-button {
  background: #20828D !important;
  background-color: #20828D !important;
  color: #ffffff !important;
}

/* Upload box interaction */
.toh-jd .toh-jd__upload-box:hover,
.toh-jd .toh-jd__upload-box.is-dragover {
  border-color: #20828D !important;
  background: rgba(32,130,141,.05) !important;
}

/* All / Objective / Subjective / Context filter tabs */
.toh-jd .toh-jd__tab.is-active,
.elementor .toh-jd .toh-jd__tab.is-active {
  background: #20828D !important;
  background-color: #20828D !important;
  border-color: #20828D !important;
  color: #ffffff !important;
}

/* Manual Context / Objective / Subjective selection */
.toh-jd .toh-jd__override button.is-current,
.elementor .toh-jd .toh-jd__override button.is-current {
  background: rgba(32,130,141,.13) !important;
  background-color: rgba(32,130,141,.13) !important;
  color: #20828D !important;
  border-color: rgba(32,130,141,.40) !important;
}

/* Hover/focus for interactive teal controls */
.toh-jd .toh-jd__button--primary:hover,
.toh-jd .toh-jd__button--download:hover,
.toh-jd .toh-jd__source-tab.is-active:hover,
.toh-jd .toh-jd__tab.is-active:hover {
  background: #196D76 !important;
  background-color: #196D76 !important;
  border-color: #196D76 !important;
  color: #ffffff !important;
}

.toh-jd .toh-jd__button--primary:focus-visible,
.toh-jd .toh-jd__button--download:focus-visible,
.toh-jd .toh-jd__source-tab:focus-visible,
.toh-jd .toh-jd__tab:focus-visible,
.toh-jd .toh-jd__override button:focus-visible {
  outline: 3px solid rgba(32,130,141,.28) !important;
  outline-offset: 2px;
}

/* v2.0 — multilingual language selector */
.toh-jd__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
.toh-jd__header > div:first-child{flex:1 1 auto;min-width:0}
.toh-jd__language{
  flex:0 0 180px;
  background:#fff;
  border:1px solid var(--toh-line);
  border-radius:14px;
  padding:12px 13px;
  box-shadow:0 5px 16px rgba(34,67,81,.04);
}
.toh-jd__language label{
  display:block;
  color:var(--toh-blue);
  font-weight:900;
  font-size:12px;
  margin:0 0 6px;
}
.toh-jd__language select{
  width:100%;
  min-height:40px;
  border:1px solid var(--toh-line);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  color:var(--toh-ink);
  font:inherit;
  font-size:14px;
  outline:none;
}
.toh-jd__language select:focus{
  border-color:#20828D;
  box-shadow:0 0 0 3px rgba(32,130,141,.12);
}
@media(max-width:700px){
  .toh-jd__header{display:block}
  .toh-jd__language{max-width:220px;margin:0 0 20px}
}
