/* =========================================================================
   GroLayer Commerce - product UI mockups
   Loaded after lms.css, only on the commerce landing page.

   These are drawn interfaces, not screenshots: real-looking panels showing the
   product doing its job. They render LIGHT on the page's dark ground, because
   that is what the actual admin looks like and the contrast does the selling.

   Every panel is built from the same small kit (window, card, pill, avatar,
   swatch) so a new mockup is markup, not new CSS.
   ========================================================================= */

.mock {
    --m-ink: #0B1B33;
    --m-mute: #64748B;
    --m-line: #E4E9F2;
    --m-soft: #F6F8FC;
    --m-navy: #123A7A;
    --m-cyan: #00B8D4;

    position: relative;
    border-radius: 20px;
    padding: 26px;
    background:
        linear-gradient(#EEF2F9 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, #EEF2F9 1px, transparent 1px) 0 0 / 26px 26px,
        #FBFCFE;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85);
}

/* the stage the panels sit on; overflow stays visible so a floating card can
   break the edge the way it does when you actually drag one */
.mock-stage { position: relative; }

/* ---------- window ---------- */
.win {
    position: relative;
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px -18px rgba(11, 27, 51, .3);
    overflow: hidden;
}
.win-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--m-line);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--m-ink);
}
.win-head i.ph { font-size: 17px; color: var(--m-navy); }
.win-head .spacer { margin-left: auto; }
.win-body { padding: 14px 16px 16px; }

/* a filled panel, for the one that should read as "selected" */
.win.solid { background: var(--m-navy); border-color: var(--m-navy); }
.win.solid .win-head { color: #fff; border-bottom-color: rgba(255, 255, 255, .16); }
.win.solid .win-head i.ph { color: #fff; }

/* ---------- rows, cards, cells ---------- */
.mrow {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--m-line);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13.5px;
    color: var(--m-ink);
}
.mrow:first-of-type { border-top: 0; }
/* .mhead, not .head: landing.css already owns a bare `.head` (the section
   heading block) and its 48px bottom margin was pushing a 77px hole under
   every column label inside these panels. */
.mrow.mhead {
    border-top: 0;
    padding: 4px 0 9px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m-mute);
}
.mrow b { font-weight: 600; }
.mrow .mute { color: var(--m-mute); }
.mrow .num { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; }

/* a row the panel is drawing attention to */
.mrow.flag { background: #FFF7ED; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; border-top-color: transparent; }

.mcard {
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 11px;
    padding: 11px 13px;
    font-family: "IBM Plex Sans", sans-serif;
}
.mcard + .mcard { margin-top: 9px; }
.mcard b { display: block; font-size: 13.5px; font-weight: 600; color: var(--m-ink); letter-spacing: -.01em; }
/* the child combinator matters: an unscoped `.mcard span` also matches the
   pill sitting next to the title, and beats `.pill` on specificity */
.mcard > span { display: block; margin-top: 3px; font-size: 12px; color: var(--m-mute); }
.mcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* ---------- pills ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.pill i.ph { font-size: 12px; }
.pill.ok   { background: #E7F7EF; color: #12734E; }
.pill.warn { background: #FFF1DC; color: #8A5A08; }
.pill.bad  { background: #FDECEA; color: #A32A18; }
.pill.info { background: #E8F0FE; color: #1B4CA8; }
.pill.cyan { background: #E1F7FB; color: #06707F; }
.pill.grey { background: #EFF2F7; color: #53627A; }

/* ---------- avatars ---------- */
.av {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    background: var(--m-navy);
    box-shadow: 0 0 0 2px #fff;
}
.av.c2 { background: #00A0B8; }
.av.c3 { background: #E08A3C; }
.av-stack { display: flex; }
.av-stack .av + .av { margin-left: -5px; }

/* ---------- colour / size swatches ---------- */
.sw-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sw {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(11, 27, 51, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.sw.on { outline: 2px solid var(--m-navy); outline-offset: 2px; }
.sz {
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--m-line);
    background: #fff;
    display: grid;
    place-items: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--m-ink);
}
.sz.on { background: var(--m-navy); border-color: var(--m-navy); color: #fff; }
.sz.off { color: #AEB8C8; text-decoration: line-through; }

/* ---------- the floating, dragged card ---------- */
.float {
    position: absolute;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 22px 44px -16px rgba(11, 27, 51, .42);
    transform: rotate(-3deg);
    font-family: "IBM Plex Sans", sans-serif;
}
.float > b { display: block; font-size: 13.5px; font-weight: 600; color: var(--m-ink); }
/* same trap as .mcard: `.float span` was repainting the avatars slate-grey at
   12px, which is why their initials vanished into the disc */
.float > span { display: block; margin-top: 3px; font-size: 12px; color: var(--m-mute); }
.float-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }

/* the dashed target the card is heading for */
.drop {
    border: 1.5px dashed #9CB4DB;
    background: #F3F7FF;
    border-radius: 11px;
    padding: 14px 12px;
    text-align: center;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #2A5FB8;
}

/* The curved arrow between a dragged card and its target. Given an explicit
   pixel box rather than inset:0 - an SVG with a viewBox and no height resolves
   to its intrinsic square, which stretched this to 1088x1088 and put the curve
   somewhere off the page entirely. */
.mock-arrow {
    position: absolute;
    z-index: 4;
    width: 132px;
    height: 96px;
    pointer-events: none;
    overflow: visible;
}
.mock-arrow path { fill: none; stroke: #2A5FB8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- layouts used by the mockups ---------- */
.mock-two { display: grid; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.vgrid .mrow { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.srow .mrow { grid-template-columns: 1.6fr 64px 54px; }
.srow .mrow > :nth-child(2),
.srow .mrow > :nth-child(3) { text-align: right; }

.trow .mrow { grid-template-columns: 1.5fr 104px 52px; }
.trow .mrow > :nth-child(3) { text-align: right; }
.frow .mrow { grid-template-columns: 1.3fr 132px 66px; }
.frow .mrow > :nth-child(3) { text-align: right; }
.arow .mrow { grid-template-columns: 1fr auto; }

/* a grid item stretches by default, which turned every status pill in a table
   cell into a wide lozenge; a pill should be as wide as its own text */
.mrow > .pill { justify-self: start; }
.srow .mrow > .pill { justify-self: end; }

/* ---------- stat tiles (dashboard) ---------- */
.mtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mtile { background: #fff; border: 1px solid var(--m-line); border-radius: 11px; padding: 11px 12px; }
.mtile > span { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--m-mute); }
.mtile > b { display: block; margin-top: 5px; font-family: "Sora", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: var(--m-ink); }
.mtile em { font-style: normal; font-family: "IBM Plex Sans", sans-serif; font-size: 11px; font-weight: 600; color: #12734E; }

/* ---------- bar chart ----------
   Bars are spans, not <i>: every `i` on this page belongs to the icon font. */
.bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; align-items: end; height: 96px; }
.bars span { display: block; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #4C82E0, #1A4B98); }
.bars span.hi { background: linear-gradient(180deg, #22C9E4, #00A0B8); }
.bars-x { display: flex; justify-content: space-between; margin-top: 8px; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--m-mute); }

/* ---------- choice list (checkout methods) ---------- */
.opts { display: grid; gap: 7px; }
.opt {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: #fff;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
    color: var(--m-ink);
}
.opt .dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #C5CFDF; }
.opt.on { border-color: var(--m-navy); box-shadow: 0 0 0 2px rgba(18, 58, 122, .11); }
.opt.on .dot { border-color: var(--m-navy); background: radial-gradient(circle, var(--m-navy) 40%, #fff 44%); }
.opt b { font-weight: 600; }

/* ---------- phone frame (storefront) ----------
   A real bezel, not a rounded card: the dark shell plus the speaker slot is
   what makes a drawn screen read as a phone at a glance. */
.phone {
    width: 252px;
    margin: 0 auto;
    padding: 7px 7px 9px;
    border-radius: 34px;
    background: linear-gradient(180deg, #16294A, #0C1A33);
    box-shadow: 0 30px 60px -24px rgba(6, 16, 34, .8), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.phone-notch { display: block; width: 58px; height: 4px; margin: 3px auto 7px; border-radius: 999px; background: rgba(255, 255, 255, .34); }
.phone-in { border-radius: 27px; background: #fff; overflow: hidden; }
.phone-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--m-line); font-family: "IBM Plex Sans", sans-serif; font-size: 11.5px; font-weight: 600; color: var(--m-ink); }
.phone-top i.ph { font-size: 14px; color: var(--m-navy); }
.phone-top .spacer { margin-left: auto; }
.phone-body { padding: 11px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ptile { border: 1px solid var(--m-line); border-radius: 10px; overflow: hidden; font-family: "IBM Plex Sans", sans-serif; }
/* Tinted from the same swatches the variations panel uses, with a garment
   shaped panel inside - a flat grey box reads as a missing image. */
.pt-img { height: 58px; position: relative; background: linear-gradient(135deg, #E7EDF6, #F6F8FC); }
.pt-img::after { content: ""; position: absolute; inset: 10px 32% 5px; border-radius: 8px 8px 4px 4px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .05); }
.pt-img.c1 { background: linear-gradient(135deg, #F3EFE6, #E5DECD); }
.pt-img.c2 { background: linear-gradient(135deg, #D6E2D1, #BFD0B9); }
.pt-img.c3 { background: linear-gradient(135deg, #CFDFEE, #B6CCE3); }
.pt-img.c4 { background: linear-gradient(135deg, #EED6D6, #E0BEBE); }
.ptile > div { padding: 7px 8px 9px; }
.ptile > div > b { display: block; font-size: 11px; font-weight: 600; color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* child combinator again: the price line holds two nested spans (was / now)
   and an unscoped `.ptile span` would stack them on separate lines */
.ptile > div > span { display: block; margin-top: 3px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--m-ink); }
.was { text-decoration: line-through; color: var(--m-mute); margin-right: 5px; }
.now { color: #A32A18; font-weight: 700; }

/* ---------- countdown ---------- */
.cd { display: flex; gap: 5px; align-items: center; }
.cd b { font-family: "IBM Plex Mono", monospace; font-size: 14.5px; font-weight: 700; color: #fff; background: var(--m-navy); border-radius: 7px; padding: 6px 8px; }
.cd em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; color: var(--m-mute); margin: 0 2px 0 0; }
.cd i.ph { font-size: 13px; color: var(--m-mute); }

/* ---------- kanban board (task management) ---------- */
.kb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kb-col { background: var(--m-soft); border: 1px solid var(--m-line); border-radius: 10px; padding: 9px; min-width: 0; }
.kb-h {
    display: flex; align-items: center; justify-content: space-between;
    margin: 2px 2px 9px;
    font-family: "IBM Plex Sans", sans-serif; font-size: 12px; font-weight: 600; color: var(--m-ink);
}
.kb-h > span { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; color: var(--m-mute); }
.kb-h .dotc { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; background: #9CB4DB; }
.kb .mcard { padding: 9px 10px; }
.kb .mcard + .mcard { margin-top: 7px; }
.kb .mcard > b { font-size: 12.5px; }
.kb-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.kb-meta .num { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--m-mute); }
.kb .av { width: 20px; height: 20px; font-size: 9.5px; }
.kb .mcard.lift { box-shadow: 0 12px 26px -14px rgba(11, 27, 51, .45); border-color: #9CB4DB; }

/* ---------- gantt strip (project timeline) ---------- */
.gantt-days { display: grid; grid-template-columns: 116px repeat(7, 1fr); margin-bottom: 4px; font-family: "IBM Plex Mono", monospace; font-size: 9.5px; color: var(--m-mute); letter-spacing: .06em; }
.gantt-days span:first-child { grid-column: 1; }
.grow {
    display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0; align-items: center;
    padding: 8px 0; border-top: 1px solid var(--m-line);
    font-family: "IBM Plex Sans", sans-serif; font-size: 12.5px; color: var(--m-ink);
}
.grow > b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.track {
    position: relative; height: 14px; border-radius: 3px;
    background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--m-line) calc(100% / 7 - 1px) calc(100% / 7));
}
.bar { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; background: #4C82E0; }
.bar.done { background: #3FA87C; }
.bar.late { background: #E08A3C; }
.bar.now { background: var(--m-cyan); }
.ms { position: absolute; top: 2px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--m-navy); border: 2px solid #fff; }

/* ---------- meter (budget, progress) ---------- */
.meter { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--m-soft); border: 1px solid var(--m-line); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: #4C82E0; }
.meter > span.warn { background: #E08A3C; }
.meter > span.ok { background: #3FA87C; }

.mock-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.mock-note i.ph { font-size: 14px; color: var(--cyan); }

/* ---------- page-level, not part of the mock kit ----------
   The two direct lines under the Talk to sales card. */
.sales-reach { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.sales-reach a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14.5px;
    color: var(--txt-2);
    text-decoration: none;
    transition: color .2s var(--ease);
}
.sales-reach a:hover { color: #fff; }
.sales-reach i.ph { font-size: 17px; color: var(--cyan); }

/* ---------- phones ----------
   No sideways scroll here. A marketing graphic nobody swipes is a graphic
   nobody sees, so instead of a 620px stage on a 354px screen the panels stack,
   the type steps down one notch, and each table drops the one column it can
   afford to lose (SKU). Everything stays on screen. */
@media (min-width: 900px) {
    .mock-two { grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
}

/* 899, not 767: the panels go one-per-row the moment the two-column rule stops
   applying, and a dragged card aimed sideways at a panel that is now underneath
   it points at nothing. */
@media (max-width: 899px) {
    /* room under the drop zone for the floating card, so it can still sit at
       an angle over the grid paper without covering the label it points at */
    .mock-stage { padding-bottom: 96px; }
    .float { left: auto !important; right: 6px; bottom: 2px !important; top: auto !important; }
    .mock-arrow { display: none; }
}

@media (max-width: 767px) {
    .mock { padding: 15px 13px 18px; border-radius: 16px; }
    .mock-two { gap: 12px; }

    .win-head { padding: 11px 13px; font-size: 12.5px; gap: 8px; }
    .win-head i.ph { font-size: 16px; }
    .win-body { padding: 12px 13px 14px; }

    .mrow { font-size: 12.5px; gap: 8px; padding: 9px 0; }
    .mrow.mhead { font-size: 9.5px; letter-spacing: .08em; padding-bottom: 7px; }
    .mrow .num { font-size: 11.5px; }
    .vgrid .mrow { grid-template-columns: 1.3fr .85fr .5fr; }
    .vgrid .mrow > :nth-child(4) { display: none; }
    .srow .mrow { grid-template-columns: 1.5fr 50px 38px; }
    /* The last column holds money, and a 9-character amount needs ~62px of
       mono. At 42px it was being clipped by the window's own overflow. */
    .trow .mrow { grid-template-columns: 1.05fr 82px 66px; }
    .frow .mrow { grid-template-columns: 1fr 94px 66px; }

    /* four columns cannot share 300px; two by two keeps every card readable */
    .kb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kb-col { padding: 7px; }
    .kb .mcard { padding: 8px; }
    /* at 106px a card holds a pill and an avatar, not three things */
    .kb-meta .num { display: none; }
    .win-head .av-stack { display: none; }
    .float-row { flex-wrap: wrap; row-gap: 6px; }
    .gantt-days, .grow { grid-template-columns: 84px minmax(0, 1fr); }
    .gantt-days { grid-template-columns: 84px repeat(7, 1fr); }
    .grow { font-size: 11.5px; }

    .mtiles { gap: 8px; }
    .mtile > b { font-size: 17px; }
    /* gap only - the bar heights are absolute, so shrinking the box just
       pushes the tallest bars out over the date labels */
    .bars { gap: 4px; }
    .opt { padding: 9px 10px; font-size: 12px; gap: 8px; }
    .phone { width: 100%; max-width: 250px; }

    .mcard { padding: 10px 11px; }
    .mcard b { font-size: 12.5px; }
    .mcard > span { font-size: 11.5px; }
    .pill { font-size: 10.5px; padding: 2px 8px; }

    .sw { width: 24px; height: 24px; }
    .sz { min-width: 28px; height: 24px; padding: 0 7px; font-size: 11.5px; }

    /* kept inside the frame on a phone - a card hanging past the edge is what
       turns into a page-wide horizontal scrollbar */
    .float { width: 190px !important; padding: 10px 11px; }
    .float > b { font-size: 12.5px; }
    .float > span { font-size: 11px; }
    .float-row { margin-top: 8px; gap: 8px; }

    .drop { padding: 13px 10px; font-size: 11.5px; }
    .mock-note { margin-top: 12px; font-size: 9.5px; letter-spacing: .08em; }
}