/* Full page, editor and gallery chrome. Embeds load styles.css only. */
.wrap { max-width: 980px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
/* Hero: flag navy with a faint field of stars, Kan logo, stripes along the bottom edge. */
.hero { position: relative; overflow: hidden; color: #fff; border-radius: 16px; padding: 22px 22px 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M11 4l1.8 4.6 4.9.3-3.8 3.1 1.2 4.8L11 14.1l-4.1 2.7 1.2-4.8-3.8-3.1 4.9-.3zM33 26l1.8 4.6 4.9.3-3.8 3.1 1.2 4.8-4.1-2.7-4.1 2.7 1.2-4.8-3.8-3.1 4.9-.3z'/%3E%3C/svg%3E"), var(--navy);
  display: grid; gap: 10px; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 12px; background: repeating-linear-gradient(to bottom, var(--flag-red) 0 3px, #fff 3px 6px); }
.hero-logo { height: 30px; width: auto; }
.hero.compact { padding: 14px 18px 24px; gap: 6px; }
.hero.compact .hero-lede, .hero.compact .hero-animals, .hero.compact .hero-eyebrow { display: none; }
.hero.compact h1 { font-size: 30px; }
.herolinks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.herolinks a { color: #fff; font-weight: 700; background: rgba(255,255,255,.12); border-radius: 999px; padding: 4px 12px; text-decoration: none; }
.hero > * { position: relative; z-index: 1; }
/* Donkey and elephant squaring off in the corner, like a fight-night poster. */
.hero-animals { position: absolute !important; z-index: 0 !important; left: 18px; bottom: 26px; display: flex; align-items: flex-end; gap: 10px; opacity: .9; }
.hero-animals .picon { width: 120px; height: 96px; }
.hero-animals .picon.D { color: #4f7fe0; } .hero-animals .picon.R { color: #e0435a; }
.hero-animals .vs { font-weight: 900; font-size: 22px; color: #fff; padding-bottom: 30px; }
@media (max-width: 640px) { .hero-animals { position: static !important; justify-content: center; margin-top: 4px; } .hero-animals .picon { width: 84px; height: 67px; } }
.hero-eyebrow { color: var(--kan); font-weight: 900; font-size: 15px; letter-spacing: .03em; margin-top: 6px; }
.hero h1 { font-size: clamp(34px, 8vw, 64px); font-weight: 900; line-height: .95; letter-spacing: -.02em; }
.hero-lede { font-size: 17px; max-width: 60ch; color: #d9deea; }
.clocks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; }
.clocks div { display: grid; }
.clocks span { font-size: 12px; color: #9fb0d0; }
.clocks b { font-size: 26px; font-weight: 900; line-height: 1.1; }
.clocks .phase b { font-size: 16px; font-weight: 700; padding-top: 6px; }
.two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.pagefoot { border-top: 1px solid var(--rule); padding-top: 12px; }

button, select, input, textarea { font: inherit; font-size: 14px; color: var(--ink); }
button, select { border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--ink-3); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--now); outline-offset: 2px; }
button.ghost { background: transparent; color: var(--ink-2); }
button.bad { border-color: var(--rep); color: var(--rep); }
input[type="number"] { width: 96px; border: 1px solid var(--rule); background: var(--card); border-radius: 6px; padding: 4px 8px; }

.ebar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--card); border: 1px solid var(--now); border-radius: 10px; padding: 10px 14px; }
.ebar a { font-size: 14px; }
.egroup { display: grid; gap: 8px; }
.erow { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; border-inline-start: 5px solid var(--open); }
.erow.called.d { border-inline-start-color: var(--dem); } .erow.called.r { border-inline-start-color: var(--rep); } .erow.called.i { border-inline-start-color: var(--ind); }
.erow.called.y { border-inline-start-color: var(--now); } .erow.called.n { border-inline-start-color: var(--ink-2); }
.erow.compact { padding: 6px 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.counts { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.ebtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ebtns label, .votes label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }
.callbtn.d { border-color: var(--dem); color: var(--dem); } .callbtn.r { border-color: var(--rep); color: var(--rep); } .callbtn.i { border-color: var(--ind); color: var(--ind); }
.callbtn.y { border-color: var(--now); color: var(--now); }
.callbtn.armed { color: #fff; font-weight: 700; }
.callbtn.armed.d { background: var(--dem); } .callbtn.armed.r { background: var(--rep); } .callbtn.armed.i { background: var(--ind); }
.callbtn.armed.y { background: var(--now); } .callbtn.armed.n { background: var(--ink-2); color: var(--card); }
.callbtn.current { opacity: 1; font-weight: 700; }
.votes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--paper); border-radius: 8px; padding: 8px; }
.fb { font-size: 12px; border-radius: 999px; padding: 1px 8px; margin-inline-start: 4px; white-space: nowrap; }
.fb.ok { background: var(--yes-soft); color: var(--yes); } .fb.bad { background: var(--rep-soft); color: var(--rep); }
.fb.manual { background: #fdf0d5; color: #8a5a00; } .fb.none { background: var(--paper); color: var(--ink-3); }
.elog { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--ink-2); display: grid; gap: 2px; }
.danger { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
.danger summary { cursor: pointer; color: var(--rep); font-size: 14px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 20; max-width: calc(100% - 32px); }
.toast.bad { background: var(--rep); color: #fff; }

.gcard { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.ghead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.gtools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gcard textarea { width: 100%; direction: ltr; font-family: ui-monospace, Consolas, monospace; font-size: 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); padding: 8px; resize: vertical; }
.gcard iframe { width: 100%; max-width: 720px; border: 1px dashed var(--rule); border-radius: 10px; background: var(--paper); }
.stage { position: fixed; top: 0; left: -10000px; width: 1080px; padding: 24px; background: #fff; }
.stage .block { font-size: 22px; }

/* ---------- call radar ---------- */
.radar { background: var(--card); border: 2px solid var(--kan); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.radar .rhead { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.alerts { display: grid; gap: 4px; }
.alert { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; padding: 6px 8px; border-radius: 6px; background: var(--now-soft); }
.alert.match { background: var(--paper); color: var(--ink-2); }
.alert.conflict { background: var(--rep-soft); }
.alert .asrc { font-weight: 900; }
.alert.check { background: #fff4cc; }
.checktag { background: #8a5a00; color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.rgroup { display: grid; gap: 4px; }
.rrows { display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; }
.rrow { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; background: var(--card); }
.rrow.fresh { border: 2px solid var(--kan); animation: fresh 1.2s ease-in-out 3; }
.rrow.split { border: 2px solid var(--rep); }
@keyframes fresh { 50% { background: #ffe9e2; } }
.rrhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.newtag { background: var(--kan); color: #fff; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 1px 8px; }
.rsrcs { display: flex; flex-wrap: wrap; gap: 6px; }
.rsrc { font-size: 13px; border-radius: 6px; padding: 3px 8px; background: var(--paper); border-inline-start: 4px solid var(--open); }
.rsrc.d { border-inline-start-color: var(--dem); } .rsrc.r { border-inline-start-color: var(--rep); } .rsrc.i { border-inline-start-color: var(--ind); }
.rsrc.check { background: #fff4cc; }
.rsrc.conflict { outline: 2px solid var(--rep); }
.rhealth { display: flex; flex-wrap: wrap; gap: 4px; }
button.tiny { min-height: 28px; padding: 2px 8px; font-size: 12px; }
.pendcount { background: var(--kan); color: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 900; text-decoration: none; }
.waitbar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 30; background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 700; min-height: 44px; }
/* Bigger targets for calling races at 3am */
.callbtn, .ebtns > button, .ebar button { min-height: 44px; padding: 8px 14px; }
.ebtns { gap: 10px; }
.pmeta a { padding: 8px 4px; }
.rgtitle { font-size: 13px; font-weight: 900; color: var(--ink-2); margin-top: 4px; }
.alert a { font-size: 13px; }
button.autoon { background: var(--kan); border-color: var(--kan); color: #fff; font-weight: 700; }
.tagok { color: var(--yes); font-weight: 700; } .tagbad { color: var(--rep); font-weight: 700; }

/* ---------- desk feed ---------- */
.deskgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.deskcol { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.deskhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.xform { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.xform input { flex: 1; min-width: 200px; border: 1px solid var(--rule); border-radius: 6px; padding: 5px 8px; background: var(--card); }
.ebar input[type="search"] { border: 1px solid var(--rule); border-radius: 6px; padding: 4px 8px; background: var(--card); min-width: 180px; }

/* ---------- briefs ---------- */
.brief { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; display: grid; gap: 14px; max-width: 820px; }
.brief h1 { font-size: 34px; font-weight: 900; line-height: 1; }
.brief .lede { font-size: 18px; color: var(--ink); }
.blive { background: var(--paper); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; }
.bsec { display: grid; gap: 6px; }
.bsec h3 { font-size: 15px; font-weight: 900; color: var(--kan); }
.bsec h2 { font-size: 20px; font-weight: 900; }
.bsec ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 3px; }
.bcands { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bcand { border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; }
.bname { display: flex; gap: 6px; align-items: center; }
.bsrc a { font-size: 13px; }
.bunv li { color: var(--rep); }
.bindex { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bindex li { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; }

/* ---------- editors' strip on the public page ---------- */
.edstrip { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; background: var(--navy); color: #fff; padding: 8px max(16px, env(safe-area-inset-right, 0px)); font-size: 14px; }
.edstrip[hidden] { display: none; }
.edstrip a { color: #fff; }
.edstrip .small { color: #9fb0d0; }
.edstrip .pending { background: var(--kan); color: #fff; border-radius: 999px; padding: 2px 10px; text-decoration: none; font-weight: 700; }