/* FDAS digital wallet card. */
:root{ --navy:#1a2b49; --navy2:#24406e; --green:#2ecc71; --amber:#f0ad4e; --red:#e74c3c; --grey:#9aa3af; }
*{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}
#pullwrap{position:relative;z-index:2}
.ptr-spinner{width:40px;height:40px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(20,30,55,.22)}
.ptr-icon{width:21px;height:21px;color:var(--navy);transition:color .2s ease}
.ptr.ready .ptr-icon{color:var(--green)}
.ptr.spinning .ptr-icon{animation:ptr-spin .7s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}

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

/* The card */
.card{position:relative;border-radius:20px;overflow:hidden;color:var(--card-ink,#fff);
  background:var(--card-col,#1a2b49);
  box-shadow:0 22px 50px rgba(20,30,55,.35);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:14px;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:12px;padding:8px;line-height:0;cursor:pointer}
.qr img{display:block;width:108px;height:108px}

.hint{font-size:13px;color:#67707d;text-align:center;margin:18px 6px 4px}
.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-head .view-title{margin:0}

/* Live clock pill — the ticking seconds defeat screenshots. */
.liveclock{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;white-space:nowrap;padding:7px 13px;background:#fff;border-radius:999px;
  box-shadow:0 3px 10px rgba(20,30,55,.14)}

/* 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}
.netstat .dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--green)}
.netstat .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);
  opacity:.55;animation:netpulse 1.8s ease-out infinite}
.netstat.is-offline{background:rgba(240,173,78,.18);color:#9a6712}
.netstat.is-offline .dot{background:var(--amber)}
.netstat.is-offline .dot::after{display:none}
@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:24px 24px 0 0;text-align:center;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(15,22,35,.28);
  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:16px;box-shadow:0 5px 16px rgba(20,30,55,.2);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:13px;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:24px 24px 0 0;text-align:center;
  padding:10px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(15,22,35,.28);
  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:16px;padding:14px;margin:4px auto 6px;
  box-shadow:0 4px 18px rgba(20,30,55,.12)}
.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:18px;padding:20px;box-shadow:0 4px 18px rgba(20,30,55,.08)}
.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:8px;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:0 6px 24px rgba(20,30,55,.18);z-index:150}
.tab{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:#67707d;
  font:600 12px/1 inherit;padding:11px 6px;border-radius:999px;cursor:pointer;transition:color .2s ease;white-space:nowrap}
.tab svg{width:20px;height:20px;flex-shrink:0}
.tab.is-active{color:#fff}
/* The sliding navy pill: width = one tab (track has 5px side padding + two 4px gaps
   between three tabs = 18px of chrome), translateX(N*(100% + gap)) lands on tab N+1. */
.tab-ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 18px) / 3);
  border-radius:999px;background:var(--navy);z-index:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.tabbar[data-active="rules"] .tab-ind{transform:translateX(calc(100% + 4px))}
.tabbar[data-active="matchdates"] .tab-ind{transform:translateX(calc(200% + 8px))}

/* 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}