/* ============================================================
   ABCPOS — application additions on top of bytecraft.css

   bytecraft.css is the design system, copied verbatim from the
   bytecraft-theme skill. Everything here is specific to a point
   of sale: the till layout, the receipt, the landing page.

   Nothing below declares a colour. Every value is a token, which
   is what makes dark mode work for free and a rebrand a change to
   one token block rather than a search through the app.
   ============================================================ */

/* ── The till ──────────────────────────────────────────────── */

.till { display: grid; gap: 16px; grid-template-columns: 1fr 380px; align-items: start; }
@media (max-width: 1100px) { .till { grid-template-columns: 1fr; } }

.pick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pick {
    background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
    padding: 13px; cursor: pointer; text-align: left;
    font-family: 'Nunito', sans-serif; transition: all .14s ease;
    display: flex; flex-direction: column; gap: 6px; min-height: 92px;
}
.pick:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.pick:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pick .nm { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.pick .pr { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--brand-deep); margin-top: auto; }
.pick .st { font-size: 11px; font-weight: 700; color: var(--ink-soft); }

/* Sticky: a cashier scrolling the catalogue must never lose sight
   of the running total. */
.basket { position: sticky; top: 84px; }

.bk-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bk-line:last-of-type { border-bottom: 0; }
.bk-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.bk-nm small { display: block; font-weight: 700; color: var(--ink-soft); font-size: 11.5px; }
.bk-amt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; }

.qty { display: flex; align-items: center; gap: 4px; }
.qty button {
    width: 26px; height: 26px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--surface2); color: var(--ink); cursor: pointer;
    font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.qty button:hover { border-color: var(--brand); color: var(--brand-deep); }
.qty span { min-width: 26px; text-align: center; font-weight: 800; font-size: 13px; }

.totals { border-top: 1.5px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.totals .t { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.totals .t.grand {
    font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600;
    color: var(--ink); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line);
}
.totals .t.grand span:last-child { color: var(--brand-deep); }

.pay-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.pay, .biz {
    border: 1.5px solid var(--line); background: var(--card); border-radius: 14px;
    padding: 10px 6px; cursor: pointer; text-align: center;
    font-family: 'Nunito', sans-serif; font-size: 11.5px; font-weight: 800; color: var(--ink-soft);
    transition: all .14s ease;
}
.pay i, .biz i { display: block; font-size: 15px; margin-bottom: 5px; }
.pay:hover, .biz:hover { border-color: var(--brand); color: var(--ink); }
.pay.on, .biz.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }

.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

/* ── Plans ─────────────────────────────────────────────────── */

.plan-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan-price { font-family: 'Poppins', sans-serif; font-size: 27px; font-weight: 600; color: var(--ink); }
.plan-price small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.plan-feat { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.plan-feat li { padding: 5px 0; display: flex; align-items: center; gap: 9px; }
.plan-feat i { color: var(--mint-ink); font-size: 11px; }
.plan-card.current { border-color: var(--brand); box-shadow: var(--brand-glow); }

/* ── Licence banner ────────────────────────────────────────── */

.lic-banner {
    border-radius: var(--r-sm); padding: 13px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700;
    border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber-ink);
}
.lic-banner.hard { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }

/* ============================================================
   Thermal receipt

   Monochrome by design. This is ink on white paper, so none of
   the theme tokens apply — a yellow header prints as grey mud,
   and a dark-mode receipt prints as a solid black rectangle.

   Widths are in millimetres because that is how till rolls are
   sold. 80mm gives ~48 monospace characters, 58mm gives ~32.
   ============================================================ */

.receipt {
    background: #fff; color: #000;
    font-family: 'Geist Mono', ui-monospace, 'Courier New', monospace;
    font-size: 11.5px; line-height: 1.55;
    padding: 10px 12px; margin: 0 auto;
    width: 302px;                 /* 80mm at 96dpi, minus printer margins */
    border: 1px solid var(--line); border-radius: 6px;
}
.receipt.w58 { width: 219px; font-size: 10.5px; }

.receipt .c { text-align: center; }
.receipt .b { font-weight: 700; }
.receipt .lg { font-size: 14px; font-weight: 700; }
.receipt .rule { border-top: 1px dashed #000; margin: 6px 0; opacity: .6; }
.receipt .l { display: flex; justify-content: space-between; gap: 10px; }
.receipt .l span:last-child { white-space: nowrap; }
.receipt .item { margin-top: 3px; }
.receipt .item .nm { word-break: break-word; }
.receipt .sub { padding-left: 10px; opacity: .8; }
.receipt .tot { font-size: 13px; font-weight: 700; }
.receipt .barcode {
    font-family: 'Libre Barcode 39', monospace; font-size: 30px;
    text-align: center; letter-spacing: 0; margin-top: 6px;
}

/* The preview frame on screen. Not printed. */
.receipt-stage {
    background: var(--surface2); border-radius: var(--r-sm);
    padding: 22px; display: flex; justify-content: center;
    overflow-x: auto;
}

/* ── Printing ──────────────────────────────────────────────────
   Hiding a list of things is the wrong way round. Naming what to
   hide means every screen added later prints its whole self until
   somebody notices — which is exactly what happened: printing from
   the receipt designer produced two pages, the first being the
   configuration form.

   So: hide everything, then walk the receipt's ancestors back up
   and re-show only that chain. Anything not on it never prints,
   whatever it is or when it was added.
   ────────────────────────────────────────────────────────────── */
/* The receipt to be printed is cloned into this, a direct child of body.
   Hidden on screen; the only thing shown when printing. */
#printRoot { display: none; }

@media print {
    body { background: #fff !important; }

    /* display, not visibility. `visibility: hidden` keeps every box in the
       layout, so the page stays as tall as the screen it came from and the
       printer ejects a second, blank page — on a continuous roll that is
       real paper out of the machine after every sale.

       Only direct children of body are named, so nothing depends on how
       deeply the receipt happens to be nested today. */
    body > *      { display: none !important; }
    body > #printRoot { display: block !important; }

    #printRoot .receipt {
        border: 0 !important; border-radius: 0 !important;
        box-shadow: none !important; padding: 0 !important;
        margin: 0 !important; width: auto !important; max-width: 100%;
    }

    /* Roll paper is continuous: height auto. Naming the width stops the
       driver padding it out to A4. The exact width is written at print
       time by applyPaperSize(), because @page cannot read a variable. */
    @page { size: 80mm auto; margin: 3mm; }
}

/* ============================================================
   Landing page
   ============================================================ */

.lp-nav {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 20px;
    padding: 14px 30px; background: var(--topbar-bg); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.lp-nav .links { display: flex; gap: 22px; margin-left: auto; }

/* Scoped to .links deliberately. A bare `.lp-nav a` is specificity 0,0,1,1
   and beats `.btn-primary` at 0,0,1,0 — so it repaints the call-to-action
   button's label in the muted nav colour, and the result is amber text on
   an amber fill. The buttons in this bar are anchors too. */
.lp-nav .links a {
    color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 700;
}
.lp-nav .links a:hover { color: var(--ink); }
@media (max-width: 820px) { .lp-nav .links { display: none; } }

.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Left-aligned, as on bytecraft.live — a centred hero reads as a
   template, an aligned one reads as a product. */
.lp-hero { padding: 74px 0 54px; max-width: 680px; }

.lp-eyebrow {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 12px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--brand-deep);
    margin-bottom: 22px;
}
.lp-hero h1 {
    font-size: clamp(38px, 7vw, 62px); font-weight: 700;
    line-height: 1.02; letter-spacing: -.025em; margin-bottom: 20px;
}
/* Italic, not just coloured: the reference leans on the shape as much
   as the hue, and italic survives being read in greyscale. */
.lp-hero h1 em { font-style: italic; color: var(--brand-deep); }

.lp-hero p.sub {
    font-size: 17px; font-weight: 600; color: var(--ink-soft);
    max-width: 520px; margin: 0 0 28px; line-height: 1.62;
}
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.lp-stats {
    display: flex; gap: 46px; flex-wrap: wrap;
    margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}
.lp-stats b {
    display: block; font-family: 'Poppins', sans-serif;
    font-size: 26px; font-weight: 600; color: var(--brand-deep); line-height: 1.1;
}
.lp-stats span {
    display: block; margin-top: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}

.lp-section { padding: 54px 0; border-top: 1px solid var(--line); }
.lp-section h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 600; margin-bottom: 12px; letter-spacing: -.01em; }
.lp-section > p.lead { font-size: 15.5px; font-weight: 600; color: var(--ink-soft); max-width: 640px; margin-bottom: 30px; line-height: 1.65; }

.lp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-feature { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.lp-feature .ic {
    width: 42px; height: 42px; border-radius: 14px; margin-bottom: 14px;
    background: var(--brand-tint); color: var(--brand-deep);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.lp-feature h3 { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.lp-feature p { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; }

/* Numbered steps, as on the reference site. */
.lp-step { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.lp-step:last-child { border-bottom: 0; }
.lp-step .n {
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700;
    color: var(--brand-deep); background: var(--brand-tint);
    width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.lp-step h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.lp-step p { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; }

.lp-split { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .lp-split { grid-template-columns: 1fr; } }

.lp-foot {
    border-top: 1px solid var(--line); padding: 34px 0 44px;
    font-size: 13px; font-weight: 600; color: var(--ink-soft);
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* Status pips used in the offline story. */
.pip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; }
.pip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.pip.warn::before { background: var(--amber); }
.pip.off::before  { background: var(--red); }

/* ── Admin console extras ──────────────────────────────────── */

.key-code {
    font-family: 'Geist Mono', ui-monospace, monospace; font-size: 19px; font-weight: 700;
    letter-spacing: .06em; color: var(--brand-deep);
    background: var(--brand-tint); border: 1px dashed var(--brand);
    border-radius: var(--r-sm); padding: 16px; text-align: center; word-break: break-all;
}

.perm-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.perm {
    display: flex; align-items: center; gap: 9px; padding: 8px 11px;
    border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--card);
}
.perm:hover { border-color: var(--brand); color: var(--ink); }
.perm.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }
.perm input { display: none; }