:root{
  --ink:#111827;
  --muted:#6b7280;
  --ok:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --bg:#f7f9fc;
  --radius:16px;
}

html, body{
  max-width:100%;
  overflow-x:hidden;
  min-height:100%;
}

body{
  background-color:var(--bg);
  background-image:url("../../assets/notebook.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  color:var(--ink);
  word-wrap:break-word;
  overflow-wrap:anywhere;
}

.container{
  max-width:1200px;
}

.container.py-4{
  padding-top:clamp(1rem, 2.5vw, 1.75rem) !important;
  padding-bottom:clamp(1rem, 2.5vw, 1.75rem) !important;
}

.card{
  border-radius:var(--radius);
  border:1px solid #e5e7eb;
  min-width:0;
  overflow:visible;
  background:#ffffff;
}

.card-body{
  min-width:0;
  padding:clamp(1rem, 2.5vw, 1.5rem);
}

.hand{
  font-family:'Patrick Hand', cursive;
  letter-spacing:.3px;
}

.unit{
  font-size:.9rem;
  color:var(--muted);
}

.badge-soft{
  background:#eef2ff;
  color:#3730a3;
}

.divider{
  height:1px;
  background:#e5e7eb;
  margin:1rem 0;
}

.header-box{
  background:#1f2937;
  color:#f9fafb;
  border-radius:var(--radius);
  padding:clamp(1rem, 2.4vw, 1.4rem);
  margin-bottom:1.5rem;
  overflow:hidden;
}

.header-box .h3,
.header-box h1{
  color:#f9fafb !important;
}

.header-box p{
  color:#e5e7eb !important;
}

.header-box .h3,
.header-box h1{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  min-width:0;
}

.header-box .h3 > span,
.header-box h1 > span{
  min-width:0;
}

[id$='Title']{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  width:max-content;
  min-width:0;
  max-width:100%;
  color:#ffffff;
  font-weight:700;
}

.header-box [id$='Title']{
  flex-wrap:wrap;
  row-gap:.08em;
}

.sketch-seq span{
  display:inline-block;
  opacity:0;
  transform:translateY(-6px) rotate(-3deg) scale(0.95);
  filter:blur(2px);
  animation:popDraw .65s ease forwards;
}

.sketch-seq span:nth-child(2){ animation-delay:.05s; }
.sketch-seq span:nth-child(3){ animation-delay:.10s; }
.sketch-seq span:nth-child(4){ animation-delay:.15s; }
.sketch-seq span:nth-child(5){ animation-delay:.20s; }
.sketch-seq span:nth-child(6){ animation-delay:.25s; }
.sketch-seq span:nth-child(7){ animation-delay:.30s; }
.sketch-seq span:nth-child(8){ animation-delay:.35s; }
.sketch-seq span:nth-child(9){ animation-delay:.40s; }
.sketch-seq span:nth-child(10){ animation-delay:.45s; }
.sketch-seq span:nth-child(11){ animation-delay:.50s; }
.sketch-seq span:nth-child(12){ animation-delay:.55s; }

@keyframes popDraw{
  40%{
    opacity:.9;
    transform:translateY(2px) rotate(1deg) scale(1.03);
    filter:blur(.5px);
  }
  100%{
    opacity:1;
    transform:translateY(0) rotate(0) scale(1);
    filter:blur(0);
  }
}

.jitter{
  animation:jitter 1.4s ease-in-out infinite alternate;
}

@keyframes jitter{
  0%{ transform:translateY(0) rotate(0); }
  100%{ transform:translateY(.6px) rotate(-.3deg); }
}

.svg-num-char{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0.6em;
  text-align:center;
  vertical-align:-0.12em;
  overflow:visible;
}

[id$='Title'] .svg-num-char{
  width:1em !important;
  min-width:1em !important;
  flex:0 0 1em !important;
}

.svg-num-space{
  width:0.6em !important;
  min-width:0.6em !important;
  flex:0 0 0.6em !important;
}

.svg-num-fallback-char{
  width:auto;
  min-width:0;
  flex:0 0 auto;
}

.svg-num-reserve{
  visibility:hidden;
  display:inline-block;
  line-height:1;
  pointer-events:none;
  user-select:none;
}

.svg-num-img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:auto;
  height:1.2em;
  max-width:100%;
  pointer-events:none;
}

.math-line{
  background:#ffffff;
  border:2px dashed #e5e7eb;
  border-radius:12px;
  padding:clamp(.75rem, 2.2vw, 1rem);
  min-width:0;
  overflow:visible;
}

.eq{
  font-size:clamp(.95rem, 2.4vw, 1.05rem);
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.eq .label{
  color:var(--muted);
  font-weight:600;
  margin-right:.35rem;
}

.eq-wrap{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}

.eq-wrap .mjx-container{
  max-width:none !important;
  min-width:100%;
  overflow:visible !important;
  display:inline-block !important;
  padding-bottom:.15rem;
}

.eq-wrap .mjx-container[jax="CHTML"][display="true"]{
  white-space:normal !important;
}

.eq-wrap .mjx-math,
.eq-wrap mjx-container[jax="CHTML"]{
  max-width:100%;
}

.eq-wrap::-webkit-scrollbar{
  height:8px;
}

.eq-wrap::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.calc-grid{
  display:grid;
  gap:1rem;
  min-width:0;
}

.calc-grid > *{
  min-width:0;
}

@media (min-width: 992px){
  .calc-grid{
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }
}

.control-row{
  display:flex;
  gap:.5rem;
  align-items:center;
  min-width:0;
}

.control-row > *{
  min-width:0;
}

.btn-group{
  flex-wrap:wrap;
  max-width:100%;
}

.progress{
  height:16px;
  max-width:100%;
  overflow:hidden;
}

.ticks,
.ve-ticks,
.oi-ticks{
  font-size:.8rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:.25rem;
  flex-wrap:nowrap;
}

.summary-box,
.severity-box{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:clamp(.85rem, 2.2vw, 1rem);
  background:#ffffff;
  height:100%;
  min-width:0;
}

.summary-number{
  font-size:clamp(1.5rem, 6vw, 2rem);
  font-weight:700;
  line-height:1.1;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.muted-note,
.range-note{
  color:var(--muted);
  font-size:.9rem;
}

.status-chip{
  display:inline-block;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
}

.severity-grid{
  display:grid;
  gap:.75rem;
}

@media (min-width: 768px){
  .severity-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

.reference-list{
  padding-left:1.1rem;
}

.reference-list li{
  margin-bottom:.6rem;
  padding-left:.1rem;
  overflow-wrap:anywhere;
}

.card-body,
.summary-box,
.severity-box,
.accordion-body,
.header-box,
.form-label,
.btn,
p,
li,
h1,
h2,
h3,
h4,
span,
div{
  overflow-wrap:anywhere;
  word-break:break-word;
}

input[type="number"],
input[type="range"]{
  min-width:0;
  width:100%;
}

@media (max-width: 576px){
  .container{
    padding-left:.75rem;
    padding-right:.75rem;
  }

  .card-body{
    padding:1rem;
  }

  .control-row{
    flex-direction:column;
    align-items:stretch;
  }

  .btn-group{
    width:100%;
    display:flex;
  }

  .btn-group .btn{
    flex:1 1 auto;
  }

  .eq{
    font-size:.98rem;
  }

  .eq-wrap .mjx-container{
    font-size:.92rem;
  }

  .summary-box,
  .severity-box{
    padding:.85rem;
  }

  .ticks,
  .ve-ticks,
  .oi-ticks{
    font-size:.72rem;
  }

  .status-chip{
    font-size:.82rem;
  }
}

@media (orientation: landscape) and (max-height: 520px){
  .container.py-4{
    padding-top:1rem !important;
    padding-bottom:1rem !important;
  }

  .header-box{
    margin-bottom:1rem;
    padding:1rem;
  }

  .card-body{
    padding:1rem;
  }
}

.small-hanging li{ margin-bottom:.55rem; }
.hanging{ padding-left:.15rem; }