/* Lemonlings shared presentation layer.
   Keep this file restrained: shared tokens and small component harmonization only. */
:root {
    color-scheme: light;
    --ll-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ll-ink: var(--ink, #172026);
    --ll-muted: var(--muted, #5f6f78);
    --ll-subtle: #7b8990;
    --ll-bg: var(--background, #f6f8f7);
    --ll-surface: var(--surface, #ffffff);
    --ll-surface-soft: #f8faf9;
    --ll-surface-muted: #f1f5f3;
    --ll-border: var(--line, #d9e2dd);
    --ll-border-strong: #c8d4ce;
    --ll-primary: var(--primary, var(--green, #2f7d5b));
    --ll-accent: var(--accent, #f2a900);
    --ll-danger: #b84a3d;
    --ll-purple: #7556d9;
    --ll-blue: #2f6fc2;
    --ll-amber: #eea600;
    --ll-orange: #df6a2e;
    --ll-radius: 8px;
    --ll-radius-sm: 6px;
    --ll-shadow: 0 1px 2px rgba(23, 32, 38, .055);
    --ll-shadow-raised: 0 6px 18px rgba(23, 32, 38, .06);
    --ll-focus: 0 0 0 3px color-mix(in srgb, var(--ll-primary) 20%, transparent);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ll-ink: #edf4f1;
    --ll-muted: #adbbb5;
    --ll-subtle: #8f9d97;
    --ll-bg: #0e1412;
    --ll-surface: #151e1a;
    --ll-surface-soft: #101815;
    --ll-surface-muted: #18231f;
    --ll-border: #314139;
    --ll-border-strong: #40554b;
    --ll-shadow: 0 1px 2px rgba(0, 0, 0, .26);
    --ll-shadow-raised: 0 10px 28px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { background: var(--ll-bg); }
body {
    font-family: var(--ll-font);
    color: var(--ll-ink);
    background: var(--ll-bg);
    background-color: var(--ll-bg);
    font-size: 15px;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
}
body, input, textarea, select, button { font-family: var(--ll-font); }
::selection { background: color-mix(in srgb, var(--ll-primary) 18%, transparent); }

a { color: color-mix(in srgb, var(--ll-primary) 84%, var(--ll-ink)); }
a:hover { text-decoration-thickness: 1px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 0;
    box-shadow: var(--ll-focus);
}

h1, h2, h3 { letter-spacing: 0; color: var(--ll-ink); }
h1 { line-height: 1.12; }
h2 { line-height: 1.18; }
h3 { line-height: 1.24; }
p, .muted, small { color: var(--ll-muted); }

header, .top, .topbar, .studio-topbar, .app-header {
    background-color: color-mix(in srgb, var(--ll-surface) 96%, transparent);
    border-color: var(--ll-border);
    min-width: 0;
}

.panel, .card, .side, .rail, .studio-pane, .document, .unit, .mini-row,
.tree-item, .tree-section summary, .file-row, .file-class, .assignment-card,
.submission-card, .review-card, .proposal-card, .student-card, .document-card,
.template-card, .course-card, .artifact-review-card, .stat, .kpi,
.login-card, .error-card {
    border-color: var(--ll-border);
    border-radius: var(--ll-radius);
    box-shadow: var(--ll-shadow);
    background-color: var(--ll-surface);
}

.card, .tree-item, .mini-row, .unit, .file-row, .document-card, .student-card, .course-card,
.submission-card, .proposal-card {
    transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.card:hover, .tree-item:hover, .mini-row:hover, .unit:hover, .file-row:hover,
.document-card:hover, .student-card:hover, .course-card:hover {
    border-color: color-mix(in srgb, var(--ll-primary) 22%, var(--ll-border));
}

.button, button, input[type="submit"], .header-actions a, .actions a,
.role-switcher a, .language-switcher a, .studio-topbar a, .studio-topbar button,
.topbar-actions a, .topbar-actions button {
    border-radius: var(--ll-radius);
    letter-spacing: 0;
    min-height: 34px;
}
.button:hover, button:hover, input[type="submit"]:hover, .header-actions a:hover,
.actions a:hover, .role-switcher a:hover, .language-switcher a:hover,
.studio-topbar a:hover, .studio-topbar button:hover {
    transform: none;
}

.pill, .badge, .status, .tag, .chip, .client-time, .planned-time {
    border-radius: 999px;
    border: 1px solid var(--ll-border);
    background: var(--ll-surface-soft);
    color: var(--ll-muted);
    font-weight: 760;
}
.status.revision, .badge.warning, .warning {
    border-color: color-mix(in srgb, var(--ll-amber) 36%, var(--ll-border));
    background: color-mix(in srgb, var(--ll-amber) 8%, var(--ll-surface));
    color: color-mix(in srgb, var(--ll-orange) 55%, var(--ll-ink));
}

input, textarea, select {
    border-radius: var(--ll-radius);
    border-color: var(--ll-border);
    background-color: var(--ll-surface);
    color: var(--ll-ink);
}
input[type="file"] {
    border-style: dashed;
    background: var(--ll-surface-soft);
}

table { width: 100%; }
th {
    background: var(--ll-surface-soft);
    color: var(--ll-ink);
    font-weight: 780;
}
th, td { border-color: var(--ll-border); }
tr:hover td { background: color-mix(in srgb, var(--ll-primary) 3%, transparent); }

.theme-toggle {
    width: 36px;
    min-width: 36px;
    padding-inline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.workflow-steps {
    background: var(--ll-surface);
    border-color: var(--ll-border);
}
.workflow-step,
.workflow-step[data-section-button],
.nav-button,
[data-section-button] {
    background: var(--ll-surface);
    border-color: var(--ll-border);
    color: var(--ll-ink);
    box-shadow: none;
}
.workflow-step.active,
.workflow-step[data-section-button].active,
.workflow-step[data-section-button].is-active,
.nav-button.active,
.nav-button[aria-current="true"],
[data-section-button].active,
[data-section-button].is-active,
[data-section-button][aria-current="true"] {
    background: color-mix(in srgb, var(--ll-primary) 6%, var(--ll-surface));
    border-color: color-mix(in srgb, var(--ll-primary) 28%, var(--ll-border));
    color: var(--ll-ink);
    box-shadow: inset 2px 0 0 var(--ll-primary);
}
.workflow-step span,
.nav-button span,
[data-section-button] span { color: var(--ll-muted); }

.student-files-toolbar, .review-workspace, .artifact-review-workspace {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.file-row, .submission-card, .proposal-card, .review-card {
    display: grid;
    gap: 8px;
}
.file-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.file-row form, .submission-card form, .proposal-card form { display: grid; gap: 8px; }

.artifact-review-card,
.semester-card {
    border-left: 2px solid color-mix(in srgb, var(--ll-primary) 52%, var(--ll-border));
}
.artifact-review-card code,
.artifact-review-card .filename,
code {
    color: color-mix(in srgb, var(--ll-ink) 84%, var(--ll-primary));
    background: var(--ll-surface-soft);
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius-sm);
    padding: 2px 5px;
    font-size: .88em;
}

.ll-stack { display: grid; gap: 8px; min-width: 0; }
.ll-stack-loose { display: grid; gap: 12px; min-width: 0; }
.ll-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ll-inline-actions.end { justify-content: flex-end; }
.ll-shell-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.ll-checkline {
    display: flex;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 8px;
    font-weight: 760;
}
.ll-checkline input {
    width: auto;
    min-height: auto;
    margin-top: 4px;
}
.ll-dimmed { opacity: .66; }
.ll-compact-note { margin: 8px 0 0; }
.ll-section-title { margin: 0 0 4px; }
.review-upload-record,
.proposal-form {
    border: 1px solid var(--ll-border);
    border-radius: var(--ll-radius);
    background: var(--ll-surface);
}
.proposal-form {
    margin-top: 8px;
    padding: 10px;
    display: grid;
    gap: 10px;
}

body[data-studio-accent="art"] {
    --ll-primary: color-mix(in srgb, var(--ll-amber) 78%, #8a5b00);
    --ll-accent: var(--ll-orange);
}
body[data-studio-accent="general"] {
    --ll-primary: var(--ll-purple);
    --ll-accent: var(--ll-blue);
}

@media (min-width: 1180px) {
    main { padding-inline: clamp(20px, 2vw, 30px); }
}
@media (max-width: 1100px) {
    .file-row { grid-template-columns: 1fr; }
    .side, .rail { scrollbar-gutter: stable; }
}
@media (max-width: 760px) {
    header, .top, .topbar, .studio-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .header-actions, .actions, .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .ll-shell-actions {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        padding: 0 0 3px;
    }
    .ll-shell-actions > * { flex: 0 0 auto; }
    main { padding: 12px; }
    .theme-toggle { width: 38px; min-width: 38px; flex: 0 0 auto; }
    .pill, .badge, .status, .tag, .chip { max-width: 100%; overflow-wrap: anywhere; }
}

html[data-theme="dark"] body,
[data-theme="dark"] body { background-color: var(--ll-bg); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--ll-surface);
    color: var(--ll-ink);
    border-color: var(--ll-border);
}


/* Recovery 2: calm shared application shell. Overrides older page-local decoration without touching behavior. */
body {
    background: var(--ll-bg);
}
header, .top, .topbar, .studio-topbar, .app-header {
    background: color-mix(in srgb, var(--ll-surface) 97%, transparent);
    box-shadow: 0 1px 0 rgba(23, 32, 38, .045);
}
.panel, .card, .rail, .workspace, .studio-pane, .document, .hero, .detail,
.mini-panel, .record-link, .file-class, .file-student, .artifact-review-card,
.semester-intro, .semester-card, .login-card, .error-card {
    background: var(--ll-surface);
    border-color: var(--ll-border);
    border-radius: var(--ll-radius);
    box-shadow: var(--ll-shadow);
}
.workflow-steps {
    background: var(--ll-surface);
    border-color: var(--ll-border);
}
.hero, .doc-head, .semester-intro, .privacy-note, .current-strip {
    background: var(--ll-surface);
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .doc-head,
html[data-theme="dark"] .semester-intro,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .current-strip,
html[data-theme="dark"] header,
html[data-theme="dark"] .top,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .studio-topbar,
html[data-theme="dark"] .app-header {
    background: var(--ll-surface);
}