ui_theme.py

"""
The suite's visual design (loaded after every other style, so it decides the look).

Principles: one calm palette (deep navy brand, indigo for interaction, magenta only as the brand accent), Inter for
legible UI text, one slim sticky top bar with the brand and account actions, a plain text menu that scrolls sideways on
phones instead of filling the screen, the main action (drop a Word file) visible without scrolling, consistent cards,
spacing and radii, and no emoji in navigation. UI_THEME=0 turns this layer off (the previous look returns).
"""
import os

ENABLED = os.getenv("UI_THEME", "1") != "0"

FONT_LINK = ('<link rel="preconnect" href="https://fonts.googleapis.com">'
             '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" '
             'rel="stylesheet">')

CSS = r"""
:root {
  --ui-ink: #0f172a; --ui-text: #1e293b; --ui-muted: #475569; --ui-soft: #64748b; --ui-faint: #94a3b8;
  --ui-line: #e2e8f0; --ui-line2: #eef2f7; --ui-bg: #f5f7fb; --ui-card: #ffffff;
  --ui-brand: #0b2a7a; --ui-brand-2: #3730a3; --ui-int: #4338ca; --ui-int-soft: #eef2ff; --ui-accent: #db2777;
  --ui-ok: #15803d; --ui-radius: 14px; --ui-radius-sm: 10px;
  --ui-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
}
body, .gradio-container { background: var(--ui-bg) !important; }
.gradio-container, .gradio-container button, .gradio-container input, .gradio-container textarea,
.gradio-container select, .cs-upsell, .cs-stop-note {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.gradio-container { max-width: 1180px !important; color: var(--ui-text); -webkit-font-smoothing: antialiased;
  overflow: clip !important; }   /* clip, not hidden: lets the top bar stay pinned while scrolling */
.gradio-container .prose, .gradio-container p, .gradio-container li { color: var(--ui-text); }

/* ---------------- top bar: brand + account, sticky ---------------- */
.cs-header { display: none !important; }                  /* (the brand now sits in the top bar) */
#cs-strip { position: sticky !important; top: 0; z-index: 60; margin: 0 0 4px !important; padding: 10px 16px !important;
  border-radius: 0 0 16px 16px !important; background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: saturate(1.5) blur(10px); backdrop-filter: saturate(1.5) blur(10px);
  box-shadow: 0 1px 0 var(--ui-line), 0 8px 24px rgba(15,23,42,.06) !important; border: 0 !important;
  gap: 10px !important; align-items: center !important; flex-wrap: nowrap !important; }
#cs-strip::before { display: none !important; }
#cs-strip > * { min-width: 0 !important; }
.cs-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cs-brand img { width: 40px; height: 40px; border-radius: 50%; flex: none; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.cs-brand .t { font-size: 17px; font-weight: 800; color: var(--ui-brand); letter-spacing: -.2px; line-height: 1.15;
  white-space: nowrap; }
.cs-brand .t span { color: var(--ui-accent); }
.cs-brand .s { font-size: 12px; color: var(--ui-soft); line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.cs-userbar { font-size: 13px !important; color: var(--ui-muted) !important; padding: 0 !important; justify-content: flex-end;
  align-items: center; gap: 4px; white-space: nowrap; flex-wrap: wrap; }
.cs-userbar b { color: var(--ui-ink); }
.cs-userbar small { color: var(--ui-soft) !important; margin-left: 6px; }
.cs-ub-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--ui-int-soft); color: var(--ui-int);
  font-weight: 600; border-radius: 99px; padding: 4px 11px; font-size: 12.5px; }
.cs-ub-pill i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
#cs-strip .cs-topbtn, #cs-strip button.cs-topbtn { flex: 0 0 auto !important; width: auto !important;
  min-width: max-content !important; max-width: none !important;
  padding: 8px 14px !important; font-size: 13.5px !important; font-weight: 600 !important; border-radius: 10px !important;
  background: #fff !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important;
  box-shadow: none !important; white-space: nowrap; }
#cs-strip .cs-topbtn:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; }
#cs-strip .cs-upbtn { background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-2)) !important; color: #fff !important;
  border-color: transparent !important; box-shadow: 0 4px 12px rgba(55,48,163,.25) !important; }
#cs-strip .cs-upbtn:hover { filter: brightness(1.08); }

/* ---------------- main menu: plain text tabs, one line (scrolls sideways on phones) ---------------- */
#cs-nav > .tab-wrapper, #cs-nav > div:first-child { background: #fff !important; border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important; padding: 5px !important; margin: 14px 0 22px !important; box-shadow: var(--ui-shadow); }
#cs-nav > .tab-wrapper .tab-container { flex-wrap: nowrap !important; justify-content: flex-start !important;
  overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; gap: 2px !important; }
#cs-nav > .tab-wrapper .tab-container::-webkit-scrollbar { display: none; }
#cs-nav > .tab-wrapper button[role="tab"], #cs-nav > .tab-wrapper .tab-container > button {
  color: var(--ui-muted) !important; font-weight: 600 !important; font-size: 14px !important; padding: 9px 15px !important;
  border-radius: 9px !important; background: transparent !important; box-shadow: none !important; letter-spacing: -.1px; }
#cs-nav > .tab-wrapper button[role="tab"]:not(.selected):hover { background: #f1f5f9 !important; color: var(--ui-ink) !important; }
#cs-nav > .tab-wrapper button[role="tab"].selected, #cs-nav > .tab-wrapper .tab-container > button.selected {
  background: var(--ui-brand) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(11,42,122,.25) !important; }
#cs-nav > .tab-wrapper .overflow-menu { display: none !important; }

/* sub-tabs: a segmented control */
.sub-tabs > .tab-wrapper { border: 0 !important; margin-bottom: 14px !important; }
.sub-tabs > .tab-wrapper .tab-container { width: 100% !important; flex-wrap: wrap !important; gap: 6px !important;
  border-bottom: 0 !important; }
.sub-tabs > .tab-wrapper .tab-container > button[role="tab"] { visibility: visible !important; position: static !important; }
.sub-tabs > .tab-wrapper .tab-container::after { display: none !important; }
.sub-tabs button[role="tab"] { border: 1px solid var(--ui-line) !important; border-radius: 99px !important;
  padding: 7px 16px !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--ui-muted) !important;
  background: #fff !important; }
.sub-tabs button[role="tab"]:not(.selected):hover { border-color: #cbd5e1 !important; color: var(--ui-ink) !important; }
.sub-tabs button[role="tab"]::after { display: none !important; }
.sub-tabs button[role="tab"].selected { background: var(--ui-int-soft) !important; color: var(--ui-int) !important;
  border-color: #c7d2fe !important; }

/* ---------------- page heading of a tool ---------------- */
.cs-intro { background: transparent !important; border: 0 !important; padding: 2px 2px 10px !important; margin: 0 0 6px !important; }
.cs-hero h2 { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.6px; color: var(--ui-ink); margin: 4px 0 8px; }
.cs-hero h2 em { font-style: normal; color: var(--ui-int) !important; }
.cs-hero p { font-size: 15.5px; line-height: 1.6; color: var(--ui-muted); max-width: 760px; margin: 0; }
.cs-flow { display: flex; flex-wrap: wrap; gap: 8px 18px !important; margin-top: 14px !important; }
.cs-flow span { background: transparent !important; padding: 0 !important; font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--ui-text) !important; display: inline-flex; align-items: center; gap: 8px; }
.cs-flow span i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--ui-int-soft); color: var(--ui-int); font-size: 12px; font-weight: 700; }
.cs-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--ui-soft); }
.cs-trust span::before { content: "✓"; color: var(--ui-ok); font-weight: 800; margin-right: 6px; }

/* ---------------- cards, inputs, buttons ---------------- */
.cs-card { border-radius: var(--ui-radius) !important; border: 1px solid var(--ui-line) !important; box-shadow: var(--ui-shadow) !important;
  padding: 20px !important; }
.gradio-container .block { border-radius: var(--ui-radius-sm) !important; }
.gradio-container label > span, .gradio-container .block-label, .gradio-container span[data-testid="block-info"] {
  font-weight: 600 !important; color: var(--ui-ink) !important; }
.gradio-container textarea, .gradio-container input[type="text"], .gradio-container input[type="email"],
.gradio-container input[type="password"] { border-radius: var(--ui-radius-sm) !important; font-size: 15px !important;
  line-height: 1.6 !important; }
.gradio-container textarea:focus, .gradio-container input:focus { border-color: var(--ui-int) !important;
  box-shadow: 0 0 0 3px rgba(67,56,202,.15) !important; }
button.primary { background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-2)) !important; border-radius: 11px !important;
  font-weight: 700 !important; font-size: 15.5px !important; letter-spacing: -.1px; padding: 12px 22px !important;
  box-shadow: 0 6px 16px rgba(55,48,163,.25) !important; transition: transform .08s ease, filter .15s ease; }
button.primary:hover { filter: brightness(1.1); }
button.primary:active { transform: translateY(1px); }
button.secondary { border-radius: 11px !important; font-weight: 600 !important; }
.gradio-container .accordion, .gradio-container details { border-radius: var(--ui-radius-sm) !important; }

/* the Word-file drop zone: the main action of the page */
#cs-drop { border: 2px dashed #c7d2fe !important; background: #f8f9ff !important; border-radius: var(--ui-radius) !important;
  min-height: 210px; transition: border-color .15s ease, background .15s ease; }
#cs-drop:hover { border-color: var(--ui-int) !important; background: #f1f3ff !important; }
#cs-drop .wrap, #cs-drop button { color: var(--ui-brand-2) !important; font-weight: 600 !important; font-size: 15px !important; }
#cs-drop .icon-wrap svg { color: var(--ui-int) !important; width: 34px !important; height: 34px !important; }
#cs-drop label, #cs-drop .block-label, #cs-drop [data-testid="block-label"] { position: static !important;
  display: inline-flex !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--ui-ink) !important; font-weight: 600 !important; font-size: 14px !important; margin: 2px 0 6px !important;
  padding: 0 !important; }
#cs-drop label svg, #cs-drop .block-label svg { display: none !important; }
/* download boxes with nothing in them yet: quiet, so the drop zone is what draws the eye */
.gradio-container .block:has(> .empty), .gradio-container .block:has(.file-preview-holder:empty) { opacity: .55; }
.cs-plan { font-size: 12px !important; font-weight: 600 !important; border-radius: 99px !important; padding: 3px 10px !important; }

/* sign-in gate */
.cs-lock { padding: 34px 20px 14px !important; }
.cs-lock-ico { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center;
  background: var(--ui-int-soft); font-size: 0 !important; }
.cs-lock-ico svg { width: 30px; height: 30px; color: var(--ui-int); }
.cs-lock-t { font-size: 21px !important; font-weight: 800 !important; color: var(--ui-ink) !important; letter-spacing: -.3px; }
.cs-lock-s { font-size: 14.5px !important; color: var(--ui-muted) !important; line-height: 1.6; }
.cs-lockbtn { max-width: 300px !important; }

/* results */
.cs-gauge { border-radius: var(--ui-radius) !important; border: 1px solid var(--ui-line) !important; box-shadow: var(--ui-shadow) !important; }
.cs-gauge-title { color: var(--ui-ink) !important; }
.cs-status { border-radius: var(--ui-radius) !important; }
.cs-done { background: #f0fdf4 !important; border-left-color: var(--ui-ok) !important; }

/* footer */
.cs-footer { margin-top: 36px !important; padding: 24px 12px 30px !important; color: var(--ui-soft) !important;
  font-size: 13px !important; line-height: 1.8; border-top: 1px solid var(--ui-line); }
.cs-footer .bar { display: none !important; }
.cs-footer a { color: var(--ui-brand-2) !important; font-weight: 600; text-decoration: none; }

/* ---------------- phones ---------------- */
@media (max-width: 760px) {
  .gradio-container { padding-left: 0 !important; padding-right: 0 !important; }
  #cs-strip > .column, #cs-strip > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
  .cs-brand { overflow: hidden; }
  .cs-brand .t { overflow: hidden; text-overflow: ellipsis; }
  #cs-strip .cs-upbtn { display: none !important; }        /* Upgrade stays one tap away: Pricing in the menu */
  #cs-strip { padding: 8px 10px !important; gap: 6px !important; border-radius: 0 0 14px 14px !important; }
  .cs-brand img { width: 32px; height: 32px; }
  .cs-brand .t { font-size: 14px; letter-spacing: -.3px; }
  .cs-brand .s, .cs-userbar, #cs-ub, #cs-bell { display: none !important; }
  #cs-strip .cs-topbtn { padding: 7px 11px !important; font-size: 13px !important; }
  #cs-nav > .tab-wrapper { margin: 10px 0 16px !important; }
  #cs-nav > .tab-wrapper button[role="tab"] { padding: 8px 12px !important; font-size: 13.5px !important; }
  .cs-hero h2 { font-size: 23px; letter-spacing: -.4px; }
  .cs-hero p { font-size: 14.5px; }
  .cs-card { padding: 14px !important; }
  #cs-drop { min-height: 170px; }
}
"""

LOCK_ICON = ('<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" '
             'stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/>'
             '<path d="M14 3v5h5"/><path d="M12 12v6"/><path d="m9 15 3-3 3 3"/></svg>')


# rules for the page around the app (the app's css= is scoped inside it, so these go in <head>)
PAGE_CSS = """<style>
@media (max-width: 760px) { main.fillable.app, main.app { padding-left: 10px !important; padding-right: 10px !important; } }
</style>"""


def head():
    """The <head> additions: the font, and the rules for the page around the app."""
    return FONT_LINK + PAGE_CSS if ENABLED else ""


def css():
    """This design layer, appended to the app's css= after the older styles. Gradio prefixes every rule of css= the same
    way, so with equal specificity the later rule wins (a separate <style> in <head> lost to the prefixed rules)."""
    return CSS if ENABLED else ""