/* ===================================================================
   Tee Sheet - stylesheet
   The look borrows from a paper scorecard: card stock, hairline rules,
   a green header band, and condensed uppercase labels.
   =================================================================== */

/* The heading font, Oswald, loaded from Google Fonts so every computer
   shows it, not only ones that have it installed (Oct 24, 2026).  This
   has to stay the first rule in the file. */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap");

:root{
  --ink:#16202b;
  --ink-soft:#3d4a52;
  --muted:#5b6a62;
  --paper:#f4f2ec;
  --card:#fffefb;
  --rule:#d8d4c8;
  --rule-soft:#e8e5dc;
  --fairway:#1e5b3a;
  --fairway-dark:#14442b;
  --sand:#d9cba3;
  --flag:#b3341f;
  --sky:#2b6d8f;
  --radius:3px;
  --shadow:0 1px 0 rgba(22,32,43,.06), 0 6px 18px rgba(22,32,43,.06);
  --display:"Oswald","Arial Narrow","Franklin Gothic Medium",sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Consolas","SFMono-Regular",Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 18px}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#f7f6f1;border-bottom:4px solid var(--fairway)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;flex-wrap:wrap}
.wordmark{
  font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;
}
.wordmark-flag{color:var(--sand);margin-right:9px;font-size:20px}
.nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.nav a{
  color:#dfe4e0;text-decoration:none;font-family:var(--display);font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;font-size:14px;padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus{color:#fff;border-bottom-color:var(--sand)}
.nav .nav-quiet{color:#93a09a}

/* ---------- page furniture ---------- */
main.wrap{padding-top:26px;padding-bottom:60px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
h1{font-family:var(--display);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:30px;margin:0}
h2{font-family:var(--display);font-weight:500;letter-spacing:.09em;text-transform:uppercase;font-size:18px;margin:0 0 12px}
h3{font-size:16px;margin:0 0 8px}
p{margin:0 0 12px}
.sub{color:var(--muted);margin:4px 0 0;font-size:15px}
a{color:var(--fairway)}
hr{border:0;border-top:1px solid var(--rule);margin:22px 0}

.eyebrow{
  font-family:var(--display);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 3px;
}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:20px;
}
.card-tight{padding:14px 16px}
.card-band{border-top:4px solid var(--fairway)}
.grid{display:grid;gap:20px}
@media(min-width:760px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-side{grid-template-columns:2fr 1fr}
}

/* ---------- the scorecard block (game detail) ---------- */
.scorecard{background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);margin-bottom:22px}
.scorecard-head{background:var(--fairway);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline}
.scorecard-head .tee{font-family:var(--display);font-size:26px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.scorecard-head .course{font-size:15px;color:#d7e6dc}
.scorecard-body{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule)}
@media(min-width:700px){.scorecard-body{grid-template-columns:repeat(4,1fr)}}
.stat{padding:14px 18px;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.stat .k{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-size:17px;font-variant-numeric:tabular-nums}
.scorecard-foot{padding:14px 20px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--card)}
thead th{
  background:var(--fairway-dark);color:#fff;text-align:left;font-family:var(--display);
  font-weight:400;letter-spacing:.13em;text-transform:uppercase;font-size:11.5px;
  padding:9px 12px;white-space:nowrap;
}
tbody td{padding:11px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top;font-size:15px}
tbody tr:nth-child(even) td{background:#faf9f4}
tbody tr:last-child td{border-bottom:1px solid var(--rule)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-note{font-size:13px;color:var(--muted)}
.guest-row td{background:#f6f7f2 !important;font-size:14px;color:var(--ink-soft)}
.guest-row td:first-child{padding-left:30px}

/* ---------- status pills ---------- */
.pill{
  display:inline-block;font-family:var(--display);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 9px;border:1px solid;border-radius:99px;white-space:nowrap;
}
.pill-yes{color:#0f4a2c;border-color:#8fc3a6;background:#e6f2ea}
.pill-no{color:#8e2a17;border-color:#e0a99c;background:#fbeae6}
.pill-maybe{color:#7a5b12;border-color:#dcc584;background:#fbf3df}
.pill-pending{color:#4b5a63;border-color:#c9d0d4;background:#eef1f2}
.pill-waitlist{color:#22526b;border-color:#a5c6d5;background:#e6f0f5}
.pill-cancelled{color:#6b6b6b;border-color:#cdcdcd;background:#f0f0f0}
.pill-open{color:#0f4a2c;border-color:#8fc3a6;background:#e6f2ea}
.pill-closed{color:#4b5a63;border-color:#c9d0d4;background:#eef1f2}
.pill-draft{color:#4b5a63;border-color:#c9d0d4;background:#eef1f2}
.pill-completed{color:#4b5a63;border-color:#c9d0d4;background:#eef1f2}

/* ---------- forms ---------- */
label,.lbl{
  display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px;
}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=time],input[type=url],select,textarea{
  width:100%;padding:10px 11px;font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:#fff;border:1px solid #bfc6c0;border-radius:var(--radius);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fairway);outline-offset:1px;border-color:var(--fairway)}
textarea{min-height:88px;resize:vertical}
.field{margin-bottom:16px}
.fields{display:grid;gap:0 16px}
@media(min-width:640px){
  .fields-2{grid-template-columns:1fr 1fr}
  .fields-3{grid-template-columns:1fr 1fr 1fr}
  .fields-4{grid-template-columns:repeat(4,1fr)}
}
.check{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px}
.check input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}
.check label{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:15px;color:var(--ink);margin:0}
.hint{font-size:13px;color:var(--muted);margin:4px 0 0}
fieldset{border:1px solid var(--rule);border-radius:var(--radius);padding:16px;margin:0 0 20px}
legend{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--muted);padding:0 7px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 20px;border:1px solid var(--fairway);
  background:var(--fairway);color:#fff;text-decoration:none;border-radius:var(--radius);
  cursor:pointer;line-height:1.2;
}
.btn:hover{background:var(--fairway-dark);border-color:var(--fairway-dark)}
.btn-ghost{background:transparent;color:var(--fairway)}
.btn-ghost:hover{background:#eaf1ec;color:var(--fairway-dark)}
.btn-quiet{background:transparent;color:var(--ink-soft);border-color:#b9bfba}
.btn-quiet:hover{background:#eceae3;color:var(--ink)}
.btn-danger{background:var(--flag);border-color:var(--flag)}
.btn-danger:hover{background:#8e2a17;border-color:#8e2a17}
.btn-sm{padding:6px 11px;font-size:12px;letter-spacing:.1em}
.btn-lg{padding:15px 30px;font-size:17px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.linkish{background:none;border:0;color:var(--fairway);text-decoration:underline;cursor:pointer;font-size:14px;padding:0;font-family:var(--body)}

/* ---------- flash and alerts ---------- */
.flash{padding:13px 16px;border-radius:var(--radius);margin-bottom:20px;border:1px solid;font-size:15px}
.flash-good{background:#e6f2ea;border-color:#8fc3a6;color:#0f4a2c}
.flash-bad{background:#fbeae6;border-color:#e0a99c;color:#8e2a17}
.flash-note{background:#fbf3df;border-color:#dcc584;color:#6b5310}
.empty{padding:34px 20px;text-align:center;color:var(--muted);border:1px dashed var(--rule);border-radius:var(--radius);background:#fbfaf6}
.empty p{margin:0 0 14px}

/* ---------- misc ---------- */
.meta{font-size:13.5px;color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mono{font-family:var(--mono);font-size:13px}
.copyline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyline input{font-family:var(--mono);font-size:13px}
.tally{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--rule);background:var(--card)}
.tally div{flex:1 1 90px;padding:12px 14px;border-right:1px solid var(--rule-soft)}
.tally div:last-child{border-right:0}
.tally .n{font-family:var(--display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.tally .t{font-family:var(--display);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.foot{border-top:1px solid var(--rule);padding:20px 0;color:var(--muted);font-size:13.5px;background:#efece4}
.rsvp-choice{display:grid;gap:12px}
@media(min-width:560px){.rsvp-choice{grid-template-columns:repeat(3,1fr)}}
.rsvp-choice .btn{width:100%;text-align:center}

@media (prefers-reduced-motion:no-preference){
  .btn{transition:background .15s ease,border-color .15s ease}
}
@media print{
  .topbar,.foot,.btnrow,.btn{display:none}
  body{background:#fff}
  .card,.scorecard{box-shadow:none}
}

/* the tick boxes on the invite picker */
input.pick { width: 18px; height: 18px; accent-color: var(--fairway); cursor: pointer; }
input.pick:disabled { cursor: default; opacity: .35; }
tr.is-invited td { color: var(--ink-3); }

/* ===================================================================
   Phones
   The RSVP page is the one that gets opened on a phone in a parking
   lot, so the touch targets there are sized for a thumb.
   =================================================================== */
@media(max-width:639px){

  /* iOS Safari zooms the whole page when you tap a field under 16px.
     Nothing else on the page is 16px, so this rule only touches inputs. */
  input[type=text],input[type=email],input[type=password],input[type=tel],
  input[type=number],input[type=date],input[type=time],input[type=url],
  select,textarea{ font-size:16px; padding:12px 11px; }

  /* Comfortable thumb targets. */
  .btn{ padding:13px 20px; }
  .btn-sm{ padding:10px 14px; font-size:12.5px; }
  .btn-lg{ padding:17px 24px; }
  .linkish{ padding:10px 2px; display:inline-block; }
  .check input{ width:20px; height:20px; }
  input.pick{ width:22px; height:22px; }
  .nav a{ padding:9px 0; }

  /* Stacked rows read better than a squeezed two-column head. */
  .pagehead{ align-items:flex-start; }
  .pagehead .btnrow{ width:100%; }
  .pagehead .btnrow .btn{ flex:1 1 auto; text-align:center; }

  /* Buttons that sit in a row shouldn't shrink to slivers. */
  .btnrow .btn{ min-width:0; }

  /* Wide tables scroll sideways; make it obvious there is more. */
  .tablewrap{
    border-right:1px solid var(--rule-soft);
    background:
      linear-gradient(to right, var(--card) 30%, rgba(255,254,251,0)) left / 24px 100% no-repeat,
      linear-gradient(to left,  var(--card) 30%, rgba(255,254,251,0)) right / 24px 100% no-repeat,
      linear-gradient(to right, rgba(22,32,43,.10), rgba(22,32,43,0)) left / 8px 100% no-repeat,
      linear-gradient(to left,  rgba(22,32,43,.10), rgba(22,32,43,0)) right / 8px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* The topbar gives the wordmark its own line rather than crowding. */
  .topbar-inner{ padding-top:10px; padding-bottom:10px; }
  .wordmark{ font-size:22px; }
  .nav{ gap:16px; }

  .scorecard-head .tee{ font-size:23px; }
  .tally .n{ font-size:22px; }
  .card{ padding:16px; }
}

/* ---------- New invite chooser ---------- */
a.choice{ display:block; text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
a.choice:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(22,32,43,.10); }
.choice-icon{ display:block; font-size:34px; line-height:1; margin-bottom:10px; }
.choice-title{ display:block; font-family:var(--display); font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:6px; }
.choice-text{ display:block; color:var(--muted); font-size:15px; }
@media (max-width:639px){ .choice-icon{ font-size:30px; } .choice-title{ font-size:20px; } }

/* A plainer card for non-golf invites */
.scorecard.plain .scorecard-head{ background:var(--sky); }

/* Hints under form boxes: easier to read on a phone */
@media (max-width:639px){ .hint{ font-size:15px; line-height:1.45; } }

/* ---------- Sign-in page: what this site does ---------- */
.landing{
  display:grid; gap:22px; max-width:980px; margin:20px auto 10px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"intro" "signin" "more";
}
@media (min-width:760px){
  .landing{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    grid-template-areas:"intro signin" "more signin";
    column-gap:40px; row-gap:10px; margin-top:34px;
  }
}
.lp-intro{ grid-area:intro; }
.lp-signin{ grid-area:signin; align-self:start; }
.lp-more{ grid-area:more; }
.lp-headline{ font-family:var(--display); font-size:38px; line-height:1.08; letter-spacing:.02em; text-transform:uppercase; margin:0 0 12px; color:var(--ink); }
.lp-lead{ font-size:18px; line-height:1.55; color:var(--ink-soft); margin:0; max-width:34em; }
.lp-steps{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.lp-steps li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.45; color:var(--ink-soft); }
.lp-steps strong{ color:var(--ink); font-size:17px; }
.lp-icon{ flex:0 0 42px; height:42px; border-radius:50%; background:#e6f0e9; color:var(--fairway); display:flex; align-items:center; justify-content:center; font-size:20px; }
.lp-sample{ max-width:460px; }
.lp-sample-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
@media (max-width:639px){
  .lp-headline{ font-size:30px; }
  .lp-lead{ font-size:17px; }
}

/* Big, easy dropdown */
select.select-lg{ font-size:18px; padding:12px 14px; min-height:50px; }

/* Event title on the colored banner, above the time */
.scorecard-head .card-title{ font-family:var(--display); font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); margin-bottom:4px; }
/* Repeating-series note on the invite page */
.series-note{ background:#eef4f0; border:1px solid #cfe0d5; padding:12px 14px; margin-bottom:12px; }

/* Video meetings: the join button */
a.join-btn{ display:inline-block; text-align:center; min-width:260px; }
@media (max-width:639px){ a.join-btn{ display:block; width:100%; min-width:0; } }

/* ---------- Pop-up window (Request a free account) ---------- */
.modal{ position:fixed; inset:0; z-index:1000; background:rgba(22,32,43,.55);
        display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-box{ position:relative; background:var(--card); width:100%; max-width:560px; max-height:92vh; overflow:auto;
            padding:24px 22px; border-top:4px solid var(--fairway); box-shadow:0 18px 50px rgba(0,0,0,.25); }
.modal-close{ position:absolute; top:6px; right:10px; background:none; border:0; font-size:34px; line-height:1;
              color:var(--muted); cursor:pointer; padding:4px 8px; }
@media (max-width:639px){
  .modal{ padding:0; align-items:stretch; }
  .modal-box{ max-width:none; max-height:none; height:100%; padding-top:30px; }
}
/* the hidden box only spam robots fill in */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Admin: account requests */
.request{ padding:12px 0; border-top:1px solid var(--rule); }
.request:first-of-type{ border-top:0; padding-top:4px; }
.request-msg{ margin:0 0 10px; padding:10px 12px; background:var(--paper); white-space:pre-wrap; }
.nav-count{ display:inline-block; min-width:20px; padding:1px 6px; margin-left:3px; border-radius:10px;
            background:var(--flag); color:#fff; font-size:12px; line-height:18px; text-align:center; }

/* "You're in!" banner that drops down after answering */
.toast{ position:fixed; top:0; left:0; right:0; z-index:1100; cursor:pointer;
        padding:20px 22px 16px; padding-top:calc(20px + env(safe-area-inset-top, 0px));
        text-align:center; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25);
        transform:translateY(-110%); transition:transform .35s ease; }
.toast.show{ transform:translateY(0); }
.toast-title{ font-family:var(--display); font-size:28px; letter-spacing:.03em; line-height:1.15; }
.toast-sub{ font-size:17px; margin-top:6px; line-height:1.4; }
.toast-tap{ font-size:12px; margin-top:10px; opacity:.75; }
.toast-yes{ background:var(--fairway); }
.toast-no{ background:var(--flag); }
.toast-maybe{ background:var(--sky); }
.toast-wait{ background:var(--sand); color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }

/* ---------- Home (sign-in) page: full-width top section ---------- */
.hero{
  margin:-26px calc(50% - 50vw) 0; padding:36px 18px 120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E %3Cpath d='M0 150 C 220 90 420 120 640 100 C 860 80 1060 40 1440 90 L1440 260 L0 260 Z' fill='%23cfe0d2'/%3E %3Cpath d='M0 190 C 260 140 520 170 760 150 C 1000 130 1220 120 1440 150 L1440 260 L0 260 Z' fill='%23b9d3bf'/%3E %3Cpath d='M0 225 C 300 195 600 215 900 200 C 1150 188 1300 195 1440 205 L1440 260 L0 260 Z' fill='%23a6c7ad'/%3E %3Cline x1='1090' y1='66' x2='1090' y2='108' stroke='%238aa892' stroke-width='2'/%3E %3Cpath d='M1091 66 L1112 72 L1091 78 Z' fill='%23c9a99a'/%3E %3C/svg%3E") bottom center / 100% 170px no-repeat,
             linear-gradient(180deg, #f4f2ec 0%, #eef3ee 100%);
  border-bottom:1px solid var(--rule);
}
.hero.hero-photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.hero-inner{ max-width:1004px; margin:0 auto; display:grid; gap:24px;
             grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:760px){
  .hero-inner{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:40px; }
  .hero{ padding-top:46px; }
}
.hero-copy .lp-lead{ margin-bottom:18px; }
.kinds{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.kinds li{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-size:15px;
           background:rgba(255,254,251,.85); border:1px solid var(--rule); border-radius:20px; color:var(--ink); }
.kinds li span{ font-size:17px; line-height:1; }

/* the band under it: golf on the left, three steps on the right */
.home-band{ display:grid; gap:22px; grid-template-columns:minmax(0,1fr); padding:24px 0 6px; }
@media (min-width:760px){ .home-band{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:40px; } }
.golf-strip{ background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--fairway); padding:16px 18px; }
.golf-strip-title{ font-family:var(--display); font-size:18px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px; color:var(--fairway); }
.golf-strip ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px 22px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){ .golf-strip ul{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.golf-strip li{ font-size:15px; line-height:1.45; color:var(--ink-soft); }
.golf-strip li strong{ color:var(--ink); }
.steps-row{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.steps-row li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.4; color:var(--ink-soft); }
.steps-row strong{ color:var(--ink); font-size:16px; }
.steps-row .lp-icon{ flex:0 0 34px; height:34px; font-size:16px; font-weight:700; font-family:var(--display); }
@media (max-width:639px){
  .hero{ padding:22px 16px 90px; background-size:100% 110px, auto; }
  .kinds li{ font-size:14px; padding:6px 10px; }
}
/* The sign-in box belongs in the right-hand column of the new top section,
   not in the named slot it had on the old layout. */
.hero-inner .lp-signin{ grid-area:auto; }
/* copyright line, centered */
.foot .wrap{ text-align:center; justify-content:center; }

/* Video meetings: the link itself, with Copy and Join */
.meeting-link{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 12px;
               padding:10px 12px; background:#eef3f8; border:1px solid #c9d8e6; }
.ml-label{ font-weight:700; color:var(--ink); }
.ml-url{ word-break:break-all; flex:1 1 220px; color:var(--sky); }
.ml-buttons{ display:flex; gap:8px; }
/* Cancelled should stand out in a list */
.pill-cancelled{ color:#fff; border-color:var(--flag); background:var(--flag); }