/* FDAS digital wallet card. */
:root{ --navy:#1a2b49; --navy2:#24406e; --green:#2ecc71; --amber:#f0ad4e; --red:#e74c3c; --grey:#9aa3af;
  /* Three radii and three elevations, and nothing invents its own. The app had
     twelve of each, nine of the shadows used exactly once, which is why the
     screens did not read as one app. Depth is rationed: the membership card and
     the sheets are the only things that float. */
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --line:rgba(20,30,55,.09);
  --e-flat:0 1px 2px rgba(20,30,55,.06);
  --e-raised:0 4px 18px rgba(20,30,55,.10);
  --e-hero:0 22px 50px rgba(20,30,55,.35);
  --e-sheet:0 -12px 44px rgba(15,22,35,.28);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display rules must not override the hidden attribute */
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:#eef1f5;color:#1f2733;line-height:1.45;min-height:100vh;
  padding:max(34px,calc(env(safe-area-inset-top) + 16px)) 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;align-items:flex-start;justify-content:center;overscroll-behavior-y:contain}

/* Pull to refresh: the page (#pullwrap) slides down, this icon stays pinned at the top. */
.ptr{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:1;
  padding-top:calc(12px + env(safe-area-inset-top));opacity:0;transition:opacity .2s ease}
/* body is a centring flexbox, so this is a shrink-to-fit item: without a width
   its children's width:100% resolves against "as narrow as the content" and the
   view collapses toward the middle. The cards tab only escaped it because a card
   is physically wide; with that tab hidden there is nothing to hold it open. */
#pullwrap{position:relative;z-index:2;width:100%;max-width:420px}
/* iOS-style activity indicator: 12 tapered bars round a circle, each fading on a
   staggered negative delay so one appears to chase the others. Shared with the
   bailiff app, which builds the same 12 bars. */
.ios-spinner{position:relative;width:28px;height:28px;color:var(--navy)}
.ios-spinner i{position:absolute;left:50%;top:0;width:2px;height:7px;margin-left:-1px;
  border-radius:1px;background:currentColor;transform-origin:1px 14px;
  animation:iosFade 1s linear infinite}
@keyframes iosFade{0%{opacity:1}100%{opacity:.15}}
.ptr .ios-spinner i{animation-play-state:paused}   /* still while dragging */
.ptr.ready .ios-spinner i,
.ptr.spinning .ios-spinner i{animation-play-state:running}
@media (prefers-reduced-motion: reduce){
  .ios-spinner i{animation-duration:2s}
}

.cardwrap{width:100%;max-width:420px;margin:0 auto}

/* The card */
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;color:var(--card-ink,#fff);
  background:var(--card-col,#1a2b49);
  box-shadow:var(--e-hero);padding:20px}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.12) 0%,rgba(0,0,0,.30) 100%)}
.card::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none}

/* Wallet stack: cards cascade down; tap a back one to bring it to front. */
.cardstack{position:relative}
/* Front card sits at the bottom (fully shown); the others peek above it. --rise
   = how far from the top a card sits (front has the largest rise). The peek
   height (56px) is the tappable strip of each card behind. */
.cardstack .card{position:absolute;left:0;right:0;top:0;cursor:pointer;
  transform:translateY(calc(var(--rise,0) * 56px));
  z-index:calc(50 - var(--depth,0));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.cardstack .card.is-front{cursor:default}
.cardstack[style*="--count:1"] .card{position:relative;cursor:default;transform:none}
.card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.card-logo{height:34px;width:auto;filter:var(--card-logo-filter,none);opacity:.96}
.pill{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:999px;
  background:var(--grey);color:#fff;white-space:nowrap}
.card[data-state=active]   .pill{background:var(--green)}
.card[data-state=expired]  .pill{background:var(--amber);color:#3a2c08}
.card[data-state=unpaid]   .pill{background:var(--amber);color:#3a2c08}
.card[data-state=banned]   .pill{background:var(--red)}
.card[data-state=cancelled] .pill{background:var(--red)}

.card-id{display:flex;align-items:center;gap:16px;margin:22px 0 20px;position:relative;z-index:1}
.photo{width:84px;height:84px;flex-shrink:0;border-radius:var(--r-sm);overflow:hidden;background:rgba(255,255,255,.12);
  border:2px solid var(--card-photo-bd,rgba(255,255,255,.5))}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-empty{width:100%;height:100%}
.who{min-width:0}
.name{font-size:23px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.type{font-size:15px;color:var(--card-ink-soft,#cdd8ec);margin-top:3px}
.no{font-size:13px;color:var(--card-ink-mute,#9fb0cf);margin-top:6px;letter-spacing:.06em;font-variant-numeric:tabular-nums}

.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;position:relative;z-index:1;
  border-top:1px solid var(--card-line,rgba(255,255,255,.14));padding-top:16px}
.meta{display:flex;flex-direction:column;gap:12px}
.meta div{display:flex;flex-direction:column}
.meta span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--card-ink-mute,#9fb0cf)}
.meta strong{font-size:16px;font-weight:700}
.qr{background:#fff;border-radius:var(--r-sm);padding:8px;line-height:0;cursor:pointer}
.qr img{display:block;width:108px;height:108px}

/* Inset from the card's edges so the line breaks fall inside its width, and
   clear of the card's shadow, which reaches 22px down with a 50px blur. The
   second hint sits closer, since it follows the first rather than the card. */
.hint{font-size:13px;color:#67707d;text-align:center;margin:30px 26px 4px;line-height:1.5}
.hint + .hint{margin-top:10px}
.updated{font-size:12px;color:#9aa3af;margin:0}

/* Header row: title (left) + live-clock pill (top-right corner). */
.wallet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.wallet-actions{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.wallet-head .view-title{margin:0}

/* Live clock pill — the ticking seconds defeat screenshots. */
/* Fixed height, matching .cog exactly. Sized by padding it came out ~31px
   against the cog's 34px, so the two never sat on the same line. */
.liveclock{flex:0 0 auto;display:inline-flex;align-items:center;height:34px;padding:0 14px;
  font-size:14px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap;background:#fff;border-radius:999px;
  box-shadow:var(--e-flat)}

/* Status row: online/offline pill (left) + last-updated (right). */
.walletbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 16px}
.netstat{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:6px 12px 6px 10px;border-radius:999px;background:rgba(46,204,113,.13);color:#1c8c4b}
/* Wifi mark rather than a dot: it reads as connection at a glance, and the
   offline state is the same glyph with a strike through it instead of a
   different colour of blob. */
.netstat .wifi{width:14px;height:14px;flex:0 0 auto}
.netstat .wifi-slash{opacity:0;transition:opacity .15s ease}
.netstat.is-offline{background:rgba(240,173,78,.18);color:#9a6712}
.netstat.is-offline .wifi-slash{opacity:1}
@keyframes netpulse{0%{transform:scale(.55);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* Add-to-home-screen sheet */
.sheet-scrim{position:fixed;inset:0;background:rgba(15,22,35,.45);z-index:300;
  opacity:0;transition:opacity .3s ease}
.sheet-scrim.show{opacity:1}
.install-sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;max-width:480px;margin:0 auto;
  background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;text-align:center;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--e-sheet);
  transform:translateY(110%);transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform}
.install-sheet.show{transform:translateY(0)}
.sheet-grip{width:42px;height:5px;border-radius:3px;background:#d7dce3;margin:6px auto 16px}
.sheet-icon{width:66px;height:66px;border-radius:var(--r-md);box-shadow:var(--e-raised);margin-bottom:12px}
.sheet-title{font-size:20px;font-weight:800;color:var(--navy);margin:0 0 6px}
.sheet-text{font-size:14px;color:#67707d;margin:0 auto 18px;max-width:340px;line-height:1.5}
.sheet-btn{display:block;width:100%;padding:15px;border:0;border-radius:var(--r-sm);background:var(--navy);
  color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.sheet-btn:active{opacity:.88}
.sheet-steps{text-align:left;margin:0 auto 6px;max-width:320px;padding-left:22px;color:#1f2733;font-size:15px}
.sheet-steps li{margin:10px 0;line-height:1.45}
.share-ico{display:inline-flex;vertical-align:-3px;color:#0a84ff;margin:0 1px}
.sheet-dismiss{margin-top:10px;background:transparent;border:0;color:#67707d;font-size:14px;font-weight:600;cursor:pointer;padding:10px}
.sheet-close{position:absolute;top:12px;right:14px;width:30px;height:30px;background:transparent;border:0;
  font-size:26px;line-height:1;color:#9aa3af;cursor:pointer}

/* Enlarged-QR sheet (reuses .sheet-scrim + the .sheet-* base) */
.qr-sheet{position:fixed;left:0;right:0;bottom:0;z-index:310;max-width:480px;margin:0 auto;
  background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;text-align:center;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--e-sheet);
  transform:translateY(110%);transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform}
.qr-sheet.show{transform:translateY(0)}
.qr-big-wrap{display:inline-block;background:#fff;border-radius:var(--r-md);padding:14px;margin:4px auto 6px;
  box-shadow:var(--e-raised)}
.qr-big{display:block;width:min(78vw,340px);height:min(78vw,340px)}

/* Leave room for the fixed bottom tab bar */
.cardwrap{padding-bottom:110px}
.rules{padding-bottom:150px}      /* extra clearance so the rules never sit under the tab bar */

/* Rules tab */
.rules{width:100%;max-width:420px;margin:0 auto}
.view-title{font-size:25px;font-weight:800;color:var(--navy);text-align:left;margin:2px 4px 16px}
.rules-card{background:#fff;border-radius:var(--r-md);padding:20px;box-shadow:var(--e-flat)}
.rules-card>*:first-child{margin-top:0}
.rules-card h1,.rules-card h2,.rules-card h3,.rules-card h4{color:var(--navy);line-height:1.25;margin:18px 0 8px}
.rules-card p{margin:0 0 12px}
.rules-card ul,.rules-card ol{margin:0 0 12px;padding-left:20px}
.rules-card li{margin:4px 0}
.rules-card a{color:var(--navy2);word-break:break-word}
.rules-card table{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:14px}
.rules-card th,.rules-card td{border:1px solid #e2e6ec;padding:6px 8px;text-align:left;vertical-align:top}
.rules-card th{background:#f4f6f9}
.rules-card tbody tr:nth-child(even){background:#f7f9fc}
.rules-card .fdas-table.fdas-table-noalt tbody tr:nth-child(even){background:transparent}
/* The wallet is a narrow column, so rules tables stack to label + value pairs
   (the editor writes each header into the cell's data-label). */
.rules-card thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rules-card table tr{display:block;border:1px solid #e2e6ec;border-radius:var(--r-sm);margin:0 0 10px;overflow:hidden}
.rules-card td{display:flex;justify-content:space-between;gap:12px;border:none;border-bottom:1px solid #eef1f4;padding:7px 9px}
.rules-card td:last-child{border-bottom:none}
.rules-card td::before{content:attr(data-label);font-weight:700;color:var(--navy);flex:0 0 40%}
.rules-card td:not([data-label])::before{content:none}
.rules-card td:empty{display:none}
.rules-empty{color:#67707d;text-align:center;margin:0}

/* Bottom tab bar: a wide rounded pill track with a navy pill that slides between
   the three equal tabs. The pill is sized/placed in CSS (no JS measuring). */
.tabbar{position:fixed;left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:4px;padding:5px;background:#fff;border-radius:999px;
  box-shadow:var(--e-raised);z-index:150}
.tab{flex:1;position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:#67707d;
  font:600 13px/1 inherit;padding:13px 6px;border-radius:999px;cursor:pointer;transition:color .2s ease;white-space:nowrap}
.tab svg{width:19px;height:19px;flex-shrink:0}
.tab.is-active{color:#fff}
/* The sliding navy pill: width = one tab (track has 5px side padding + one 4px gap
   between two tabs = 14px of chrome), translateX(100% + gap) lands on tab two. */
.tab-ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 14px) / 2);
  border-radius:999px;background:var(--navy);z-index:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.tabbar[data-active="documents"] .tab-ind{transform:translateX(calc(100% + 4px))}

/* Not found */
.notfound{max-width:420px;margin:60px auto;text-align:center;padding:0 8px}
.nf-logo{height:48px;margin-bottom:16px}
.notfound h1{font-size:22px;margin:0 0 8px;color:var(--navy)}
.notfound p{color:#67707d}


/* ---- Documents ------------------------------------------------------- */
/* width:100% matters: body is a centring flexbox, so a child without it
   shrinks to its content and the whole tab looks squashed into the middle. */
/* overflow-x:clip, not hidden: hidden would make this a scroll container and
   crop the cards' shadows. clip contains the slide without either side effect. */
.docs{width:100%;max-width:420px;margin:0 auto;padding:0 0 150px;overflow-x:clip}

/* Directional push, the way a native list drills in: forward arrives from the
   right, back from the left, so the motion says which way you went. */
@keyframes doc-push-in{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes doc-pop-in{from{transform:translateX(-26px);opacity:0}to{transform:none;opacity:1}}
.doc-push{animation:doc-push-in .26s cubic-bezier(.2,.75,.3,1) both}
.doc-pop{animation:doc-pop-in .26s cubic-bezier(.2,.75,.3,1) both}
@media (prefers-reduced-motion: reduce){
  .doc-push,.doc-pop{animation:none}
}

/* One container per group, rows divided by hairlines. A stack of separately
   shadowed cards gives a folder row the same weight as the membership card;
   grouping them lets the card stay the only thing that floats. */
.doc-grouphead{margin:2px 4px 7px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8a93a2}
.set-card{background:#fff;border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--e-flat);margin-bottom:18px}
/* Separate rows with air between them, not one flush block. */
.docfolders,.doclist{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.docfolder,.docitem{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 16px;border:0;border-radius:var(--r-md);background:#fff;color:var(--navy);
  box-shadow:var(--e-flat);font:inherit;cursor:pointer}
.docfolder:active,.docitem:active{background:#f6f8fb}
.docfolder-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto}
.docfolder-ico svg{width:27px;height:27px}
.docfolder-name{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docfolder-count{flex:0 0 auto;font-size:14px;color:#8a93a2;font-variant-numeric:tabular-nums}
.docitem-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.docitem-name{font-size:16px;font-weight:600;line-height:1.3}
.docitem-sub{font-size:13px;color:#8a93a2;line-height:1.35}
.docfolder-go{width:17px;height:17px;flex:0 0 auto;color:#c3c9d2}

.docpanel-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.docback{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;border-radius:50%;background:#fff;color:var(--navy);
  box-shadow:var(--e-flat);cursor:pointer;padding:0}
.docback:active{background:#f6f8fb}
.docback svg{width:19px;height:19px}
.docpanel-title{flex:1;min-width:0;margin:0;font-size:22px;font-weight:800;color:var(--navy);
  letter-spacing:-.01em;line-height:1.2}

/* Reader: the app's sheet vocabulary, same as the alert and QR sheets. */
.doc-sheet{position:fixed;left:0;right:0;bottom:0;z-index:320;max-width:480px;margin:0 auto;
  background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--e-sheet);display:flex;flex-direction:column;
  max-height:90vh;
  max-height:calc(90dvh - env(safe-area-inset-top));
  transform:translateY(110%);transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform}
.doc-sheet.show{transform:translateY(0)}
.doc-updated{margin:0 0 12px;font-size:12.5px;color:#8a93a2}
.doc-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;
  font-size:16px;line-height:1.6;color:#22304a;text-align:left}
.doc-body h2,.doc-body h3,.doc-body h4{margin:20px 0 8px;line-height:1.3;color:var(--navy)}
.doc-body h2{font-size:19px} .doc-body h3{font-size:17px} .doc-body h4{font-size:15.5px}
.doc-body p{margin:0 0 13px}
.doc-body ul,.doc-body ol{margin:0 0 13px;padding-left:22px}
.doc-body li{margin-bottom:6px}
.doc-body a{color:#2c6ecb}
.doc-body img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.doc-body table{width:100%;border-collapse:collapse;margin:0 0 13px;font-size:14px}
.doc-body th,.doc-body td{border:1px solid var(--line);padding:7px 9px;text-align:left}
.doc-body blockquote{margin:0 0 13px;padding-left:12px;border-left:3px solid var(--line);color:#4a5668}
html.sheet-open{overflow:hidden}

/* ---- Document alert -------------------------------------------------- */
/* Sits above the reader: it lands first, over the card, before anything else. */
/* Matches .install-sheet and .qr-sheet exactly: same radius, padding, shadow and
   travel. Those are the app's sheets and this sits alongside them, so it uses
   the same .sheet-grip / .sheet-title / .sheet-text / .sheet-btn / .sheet-dismiss
   vocabulary rather than a parallel set of its own. Only the height cap and the
   flex pinning are specific to this one. */
.alert-sheet{position:fixed;left:0;right:0;bottom:0;z-index:330;max-width:480px;margin:0 auto;
  background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;text-align:left;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--e-sheet);
  display:flex;flex-direction:column;
  max-height:90vh;
  max-height:calc(90dvh - env(safe-area-inset-top));
  transform:translateY(110%);transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform}
.alert-sheet.show{transform:translateY(0)}

/* Flex column, so anything that is not meant to fill the width needs pinning. */
.alert-sheet .sheet-grip,.doc-sheet .sheet-grip{align-self:center;flex:0 0 auto}
.alert-sheet .sheet-btn,.alert-sheet .sheet-dismiss{flex:0 0 auto;text-align:center}
.doc-sheet .sheet-title,.doc-updated{width:100%;flex:0 0 auto}

/* A touch larger than the app's default sheet type: this one interrupts you, so
   the two choices need to be easy to read and easy to hit. */
.alert-sheet .sheet-btn{font-size:17px;padding:16px}
.alert-sheet .sheet-dismiss{font-size:15px;padding:12px;width:100%}

/* Bell beside the copy, not above it. align-self:stretch makes the tile take the
   full height of the eyebrow, title and message together, with the glyph centred
   inside it, so the block reads as one object rather than a stack. */
.alert-head{display:flex;align-items:stretch;gap:14px;flex:0 1 auto;min-height:0;margin:2px 0 18px}
.alert-bell{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center;
  width:52px;min-height:52px;border-radius:var(--r-md);background:var(--blue-bg,#eaf1fb);color:var(--navy)}
.alert-bell svg{width:25px;height:25px}
.alert-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.alert-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#7b8494;line-height:1.35;margin-bottom:5px}

/* The base .sheet-text is centred with an auto margin. In this block it is
   left set, full width and closed up, because .alert-head owns the spacing. */
.alert-sheet .sheet-title{margin:0 0 5px;font-size:20px;line-height:1.3}
.alert-sheet .sheet-text{margin:0;max-width:none;text-align:left;font-size:14.5px;line-height:1.5}

/* ---- Settings, reached by the cog ------------------------------------ */
.wallet-head{position:relative}
.cog{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  border:0;border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;
  box-shadow:var(--e-flat)}
.cog svg{width:19px;height:19px}
.cog:active{transform:scale(.94)}

.settings{width:100%;max-width:420px;margin:0 auto;padding:0 0 150px}
.set-row{display:flex;align-items:center;gap:14px;padding:14px 16px;position:relative}
.set-row + .set-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line)}
.set-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.set-name{font-size:16px;font-weight:600;color:var(--navy);line-height:1.25}
.set-sub{font-size:13px;color:#8a93a2;line-height:1.4}
.set-fixed{flex:0 0 auto;font-size:13px;font-weight:600;color:#67707d}
.set-version{display:block;width:100%;margin:24px 0 0;text-align:center;font-size:11px;font-weight:600;color:#a5adb9;letter-spacing:.04em}
.set-note{margin:0;padding:0 16px 14px;font-size:13px;line-height:1.45;color:#8a93a2}

/* Switch, matching the CMS toggle so the two systems feel related. */
.switch{flex:0 0 auto;width:52px;height:31px;border:0;padding:0;background:transparent;cursor:pointer}
.switch-track{display:block;position:relative;width:52px;height:31px;border-radius:999px;
  background:#cbd2da;transition:background .18s ease}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .18s ease}
.switch.is-on .switch-track{background:var(--green)}
.switch.is-on .switch-track::after{transform:translateX(21px)}
.switch:disabled{opacity:.45;cursor:default}

/* Why the notifications toggle is or is not available. Facts, not advice. */
.set-diag{list-style:none;margin:0;padding:0 16px 14px;display:flex;flex-direction:column;gap:5px}
.set-diag li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.4;color:#67707d}
.set-diag li::before{position:absolute;left:0;top:0;font-weight:800}
.set-diag li.is-ok::before{content:"\2713";color:var(--green)}
.set-diag li.is-no::before{content:"\00D7";color:var(--amber);font-size:15px;line-height:1.1}
.set-diag li span{opacity:.75}