@charset "UTF-8";
/* ============================================================
   আমার ডাক্তার : the enamel chamber signboard.
   Binding spec: docs/DESIGN.md. Brand hue 101, S 47%, L 33%.
   Every custom property is --adr- prefixed. No color-mix (unsupported
   before Chrome 111 and this ships to 2019 Android WebViews), no
   backdrop-filter, no 999px, no 135deg, no transition:all.
   ============================================================ */

:root{
  /* ---- brand ramp: enamel herb green ---- */
  --adr-050:#F5F9F3;
  --adr-100:#E6F0E0;
  --adr-200:#C7DDBB;
  --adr-300:#99C185;
  --adr-400:#65AA46;
  --adr-500:#467C2D;
  --adr-600:#336520;
  --adr-700:#204913;
  --adr-800:#183012;

  /* ---- ground and ink: limewash wall, white plates, green-black paint ---- */
  --adr-wall:#F6F7F3;
  --adr-wall-2:#ECEDE8;
  --adr-plate:#FDFDFC;
  --adr-edge:#D6DBD1;
  --adr-edge-2:#E0E5DC;
  --adr-ink:#192216;
  --adr-ink-2:#4F5A49;
  --adr-ink-3:#66725F;

  /* ============================================================
     SEMANTIC: the urgency ladder. Used for NOTHING else, ever.
     Four levels. `routine` is specified and currently UNREACHABLE:
     ADR_Triage declares SELFCARE and never returns it, because triage
     fails closed (PRD 1.3). No v1 template branches to it. It exists
     so that wiring SELFCARE later is a data change, not a design one.
     ============================================================ */
  --adr-u-emergency:#C1251F;
  --adr-u-emergency-plate:#281715;
  --adr-u-emergency-200:#DC6860;
  --adr-u-emergency-tint:#FBEEEC;
  --adr-u-today:#A25907;
  --adr-u-today-tint:#FDF2E3;
  --adr-u-soon:#467C2D;
  --adr-u-soon-tint:#F5F9F3;
  --adr-u-routine:#5F6959;
  --adr-u-routine-tint:#ECEDE8;

  /* ---- material details ---- */
  --adr-screw:#AB8E49;
  --adr-screw-ring:#776540;
  --adr-focus:#4C9B27;

  /* ---- type ---- */
  --adr-font-display:'Mina','Hind Siliguri','Noto Sans Bengali',system-ui,sans-serif;
  --adr-font-body:'Hind Siliguri','Noto Sans Bengali',system-ui,sans-serif;

  /* ---- radius: 4 / 9 / 14 / 22 / 34, plus 50% for screw heads.
         NOT 8/12/18/24 (the chassis family). NEVER 999px, anywhere. ---- */
  --adr-r-xs:4px;
  --adr-r-sm:9px;
  --adr-r-md:14px;
  --adr-r-lg:22px;
  --adr-r-xl:34px;
  --adr-r-dot:50%;

  /* ---- borders and the signature double rule ---- */
  --adr-keyline:inset 0 0 0 1px var(--adr-edge);
  --adr-keyline-2:inset 0 0 0 1px var(--adr-edge),
                  inset 0 0 0 4px var(--adr-plate),
                  inset 0 0 0 5px var(--adr-edge-2);
  --adr-keyline-dark:inset 0 0 0 1px rgba(153,193,133,.35);

  /* ---- depth: "the mounted plate". A 1px inset keyline, a 1px hard contact
         line under the bottom edge, then a long soft ambient: a plate screwed
         to a wall, standing about 3mm off it. The contact line is capped at
         1px and is a NEUTRAL hairline, so it can never converge on a sibling's
         coloured block face. ---- */
  --adr-sh-1:0 1px 0 var(--adr-edge),
             0 1px 2px rgba(90,110,84,.10);
  --adr-sh-2:0 1px 0 var(--adr-edge),
             0 2px 4px rgba(68,86,63,.10),
             0 8px 18px -10px rgba(41,55,37,.30);
  --adr-sh-3:0 1px 0 var(--adr-edge),
             0 3px 6px rgba(68,86,63,.10),
             0 18px 34px -18px rgba(33,45,29,.38);
  --adr-sh-plate:inset 0 1px 0 rgba(255,255,255,.85),
                 inset 0 -1px 0 #E0E4DC,
                 0 1px 0 #D3D9CE,
                 0 10px 22px -14px rgba(33,45,29,.34);
  --adr-sh-enamel:inset 0 1px 0 rgba(101,170,70,.55),
                  inset 0 0 0 1px rgba(24,48,18,.60),
                  0 14px 30px -16px rgba(20,40,14,.55);
  --adr-sh-press:inset 0 2px 4px rgba(24,48,18,.22),
                 inset 0 0 0 1px #CDD4C8;
  --adr-sh-screw:inset 0 1px 0 rgba(240,224,168,.90),
                 0 0 0 1px var(--adr-screw-ring),
                 0 1px 2px rgba(70,58,32,.35);
  --adr-sh-tab:0 -1px 0 var(--adr-edge),
              0 -8px 18px -12px rgba(33,45,29,.28);
  --adr-sh-inset:inset 0 1px 2px rgba(68,86,63,.14),
                 inset 0 0 0 1px var(--adr-edge);

  /* ---- gradients: PAINT RUNS DOWNWARD. Every brand gradient here is
         near-vertical, 176deg to 184deg. 135deg is the chassis default five
         siblings share and is forbidden in this app. ---- */
  --adr-grad-enamel:linear-gradient(178deg,#336520 0%,#204913 62%,#1B3E10 100%);
  --adr-grad-enamel-deep:linear-gradient(180deg,#204913 0%,#183012 100%);
  --adr-grad-plate:linear-gradient(180deg,#FFFFFF 0%,#FBFCF9 100%);
  --adr-grad-gloss:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 42%);
  --adr-grad-btn:linear-gradient(179deg,#4E8933 0%,#467C2D 55%,#3C6B26 100%);
  --adr-grad-btn-emerg:linear-gradient(179deg,#FFFFFF 0%,#F4F5F1 100%);
  --adr-grad-wall:linear-gradient(180deg,#F6F7F3 0%,#EFF1EB 100%);
  --adr-grad-tint:linear-gradient(180deg,#F5F9F3 0%,#E6F0E0 100%);
  --adr-grad-well:linear-gradient(180deg,#E8EAE4 0%,#ECEDE8 100%);
  --adr-grad-dark:linear-gradient(178deg,#32201D 0%,#281715 60%,#20110F 100%);
  --adr-grad-brass:linear-gradient(180deg,#D9BC74 0%,#AB8E49 60%,#8B7038 100%);

  /* ---- motion ---- */
  --adr-t-fast:120ms cubic-bezier(.2,.7,.35,1);
  --adr-t:200ms cubic-bezier(.2,.7,.35,1);
  --adr-t-slow:380ms cubic-bezier(.16,.84,.28,1);
  --adr-t-rule:520ms cubic-bezier(.25,.9,.25,1);
}

/* ============================================================
   1. Base
   ============================================================ */

html,body{margin:0;padding:0;overflow-x:hidden;background:var(--adr-wall);}
body.adr-shell{
  font:400 16px/1.75 var(--adr-font-body);
  color:var(--adr-ink-2);
  background:var(--adr-grad-wall);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.adr-shell *,.adr-shell *::before,.adr-shell *::after{box-sizing:border-box;}
.adr-shell img,.adr-shell svg{max-width:100%;}
.adr-shell h1,.adr-shell h2,.adr-shell h3{
  font-family:var(--adr-font-display);
  font-weight:700;
  color:var(--adr-ink);
  margin:0 0 10px;
  line-height:1.32;
}
.adr-shell h1{font-size:clamp(28px,7.4vw,46px);line-height:1.28;}
.adr-shell h2{font-size:clamp(21px,4.6vw,30px);line-height:1.34;}
.adr-shell h3{font-size:18px;line-height:1.38;}
.adr-shell p{margin:0 0 12px;}
/* PROSE links only. `.adr-shell a` is (0,1,1) and beats every single-class
   component rule, so a blanket underline + green here painted the ৯৯৯ button
   as an underlined green hyperlink on the emergency plate (where DESIGN.md 8.1
   removes brand green entirely) and flattened all four tab-bar items into
   identical underlined links with nothing separating the current one. Anchors
   that are controls get their look from their own class, below. */
.adr-shell a{color:var(--adr-600);}
.adr-shell p a,.adr-shell li a,.adr-shell dd a,.adr-shell .adr-emerg__after a{text-decoration:underline;text-underline-offset:2px;}
.adr-shell ul,.adr-shell ol{margin:0;padding:0;list-style:none;}
.adr-shell :focus-visible{outline:3px solid var(--adr-focus);outline-offset:2px;border-radius:var(--adr-r-xs);}
.adr-icon{flex:none;vertical-align:middle;}

.adr-app-main{display:block;width:100%;}
.adr-app-main--nav{max-width:600px;margin:0 auto;padding:0 14px 96px;}
.adr-app-main--landing{max-width:none;margin:0;padding:0;}
.adr-wrap{width:100%;max-width:600px;margin:0 auto;padding:16px 0 8px;min-width:0;}
.adr-band__in{width:100%;max-width:760px;margin:0 auto;padding:0 16px;min-width:0;}

/* ============================================================
   2. Buttons. Press is a shadow swap: nothing in this app translates,
   scales or rotates on hover or press.
   ============================================================ */

.adr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 22px;
  border:0;border-radius:var(--adr-r-sm);
  font:600 16px/1.2 var(--adr-font-body);
  text-decoration:none;cursor:pointer;
  transition:box-shadow var(--adr-t),background-color var(--adr-t),color var(--adr-t);
}
.adr-btn--primary{background-image:var(--adr-grad-btn);color:var(--adr-plate);box-shadow:var(--adr-sh-2);}
.adr-btn--plate{background-image:var(--adr-grad-plate);color:var(--adr-600);box-shadow:var(--adr-keyline),var(--adr-sh-plate);}
.adr-btn--ghost{background:transparent;color:var(--adr-600);box-shadow:var(--adr-keyline);min-height:48px;}
.adr-btn--emerg{
  background-image:var(--adr-grad-btn-emerg);color:var(--adr-u-emergency);
  min-height:56px;width:100%;box-shadow:var(--adr-sh-plate);border-radius:var(--adr-r-sm);
}
.adr-btn--emerg-2{background:transparent;color:var(--adr-u-emergency-200);box-shadow:inset 0 0 0 1px var(--adr-u-emergency-200);min-height:48px;}
.adr-btn--danger{background:transparent;color:var(--adr-u-emergency);box-shadow:inset 0 0 0 1px var(--adr-u-emergency);}
@media (hover:hover){
  .adr-btn--primary:hover{box-shadow:var(--adr-sh-3);}
  .adr-btn--plate:hover{box-shadow:var(--adr-keyline),var(--adr-sh-3);}
  .adr-btn--ghost:hover{background-color:var(--adr-050);box-shadow:var(--adr-keyline);}
  .adr-btn--danger:hover{background-color:var(--adr-u-emergency-tint);box-shadow:inset 0 0 0 1px var(--adr-u-emergency);}
}
.adr-btn:active{box-shadow:var(--adr-sh-press);}
.adr-btn[disabled]{color:var(--adr-300);background-image:none;background-color:var(--adr-wall-2);box-shadow:none;cursor:not-allowed;}
.adr-linkbtn{
  background:none;border:0;padding:12px 4px;min-height:44px;
  font:600 14px/1.4 var(--adr-font-body);color:var(--adr-600);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  border-radius:var(--adr-r-xs);
  transition:color var(--adr-t);
}

/* ============================================================
   3. Cards, plates and the signature double rule
   ============================================================ */

.adr-card{
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-md);
  box-shadow:var(--adr-keyline),var(--adr-sh-plate);
  padding:18px;margin:0 0 16px;min-width:0;
}
/* The double rule is a mark of the object, not decoration: it is applied to
   exactly five surfaces (hero form plate, result urgency plate, login card,
   doctor card, open FAQ panel). Adding a sixth is a spec violation. */
.adr-card--ruled{box-shadow:var(--adr-keyline-2),var(--adr-sh-plate);}
.adr-card h2{margin-top:0;}

/* ============================================================
   4. The symptom box
   ============================================================ */

.adr-ask{
  position:relative;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-lg);
  box-shadow:var(--adr-keyline-2),var(--adr-sh-plate);
  padding:20px;margin:0 0 16px;min-width:0;
}
.adr-ask__label{display:block;font:600 15px/1.5 var(--adr-font-body);color:var(--adr-ink);margin-bottom:8px;}
.adr-ask__field{
  display:block;width:100%;min-height:96px;padding:12px 14px;
  font:400 16px/1.7 var(--adr-font-body);color:var(--adr-ink);
  background-image:var(--adr-grad-well);
  border:0;border-radius:var(--adr-r-sm);
  box-shadow:var(--adr-sh-inset);
  resize:vertical;
  transition:box-shadow var(--adr-t);
}
.adr-ask__field::placeholder{color:var(--adr-ink-3);}
.adr-ask__field:focus{box-shadow:var(--adr-sh-inset),0 0 0 3px rgba(76,155,39,.22);outline:none;}
.adr-ask__district{margin:12px 0 0;}
.adr-ask__go{width:100%;margin-top:12px;}
.adr-ask__note{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--adr-ink-3);}
.adr-ask__msg:empty{display:none;}

/* ============================================================
   5. The urgency banner. Six carriers, five of which survive greyscale.
   ============================================================ */

.adr-urgency,.adr-rung{
  position:relative;
  padding:16px 16px 16px 26px;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-lg);
  box-shadow:var(--adr-keyline),var(--adr-sh-plate);
  margin:0 0 14px;min-width:0;
}
.adr-urgency.adr-ruled{box-shadow:var(--adr-keyline-2),var(--adr-sh-plate);}
.adr-rail{
  position:absolute;left:0;top:0;bottom:0;
  display:flex;flex-direction:column;gap:2px;
  padding:8px 0;width:4px;
}
.adr-rail>i{display:block;flex:1;border-radius:var(--adr-r-xs);background:var(--adr-wall-2);}
/*
 * The rail colour is composed AT THE ELEMENT, never nested inside a custom
 * property. A var() inside a custom property resolves where it is DECLARED, so
 * `--adr-rail-fill: ... var(--adr-u)` on :root would bake in the root value and
 * every [data-level] override below would silently do nothing. This portfolio
 * has shipped that bug (NEW-APP-CHECKLIST 4b.1). Verify by reading the COMPUTED
 * background in a real browser, not by looking at a screenshot.
 */
[data-level="emergency"] .adr-rail>i.is-on{background:var(--adr-u-emergency);}
[data-level="today"] .adr-rail>i.is-on{background:var(--adr-u-today);}
[data-level="soon"] .adr-rail>i.is-on{background:var(--adr-u-soon);}
[data-level="routine"] .adr-rail>i.is-on{background:var(--adr-u-routine);}
[data-level="emergency"] .adr-rail{width:6px;}
[data-level="today"] .adr-rail{width:4px;}
[data-level="soon"] .adr-rail{width:3px;}
[data-level="routine"] .adr-rail{width:1px;}

.adr-urgency__n,.adr-rung__n{
  display:inline-block;vertical-align:middle;margin-right:8px;
  font:600 12px/1.4 var(--adr-font-body);color:var(--adr-ink-3);
}
.adr-urgency__icon,.adr-urgency>.adr-icon{vertical-align:middle;color:var(--adr-u-routine);}
[data-level="emergency"]>.adr-icon{color:var(--adr-u-emergency);}
[data-level="today"]>.adr-icon{color:var(--adr-u-today);}
[data-level="soon"]>.adr-icon{color:var(--adr-u-soon);}
.adr-urgency__label,.adr-rung__label{
  display:inline-block;margin:0 0 6px;padding:3px 9px;
  font:600 12px/1.4 var(--adr-font-body);letter-spacing:.06em;
  color:var(--adr-ink);background:var(--adr-u-routine-tint);
  border-radius:var(--adr-r-sm);box-shadow:var(--adr-keyline);
}
[data-level="emergency"] .adr-urgency__label,[data-level="emergency"] .adr-rung__label{background:var(--adr-u-emergency-tint);color:var(--adr-u-emergency);}
[data-level="today"] .adr-urgency__label,[data-level="today"] .adr-rung__label{background:var(--adr-u-today-tint);color:var(--adr-u-today);}
[data-level="soon"] .adr-urgency__label,[data-level="soon"] .adr-rung__label{background:var(--adr-u-soon-tint);color:var(--adr-600);}
.adr-urgency .adr-urgency__head{margin:2px 0 8px;font-family:var(--adr-font-display);font-weight:700;font-size:21px;line-height:1.34;}
[data-level="today"] .adr-urgency__head{font-size:24px;line-height:1.30;}
[data-level="soon"] .adr-urgency__head{font-size:21px;line-height:1.34;}
[data-level="routine"] .adr-urgency__head{font-size:19px;line-height:1.36;}
.adr-urgency__action{margin:0;font-size:16px;line-height:1.75;color:var(--adr-ink-2);}

/* ============================================================
   6. The answer block
   ============================================================ */

.adr-answer{min-width:0;}
.adr-answer:empty{display:none;}
.adr-answer__spec,.adr-result__spec{margin:4px 0 6px;font:400 16px/1.6 var(--adr-font-body);color:var(--adr-ink-2);}
/* THE SHOULDER-SURFING RULE, as a number. The specialty is the one string in
   this app that outs a reader, so it is capped and bound to the body face on
   every screen. মানসিক রোগ বিশেষজ্ঞ must never be broadcast type. */
.adr-answer__spec strong,.adr-result__spec strong{
  font-family:var(--adr-font-body);font-weight:600;font-size:17px;
  color:var(--adr-ink);
}
.adr-answer__does,.adr-result__does{margin:0 0 8px;font-size:16px;line-height:1.75;color:var(--adr-ink-2);}
.adr-answer__count,.adr-result__count{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--adr-ink-3);}
.adr-answer__empty{margin:0;padding:14px 16px;font-size:16px;color:var(--adr-ink-2);background:var(--adr-wall-2);border-radius:var(--adr-r-md);box-shadow:var(--adr-keyline);}
.adr-answer .adr-btn{width:100%;}

/* ============================================================
   7. THE EMERGENCY STATE. The only inverted surface in the app.
   Brand green is removed from the visible area: an emergency screen with a
   cheerful green CTA on it is a mixed message.
   ============================================================ */

.adr-emerg{
  position:relative;
  padding:20px 18px 18px 30px;
  background-image:var(--adr-grad-dark);
  color:var(--adr-plate);
  border-radius:var(--adr-r-lg);
  box-shadow:inset 0 0 0 1px var(--adr-u-emergency-200),
             inset 0 0 0 4px var(--adr-u-emergency-plate),
             inset 0 0 0 6px rgba(220,104,96,.55),
             0 18px 40px -18px rgba(20,8,6,.65);
  margin:0 0 12px;min-width:0;
}
.adr-emerg .adr-rail{width:6px;padding:10px 0;}
.adr-emerg .adr-rail>i{background:rgba(255,255,255,.16);}
.adr-emerg .adr-rail>i.is-on{background:var(--adr-u-emergency);}
.adr-emerg__n{display:inline-block;margin-right:8px;font:600 12px/1.4 var(--adr-font-body);color:var(--adr-u-emergency-200);}
.adr-emerg>.adr-icon{color:var(--adr-u-emergency);vertical-align:middle;}
.adr-emerg__label{
  display:inline-block;margin:8px 0 6px;padding:3px 10px;
  font:600 12px/1.4 var(--adr-font-body);letter-spacing:.06em;
  color:var(--adr-plate);background:var(--adr-u-emergency);
  border-radius:var(--adr-r-sm);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
/* Two classes, not one: `.adr-shell h1/h2` is (0,1,1) and its clamp() would
   otherwise win over a single class and shrink the largest type in the product
   to 21px at 360. Every heading whose size is load-bearing is written this way. */
.adr-emerg .adr-emerg__head{
  margin:6px 0 14px;color:var(--adr-plate);
  font-family:var(--adr-font-display);font-weight:700;
  font-size:30px;line-height:1.26;
}
@media (min-width:1024px){.adr-emerg .adr-emerg__head{font-size:34px;}}
.adr-emerg__go{margin:0 0 10px;font:600 18px/1.5 var(--adr-font-body);color:var(--adr-plate);}
.adr-emerg__body{margin:14px 0 6px;font-size:16px;line-height:1.75;color:#F1D9D6;}
.adr-emerg__alt{margin:0;font-size:14px;line-height:1.6;color:var(--adr-u-emergency-200);}
.adr-emerg__alt strong{font-weight:700;color:var(--adr-plate);letter-spacing:.04em;}
.adr-emerg__after{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--adr-ink-3);}
.adr-emerg__after a{color:var(--adr-ink-3);}
.adr-emerg .adr-urgency__n{color:var(--adr-u-emergency-200);}
.adr-urgency .adr-emerg__label{background:var(--adr-u-emergency);}

/* The emergency strip: position three on the landing, last on home. */
.adr-strip{
  position:relative;
  padding:20px 18px 18px 28px;margin:0 0 18px;
  background-image:var(--adr-grad-dark);
  color:var(--adr-plate);
  border-radius:var(--adr-r-lg);
  box-shadow:inset 0 0 0 1px rgba(220,104,96,.45),0 14px 32px -18px rgba(20,8,6,.6);
  min-width:0;
}
.adr-strip::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--adr-u-emergency);
  border-radius:var(--adr-r-xs) 0 0 var(--adr-r-xs);
}
.adr-strip>.adr-icon{color:var(--adr-u-emergency);}
.adr-strip .adr-strip__head{margin:8px 0 6px;font:700 21px/1.34 var(--adr-font-display);color:var(--adr-plate);}
.adr-strip__body{margin:0 0 14px;font-size:15px;line-height:1.7;color:#EFDAD7;}
.adr-landing .adr-strip{max-width:760px;margin:0 auto 18px;}

/* ============================================================
   8. Landing bands
   ============================================================ */

.adr-landing{display:block;width:100%;overflow-x:hidden;}
.adr-topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:56px;padding:0 14px;
  background-image:var(--adr-grad-enamel);
  box-shadow:0 1px 0 rgba(153,193,133,.35),0 6px 18px -12px rgba(20,40,14,.7);
}
.adr-topbar::after{content:"";position:absolute;left:0;right:0;top:0;height:22px;background-image:var(--adr-grad-gloss);pointer-events:none;}
/* The brand is a link, so it is a tap target: 44px tall like every other one. */
.adr-brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 4px;text-decoration:none;min-width:0;border-radius:var(--adr-r-sm);}
.adr-brand__name{font:700 18px/1.2 var(--adr-font-display);color:var(--adr-plate);white-space:nowrap;}
.adr-brand__q{color:var(--adr-400);}
.adr-topbar__cta{min-height:44px;padding:0 16px;font-size:15px;border-radius:var(--adr-r-sm);}

.adr-board{
  position:relative;
  padding:26px 0 30px;
  background-image:var(--adr-grad-enamel);
  box-shadow:inset 0 -1px 0 rgba(24,48,18,.6);
}
.adr-board::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background-image:var(--adr-grad-gloss);pointer-events:none;}
.adr-board__eyebrow{
  display:inline-block;margin:0 0 10px;padding:4px 10px;
  font:600 12px/1.4 var(--adr-font-body);letter-spacing:.06em;
  color:var(--adr-050);background:rgba(101,170,70,.22);
  border-radius:var(--adr-r-sm);box-shadow:var(--adr-keyline-dark);
}
/* Two classes: `.adr-shell h1` is (0,1,1) and sets --adr-ink, so a single-class
   colour loses and the headline renders near-black on the dark enamel field.
   Every heading that sits on enamel is written this way. */
.adr-board .adr-board__h1{color:var(--adr-plate);margin:0 0 10px;}
.adr-board__sub{margin:0 0 18px;font-size:16px;line-height:1.7;color:#DDEBD6;max-width:36em;}
.adr-board .adr-ask{margin-bottom:14px;}
.adr-board.is-emergency .adr-ask{box-shadow:var(--adr-keyline),var(--adr-sh-plate);}

.adr-ladder-band,.adr-counts,.adr-specialties,.adr-login,.adr-districts,.adr-faq{padding:30px 0;}
.adr-ladder-band{background-image:var(--adr-grad-wall);}
.adr-counts{background-image:var(--adr-grad-tint);box-shadow:inset 0 1px 0 var(--adr-edge),inset 0 -1px 0 var(--adr-edge);}
.adr-specialties{background-image:var(--adr-grad-wall);}
.adr-login{background-image:var(--adr-grad-tint);box-shadow:inset 0 1px 0 var(--adr-edge),inset 0 -1px 0 var(--adr-edge);}
.adr-districts{background-image:var(--adr-grad-wall);}
.adr-faq{background-image:var(--adr-grad-wall);box-shadow:inset 0 1px 0 var(--adr-edge);}

/* The three answers this app gives. Rungs of the plate ladder. */
.adr-rungs{display:grid;gap:12px;margin:0 0 16px;}
.adr-rung{padding-left:26px;}
.adr-rung__line{margin:2px 0 0;font:700 18px/1.4 var(--adr-font-display);color:var(--adr-ink);}
.adr-rung>.adr-icon{color:var(--adr-u-routine);vertical-align:middle;}
.adr-flags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;}
.adr-flags li{
  padding:5px 10px;font-size:13px;line-height:1.4;color:var(--adr-ink-2);
  background:var(--adr-wall-2);border-radius:var(--adr-r-sm);
  box-shadow:var(--adr-keyline);
}
.adr-ladder-band__close{margin:6px 0 0;font-size:16px;line-height:1.75;color:var(--adr-ink-2);}

/* Counted figures. Every one of them is a count() at render time. */
.adr-counts__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px;}
.adr-count{
  padding:16px 14px;text-align:center;min-width:0;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-md);
  box-shadow:var(--adr-keyline),var(--adr-sh-plate);
}
.adr-count b{display:block;font:700 26px/1.15 var(--adr-font-display);color:var(--adr-ink);}
.adr-count span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--adr-ink-3);}
/* ink-3 measures 4.34:1 on the tint band (it clears 4.5 only on the plain
   wall), so the source line takes ink-2 here. Measured, not assumed. */
.adr-counts__src{margin:0;font-size:13px;line-height:1.6;color:var(--adr-ink-2);}

/* The specialty plate wall. A hand-picked eight, never a top-N. */
.adr-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.adr-plate{
  padding:14px;min-width:0;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-md);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
  transition:box-shadow var(--adr-t);
}
/* A wall plate names a SPECIALTY, so it obeys the same rule the result screen
   obeys: capped at 17px and set in the body face, never in the sign face. The
   public eight are all non-sensitive, but the rule is kept mechanical so a
   ninth plate cannot quietly break it. */
.adr-plate .adr-plate__title{margin:0 0 4px;font-family:var(--adr-font-body);font-weight:600;font-size:17px;line-height:1.35;overflow-wrap:anywhere;}
.adr-plate__line{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--adr-ink-2);}
.adr-plate__n{
  display:inline-block;padding:2px 8px;
  font:600 13px/1.4 var(--adr-font-body);color:var(--adr-600);
  background:var(--adr-100);border-radius:var(--adr-r-sm);
  box-shadow:inset 3px 0 0 var(--adr-500);
}
@media (hover:hover){.adr-plate:hover{box-shadow:var(--adr-keyline),var(--adr-sh-2);}}

/* The 13 districts. */
.adr-jela{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 14px;}
.adr-jela__plate{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:44px;padding:8px 12px;min-width:0;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-sm);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
}
.adr-jela__bn{font:600 15px/1.4 var(--adr-font-body);color:var(--adr-ink);min-width:0;overflow-wrap:anywhere;}
.adr-jela__n{font:400 13px/1.4 var(--adr-font-body);color:var(--adr-ink-3);flex:none;}
.adr-districts__close{margin:0;font-size:16px;line-height:1.7;color:var(--adr-ink-2);}

/* ============================================================
   9. Login card, fields, messages
   ============================================================ */

.adr-login__card{margin:0;padding:20px;}
.adr-field__label{display:block;margin:14px 0 6px;font:600 14px/1.5 var(--adr-font-body);color:var(--adr-ink);}
.adr-input,.adr-select{
  display:block;width:100%;min-height:52px;padding:0 14px;
  font:400 16px/1.4 var(--adr-font-body);color:var(--adr-ink);
  background-image:var(--adr-grad-well);
  border:0;border-radius:var(--adr-r-sm);
  box-shadow:var(--adr-sh-inset);
  transition:box-shadow var(--adr-t);
}
.adr-select{
  min-height:48px;padding-right:38px;
  -webkit-appearance:none;appearance:none;
  /* THE CHEVRON IS THE FIRST LAYER. The first background-image paints on TOP,
     so listing the opaque well gradient first hid the chevron completely and a
     native <select> became indistinguishable from a disabled text input. The
     district picker is safety-binding (data/districts.php): it has to look
     like something that opens. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2366725F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"),var(--adr-grad-well);
  background-repeat:no-repeat,no-repeat;
  background-position:right 10px center,0 0;
  background-size:18px 18px,auto;
}
.adr-input:focus,.adr-select:focus{box-shadow:var(--adr-sh-inset),0 0 0 3px rgba(76,155,39,.22);outline:none;}
.adr-login__card .adr-btn{width:100%;margin-top:12px;}
.adr-login__hint{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--adr-ink-3);}
.adr-demo{
  margin:12px 0 0;padding:10px 12px;
  font:600 15px/1.5 var(--adr-font-body);color:var(--adr-600);
  background:var(--adr-050);border-radius:var(--adr-r-sm);
  box-shadow:inset 0 0 0 1px var(--adr-200);
}
.adr-msg{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--adr-ink-2);}
.adr-msg:empty{display:none;}
/* NEW-APP-CHECKLIST 3.1: the charge line is the last element of the login card,
   below the OTP button, small, muted and centred. Never a panel, never a badge. */
.adr-login__charge{
  margin:18px 0 0;text-align:center;
  font:400 13px/1.6 var(--adr-font-body);color:var(--adr-ink-3);
}

/* The plate ladder: the step motif, and the same object as the urgency rail. */
.adr-ladder{display:flex;gap:8px;margin:0 0 6px;}
.adr-ladder li{
  position:relative;flex:1;min-width:0;min-height:28px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:4px 6px 4px 16px;
  font:600 13px/1.3 var(--adr-font-body);color:var(--adr-ink-3);
  background:var(--adr-wall-2);
  border-radius:var(--adr-r-sm);
  box-shadow:inset 0 0 0 1px var(--adr-edge);
  transition:box-shadow var(--adr-t),background-color var(--adr-t),color var(--adr-t);
}
.adr-ladder__screw{
  position:absolute;left:6px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:var(--adr-r-dot);
  background:var(--adr-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.adr-ladder li.is-done{background-image:var(--adr-grad-plate);color:var(--adr-600);box-shadow:var(--adr-keyline),var(--adr-sh-1);}
.adr-ladder li.is-done .adr-ladder__screw{background-image:var(--adr-grad-brass);box-shadow:var(--adr-sh-screw);}
.adr-ladder li.is-now{background-image:var(--adr-grad-enamel);color:var(--adr-plate);box-shadow:var(--adr-sh-2);}
.adr-ladder li.is-now .adr-ladder__screw{background-image:var(--adr-grad-brass);box-shadow:var(--adr-sh-screw);}

/* ============================================================
   10. FAQ
   ============================================================ */

.adr-faq__row{
  margin:0 0 10px;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-md);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
  overflow:hidden;
}
.adr-faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:52px;padding:12px 16px;cursor:pointer;
  font:600 17px/1.4 var(--adr-font-body);color:var(--adr-ink);
  list-style:none;
  transition:background-color var(--adr-t);
}
.adr-faq__q::-webkit-details-marker{display:none;}
.adr-faq__q .adr-icon{color:var(--adr-ink-3);transition:transform var(--adr-t-fast);}
.adr-faq__row[open] .adr-faq__q .adr-icon{transform:rotate(90deg);}
.adr-faq__row[open]{box-shadow:var(--adr-keyline-2),var(--adr-sh-2);}
/* Inset by the width of the double rule: a child background paints ABOVE a
   parent's inset box-shadow, so a flush panel covers the very keyline that
   marks this as one of the five ruled surfaces. */
.adr-faq__a{margin:0 5px 5px;padding:0 12px 12px;background:var(--adr-050);}
.adr-faq__a p{margin:12px 0 0;font-size:15px;line-height:1.8;color:var(--adr-ink-2);}

/* ============================================================
   11. Footer
   ============================================================ */

.adr-footer{
  padding:26px 0 30px;
  background-image:var(--adr-grad-enamel-deep);
  color:#C9DCC0;
  box-shadow:inset 0 1px 0 rgba(153,193,133,.25);
}
.adr-footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.adr-footer .adr-brand__name{color:var(--adr-plate);}
.adr-footer__line{margin:0 0 8px;font-size:14px;line-height:1.7;}
.adr-footer__contact{margin:12px 0 0;font-size:13px;line-height:1.7;color:#9CB795;}

/* ============================================================
   12. The doctor card
   ============================================================ */

.adr-list{display:grid;gap:12px;margin:0 0 16px;min-width:0;}
.adr-doc{
  position:relative;
  padding:16px 16px 12px 20px;min-width:0;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-md);
  box-shadow:var(--adr-keyline-2),var(--adr-sh-plate);
}
.adr-doc__rail{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--adr-500);border-radius:var(--adr-r-xs) 0 0 var(--adr-r-xs);transition:width var(--adr-t-fast),background-color var(--adr-t);}
/* Inside a result list the rail takes the urgency colour, so the whole list
   carries the level. On the browse screen there is no urgency and it stays green. */
[data-level="emergency"] .adr-doc__rail{background:var(--adr-u-emergency);}
[data-level="today"] .adr-doc__rail{background:var(--adr-u-today);}
[data-level="soon"] .adr-doc__rail{background:var(--adr-u-soon);}
.adr-doc[data-saved="1"] .adr-doc__rail{width:6px;}
.adr-doc__screw{
  position:absolute;right:12px;top:12px;width:10px;height:10px;
  border-radius:var(--adr-r-dot);
  background-image:var(--adr-grad-brass);
  box-shadow:var(--adr-sh-screw);
}
.adr-doc .adr-doc__name{margin:0 0 4px;font-size:18px;line-height:1.35;overflow-wrap:anywhere;}
/* Degrees are never clamped and never ellipsised: truncating a doctor's
   qualifications is a value cut on a paid directory. */
.adr-doc__degrees{margin:0 0 8px;font-size:14px;line-height:1.65;color:var(--adr-ink-3);overflow-wrap:anywhere;}
.adr-doc__spec{margin:0 0 4px;}
/* The facility, unlabelled and quoted verbatim: it may be an institution, an
   address or a job title, and the card must not claim which. */
.adr-shell .adr-doc__facility{margin:0 0 8px;font-size:14px;line-height:1.65;color:var(--adr-ink-2);overflow-wrap:anywhere;}
.adr-doc__rule{border:0;height:1px;margin:12px 0;background:var(--adr-edge);}
.adr-doc__meta{display:grid;gap:8px;margin:0;min-width:0;}
.adr-doc__meta>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;min-width:0;}
.adr-doc__meta dt{
  display:flex;align-items:center;gap:5px;
  font:600 12px/1.5 var(--adr-font-body);letter-spacing:.06em;color:var(--adr-ink-3);
}
.adr-doc__meta dt .adr-icon{color:var(--adr-300);}
.adr-doc__meta dd{margin:0;font-size:14px;line-height:1.65;color:var(--adr-ink-2);overflow-wrap:anywhere;min-width:0;}
.adr-doc__meta dd.is-absent{color:var(--adr-ink-3);font-style:normal;}
.adr-doc__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;}
/* তালিকাভুক্ত: three rules of unequal length, never a tick and never a shield.
   No row carries a BMDC number and none can be checked, so a tick beside a
   named doctor would be a claim this app is not allowed to make. */
.adr-doc__listed{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;
  font:600 12px/1.4 var(--adr-font-body);letter-spacing:.04em;
  color:var(--adr-u-routine);background:var(--adr-wall-2);
  border-radius:var(--adr-r-xs);box-shadow:var(--adr-keyline);
}
.adr-doc__save{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 14px;
  font:600 14px/1.2 var(--adr-font-body);color:var(--adr-600);
  background-image:var(--adr-grad-plate);
  border:0;border-radius:var(--adr-r-sm);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
  cursor:pointer;
  transition:box-shadow var(--adr-t),color var(--adr-t);
}
.adr-doc__screwdot{
  width:10px;height:10px;border-radius:var(--adr-r-dot);
  background:var(--adr-wall-2);
  box-shadow:inset 0 0 0 1px var(--adr-edge);
  transition:box-shadow var(--adr-t),background-color var(--adr-t);
}
.adr-doc__save[aria-pressed="true"] .adr-doc__screwdot{background-image:var(--adr-grad-brass);box-shadow:var(--adr-sh-screw);}
.adr-doc__save[disabled]{color:var(--adr-300);cursor:progress;}
@media (hover:hover){.adr-doc__save:hover{box-shadow:var(--adr-keyline),var(--adr-sh-2);}}
.adr-doc__save:active{box-shadow:var(--adr-sh-press);}
.adr-doc__msg{margin:8px 0 0;color:var(--adr-u-emergency);}

/* The list header: printed ONCE per list, never per row. */
.adr-list__head{margin:0 0 12px;padding:10px 12px;background:var(--adr-wall-2);border-radius:var(--adr-r-sm);box-shadow:var(--adr-keyline);}
.adr-list__note{margin:0 0 6px;font-size:14px;line-height:1.65;color:var(--adr-ink-2);}
.adr-list__nophone,.adr-list__source{margin:0;font-size:13px;line-height:1.6;color:var(--adr-ink-3);}
.adr-list__nophone{margin-bottom:4px;}

.adr-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 20px;min-width:0;}
.adr-pager__at{font:600 14px/1.4 var(--adr-font-body);color:var(--adr-ink-3);text-align:center;}
.adr-pager__gap{display:block;min-width:44px;}
.adr-pager .adr-btn{flex:none;padding:0 14px;}

/* ============================================================
   13. Chips
   ============================================================ */

.adr-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 10px;min-height:32px;
  font:600 13px/1.4 var(--adr-font-body);color:var(--adr-600);
  background:var(--adr-100);
  border-radius:var(--adr-r-sm);
  box-shadow:var(--adr-keyline);
  text-decoration:none;min-width:0;overflow-wrap:anywhere;
  transition:box-shadow var(--adr-t),background-color var(--adr-t);
}
/* The specialty chip carries the hard cap. It is never set in the display face. */
.adr-chip--spec{font-size:13px;max-width:100%;box-shadow:var(--adr-keyline),inset 3px 0 0 var(--adr-500);padding-left:12px;text-overflow:clip;}
.adr-chip--district{background:var(--adr-050);color:var(--adr-ink-2);min-height:36px;}
.adr-chip--recent{min-height:44px;padding:0 12px;}
.adr-chip__x{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:-2px;
  border:0;background:none;cursor:pointer;color:var(--adr-ink-3);
  font-size:18px;line-height:1;border-radius:var(--adr-r-sm);
  transition:color var(--adr-t),background-color var(--adr-t);
}
@media (hover:hover){.adr-chip__x:hover{color:var(--adr-u-emergency);background:var(--adr-wall-2);}}

/* ============================================================
   14. Home, browse, account
   ============================================================ */

.adr-greet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;}
.adr-greet__hi{margin:0;font:600 17px/1.4 var(--adr-font-body);color:var(--adr-ink);}
.adr-recent{margin:0 0 18px;}
.adr-recent h2{font-size:19px;margin-bottom:8px;}
.adr-recent__row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;}
.adr-recent__item{display:inline-flex;align-items:center;min-width:0;}
.adr-recent__note{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--adr-ink-3);}

.adr-filters{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:0 0 14px;padding:14px;
  background-image:var(--adr-grad-plate);
  border-radius:var(--adr-r-md);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
}
.adr-filters__f{min-width:0;}
.adr-filters__f .adr-field__label{margin-top:0;}
.adr-filters .adr-btn{width:100%;}
.adr-browse__count{margin:0 0 10px;font:600 15px/1.6 var(--adr-font-body);color:var(--adr-ink-2);}
.adr-result__filter{display:grid;gap:10px;margin:0 0 14px;padding:14px;background-image:var(--adr-grad-plate);border-radius:var(--adr-r-md);box-shadow:var(--adr-keyline),var(--adr-sh-1);}
.adr-result__filter .adr-field__label{margin-top:0;}

.adr-acc__profile .adr-btn{width:100%;margin-top:14px;}
.adr-acc__phone{margin:0;font:600 16px/1.5 var(--adr-font-body);color:var(--adr-ink-2);letter-spacing:.04em;}
/* The whole label is the target and it is 44px tall; the native box stays at a
   normal size inside it, which is what a checkbox is supposed to look like. */
.adr-check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;padding:4px 2px;font-size:15px;line-height:1.5;color:var(--adr-ink-2);cursor:pointer;border-radius:var(--adr-r-sm);}
.adr-check input{width:24px;height:24px;flex:none;accent-color:var(--adr-500);}
.adr-saved h2,.adr-stop h2{font-size:19px;}
.adr-stop{padding:18px;}
.adr-stop__status{margin:0 0 8px;font:600 15px/1.6 var(--adr-font-body);color:var(--adr-ink);}
.adr-stop .adr-btn{width:100%;margin-top:8px;}
#adr-unsub-confirm{margin-top:12px;padding:12px;background:var(--adr-u-emergency-tint);border-radius:var(--adr-r-sm);box-shadow:inset 0 0 0 1px rgba(193,37,31,.25);}
#adr-unsub-confirm p{margin:0 0 8px;font:600 15px/1.5 var(--adr-font-body);color:var(--adr-ink);}
.adr-acc__logout{width:100%;margin:6px 0 20px;}
.adr-empty{text-align:center;}
.adr-empty p{margin:0 0 12px;color:var(--adr-ink-2);}
.adr-gate{text-align:left;}
.adr-gate .adr-btn{width:100%;margin-top:6px;}

/* ============================================================
   15. The bottom tab bar. Four items, never dimmed below 4.5:1, present in
   every state including the emergency one: a person who tripped a false
   positive must be able to leave.
   ============================================================ */

.adr-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  background-image:var(--adr-grad-plate);
  box-shadow:var(--adr-sh-tab);
  border-top:1px solid var(--adr-edge);
}
.adr-tabbar__item{
  position:relative;flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:58px;padding:6px 2px;
  color:var(--adr-ink-3);text-decoration:none;
  transition:color var(--adr-t),background-color var(--adr-t);
}
.adr-tabbar__label{font:600 12px/1.2 var(--adr-font-body);}
.adr-tabbar__item.is-active{color:var(--adr-600);}
.adr-tabbar__item.is-active .adr-tabbar__label{font-weight:700;}
.adr-tabbar__item.is-active::before{
  content:"";position:absolute;left:10%;right:10%;top:0;height:3px;
  background:var(--adr-500);border-radius:0 0 var(--adr-r-xs) var(--adr-r-xs);
}
@media (hover:hover){.adr-tabbar__item:hover{background-color:var(--adr-050);}}

/* ============================================================
   16. THE SIGNATURE MOTION: কি-লাইন টান, the keyline draw.
   One pseudo-element, four background layers, one keyframe block. No
   clip-path, no SVG stroke-dashoffset, no JS, no transform: all of those are
   risky or expensive on a 2019 Android WebView. It FAILS OPEN: the real
   keyline is already painted by --adr-keyline-2 in the static CSS and this
   overlay ends at opacity 0, so if animations never run the line is simply
   there. Never on a doctor card: a 268-row list animating 268 keylines is
   where a cheap phone drops frames.
   ============================================================ */

.adr-ruled{position:relative;}
.adr-ruled::after{
  content:"";position:absolute;inset:5px;
  border-radius:calc(var(--adr-r-lg) - 5px);
  pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--adr-500),var(--adr-500)),
    linear-gradient(90deg,var(--adr-500),var(--adr-500)),
    linear-gradient(90deg,var(--adr-500),var(--adr-500)),
    linear-gradient(90deg,var(--adr-500),var(--adr-500));
  background-repeat:no-repeat;
  background-position:0 0,100% 0,100% 100%,0 100%;
  background-size:100% 1px,1px 100%,100% 1px,1px 100%;
  opacity:0;
}
.adr-ruled.is-drawing::after{animation:adr-rule var(--adr-t-rule) forwards;}
@keyframes adr-rule{
  0%  {opacity:1;background-size:0 1px,1px 0,0 1px,1px 0;}
  50% {opacity:1;background-size:100% 1px,1px 100%,0 1px,1px 0;}
  99% {opacity:1;background-size:100% 1px,1px 100%,100% 1px,1px 100%;}
  100%{opacity:0;background-size:100% 1px,1px 100%,100% 1px,1px 100%;}
}

/* ============================================================
   17. Materials, states and the small parts.

   The object this app is made of is an enamelled plate screwed to a painted
   wall, so the plates that carry the double rule carry brass screw heads too,
   the enamel bands carry a gloss, and every interactive surface answers a
   pointer with a deeper ambient rather than with movement.
   ============================================================ */

/* --- screw heads on the plates that are screwed to the wall ---
   Drawn as BACKGROUND LAYERS, not pseudo-elements. ::after on these plates
   already belongs to the keyline draw (section 16), and a second rule for a
   screw on the same pseudo-element inherits its opacity:0 and vanishes: the
   right-hand screw was invisible until this was written as a background. */
.adr-login__card{position:relative;}
.adr-ask,.adr-login__card{
  background-image:
    radial-gradient(circle at 15px 15px,#E4CE93 0 1.6px,#AB8E49 1.6px 3.4px,#776540 3.4px 4.2px,rgba(255,255,255,0) 4.4px),
    radial-gradient(circle at calc(100% - 15px) 15px,#E4CE93 0 1.6px,#AB8E49 1.6px 3.4px,#776540 3.4px 4.2px,rgba(255,255,255,0) 4.4px),
    var(--adr-grad-plate);
  background-repeat:no-repeat,no-repeat,repeat;
}

/* --- gloss over every enamel surface --- */
.adr-strip::after{
  content:"";position:absolute;left:0;right:0;top:0;height:64px;
  border-radius:var(--adr-r-lg) var(--adr-r-lg) 0 0;
  background-image:var(--adr-grad-gloss);
  pointer-events:none;
}
.adr-emerg::after{
  content:"";position:absolute;left:0;right:0;top:0;height:80px;
  border-radius:var(--adr-r-lg) var(--adr-r-lg) 0 0;
  background-image:var(--adr-grad-gloss);
  pointer-events:none;
}
.adr-footer{position:relative;}
.adr-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:90px;
  background-image:var(--adr-grad-gloss);
  pointer-events:none;
}

/* --- the answer's count line takes the level's own tint --- */
.adr-answer__count,.adr-result__count{
  padding:8px 12px;border-radius:var(--adr-r-sm);
  background-image:var(--adr-grad-tint);
  box-shadow:var(--adr-keyline);
  transition:box-shadow var(--adr-t);
}
[data-level="today"] .adr-answer__count{
  border-radius:var(--adr-r-sm);
  background-image:linear-gradient(180deg,#FDF6EA 0%,#FDF2E3 100%);
  box-shadow:inset 0 0 0 1px #F0DCBE;
}
[data-level="soon"] .adr-answer__count{
  border-radius:var(--adr-r-sm);
  background-image:linear-gradient(180deg,#F8FBF6 0%,#F5F9F3 100%);
  box-shadow:inset 0 0 0 1px var(--adr-200);
}

/* --- the three rungs on the landing take their level's plate tint --- */
.adr-rung[data-level="emergency"]{
  border-radius:var(--adr-r-lg);
  background-image:linear-gradient(179deg,#FFFFFF 0%,#FDF7F6 100%);
  box-shadow:var(--adr-keyline),var(--adr-sh-2);
}
.adr-rung[data-level="today"]{
  border-radius:var(--adr-r-lg);
  background-image:linear-gradient(179deg,#FFFFFF 0%,#FDFAF4 100%);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
}
.adr-rung[data-level="soon"]{
  border-radius:var(--adr-r-lg);
  background-image:linear-gradient(179deg,#FFFFFF 0%,#F9FCF7 100%);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
}

/* --- a sheen on the wall plates --- */
.adr-plate{position:relative;overflow:hidden;}
.adr-plate::after{
  content:"";position:absolute;left:0;right:0;top:0;height:28px;
  border-radius:var(--adr-r-md) var(--adr-r-md) 0 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.adr-count{position:relative;overflow:hidden;}
.adr-count::before{
  content:"";position:absolute;left:0;right:0;top:0;height:26px;
  border-radius:var(--adr-r-md) var(--adr-r-md) 0 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* --- the meta labels sit on their own small tiles --- */
.adr-doc__meta dt .adr-icon{
  padding:2px;border-radius:var(--adr-r-xs);
  background-image:linear-gradient(180deg,#F3F7F0 0%,#E9F0E5 100%);
  box-shadow:inset 0 0 0 1px var(--adr-edge-2);
}

/* --- focus and hover on the plates themselves --- */
.adr-ask:focus-within{box-shadow:var(--adr-keyline-2),var(--adr-sh-3);}
.adr-login__card:focus-within{box-shadow:var(--adr-keyline-2),var(--adr-sh-3);}
.adr-doc{transition:box-shadow var(--adr-t);}
@media (hover:hover){
  .adr-doc:hover{box-shadow:var(--adr-keyline-2),var(--adr-sh-3);}
  .adr-faq__q:hover{background-color:var(--adr-050);}
  .adr-chip--recent:hover{background-color:var(--adr-200);box-shadow:var(--adr-keyline),var(--adr-sh-1);}
  .adr-linkbtn:hover{color:var(--adr-700);}
  .adr-input:hover,.adr-select:hover{box-shadow:var(--adr-sh-inset),0 1px 0 rgba(255,255,255,.7);}
  .adr-ask__field:hover{box-shadow:var(--adr-sh-inset),0 1px 0 rgba(255,255,255,.7);}
}
/* No hover state: these plates are a coverage figure, not a control. A hover
   that lifts something unclickable is a promise the band cannot keep. */
.adr-chip--recent:active{box-shadow:var(--adr-sh-press);}

/* --- the FAQ column reads as one screwed-on stack --- */
.adr-faq__row:first-of-type{border-radius:var(--adr-r-md) var(--adr-r-md) var(--adr-r-md) var(--adr-r-md);}
.adr-faq__row:last-of-type{margin-bottom:0;border-radius:var(--adr-r-md);}
.adr-faq__a{border-radius:0 0 var(--adr-r-sm) var(--adr-r-sm);}

/* --- pagination position plate --- */
.adr-pager__at{
  padding:8px 12px;border-radius:var(--adr-r-sm);
  background-image:var(--adr-grad-plate);
  box-shadow:var(--adr-keyline),var(--adr-sh-1);
  transition:box-shadow var(--adr-t);
}

/* --- the tab icon box ---
   NO background wash on the active item: DESIGN.md 4.11 names a wash and a
   sliding pill as the two things the active state must not be. The current tab
   is carried by the 3px --adr-500 keyline across its top edge, the label going
   600 to 700, and the ink-3 to --adr-600 colour step. (The spec also asks the
   icon to swap outline to filled; that variant is not drawn for the three page
   icons yet and is recorded as a deviation in BUILD-CONTRACT.md 6b rather than
   half-implemented.) */
.adr-tabbar__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:26px;border-radius:var(--adr-r-sm);
  transition:color var(--adr-t);
}

/* --- the primary button is painted enamel, so it carries a gloss too --- */
.adr-btn--primary{position:relative;overflow:hidden;}
.adr-btn--primary::after{
  content:"";position:absolute;left:0;right:0;top:0;height:50%;
  border-radius:var(--adr-r-sm) var(--adr-r-sm) 0 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;opacity:1;
  transition:opacity var(--adr-t);
}
.adr-btn--primary:active::after{opacity:.35;}

/* --- the list header is a recessed well, not a flat grey box --- */
.adr-list__head{
  background-image:linear-gradient(180deg,#E9EBE5 0%,#EFF1EB 100%);
  box-shadow:var(--adr-sh-inset);
}

/* --- the greeting plate --- */
.adr-greet{background-image:linear-gradient(180deg,#FFFFFF 0%,#F7F9F5 100%);}

/* --- a sheen along the top edge of the tab bar --- */
.adr-tabbar{position:fixed;}
.adr-tabbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.adr-tabbar__label{transition:color var(--adr-t),font-weight var(--adr-t);}

/* --- the greeting plate's district chip --- */
.adr-chip--district{border-radius:var(--adr-r-sm);box-shadow:var(--adr-keyline),var(--adr-sh-1);transition:box-shadow var(--adr-t);}

/* --- an error message reads as one, without a red block --- */
.adr-msg{padding:0;border-radius:var(--adr-r-xs);transition:color var(--adr-t);}
.adr-doc__msg{padding:8px 10px;border-radius:var(--adr-r-sm);background:var(--adr-u-emergency-tint);box-shadow:inset 0 0 0 1px rgba(193,37,31,.22);}
.adr-ask__msg{padding:8px 10px;border-radius:var(--adr-r-sm);background:var(--adr-wall-2);box-shadow:var(--adr-keyline);}

/* --- the gate and the empty plates --- */
.adr-gate{border-radius:var(--adr-r-lg);}
.adr-empty{border-radius:var(--adr-r-lg);}
.adr-greet{border-radius:var(--adr-r-lg);transition:box-shadow var(--adr-t);}
.adr-stop{border-radius:var(--adr-r-lg);}
.adr-acc__profile{border-radius:var(--adr-r-lg);}
#adr-unsub-confirm{border-radius:var(--adr-r-sm);}
.adr-list__head{border-radius:var(--adr-r-sm);}
.adr-filters{border-radius:var(--adr-r-md);}
.adr-result__filter{border-radius:var(--adr-r-md);}
.adr-flags li{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t);}
.adr-board__eyebrow{border-radius:var(--adr-r-sm);}
.adr-plate__n{border-radius:var(--adr-r-sm);}
.adr-urgency__label,.adr-rung__label{border-radius:var(--adr-r-sm);}
.adr-emerg__label{border-radius:var(--adr-r-sm);}
.adr-doc__listed{border-radius:var(--adr-r-xs);}
.adr-doc__save{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t),color var(--adr-t),background-color var(--adr-t);}
.adr-demo{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t);}
.adr-btn--ghost{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t),background-color var(--adr-t);}
.adr-btn--danger{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t),background-color var(--adr-t);}
.adr-select{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t);}
.adr-input{border-radius:var(--adr-r-sm);transition:box-shadow var(--adr-t);}
.adr-ask__field{border-radius:var(--adr-r-sm);}
.adr-ask{border-radius:var(--adr-r-lg);}
.adr-card{border-radius:var(--adr-r-md);}
.adr-doc{border-radius:var(--adr-r-md);}
.adr-urgency{border-radius:var(--adr-r-lg);}
.adr-emerg{border-radius:var(--adr-r-lg);}
.adr-strip{border-radius:var(--adr-r-lg);}
.adr-rung{border-radius:var(--adr-r-lg);}
.adr-count{border-radius:var(--adr-r-md);}
.adr-plate{border-radius:var(--adr-r-md);}
.adr-jela__plate{border-radius:var(--adr-r-sm);}
.adr-faq__row{border-radius:var(--adr-r-md);}
.adr-chip{border-radius:var(--adr-r-sm);}
.adr-chip__x{border-radius:var(--adr-r-sm);}
.adr-ladder li{border-radius:var(--adr-r-sm);}
.adr-pager .adr-btn{border-radius:var(--adr-r-sm);}
.adr-topbar__cta{border-radius:var(--adr-r-sm);}
.adr-btn{border-radius:var(--adr-r-sm);}
.adr-btn--emerg{border-radius:var(--adr-r-sm);}
.adr-answer__empty{border-radius:var(--adr-r-md);}
.adr-tabbar__item.is-active::before{border-radius:0 0 var(--adr-r-xs) var(--adr-r-xs);}
.adr-rail>i{border-radius:var(--adr-r-xs);}
.adr-doc__rail{border-radius:var(--adr-r-xs) 0 0 var(--adr-r-xs);}
.adr-strip::before{border-radius:var(--adr-r-xs) 0 0 var(--adr-r-xs);}
.adr-doc__screw{border-radius:var(--adr-r-dot);}
.adr-doc__screwdot{border-radius:var(--adr-r-dot);}
.adr-ladder__screw{border-radius:var(--adr-r-dot);}
.adr-doc__rule{border-radius:var(--adr-r-xs);}

/* --- anchors that are controls, not prose ---
   Written with the shell class so they match `.adr-shell a` on specificity and
   win on order. Every one of these is an <a> that must look like the thing its
   class says it is. */
.adr-shell a.adr-btn,.adr-shell a.adr-tabbar__item,.adr-shell a.adr-brand,.adr-shell a.adr-chip{text-decoration:none;}
.adr-shell a.adr-btn--primary{color:var(--adr-plate);}
.adr-shell a.adr-btn--plate{color:var(--adr-600);}
.adr-shell a.adr-btn--ghost{color:var(--adr-600);}
.adr-shell a.adr-btn--emerg{color:var(--adr-u-emergency);}
.adr-shell a.adr-btn--emerg-2{color:var(--adr-u-emergency-200);}
.adr-shell a.adr-brand{color:inherit;}
.adr-shell a.adr-chip--recent{color:var(--adr-600);}
/* The tab bar carries the current item on three carriers: the 3px top keyline,
   the label going 600 to 700, and this colour step. Inactive is ink-3 at
   4.99:1, which is legible and is NOT the disabled grey. */
.adr-shell a.adr-tabbar__item{color:var(--adr-ink-3);}
.adr-shell a.adr-tabbar__item.is-active{color:var(--adr-600);}

/* --- paragraph margins that the shell reset would otherwise flatten ---
   `.adr-shell p{margin:0 0 12px}` is (0,1,1) and beats a single-class rule, so
   the charge line lost its 18px of air and sat glued under the CTA, reading as
   a caption on the button rather than the card's muted footnote. */
.adr-shell .adr-login__charge{margin:18px 0 0;}
.adr-shell .adr-ask__note{margin:10px 0 0;}
.adr-shell .adr-login__hint{margin:8px 0 0;}
.adr-shell .adr-recent__note{margin:4px 0 0;}
.adr-shell .adr-msg{margin:10px 0 0;}
.adr-shell .adr-counts__src{margin:0;}
.adr-shell .adr-list__nophone{margin:0 0 4px;}
.adr-shell .adr-list__source{margin:0;}
.adr-shell .adr-emerg__alt{margin:0;}
.adr-shell .adr-strip__body{margin:0 0 14px;}
.adr-shell .adr-footer__contact{margin:12px 0 0;}
.adr-shell .adr-urgency__action{margin:0;}
.adr-shell .adr-answer__empty{margin:0;}
.adr-shell .adr-greet__hi{margin:0;}
.adr-shell .adr-acc__phone{margin:0;}
.adr-shell .adr-emerg__after{margin:0 0 16px;}

/* --- the ladder band's icons take their own level's colour ---
   The icon is carrier three of six. Painted one grey for all three rungs it
   contradicted the rail and the label plate sitting beside it. */
.adr-rung[data-level="emergency"]>.adr-icon{color:var(--adr-u-emergency);}
.adr-rung[data-level="today"]>.adr-icon{color:var(--adr-u-today);}
.adr-rung[data-level="soon"]>.adr-icon{color:var(--adr-u-soon);}

/* --- the empty rail segments have to be countable ---
   The rail is the PRIMARY non-colour carrier of urgency: three filled segments
   only read as "three of four" if the fourth is visible. wall-2 on a white
   plate is about 1.05:1, which is not. */
.adr-rail>i{background:#D3D9CE;box-shadow:inset 0 0 0 1px rgba(102,114,95,.18);}

/* ============================================================
   18. Responsive. Measured at 320, 360, 375 and 1280.
   ============================================================ */

@media (max-width:479px){
  .adr-btn{padding:0 16px;}
  .adr-pager .adr-btn{padding:0 10px;font-size:15px;}
}
@media (max-width:359px){
  .adr-counts__grid{gap:10px;}
  .adr-plates,.adr-jela{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));}
  .adr-doc__meta>div{grid-template-columns:minmax(0,1fr);gap:2px;}
  .adr-brand__name{font-size:17px;}
  .adr-topbar__cta{padding:0 12px;}
  .adr-tabbar__label{font-size:11px;}
  .adr-ladder li{font-size:12px;padding-left:14px;}
}
@media (min-width:768px){
  .adr-shell{font-size:17px;}
  .adr-counts__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .adr-rungs{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
  .adr-ladder-band,.adr-counts,.adr-specialties,.adr-login,.adr-districts,.adr-faq{padding:40px 0;}
  .adr-board{padding:40px 0 46px;}
  .adr-login__card{max-width:460px;}
  .adr-result__filter{grid-template-columns:auto minmax(0,1fr) auto;align-items:end;}
  .adr-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;align-items:end;}
  .adr-filters .adr-btn{width:auto;}
  .adr-doc__meta>div{grid-template-columns:104px minmax(0,1fr);}
}
@media (min-width:1024px){
  .adr-count b{font-size:34px;}
  .adr-band__in{padding:0 24px;}
}

/* ============================================================
   18. Reduced motion. Every state stays reachable and identical, only instant.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .adr-ruled::after{animation:none;opacity:0;}
}
.adr-no-motion .adr-ruled::after{animation:none;opacity:0;}