/* Vigil — "try it right here": the menu bar popover on a pretend Mac. Loaded only on vigil.newmac.app.
   The page accent below mirrors [data-app="vigil"] in style.css; keep the two in step. */
[data-app="vigil"] { --a1: #2b2140; --a2: #f2a541; --b1: #c7731a; --b2: #9c4a1c; --ink-l: #a35a12; --ink-d: #f2a541; }

.vg {
  --vg-canvas: #f5efe6; --vg-panel: #fffbf5; --vg-well: #f1e9dd; --vg-ink: #241b2f; --vg-ink2: rgba(36,27,47,.66); --vg-ink3: rgba(36,27,47,.42);
  --vg-rule: rgba(36,27,47,.10); --vg-rule2: rgba(36,27,47,.20); --vg-flame: #c7731a; --vg-ember: #b8482a; --vg-dusk: #5b5591; --vg-moss: #4c7f55;
  --vg-wax: #f4eada; --vg-wax2: #dccbae; --vg-dish: #d8cdbd; --vg-wall: linear-gradient(170deg, #e9dfd0, #d9cdbd 60%, #cbbfb4);
  display: grid; grid-template-rows: 28px minmax(0, 1fr) auto; height: 700px; background: var(--vg-wall); color: var(--vg-ink); font-family: var(--font);
  user-select: none; -webkit-user-select: none; outline: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vg {
  --vg-canvas: #110e17; --vg-panel: #1a1623; --vg-well: #231d2e; --vg-ink: #f2eadf; --vg-ink2: rgba(242,234,223,.68); --vg-ink3: rgba(242,234,223,.42);
  --vg-rule: rgba(242,234,223,.10); --vg-rule2: rgba(242,234,223,.22); --vg-flame: #f2a541; --vg-ember: #ee7a52; --vg-dusk: #a9a2e6; --vg-moss: #8bc79a;
  --vg-wax: #efe3cf; --vg-wax2: #b9a88c; --vg-dish: #3a3346; --vg-wall: linear-gradient(170deg, #1d1828, #120f19 60%, #0c0a11); } }
:root[data-theme="dark"] .vg {
  --vg-canvas: #110e17; --vg-panel: #1a1623; --vg-well: #231d2e; --vg-ink: #f2eadf; --vg-ink2: rgba(242,234,223,.68); --vg-ink3: rgba(242,234,223,.42);
  --vg-rule: rgba(242,234,223,.10); --vg-rule2: rgba(242,234,223,.22); --vg-flame: #f2a541; --vg-ember: #ee7a52; --vg-dusk: #a9a2e6; --vg-moss: #8bc79a;
  --vg-wax: #efe3cf; --vg-wax2: #b9a88c; --vg-dish: #3a3346; --vg-wall: linear-gradient(170deg, #1d1828, #120f19 60%, #0c0a11); }
.vg button, .vg select { font: inherit; color: inherit; }
.vg .mono { font-family: var(--font-mono); }
.vg :focus-visible { outline: 2px solid var(--vg-flame); outline-offset: 2px; border-radius: 6px; }
.vg:focus-visible { outline: none; }

/* Menu bar */
.vg-bar { display: flex; align-items: center; gap: 14px; padding: 0 12px; font-size: 12.5px; background: color-mix(in srgb, var(--vg-panel) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--vg-rule); }
.vg-bar > span:not(.vg-sp):not(.vg-clock) { opacity: .8; }
.vg-apple { width: 11px; height: 13px; border-radius: 45% 45% 50% 50%; background: var(--vg-ink); opacity: .85; }
.vg-sp { flex: 1; }
.vg-glyph, .vg-batt { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border: 0; border-radius: 5px; background: none; cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; }
.vg-glyph { background: color-mix(in srgb, var(--vg-ink) 12%, transparent); }
.vg-batt i { position: relative; width: 22px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px var(--vg-ink2); }
.vg-batt i::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--b, 80%) / 100%); border-radius: 1px; background: var(--vg-ink); }
.vg-batt i::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: var(--vg-ink2); }
.vg-batt.chg em::after { content: " ⚡︎"; font-size: 10px; }
.vg-mini { position: relative; display: inline-block; width: 8px; height: 13px; }
.vg-mini::before { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 7px; border-radius: 1.5px; background: currentColor; }
.vg-mini::after { content: ""; position: absolute; left: 1.5px; top: 0; width: 5px; height: 6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: transparent; }
.vg-mini.awake::after { background: #f2a541; box-shadow: 0 0 6px #ffd27a; }
.vg-mini.grace::after { background: #ee7a52; transform: scale(.7) translateY(3px); }
.vg-clock { font-size: 12px; opacity: .85; }

/* Desk: a terminal on the left, the popover dropping from the menu bar on the right */
.vg-desk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; padding: 14px 28px 18px 28px; min-height: 0; overflow: hidden; }
.vg-term { align-self: center; display: flex; flex-direction: column; height: min(330px, 100%); border-radius: 10px; overflow: hidden; background: #17141d; color: #d9d2c8;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.28); }
.vg-tt { display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px; background: #221e29; font-size: 11px; }
.vg-tabs { display: flex; gap: 4px; min-width: 0; }
.vg-tabs > * { padding: 3px 10px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-tabs b { background: #2f2938; font-weight: 600; }
.vg-tabs span { opacity: .55; }
.vg-tbody { flex: 1; margin: 0; padding: 14px 16px; font: 12px/1.65 var(--font-mono); white-space: pre-wrap; overflow: hidden; }
.vg-tbody .p { color: #8bc79a; } .vg-tbody .d { color: #9b93a6; } .vg-tbody .ok { color: #f2a541; }
.vg-tbody u { text-decoration: none; background: #d9d2c8; animation: pulse 1.2s infinite; }
.vg-tfoot { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.vg-qbtn { padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; color: inherit; background: rgba(255,255,255,.1); }
.vg-qbtn:hover { background: rgba(255,255,255,.16); }
.vg-qbtn[hidden] { display: none; }

.vg-pop { position: relative; align-self: start; width: 368px; justify-self: end; margin-top: 2px; border-radius: 12px; background: var(--vg-panel);
  box-shadow: 0 0 0 .5px var(--vg-rule2), 0 22px 60px rgba(30,20,10,.28); transition: opacity .2s, transform .2s var(--ease); max-height: 100%; overflow: hidden; display: flex; }
.vg-closed .vg-pop { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.vg-arrow { position: absolute; top: -7px; right: 108px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--vg-panel); box-shadow: -.5px -.5px 0 var(--vg-rule2); }
.vg-pin { position: relative; flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; font-size: 13px; }
.vg-ph0 { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; }
.vg-name { display: flex; align-items: center; gap: 7px; font-family: var(--font-serif); font-size: 15px; font-weight: 600; flex: 1; }
.vg-name .vg-mini { color: var(--vg-ink); }
.vg-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--vg-ink2); background: var(--vg-well); }
.vg-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.vg-pill.awake { color: var(--vg-flame); background: color-mix(in srgb, #f2a541 16%, transparent); }
.vg-pill.grace { color: var(--vg-ember); background: color-mix(in srgb, var(--vg-ember) 12%, transparent); }
.vg-gear { font-style: normal; opacity: .55; }

.vg-main { display: grid; grid-template-columns: 112px 1fr; gap: 6px; padding: 4px 14px 14px; min-height: 250px; }
.vg-cwrap { position: relative; }
.vg-candle { display: block; overflow: visible; width: 112px; height: auto; }
.vg-candle text { font-family: var(--font-mono); font-size: 9.5px; fill: var(--vg-ink3); }
.vg-candle .nowt { fill: var(--vg-flame); font-weight: 600; }
.vg-candle .endt { fill: var(--vg-ink); font-weight: 600; }
.vg-candle .mk { stroke: var(--vg-ink3); stroke-width: 1; }
.vg-candle .mk.now { stroke: var(--vg-flame); stroke-width: 1.4; }
.vg-candle .rail { stroke: var(--vg-rule2); stroke-dasharray: 1 3; }
@media (prefers-reduced-motion: no-preference) {
  .vg-candle .flame.lit { animation: vg-flick 1s ease-in-out infinite; }
  .vg-candle .flame.ember { animation: vg-flick 1s ease-in-out infinite; }
  .vg-candle .smoke { animation: vg-smoke 1s ease-out infinite; }
}
@keyframes vg-flick { 0%, 100% { transform: scale(1) skewX(0); } 30% { transform: scale(1.04, .96) skewX(2deg); } 60% { transform: scale(.97, 1.04) skewX(-2deg); } }
@keyframes vg-smoke { from { opacity: .7; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
.vg-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vg-k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--vg-ink3); }
.vg-k.lit { color: var(--vg-flame); }
.vg-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; line-height: 1.15; margin-top: -4px; }
.vg-title.sm { font-size: 17px; }
.vg-sub { font-size: 11px; color: var(--vg-ink3); margin-top: -6px; }
.vg-fig b { display: block; font-family: var(--font-serif); font-size: 34px; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.vg-fig small { font-size: 12px; color: var(--vg-ink2); }
.vg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vg-tiles button, .vg-row { padding: 8px 10px; border: 0; border-radius: 8px; background: var(--vg-well); cursor: pointer; text-align: left; font-size: 13px; font-weight: 500; }
.vg-tiles button:hover, .vg-row:hover { background: color-mix(in srgb, #f2a541 22%, var(--vg-well)); }
.vg-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.vg-row em { margin-left: auto; font-style: normal; opacity: .5; }
.vg-row.hot { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vg-flame) 45%, transparent); background: color-mix(in srgb, #f2a541 12%, var(--vg-well)); }
.vg-row i { width: 13px; height: 11px; border-radius: 3px; border: 1.3px solid currentColor; opacity: .7; flex: none; }
.vg-row i.ic-clock { border-radius: 50%; width: 12px; height: 12px; }
.vg-until { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 8px; background: var(--vg-well); font-size: 13px; }
.vg-until select { flex: 1; min-width: 0; padding: 3px 6px; border-radius: 6px; border: 0; background: var(--vg-panel); box-shadow: inset 0 0 0 1px var(--vg-rule2); }
.vg-seg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vg-ink2); }
.vg-seg > span { width: 42px; }
.vg-seg > div { display: flex; padding: 2px; border-radius: 8px; background: var(--vg-well); }
.vg-seg button { padding: 3px 9px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 12px; color: var(--vg-ink2); }
.vg-seg button[aria-pressed="true"] { background: var(--vg-panel); color: var(--vg-dusk); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.vg-acts { display: flex; align-items: center; gap: 6px; }
.vg-acts span { flex: 1; }
.vg-q { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 0; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; background: var(--vg-panel); box-shadow: inset 0 0 0 1px var(--vg-rule2); }
.vg-q:hover { background: var(--vg-well); }
.vg-q.ember { color: var(--vg-ember); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vg-ember) 55%, transparent); }
.ic-flame { width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; border: 1.3px solid currentColor; }
.vg-tag { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.vg-tag.dusk { color: var(--vg-dusk); background: color-mix(in srgb, var(--vg-dusk) 14%, transparent); }
.vg-pri { padding: 6px 14px; border: 0; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: #241b2f; background: #f2a541; }
.vg-pri.sm { padding: 3px 10px; font-size: 12px; }
.vg-pri:disabled { opacity: .45; cursor: default; }

.vg-power { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--vg-rule); }
.vg-power b { display: block; font-weight: 500; font-size: 13px; }
.vg-power small { display: block; font-size: 11.5px; color: var(--vg-ink3); }
.vg-bicon { position: relative; flex: none; width: 22px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px var(--vg-ink2); }
.vg-bicon::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--b) / 100%); border-radius: 1px; background: var(--vg-ink2); }
.vg-bicon.chg::before { background: var(--vg-moss); }
.vg-recent { padding: 8px 14px 4px; border-top: 1px solid var(--vg-rule); }
.vg-rh { display: flex; align-items: baseline; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--vg-ink3); margin-bottom: 4px; }
.vg-rh .mono { margin-left: auto; font-weight: 400; letter-spacing: 0; }
.vg-rh b { color: var(--vg-flame); letter-spacing: 0; font-size: 12px; }
.vg-hr { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 4px 0; }
.vg-hr > i { height: 26px; border-radius: 2px; background: linear-gradient(var(--vg-wax) 40%, var(--vg-flame) 40%); opacity: .85; }
.vg-hr b { display: block; font-size: 12.5px; font-weight: 600; }
.vg-hr small { display: block; font-size: 11.5px; color: var(--vg-ink3); }
.vg-hr .r { text-align: right; font-size: 12px; }
.vg-pfoot { display: flex; justify-content: space-between; padding: 8px 14px 12px; }

/* Picker */
.vg-pick { display: flex; flex-direction: column; min-height: 100%; }
.vg-ph { display: flex; gap: 10px; align-items: flex-start; padding: 4px 14px 8px; }
.vg-ph small { display: block; font-size: 11.5px; color: var(--vg-ink3); }
.vg-back { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; color: var(--vg-ink2); }
.vg-search { margin: 0 14px 6px; padding: 6px 10px; border-radius: 8px; background: var(--vg-well); color: var(--vg-ink3); font-size: 12.5px; }
.vg-sec { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--vg-ink3); }
.vg-proc { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 6px 14px; border: 0; background: none; cursor: pointer; text-align: left; }
.vg-proc:hover { background: var(--vg-well); }
.vg-proc.on { background: color-mix(in srgb, #f2a541 20%, var(--vg-panel)); }
.vg-proc:disabled { opacity: .45; cursor: default; }
.vg-proc .rad { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px var(--vg-ink3); }
.vg-proc.on .rad { background: #f2a541; box-shadow: inset 0 0 0 4px #f2a541, inset 0 0 0 6px #fff; }
.vg-proc b { display: block; font-size: 13px; font-weight: 600; }
.vg-proc small { display: block; font-size: 11px; color: var(--vg-ink3); }
.vg-proc em { font-style: normal; font-size: 11.5px; color: var(--vg-ink2); }
.vg-pf { margin-top: auto; position: sticky; bottom: 0; background: var(--vg-panel); display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--vg-rule); }
.vg-pf small { flex: 1; font-size: 11.5px; color: var(--vg-ink3); }

/* The notification banner */
.vg-note { position: absolute; z-index: 5; top: 12px; left: 28px; width: min(340px, calc(100% - 40px)); display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--vg-panel) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px var(--vg-rule2), 0 14px 34px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .35s var(--ease); }
.vg-note.in { opacity: 1; transform: none; }
.vg-note[hidden] { display: none; }
.vg-note img { border-radius: 8px; flex: none; }
.vg-note small { display: block; font-size: 10px; letter-spacing: .06em; color: var(--vg-ink3); }
.vg-note b { display: block; font-size: 13.5px; }
.vg-note span { display: block; font-size: 12px; color: var(--vg-ink2); }

/* The pretend Mac's controls */
.vg-world { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; font-size: 12.5px; color: var(--vg-ink2); background: var(--vg-panel); border-top: 1px solid var(--vg-rule); }
.vg-world > .mono b { color: var(--vg-ink); font-weight: 600; }
.vg-world .vg-qbtn { background: var(--vg-well); color: var(--vg-ink); }
.vg-world .vg-qbtn:hover { background: color-mix(in srgb, #f2a541 20%, var(--vg-well)); }
.vg-speed { display: flex; margin-left: auto; padding: 2px; border-radius: 999px; background: var(--vg-well); }
.vg-speed button { padding: 3px 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 12px; color: var(--vg-ink2); }
.vg-speed button[aria-pressed="true"] { background: var(--vg-panel); color: var(--vg-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

@media (max-width: 860px) { .vg-desk { grid-template-columns: minmax(0, 1fr) 368px; gap: 16px; padding: 14px 16px; } }
@media (max-width: 760px) {
  .vg { height: auto; grid-template-rows: 28px auto auto; }
  .vg-bar > span:not(.vg-sp):not(.vg-clock), .vg-bar > b:not(.vg-apple) { display: none; }
  .vg-desk { grid-template-columns: minmax(0, 1fr); padding: 12px 10px 14px; gap: 14px; }
  .vg-pop { order: -1; width: 100%; max-width: 368px; justify-self: center; }
  .vg-arrow { right: 70px; }
  .vg-term { height: 190px; }
  .vg-tbody { font-size: 11px; padding: 10px 12px; }
  .vg-main { grid-template-columns: 100px 1fr; padding: 4px 10px 12px; }
  .vg-candle { width: 104px; height: auto; }
  .vg-note { left: 10px; }
  .vg-speed { margin-left: 0; }
}

/* Closed-lid section (page, not the model) */
.vg-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vg-safe li { position: relative; padding: 14px 16px 14px 46px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.vg-safe li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%); mask: radial-gradient(circle, #000 60%, transparent 62%); }
.vg-safe b { display: block; font-size: 16px; }
.vg-safe span { display: block; color: var(--muted); font-size: 15px; }