/* lite.css — Crafter Lite on top of Crafter's shell (served after the shell's own styles).
   2026-10-23: restyled to the Serenity Star UI guidelines (light theme): Rubik, one brand blue
   (star-500, no gradients, no second accent), white surfaces separated by 1px borders, 12px corners,
   36px controls, segmented Chat/Design switch, blue header bars on the panels, primary/card chat
   bubbles, top-center toasts, a visible 2px focus ring, and an EmptyState on the empty canvas.
   Also hides what Lite doesn't have: Settings, projects, workspaces, Spaces, publishing, combining
   screens, the Design panel's tabs (Features only), history and "shared with you".
   Only tokens below carry color values; every rule after them references a token. */

@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/lite/fonts/rubik-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/lite/fonts/rubik-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/lite/fonts/rubik-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/lite/fonts/rubik-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/lite/fonts/rubik-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/lite/fonts/rubik-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens (Serenity Star, light) ---------- */
:root[data-lite][data-theme] {
  --star-50: #edf1ff; --star-100: #dce2ff; --star-200: #c2cbff; --star-400: #6e82ff;
  --star-500: #4862ff; --star-600: #353fe0;
  --ink-900: #050a2b; --ink-700: #21264d; --ink-500: #606060; --ink-300: #6e6e6e;
  --gray-50: #f9f9f9; --border-color: #e1e4e8;

  --background: #ffffff; --card: #ffffff; --popover: #ffffff; --muted: var(--gray-50);
  --foreground: var(--ink-900); --muted-foreground: var(--ink-300);
  --primary: var(--star-500); --primary-foreground: #ffffff; --primary-hover: var(--star-600);
  --secondary: var(--star-50); --secondary-foreground: var(--star-600);
  --accent-fill: var(--star-50); --accent-foreground: var(--star-600);
  --header-bar: var(--star-500); --header-bar-foreground: #ffffff; --header-bar-hover: var(--star-600);
  --ring: var(--star-400);
  --success-bg: #d9f3e4; --success-fg: #047857;
  --danger-bg-t: #fde4e3; --danger-fg: #b91c1c;
  --warning-bg: #fdf0dc; --warning-fg: #b45309;
  --info-bg: #dde3ff; --info-fg: var(--star-600);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --scrim-50: rgba(0, 0, 0, .5);
  --font-sans: "Rubik", ui-sans-serif, system-ui, sans-serif;

  /* the shell's own token names, mapped onto the guide */
  --bg: var(--background); --surface: var(--card); --surface-2: var(--muted); --border: var(--border-color);
  --ink: var(--foreground); --ink-dim: var(--muted-foreground);
  --accent: var(--primary); --accent-2: var(--primary);
  --accent-soft: var(--star-50); --accent-line: var(--star-200); --accent2-soft: var(--star-50);
  --danger: var(--danger-fg); --danger-ink: var(--danger-fg); --danger-bg: var(--danger-bg-t);
  --ok: var(--success-fg); --ok-ink: var(--success-fg); --ok-bg: var(--success-bg);
  --field-error: var(--danger-fg);
  --scrim: var(--scrim-50); --scrim-strong: var(--scrim-50);
  --shadow-1: var(--shadow-sm); --shadow-2: var(--shadow-sm); --shadow-3: var(--shadow-sm);
  color-scheme: light;
}

/* ---------- not in Lite ---------- */
#btn-settings, #project-chip, #workspace-switch, #btn-spaces, #btn-publish, #btn-merge,
#drawer-scope, #project-links, #space-cards, #shared-section, #history-section,
#design-tabs, #share-theme, #ambient, #settings-panel, #settings-veil {
  display: none !important;
}

/* ---------- type ---------- */
:root[data-lite] body, :root[data-lite] button, :root[data-lite] input,
:root[data-lite] textarea, :root[data-lite] select { font-family: var(--font-sans); }
:root[data-lite] body { background: var(--background); color: var(--foreground); }

/* ---------- focus: a 2px ring on every interactive element ---------- */
:root[data-lite] :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 1px;
}

/* ---------- top bar ---------- */
:root[data-lite] #topbar { background: var(--card); border-bottom: 1px solid var(--border); padding: 8px 16px; gap: 12px; min-height: 52px; box-sizing: border-box; }
:root[data-lite] #brand {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--foreground); font-size: .875rem; font-weight: 600; letter-spacing: 0;
}
:root[data-lite] #conv-chip {
  background: transparent; border: 0; border-radius: 0; padding: 0;
  font-size: .875rem; color: var(--muted-foreground); max-width: 34vw;
}
:root[data-lite] #project-chip + #conv-chip::before, :root[data-lite] #conv-chip::before { content: "/ "; color: var(--muted-foreground); }

/* buttons: 36px, 12px corners, outline by default */
:root[data-lite] .tbtn {
  height: 36px; box-sizing: border-box; padding: 0 16px; gap: 8px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background);
  color: var(--foreground); font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-xs);
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
}
:root[data-lite] .tbtn:has(svg) { padding-left: 12px; }
:root[data-lite] .tbtn:hover { background: var(--accent-fill); border-color: var(--border); }
:root[data-lite] .tbtn svg { width: 16px; height: 16px; color: currentColor; fill: none; }
:root[data-lite] .tbtn.icon-only { width: 36px; padding: 0; justify-content: center; }
:root[data-lite] #btn-drawer { width: 36px; padding: 0; justify-content: center; }
/* Save: "Saved" while the open screen is saved */
:root[data-lite] #btn-pin.pinned { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--star-200); }
:root[data-lite] #btn-pin.pinned svg { fill: none; color: currentColor; transform: none; }

/* ---------- empty canvas: EmptyState on a card ---------- */
:root[data-lite] #canvas-host { background: var(--background); }
:root[data-lite] #idle .aurora, :root[data-lite] #idle .ringwrap { display: none !important; }
:root[data-lite] #idle .lite-empty {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  width: min(480px, calc(100% - 32px)); box-sizing: border-box; padding: 64px 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
:root[data-lite] #idle .lite-tile {
  width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--star-50); color: var(--secondary-foreground);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
:root[data-lite] #idle .lite-tile svg { width: 24px; height: 24px; }
:root[data-lite] #idle .hint {
  font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: 0;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--foreground);
  animation: none; text-shadow: none;
}
:root[data-lite] #idle .lite-caption { font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); max-width: 36ch; }

/* ---------- composer ---------- */
:root[data-lite] #prompt-bar { background: var(--card); border-top: 1px solid var(--border); padding: 12px 16px; gap: 12px; align-items: flex-end; }
:root[data-lite] #prompt {
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); color: var(--foreground); font-size: .9375rem; padding: 7px 12px; min-height: 36px; box-sizing: border-box;
}
:root[data-lite] #prompt::placeholder { color: var(--muted-foreground); }
:root[data-lite] #prompt:focus { border-color: var(--ring); outline: 2px solid var(--ring); outline-offset: 1px; }
:root[data-lite] #send {
  width: 36px; height: 36px; padding: 0; border-radius: var(--radius-md); background: var(--primary);
  color: var(--primary-foreground); box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease-in-out;
}
:root[data-lite] #send:hover:not(:disabled) { background: var(--primary-hover); }
:root[data-lite] #send:disabled { opacity: .5; }
:root[data-lite] #send svg { width: 16px; height: 16px; }
:root[data-lite] #btn-attach { width: 36px; height: 36px; padding: 0; justify-content: center; }
/* connection: only shown when it isn't connected (a warning badge) */
:root[data-lite] #conn { display: none; }
:root[data-lite] #conn.lite-off {
  display: inline-flex; align-self: center; min-width: 0; padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--warning-bg); color: var(--warning-fg); font-size: .75rem; line-height: 16px; font-weight: 500;
}

/* Chat | Design: a SegmentedControl */
:root[data-lite] .oc-seg { align-self: flex-end; padding: 4px; gap: 0; border: 0; border-radius: var(--radius-full); background: var(--muted); }
:root[data-lite] .oc-seg button {
  height: 28px; padding: 0 14px; border-radius: var(--radius-full); color: var(--muted-foreground);
  font-size: .875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
}
:root[data-lite] .oc-seg button:hover { color: var(--ink-700); }
:root[data-lite] .oc-seg button.on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
:root[data-lite] .oc-seg .dz-badge { background: transparent; color: var(--accent-foreground); padding: 0; min-width: 0; font-weight: 600; }

/* ---------- side panels (Chat, Design): opaque card, blue header bar ---------- */
:root[data-lite] #design-panel, :root[data-lite] #chat-panel {
  background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
:root[data-lite] .dz-head { background: var(--header-bar); color: var(--header-bar-foreground); padding: 14px 16px; align-items: center; }
:root[data-lite] .dz-title { font-size: 1.125rem; line-height: 1.3; font-weight: 600; color: var(--header-bar-foreground); }
:root[data-lite] .dz-sub { font-size: .8125rem; line-height: 1.4; color: var(--header-bar-foreground); }
:root[data-lite] :is(#design-panel, #chat-panel) .dz-head .mini {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--header-bar-foreground); display: inline-flex; align-items: center; justify-content: center;
}
:root[data-lite] :is(#design-panel, #chat-panel) .dz-head .mini:hover { background: var(--header-bar-hover); }
:root[data-lite] .dz-head .mini svg { width: 20px; height: 20px; }
:root[data-lite] .dz-body { padding: 16px; gap: 12px; }
:root[data-lite] .dz-hint { border: 0; border-radius: 0; padding: 0; font-size: .8125rem; color: var(--muted-foreground); }

/* bubbles: user = primary, assistant = card */
:root[data-lite] .chat-msg { font-size: .9375rem; line-height: 1.5; border-radius: var(--radius-lg); padding: 10px 14px; }
:root[data-lite] .chat-msg.q { background: var(--primary); border: 0; color: var(--primary-foreground); border-bottom-right-radius: var(--radius-sm); }
:root[data-lite] .chat-msg.a { background: var(--card); border: 1px solid var(--border); color: var(--foreground); border-bottom-left-radius: var(--radius-sm); }
:root[data-lite] .chat-msg.a.pending { color: var(--muted-foreground); font-style: normal; font-size: .8125rem; }
:root[data-lite] .chat-msg.a.error { border-color: var(--danger-fg); color: var(--danger-fg); }
:root[data-lite] .dz-msg .chat-msg { max-width: 85%; }

/* small buttons in the panels: 32px, outline; primary = brand fill; danger = destructive text */
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini {
  height: 32px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--background); color: var(--foreground); font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-xs);
}
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini:hover { background: var(--accent-fill); border-color: var(--border); }
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini.primary:hover { background: var(--primary-hover); }
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini.danger { color: var(--danger-fg); }
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini.danger:hover { background: var(--danger-bg-t); }
:root[data-lite] :is(#design-panel, #chat-panel) .dz-body .mini.link { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--secondary-foreground); text-decoration: underline; }

/* feature cards */
:root[data-lite] .dz-group-h { font-size: .75rem; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--muted-foreground); }
:root[data-lite] .dz-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; gap: 12px; background: var(--card); box-shadow: var(--shadow-sm); }
:root[data-lite] .dz-card.will-add { border-color: var(--primary); }
:root[data-lite] .dz-card.applied { border-color: var(--border); background: var(--card); }   /* applied = a success badge only */
:root[data-lite] .dz-card.will-remove { border-color: var(--danger-fg); }
:root[data-lite] .dz-card.blocked { border-color: var(--warning-fg); }
:root[data-lite] .dz-row input[type=checkbox], :root[data-lite] .dz-card.applied .dz-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); }
:root[data-lite] .dz-ftitle { font-size: .9375rem; font-weight: 600; color: var(--foreground); }
:root[data-lite] .dz-desc { font-size: .875rem; line-height: 1.5; color: var(--ink-500); }
:root[data-lite] .dz-meta { font-size: .8125rem; color: var(--muted-foreground); }
:root[data-lite] .dz-tag { font-size: .75rem; line-height: 16px; font-weight: 500; padding: 2px 10px; border-radius: var(--radius-full); background: var(--muted); color: var(--ink-700); }
:root[data-lite] .dz-tag.ok { background: var(--success-bg); color: var(--success-fg); }
:root[data-lite] .dz-tag.add { background: var(--info-bg); color: var(--info-fg); }
:root[data-lite] .dz-tag.rem { background: var(--danger-bg-t); color: var(--danger-fg); }
:root[data-lite] .dz-tag.edit { background: var(--info-bg); color: var(--info-fg); }
:root[data-lite] .dz-tag.warn { background: var(--warning-bg); color: var(--warning-fg); }
:root[data-lite] .dz-tag.ver { background: transparent; border: 1px solid var(--border); }
:root[data-lite] .dz-uses { background: var(--muted); border-radius: var(--radius-sm); padding: 12px; gap: 8px; }
:root[data-lite] .dz-uses-h { font-size: .75rem; letter-spacing: .08em; color: var(--muted-foreground); }
:root[data-lite] .dz-use { font-size: .8125rem; }
:root[data-lite] .dz-actions { gap: 8px; }
:root[data-lite] .dz-note { border-radius: var(--radius-sm); font-size: .8125rem; }
:root[data-lite] .dz-note.info { background: var(--info-bg); color: var(--info-fg); }
:root[data-lite] .dz-note.warn { background: var(--danger-bg-t); color: var(--danger-fg); }

/* apply bar: an opaque sticky bar, one primary action */
:root[data-lite] .dz-apply { background: var(--card); border-top: 1px solid var(--border); padding: 16px 24px; gap: 12px; }
:root[data-lite] .dz-apply-hint { font-size: .8125rem; color: var(--muted-foreground); }
:root[data-lite] #design-apply-btn {
  height: 36px; padding: 0 16px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
  font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-xs); transition: background-color .15s ease-in-out;
}
:root[data-lite] #design-apply-btn:hover:not(:disabled) { background: var(--primary-hover); }
:root[data-lite] #design-apply-btn:disabled { background: var(--primary); color: var(--primary-foreground); opacity: .5; }

/* the latest exchange above the features */
.dz-latest { display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.dz-latest::before { content: "Latest reply"; font-size: .75rem; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.dz-latest:empty { display: none; }

/* ---------- drawer (screens and drafts) ---------- */
:root[data-lite] #drawer { background: var(--card); border-right: 1px solid var(--border); box-shadow: var(--shadow-sm); }
:root[data-lite] #drawer h3 { font-size: .75rem; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--muted-foreground); }
:root[data-lite] .row { border-radius: var(--radius-md); font-size: .875rem; }
:root[data-lite] .row:hover { background: var(--accent-fill); }
:root[data-lite] .row.active { outline: 0; background: var(--secondary); color: var(--secondary-foreground); }
:root[data-lite] #drawer .row.active .name::before { content: none; }
:root[data-lite] .list .empty { font-style: normal; font-size: .8125rem; color: var(--muted-foreground); }
:root[data-lite] .section .head .mini { height: 32px; padding: 0 12px; border-radius: var(--radius-md); color: var(--secondary-foreground); background: var(--secondary); border: 0; font-weight: 500; }

/* ---------- feedback ---------- */
/* toasts: top-center, popover surface, status in the icon/word color */
:root[data-lite] #toast {
  top: 64px; bottom: auto; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); color: var(--danger-fg); font-size: .875rem; padding: 10px 16px;
}
:root[data-lite] #toast.ok { background: var(--popover); border-color: var(--border); color: var(--foreground); }
:root[data-lite] #busy { top: 64px; background: var(--popover); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--muted-foreground); font-size: .8125rem; }

/* share page and gate */
:root[data-lite] .share-open, :root[data-lite] #share-open { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
:root[data-lite] .share-open:hover, :root[data-lite] #share-open:hover { background: var(--primary-hover); }
:root[data-lite] .oc-share-gate { background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
:root[data-lite] .oc-share-gate .mini { height: 36px; padding: 0 16px; border-radius: var(--radius-md); }
:root[data-lite] .oc-share-gate .mini.primary { background: var(--primary); color: var(--primary-foreground); }
:root[data-lite] .oc-share-veil { background: var(--scrim-50); }

@media (prefers-reduced-motion: reduce) {
  :root[data-lite] * { transition: none !important; }
}
@media (max-width: 640px) {
  :root[data-lite] #conv-chip { display: none; }
  :root[data-lite] #topbar .tbtn span { display: none; }
  :root[data-lite] #topbar .tbtn { width: 36px; padding: 0; justify-content: center; }
}

/* ---------- sign-in page (login.html through LiteLogic.LoginFor) ---------- */
:root[data-lite] body > .card {
  width: 400px; padding: 24px; border-radius: var(--radius-md); background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-align: left;
}
:root[data-lite] body > .card .brand { font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--foreground); margin: 0 0 8px; }
:root[data-lite] body > .card .sub { font-size: .9375rem; color: var(--ink-500); margin: 0 0 24px; }
:root[data-lite] body > .card a.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px;
  border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
  font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-xs); transition: background-color .15s ease-in-out;
}
:root[data-lite] body > .card a.btn:hover { background: var(--primary-hover); }
:root[data-lite] body > .card .msg { color: var(--danger-fg); font-size: .8125rem; }
:root[data-lite] .amb { display: none !important; }