static/app.css

/* OffGridSchedula — "daylight planner" theme.
   Soft lavender-paper canvas, deep-ink text (high contrast), violet→cyan identity
   used on the primary action + key accents. Fraunces (display) + Hanken Grotesk. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg:       #f4f2fb;   /* soft lavender paper */
  --bg2:      #ffffff;   /* inputs */
  --surface:  #ffffff;   /* cards */
  --surface2: #efecf9;
  --line:     rgba(31,25,60,0.12);
  --text:     #1e1934;   /* deep ink */
  --muted:    #645c84;
  --violet:   #6d4be0;
  --cyan:     #0e8ea0;
  --coral:    #d83a60;
  --mint:     #15894f;
  --amber:    #b3700a;
  --accent:   linear-gradient(100deg, #6d4be0 0%, #0b8294 100%);
  --radius:   16px;
  --shadow:   0 12px 30px rgba(45,32,90,0.12);
}

/* ---- canvas + base type ---- */
.gradio-container, .gradio-container * {
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif !important;
}
.gradio-container {
  background:
    radial-gradient(1100px 520px at 12% -8%, #ece5ff 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #ddf2f4 0%, transparent 50%),
    var(--bg) !important;
  color: var(--text) !important;

  /* Map Gradio's own theme tokens to our light palette so every component is
     light-surface / dark-text and stays readable. */
  --body-background-fill: var(--bg);
  --body-text-color: var(--text);
  --body-text-color-subdued: var(--muted);
  --background-fill-primary: var(--surface);
  --background-fill-secondary: var(--surface2);
  --block-background-fill: var(--surface);
  --block-label-background-fill: var(--surface);
  --block-label-text-color: var(--muted);
  --block-title-text-color: var(--text);
  --block-info-text-color: var(--muted);
  --block-border-color: var(--line);
  --border-color-primary: var(--line);
  --border-color-accent: rgba(109,75,224,.5);
  --input-background-fill: var(--bg2);
  --input-border-color: var(--line);
  --input-placeholder-color: var(--muted);
  --button-secondary-background-fill: var(--surface2);
  --button-secondary-text-color: var(--text);
  --button-secondary-border-color: var(--line);
  --link-text-color: var(--cyan);
  --link-text-color-hover: var(--cyan);
  --color-accent: var(--violet);
  --color-accent-soft: rgba(109,75,224,.14);
  --table-text-color: var(--text);
  --table-even-background-fill: var(--surface);
  --table-odd-background-fill: var(--surface2);
}
/* Belt-and-suspenders for the common readable bits (markdown, labels, inputs). */
.gradio-container .prose,
.gradio-container .prose p, .gradio-container .prose li,
.gradio-container .prose h1, .gradio-container .prose h2, .gradio-container .prose h3,
.gradio-container .prose strong, .gradio-container .prose em,
.gradio-container label, .gradio-container .gr-box label,
.gradio-container input, .gradio-container textarea {
  color: var(--text) !important;
}
/* NOTE: checkboxes/radios are excluded — the `background` shorthand would wipe
   Gradio's checked-state background-image (the checkmark), so they never look
   checked. Style their accent instead and leave the rest to Gradio. */
.gradio-container input:not([type="checkbox"]):not([type="radio"]),
.gradio-container textarea { background: var(--bg2) !important; }
.gradio-container input[type="checkbox"], .gradio-container input[type="radio"] {
  accent-color: var(--violet); cursor: pointer; }
.gradio-container .tab-nav button { color: var(--muted); }
.gradio-container .tab-nav button.selected { color: var(--text); border-bottom-color: var(--violet); }
.gradio-container h1, .gradio-container h2, .gradio-container h3,
#app-header, .evx-title, .evx-head {
  font-family: "Fraunces", Georgia, serif !important;
  letter-spacing: -0.01em;
}

#app-header {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  margin-bottom: .15rem;
  background: var(--accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Review: input card ---- */
.rv-input {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 14px !important;
  box-shadow: var(--shadow);
}
#rv-textbox textarea {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  background: var(--bg2) !important;
  border-radius: 12px !important;
}
#rv-actions { gap: 10px; margin-top: 10px; }

/* primary action — the one place the full accent gradient lives */
#rv-analyze button {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  border: none !important;
  min-height: 50px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(109,75,224,0.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#rv-analyze button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(11,130,148,0.3); }
#rv-analyze button:active { transform: translateY(0); }

.rv-status { color: var(--muted); font-size: .9rem; min-height: 1.2em; padding: 2px 2px 0; }

/* ---- plan summary (reasoning + conflict badges + free-slot chips) ---- */
.pl-summary {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  box-shadow: var(--shadow);
  animation: rise .35s ease both;
}
.pl-reason { margin: 0 0 8px; color: var(--text); font-size: .96rem; line-height: 1.5; }
.pl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pl-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600;
}
.pl-conflict { background: rgba(216,58,96,.12); color: #b21d44; border: 1px solid rgba(216,58,96,.3); }
.pl-chip {
  padding: 5px 11px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: rgba(14,142,160,.12); color: #0a6f7d; border: 1px solid rgba(14,142,160,.3);
}
.pl-clarify { margin: 10px 0 0; color: var(--amber); font-size: .9rem; }
.pl-clear { margin: 0; color: var(--mint); font-weight: 600; }

/* ---- events: billboard (featured) + cards ---- */
.evx-head { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 6px 2px 10px; }

/* Billboard / carousel slide: a soft tinted card with dark text */
.bb {
  position: relative; overflow: hidden; border-radius: 18px; margin: 0 0 18px;
  min-height: 196px; display: flex; align-items: flex-end;
  background: linear-gradient(120deg, #ece4ff 0%, #d7f1f4 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bb-scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,.45) 0%, rgba(255,255,255,.1) 45%, transparent 100%); }
.bb-body { position: relative; z-index: 2; padding: 22px 24px; width: 100%; animation: rise .45s ease both; }
.bb-kicker { color: var(--cyan); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.bb-title { font-family: "Fraunces", serif; font-size: 2rem; line-height: 1.05; margin: 0 0 10px; color: var(--text); }
.bb-when { font-size: 1rem; font-weight: 600; color: #3a3357; }
.bb-note { margin-top: 8px; color: var(--muted); font-style: italic; }

.evx-sec { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 2px 2px 10px; }
.evx-cards { display: flex; flex-direction: column; gap: 12px; }
.evx-card {
  position: relative; display: flex; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(45,32,90,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: rise .4s ease both; animation-delay: calc(var(--i, 0) * 70ms);
}
.evx-card:hover {  /* subtle tactile lift */
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 14px 32px rgba(45,32,90,.18); border-color: rgba(109,75,224,.4);
}
.evx-bar { width: 5px; flex: 0 0 5px; background: var(--accent); }
.evx-body { padding: 13px 16px; min-width: 0; }
.evx-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.evx-chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--surface2); }
.evx-when { font-size: .92rem; color: var(--muted); font-weight: 600; }
.evx-meta { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.evx-note { font-size: .82rem; color: var(--muted); margin-top: 6px; font-style: italic; }
/* per-event one-click quick-add links (Online mode) */
.evx-add { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.evx-add a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.evx-add a:hover { text-decoration: underline; }
/* Agent tab: the orchestrator's step trace */
.ag-trace { display: flex; flex-direction: column; gap: 6px; }
.ag-step { display: flex; gap: 10px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 10px; padding: 9px 12px; font-size: .9rem; animation: rise .3s ease both; }
.ag-step code { background: var(--surface2); padding: 1px 6px; border-radius: 6px;
  font-size: .82em; word-break: break-all; }
.ag-tool_call { border-left-color: var(--cyan); }
.ag-tool_result { border-left-color: var(--mint); }
.ag-final { border-left-color: var(--mint); background: rgba(21,137,79,.07); font-weight: 600; }
.ag-error { border-left-color: var(--coral); }
.ag-ico { flex: none; }

/* iPhone share-sheet Shortcut callout (export bar) */
.ship-note { color: var(--muted); font-size: .82rem; margin-top: 8px; }
.ship-note a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.ship-note a:hover { text-decoration: underline; }
.evx-empty { color: var(--muted); padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }

/* Horizontal swipe rail (kept for any list use) */
.evx-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.evx-rail::-webkit-scrollbar { display: none; }
.evx-rail .evx-card { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; }

/* ---- rotating hero carousel (auto-advance + arrows + dots) ---- */
.carousel { position: relative; border-radius: 18px; overflow: hidden; margin: 0 0 16px;
  box-shadow: var(--shadow); border: 1px solid var(--line); }
.cz-track { position: relative; min-height: 200px; }
.cz-slide { position: absolute; inset: 0; opacity: 0; transform: translateX(16px);
  transition: opacity .5s ease, transform .5s ease; pointer-events: none;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.cz-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.carousel .bb-body { padding: 24px 125px 42px 150px; } /* clear the prev arrow (left) and keep text 125px off the next button (right) */
.cz-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(31,25,60,.55); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.cz-arrow:hover { background: rgba(31,25,60,.8); transform: translateY(-50%) scale(1.08); }
.cz-prev { left: 12px; } .cz-next { right: 12px; }
.cz-dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 5;
  display: flex; gap: 8px; justify-content: center; }
.cz-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(31,25,60,.28); transition: width .2s ease, background .2s ease; }
.cz-dot.is-active { width: 22px; border-radius: 4px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .cz-slide { transition: opacity .01s linear; } }
@media (max-width: 640px) {
  .cz-track { min-height: 172px; }
  .carousel .bb-body { padding: 18px 18px 34px 56px; } /* clear the (smaller) mobile prev arrow */
  .cz-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
}

/* ---- reply + export ---- */
.rv-reply { margin-top: 14px; }
.rv-copy button { background: var(--surface2) !important; border: 1px solid var(--line) !important; color: var(--text) !important; }
#rv-export, .ag-export {
  margin-top: 14px; padding: 12px !important;
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 14px !important; box-shadow: var(--shadow);
}
#rv-export button, .ag-export button { min-height: 46px !important; font-weight: 600 !important; border-radius: 11px !important; }
#rv-export .gr-button-primary, #rv-export button.primary,
.ag-export .gr-button-primary, .ag-export button.primary {
  background: var(--accent) !important; color: #fff !important; border: none !important;
}

/* ---- shared (Activity / Memory) ---- */
.muted { color: var(--muted); font-style: italic; padding: 8px 2px; }
.stepper { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.step { position: relative; padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.step.active { color: #fff; background: var(--c); border-color: var(--c); animation: pulse 1.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tiles { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.tile { flex: 1 1 110px; background: var(--surface); border: 1px solid rgba(109,75,224,.18);
  border-radius: 12px; padding: 12px 14px; text-align: center; box-shadow: 0 3px 12px rgba(45,32,90,.07); }
.tile-v { font-size: 1.5rem; font-weight: 700; font-family: "Fraunces", serif;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tile-k { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.timeline { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; flex: 1; }
.evt { display: grid; grid-template-columns: 84px 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 8px; font-size: .82rem; }
.evt.err { border-left-color: var(--coral); background: #fdecef; }
.evt-stage { color: var(--c); font-weight: 700; text-transform: uppercase; font-size: .7rem; filter: brightness(.78); }
.evt-msg { color: var(--text); }
.evt-meta, .evt-ts { color: var(--muted); font-family: ui-monospace, monospace; font-size: .72rem; }
.trace { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.trace summary { cursor: pointer; font-weight: 600; color: var(--text); }
.trace-line { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--muted); padding: 2px 0 2px 14px; }
.trace-stage { font-weight: 700; text-transform: uppercase; font-size: .68rem; margin-right: 6px; filter: brightness(.78); }
.event-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- mobile-first ---- */
@media (max-width: 640px) {
  #app-header { font-size: 1.5rem; }
  #rv-actions { flex-direction: column; }
  #rv-actions button { width: 100% !important; }
  .evx-title { font-size: 1.05rem; }
  .bb { min-height: 168px; }
  .bb-body { padding: 18px; }
  .bb-title { font-size: 1.55rem; }
  .evx-rail .evx-card { flex: 0 0 86%; }
  .tiles { gap: 8px; }
  .tile { flex: 1 1 calc(50% - 8px); }
  .evt { grid-template-columns: 1fr; gap: 2px; }
  .evt-meta, .evt-ts { display: none; }
  /* keep the export actions reachable on a phone */
  #rv-export {
    position: sticky; bottom: 0; z-index: 20;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 -8px 24px rgba(45,32,90,.18);
  }
}

/* ---- showcase carousel: image-background slides (data-URI SVG illustrations) ---- */
/* !important so Gradio's own h2/theme heading color can't override the slide text */
.carousel .bb-img .bb-title, .bb-img .bb-title { color: #ffffff !important; }
.carousel .bb-img .bb-when, .bb-img .bb-when { color: #ffffff !important; }
.bb-img .bb-note { color: #e7e2fb !important; }
.bb-img .bb-kicker { color: #bff2f8 !important; }
.bb-scrim-dark { background: linear-gradient(to top, rgba(12,8,28,.86) 0%, rgba(12,8,28,.42) 55%, rgba(12,8,28,.15) 100%); }
.cz-bg-chat { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnMSIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzNhMmE3MiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNWY2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2cxKSIvPjxnIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuMTYiPjxyZWN0IHg9IjkwIiB5PSI5MCIgcng9IjIyIiByeT0iMjIiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTIwIi8+PHJlY3QgeD0iMzYwIiB5PSIxNzAiIHJ4PSIyMiIgcnk9IjIyIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjEyMCIvPjwvZz48ZyBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjUiPjxyZWN0IHg9IjEyMCIgeT0iMTIwIiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE0IiByeD0iNyIvPjxyZWN0IHg9IjEyMCIgeT0iMTUwIiB3aWR0aD0iMTEwIiBoZWlnaHQ9IjE0IiByeD0iNyIvPjxyZWN0IHg9IjM5MCIgeT0iMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0IiByeD0iNyIvPjxyZWN0IHg9IjM5MCIgeT0iMjMwIiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE0IiByeD0iNyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MDAsNzApIiBvcGFjaXR5PSIwLjg1Ij48cmVjdCB3aWR0aD0iMTEwIiBoZWlnaHQ9IjEwMCIgcng9IjE0IiBmaWxsPSIjNTRkOGUyIi8+PHJlY3Qgd2lkdGg9IjExMCIgaGVpZ2h0PSIyNiIgcng9IjE0IiBmaWxsPSIjMGI4Mjk0Ii8+PGcgZmlsbD0iIzBlMjIzMCI+PHJlY3QgeD0iMTgiIHk9IjQ2IiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIzIi8+PHJlY3QgeD0iNDYiIHk9IjQ2IiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIzIi8+PHJlY3QgeD0iNzQiIHk9IjQ2IiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIzIi8+PHJlY3QgeD0iMTgiIHk9IjcyIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIzIi8+PC9nPjwvZz48L3N2Zz4="); background-size: cover; background-position: center; }
.cz-bg-flyer { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnMiIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzViMmE4NiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNmY3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2cyKSIvPjxnIHRyYW5zZm9ybT0icm90YXRlKC04IDMwMCAyMDApIj48cmVjdCB4PSIxNTAiIHk9IjcwIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjI2MCIgcng9IjE2IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjkyIi8+PHJlY3QgeD0iMTgwIiB5PSIxMDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iNzAiIHJ4PSI4IiBmaWxsPSIjNmQ0YmUwIiBvcGFjaXR5PSIwLjg1Ii8+PGcgZmlsbD0iIzlhOTNiOCI+PHJlY3QgeD0iMTgwIiB5PSIxOTAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTIiIHJ4PSI2Ii8+PHJlY3QgeD0iMTgwIiB5PSIyMTQiIHdpZHRoPSIxNjAiIGhlaWdodD0iMTIiIHJ4PSI2Ii8+PHJlY3QgeD0iMTgwIiB5PSIyMzgiIHdpZHRoPSIxODAiIGhlaWdodD0iMTIiIHJ4PSI2Ii8+PC9nPjxyZWN0IHg9IjE4MCIgeT0iMjc4IiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjI2IiByeD0iMTMiIGZpbGw9IiMwYjgyOTQiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTIwLDE1MCkiPjxyZWN0IHdpZHRoPSIxNzAiIGhlaWdodD0iMTMwIiByeD0iMTgiIGZpbGw9IiMwZTIyMzAiIG9wYWNpdHk9IjAuOSIvPjxjaXJjbGUgY3g9Ijg1IiBjeT0iNzAiIHI9IjQyIiBmaWxsPSJub25lIiBzdHJva2U9IiM1NGQ4ZTIiIHN0cm9rZS13aWR0aD0iOCIvPjxjaXJjbGUgY3g9Ijg1IiBjeT0iNzAiIHI9IjE4IiBmaWxsPSIjNTRkOGUyIi8+PHJlY3QgeD0iMTIwIiB5PSIyMCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjE0IiByeD0iNyIgZmlsbD0iIzU0ZDhlMiIvPjwvZz48L3N2Zz4="); background-size: cover; background-position: center; }
.cz-bg-cal { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnMyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzJmMmE3OCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNjQ3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2czKSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1MCw3MCkiPjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMjYwIiByeD0iMTgiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuOTUiLz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjU0IiByeD0iMTgiIGZpbGw9IiM2ZDRiZTAiLz48cmVjdCB4PSIyMCIgeT0iODAiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSI2NiIgeT0iODAiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIxMTIiIHk9IjgwIiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMTU4IiB5PSI4MCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjIwNCIgeT0iODAiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIyNTAiIHk9IjgwIiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMjAiIHk9IjEyNiIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjY2IiB5PSIxMjYiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIxMTIiIHk9IjEyNiIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjE1OCIgeT0iMTI2IiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMjA0IiB5PSIxMjYiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIyNTAiIHk9IjEyNiIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjIwIiB5PSIxNzIiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSI2NiIgeT0iMTcyIiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMTEyIiB5PSIxNzIiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIxNTgiIHk9IjE3MiIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjIwNCIgeT0iMTcyIiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMjUwIiB5PSIxNzIiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIyMCIgeT0iMjE4IiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iNjYiIHk9IjIxOCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjExMiIgeT0iMjE4IiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMTU4IiB5PSIyMTgiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiNlN2UzZjUiLz48cmVjdCB4PSIyMDQiIHk9IjIxOCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0IiByeD0iNiIgZmlsbD0iI2U3ZTNmNSIvPjxyZWN0IHg9IjI1MCIgeT0iMjE4IiB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHJ4PSI2IiBmaWxsPSIjZTdlM2Y1Ii8+PHJlY3QgeD0iMTU4IiB5PSIxNzIiIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgcng9IjYiIGZpbGw9IiMwYjgyOTQiLz48Y2lyY2xlIGN4PSIxNzUiIGN5PSIxODkiIHI9IjgiIGZpbGw9IiNmZmZmZmYiLz48L2c+PC9zdmc+"); background-size: cover; background-position: center; }
.cz-bg-reply { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnNCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzRhMmE4MCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNWY2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2c0KSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MCwxMjApIj48cmVjdCB3aWR0aD0iMzIwIiBoZWlnaHQ9IjE1MCIgcng9IjI2IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjk1Ii8+PHBhdGggZD0iTTYwIDE1MCBsMCA1MCBsNTAgLTUwIHoiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuOTUiLz48ZyBmaWxsPSIjOWE5M2I4Ij48cmVjdCB4PSI0MCIgeT0iNDQiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTQiIHJ4PSI3Ii8+PHJlY3QgeD0iNDAiIHk9Ijc2IiB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE0IiByeD0iNyIvPjwvZz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQwLDE1MCkiPjxjaXJjbGUgY3g9IjYwIiBjeT0iNjAiIHI9IjYwIiBmaWxsPSIjMTViMDcwIi8+PHBhdGggZD0iTTMyIDYyIGwyMCAyMCBsNDAgLTQ0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48L3N2Zz4="); background-size: cover; background-position: center; }
.cz-bg-carpool { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnYyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzNhMmE3MiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNjQ3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2djKSIvPjxyZWN0IHg9IjAiIHk9IjMwMCIgd2lkdGg9IjgwMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC4zIi8+PGcgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMC41Ij48cmVjdCB4PSI2MCIgeT0iMzAxIiB3aWR0aD0iNjAiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjE4MCIgeT0iMzAxIiB3aWR0aD0iNjAiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjMwMCIgeT0iMzAxIiB3aWR0aD0iNjAiIGhlaWdodD0iNiIvPjxyZWN0IHg9IjQyMCIgeT0iMzAxIiB3aWR0aD0iNjAiIGhlaWdodD0iNiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAsMTUwKSI+PHJlY3QgeD0iMCIgeT0iNzAiIHdpZHRoPSIyNjAiIGhlaWdodD0iNzIiIHJ4PSIyNCIgZmlsbD0iIzU0ZDhlMiIvPjxwYXRoIGQ9Ik00NCA3MiBxMjggLTU2IDkyIC01NiBsNjQgMCBxNDQgMCA2NCA1NiB6IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjkyIi8+PHJlY3QgeD0iNzAiIHk9IjMwIiB3aWR0aD0iNjAiIGhlaWdodD0iNDAiIHJ4PSI2IiBmaWxsPSIjNmQ0YmUwIiBvcGFjaXR5PSIwLjg1Ii8+PHJlY3QgeD0iMTUwIiB5PSIzMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiByeD0iNiIgZmlsbD0iIzZkNGJlMCIgb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9Ijc0IiBjeT0iMTQ4IiByPSIyOCIgZmlsbD0iIzBlMjIzMCIvPjxjaXJjbGUgY3g9Ijc0IiBjeT0iMTQ4IiByPSIxMyIgZmlsbD0iIzU0ZDhlMiIvPjxjaXJjbGUgY3g9IjIwNiIgY3k9IjE0OCIgcj0iMjgiIGZpbGw9IiMwZTIyMzAiLz48Y2lyY2xlIGN4PSIyMDYiIGN5PSIxNDgiIHI9IjEzIiBmaWxsPSIjNTRkOGUyIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU2MCw5MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU0ZDhlMiIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSI2MCIgY3k9IjYwIiByPSI0MCIgc3Ryb2tlPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTYwIDM2IGwwIDI0IGwxNiAxMCIgc3Ryb2tlPSIjNTRkOGUyIi8+PC9nPjwvc3ZnPg=="); background-size: cover; background-position: center; }
.cz-bg-appt { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnYSIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzJmMmE3OCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNjQ3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2dhKSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0MCw5MCkiPjxyZWN0IHdpZHRoPSIyNjAiIGhlaWdodD0iMjIwIiByeD0iMTYiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuOTUiLz48cmVjdCB3aWR0aD0iMjYwIiBoZWlnaHQ9IjUwIiByeD0iMTYiIGZpbGw9IiM2ZDRiZTAiLz48ZyBmaWxsPSIjZTdlM2Y1Ij48cmVjdCB4PSIyMiIgeT0iNzgiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjYiLz48cmVjdCB4PSI3OCIgeT0iNzgiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjYiLz48cmVjdCB4PSIxMzQiIHk9Ijc4IiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHJ4PSI2Ii8+PHJlY3QgeD0iMTkwIiB5PSI3OCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iNiIvPjxyZWN0IHg9IjIyIiB5PSIxMzAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjYiLz48cmVjdCB4PSI3OCIgeT0iMTMwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHJ4PSI2Ii8+PHJlY3QgeD0iMTkwIiB5PSIxMzAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjYiLz48L2c+PHJlY3QgeD0iMTM0IiB5PSIxMzAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcng9IjYiIGZpbGw9IiMwYjgyOTQiLz48Y2lyY2xlIGN4PSIxNTQiIGN5PSIxNTAiIHI9IjkiIGZpbGw9IiNmZmZmZmYiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIwLDExMCkiPjxjaXJjbGUgY3g9Ijk1IiBjeT0iOTUiIHI9Ijk1IiBmaWxsPSIjMGUyMjMwIiBvcGFjaXR5PSIwLjkyIi8+PGNpcmNsZSBjeD0iOTUiIGN5PSI5NSIgcj0iNzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU0ZDhlMiIgc3Ryb2tlLXdpZHRoPSI5Ii8+PHBhdGggZD0iTTk1IDk1IEw5NSA0NiIgc3Ryb2tlPSIjNTRkOGUyIiBzdHJva2Utd2lkdGg9IjExIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNOTUgOTUgTDEzNiAxMTIiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L2c+PC9zdmc+"); background-size: cover; background-position: center; }
.cz-bg-party { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgNDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzViMmE4NiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBlNmY3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiBmaWxsPSJ1cmwoI2dwKSIvPjxnIG9wYWNpdHk9IjAuNzUiPjxyZWN0IHg9IjEyMCIgeT0iNTAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjMiIGZpbGw9IiM1NGQ4ZTIiIHRyYW5zZm9ybT0icm90YXRlKDIwIDEyOCA1OCkiLz48cmVjdCB4PSIzMDAiIHk9IjQwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIzIiBmaWxsPSIjZmZmZmZmIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTUgMzA3IDQ3KSIvPjxyZWN0IHg9IjY0MCIgeT0iNjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjMiIGZpbGw9IiM1NGQ4ZTIiIHRyYW5zZm9ybT0icm90YXRlKDMwIDY0OCA2OCkiLz48Y2lyY2xlIGN4PSI1MjAiIGN5PSI1MCIgcj0iOCIgZmlsbD0iI2ZmZmZmZiIvPjxjaXJjbGUgY3g9IjIyMCIgY3k9IjM0MCIgcj0iOCIgZmlsbD0iIzU0ZDhlMiIvPjxyZWN0IHg9IjcwMCIgeT0iMzIwIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSIzIiBmaWxsPSIjZmZmZmZmIiB0cmFuc2Zvcm09InJvdGF0ZSgyNSA3MDcgMzI3KSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAsODApIj48ZWxsaXBzZSBjeD0iNzAiIGN5PSI5MCIgcng9IjY0IiByeT0iNzgiIGZpbGw9IiM1NGQ4ZTIiLz48cGF0aCBkPSJNNzAgMTY4IGwtOSAyMCBsMTggMCB6IiBmaWxsPSIjNTRkOGUyIi8+PHBhdGggZD0iTTcwIDE4OCBxMjQgMzQgLTEyIDY2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgb3BhY2l0eT0iMC43Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ3MCwxNzApIj48cmVjdCB3aWR0aD0iMTkwIiBoZWlnaHQ9IjE1MCIgcng9IjE0IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjk1Ii8+PHJlY3QgeD0iODIiIHdpZHRoPSIyNiIgaGVpZ2h0PSIxNTAiIGZpbGw9IiM2ZDRiZTAiLz48cmVjdCB5PSI1OCIgd2lkdGg9IjE5MCIgaGVpZ2h0PSIyNiIgZmlsbD0iIzZkNGJlMCIvPjxwYXRoIGQ9Ik05NSA1OCBxLTQ2IC01NCAtMTQgLTU0IHEzNCAwIDE0IDU0IHEyMCAtNTQgNTQgLTU0IHEzNCAwIC0xNCA1NCB6IiBmaWxsPSIjMGI4Mjk0Ii8+PC9nPjwvc3ZnPg=="); background-size: cover; background-position: center; }

/* ===================================================================== */
/* Landing-page remaster — bold dark hero + light body                   */
/* ===================================================================== */
html { overflow-x: hidden; scroll-behavior: smooth; }
.gradio-container { scroll-behavior: smooth; }

/* ---- sticky top nav (full-bleed) ---- */
#site-nav { width: 100vw; margin-left: calc(50% - 50vw); position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line); }
#site-nav .nav-inner { max-width: 1100px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { display: inline-flex; align-items: center; gap: 9px;
  font-family: "Fraunces", serif; font-weight: 700; font-size: 1.16rem; text-decoration: none; }
/* plain ink in the site display typeface — the gradient text-clip trick left
   the title invisible whenever the clip didn't apply */
.nav-brand span { color: var(--text) !important; -webkit-text-fill-color: currentColor; }
.nav-logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
/* calendar-option notes inside the step-2 dropdown */
.cal-note { color: var(--muted); font-size: .86rem; margin-bottom: 6px; }
.cal-note code { background: var(--surface2); padding: 1px 5px; border-radius: 5px; }
.nav-links { display: flex; align-items: center; gap: 18px; }
/* grouped dropdowns */
.nav-group { position: relative; }
.nav-top { background: none; border: 0; cursor: pointer; color: var(--muted); font-weight: 600;
  font-size: .92rem; padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; transition: color .15s; }
.nav-group:hover .nav-top, .nav-group:focus-within .nav-top, .nav-top:hover { color: var(--text); }
.nav-caret { font-size: .7rem; opacity: .7; transition: transform .15s; }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 190px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 70; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: flex; }
.nav-item { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text) !important;
  text-decoration: none; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.nav-item:hover { background: var(--surface2); }
.nav-cta { background: var(--accent); color: #fff !important; padding: 8px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: .92rem; box-shadow: 0 6px 18px rgba(109,75,224,.35);
  transition: filter .15s; }
.nav-cta:hover { filter: brightness(1.06); }

/* Hide the default Gradio tab strip — the banner is the only navigation now.
   IMPORTANT: don't use display:none / width:0 — Gradio 6's tab bar is responsive
   (measures its width and overflows tabs that don't fit into a "more" menu as a
   non-interactive clone the nav JS can't click). Collapsing it while keeping its
   NATURAL width broke on mobile: a ~390px phone viewport can't fit 7 tabs, so the
   later ones (Memory/Feed/Submission, index >= 3) overflowed into that dead clone
   and their banner links did nothing — while desktop's ~1100px fit them all.
   Fix: park the strip far off-screen at a FIXED LARGE width so the responsive
   measurement always sees room for every tab on one row, no overflow menu is
   ever built, and all tab buttons stay real and programmatically clickable. */
.gradio-container .tab-wrapper,
.gradio-container .tab-nav {
  height: 0 !important; min-height: 0 !important; overflow: hidden !important;
  opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  pointer-events: none;
  /* KEEP the strip from ever overflowing tabs into the dead "more" clone:
     force its measured width far past the tab count and forbid wrapping, so on
     a phone all 7 tabs still "fit" and stay real, clickable buttons. height:0 +
     overflow:hidden keeps it invisible; html{overflow-x:hidden} clips the
     oversized width so it can't add a horizontal scrollbar. */
  min-width: 1600px !important; max-width: none !important; flex-wrap: nowrap !important;
}

/* ---- hero (full-bleed DARK band, split: copy + example-card grid) ---- */
#hero { width: 100vw; margin-left: calc(50% - 50vw);
  padding: 64px max(22px, calc(50vw - 560px)) 104px;  /* extra bottom so the tool card overlaps */
  display: flex !important; flex-wrap: nowrap; align-items: center; gap: 40px !important;
  background:
    radial-gradient(900px 520px at 82% -12%, rgba(109,75,224,.42) 0%, transparent 60%),
    radial-gradient(760px 520px at -5% 115%, rgba(11,130,148,.34) 0%, transparent 55%),
    linear-gradient(160deg, #0e0b1c 0%, #1a1230 58%, #0e1622 100%) !important; }
/* inner Gradio wrappers transparent so the dark band shows (NOT #hero itself) */
#hero-left, #hero-right,
#hero .block, #hero .form, #hero .gr-group, #hero .gradio-html, #hero > * {
  background: transparent !important; border: 0 !important; box-shadow: none !important; }
#hero-left { flex: 1 1 520px; min-width: 0; }
#hero-right { flex: 0 0 380px; max-width: 400px; }
.hero-copy { max-width: 620px; animation: rise .5s ease both; }
.hero-eyebrow { color: #bff2f8 !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: .8rem; margin-bottom: 14px; }
.hero-title { font-family: "Fraunces", serif; color: #fff !important; font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.03; letter-spacing: -.02em; margin: 0 0 18px; }
.hero-accent { background: linear-gradient(100deg, #b39bff, #5fd5e6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { color: #ded8f0 !important; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.55; max-width: 560px; margin: 0 0 12px; }
.hero-trust { color: #b3add0 !important; font-size: .9rem; margin: 0; }
#hero-cta { gap: 14px !important; align-items: center; margin-top: 20px; flex-wrap: wrap; }
#hero-cta #hero-try { flex: 0 0 auto; }
#hero-try button { background: var(--accent) !important; color: #fff !important; border: none !important;
  font-weight: 700 !important; border-radius: 999px !important; padding: 13px 28px !important; min-height: 0 !important;
  box-shadow: 0 12px 32px rgba(109,75,224,.46) !important; transition: transform .15s, filter .15s !important; }
#hero-try button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.hero-ghost { color: #fff; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,.42);
  padding: 12px 22px; border-radius: 999px; transition: background .15s; white-space: nowrap; }
.hero-ghost:hover { background: rgba(255,255,255,.12); }

/* hero example-card grid (chat -> event), echoes the reference's message cards */
.hx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hx-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.25); animation: rise .5s ease both; }
.hx-from { color: #8f88b5; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.hx-chat { color: #ece9f8; font-size: .84rem; line-height: 1.35; margin-bottom: 8px; }
.hx-event { background: #fff; color: #1e1934; border-radius: 8px; padding: 6px 9px; font-size: .78rem;
  font-weight: 700; border-left: 3px solid #6d4be0; }
.hx-event + .hx-event { margin-top: 6px; }   /* rule 5: deadline + event entries */
.hx-assumed { color: #8f88b5; font-size: .85em; font-weight: 600; }  /* rule 2: inference flag */

/* ---- light marketing sections ---- */
.lp-section { max-width: 1080px; margin: 0 auto; padding: 78px 22px 6px; text-align: center; scroll-margin-top: 80px; }
.lp-eyebrow { color: var(--cyan); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; margin-bottom: 10px; }
.lp-title { font-family: "Fraunces", serif; color: var(--text); font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.01em; margin: 0 auto 34px; max-width: 780px; }
.lp-grid { display: grid; gap: 18px; text-align: left; }
.lp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lp-card, .lp-step, .lp-priv { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; box-shadow: 0 6px 20px rgba(45,32,90,.07); transition: transform .18s, box-shadow .18s; }
.lp-card:hover, .lp-step:hover, .lp-priv:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(45,32,90,.16); }
.lp-ico { font-size: 1.9rem; margin-bottom: 10px; line-height: 1; }
.lp-step-n { font-family: "Fraunces", serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 8px;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-card-t { font-size: 1.12rem; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.lp-card-d { color: var(--muted); font-size: .96rem; line-height: 1.55; margin: 0; }
.lp-card-d code { background: var(--surface2); padding: 1px 6px; border-radius: 6px; font-size: .86em; }
.lp-tool-head { padding-bottom: 2px; }

/* tool anchor offset for the sticky nav */
.tool-anchor { scroll-margin-top: 84px; }
#rv-results { scroll-margin-top: 84px; }

/* ---- footer (full-bleed dark band) ---- */
#site-footer { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 66px;
  background: linear-gradient(160deg, #0e0b1c 0%, #181030 100%); color: #fff; }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 58px 22px; text-align: center; }
/* !important: the global .prose h2 readability rule (top of file) would
   otherwise repaint this ink-dark on the dark band. */
.footer-cta-t, #site-footer .footer-cta-t { font-family: "Fraunces", serif; color: #fff !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 18px; }
a.footer-cta { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
  padding: 13px 28px; border-radius: 999px; box-shadow: 0 12px 32px rgba(109,75,224,.42); transition: transform .15s, filter .15s; }
a.footer-cta:hover { transform: translateY(-2px); filter: brightness(1.07); }
.footer-meta { color: #9b93c2; font-size: .86rem; margin-top: 18px; }
.footer-meta a { color: #bff2f8; text-decoration: none; }

/* Gradio's own footer (Use via API or MCP · Built with Gradio · Settings),
   relocated into the banner by wireFooter() in the injected JS — bare white
   hyperlinked text only: no pills, boxes, borders, or backgrounds. */
#site-footer footer, #site-footer footer * { background: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#site-footer footer { justify-content: center; margin-top: 10px; padding: 0 !important; }
#site-footer footer, #site-footer footer a, #site-footer footer button,
#site-footer footer span { color: #fff !important; font-size: .86rem; }
#site-footer footer a, #site-footer footer button { cursor: pointer;
  text-decoration: none; padding: 0 !important; margin: 0 4px; min-width: 0 !important; }
#site-footer footer a:hover, #site-footer footer button:hover {
  color: #fff !important; text-decoration: underline; }

/* ---- mobile ---- */
@media (max-width: 760px) {
  #site-nav .nav-inner { gap: 10px; padding: 10px 16px; }
  .nav-links { gap: 10px; }
  .nav-brand { font-size: 1rem; }
  .nav-top { font-size: .86rem; padding: 6px 2px; }
  .nav-menu { right: 0; left: auto; }  /* keep menus on-screen near the edge */
  .lp-grid-3 { grid-template-columns: 1fr; }
  #hero { padding: 46px 20px 40px; flex-direction: column; align-items: stretch; gap: 26px !important; }
  #hero-left, #hero-right { flex: 1 1 auto; max-width: 100%; }
  #hero-cta { justify-content: flex-start; }
  .lp-section { padding-top: 56px; }
}

/* ===================================================================== */
/* FAQ — left-aligned title + tabs + search + row-divider accordion       */
/* ===================================================================== */
.lp-faq-section { max-width: 1080px; margin: 0 auto; padding: 78px 22px 12px;
  text-align: left; scroll-margin-top: 80px; }
.lp-faq-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.lp-faq-h { font-family: "Fraunces", serif; color: var(--text);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; font-weight: 700; }

/* Search input — bottom-border-only with svg icon on the right */
.lp-faq-search { position: relative; display: flex; align-items: center;
  min-width: 260px; border-bottom: 1px solid var(--line); padding: 6px 0;
  transition: border-color .15s; }
.lp-faq-search:focus-within { border-color: var(--violet); }
.lp-faq-search input { flex: 1; border: 0; background: transparent; color: var(--text);
  font-size: .98rem; font-family: inherit; outline: none; padding: 4px 28px 4px 0;
  -webkit-appearance: none; appearance: none; }
.lp-faq-search input::placeholder { color: var(--muted); }
.lp-faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lp-faq-search svg { width: 18px; height: 18px; color: var(--muted);
  position: absolute; right: 2px; pointer-events: none; }

/* Tabs */
.lp-faq-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line);
  margin: 0 0 4px; }
.lp-faq-tab { background: transparent; border: 0; padding: 12px 0 14px;
  cursor: pointer; font-family: inherit; font-size: 1rem; color: var(--muted);
  font-weight: 600; position: relative; transition: color .15s; }
.lp-faq-tab:hover { color: var(--text); }
.lp-faq-tab.is-active { color: var(--text); }
.lp-faq-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: -1px; height: 2.5px; background: var(--violet); border-radius: 2px; }

/* Lists + rows */
.lp-faq-list { display: block; }
.lp-faq-list.is-hidden { display: none; }
.lp-faq-item { border-bottom: 1px solid var(--line); padding: 0; }
.lp-faq-q { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.05rem; color: var(--text); font-weight: 500; transition: color .15s; }
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q:hover { color: var(--violet); }
.lp-faq-qt { flex: 1; min-width: 0; }
.lp-faq-ico { flex: 0 0 26px; display: inline-flex; color: var(--muted);
  transition: color .15s; }
.lp-faq-ico svg { width: 26px; height: 26px; }
.lp-faq-q:hover .lp-faq-ico,
.lp-faq-item[open] .lp-faq-ico { color: var(--violet); }
.lp-faq-ico-v { transition: opacity .15s; }
.lp-faq-item[open] .lp-faq-ico-v { opacity: 0; }

.lp-faq-a { padding: 0 0 22px; color: var(--muted); line-height: 1.6;
  font-size: .97rem; max-width: 760px; }
.lp-faq-a p { margin: 0 0 10px; }
.lp-faq-a p:last-child { margin-bottom: 0; }
.lp-faq-a ul { margin: 6px 0 0; padding-left: 20px; }
.lp-faq-a li { margin-bottom: 4px; }
.lp-faq-a code { background: rgba(31,25,60,.06); padding: 1px 6px; border-radius: 5px;
  font-size: .9em; }
.lp-faq-a a { color: var(--violet); text-decoration: none; font-weight: 600; }
.lp-faq-a a:hover { text-decoration: underline; }
.lp-faq-a b { color: var(--text); }

/* Empty-state message when search filters everything out */
.lp-faq-empty { color: var(--muted); padding: 28px 0; text-align: center; }
.lp-faq-empty.is-hidden { display: none; }

@media (max-width: 720px) {
  .lp-faq-section { padding-top: 56px; }
  .lp-faq-head { align-items: flex-start; }
  .lp-faq-search { min-width: 100%; }
  .lp-faq-tabs { gap: 22px; }
}

/* ===================================================================== */
/* Hackathon: Submission compliance scorecard                            */
/* ===================================================================== */

/* standalone nav link (between the dropdown groups and the CTA) */
/* Home / Submission share the SAME typography as the Learn/Workspace tops */
.nav-solo { background: none; border: 0; cursor: pointer; color: var(--muted) !important; font-weight: 600;
  font-size: .92rem; padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; text-decoration: none; transition: color .15s; }
.nav-solo:hover { color: var(--text) !important; }

/* submission scorecard */
.sub-wrap { max-width: 920px; margin: 0 auto; padding: 10px 4px 28px; }
.sub-group { margin: 20px 0; }
.sub-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.sub-lead { color: var(--text); line-height: 1.6; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--violet); border-radius: 12px; padding: 14px 16px; box-shadow: 0 3px 12px rgba(45,32,90,.06); }
.sub-lead code { background: var(--surface2); padding: 1px 6px; border-radius: 6px; }
.sub-row { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 3px 12px rgba(45,32,90,.06); }
.sub-pill { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: .9rem; }
.sub-ok { background: rgba(21,137,79,.14); color: var(--mint); }
.sub-warn { background: rgba(179,112,10,.16); color: var(--amber); }
.sub-rt { min-width: 0; }
.sub-title { font-weight: 700; color: var(--text); }
.sub-ev { color: var(--muted); font-size: .92rem; margin-top: 2px; line-height: 1.5; }
.sub-ev a { color: var(--cyan); }
.sub-ev code, .sub-title code { background: var(--surface2); padding: 1px 6px; border-radius: 6px; }

/* ===================================================================== */
/* Reference-style redesign: nav pill · elevated tool card · 2-col input  */
/* ===================================================================== */

/* fine-tuned-model pill (top-right of the nav) — links to the model */
.nav-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(21,137,79,.12); color: var(--mint); font-size: .78rem; font-weight: 700;
  white-space: nowrap; text-decoration: none; transition: filter .15s; }
.nav-status:hover { filter: brightness(1.05); }
.nav-status b { font-weight: 800; }

/* elevated tool card that overlaps the hero (the agent, up top) */
#tool-card { max-width: 1000px; margin: -84px auto 0 !important; position: relative; z-index: 5;
  background: #fff !important; border: 1px solid var(--line) !important; border-radius: 20px !important;
  box-shadow: 0 30px 70px rgba(20,12,50,.28) !important; padding: 26px !important; scroll-margin-top: 80px; }
.tc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.tc-eyebrow { color: var(--cyan); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; margin-bottom: 6px; }
.tc-title { font-family: "Fraunces", serif; font-size: 1.7rem; color: var(--text); margin: 0; line-height: 1.1; }
/* "Powered by fine-tuned Gemma 4" — green pill, right side of the tool-card head */
.tc-poweredby { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: 999px; background: rgba(21,137,79,.10); border: 1px solid rgba(21,137,79,.35);
  color: var(--mint); font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: background .15s; }
.tc-poweredby:hover { background: rgba(21,137,79,.18); }
.tc-poweredby b { color: var(--mint); font-weight: 800; }

/* ---- mode theme: the ONE decision point recolors the whole workflow card.
   Offline = forest green ("local, sealed"); Online = cyan ("cloud-connected").
   data-mode is set by wireModeTheme() on load + the mode.change JS. ---- */
#tool-card { --mode-c: #15894f; --mode-soft: rgba(21,137,79,.07);
  --mode-line: rgba(21,137,79,.35); }
#tool-card[data-mode="online"] { --mode-c: #0e8ea0; --mode-soft: rgba(14,142,160,.09);
  --mode-line: rgba(14,142,160,.4); }
#tool-card { border-top: 4px solid var(--mode-c) !important;
  background: linear-gradient(var(--mode-soft), transparent 170px), #fff !important;
  transition: border-color .35s ease, background .35s ease; }

/* ---- Offline / Online mode toggle, inside the full-width mode band ---- */
#mode-band { background: var(--mode-soft) !important; border: 1px solid var(--mode-line) !important;
  border-radius: 14px !important; padding: 12px 16px 10px !important; margin-bottom: 6px;
  transition: background .35s ease, border-color .35s ease; }
/* ONE box only: flatten every Gradio wrapper inside the band (the radio's and
   the note's own block chrome would otherwise draw nested containers).
   :not(label) — Gradio puts data-testid on the radio OPTION labels too, and
   this rule must not strip their button/pill styling below. */
#mode-band .block, #mode-band .form, #mode-band fieldset, #mode-band .gradio-html,
#mode-band > div, #mode-band [data-testid]:not(label) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
/* ONE enclosing pill around both options — the eye lands here; the pill's
   border wears the active mode color. !important throughout: the band's
   flatten rule zeroes block chrome and must not strip the pill itself. */
#mode-toggle { display: flex !important; justify-content: center; gap: 0;
  width: fit-content; margin: 2px auto 8px !important;
  background: #fff !important; border: 2px solid var(--mode-c) !important;
  border-radius: 999px !important; padding: 4px !important;
  box-shadow: 0 4px 14px rgba(20,12,50,.10) !important;
  transition: border-color .35s ease; }
#mode-toggle .wrap, #mode-toggle > div { justify-content: center; gap: 6px; }
/* each option is its OWN button: outlined + raised when idle (clearly
   clickable), filled with the mode color when selected. Double-id selector
   out-ranks the band's flatten rule. */
#mode-band #mode-toggle label {
  background: #fff !important; border: 1.5px solid var(--line) !important;
  border-radius: 999px !important; padding: 8px 20px !important; cursor: pointer;
  font-weight: 700 !important; color: var(--text) !important;
  box-shadow: 0 1px 3px rgba(20,12,50,.14) !important;
  margin: 0 2px !important; transition: background .25s, color .25s, border-color .25s,
  transform .1s; }
#mode-band #mode-toggle label:hover { border-color: var(--mode-c) !important; }
#mode-band #mode-toggle label:active { transform: translateY(1px); }
#mode-band #mode-toggle label:has(input:checked) {
  background: var(--mode-c) !important; border-color: var(--mode-c) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15) !important; }
#mode-band #mode-toggle label:has(input:checked) span { color: #fff !important; }
#mode-toggle input[type="radio"] { display: none !important; }
.mode-note { display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; text-align: center; color: var(--muted); font-size: .85rem; margin: 0 0 2px; }
.mode-note code { background: var(--surface2); padding: 1px 5px; border-radius: 5px; }
.mode-chip { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--mode-c); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; transition: background .35s ease; }

/* ---- numbered workflow steps, tied by a dashed tail under each chip ----
   chips + connectors wear the active mode color (green offline / cyan online) */
.flow-step { position: relative; display: flex; align-items: center; gap: 8px;
  margin: 20px 0 8px; }
.flow-step::before { content: ""; position: absolute; left: 10px; top: 100%;
  height: 20px; border-left: 2px dashed rgba(109,75,224,.45); }
#tool-card .flow-step::before { border-color: var(--mode-line); transition: border-color .35s ease; }
#tool-card .step-chip { background: var(--mode-c); transition: background .35s ease; }
.flow-t { font-weight: 700; color: var(--text); }
.flow-sub { color: var(--muted); font-size: .82rem; font-weight: 500; }
.flow-gcal { margin: -2px 0 10px 30px; }
.flow-gcal .gcal-state { color: var(--mint); font-size: .85rem; }

/* two-column ① upload / ② paste */
#io-cols { gap: 20px !important; align-items: stretch; }
.io-col { min-width: 0; }
.io-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); font-size: .95rem; margin-bottom: 8px; }
.step-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 800; }
#io-drop { border: 2px dashed rgba(31,25,60,.22) !important; border-radius: 14px !important;
  background: var(--surface2) !important; }

/* char counter + helper line under the paste box */
.rv-help { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px;
  color: var(--muted); font-size: .8rem; }
.rv-counter { font-variant-numeric: tabular-nums; color: var(--muted); }

/* centered primary / secondary actions + sample link */
#rv-actions { justify-content: center !important; gap: 12px !important; margin-top: 16px; }
#rv-analyze button { min-width: 200px; }
.rv-secondary button { background: var(--surface2) !important; color: var(--text) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important; font-weight: 600 !important; }
.rv-linkbtn { display: flex; justify-content: center; margin-top: 8px; }
.rv-linkbtn button { background: none !important; border: none !important; box-shadow: none !important;
  color: var(--cyan) !important; font-weight: 600 !important; min-height: 0 !important; }

/* privacy-safe trace card */
.trace-card { background: var(--surface2) !important; border: 1px solid var(--line) !important;
  border-radius: 12px !important; padding: 12px 14px !important; margin-top: 14px; }
.trace-desc { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.trace-ok { color: var(--mint); font-size: .85rem; font-weight: 600; margin-top: 6px; }

/* screenshot-attached hint */
.shot-status { color: var(--cyan); font-size: .82rem; font-weight: 600; margin-top: 6px; }

/* mobile */
@media (max-width: 760px) {
  #io-cols { flex-direction: column; }
  #tool-card { margin-top: -56px !important; padding: 18px !important; border-radius: 16px !important; }
  .tc-head { align-items: flex-start; }
  .hx-grid { grid-template-columns: 1fr; }
  .nav-status { display: none; }
}

/* hero trust badges (under the copy, on the dark band) */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hbadge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff;
  font-size: .8rem; font-weight: 700; }

/* onboarding panel (inside the tool card) — an accordion: open on first visit,
   collapsed (but always reopenable) once the device has memory. */
#onboard { background: var(--surface2) !important; border: 1px solid var(--line) !important;
  border-radius: 14px !important; padding: 12px 18px !important; margin-bottom: 16px; }
#onboard .label-wrap span, #onboard > button span {
  font-family: "Fraunces", serif !important; font-size: 1.1rem; font-weight: 700;
  color: var(--text) !important; }
.ob-sub { color: var(--muted); font-size: .9rem; margin: 4px 0 12px; }

/* per-user Google Calendar connect link (in the export bar) */
.gcal-connect { display: inline-block; margin-top: 6px; color: var(--cyan); font-weight: 600;
  text-decoration: none; cursor: pointer; font-size: .9rem; }
.gcal-connect:hover { text-decoration: underline; }
.gcal-state { color: var(--mint); font-weight: 700; font-size: .85rem; margin-left: 4px; }

/* ---- condensed results card: events + export in ONE area ---- */
#rv-resultcard {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: 16px !important; padding: 16px 18px !important;
  box-shadow: var(--shadow); margin-top: 12px;
}
/* the export cluster becomes a toolbar inside the card — drop its own panel
   chrome, separate it from the events with a hairline */
#rv-resultcard #rv-export {
  margin-top: 12px; padding: 12px 0 0 !important;
  background: transparent !important; border: none !important;
  border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  box-shadow: none;
}
#rv-resultcard #rv-export button { min-height: 42px !important; }
/* keep the export toolbar reachable on a phone (re-assert the sticky bar at
   the new, more specific selector) */
@media (max-width: 640px) {
  #rv-resultcard #rv-export {
    position: sticky; bottom: 0; z-index: 20; padding: 10px !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(8px); border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(45,32,90,.18);
  }
}
/* prominent location line on the condensed event card */
.evx-loc { font-size: .92rem; font-weight: 600; color: var(--text); margin-top: 8px; }
/* arrival-context callout (per-event notes, e.g. "arrive 15 min early") */
.evx-notes {
  margin-top: 8px; padding: 6px 10px; font-size: .86rem; color: var(--text);
  background: rgba(240,180,60,.12); border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
}
/* the pre-generated .ics widget stays as the no-JS download fallback — slim it */
#ics-file { margin-top: 8px; }
#ics-file, #ics-file .file-preview { max-height: 88px; overflow-y: auto; }

/* ---- unified "Connect your calendar" block (Step 2a) ---- */
.cal-connect { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px;
  padding: 10px 14px; background: var(--surface2); border-radius: 10px; }
.cal-provider { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: .9rem; }
.cal-prov-name { font-weight: 600; min-width: 160px; }
.cal-cap { color: var(--muted); font-size: .82rem; }
.cal-privacy { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.cal-provider .gcal-connect { margin-top: 0; }
.cal-provider .gcal-disconnect { display: none; color: var(--muted);
  font-size: .78rem; text-decoration: none; cursor: pointer; }
.cal-provider .gcal-disconnect:hover { text-decoration: underline; }
/* connected: collapse the CTA, show ✓ + a quiet disconnect */
.cal-provider.is-connected .gcal-connect { display: none; }
.cal-provider.is-connected .gcal-disconnect { display: inline; }
.cal-provider.is-connected .cal-cap-online { display: none; }
/* offline mode: Google sync needs the cloud — swap the CTA for a hint */
.cal-provider[data-provider="google"] .cal-cap-offline { display: none; }
#tool-card[data-mode="offline"] .cal-provider[data-provider="google"] .gcal-connect { display: none; }
#tool-card[data-mode="offline"] .cal-provider[data-provider="google"] .cal-cap-online { display: none; }
#tool-card[data-mode="offline"] .cal-provider[data-provider="google"]:not(.is-connected) .cal-cap-offline { display: inline; }

/* ---- Google connection badge in the export toolbar (#rv-export) ---- */
.gcal-badge-wrap { margin-top: 8px; }
.gcal-badge { display: inline-block; font-size: .78rem; color: var(--muted);
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; }
.gcal-badge.is-on { color: var(--mint); border-color: currentColor; font-weight: 600; }
/* the Offline workflow hides Google everywhere — badge included */
#tool-card[data-mode="offline"] .gcal-badge-wrap { display: none; }
/* ---- processing pipeline card (live agent stepper inside the trace accordion) ---- */
.pipe-card { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow); }
.pipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pipe-title { font-size: .9rem; font-weight: 700; color: var(--text); }
.pipe-card[data-state="done"] .pipe-title { color: var(--mint); }
.pipe-card[data-state="error"] .pipe-title { color: var(--coral); }
/* the base rule forces Hanken Grotesk on everything — the clock must stay mono
   so the ticking digits don't jitter */
.pipe-clock { font-family: ui-monospace, Menlo, Consolas, monospace !important;
  font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); }
.pipe-track { position: relative; display: flex; align-items: center; gap: 4px;
  margin-top: 12px; padding: 6px 2px; overflow: hidden; border-radius: 10px; }
.pipe-stage { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px;
  background: var(--surface2); transition: background .25s ease; }
.pipe-badge { width: 24px; height: 24px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: .72rem; font-weight: 800;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease, color .25s ease; }
.pipe-lab { font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.pipe-chev { flex: 0 0 auto; color: var(--muted); opacity: .5; font-weight: 700; }
.pipe-stage.is-active { background: rgba(109,75,224,.10); }
.pipe-stage.is-active .pipe-badge { background: #6d4be0; border-color: #6d4be0; color: #fff;
  --c: #6d4be0; animation: pulse 1.4s infinite; }   /* reuses the Activity tab's pulse keyframes */
.pipe-stage.is-active .pipe-lab { color: var(--text); }
.pipe-stage.is-done { background: rgba(21,137,79,.08); }
.pipe-stage.is-done .pipe-badge { background: var(--mint); border-color: var(--mint); color: #fff; }
.pipe-stage.is-done .pipe-lab { color: var(--mint); }
.pipe-stage.is-skip { opacity: .45; }
.pipe-stage.is-skip .pipe-badge { background: transparent; border-style: dashed; }
.pipe-stage.is-error .pipe-badge { background: var(--coral); border-color: var(--coral); color: #fff; }
/* indeterminate light sweep across the whole track while running */
.pipe-shimmer { position: absolute; inset: 0; pointer-events: none; display: none;
  width: 36%; background: linear-gradient(100deg, transparent 0%,
    rgba(109,75,224,.14) 45%, rgba(14,142,160,.14) 55%, transparent 100%); }
.pipe-card[data-state="running"] .pipe-shimmer { display: block;
  animation: pipe-sweep 2.5s ease-in-out infinite; }
@keyframes pipe-sweep { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
.pipe-cap { margin-top: 8px; text-align: center; font-size: .8rem; color: var(--muted); }
/* static post-run summary: speed / confidence / evidence / counts */
.pipe-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.pipe-chip { padding: 4px 10px; border-radius: 999px; background: var(--surface2);
  border: 1px solid var(--line); font-size: .75rem; font-weight: 700; color: var(--text);
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-chip .pipe-k { color: var(--muted); font-weight: 600; margin-right: 4px;
  text-transform: uppercase; font-size: .66rem; letter-spacing: .06em; }
.pipe-chip b { font-family: ui-monospace, Menlo, Consolas, monospace !important; }
.pipe-chip.is-high { color: var(--mint); }
.pipe-chip.is-review { color: var(--amber); }
@media (prefers-reduced-motion: reduce) {
  .pipe-card[data-state="running"] .pipe-shimmer { display: none !important; }
  .pipe-stage.is-active .pipe-badge { animation: none; }
}

/* ---- full-word pipeline stage labels: small, one line, equal-width boxes ---- */
.pipe-lab { font-size: .58rem; letter-spacing: .03em; white-space: nowrap; }
.pipe-stage { padding: 6px 1px; }

/* ---- single export surface: the per-event "Add to" links own exporting; the
   header gains an all-events iCal link when 2+ events are found ---- */
.evx-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; }
.evx-add-all { font-size: .8rem; font-weight: 700; color: var(--cyan);
  text-decoration: none; white-space: nowrap; }
.evx-add-all:hover { text-decoration: underline; }

/* ---- consistent page width: Agent/Activity/Memory/Feed match the home
   page's 1000px tool card (capping + centering only — internal layout of
   the pages is untouched) ---- */
.page-wrap { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; width: 100%; }

/* ---- Activity tab: metric values in the brand violet (the This-week cards
   and the run tiles both render through .tile-v). Resets the gradient
   text-clip so the color actually shows regardless of the base rule's state. ---- */
.tile-v { color: var(--violet); background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; }

/* ---- mobile responsiveness fixes (phone) ---- */

/* Top nav: on a phone the brand wordmark + 5 links overflow a single row
   (logo overlaps "Home", "Memory" clipped, "Feed" off-screen). Stack the brand
   above a horizontally-scrollable link strip so nothing overlaps and every
   page stays reachable. Reuses the classes from _nav_html(). */
@media (max-width: 600px) {
  #site-nav .nav-inner { flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 6px; padding: 8px 14px; }
  .nav-brand { justify-content: flex-start; font-size: .98rem; }
  /* WRAP, don't scroll: a horizontal overflow-x:auto strip swallowed taps on a
     phone (a touch with any micro-movement reads as a scroll, and links past the
     fold needed scrolling first) — which left Submission/Memory/Feed feeling
     dead. Wrapping keeps every link fully on-screen and plainly tappable. */
  .nav-links { width: 100%; gap: 10px 16px; flex-wrap: wrap; }
  .nav-solo { flex: 0 0 auto; white-space: nowrap; padding: 8px 6px;
    touch-action: manipulation; }
}

/* Activity "Activity by stage" chart shares a 2-col row with the timeline, so on
   a phone it's stuck at half width and the x-axis stage labels collapse into
   garbled overlapping text. Stack the row so the chart renders full-width. */
@media (max-width: 760px) {
  .act-chart-row { flex-direction: column !important; }
  .act-chart-row > * { width: 100% !important; }
}

/* Footer: keep "on Hugging Face" (its own <a> in .footer-meta) on one line
   instead of breaking as "on Hugging" / "Face". */
.footer-meta a { white-space: nowrap; }

/* Hardware-degraded banner — revealed by app.py's /health probe (inline JS). */
#status-banner-host { padding: 0; margin: 0; }
.status-banner {
  display: none;
  padding: 10px 16px;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  background: var(--accent);
  color: #fff;
}