/* devices.css — scoped MyCommunity device-mockup styles.
   Sourced from "MyCommunity Devices.html" <style> block, scoped under .mcdev so
   it cannot clash with the marketing site's global styles. The Material Symbols
   @font-face stays GLOBAL. Body-level / .page rules are intentionally dropped. */

/* ---- Material Symbols Rounded (GLOBAL — unscoped) ------------------- */
@font-face{
  font-family:'Material Symbols Rounded';
  font-style:normal;font-weight:100 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}

/* ============================================================
   MyCommunity — Resident mobile app · Material 3 on the
   MyCommunity green design system (Wales default; re-skins per
   nation via .mcdev[data-nation]). All screens use mc- classes.
   ============================================================ */
.mcdev,
.mcdev[data-nation="wales"]{
  --forest:#1F5F4A; --forest600:#194E3D; --forest700:#143E30; --forest800:#0E2C22; --forest900:#081A14;
  --forest50:#EAF3EF; --forest100:#CFE3DA; --forest200:#A1C8B6; --forest300:#6FA98E; --forest400:#3F8166;
  --emerald:#2E8B57; --emerald-dark:#226B43; --emerald-soft:#DCEAE1;
  --teal:#36B7B4; --teal-dark:#2A9491; --teal-soft:#E6F6F5;
  --gold:#D9A441; --gold-dark:#BE8A2D;
  --accent:#1F5F4A;
  --map-base:#EDEAE3; --map-block:#F6F4EF; --map-green:#D6E7DA; --map-water:#BFE3E0; --map-road:#FFFFFF;
}
.mcdev[data-nation="scotland"]{
  --forest:#1E5793; --forest600:#184879; --forest700:#133961; --forest800:#0E2A48; --forest900:#081A2E;
  --forest50:#ECF2F9; --forest100:#CFE0F1; --forest200:#A2C2E2; --forest300:#6E9BCB; --forest400:#3F73B0;
  --emerald:#2E6FB0; --emerald-dark:#225688;
  --teal:#5BB0E0; --teal-dark:#3E90C2; --teal-soft:#E7F2FB;
  --gold:#8E7CC3; --gold-dark:#6F5DA6;
  --accent:#1E5793;
  --map-base:#E8EDF3; --map-block:#F3F6FA; --map-green:#D5E3DC; --map-water:#C2DEF1; --map-road:#FFFFFF;
}
.mcdev[data-nation="england"]{
  --forest:#9E2A3C; --forest600:#861F30; --forest700:#6B1827; --forest800:#4E111C; --forest900:#320A12;
  --forest50:#FBEEF0; --forest100:#F6D7DC; --forest200:#ECB0BA; --forest300:#DD8090; --forest400:#C44E63;
  --emerald:#B23A4C; --emerald-dark:#8E2C3B;
  --teal:#5E7790; --teal-dark:#475E73; --teal-soft:#EEF1F4;
  --gold:#C9A24A; --gold-dark:#A98432;
  --accent:#9E2A3C;
  --map-base:#F0EBE7; --map-block:#F8F4F1; --map-green:#DCE4D9; --map-water:#C9D7E0; --map-road:#FFFFFF;
}
.mcdev[data-nation="ireland"]{
  --forest:#0E7A43; --forest600:#0B6437; --forest700:#084E2B; --forest800:#06381F; --forest900:#032213;
  --forest50:#E9F6EE; --forest100:#CBEAD7; --forest200:#97D4AE; --forest300:#58B97F; --forest400:#2A9D5B;
  --emerald:#17924F; --emerald-dark:#11713D;
  --teal:#2FB39A; --teal-dark:#248C79; --teal-soft:#E5F6F1;
  --gold:#E07B39; --gold-dark:#BE6125;
  --accent:#0E7A43;
  --map-base:#EAEFE7; --map-block:#F4F8F1; --map-green:#D4E8D6; --map-water:#C2E6DD; --map-road:#FFFFFF;
}
.mcdev{
  --slate:#4F6D7A; --cream:#F8F6F2; --mist:#E8ECEF; --line:#E7E3DB; --white:#fff;
  --red:#DC2626; --red-soft:#FEECEC; --amber:#D97706; --amber-soft:#FBF0DD;
  --ink:#15241F; --ink-soft:#54635D;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(20,62,48,.05), 0 6px 18px rgba(20,62,48,.07);
  --sh-pop:0 8px 30px rgba(14,44,34,.18);
  --sh-fab:0 6px 16px rgba(20,62,48,.32);
}
.mcdev *{box-sizing:border-box;}
.mcdev .mc-root{font-family:Inter,system-ui,sans-serif;color:var(--ink);}
.mcdev .msi{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
  font-feature-settings:'liga' 1;-webkit-font-feature-settings:'liga';font-variant-ligatures:normal;
  -webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  display:inline-flex;align-items:center;justify-content:center;user-select:none;}
.mcdev .msi.fill{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}

/* ---- Phone frame ---------------------------------------------------- */
.mcdev .mc-phone{position:relative;width:390px;height:844px;background:var(--cream);overflow:hidden;
  font-family:Inter,system-ui,sans-serif;color:var(--ink);display:flex;flex-direction:column;}
.mcdev .mc-screen{position:absolute;inset:0;display:flex;flex-direction:column;}
.mcdev .mc-body{flex:1;overflow:hidden;position:relative;}
.mcdev .mc-scroll{position:absolute;inset:0;overflow:hidden;}

/* ---- Status bar (Android) ------------------------------------------ */
.mcdev .mc-status{height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px 0 26px;font-size:14px;font-weight:600;color:var(--forest800);z-index:30;position:relative;}
.mcdev .mc-status.light{color:#fff;}
.mcdev .mc-status .t{font-variant-numeric:tabular-nums;letter-spacing:.3px;}
.mcdev .mc-status .ic{display:flex;align-items:center;gap:6px;}
.mcdev .mc-status .ic .msi{font-size:17px;}

/* ---- Top app bar ---------------------------------------------------- */
.mcdev .mc-appbar{display:flex;align-items:center;gap:12px;padding:6px 16px 12px;}
.mcdev .mc-appbar .title{font-family:Manrope;font-weight:700;font-size:22px;color:var(--forest800);letter-spacing:-.3px;}
.mcdev .mc-iconbtn{width:42px;height:42px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--forest700);position:relative;flex:0 0 auto;box-shadow:var(--sh-card);}
.mcdev .mc-iconbtn .msi{font-size:22px;}
.mcdev .mc-iconbtn.ghost{background:transparent;border:none;box-shadow:none;}
.mcdev .mc-dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid #fff;}
.mcdev .mc-avatar{width:42px;height:42px;border-radius:var(--r-pill);flex:0 0 auto;background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:Manrope;font-weight:700;font-size:16px;overflow:hidden;}

/* ---- Search bar ----------------------------------------------------- */
.mcdev .mc-search{display:flex;align-items:center;gap:10px;height:50px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:0 16px;box-shadow:var(--sh-card);color:var(--ink-soft);font-size:15px;}
.mcdev .mc-search .msi{font-size:22px;color:var(--slate);}

/* ---- Chips ---------------------------------------------------------- */
.mcdev .mc-chips{display:flex;gap:8px;overflow:hidden;}
.mcdev .mc-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--forest700);white-space:nowrap;flex:0 0 auto;}
.mcdev .mc-chip .msi{font-size:17px;}
.mcdev .mc-chip.on{background:var(--forest);border-color:var(--forest);color:#fff;}
.mcdev .mc-chip.on.gold{background:var(--gold);border-color:var(--gold);color:#3a2a07;}

/* ---- Cards ---------------------------------------------------------- */
.mcdev .mc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);}
.mcdev .mc-sect{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 10px;}
.mcdev .mc-sect h3{font-family:Manrope;font-weight:700;font-size:17px;color:var(--forest800);margin:0;letter-spacing:-.2px;}
.mcdev .mc-sect .more{font-size:13px;font-weight:600;color:var(--emerald);display:flex;align-items:center;gap:2px;}
.mcdev .mc-sect .more .msi{font-size:16px;}

/* ---- Status badges -------------------------------------------------- */
.mcdev .mc-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.1px;}
.mcdev .mc-badge .dot{width:7px;height:7px;border-radius:50%;}
.mcdev .mc-badge.green{background:rgba(46,139,87,.12);color:var(--emerald-dark);} .mcdev .mc-badge.green .dot{background:var(--emerald);}
.mcdev .mc-badge.teal{background:rgba(54,183,180,.16);color:var(--teal-dark);} .mcdev .mc-badge.teal .dot{background:var(--teal-dark);}
.mcdev .mc-badge.gold{background:rgba(217,164,65,.20);color:var(--gold-dark);} .mcdev .mc-badge.gold .dot{background:var(--gold-dark);}
.mcdev .mc-badge.red{background:var(--red-soft);color:var(--red);} .mcdev .mc-badge.red .dot{background:var(--red);}
.mcdev .mc-badge.slate{background:var(--mist);color:var(--slate);} .mcdev .mc-badge.slate .dot{background:var(--slate);}

/* ---- Buttons -------------------------------------------------------- */
.mcdev .mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:var(--r-pill);
  font-family:Inter;font-weight:600;font-size:15px;border:none;width:100%;}
.mcdev .mc-btn .msi{font-size:20px;}
.mcdev .mc-btn.primary{background:var(--forest);color:#fff;box-shadow:var(--sh-fab);}
.mcdev .mc-btn.tonal{background:var(--forest50);color:var(--forest700);}
.mcdev .mc-btn.outline{background:#fff;border:1px solid var(--line);color:var(--forest700);box-shadow:var(--sh-card);}
.mcdev .mc-btn.sm{height:40px;font-size:13.5px;width:auto;padding:0 18px;}

/* ---- Bottom nav + FAB ---------------------------------------------- */
.mcdev .mc-navwrap{position:relative;flex:0 0 auto;}
.mcdev .mc-bottomnav{height:78px;background:#fff;border-top:1px solid var(--line);display:flex;
  padding:0 6px 14px;box-shadow:0 -2px 16px rgba(20,62,48,.05);}
.mcdev .mc-navitem{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding-top:10px;color:var(--slate);}
.mcdev .mc-navitem .pill{width:60px;height:32px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;transition:.15s;}
.mcdev .mc-navitem .msi{font-size:24px;}
.mcdev .mc-navitem .lbl{font-size:11px;font-weight:600;}
.mcdev .mc-navitem.on{color:var(--forest800);}
.mcdev .mc-navitem.on .pill{background:var(--forest100);}
.mcdev .mc-navitem.on .msi{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;color:var(--forest700);}
.mcdev .mc-navgap{width:64px;flex:0 0 64px;}
.mcdev .mc-fab{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:62px;height:62px;border-radius:22px;
  background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-fab);z-index:5;border:4px solid var(--cream);}
.mcdev .mc-fab .msi{font-size:30px;}

/* ---- misc ----------------------------------------------------------- */
.mcdev .mc-thumb{background:linear-gradient(135deg,var(--forest100),var(--teal-soft));position:relative;overflow:hidden;}
.mcdev .mc-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--forest300);}
.mcdev .mc-thumb .ph .msi{font-size:30px;}
.mcdev .mc-stripe{background-image:repeating-linear-gradient(45deg,rgba(31,95,74,.06) 0 8px,transparent 8px 16px);}
.mcdev .mc-meta{font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:5px;}
.mcdev .mc-meta .msi{font-size:15px;}
.mcdev .mc-divider{height:1px;background:var(--line);}
.mcdev .mc-h1{font-family:Manrope;font-weight:800;letter-spacing:-.5px;color:var(--forest800);}
.mcdev .mc-fadebar{position:absolute;left:0;right:0;height:24px;pointer-events:none;}

/* ----- Realistic device bezels ----- */
.mcdev .ipx{position:relative;width:416px;height:870px;background:linear-gradient(150deg,#1f1f24,#050506);
  border-radius:58px;padding:13px;box-shadow:inset 0 0 0 2px #34343a, inset 0 0 0 7px #0a0a0b, 0 1px 2px rgba(0,0,0,.5);}
.mcdev .ipx-screen{position:relative;width:390px;height:844px;border-radius:46px;overflow:hidden;background:var(--cream);}
.mcdev .ipx-island{position:absolute;top:25px;left:50%;transform:translateX(-50%);width:116px;height:33px;background:#000;border-radius:18px;z-index:60;}

.mcdev .ipad{position:relative;width:1060px;height:804px;background:linear-gradient(150deg,#1f1f24,#050506);
  border-radius:38px;padding:18px;box-shadow:inset 0 0 0 2px #34343a, inset 0 0 0 8px #0a0a0b, 0 2px 4px rgba(0,0,0,.5);}
.mcdev .ipad-screen{position:relative;width:1024px;height:768px;border-radius:20px;overflow:hidden;background:var(--cream);}
.mcdev .ipad-cam{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#26262b;box-shadow:inset 0 0 0 2px #000;}