/* Exhibitor Best of the Best calculator — phone-first, self-contained (no Bootstrap). */

:root {
    --accent: #8b1e3f;
    --accent-soft: #f7e9ed;
    --ink: #212529;
    --muted: #6c757d;
    --line: #dee2e6;
    --bg: #f4f4f6;
    --card: #ffffff;
    --gold: #b8860b;
    --warn-bg: #fff3cd;
    --warn-ink: #664d03;
    --err: #b02a37;
    --tabbar-h: 3.4rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

#app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1rem); }

/* ── Header ─────────────────────────────────────────────────────────── */
.hdr {
    background: var(--accent);
    color: #fff;
    padding: calc(.6rem + env(safe-area-inset-top)) .9rem .6rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.hdr h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.hdr .sub { font-size: .78rem; opacity: .85; margin-top: .1rem; }
.hdr a { color: #fff; text-decoration: none; }
.hdr .offline {
    display: inline-block; background: rgba(255,255,255,.25); border-radius: .6rem;
    font-size: .7rem; padding: 0 .5rem; margin-left: .4rem; vertical-align: middle;
}

/* ── Bottom tab bar ─────────────────────────────────────────────────── */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    background: #fff;
    border-top: 1px solid var(--line);
    z-index: 30;
}
.tabbar button {
    flex: 1;
    border: 0;
    background: none;
    font: inherit;
    font-size: .8rem;
    color: var(--muted);
    padding: .35rem 0;
    cursor: pointer;
}
.tabbar button .ico { display: block; font-size: 1.15rem; line-height: 1.2; }
.tabbar button.active { color: var(--accent); font-weight: 600; }
.tabbar button:disabled { opacity: .35; cursor: default; }

/* ── Generic bits ───────────────────────────────────────────────────── */
.wrap { padding: .8rem .8rem 0; max-width: 60rem; margin: 0 auto; }
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .6rem;
    padding: .8rem .9rem;
    margin-bottom: .8rem;
}
.card h2 { margin: 0 0 .5rem; font-size: .95rem; }
.hint { color: var(--muted); font-size: .8rem; }
.note {
    background: var(--warn-bg); color: var(--warn-ink);
    border-radius: .5rem; padding: .5rem .7rem; font-size: .8rem; margin-bottom: .8rem;
}
button.btn {
    font: inherit;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: .5rem;
    padding: .55rem .9rem;
    cursor: pointer;
}
button.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.btn.sm { padding: .3rem .6rem; font-size: .85rem; }
.rowline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ── Install hint ───────────────────────────────────────────────────── */
.installhint { position: relative; padding-right: 2.2rem; }
.hintclose {
    position: absolute;
    top: .35rem; right: .35rem;
    border: 0; background: none;
    color: var(--muted);
    font: inherit; font-size: 1rem;
    padding: .25rem .45rem;
    cursor: pointer;
}

/* ── Show picker ────────────────────────────────────────────────────── */
.showitem {
    width: 100%;
    text-align: left;
    font: inherit;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: .6rem;
    padding: .7rem .9rem;
    margin-bottom: .55rem;
    cursor: pointer;
}
.showitem.sel { border-color: var(--accent); background: var(--accent-soft); }
.showitem .nm { font-weight: 600; font-size: .95rem; }
.showitem .dt { color: var(--muted); font-size: .8rem; margin-top: .15rem; }

.daypick { display: flex; gap: .5rem; flex-wrap: wrap; }
.daypick button {
    font: inherit; font-size: .9rem;
    border: 1px solid var(--line); background: #fff;
    border-radius: .5rem; padding: .5rem .8rem; cursor: pointer;
}
.daypick button.sel { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Rings screen ───────────────────────────────────────────────────── */
.ringcard { margin-bottom: .8rem; }
.ringcard .judges { color: var(--muted); font-size: .8rem; margin-bottom: .5rem; }
.finalchips { display: flex; flex-wrap: wrap; gap: .45rem; }
.fchip {
    font: inherit; font-size: .85rem;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 1rem;
    padding: .35rem .75rem;
    cursor: pointer;
}
.fchip.has { border-color: var(--accent); background: var(--accent-soft); }
.fchip .n { color: var(--muted); font-size: .75rem; }
.fchip.has .n { color: var(--accent); font-weight: 600; }

/* ── Final entry panel ──────────────────────────────────────────────── */
.backlink { background: none; border: 0; color: var(--accent); font: inherit; padding: .2rem 0; cursor: pointer; }
.placegrid { width: 100%; border-collapse: collapse; }
.placegrid td { padding: .22rem .3rem; }
.placegrid .pl { width: 2.4rem; text-align: right; color: var(--muted); white-space: nowrap; }
.placegrid .pts { width: 3.2rem; text-align: right; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.placegrid input {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: .4rem .5rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    text-align: center;
}
.placegrid input.dup { border-color: var(--err); background: #fdecee; }
.duplabel { color: var(--err); font-size: .8rem; margin-top: .3rem; }
.sizerow select { font: inherit; padding: .3rem .4rem; border-radius: .4rem; border: 1px solid var(--line); }

/* ── Class sheet ────────────────────────────────────────────────────── */
.classtabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.classtabs button {
    font: inherit; font-size: .85rem;
    border: 1px solid var(--line); background: #fff;
    border-radius: 1rem; padding: .35rem .8rem; cursor: pointer;
}
.classtabs button.sel { background: var(--accent); border-color: var(--accent); color: #fff; }

.bestboxes { display: flex; gap: .5rem; margin-bottom: .8rem; }
.bestbox {
    flex: 1;
    background: var(--card);
    border: 1.5px solid var(--gold);
    border-radius: .6rem;
    padding: .45rem .3rem;
    text-align: center;
}
.bestbox .lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bestbox .no { font-size: 1.25rem; font-weight: 700; }
.bestbox .pts { font-size: .72rem; color: var(--muted); }

.sheetwrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: .6rem; }
table.sheet { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.sheet th, table.sheet td { border: 1px solid var(--line); padding: .3rem .35rem; text-align: center; white-space: nowrap; }
table.sheet thead th { background: #f1f1f3; font-size: .72rem; }
table.sheet .entry { font-weight: 700; position: sticky; left: 0; background: var(--card); }
table.sheet thead th.entry { background: #f1f1f3; z-index: 2; }
table.sheet .tot { font-weight: 700; background: #fbf7ef; }
table.sheet .rk { color: var(--muted); font-size: .72rem; }
table.sheet tr.top1 .entry, table.sheet tr.top1 .tot { color: var(--accent); }
table.sheet tr.expandable { cursor: pointer; }
table.sheet tr.tied td { background: var(--warn-bg); }
.workrow td {
    text-align: left !important;
    font-size: .78rem;
    background: var(--accent-soft);
    white-space: normal !important;
}
.workrow ul { margin: .2rem 0 .2rem 1.1rem; padding: 0; }
.emptysheet { color: var(--muted); font-size: .85rem; padding: 1rem; text-align: center; }
.legend { color: var(--muted); font-size: .75rem; margin: .5rem 0 1rem; }