/* Engineering note of a case (cases/portal/<slug>/): builds on case-site.css; every rule is scoped to .case-note.
   Diagrams are plain HTML so their labels wrap in any language; they turn vertical on narrow screens. */
/* The home page is the reference (AGENTS.md): the note uses the full .home-wrap width, home grid gaps (22px between rows,
   up to 60px between text columns) and goes to fewer columns at the home breakpoints 1099/699px. */
.case-note .nt-crumbs ol {
  display:flex;
  flex-wrap:wrap;
  gap:4px 0;
  margin:0;
  padding:0 0 4px;
  list-style:none;
  font-size:15px
}
.case-note .nt-crumbs li {
  white-space:nowrap
}
.case-note .nt-crumbs li+li::before {
  content:'›';
  margin:0 10px;
  color:var(--muted)
}
.case-note .nt-crumbs a {
  color:var(--accent);
  font-weight:600;
  text-decoration:none
}
.case-note .nt-crumbs a:hover {
  text-decoration:underline
}
.case-note h1 {
  margin-bottom:12px
}
/* Georgian words are long and the letters wide: a step smaller so "დაკავშირებულად" fits a 320px phone unbroken. */
.case-note:lang(ka) h1 {
  font-size:clamp(27px,4.4vw,56px);
  line-height:1.15;
  letter-spacing:-.02em
}
.case-note:lang(ka) h2 {
  font-size:clamp(26px,2.8vw,40px)
}
.case-note .nt-subtitle {
  max-width:46ch;
  margin:0 0 22px;
  font-size:clamp(20px,2vw,25px);
  line-height:1.35;
  font-weight:600;
  color:#3c4046
}
.case-note .nt-status {
  background:#e7f6ec;
  border-color:#5bb47a;
  color:#1f5d36
}
.case-note .cs-chapter>p.cs-text {
  max-width:none;
  margin:0
}
.case-note .nt-h3 {
  margin:28px 0 0
}
/* Text in columns, like the home "About" block: no frames, the width split between two or three columns. */
.case-note .nt-cols {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px clamp(32px,3.2vw,60px);
  margin-top:6px
}
.case-note .nt-cols-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:28px
}
.case-note .nt-cols h3 {
  margin:0 0 10px;
  text-wrap:balance
}
.case-note .nt-cols p {
  margin:0 0 12px;
  font-size:17px;
  line-height:1.6
}
.case-note .nt-cols p:last-child {
  margin-bottom:0
}
/* Figure frame shared by the three diagrams. */
.case-note .nt-fig {
  margin:22px 0 0;
  padding:clamp(18px,2.4vw,30px);
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 10px 30px #6d4a1f0f
}
.case-note .nt-fig-head {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
  margin:0 0 20px;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em
}
.case-note .nt-fig-no {
  color:var(--accent);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.case-note:lang(ka) .nt-fig-no,.case-note:lang(ka) .cs-kicker {
  text-transform:none;
  letter-spacing:.02em
}
.case-note .nt-fig-note {
  margin:16px 0 0;
  color:var(--muted);
  font-size:14.5px
}
/* Diagram 1 sits beside the title: two steps per row there, four in a row when the column is wide enough. */
.case-note .cs-top .nt-fig {
  margin:0
}
.case-note .nt-flow {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 28px;
  margin:0;
  padding:0;
  list-style:none
}
.case-note .nt-step {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius:14px;
  background:#fbf7f0;
  border:1px solid var(--line)
}
.case-note .nt-step:not(:last-child)::after {
  content:'';
  position:absolute;
  top:50%;
  right:-22px;
  width:14px;
  height:14px;
  border-top:2px solid #b9a88f;
  border-right:2px solid #b9a88f;
  transform:translateY(-50%) rotate(45deg)
}
.case-note .nt-step-title {
  margin:0;
  font-weight:800;
  font-size:16.5px;
  line-height:1.3
}
.case-note .nt-step-note {
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.45
}
.case-note .nt-states {
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none
}
.case-note .nt-states li {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:2px 8px;
  padding:7px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  font-size:14px;
  line-height:1.35
}
.case-note .nt-states li::before {
  content:'';
  grid-row:span 2;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#a7adb3
}
.case-note .nt-states .is-on::before {
  background:#3fa66a
}
.case-note .nt-states .is-stale::before {
  background:var(--amber-deep)
}
.case-note .nt-states .is-stale {
  border-color:#f0c477;
  background:#fff7e8
}
.case-note .nt-states .is-off {
  color:var(--muted)
}
.case-note .nt-node {
  font-weight:700;
  color:var(--ink)
}
.case-note .nt-step-break {
  background:#fff7e8;
  border-color:#f0c477
}
.case-note .nt-step-bad {
  background:#fdeeee;
  border-color:#efb3b3
}
.case-note .nt-step-bad .nt-step-title {
  color:#a3262b
}
.case-note .nt-step:nth-child(2)::after {
  display:none
}
/* A packet leaves along the line and is lost before the billing side. */
.case-note .nt-lost {
  position:relative;
  height:28px;
  margin:4px 0
}
.case-note .nt-lost-line {
  position:absolute;
  left:0;
  right:22%;
  top:50%;
  border-top:2px dashed #d9b77b
}
.case-note .nt-lost-x {
  position:absolute;
  right:6%;
  top:50%;
  transform:translateY(-52%);
  color:#c2410c;
  font-size:26px;
  font-weight:800;
  line-height:1
}
.case-note .nt-packet {
  position:absolute;
  left:0;
  top:50%;
  width:12px;
  height:12px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--amber-deep);
  animation:nt-lose 3.2s ease-in infinite
}
@keyframes nt-lose {
  0% {left:0;opacity:0}
  10% {opacity:1}
  65% {opacity:1}
  80%,100% {left:70%;opacity:0}
}
/* Three sources. */
.case-note .nt-sources {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:20px
}
.case-note .nt-sources article {
  padding:20px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line)
}
.case-note .nt-sources h3 {
  margin:0 0 8px;
  font-size:19px
}
.case-note .nt-sources p {
  margin:0;
  font-size:15.5px;
  line-height:1.55;
  color:#3c4046
}
.case-note .nt-source-no {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-bottom:10px!important;
  border-radius:50%;
  background:#fff1d6;
  color:var(--accent)!important;
  font-weight:800
}
/* Diagram 2: sources → checks → API call and verification. */
.case-note .nt-auto {
  display:grid;
  grid-template-columns:minmax(0,.9fr) 36px minmax(0,1.15fr) 36px minmax(0,1fr);
  align-items:center
}
.case-note .nt-auto-in {
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none
}
.case-note .nt-auto-in li {
  display:grid;
  gap:2px;
  padding:12px 14px;
  border-radius:12px;
  background:#f3f6fb;
  border:1px solid #d5deec;
  font-size:14.5px;
  line-height:1.4;
  color:var(--muted)
}
.case-note .nt-auto-in b {
  color:var(--ink);
  font-size:15.5px
}
.case-note .nt-arrow {
  position:relative;
  height:2px;
  margin:0 6px;
  background:#b9a88f
}
.case-note .nt-arrow::after {
  content:'';
  position:absolute;
  right:-1px;
  top:-5px;
  width:10px;
  height:10px;
  border-top:2px solid #b9a88f;
  border-right:2px solid #b9a88f;
  transform:rotate(45deg)
}
.case-note .nt-auto-check {
  padding:16px 18px;
  border-radius:14px;
  background:#fff7e8;
  border:1px solid #f0c477
}
.case-note .nt-auto-h,.case-note .nt-auto-act {
  margin:0 0 8px;
  font-weight:800;
  font-size:16px;
  line-height:1.35
}
.case-note .nt-auto-check ul {
  display:grid;
  gap:4px;
  margin:0 0 10px;
  padding-left:1.1em;
  font-size:14.5px;
  line-height:1.45
}
.case-note .nt-auto-skip {
  margin:0;
  padding-top:10px;
  border-top:1px dashed #e2c48f;
  color:var(--muted);
  font-size:14px;
  line-height:1.45
}
.case-note .nt-auto-out {
  display:grid;
  gap:10px
}
.case-note .nt-auto-act {
  margin:0;
  padding:12px 14px;
  border-radius:12px;
  background:#fbf7f0;
  border:1px solid var(--line);
  font-size:15px
}
.case-note .nt-arrow-short {
  width:2px;
  height:16px;
  margin:0 0 0 24px;
  background:#b9a88f
}
.case-note .nt-arrow-short::after {
  right:-5px;
  top:auto;
  bottom:-1px;
  transform:rotate(135deg)
}
.case-note .nt-auto-ends {
  display:grid;
  gap:8px
}
.case-note .nt-auto-ends p {
  margin:0;
  padding:9px 12px;
  border-radius:10px;
  font-size:14px;
  line-height:1.4
}
.case-note .nt-auto-ends .is-ok {
  background:#e7f6ec;
  color:#1f5d36
}
.case-note .nt-auto-ends .is-bad {
  background:#fdeeee;
  color:#8e2227
}
/* Checks list. */
.case-note .nt-checks {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
  counter-reset:check
}
.case-note .nt-checks li {
  position:relative;
  margin:0;
  padding:14px 16px 14px 52px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--line);
  font-size:16px;
  line-height:1.55;
  counter-increment:check
}
.case-note .nt-checks li::before {
  content:counter(check);
  position:absolute;
  left:16px;
  top:14px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff1d6;
  color:var(--accent);
  font-size:13px;
  font-weight:800
}
/* Diagram 3: timeline; the highlight walks along the steps once per cycle. */
.case-note .nt-time {
  --steps:7;
  display:grid;
  grid-template-columns:repeat(var(--steps),minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:tstep
}
.case-note .nt-time li {
  position:relative;
  display:grid;
  align-content:start;
  gap:4px;
  padding:0 8px;
  font-size:14px;
  line-height:1.4;
  color:var(--muted);
  counter-increment:tstep
}
.case-note .nt-time li::before {
  content:counter(tstep);
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:8px;
  border-radius:50%;
  background:#fff;
  border:2px solid #d9c7ab;
  color:var(--accent);
  font-weight:800;
  font-size:13px;
  animation:nt-step 10.5s linear infinite
}
.case-note .nt-time li::after {
  content:'';
  position:absolute;
  left:38px;
  right:-8px;
  top:15px;
  border-top:2px solid #e6d8c3
}
.case-note .nt-time li:last-child::after {
  display:none
}
.case-note .nt-time b {
  color:var(--ink);
  font-size:15px;
  line-height:1.3
}
.case-note .nt-time-at {
  color:var(--accent);
  font-weight:700;
  font-variant-numeric:tabular-nums
}
.case-note .nt-time li:nth-child(2)::before {animation-delay:1.5s}
.case-note .nt-time li:nth-child(3)::before {animation-delay:3s}
.case-note .nt-time li:nth-child(4)::before {animation-delay:4.5s}
.case-note .nt-time li:nth-child(5)::before {animation-delay:6s}
.case-note .nt-time li:nth-child(6)::before {animation-delay:7.5s}
.case-note .nt-time li:nth-child(7)::before {animation-delay:9s}
@keyframes nt-step {
  0%,14% {background:var(--amber);border-color:var(--amber-deep);color:#1e2124}
  16%,100% {background:#fff;border-color:#d9c7ab;color:var(--accent)}
}
.case-note .nt-done {
  display:grid;
  gap:6px;
  margin:0 0 12px;
  padding:14px 18px;
  border-radius:16px;
  background:#e7f6ec;
  list-style:none
}
.case-note .nt-done li {
  position:relative;
  padding-left:26px;
  color:#1f4d31;
  font-size:16px;
  line-height:1.45
}
.case-note .nt-done li::before {
  content:'✓';
  position:absolute;
  left:2px;
  font-weight:800;
  color:#2f8a55
}
/* MAX demo: the explanation and the two synthetic chats in one row, like the three home service cards. */
.case-note .nt-max-chapter {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:start
}
.case-note .nt-max-text p {
  margin:0;
  font-size:17px;
  line-height:1.6
}
.case-note .nt-chat {
  margin:0;
  display:grid;
  align-content:start;
  gap:10px
}
/* Captions of different length must not shift the two chat windows: both figures share the chapter's rows. */
@supports (grid-template-rows:subgrid) {
  .case-note .nt-chat {
    grid-row:span 2;
    grid-template-rows:subgrid;
    row-gap:10px
  }
  .case-note .nt-max-text {
    grid-row:span 2
  }
}
.case-note .nt-chat-cap {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  font-weight:700
}
.case-note .nt-demo {
  padding:2px 10px;
  border-radius:999px;
  border:1px dashed #b98a3e;
  background:#fff1d6;
  color:#7a4a0c;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}
.case-note:lang(ka) .nt-demo {
  text-transform:none;
  letter-spacing:0
}
.case-note .nt-chat-window {
  display:grid;
  gap:10px;
  padding:0 14px 16px;
  border-radius:22px;
  background:linear-gradient(180deg,#eef0fb,#e8ecf6);
  border:1px solid #d6dbec;
  overflow:hidden
}
.case-note .nt-chat-bar {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 -14px;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid #e1e4ef
}
.case-note .nt-chat-bar>span:last-child {
  display:grid;
  line-height:1.25
}
.case-note .nt-chat-bar b {
  font-size:15.5px
}
.case-note .nt-chat-bar small {
  color:#6b7280;
  font-size:13px
}
.case-note .nt-avatar {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#5b6cff,#8a4dff);
  color:#fff;
  font-weight:800
}
.case-note .nt-chat-day {
  justify-self:center;
  margin:2px 0 0;
  padding:2px 12px;
  border-radius:999px;
  background:#dfe3f1;
  color:#58607a;
  font-size:12.5px
}
.case-note .nt-msg {
  position:relative;
  max-width:94%;
  padding:10px 14px 22px;
  border-radius:4px 18px 18px 18px;
  background:#fff;
  box-shadow:0 2px 6px #1e2a4014;
  font-size:14.5px;
  line-height:1.45;
  overflow-wrap:anywhere
}
.case-note .nt-msg p {
  margin:0
}
.case-note .nt-msg .nt-msg-title {
  margin-bottom:4px;
  font-weight:700
}
.case-note .nt-msg.is-error .nt-msg-title {
  color:#a3262b
}
.case-note .nt-msg time {
  position:absolute;
  right:12px;
  bottom:5px;
  color:#8a90a2;
  font-size:12px
}
.case-note .nt-msg-btn {
  display:block;
  margin-top:10px;
  padding:7px 12px;
  border-radius:10px;
  background:#eef0ff;
  color:#3949c7;
  font-weight:600;
  text-align:center
}
.case-note .nt-max-text .nt-max-note {
  margin:16px 0 0;
  padding:12px 18px;
  border-radius:14px;
  border:1px dashed #d9c7ab;
  background:var(--card);
  color:var(--muted);
  font-size:15px;
  line-height:1.5
}
/* Closing: three concrete results in a row, then the series line and the way back in one band. */
.case-note .nt-sum {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px clamp(32px,3.2vw,60px);
  margin:6px 0 0;
  padding:0;
  list-style:none
}
.case-note .nt-sum li {
  position:relative;
  padding-left:30px;
  font-size:17px;
  line-height:1.55
}
.case-note .nt-sum li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:#2f8a55;
  font-weight:800
}
.case-note .nt-series {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 40px;
  margin-top:28px;
  padding:24px 28px;
  border-radius:20px;
  background:linear-gradient(115deg,#fff4df,#fffdf9)
}
.case-note .nt-series p {
  flex:1 1 420px;
  max-width:72ch;
  margin:0;
  font-size:17px
}
.case-note .nt-series-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px
}
@media(min-width:1600px),(min-width:900px) and (max-width:1099px) {
  .case-note .nt-flow {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .case-note .nt-step:nth-child(2)::after {
    display:block
  }
}
/* Home breakpoint 1099px: the title block goes above diagram 1 (.cs-top), three columns become two. */
@media(max-width:1099px) {
  .case-note .nt-cols,.case-note .nt-sum,.case-note .nt-checks,.case-note .nt-max-chapter {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .case-note .nt-cols>:last-child:nth-child(odd),.case-note .nt-sum>:last-child:nth-child(odd),.case-note .nt-max-text {
    grid-column:1/-1
  }
  .case-note .nt-max-text {
    grid-row:auto
  }
  .case-note .nt-max-text p {
    max-width:72ch
  }
}
@media(max-width:1023px) {
  .case-note .nt-auto {
    grid-template-columns:1fr;
    gap:0
  }
  .case-note .nt-auto>.nt-arrow {
    width:2px;
    height:22px;
    margin:6px auto
  }
  .case-note .nt-auto>.nt-arrow::after {
    right:-5px;
    top:auto;
    bottom:-1px;
    transform:rotate(135deg)
  }
  .case-note .nt-auto-in {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .case-note .nt-time {
    grid-template-columns:1fr;
    gap:14px
  }
  .case-note .nt-time li {
    grid-template-columns:30px minmax(0,1fr);
    column-gap:12px;
    padding:0
  }
  .case-note .nt-time li::before {
    grid-row:span 3;
    margin:0
  }
  .case-note .nt-time li::after {
    left:14px;
    right:auto;
    top:32px;
    bottom:-14px;
    border-top:0;
    border-left:2px solid #e6d8c3
  }
}
@media(max-width:699px) {
  .case-note .nt-sources,.case-note .nt-checks,.case-note .nt-cols,.case-note .nt-sum,.case-note .nt-max-chapter {
    grid-template-columns:1fr
  }
  .case-note .nt-flow {
    grid-template-columns:1fr;
    gap:24px
  }
  .case-note .nt-step:not(:last-child)::after,.case-note .nt-step:nth-child(2)::after {
    display:block;
    top:auto;
    right:auto;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%) rotate(135deg);
    width:12px;
    height:12px
  }
  .case-note .nt-auto-in {
    grid-template-columns:1fr
  }
  /* On a phone the trail shrinks to one back link to the case. */
  .case-note .nt-crumbs li:first-child,.case-note .nt-crumbs li:last-child {
    display:none
  }
  .case-note .nt-crumbs li {
    white-space:normal
  }
  .case-note .nt-crumbs li+li::before {
    content:'←';
    margin:0 6px 0 0;
    color:var(--accent)
  }
  .case-note .nt-fig {
    padding:16px;
    border-radius:16px
  }
  .case-note .nt-series {
    padding:20px
  }
  .case-note .nt-series .btn {
    flex:1 1 100%
  }
  .case-note .nt-msg {
    max-width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  .case-note .nt-packet {
    animation:none;
    left:45%;
    opacity:1
  }
  .case-note .nt-time li::before {
    animation:none
  }
}