/* Shared browser frame + abstract app-shell mockup styling.
   Used by all three landing directions (filled by mock.js). */

/* Browser frame */
.frame { background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.frame__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); }
.frame__url { margin-left: 10px; font-size: 12px; color: var(--slate-400); font-family: var(--font-mono); }

/* App shell */
.app { display: grid; grid-template-columns: 178px 1fr; min-height: 420px; background: #fff; font-size: 12px; color: var(--ink); line-height: 1.4; }
.app__side { background: var(--shell); padding: 11px; display: flex; flex-direction: column; gap: 9px; }
.app .tile { background: #fff; border-radius: 9px; box-shadow: var(--shadow-tile); padding: 8px 9px; }
.tile--brand { display: flex; align-items: center; gap: 8px; }
.tile--brand .m { width: 22px; height: 22px; border-radius: 6px; background: var(--indigo); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-mark); }
.tile--brand .m svg { width: 13px; height: 13px; }
.tile--brand b { font-size: 11.5px; letter-spacing: -.01em; }
.tile--find { display: flex; align-items: center; gap: 7px; color: var(--slate-400); font-size: 11px; }
.tile--find .ico { width: 12px; height: 12px; display: grid; flex: none; }
.tile--find .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 9px; background: var(--slate-100); padding: 1px 5px; border-radius: 4px; color: var(--slate-500); }
.sec-label { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--slate-400); padding: 6px 9px 3px; }
.nav-i { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; color: var(--slate-500); font-size: 11.5px; font-weight: 500; position: relative; }
.nav-i .ico { width: 13px; height: 13px; flex: none; }
.nav-i .cnt { margin-left: auto; font-size: 10px; font-weight: 600; background: rgba(15,23,42,.06); color: var(--slate-500); padding: 0 6px; border-radius: 8px; }
.nav-i.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-tile); }
.nav-i.on .ico { color: var(--indigo); }
.nav-i.on::before { content:""; position: absolute; left: -3px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--indigo); }
.nav-i.on .cnt { color: var(--indigo); background: rgba(99,102,241,.12); }
.app__main { padding: 16px; overflow: hidden; }
.app__h { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.app__hs { font-size: 11px; color: var(--slate-500); margin-top: 2px; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 13px; }
.stat { border: 1px solid var(--slate-200); border-radius: 9px; padding: 10px; }
.stat .k { font-size: 9.5px; color: var(--slate-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat .v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
.stat .d { font-size: 9.5px; color: var(--status-green-fg); margin-top: 2px; font-weight: 600; }
.tbl { border: 1px solid var(--slate-200); border-radius: 9px; margin-top: 12px; overflow: hidden; }
.tbl__h { display: grid; grid-template-columns: 1.5fr 1fr .9fr; gap: 8px; padding: 8px 11px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.tbl__r { display: grid; grid-template-columns: 1.5fr 1fr .9fr; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--slate-100); align-items: center; font-size: 11px; }
.tbl__r:last-child { border-bottom: none; }
.tbl__r .ev { font-weight: 600; }
.tbl__r .mt { color: var(--slate-500); font-size: 10px; }
.pill { font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; justify-self: start; }
.pill.b { background: var(--status-blue-bg); color: var(--status-blue-fg); }
.pill.g { background: var(--status-green-bg); color: var(--status-green-fg); }
.pill.y { background: var(--status-yellow-bg); color: var(--status-yellow-fg); }
.pill.p { background: var(--status-purple-bg); color: var(--status-purple-fg); }
.pill.gr { background: var(--status-gray-bg); color: var(--status-gray-fg); }

/* ── Events-view chrome (matches real product layout) ───────── */
.app__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.app__title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.app__sub { font-size: 10.5px; color: var(--slate-500); margin-top: 2px; }
.app__btns { display: flex; gap: 6px; flex: none; }
.mbtn { font-size: 10px; font-weight: 600; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700); display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.mbtn svg { width: 11px; height: 11px; }
.mbtn--primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.mstats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 13px; }
.mstat { border: 1px solid var(--slate-200); border-radius: 9px; padding: 9px 10px; min-width: 0; }
.mstat__k { font-size: 8.5px; color: var(--slate-500); font-weight: 600; }
.mstat__kp { display: inline-block; font-size: 8px; font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.mstat__v { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-top: 7px; }
.mstat__a { font-size: 8.5px; color: var(--status-green-fg); font-weight: 600; margin-top: 1px; }
.mtabs { display: flex; gap: 15px; margin-top: 15px; border-bottom: 1px solid var(--slate-200); }
.mtab { font-size: 10.5px; font-weight: 600; color: var(--slate-500); padding-bottom: 8px; display: flex; gap: 5px; align-items: center; }
.mtab .c { background: var(--slate-100); border-radius: 6px; padding: 0 5px; font-size: 8.5px; }
.mtab.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.mtab.on .c { background: var(--ink); color: #fff; }
.mtool { display: flex; gap: 7px; align-items: center; margin-top: 12px; }
.msearch { flex: 1; border: 1px solid var(--slate-200); border-radius: 7px; padding: 6px 9px; font-size: 10px; color: var(--slate-400); display: flex; gap: 6px; align-items: center; min-width: 0; }
.msel { border: 1px solid var(--slate-200); border-radius: 7px; padding: 6px 9px; font-size: 10px; color: var(--slate-600); white-space: nowrap; }
.mtoggle { margin-left: auto; display: flex; border: 1px solid var(--slate-200); border-radius: 7px; overflow: hidden; flex: none; }
.mtoggle span { font-size: 9.5px; padding: 6px 8px; color: var(--slate-500); }
.mtoggle span.on { background: var(--slate-100); color: var(--ink); font-weight: 600; }
.etbl { margin-top: 12px; }
.etbl__h, .etbl__r { display: grid; grid-template-columns: 1.7fr .8fr .8fr .8fr .5fr .7fr; gap: 8px; align-items: center; }
.etbl__h { padding: 7px 4px; border-bottom: 1px solid var(--slate-200); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.etbl__r { padding: 11px 4px; border-bottom: 1px solid var(--slate-100); font-size: 10.5px; }
.etbl__ev { font-weight: 600; }
.etbl__id { font-size: 8.5px; color: var(--slate-400); font-family: var(--font-mono); margin-top: 2px; letter-spacing: -.02em; }
.etbl__mt { color: var(--slate-500); }
.etbl__ct { display: inline-flex; align-items: center; gap: 5px; }
.etbl__av { width: 16px; height: 16px; border-radius: 50%; background: var(--slate-200); color: var(--slate-500); font-size: 7.5px; font-weight: 700; display: grid; place-items: center; }
.eredact { display: inline-block; height: 7px; border-radius: 3px; background: var(--slate-200); vertical-align: middle; }
.efoot { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; font-size: 9.5px; color: var(--slate-500); }
.epage { display: flex; gap: 5px; }
.epage span { width: 18px; height: 18px; border: 1px solid var(--slate-200); border-radius: 5px; display: grid; place-items: center; color: var(--slate-400); }

/* ── Event-plan view (auto-calculated prep plan) ───────────── */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pep { font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.pdraft { font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--status-gray-bg); color: var(--status-gray-fg); }
.pai { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink); }
.pai .box { width: 14px; height: 14px; border-radius: 4px; background: var(--indigo); display: grid; place-items: center; }
.pai .box svg { width: 9px; height: 9px; color: #fff; }
.psub { font-size: 10px; color: var(--slate-500); margin-top: 3px; }
.ptbl { margin-top: 14px; }
.ptbl__h, .ptbl__r { display: grid; grid-template-columns: 1.9fr .6fr .7fr .55fr .75fr; gap: 8px; align-items: center; }
.ptbl__h { padding: 7px 6px; border-bottom: 1px solid var(--slate-200); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.ptbl__h .r, .ptbl__r .r { text-align: right; }
.pcat { display: flex; align-items: center; gap: 8px; padding: 7px 6px; background: var(--slate-50); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); border-bottom: 1px solid var(--slate-100); }
.pcat .n { color: var(--slate-400); font-weight: 600; }
.ptbl__r { padding: 9px 6px; border-bottom: 1px solid var(--slate-100); font-size: 10px; }
.pitem { display: flex; align-items: center; gap: 9px; }
.pchk { width: 11px; height: 11px; border: 1.5px solid var(--slate-300); border-radius: 3px; flex: none; }
.psrc { color: var(--slate-500); }
.pqty { font-weight: 700; text-align: right; }
.peff { text-align: right; color: var(--slate-600); }
.peff .u { color: var(--slate-400); }
.pdash { color: var(--slate-300); text-align: right; }