/* ── 16PF · profile-sheet ─────────────────────────────────────────────
   Ground: warm grey paper. Cards lift lighter, never darker.
   One ink (ballpoint blue). Clay only for out-of-range stens.
   Light only — no dark mode by design.
   ─────────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --paper:      #F2F1EC;
  --raised:     #FAFAF7;
  --sunken:     #EAE8E0;

  --ink:        #22262B;
  --ink-soft:   #6E7378;
  --ink-faint:  #9A9D9F;

  --rule:       #DEDCD4;
  --rule-soft:  #E8E6DE;

  --accent:     #2D4A7C;
  --accent-15:  #E4E9F2;
  --accent-40:  #A9B7CE;

  --clay:       #9C5B34;
  --clay-15:    #F3E7DE;

  --r:   10px;
  --r-s: 7px;
  --gut: 20px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Vazirmatn","IRANSans","Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:16px;
  line-height:1.8;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
#app{ max-width:640px; margin:0 auto; padding:28px var(--gut) 128px }
.loading{ text-align:center; padding:80px 0; color:var(--ink-faint) }

/* ── type ─────────────────────────────────────────────── */
h1{
  font-size:1.5rem; font-weight:800; letter-spacing:-.02em;
  margin:0 0 .15em; line-height:1.45;
}
h2{
  font-size:.76rem; font-weight:700; letter-spacing:.14em;
  color:var(--ink-soft); margin:2.6em 0 .9em;
  padding-bottom:.7em; border-bottom:1px solid var(--rule);
}
p{ margin:.5em 0 }
.sub{ color:var(--ink-soft); font-size:.88rem; margin:0 0 1.8em; line-height:1.7 }
code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.84em; background:var(--sunken); padding:.1em .4em; border-radius:4px;
  direction:ltr; display:inline-block;
}
.code{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  direction:ltr; display:inline-block;
  letter-spacing:.08em; font-weight:700; font-size:.78em;
  color:var(--accent);
}

/* ── surfaces ─────────────────────────────────────────── */
.card{
  background:var(--raised);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:22px;
  margin:16px 0;
}
.card.flush{ padding:16px 18px }

.note{
  background:transparent;
  border:0; border-right:2px solid var(--clay);
  border-radius:0;
  padding:2px 15px 2px;
  margin:18px 0;
  font-size:.86rem; line-height:1.75; color:var(--ink-soft);
}
.note b{ color:var(--clay); font-weight:700 }
.note ul{ margin:.3em 0 0; padding-inline-start:1.1em }
.note.calm{ border-right-color:var(--accent-40) }
.note.calm b{ color:var(--accent) }

/* ── controls ─────────────────────────────────────────── */
button{
  font:inherit; cursor:pointer;
  background:var(--raised); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r-s);
  padding:12px 16px;
  transition:border-color .14s, background .14s, color .14s;
}
button:hover:not(:disabled){ border-color:var(--accent-40) }
button:disabled{ opacity:.4; cursor:default }
button:focus-visible,
input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.btn-primary{
  background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600;
}
.btn-primary:hover:not(:disabled){ background:#26406C; border-color:#26406C }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px }
.btn-row button{ flex:1 1 auto; min-width:132px }

.menu{ padding:8px }
.menu button{
  display:block; width:100%; text-align:right;
  background:transparent; border:0; border-bottom:1px solid var(--rule-soft);
  border-radius:0; padding:17px 14px; font-size:1rem; font-weight:600;
}
.menu button:last-child{ border-bottom:0 }
.menu button:hover{ background:var(--accent-15) }
.menu .hint{
  display:block; color:var(--ink-soft); font-size:.8rem; font-weight:400;
  margin-top:1px; letter-spacing:0;
}
.menu button.lead{
  color:var(--accent);
  box-shadow:inset -3px 0 0 var(--accent);
}
.menu button.lead .hint{ color:var(--accent); opacity:.65 }

label{ display:block; margin:14px 0 5px; font-size:.8rem; color:var(--ink-soft); letter-spacing:.02em }
input,select{
  font:inherit; width:100%; padding:11px 12px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r-s);
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* ── test screen ──────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:5;
  background:var(--paper); padding:14px 0 12px; margin:-28px 0 22px;
}
.bar{ height:2px; background:var(--rule) }
.bar > i{ display:block; height:100%; background:var(--accent); transition:width .3s ease }
.meta{
  display:flex; justify-content:space-between;
  font-size:.74rem; color:var(--ink-faint); margin-top:9px; letter-spacing:.03em;
}

.stem{
  font-size:1.18rem; font-weight:500; line-height:1.85;
  margin:0 0 28px; letter-spacing:-.005em;
}
.opts button{
  display:block; width:100%; text-align:right;
  margin:8px 0; padding:15px 17px; line-height:1.7;
  background:var(--raised);
}
.opts button.mid{ color:var(--ink-soft); font-size:.94rem }
.opts button.sel{
  background:var(--accent-15); border-color:var(--accent); font-weight:600; color:var(--ink);
}
.nav{ display:flex; gap:10px; margin-top:26px }
.nav button{ flex:1 }

.foot{
  position:fixed; inset-inline:0; bottom:0; z-index:6;
  background:var(--raised); border-top:1px solid var(--rule);
  padding:11px var(--gut); padding-bottom:calc(11px + env(safe-area-inset-bottom));
  display:flex; gap:10px; justify-content:center;
}
.foot button{ flex:1; max-width:210px; font-size:.9rem }

.jump{
  padding:4px 11px; margin:3px 3px 0 0; border-radius:5px;
  font-size:.85rem; background:var(--raised);
}

/* ── instructions ─────────────────────────────────────── */
.prose{ padding:6px 22px 18px }
.prose h2{ margin:1.9em 0 .7em }
.prose h2:first-child{ margin-top:.9em }
.prose p{ margin:0 0 1em; color:var(--ink-soft); font-size:.95rem }
.steps{ margin:0; padding-inline-start:0; list-style:none; counter-reset:step }
.steps li{
  counter-increment:step; position:relative;
  padding-inline-start:30px; margin-bottom:1em;
  color:var(--ink-soft); font-size:.95rem;
}
.steps li::before{
  content:counter(step); position:absolute; inset-inline-start:0; top:.35em;
  width:20px; height:20px; border-radius:50%;
  background:var(--accent-15); color:var(--accent);
  font-size:.7rem; font-weight:700; line-height:20px; text-align:center;
}

/* ── profile sheet (the signature) ────────────────────── */
.sheet{
  background:var(--raised);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:18px 16px 14px;
  margin:16px 0;
}
.grid{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  position:relative;
}
@media (min-width:520px){ .grid{ grid-template-columns:180px minmax(0,1fr) } }

/* scale header */
.scale{
  grid-column:2; grid-row:1;
  display:flex; justify-content:space-between; padding-bottom:9px;
}
.scale span{ font-size:.64rem; color:var(--ink-faint); width:10%; text-align:center }

/* the shaded average band + column rules, one element spanning all rows */
.track-bg{
  grid-column:2; grid-row:2 / -1;
  position:relative; align-self:stretch;
  background:
    /* average band: stens 4–7 */
    linear-gradient(to right, transparent 0 30%, var(--sunken) 30% 70%, transparent 70%),
    /* one hairline per column boundary */
    repeating-linear-gradient(to right,
      var(--rule-soft) 0 1px, transparent 1px 10%);
  border-inline:1px solid var(--rule-soft);
}
/* connecting line overlay, same column + rows as the dots */
.line{
  grid-column:2; grid-row:2 / -1;
  position:relative; align-self:stretch;
  width:100%; height:100%; overflow:visible; pointer-events:none;
}
.line path{
  fill:none; stroke:var(--accent); stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 1.1s .15s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

.lbl{
  grid-column:1; padding-inline-end:14px; text-align:right;
  font-size:.84rem; line-height:1.4;
}
.lbl .nm{ font-weight:600; display:block }
.lbl .pole{
  color:var(--ink-faint); font-size:.66rem; display:block;
  letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.cell{ grid-column:2; position:relative }
.dot{
  position:absolute; top:50%; width:23px; height:23px;
  margin:-11.5px -11.5px 0 0; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px var(--raised);
}
.dot.ex{ background:var(--clay) }

/* second-order factors — quiet, no second chart */
.globals{ display:grid; gap:1px; background:var(--rule-soft); border-radius:var(--r-s); overflow:hidden }
.glob{
  display:flex; align-items:baseline; gap:10px;
  background:var(--raised); padding:12px 15px;
}
.glob .g-n{ font-weight:600; font-size:.92rem; flex:1 }
.glob .g-s{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:1.15rem; font-weight:700; color:var(--accent); direction:ltr;
}
.glob.ex .g-s{ color:var(--clay) }

/* ── interpretation ───────────────────────────────────── */
details{
  border-bottom:1px solid var(--rule-soft);
  padding:0; margin:0; background:transparent;
}
details:first-of-type{ border-top:1px solid var(--rule-soft) }
summary{
  cursor:pointer; padding:14px 2px; font-weight:600; font-size:.94rem;
  display:flex; align-items:center; gap:9px; list-style:none;
}
summary::-webkit-details-marker{ display:none }
summary::after{
  content:"+"; margin-inline-start:auto; color:var(--ink-faint);
  font-weight:400; font-size:1.05rem;
}
details[open] summary::after{ content:"−" }
details p{ margin:0 0 16px; color:var(--ink-soft); font-size:.92rem; line-height:1.85 }

.lvl{
  font-size:.66rem; font-weight:700; letter-spacing:.06em;
  padding:2px 8px; border-radius:99px;
  background:var(--sunken); color:var(--ink-soft);
}
.lvl.hi{ background:var(--accent-15); color:var(--accent) }
.lvl.lo{ background:var(--clay-15); color:var(--clay) }

/* ── table ────────────────────────────────────────────── */
.scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl{ width:100%; border-collapse:collapse; font-size:.85rem }
.tbl th,.tbl td{ padding:9px 10px; text-align:right; border-bottom:1px solid var(--rule-soft) }
.tbl th{
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  color:var(--ink-soft); border-bottom-color:var(--rule); white-space:nowrap;
}
.tbl tbody tr:last-child td{ border-bottom:0 }

/* ── motion / print ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important }
  .line path{ stroke-dashoffset:0 }
}
@media print{
  .foot,.topbar,.noprint{ display:none!important }
  body{ background:#fff; font-size:10.5pt }
  #app{ max-width:none; padding:0 }
  .card,.sheet{ break-inside:avoid; border-color:#ccc; background:#fff }
  .cell,.glob,details{ break-inside:avoid }
  details{ border-color:#ddd }
  details p{ display:block!important }
  .line path{ stroke-dashoffset:0; animation:none }
  .dot{ box-shadow:0 0 0 2px #fff }
}