/* =====================================================
   9UY API — Shared Styles (Premium 9UY Utility)
   Feedback widget · Contact form · Drag-drop captcha
   Theme: monospace, premium borders; dark default + light
   via prefers-color-scheme (shared tokens in app.css).
   ===================================================== */

:root {
    --9uy-bg: #0a0a0a;
    --9uy-bg-card: #111111;
    --9uy-border: #262626;
    --9uy-border-hover: #3f3f46;
    --9uy-border-focus: #52525b;
    --9uy-fg: #d4d4d8;
    /* These are the fallbacks an app that does not load app.css still uses
       (ai, and the Tailwind apps). #71717a failed AA on every dark surface
       they sit on, so raise both; still below --9uy-fg-soft. */
    --9uy-fg-muted: #9a9aa3;
    --9uy-fg-dim: #9a9aa3;
    /* Secondary text that still has to be read — the About sheet's
       version/domain line and its footer. 7.4:1 on the panel. */
    --9uy-fg-soft: #a1a1aa;
    --9uy-accent: #ffffff;
    --9uy-green: #22c55e;
    --9uy-red: #ef4444;
    --9uy-warn: #f59e0b;
    --9uy-overlay: rgba(0, 0, 0, 0.85);
    --9uy-focus-bg: #0d0d0d;
    --9uy-surface-translucent: rgba(17, 17, 17, 0.55);
    --9uy-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Light theme — follows the OS preference, no toggle required. */
@media (prefers-color-scheme: light) {
    :root {
        --9uy-bg: #f7f7f8;
        --9uy-bg-card: #ffffff;
        --9uy-border: #e4e4e7;
        --9uy-border-hover: #c4c4c8;
        --9uy-border-focus: #a1a1aa;
        --9uy-fg: #3f3f46;
        --9uy-fg-muted: #71717a;
        --9uy-fg-dim: #71717a;
        --9uy-fg-soft: #52525b;
        --9uy-accent: #09090b;
        --9uy-green: #059669;
        --9uy-red: #dc2626;
        --9uy-warn: #b45309;
        --9uy-overlay: rgba(0, 0, 0, 0.45);
        --9uy-focus-bg: #ffffff;
        --9uy-surface-translucent: rgba(255, 255, 255, 0.72);
    }
}

/* --- Feedback Toggle --- (Invisible trigger) */
#feedback-toggle {
    display: none;
}

/* --- Overlay --- */
#overlay {
    position: fixed;
    inset: 0;
    background-color: var(--9uy-overlay);
    z-index: 998;
    display: none;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

/* --- Shared Form Container (Feedback Modal) --- */
#feedback-form-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--9uy-bg-card);
    border: 1px solid var(--9uy-border);
    padding: 2.5rem;
    border-radius: 0.75rem;
    z-index: 999;
    display: none;
    width: min(480px, calc(100vw - 2rem));
    box-sizing: border-box;
    font-family: var(--9uy-font);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#feedback-form-container h2 {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--9uy-accent);
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid var(--9uy-border);
    padding-bottom: 1rem;
}

/* --- Form Field Utilities --- */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--9uy-fg-muted);
    font-weight: 600;
}

.field-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--9uy-bg);
    border: 1px solid var(--9uy-border);
    color: var(--9uy-fg);
    font-family: inherit;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.field-input:hover {
    border-color: var(--9uy-border-hover);
}

.field-input:focus {
    border-color: var(--9uy-border-focus);
    background: var(--9uy-focus-bg);
    box-shadow: 0 0 0 1px var(--9uy-border-focus);
}

textarea.field-input {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* --- CAPTCHA Row --- */
.l8t-captcha-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--9uy-border);
    border-radius: 0.5rem;
}

.l8t-drag-item {
    width: 60px;
    height: 44px;
    background: var(--9uy-bg-card);
    border: 1px solid var(--9uy-border-hover);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    color: var(--9uy-accent);
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.l8t-drag-item:hover {
    border-color: var(--9uy-accent);
    transform: scale(1.05);
}

.l8t-drag-item:active {
    cursor: grabbing;
}

.l8t-drop-area {
    width: 80px;
    max-width: 100px;
    min-height: 44px;
    border: 1px dashed var(--9uy-border-hover);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--9uy-fg-dim);
    transition: all 0.3s;
}

.l8t-drop-area.dragover {
    border-color: var(--9uy-green);
    color: var(--9uy-green);
    background: rgba(34, 197, 94, 0.05);
    border-style: solid;
}

.l8t-drop-area.verified {
    border-color: var(--9uy-green);
    border-style: solid;
    color: var(--9uy-green);
    background: rgba(34, 197, 94, 0.1);
    font-weight: 700;
}

/* --- Submit & Close Buttons --- */
.submit-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--9uy-border-hover);
    color: var(--9uy-accent);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.875rem 1.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--9uy-accent);
}

.submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

#feedback-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--9uy-fg-dim);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}

#feedback-close:hover {
    color: var(--9uy-accent);
}

/* --- Success/Error Messaging --- */
#feedback-error, 
.l8t-error {
    font-size: 0.75rem;
    color: var(--9uy-red);
    margin-top: 0.75rem;
    display: none;
    font-weight: 500;
}

.l8t-success {
    color: var(--9uy-green);
    font-size: 0.9375rem;
    text-align: center;
    padding: 2rem 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Mobile Stack Helpers --- */
@media (max-width: 640px) {
    .name-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- Custom Suite Overrides --- */
.font-mono { font-family: var(--9uy-font) !important; }

/* Neutral Tailwind utilities → shared tokens.

   The apps that have not been migrated yet carry dark-theme utility classes
   in their markup, so their own surfaces stayed dark while the shell chrome
   flipped: `text-white` on a light page is invisible. Mapping the neutral
   scale here fixes all of them at once, and leaves the accent utilities
   (indigo/emerald/red/amber/blue) alone — those read the same either way.

   Each mapping prefers the app's own design-system token when it has one
   (app.css defines them), so the migrated apps keep the values their
   stylesheet chose; the rest fall back to this file's tokens. */
.bg-gray-950, .bg-slate-950 { background-color: var(--bg, var(--9uy-bg)) !important; }
.bg-gray-900, .bg-gray-800, .bg-gray-700, .bg-gray-600,
.bg-slate-900, .bg-slate-800, .bg-slate-700 { background-color: var(--bg-panel-solid, var(--9uy-bg-card)) !important; }

/* The translucent variants (sticky headers, footers, inset cards) composite
   with whatever is behind them, so in light mode they have to become light
   fills — a dark 40% wash over a light page is a mid-grey that swallows the
   muted text sitting on it. */
.bg-gray-950\/80, .bg-slate-950\/90, .bg-slate-950\/50,
.bg-gray-900\/80, .bg-gray-900\/50, .bg-gray-900\/40, .bg-gray-900\/20,
.bg-slate-900\/80, .bg-slate-900\/50, .bg-slate-900\/30,
.bg-gray-800\/80, .bg-gray-800\/50 { background-color: var(--bg-panel, var(--9uy-surface-translucent)) !important; }

.text-white { color: var(--fg-bright, var(--9uy-accent)) !important; }
.text-gray-100, .text-gray-200, .text-gray-300,
.text-slate-200, .text-slate-300 { color: var(--fg, var(--9uy-fg)) !important; }
.text-gray-400, .text-gray-500, .text-gray-600,
.text-slate-400, .text-slate-500, .text-slate-600 { color: var(--text-muted, var(--9uy-fg-muted)) !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--text-dim, var(--9uy-fg-dim)) !important; }

.border-gray-800, .border-slate-800 { border-color: var(--border, var(--9uy-border)) !important; }
.border-gray-700, .border-gray-600, .border-gray-500, .border-gray-400,
.border-slate-700, .border-slate-600 { border-color: var(--border-hover, var(--9uy-border-hover)) !important; }
.placeholder-gray-500::placeholder { color: var(--text-muted, var(--9uy-fg-muted)) !important; }

/* Accent text utilities are tuned for a dark page, so the 300/400/500 shades
   wash out on a light one. Only in light mode, and only as text, do they move
   to the darker shade of the same hue. */
@media (prefers-color-scheme: light) {
    .text-indigo-300, .text-indigo-400 { color: #4f46e5 !important; }
    .text-blue-300, .text-blue-400 { color: #1d4ed8 !important; }
    .text-cyan-300, .text-cyan-400 { color: #0e7490 !important; }
    .text-sky-300, .text-sky-400 { color: #0369a1 !important; }
    .text-green-300, .text-green-400, .text-green-500 { color: #15803d !important; }
    .text-emerald-300, .text-emerald-400, .text-emerald-500 { color: #047857 !important; }
    .text-teal-300, .text-teal-400 { color: #0f766e !important; }
    .text-amber-300, .text-amber-400, .text-amber-500 { color: #b45309 !important; }
    .text-yellow-300, .text-yellow-400 { color: #a16207 !important; }
    .text-red-300, .text-red-400, .text-red-500 { color: #dc2626 !important; }
    .text-rose-300, .text-rose-400 { color: #be123c !important; }
    .text-violet-300, .text-violet-400 { color: #6d28d9 !important; }
    .text-purple-300, .text-purple-400 { color: #7e22ce !important; }
    .text-fuchsia-300, .text-fuchsia-400 { color: #a21caf !important; }
}

/* White text that sits on an accent or pure-black surface has to stay white:
   those backgrounds do not change between schemes, so flipping the text
   would erase it. Higher specificity than the `.text-white` rule above. */
[class*="bg-black"] .text-white, [class*="bg-black"].text-white,
[class*="bg-indigo"] .text-white, [class*="bg-indigo"].text-white,
[class*="bg-emerald"] .text-white, [class*="bg-emerald"].text-white,
[class*="bg-red"] .text-white, [class*="bg-red"].text-white,
[class*="bg-green"] .text-white, [class*="bg-green"].text-white,
[class*="bg-amber"] .text-white, [class*="bg-amber"].text-white,
[class*="bg-blue"] .text-white, [class*="bg-blue"].text-white { color: #ffffff !important; }

/* =====================================================
   Shared shell chrome — everything shell.js renders.

   These live here rather than in app.css because every app loads this
   file, including the ones still on Tailwind that have no design system
   yet. That is what lets every app show the same About sheet, offline
   indicator and header buttons without hand-writing the markup.

   The About panel is hidden by default and opened with `.open`; do not
   toggle `.hidden` on it, an id rule beats the class and it never closes.
   ===================================================== */

/* --- Header action cluster (injected when an app has no buttons) --- */
.shell-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.shell-actions--fixed {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 150;
    background: var(--9uy-bg-card);
    border: 1px solid var(--9uy-border);
    border-radius: 999px;
    padding: 0.5rem 0.875rem;
}
.shell-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--9uy-fg-dim);
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
    font: inherit;
}
.shell-btn:hover { color: var(--9uy-fg); }
.shell-btn svg { width: 1.25rem; height: 1.25rem; }

/* --- Offline indicator --- */
.offline-indicator {
    display: none !important;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--9uy-warn);
}
.offline-indicator.is-visible { display: inline-flex !important; }
.offline-indicator svg { width: 1rem; height: 1rem; }

/* --- About bottom sheet --- */
/* `display` carries !important on both states: an app that used to hand-write
   this panel sets inline styles, and an inline style outranks any selector.
   `.open` is the more specific of the two, so it wins while the sheet is
   open. */
#about-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none !important;
    align-items: flex-end;
    justify-content: center;
}
#about-overlay.open { display: flex !important; }
#about-backdrop {
    position: absolute;
    inset: 0;
    background: var(--9uy-overlay);
    backdrop-filter: blur(4px);
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}
#about-overlay.open #about-backdrop { opacity: 1 !important; }
#about-panel {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--9uy-bg-card);
    border: 1px solid var(--9uy-border);
    border-radius: 1rem 1rem 0 0;
    padding: 2rem 2rem 2.5rem;
    font-family: var(--9uy-font);
    transform: translateY(100%) !important;
    transition: transform 0.3s ease-out;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
/* !important throughout: servers the shell owns. Apps that used to write
   `panel.style.transform` from their own inline About code would otherwise keep
   this element off-screen (an inline style outranks any selector), and a
   Tailwind `flex`/`hidden` class would otherwise decide `display`. */
#about-overlay.open #about-panel { transform: translateY(0) !important; }
.about-handle {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background: var(--9uy-border-hover);
}
#btn-about-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--9uy-fg-dim);
    transition: color 0.2s;
}
#btn-about-close:hover { color: var(--9uy-fg); }
#btn-about-close svg { width: 1.25rem; height: 1.25rem; }
.about-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.about-head .about-icon {
    display: flex;
    padding: 0.75rem;
    border: 1px solid var(--9uy-border);
    border-radius: 0.75rem;
    background: var(--9uy-bg);
    color: var(--9uy-fg);
}
.about-head .about-icon svg { width: 2rem; height: 2rem; }
.about-title {
    margin: 0;
    color: var(--9uy-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.875rem;
}
.about-sub {
    margin: 0.125rem 0 0;
    color: var(--9uy-fg-soft);
    font-size: 0.75rem;
}
.about-body {
    margin: 0 0 1.5rem;
    color: var(--9uy-fg);
    font-size: 0.9375rem;
    line-height: 1.65;
    text-wrap: pretty;
}
.about-foot {
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--9uy-border);
    color: var(--9uy-fg-soft);
    font-size: 0.75rem;
}
/* Underlined on purpose: the link is the same colour space as the footer copy
   it sits in, so colour alone can't distinguish it (WCAG link-in-text-block). */
.about-foot a { color: var(--9uy-accent); text-decoration: underline; text-underline-offset: 2px; }
.about-foot a:hover { text-decoration-thickness: 2px; }

/* --- Display helper --- */
/* The shell toggles `hidden` on its own controls (and older app code toggled
   it on `.block-cursor`). Every app loads this file, but the apps that load
   neither app.css nor Tailwind have no `.hidden` at all, so the offline state
   could not hide anything. Last in the file so it beats `.shell-btn`'s
   `display`, and deliberately not `!important` so a Tailwind `sm:flex`-style
   responsive override still wins. */
.hidden { display: none; }

@media (max-width: 640px) {
    #about-panel { padding: 1.75rem 1.5rem 2rem; }
}