`mockups/assets/base.css`

83 lines
/* RENTV redesign — SHARED chrome + numbering + pick-tray.
   Every layout (L01..L10) includes this. It owns ONLY the pieces Steve locked
   globally: hamburger (upper-left, all tabs+data), user icon (upper-right, sign-in),
   the element-number badges, and the "My Picks" tray. Body layout is per-file. */
*{box-sizing:border-box}
:root{
  --rentv-red:#c8102e;--ink:#14171a;--sub:#5b636b;--line:#e4e7ea;--wash:#f5f6f8;
  --up:#0f8a4d;--dn:#c8102e;--z-chrome:9000;--z-drawer:9500;--z-tray:9200;--z-eln:8000;
}
html,body{margin:0}
/* ── top chrome bar (identical in all 10) ── */
.rv-top{position:sticky;top:0;z-index:var(--z-chrome);display:flex;align-items:center;
  justify-content:space-between;height:52px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line)}
.rv-top.dark{background:#0b0e12;border-bottom:1px solid #232a32}
.rv-burger{display:inline-flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;
  font:inherit;color:inherit;padding:6px 8px;border-radius:8px}
.rv-burger:hover{background:rgba(0,0,0,.06)}
.rv-top.dark .rv-burger:hover{background:rgba(255,255,255,.08)}
.rv-burger svg{display:block}
.rv-burger .lbl{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.rv-brand{position:absolute;left:50%;transform:translateX(-50%);font-family:'Playfair Display',Georgia,serif;
  font-weight:800;font-size:24px;letter-spacing:.02em;color:inherit;text-decoration:none}
.rv-brand b{color:var(--rentv-red)}
.rv-user{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.rv-user:hover{border-color:var(--rentv-red);color:var(--rentv-red)}
.rv-top.dark .rv-user{background:#11161c;border-color:#2a323b;color:#cfd6dd}
/* ── hamburger drawer: ALL tabs + ALL data points ── */
.rv-scrim{position:fixed;inset:0;background:rgba(6,9,12,.5);opacity:0;pointer-events:none;
  transition:opacity .22s;z-index:var(--z-drawer)}
.rv-scrim.open{opacity:1;pointer-events:auto}
.rv-drawer{position:fixed;top:0;left:0;height:100%;width:360px;max-width:88vw;background:#0b0e12;color:#e7ecf1;
  transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);z-index:calc(var(--z-drawer) + 1);
  display:flex;flex-direction:column;overflow-y:auto;box-shadow:2px 0 40px rgba(0,0,0,.4)}
.rv-drawer.open{transform:none}
.rv-drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #1c232b}
.rv-drawer .dh .w{font-family:Georgia,serif;font-size:22px;font-weight:700}.rv-drawer .dh .w b{color:var(--rentv-red)}
.rv-drawer .dh button{background:none;border:0;color:#8b949e;font-size:22px;cursor:pointer;line-height:1}
.rv-snap{padding:12px 18px;border-bottom:1px solid #1c232b;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rv-snap .m{background:#11161c;border:1px solid #1c232b;border-radius:8px;padding:8px 10px}
.rv-snap .m .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7b848d}
.rv-snap .m .v{font-size:16px;font-weight:800;margin-top:2px}
.rv-snap .m .v.up{color:#37d67a}.rv-snap .m .v.dn{color:#ff6b6b}
.rv-grp{padding:14px 18px 4px}
.rv-grp .gt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6b747d;margin-bottom:6px}
.rv-drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;color:#dbe1e7;
  text-decoration:none;font-size:14.5px;border-left:3px solid transparent}
.rv-drawer nav a:hover{background:#141a21;border-left-color:var(--rentv-red);color:#fff}
.rv-drawer nav a .c{font-size:11px;color:#6b747d;background:#161c23;border-radius:20px;padding:2px 8px}
.rv-drawer .df{margin-top:auto;padding:16px 18px;border-top:1px solid #1c232b;font-size:11px;color:#6b747d}
/* ── element-number badges (the pick system) ── */
[data-eln]{position:relative}
.eln{position:absolute;top:-9px;left:-9px;z-index:var(--z-eln);min-width:34px;height:18px;padding:0 5px;
  display:none;align-items:center;justify-content:center;gap:3px;font:700 10px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.02em;color:#fff;background:var(--rentv-red);border:1.5px solid #fff;border-radius:5px;
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);user-select:none;white-space:nowrap}
body.eln-on .eln{display:inline-flex}
body.eln-on [data-eln]{outline:1px dashed rgba(200,16,46,.35);outline-offset:2px}
.eln.picked{background:#0f8a4d}
.eln::before{content:"◻";font-size:10px}
.eln.picked::before{content:"◼"}
/* number toggle + picks tray */
.rv-fab{position:fixed;right:16px;bottom:16px;z-index:var(--z-tray);display:flex;gap:8px;align-items:flex-end;flex-direction:column}
.rv-fab button{border:0;border-radius:22px;padding:10px 16px;font:800 12px/1 system-ui;letter-spacing:.04em;
  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.22)}
.rv-fab .t-num{background:#14171a;color:#fff}
.rv-fab .t-num.on{background:var(--rentv-red)}
.rv-tray{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tray);background:#0b0e12;color:#e7ecf1;
  border-top:2px solid var(--rentv-red);transform:translateY(102%);transition:transform .24s;padding:12px 16px}
.rv-tray.open{transform:none}
.rv-tray .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rv-tray .th b{font-size:13px;letter-spacing:.04em}
.rv-tray .th .x{background:none;border:0;color:#8b949e;cursor:pointer;font-size:18px}
.rv-tray .chips{display:flex;flex-wrap:wrap;gap:6px;max-height:22vh;overflow:auto}
.rv-tray .chip{font:700 11px/1 ui-monospace,monospace;background:#11161c;border:1px solid #232a32;color:#cfd6dd;
  border-radius:6px;padding:5px 8px;display:inline-flex;gap:6px;align-items:center}
.rv-tray .chip button{background:none;border:0;color:#ff6b6b;cursor:pointer;font-size:13px;line-height:1}
.rv-tray .acts{display:flex;gap:8px;margin-top:10px}
.rv-tray .acts button{border:0;border-radius:8px;padding:8px 14px;font:800 12px system-ui;cursor:pointer}
.rv-tray .acts .copy{background:var(--rentv-red);color:#fff}
.rv-tray .acts .clr{background:#232a32;color:#cfd6dd}
.rv-tray .empty{color:#6b747d;font-size:12px}