/* ============================================================================
   outageinfo-theme.css
   Responsive reskin for the Outage Information Blazor WASM app.

   Load AFTER bootstrap, blazorise and app.css so these rules win the cascade.

   Layout contract
     >= 1101px  the existing three-column layout (nav | content | actions),
                restyled. Structure unchanged from the live site.
     <= 1100px  tile home screen, tabbed outage detail, full-screen chat and
                call sheets.

   Markup contract - the classes this file expects the Razor to supply:
     .page.oi-view-home | .oi-view-current | .oi-view-planned   (MainLayout)
     .oi-tile--info .oi-tile--weather .oi-tile--map
     .oi-tile--call .oi-tile--chat                              (nav items)
     .oi-chat.is-open                                           (chat sheet)
     .oi-call.is-open.is-connected.is-muted.is-speaker          (call sheet)
   See OUTAGEINFO-RESKIN.md for the full markup and wiring spec.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');
:root{
  --oi-brand:#12355B;--oi-brand-dark:#0B2238;
  --oi-accent:#F5A623;--oi-accent-dark:#D8890C;
  --oi-primary:#1B6CC9;--oi-primary-dark:#155AA8;
  --oi-danger:#D7263D;--oi-danger-dark:#B01E31;
  --oi-success:#15967A;--oi-success-dark:#0E7A63;
  --oi-ink:#16202E;--oi-muted:#5A6678;--oi-line:#E1E7EF;
  --oi-surface:#FFFFFF;--oi-surface-2:#F4F7FB;--oi-bg:#EAEFF5;
  --oi-radius:14px;--oi-radius-sm:10px;--oi-radius-pill:999px;
  --oi-shadow:0 1px 2px rgba(16,32,55,.06),0 10px 28px -14px rgba(16,32,55,.22);
  --oi-shadow-sm:0 1px 2px rgba(16,32,55,.08);
  --oi-nav-w:250px;--oi-actions-w:212px;
  --oi-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --oi-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --oi-tile-h:88px;--oi-tile-icon:88px;
  --oi-tile-current:#E8821E;--oi-tile-planned:#2980B9;--oi-tile-report:#E74C3C;
  --oi-tile-info:#27AE60;--oi-tile-weather:#607D8B;--oi-tile-map:#16A085;
  --oi-tile-call:#12355B;--oi-tile-chat:#6C4AB6;
  --oi-txt-green:#00A651;--oi-report-red:#D62128;--oi-tab-h:62px;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--oi-bg);color:var(--oi-ink);font-family:var(--oi-font);-webkit-font-smoothing:antialiased;}
ul.nav{list-style:none;margin:0;padding:0;display:flex;}
ul.flex-column{flex-direction:column;}
button{font-family:inherit;}
img,svg{vertical-align:middle;}


#app>.page{max-width:1360px;margin:0 auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:14px;min-height:100vh;}

/* ---------- header ---------- */
.top-row{background:linear-gradient(120deg,var(--oi-brand),var(--oi-brand-dark));border-radius:var(--oi-radius);box-shadow:var(--oi-shadow);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px;color:#fff;}
.top-logo-container{display:flex;align-items:center;flex:0 0 auto;background:#fff;border-radius:10px;padding:6px 10px;gap:8px;cursor:pointer;}
.top-logo-container svg{height:34px;width:auto;}
.top-logo-container .co{font-family:var(--oi-display);font-weight:800;font-size:.72rem;line-height:1.05;color:var(--oi-brand);text-transform:uppercase;}
.top-title-container{flex:1 1 280px;min-width:0;}
.top-title-container h1{font-family:var(--oi-display);font-weight:800;color:#fff;margin:0;font-size:clamp(1.05rem,.55rem + 1.5vw,1.55rem);line-height:1.15;}
.top-number-container{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;}
.top-number-container h1{margin:0;}
.top-number-container h1 a{text-decoration:none;}
.top-number-container h1 strong{display:inline-flex;align-items:center;gap:8px;background:var(--oi-accent);color:#26190a;font-family:var(--oi-display);font-weight:800;font-size:clamp(1.05rem,.7rem + 1vw,1.5rem);padding:8px 16px;border-radius:var(--oi-radius-pill);box-shadow:0 2px 0 var(--oi-accent-dark);}
.top-number-container span{color:#B9CBE4;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}

/* ---------- layout ---------- */
.main{display:grid;gap:16px;align-items:start;flex:1 1 auto;grid-template-columns:var(--oi-nav-w) minmax(0,1fr) var(--oi-actions-w);grid-template-areas:"nav content actions";}
.main>.sidebar{display:block;position:static;width:auto;height:auto;background:transparent;border:0;padding:0;margin:0;}
.main>.sidebar:first-child{grid-area:nav;}
.main-content{grid-area:content;min-width:0;}
.main>.sidebar:last-child{grid-area:actions;}
.main-div{background:var(--oi-surface);border:1px solid var(--oi-line);border-radius:var(--oi-radius);box-shadow:var(--oi-shadow);overflow:hidden;}

.NavLeftMenu{background:var(--oi-surface);border:1px solid var(--oi-line);border-radius:var(--oi-radius);box-shadow:var(--oi-shadow);padding:10px;display:flex;flex-direction:column;gap:8px;}
.NavLeftMenu .nav-item{padding:0;}
.NavLeftMenu .nav-link{display:flex;align-items:center;gap:9px;border-radius:var(--oi-radius-sm);padding:10px 12px;color:var(--oi-ink);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;}
.NavLeftMenu .nav-link:hover{background:var(--oi-surface-2);}
.NavLeftMenu .nav-link.current-fault::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--oi-tile-current);flex:0 0 auto;}
.NavLeftMenu .nav-link.planned-fault::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--oi-tile-planned);flex:0 0 auto;}
.btn-fault{margin-top:4px;border-radius:var(--oi-radius-sm);background:var(--oi-danger);box-shadow:0 2px 0 var(--oi-danger-dark);}
.btn-fault a{display:block;padding:12px 14px;color:#fff;font-weight:700;text-decoration:none;text-align:center;}
.NavRightMenu ul.nav{gap:10px;}
.NavRightMenu .nav-item{padding:0;}
.NavRightMenu button{width:100%;border:1px solid var(--oi-line);border-radius:var(--oi-radius-sm);padding:12px 14px;font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:var(--oi-surface);color:var(--oi-ink);box-shadow:var(--oi-shadow-sm);}
.NavRightMenu .oi-tile--call{background:var(--oi-primary);color:#fff;border-color:transparent;padding:12px 14px;border-radius:var(--oi-radius-sm);font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;width:100%;}
/* outage count badge — sits at the right of the nav link on desktop */
.oi-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  margin-left:auto;border-radius:var(--oi-radius-pill);background:var(--oi-tile-current);color:#fff;
  font-size:.78rem;font-weight:700;line-height:1;}
.planned-fault .oi-count{background:var(--oi-tile-planned);}

/* ---------- outage detail content ---------- */
.oi-near{display:grid;grid-template-columns:38px 1fr 62px;align-items:center;gap:10px;background:var(--oi-surface-2);border-bottom:1px solid var(--oi-line);padding:12px 14px;}
.oi-near .pin{width:30px;height:30px;}
.oi-near p{margin:0;font-size:.92rem;line-height:1.35;color:var(--oi-ink);}
.oi-near p b{font-weight:700;}
.oi-near .refresh{width:56px;height:52px;border:0;background:var(--oi-txt-green);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.oi-near .refresh svg{width:30px;height:30px;}
.oi-locality{padding:12px 14px;background:var(--oi-surface-2);border-bottom:1px solid var(--oi-line);}
.oi-locality select{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:2px solid #111;border-radius:6px;background:#fff;color:var(--oi-muted);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:26px 26px;}
table.oi-detail{width:100%;border-collapse:collapse;font-size:1rem;}
table.oi-detail th{background:#15202E;color:#fff;text-align:left;padding:14px 16px;font-weight:700;}
table.oi-detail th:first-child{width:36%;}
table.oi-detail td{padding:14px 16px;border-bottom:1px solid var(--oi-line);vertical-align:top;line-height:1.35;}
table.oi-detail td:first-child{width:36%;color:var(--oi-ink);border-right:1px solid var(--oi-line);}
table.oi-detail tr:nth-child(even) td{background:var(--oi-surface-2);}
.oi-audio{display:flex;align-items:center;gap:12px;background:var(--oi-surface-2);border-radius:var(--oi-radius-pill);padding:10px 16px;margin:16px 14px;}
.oi-audio .play{width:0;height:0;border-left:14px solid #333;border-top:9px solid transparent;border-bottom:9px solid transparent;flex:0 0 auto;}
.oi-audio .t{font-size:.95rem;color:#333;}
.oi-audio .track{height:6px;border-radius:6px;background:#c9cfd8;flex:1;position:relative;}
.oi-audio .track::before{content:"";position:absolute;left:0;top:-4px;width:14px;height:14px;border-radius:50%;background:#333;}
/* paired action buttons */
.oi-actions{display:grid;grid-template-columns:1fr 1fr;}
.oi-act{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;min-height:96px;padding:12px 12px 12px 10px;
  color:#fff;text-decoration:none;font-weight:600;font-size:1rem;line-height:1.2;cursor:pointer;}
.oi-act svg{width:44px;height:44px;}
.oi-act-txt{background:var(--oi-txt-green);}
.oi-act-report{background:var(--oi-report-red);}
.oi-welcome{padding:24px 22px 26px;text-align:center;}
.oi-welcome h2{font-family:var(--oi-display);font-weight:800;margin:0 0 12px;}
.oi-welcome p{color:#33404f;max-width:60ch;margin:0 auto 12px;line-height:1.55;}

.bottom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--oi-surface);border:1px solid var(--oi-line);border-radius:var(--oi-radius);box-shadow:var(--oi-shadow-sm);padding:12px 18px;color:var(--oi-muted);font-size:.85rem;}
.bottom-row .social{display:flex;gap:10px;}
.bottom-row .social a{width:28px;height:28px;border-radius:7px;background:var(--oi-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;font-size:.8rem;}
a:focus-visible,button:focus-visible,select:focus-visible,label:focus-visible{outline:3px solid rgba(27,108,201,.55);outline-offset:2px;}

/* which page shows (all widths) */


/* ================= CHAT SHEET ================= */
.oi-chat{
  --chat:var(--oi-tile-chat);
  position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;background:#EEF2F7;
  transform:translateY(100%);opacity:0;visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .24s ease,visibility 0s linear .38s;
}
.oi-chat.is-open{
  transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear 0s;
}
.oi-chat .ch-head{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:12px;
  background:linear-gradient(120deg,var(--chat),#4E3488);color:#fff;padding:14px;flex:0 0 auto;}
.oi-chat .ch-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-family:var(--oi-display);font-weight:800;font-size:1rem;}
.oi-chat .ch-who strong{display:block;font-family:var(--oi-display);font-weight:700;font-size:1.02rem;line-height:1.2;}
.oi-chat .ch-who span{display:flex;align-items:center;gap:6px;font-size:.74rem;opacity:.9;margin-top:2px;}
.oi-chat .ch-who span::before{content:"";width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.25);}
.oi-chat .ch-close{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;cursor:pointer;border:0;}
.oi-chat .ch-body{flex:1 1 auto;overflow-y:auto;padding:16px 14px 10px;display:flex;flex-direction:column;gap:10px;}
.ch-day{align-self:center;background:#DCE4EE;color:#54617A;font-size:.72rem;font-weight:600;
  padding:4px 12px;border-radius:var(--oi-radius-pill);margin-bottom:2px;}
.ch-msg{max-width:82%;display:flex;flex-direction:column;gap:3px;}
.ch-msg .bubble{padding:11px 14px;font-size:.95rem;line-height:1.45;}
.ch-msg .time{font-size:.68rem;color:#8794A8;padding:0 4px;}
.ch-msg.agent{align-self:flex-start;}
.ch-msg.agent .bubble{background:#fff;color:#1C2635;border:1px solid #E1E7EF;border-radius:16px 16px 16px 4px;box-shadow:0 1px 2px rgba(16,32,55,.05);}
.ch-msg.user{align-self:flex-end;align-items:flex-end;}
.ch-msg.user .bubble{background:var(--oi-primary);color:#fff;border-radius:16px 16px 4px 16px;}
.ch-msg.user .time{text-align:right;}
.ch-typing{align-self:flex-start;background:#fff;border:1px solid #E1E7EF;border-radius:16px 16px 16px 4px;
  padding:13px 16px;display:flex;gap:5px;}
.ch-typing i{width:7px;height:7px;border-radius:50%;background:#9AA7B8;display:block;animation:chDot 1.2s infinite ease-in-out;}
.ch-typing i:nth-child(2){animation-delay:.16s;}
.ch-typing i:nth-child(3){animation-delay:.32s;}
@keyframes chDot{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-5px);opacity:1;}}
.ch-quick{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 0;}
.ch-quick span{background:#fff;border:1px solid var(--oi-primary);color:var(--oi-primary);
  font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:var(--oi-radius-pill);cursor:pointer;}
.oi-chat .ch-foot{flex:0 0 auto;display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:center;
  background:#fff;border-top:1px solid var(--oi-line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
.oi-chat .ch-foot input{width:100%;font:inherit;font-size:.95rem;padding:12px 14px;border:1px solid var(--oi-line);
  border-radius:var(--oi-radius-pill);background:var(--oi-surface-2);}
.oi-chat .ch-foot input:focus{outline:none;border-color:var(--oi-primary);box-shadow:0 0 0 3px rgba(27,108,201,.18);background:#fff;}
.oi-chat .ch-send{width:46px;height:46px;border-radius:50%;border:0;background:var(--oi-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.oi-chat .ch-send svg{width:20px;height:20px;}
.oi-chat.is-open .ch-day,
.oi-chat.is-open .ch-msg,
.oi-chat.is-open .ch-typing,
.oi-chat.is-open .ch-quick{animation:chIn .34s both cubic-bezier(.2,.8,.2,1);}
.oi-chat.is-open .ch-day{animation-delay:.16s;}
.oi-chat.is-open .ch-msg:nth-of-type(1){animation-delay:.22s;}
.oi-chat.is-open .ch-msg:nth-of-type(2){animation-delay:.30s;}
.oi-chat.is-open .ch-msg:nth-of-type(3){animation-delay:.38s;}
.oi-chat.is-open .ch-msg:nth-of-type(4){animation-delay:.46s;}
.oi-chat.is-open .ch-msg:nth-of-type(5){animation-delay:.54s;}
.oi-chat.is-open .ch-typing{animation-delay:.62s;}
.oi-chat.is-open .ch-quick{animation-delay:.70s;}
@keyframes chIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@media (min-width:1101px){
  .oi-chat{inset:auto 24px 24px auto;width:392px;height:min(620px,82vh);border-radius:18px;overflow:hidden;
    box-shadow:0 30px 70px -20px rgba(10,20,35,.45);transform:translateY(22px) scale(.97);}
  .oi-chat.is-open{transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .oi-chat{transition:opacity .01s;transform:none;}
  .oi-chat.is-open .ch-day,.oi-chat.is-open .ch-msg,
  .oi-chat.is-open .ch-typing,.oi-chat.is-open .ch-quick{animation:none;}
  .ch-typing i{animation:none;}
}


/* ================= CALL / DIALPAD SHEET ================= */
.oi-call{
  position:fixed;inset:0;z-index:2100;display:flex;flex-direction:column;color:#fff;
  height:100%;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#1B4A7A 0%,#0B2238 62%);
  transform:translateY(100%);opacity:0;visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .24s ease,visibility 0s linear .38s;
}
.oi-call.is-open{
  transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear 0s;
}
.oi-call .cl-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:10px;padding:10px 12px;flex:0 0 auto;}
.oi-call .cl-close{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;cursor:pointer;border:0;}
.oi-call .cl-title{text-align:center;font-family:var(--oi-display);font-weight:700;font-size:.95rem;letter-spacing:.02em;}
.oi-call .cl-who{text-align:center;padding:0 18px;flex:0 0 auto;}
.oi-call .cl-avatar{width:clamp(38px,13vmin,54px);height:clamp(38px,13vmin,54px);border-radius:50%;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);margin:0 auto 6px;display:flex;align-items:center;justify-content:center;}
.oi-call .cl-avatar svg{width:clamp(16px,6vmin,26px);height:clamp(16px,6vmin,26px);}
.oi-call .cl-who strong{display:block;font-family:var(--oi-display);font-weight:700;font-size:clamp(.92rem,4.4vmin,1.08rem);line-height:1.2;}
.oi-call .cl-who em{display:block;font-style:normal;font-size:clamp(.6rem,3vmin,.72rem);color:#A9C0DC;margin-top:2px;}
.oi-call .cl-hint{text-align:center;margin-top:clamp(6px,1.6vmin,12px);min-height:1.4em;white-space:nowrap;font-size:clamp(.56rem,2.9vmin,.66rem);color:#9FB6D3;text-transform:uppercase;letter-spacing:.1em;font-weight:600;flex:0 0 auto;}
/* keypad */
/* keys sized by the row height (as before); columns shrink to the keys and the
   whole block is centred across the width */
.oi-call .cl-pad{display:grid;
  grid-template-columns:repeat(3,auto);grid-template-rows:repeat(4,1fr);
  gap:clamp(4px,2vmin,10px) clamp(8px,4.5vmin,18px);
  justify-content:center;justify-items:center;align-items:center;
  padding:clamp(6px,2vmin,12px) clamp(14px,6vw,26px) 2px;
  width:100%;max-height:min(52vh,380px);margin:0 auto;
  flex:1 1 auto;min-height:0;}
.oi-call .cl-key{aspect-ratio:1;height:100%;width:auto;max-width:100%;
  border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.10);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;transition:background .15s,transform .07s;}
.oi-call .cl-key b{font-family:var(--oi-display);font-weight:700;font-size:clamp(.9rem,5.2vmin,1.3rem);line-height:1;}
.oi-call .cl-key i{font-style:normal;font-size:clamp(.38rem,2vmin,.48rem);letter-spacing:.12em;color:#A9C0DC;font-weight:600;}
.oi-call .cl-key:hover{background:rgba(255,255,255,.16);}
.oi-call .cl-key:active{background:rgba(255,255,255,.26);transform:scale(.95);}
/* in-call controls */
.oi-call .cl-controls{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;gap:8px;
  padding:clamp(4px,1.2vh,12px) 26px 0;max-width:240px;margin:0 auto;width:100%;flex:0 0 auto;
  /* on tall screens the keypad is capped, so absorb the slack here and keep the
     controls + call button together as one cluster above the safe area */
  margin-top:auto;}
.oi-call .cl-mini{display:grid;grid-template-rows:auto auto;justify-items:center;align-items:center;gap:6px;
  background:none;border:0;color:#C9D8EA;cursor:pointer;font:inherit;}
.oi-call .cl-mini>span{grid-area:1/1;}
.oi-call .cl-mini>em{grid-area:2/1;text-align:center;white-space:nowrap;}
.oi-call .cl-mini span{width:clamp(34px,11vmin,44px);height:clamp(34px,11vmin,44px);border-radius:50%;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;}
.oi-call .cl-mini svg{width:clamp(15px,4.6vmin,19px);height:clamp(15px,4.6vmin,19px);}
.oi-call .cl-mini em{font-style:normal;font-size:clamp(.56rem,2.8vmin,.66rem);letter-spacing:.04em;}
/* call / hang up */
.oi-call .cl-callrow{display:flex;align-items:center;justify-content:center;gap:clamp(20px,9vmin,34px);
  padding:clamp(14px,4vmin,22px) 26px calc(clamp(16px,3.5vh,34px) + env(safe-area-inset-bottom));flex:0 0 auto;}
.oi-call .cl-call,.oi-call .cl-end{position:relative;width:clamp(52px,16vmin,66px);height:clamp(52px,16vmin,66px);border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;}
.oi-call .cl-call svg,.oi-call .cl-end svg{width:clamp(20px,6.4vmin,26px);height:clamp(20px,6.4vmin,26px);}
.oi-call .cl-call{background:#15A34A;box-shadow:0 10px 26px -8px rgba(21,163,74,.75);}
.oi-call .cl-call::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(21,163,74,.5);animation:clPulse 1.9s infinite ease-out;}
.oi-call .cl-end{background:#D62128;box-shadow:0 10px 26px -8px rgba(214,33,40,.7);}
.oi-call .cl-end svg{transform:rotate(135deg);}
@keyframes clPulse{0%{transform:scale(.92);opacity:.85;}70%{transform:scale(1.28);opacity:0;}100%{opacity:0;}}
/* entrance: header, then number, then keys in a wave */
.oi-call.is-open .cl-who,
.oi-call.is-open .cl-hint,
.oi-call.is-open .cl-key,
.oi-call.is-open .cl-controls,
.oi-call.is-open .cl-callrow{animation:clIn .32s both cubic-bezier(.2,.8,.2,1);}
.oi-call.is-open .cl-who{animation-delay:.14s;}
.oi-call.is-open .cl-hint{animation-delay:.20s;}
.oi-call.is-open .cl-key:nth-child(1){animation-delay:.30s;}
.oi-call.is-open .cl-key:nth-child(2){animation-delay:.33s;}
.oi-call.is-open .cl-key:nth-child(3){animation-delay:.36s;}
.oi-call.is-open .cl-key:nth-child(4){animation-delay:.39s;}
.oi-call.is-open .cl-key:nth-child(5){animation-delay:.42s;}
.oi-call.is-open .cl-key:nth-child(6){animation-delay:.45s;}
.oi-call.is-open .cl-key:nth-child(7){animation-delay:.48s;}
.oi-call.is-open .cl-key:nth-child(8){animation-delay:.51s;}
.oi-call.is-open .cl-key:nth-child(9){animation-delay:.54s;}
.oi-call.is-open .cl-key:nth-child(10){animation-delay:.57s;}
.oi-call.is-open .cl-key:nth-child(11){animation-delay:.60s;}
.oi-call.is-open .cl-key:nth-child(12){animation-delay:.63s;}
.oi-call.is-open .cl-controls{animation-delay:.66s;}
.oi-call.is-open .cl-callrow{animation-delay:.70s;}
@keyframes clIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@media (min-width:1101px){
  .oi-call{inset:auto 24px 24px auto;width:392px;height:min(600px,84vh);border-radius:18px;overflow:hidden;
    box-shadow:0 30px 70px -20px rgba(10,20,35,.55);transform:translateY(22px) scale(.97);}
  .oi-call.is-open{transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .oi-call{transition:opacity .01s;transform:none;}
  .oi-call.is-open *{animation:none!important;}
  .oi-call .cl-call::after{animation:none;}
}


/* tap feedback follows the shape of the control, not a rectangle around it */
html,body,button,label,a,select,input{-webkit-tap-highlight-color:transparent;}
.oi-call .cl-mini{-webkit-tap-highlight-color:transparent;}
.oi-call .cl-mini span{transition:background .15s,transform .07s;}
.oi-call .cl-mini:active span{background:rgba(255,255,255,.26);transform:scale(.94);}
.oi-call .cl-call:active,.oi-call .cl-end:active{transform:scale(.94);filter:brightness(1.06);}
.oi-call .cl-close:active,.oi-chat .ch-close:active,.oi-chat .ch-send:active{transform:scale(.94);filter:brightness(1.08);}
.oi-call .cl-close,.oi-chat .ch-close,.oi-chat .ch-send,
.oi-call .cl-call,.oi-call .cl-end{transition:transform .07s,filter .15s;}
/* keep keyboard focus rings circular too */
.oi-call .cl-key:focus-visible,.oi-call .cl-call:focus-visible,.oi-call .cl-end:focus-visible,
.oi-call .cl-close:focus-visible,.oi-chat .ch-close:focus-visible,.oi-chat .ch-send:focus-visible{
  border-radius:50%;outline:3px solid rgba(255,255,255,.75);outline-offset:2px;}
.oi-call .cl-mini:focus-visible{outline:none;}
.oi-call .cl-mini:focus-visible span{border-radius:50%;outline:3px solid rgba(255,255,255,.75);outline-offset:2px;}


/* ---- call state: idle vs connected ---- */
.oi-call .cl-end,.oi-call .st-live{display:none;}
.oi-call .st-idle{display:inline;}
.oi-call.is-connected .cl-call,.oi-call.is-connected .st-idle{display:none;}
.oi-call.is-connected .cl-end{display:flex;}
.oi-call.is-connected .st-live{display:inline-flex;align-items:center;gap:6px;}
.oi-call .st-live i{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.22);}
/* mute + speaker only mean something once connected */
.oi-call .cl-mini{opacity:.4;pointer-events:none;transition:opacity .2s;}
.oi-call.is-connected .cl-mini{opacity:1;pointer-events:auto;}
/* the button carries its own label so the action is never ambiguous */
.oi-call .cl-call em,.oi-call .cl-end em{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);line-height:1;
  font-style:normal;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(.55rem,2.6vmin,.66rem);color:#C9D8EA;}
.oi-call.is-connected .cl-call::after{display:none;}


/* ---- mute + speaker: matching two-state controls ---- */
.oi-call .cl-mini span{position:relative;color:#fff;}
.oi-call .cl-mini .ic-off{display:none;}
.oi-call .cl-mini .lbl-off{visibility:hidden;}
.oi-call .cl-mini .lbl-on{visibility:visible;}
/* engaged: filled white pill, dark glyph — identical treatment for both */
.oi-call.is-muted .m-mute span,
.oi-call.is-speaker .m-speaker span{background:#fff;border-color:#fff;color:#0B2238;
  box-shadow:0 4px 14px -6px rgba(255,255,255,.8);}
.oi-call.is-muted .m-mute em,
.oi-call.is-speaker .m-speaker em{color:#fff;}
.oi-call.is-muted .m-mute .ic-on,
.oi-call.is-speaker .m-speaker .ic-on{display:none;}
.oi-call.is-muted .m-mute .ic-off,
.oi-call.is-speaker .m-speaker .ic-off{display:block;}
.oi-call.is-muted .m-mute .lbl-on,
.oi-call.is-speaker .m-speaker .lbl-on{visibility:hidden;}
.oi-call.is-muted .m-mute .lbl-off,
.oi-call.is-speaker .m-speaker .lbl-off{visibility:visible;}
/* muted also warns in the status line */
.oi-call .st-muted{visibility:hidden;color:#FFC46B;white-space:nowrap;}
.oi-call.is-muted .st-muted{visibility:visible;}





/* ============ PHONE + TABLET ≤1100px: tile / detail UI ============ */
@media (max-width:1100px){
  #app>.page{padding:0;gap:0!important;}
  /* tiles and detail content stay a comfortable reading width, centred,
     while the header, hero and footer remain full-bleed */
  #app>.page{max-width:none;}
  .main{max-width:680px;margin-inline:auto;width:100%;}
  .top-title-container h1{max-width:680px;margin-inline:auto;}

  /* --- header: white bar + hero band --- */
  .top-row{position:sticky;top:0;z-index:1000;background:#fff;border-radius:0;box-shadow:0 2px 10px -4px rgba(16,32,55,.25);padding:0;gap:0;align-items:stretch;}
  .top-logo-container{order:1;background:transparent;border-radius:0;padding:10px 12px;}
  .top-logo-container svg{height:38px;}
  .top-number-container{order:2;margin-left:auto;justify-content:center;align-items:flex-end;padding:8px 14px;gap:1px;}
  .top-number-container h1 strong{background:transparent;color:var(--oi-brand);box-shadow:none;padding:0;font-size:1.45rem;letter-spacing:-.02em;}
  .top-number-container span{color:var(--oi-muted);font-size:.62rem;}
  .top-title-container{order:3;flex:1 0 100%;background:linear-gradient(180deg,rgba(10,20,35,.55),rgba(10,20,35,.75)),linear-gradient(120deg,#4b5a6b,#26323f);padding:26px 18px 30px;text-align:center;}
  .top-title-container h1{font-size:1.9rem;text-shadow:0 2px 12px rgba(0,0,0,.5);}
  .top-title-container h1::after{content:"Welcome to our outage information app";display:block;font-family:var(--oi-font);font-weight:500;font-size:.95rem;opacity:.92;margin-top:6px;}
  /* detail pages don't need the hero */
  .page.oi-view-current .top-row .top-title-container,
  .page.oi-view-planned .top-row .top-title-container{display:none;}

  /* --- stacking --- */
  .main{grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "actions" "content";gap:0!important;align-content:start!important;}
  .page.oi-view-current .main,.page.oi-view-planned .main{grid-template-areas:"nav" "content" "actions";}
  .main>.sidebar{align-self:start!important;margin:0!important;}
  .main-content{padding:0;}
  .main-div{border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:none;}

  /* flatten wrappers so tiles/tabs are direct grid children */
  .NavLeftMenu{display:grid;padding:0;gap:0!important;border:0;border-radius:0;box-shadow:none;max-height:none;overflow:visible;align-content:start!important;}
  .NavLeftMenu .vertical-nav,.NavLeftMenu .vertical-nav ul.nav{display:contents;}
  .NavRightMenu ul.nav{display:block!important;gap:0!important;margin:0!important;padding:0!important;font-size:0!important;line-height:0!important;}
  .NavRightMenu li.nav-item>div{display:block!important;}
  .NavLeftMenu li.nav-item,.NavRightMenu li.nav-item,.NavLeftMenu>.btn-fault{
    display:block!important;margin:0!important;padding:0!important;border:0!important;float:none!important;font-size:0!important;line-height:0!important;}
  .NavRightMenu .k-widget,.NavRightMenu .k-chat{display:none!important;}
  .main>.sidebar:last-child{position:static;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;}

  /* ===== HOME: eight flush tiles ===== */
  li.nav-item:has(>.current-fault){order:1;}
  li.nav-item:has(>.planned-fault){order:2;}
  .btn-fault{order:3;}
  li.nav-item:has(>.oi-tile--info){order:4;}
  li.nav-item:has(>.oi-tile--weather){order:5;}
  .NavLeftMenu li.nav-item>.nav-link,
  .btn-fault>a,
  .NavRightMenu li.nav-item button,
  .NavRightMenu li.nav-item label{
    box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:3px;
    height:var(--oi-tile-h);width:100%;text-align:left;overflow:hidden;
    padding:0 16px 0 calc(var(--oi-tile-icon) + 16px);
    margin:0;appearance:none;-webkit-appearance:none;cursor:pointer;
    color:var(--oi-ink);border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--oi-line);text-decoration:none;
    font-family:var(--oi-display);font-weight:700;font-size:1.08rem!important;line-height:1.2!important;
    background-color:#fff;
    background-image:var(--icon),linear-gradient(90deg,var(--tile) 0 var(--oi-tile-icon),#fff var(--oi-tile-icon));
    background-repeat:no-repeat,no-repeat;
    background-position:calc((var(--oi-tile-icon) - 42px)/2) center,0 0;
    background-size:42px 42px,100% 100%;
  }
  .NavLeftMenu li.nav-item>.nav-link::before,.btn-fault>a::before,.NavRightMenu li.nav-item button::before,.NavRightMenu li.nav-item label::before{content:none;}
  .NavLeftMenu li.nav-item>.nav-link::after,.btn-fault>a::after,.NavRightMenu li.nav-item button::after,.NavRightMenu li.nav-item label::after{
    content:var(--desc);font-family:var(--oi-font);font-weight:400;font-size:.87rem!important;line-height:1.3!important;color:#5A6678;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .nav-link.current-fault{--tile:var(--oi-tile-current);--desc:"View current power outages.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2 1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/%3E%3C/svg%3E");}
  .nav-link.planned-fault{--tile:var(--oi-tile-planned);--desc:"Planned outages in your area.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 2h2v20H5zM8 3h11l-2.5 4L19 11H8z'/%3E%3C/svg%3E");}
  .btn-fault>a{--tile:var(--oi-tile-report);--desc:"Report a fault or outage.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");}
  .oi-tile--info{--tile:var(--oi-tile-info);--desc:"What to do during an outage.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 17h-2v-2h2v2zm1.6-6.1-.9.9c-.5.6-.7 1.1-.7 2.2h-2v-.5c0-.9.4-1.7 1-2.3l1.2-1.3c.4-.4.6-.9.6-1.4 0-1.1-.9-2-2-2s-2 .9-2 2H8a4 4 0 1 1 8 0c0 .9-.4 1.7-1.4 2.4z'/%3E%3C/svg%3E");}
  .oi-tile--weather{--tile:var(--oi-tile-weather);--desc:"Forecast for your region.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.5 19a4.5 4.5 0 0 1-.4-9 6 6 0 0 1 11.5 1.4A3.8 3.8 0 0 1 17.5 19z'/%3E%3C/svg%3E");}
  .oi-tile--map{--tile:var(--oi-tile-map);--desc:"See outages on a map.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");}
  .oi-tile--call{--tile:var(--oi-tile-call);--desc:"Talk to our call centre.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2 11 11 0 0 0 3.5.5 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .5 3.5 1 1 0 0 1-.2 1z'/%3E%3C/svg%3E");}
  .oi-tile--chat{--tile:var(--oi-tile-chat);--desc:"Message our team online.";
    --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");}
  /* home tiles: text hard-left against the colour block */
  .NavLeftMenu li.nav-item>.nav-link,
  .btn-fault>a,
  .NavRightMenu li.nav-item button,
  .NavRightMenu li.nav-item label{text-align:left;align-items:flex-start;}
  .NavLeftMenu li.nav-item>.nav-link::after,
  .btn-fault>a::after,
  .NavRightMenu li.nav-item button::after,
  .NavRightMenu li.nav-item label::after{text-align:left;}
  /* count badge on the tiles: a circle at the right, in the tile's own colour.
     Absolutely positioned, so it never disturbs the title/description stack. */
  .NavLeftMenu li.nav-item>.nav-link{position:relative;}
  .nav-link.current-fault,.nav-link.planned-fault{padding-right:66px;}
  .nav-link.current-fault .oi-count,.nav-link.planned-fault .oi-count{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0;
    min-width:32px;height:32px;padding:0 9px;border-radius:var(--oi-radius-pill);
    background:var(--tile);color:#fff;font-family:var(--oi-display);
    font-size:1rem!important;font-weight:700;line-height:1!important;}
  /* #31854# tabs carry the count inline - "Current Outages (4)" - instead of the badge */
  .page.oi-view-current .main .oi-count,
  .page.oi-view-planned .main .oi-count{
    position:static;display:inline;transform:none;margin:0 0 0 .3em;
    min-width:0;height:auto;padding:0;background:none;color:inherit;
    font-family:inherit;font-size:inherit!important;font-weight:inherit;line-height:inherit!important;}
  .page.oi-view-current .main .oi-count::before,
  .page.oi-view-planned .main .oi-count::before{content:"(";}
  .page.oi-view-current .main .oi-count::after,
  .page.oi-view-planned .main .oi-count::after{content:")";}
  .NavLeftMenu .nav-item>ul.nav{display:none;}
  /* home ends at the tiles */
  .page.oi-view-home .main .main-content{display:none;}

  /* ===== DETAIL: two tabs replace the tiles ===== */
  .page.oi-view-current .main .NavLeftMenu,
  .page.oi-view-planned .main .NavLeftMenu{grid-template-columns:1fr 1fr;}
  /* only the two outage items remain, side by side */
  .page.oi-view-current .main li.nav-item:has(>.oi-tile--info),
  .page.oi-view-current .main li.nav-item:has(>.oi-tile--weather),
  .page.oi-view-current .main .btn-fault,
  .page.oi-view-current .main .sidebar:last-child,
  .page.oi-view-planned .main li.nav-item:has(>.oi-tile--info),
  .page.oi-view-planned .main li.nav-item:has(>.oi-tile--weather),
  .page.oi-view-planned .main .btn-fault,
  .page.oi-view-planned .main .sidebar:last-child{display:none!important;}
  .page.oi-view-current .main .NavLeftMenu li.nav-item>.nav-link,
  .page.oi-view-planned .main .NavLeftMenu li.nav-item>.nav-link{
    height:var(--oi-tab-h);min-height:var(--oi-tab-h);padding:0 6px;
    flex-direction:row;align-items:center;justify-content:center;text-align:center;
    background-image:none;background-color:var(--tile);color:#fff;
    font-family:var(--oi-font);font-weight:400;box-shadow:none;position:relative;
    /* one line, never wraps: scales with tab width on narrow handsets */
    font-size:clamp(.8rem,3.5vw,1.05rem)!important;line-height:1.1!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .page.oi-view-current .main .NavLeftMenu li.nav-item>.nav-link::after,
  .page.oi-view-planned .main .NavLeftMenu li.nav-item>.nav-link::after{content:none;}
  /* inactive tab dims slightly; active tab gets the caret */
  .page.oi-view-current .main .nav-link.planned-fault,
  .page.oi-view-planned .main .nav-link.current-fault{filter:brightness(.88);}
  /* the caret hangs below the tab, so it must live on the <li>: the tab itself
     is overflow:hidden for text ellipsis and would clip it */
  .page.oi-view-current .main li.nav-item:has(>.current-fault),
  .page.oi-view-planned .main li.nav-item:has(>.planned-fault){position:relative;}
  .page.oi-view-current .main li.nav-item:has(>.current-fault)::after,
  .page.oi-view-planned .main li.nav-item:has(>.planned-fault)::after{
    content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:2;
    width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;}
  .page.oi-view-current .main li.nav-item:has(>.current-fault)::after{border-top:10px solid var(--oi-tile-current);}
  .page.oi-view-planned .main li.nav-item:has(>.planned-fault)::after{border-top:10px solid var(--oi-tile-planned);}

  /* detail content spacing on phone */
  .oi-audio{margin:14px 12px;}
  .oi-actions{grid-template-columns:1fr 1fr;}
  .oi-act{min-height:92px;font-size:.98rem;}

  .bottom-row{border-radius:0;border:0;justify-content:center;text-align:center;background:#111418;color:#E4E9F0;}
  .bottom-row .social a{background:#2C63B6;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}