/* I4MD · Clinical Atlas / Symptom Directory
   Edition 01 — quieter paper surfaces, rules and contrast; still a reference, not a dashboard.
   Canonical diagnoses and interactions remain in data/disorders.json + script.js. */

.symptoms-section{background:#faf8f3}
.symptoms-head{max-width:1040px;margin-bottom:38px}
.symptoms-head h2{font-size:clamp(55px,6.3vw,90px);margin:12px 0 14px;letter-spacing:-.052em}
.symptoms-head p{font-size:clamp(19px,2vw,26px);color:#60594f}
.symptom-desk{
  display:grid;
  grid-template-columns:clamp(350px,30%,395px) minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  border:1px solid #ded5c9;
  border-radius:16px;
  overflow:hidden;
  min-height:0;
  background:#f4efe7;
  box-shadow:none;
}
.symptom-desk-masthead{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:52px;
  padding:14px 26px;
  background:#eae3d9;
  color:#524a41;
  border-bottom:1px solid #d9d0c5;
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  line-height:1.3;
}
.symptom-desk-masthead span{display:inline-flex;align-items:center;gap:15px}
.symptom-desk-masthead span:last-child{color:#81776b;font-weight:400;letter-spacing:.1em}
.symptom-desk-masthead i{width:2px;height:15px;background:#9b3a30;transform:rotate(18deg);display:inline-block}
.symptom-desk-navigation{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#312d29;
  color:#f1e9dd;
  border-right:1px solid #d7cec2;
}
.symptom-desk-navigation-head,.symptom-desk-navigation-foot,
.symptom-desk-status,.symptom-desk-eyebrow,.symptom-desk-results-head,
.symptom-desk-search>span:first-child{
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.45;
}
.symptom-desk-navigation-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:19px 24px 15px;
  border-bottom:1px solid rgba(233,223,211,.17);
  color:#ded5c9;
}
.symptom-desk-navigation-head span:last-child{color:#b0a597}
.symptom-directory{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:0;
}
.symptom-gate{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:11px;
  min-height:62px;
  padding:10px 22px 10px 24px;
  margin:0;
  background:transparent;
  color:#eee7dc;
  border:0;
  border-bottom:1px solid rgba(234,224,211,.13);
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease;
}
.symptom-gate:hover{background:rgba(255,255,255,.055);color:#fff;transform:none}
.symptom-gate:focus-visible{background:rgba(255,255,255,.065);color:#fff;outline:2px solid #d2a097;outline-offset:-4px}
.symptom-gate.is-selected{
  background:#e9e1d6;
  color:#27221e;
  border-bottom-color:#e9e1d6;
}
.symptom-gate.is-selected::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--clinical-red-bright);
}
.symptom-gate.is-selected::after{
  content:"↗";
  position:absolute;
  right:16px;top:8px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:400;
  color:#95352d;
  opacity:.75;
}
.symptom-gate-number{
  align-self:start;
  margin-top:3px;
  color:#ad9f90;
  font-family:var(--serif);
  font-size:18px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
}
.symptom-gate.is-selected .symptom-gate-number{color:var(--clinical-red)}
.symptom-gate-label{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:3px;
}
.symptom-gate strong{
  margin:0;
  font:400 clamp(23px,2vw,30px)/1.04 var(--serif);
  letter-spacing:-.035em;
}
.symptom-gate-desc{color:#bbb0a4;font-size:11px;line-height:1.45}
.symptom-gate.is-selected .symptom-gate-desc{color:#615a51}
/* Keep the longest category title on one line, with breathing room on desktop. */
@media(min-width:761px){.symptom-gate[data-domain="fails"] strong{white-space:nowrap}}
.symptom-desk-navigation-foot{
  margin-top:auto;
  padding:15px 24px 18px;
  border-top:1px solid rgba(233,223,211,.16);
  color:#b6aa9e;
  font-size:11px;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.5;
}
.symptom-desk-workspace{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:27px clamp(24px,3.5vw,52px) 31px;
  background:var(--clinical-paper);
  background-image:none;
}
.symptom-desk-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-bottom:16px;
  border-bottom:1px solid #d3c9be;
  color:#6b6258;
}
.symptom-desk-status-mark{display:inline-block;margin-left:5px;color:var(--clinical-red);font-size:16px}
.symptom-desk-intro{padding:29px 0 24px}
.symptom-desk-intro-overline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.symptom-desk-eyebrow{color:var(--clinical-red)}
.symptom-desk-domain-number{
  display:inline-block;
  min-width:81px;
  padding:7px 9px;
  border:1px solid #d8cbbd;
  background:#f9f5ee;
  color:var(--clinical-red);
  font-family:var(--serif);
  font-size:17px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
  text-align:center;
  white-space:nowrap;
}
.symptom-desk-intro h3{
  margin:14px 0 15px;
  font-family:var(--serif);
  font-size:clamp(49px,4.8vw,77px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:400;
}
.symptom-desk-intro p{
  margin:0;
  max-width:560px;
  font-family:var(--serif);
  font-size:clamp(17px,1.6vw,21px);
  line-height:1.39;
  color:#514a42;
}
.symptom-desk-formal{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 15px;
  margin-top:19px;
  padding-top:12px;
  border-top:1px solid #ddd3c8;
}
.symptom-desk-formal span{
  color:#8a7e71;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
}
.symptom-desk-formal strong{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--clinical-red);
}
/* Search precedes both filing categories and case results: one prominent entry point. */
.symptom-desk-search{
  grid-column:1/-1;
  display:block;
  margin:0;
  padding:24px clamp(23px,3vw,45px) 28px;
  border-bottom:1px solid #d7cec2;
  background:#f7f1e8;
}
.symptom-desk-search>span:first-child{
  display:block;
  color:#5e554b;
  margin-bottom:12px;
}
.symptom-desk-search-field{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:76px;
  padding:0 24px;
  border:1px solid #bca99b;
  background:#fffdfa;
  border-radius:12px;
  box-shadow:none;
}
.symptom-desk-search-field:focus-within{
  outline:2px solid var(--clinical-red-bright);
  outline-offset:2px;
}
.symptom-desk-search-field>span{
  color:var(--clinical-red);
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
}
.symptom-desk-search-field input{
  width:100%;
  min-width:0;
  padding:20px 0;
  border:0;
  outline:0;
  background:transparent;
  color:#211e1b;
  font-family:var(--sans);
  font-size:clamp(17px,1.5vw,21px);
}
.symptom-desk-search-field input::placeholder{color:#797066;opacity:1}
.symptom-desk-results-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:0 0 12px;
  border-bottom:1px solid #cfc4b8;
  color:#464037;
}
.symptom-desk-results-head span:first-child{color:#7a1e1b}
.symptom-desk-results-head span:last-child{color:#8b8074}
.symptom-desk-results{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:150px;
  padding-top:14px;
  counter-reset:clinical-file;
}
.symptom-match{
  display:grid;
  grid-template-columns:35px minmax(0,1fr) auto;
  grid-template-rows:auto auto auto;
  gap:8px 18px;
  min-width:0;
  padding:20px 0 21px;
  border:0;
  border-bottom:1px solid var(--clinical-rule);
  background:transparent;
  box-shadow:none;
  counter-increment:clinical-file;
}
.symptom-match::before{
  content:counter(clinical-file,decimal-leading-zero);
  grid-column:1;grid-row:1/4;
  align-self:start;
  padding-top:1px;
  color:var(--clinical-red-bright);
  font:400 23px/1 var(--serif);
  letter-spacing:-.05em;
}
.symptom-match-meta{
  grid-column:2/-1;
  grid-row:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 15px;
  color:#74685b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.105em;
  line-height:1.3;
  text-transform:uppercase;
}
.symptom-match-code{color:var(--clinical-red);letter-spacing:.15em}
.symptom-match-meta .dot{vertical-align:middle}
.symptom-match h4{
  grid-column:2;
  grid-row:2;
  min-width:0;
  margin:3px 0 0;
  color:#251f1b;
  font-family:var(--serif);
  font-size:clamp(27px,2.35vw,35px);
  line-height:1.08;
  letter-spacing:-.037em;
  font-weight:400;
  overflow-wrap:anywhere;
}
.symptom-match p{
  grid-column:2;
  grid-row:3;
  margin:0;
  max-width:570px;
  color:#585147;
  font-size:12px;
  line-height:1.59;
}

.symptom-match-open{
  grid-column:3;
  grid-row:2/4;
  align-self:end;
  justify-self:end;
  white-space:nowrap;
  padding:10px 14px;
  border:1px solid #c8b8a8;
  border-radius:9px;
  background:#f7f1e9;
  color:#7e2821;
  cursor:pointer;
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.symptom-match-open:hover{
  border-color:#a77d70;
  background:#efe4d8;
  color:#70221d;
}
.symptom-match-open:focus-visible{
  border-color:#7c2922;
  color:#7c2922;
  outline:2px solid #9c3b31;
  outline-offset:3px;
}
.symptom-desk-empty,.symptom-desk-loading{
  margin:0;
  padding:30px 0;
  border:0;
  background:transparent;
  color:#60564c;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.5;
}
.symptom-desk-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 20px;
  margin-top:auto;
  padding-top:23px;
}
 .symptom-desk-more,.symptom-desk-archive{
  cursor:pointer;
  text-transform:uppercase;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
}
.symptom-desk-more{
  padding:11px 15px;
  border:1px solid #bdab9f;
  border-radius:9px;
  background:#f7f0e8;
  color:var(--clinical-red);
}
.symptom-desk-more[hidden]{display:none}
.symptom-desk-archive{
  margin-left:auto;
  padding:11px 15px;
  border:1px solid #d2c6b9;
  border-radius:9px;
  background:#faf6ef;
  color:#3b352e;
}
.symptom-desk-more:hover,.symptom-desk-archive:hover{
  background:#eee4d8;
  border-color:#af998b;
  text-decoration:none;
}
.symptom-desk-more:focus-visible,.symptom-desk-archive:focus-visible{outline:2px solid #8a2823;outline-offset:4px}
.symptoms-footnote{margin:23px 0 0;color:#72695f;font-size:11px;line-height:1.6}

/* Intermediate widths: preserve the filing-desk hierarchy without truncating records. */
@media(max-width:1180px){
  .symptom-match{grid-template-columns:33px minmax(0,1fr)}
  .symptom-match-meta{grid-column:2}
  .symptom-match-open{grid-column:2;grid-row:4;justify-self:start;margin-top:4px}
}
@media(max-width:1050px){
  .symptom-gate{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 17px}
  .symptom-gate.is-selected::after{right:10px}
  .symptom-desk-masthead{padding-inline:20px}
  .symptom-desk-workspace{padding:25px 23px 29px}
}
@media(max-width:760px){
  .symptoms-head{margin-bottom:28px}
  .symptoms-head h2{font-size:clamp(48px,9.3vw,70px)}
  .symptom-desk{display:block;min-height:0}
  .symptom-desk-masthead{min-height:51px;padding:13px 17px}
  .symptom-desk-masthead span:last-child{font-size:10px}
  .symptom-desk-search{padding:20px 19px 24px}
  .symptom-desk-search-field{min-height:66px;padding-inline:18px;gap:12px}
  .symptom-desk-search-field input{font-size:16px}
  .symptom-desk-navigation{border-right:0}
  .symptom-desk-navigation-head{padding:17px 19px}
  .symptom-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .symptom-gate{
    grid-template-columns:25px minmax(0,1fr);
    gap:8px;
    min-height:80px;
    padding:11px 12px;
    border-right:1px solid rgba(234,224,211,.13);
  }
  .symptom-gate strong{font-size:clamp(20px,3.8vw,27px)}
  .symptom-gate-desc{font-size:10px}
  .symptom-gate-number{font-size:17px}
  .symptom-desk-navigation-foot{padding:16px 19px 20px}
  .symptom-desk-workspace{padding:23px 20px 27px}
  .symptom-desk-intro{padding:26px 0 25px}
  .symptom-desk-intro h3{font-size:clamp(49px,9vw,70px)}
}
@media(max-width:540px){
  .symptom-desk-masthead{align-items:flex-start;flex-direction:column;gap:6px}
  .symptom-desk-masthead span:last-child{margin-left:0}
  .symptom-desk-results{gap:4px}
  .symptom-match{gap:7px 12px;padding:18px 0 19px}
  .symptom-match::before{font-size:21px}
  .symptom-match h4{font-size:clamp(26px,7vw,32px)}
  .symptom-desk-intro p{font-size:18px}
}
@media(max-width:420px){
  .symptom-directory{grid-template-columns:1fr}
  .symptom-gate{
    grid-template-columns:29px minmax(0,1fr);
    gap:9px;
    min-height:62px;
    padding:9px 14px;
    border-right:0;
  }
  .symptom-gate strong{font-size:23px}
  .symptom-gate-desc{font-size:10px}
  .symptom-gate.is-selected::after{display:none}
  .symptom-desk-workspace{padding:22px 16px 24px}
  .symptom-desk-status{font-size:10px;letter-spacing:.06em}
  .symptom-desk-domain-number{min-width:72px}
  .symptom-match{grid-template-columns:26px minmax(0,1fr)}
  .symptom-match-meta{gap:5px 10px;font-size:10px}
  .symptom-desk-search-field{padding-inline:11px}
  .symptom-desk-search-field input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .symptom-gate,.symptom-match-open{transition:none}
}

/* Mobile symptom selections move readers directly to the filing-desk result.
   Reserve a small margin above the result introduction for legibility. */
.symptom-desk-intro{scroll-margin-top:16px}