/* Shared UI foundation. Artwork typography belongs to the canvas renderer. */
:root {--studio-font-ui:var(--tg-font);--font-family:var(--studio-font-ui);--brand-blue-600:var(--tg-primary);--brand-blue-700:var(--tg-primary-hover);--brand-blue-50:#eff5ff;--brand-blue-100:#e3edff;--brand-ink:var(--tg-ink);--brand-muted:var(--tg-muted);--brand-soft:var(--tg-soft);--brand-canvas:var(--tg-canvas);--brand-nav:#fff;--brand-line:var(--tg-line);--brand-line-strong:#cad3e1;--ink:var(--tg-ink);--ink-muted:var(--tg-muted);--ink-soft:var(--tg-soft);--primary:var(--tg-primary);--primary-hover:var(--tg-primary-hover);--primary-soft:#eff5ff;--primary-light:#e3edff;--canvas:var(--tg-canvas);--surface:#fff;--line:var(--tg-line);--line-strong:#cad3e1;--nav:#fff;--nav-active:#eff5ff;--nav-text:var(--tg-muted);--nav-line:var(--tg-line);--success:#12755a;--success-light:#eaf7f0;--warning:#92600a;--warning-light:#fff6df;--danger:#ba3545;--danger-light:#fff0f1;--overlay:#14213d66;--text-xs:1.3rem;--text-sm:1.4rem;--text-base:1.4rem;--text-md:1.5rem;--text-lg:1.7rem;--text-xl:2rem;--text-2xl:2.6rem;--text-3xl:3.2rem;--text-caption:1.3rem;--text-control:1.4rem;--text-label:1.4rem;--text-error:1.4rem;--text-display:4.4rem;--control-height:44px;--target-size:40px;--radius-control:9px;--radius-card:16px;--radius-dialog:20px;--radius-sm:9px;--radius-md:16px;--radius-lg:20px;--card-padding:var(--tg-space-6);--icon-stroke:1.7;--icon-sm:18px;--icon-md:20px;--shadow:0 3px 16px #14213d04;--review-small:1.3rem;--review-body:1.4rem;--review-heading:1.6rem;--review-title:2rem;--inspector-body:1.4rem;--inspector-small:1.3rem;--inspector-heading:1.6rem;}
body {font-family:var(--studio-font-ui);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;}
button, input, select, textarea {font-family:var(--studio-font-ui);}
h1, h2, h3 {font-weight:600;}
p {text-wrap:pretty;}
::selection {background:#dbe8ff;color:var(--tg-ink);}
.ui-icon {stroke-width:var(--icon-stroke);}
.button, .text-button {font-weight:500;transition:background 0.16s, border-color 0.16s, box-shadow 0.16s;}
.button {min-height:42px;padding:10px var(--tg-space-4);box-shadow:none;}
.button.primary {background:var(--primary);border-color:var(--primary);box-shadow:0 2px 3px #1d4ed819, inset 0 1px #ffffff24;}
.button.primary:hover {background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 4px 12px #1d4ed824;}
.button.secondary {background:#fff;border-color:var(--line-strong);color:var(--ink);}
.button.secondary:hover {background:#f7f9fc;border-color:#aab9cd;}
.button.subtle:hover {background:#edf2f8;}
button:disabled, .button:disabled {opacity:0.5;box-shadow:none;}
input:not([type="radio"]):not([type="checkbox"]), select, textarea {border-color:var(--line-strong);box-shadow:0 1px 2px #14213d03;}
input:not([type="radio"]):not([type="checkbox"]):focus, select:focus, textarea:focus {border-color:#7aa3f5;outline:0;box-shadow:0 0 0 3px #2563eb12;}
:focus-visible {outline:2px solid var(--primary);outline-offset:3px;}
.select-trigger {border-color:var(--line-strong);background:#fff;font-size:1.4rem;min-height:44px;border-radius:var(--tg-radius-control);}
.select-menu {border-color:var(--line);border-radius:12px;box-shadow:0 12px 40px #14213d18;padding:6px;}
.select-option {font-size:1.4rem;border-radius:var(--tg-radius-xs);}
.badge, .tag {font-weight:500;border-radius:var(--tg-radius-xs);font-size:1.2rem;}
.eyebrow {color:var(--ink-soft);font-size:1.1rem;font-weight:600;}
.page-heading {margin-bottom:var(--tg-space-7);align-items:center;gap:var(--tg-space-5);}
.page-heading h1 {font-size:clamp(2.4rem, 2vw, 3.2rem);line-height:1.3;margin-top:7px;}
.page-heading p {margin-top:9px;color:var(--ink-muted);max-width:740px;line-height:1.7;}
.page-heading .accent {display:none;}
.section-heading {gap:var(--tg-space-4);}
.card, .summary-card, .account-card {box-shadow:var(--shadow);}
.card h2, .summary-card h2 {font-size:1.8rem;}
.page-footer {color:var(--ink-soft);font-size:1.2rem;border-top:1px solid var(--line);}
.toast {background:var(--tg-ink);color:#fff;border:1px solid #263b60;border-radius:12px;box-shadow:0 8px 32px #14213d24;line-height:1.65;}
.toast.error {border-color:var(--danger);}
dialog {padding:var(--tg-space-7);border-color:var(--line);box-shadow:0 24px 90px #14213d2b;}
dialog::backdrop {background:#18274055;backdrop-filter:blur(4px);}
.close-dialog {width:32px;height:32px;display:grid;place-items:center;}
.notice {line-height:1.7;}
/* Brief writing surface and specification summary. */
#view-new .brief-assistant {border-color:#d5e3fc;background:linear-gradient(115deg, #fff 35%, #f2f7ff);padding:26px var(--tg-space-7);}
#view-new .assistant-mark {background:var(--primary);color:#fff;border-radius:12px;width:42px;height:42px;box-shadow:0 4px 12px #2563eb24;}
#view-new .assistant-intro h2 {font-size:1.9rem;}
#view-new .assistant-intro p {font-size:1.4rem;}
#view-new #assistant-description {min-height:108px;background:#fff;padding:14px var(--tg-space-4);border-color:#cbd8eb;}
#view-new .brief-steps {border:0;background:transparent;padding:0;gap:0;margin:30px 0 var(--tg-space-6);}
#view-new .brief-steps button {border-radius:0;border-bottom:2px solid var(--line);padding:var(--tg-space-3) var(--tg-space-4) var(--tg-space-4);background:transparent;}
#view-new .brief-steps button.current {border-bottom-color:var(--primary);color:var(--ink);}
#view-new .brief-steps button small {font-size:1.2rem;}
#view-new .brief-steps b {width:30px;height:30px;font-size:1.3rem;background:#e7edf5;}
#view-new .brief-steps .current b {background:var(--primary);color:#fff;}
#view-new .card-heading {padding-bottom:var(--tg-space-5);border-bottom:1px solid var(--line);}
#view-new .form-card {padding:var(--tg-space-7);}
#view-new .preset-inline {background:#f7f9fc;border:1px solid var(--line);}
#view-new .summary-card {padding:22px;}
#view-new .summary-art {height:112px;margin-top:var(--tg-space-4);border:1px solid #dce8ff;background:#f3f7ff;}
#view-new .summary-art > span {display:none;}
#view-new .summary-art strong {font-size:2rem;font-variant-numeric:tabular-nums;}
#view-new .deliverables {font-size:1.3rem;}
#view-new .mini-note {font-size:1.2rem;}
.upload-zone {background:#f8faff;border-color:#b9c9df;}
.upload-zone:hover {background:#eff5ff;border-color:#8dafed;}
.choice {border-radius:10px;}
.choice:has(input:checked) {border-color:#9dbbf7;box-shadow:0 0 0 1px #9dbbf7;}
/* Review workspace: list, artwork, and decisions. */
#view-jobs .filter-bar {background:#fff;border:1px solid var(--line);border-radius:12px;padding:var(--tg-space-2) var(--tg-space-3);gap:var(--tg-space-4);margin-bottom:var(--tg-space-5);}
#view-jobs .search-field input {border:0;box-shadow:none;background:transparent;margin:0;}
#view-jobs .filter-bar .select-wrap {max-width:230px;}
#view-jobs #job-list {padding:var(--tg-space-4) var(--tg-space-3);border-radius:var(--tg-radius-card);box-shadow:none;}
#view-jobs .jobs-list-heading {padding:var(--tg-space-1) var(--tg-space-1) var(--tg-space-3);margin:0;}
#view-jobs .jobs-list-heading h3 {font-size:1.5rem;}
#view-jobs .jobs-list-heading span {font-size:1.2rem;}
#view-jobs .job-row {padding:14px;border:1px solid transparent;background:transparent;margin-bottom:5px;border-radius:10px;box-shadow:none;}
#view-jobs .job-row:hover {background:var(--tg-canvas);}
#view-jobs .job-row.selected {background:#eef4ff;border-color:#cfddfc;box-shadow:inset 3px 0 var(--primary);}
#view-jobs .job-row strong {font-size:1.4rem;line-height:1.65;}
#view-jobs .job-row small {font-size:1.2rem;}
.design-stage, .design-inspector {padding:22px;border-radius:var(--tg-radius-card);box-shadow:none;}
.design-stage .detail-header h2 {margin:6px 0;font-size:2rem;}
.design-stage .preview-frame, .design-stage .preview-placeholder {border-color:#e2e8f0;border-radius:10px;background-color:#f0f3f8;}
.design-stage .preview-placeholder {min-height:360px;}
.design-stage .job-flow {background:#f7f9fc;border-color:var(--line);}
.design-stage .button, .design-inspector .button {min-height:40px;padding:9px var(--tg-space-3);font-size:1.3rem;}
.design-inspector .progress-message {padding:14px;background:#f6f8fc;border-radius:10px;}
.design-inspector .workflow-result {border-width:1px;border-radius:12px;}
.design-inspector .feedback textarea {background:#fff;}
.design-inspector .inspector-heading h3 {font-size:1.5rem;}
.job-workflow {border-radius:10px;box-shadow:none;}
.filter-bar input {background:#fff;}
/* Library, rules, account, and administration. */
.style-grid {gap:22px;}
.style-card {border-radius:var(--tg-radius-card);overflow:hidden;transition:box-shadow 0.18s, border-color 0.18s;}
.style-card:hover {border-color:#cbd7e8;box-shadow:0 10px 24px #14213d09;}
.style-card h3 {font-size:1.7rem;}
.style-card .style-meta, .style-card small {font-size:1.3rem;}
.settings-grid {gap:var(--tg-space-6);}
.account-card {text-align:center;}
.profile-avatar {background:#eaf1ff;color:var(--primary);border-radius:22px;}
#password-form {margin-top:var(--tg-space-6);}
.admin-tabs {gap:var(--tg-space-7);}
.admin-tabs button {padding:var(--tg-space-3) var(--tg-space-1);font-weight:500;}
.member-row {padding:18px var(--tg-space-5);}
.member-row:hover {background:#f9fbfe;}
.stat {border-color:var(--line);box-shadow:none;}
.stat strong {font-size:3rem;}
.product-rules-page .card {border-radius:16px;}
.rules-field {border-radius:10px;}
/* Keyboard-accessible command search. */
.studio-command {width:640px;padding:0;overflow:hidden;margin:14vh auto auto;border-radius:18px;}
.command-search {display:flex;align-items:center;padding:var(--tg-space-4) var(--tg-space-5);gap:var(--tg-space-3);border-bottom:1px solid var(--line);}
.command-search > .ui-icon {color:var(--primary);width:22px;height:22px;}
.command-search input {border:0!important;margin:0!important;padding:var(--tg-space-1) 0!important;font-size:1.6rem!important;min-height:36px!important;box-shadow:none!important;outline:none!important;}
.command-dismiss {background:#f2f5f9;border:1px solid var(--line);border-radius:var(--tg-radius-xs);min-height:28px!important;padding:2px 6px;color:var(--ink-muted);font-size:1.1rem;}
.command-results {max-height:min(430px, 55vh);overflow-y:auto;padding:var(--tg-space-2);}
.command-group {font-size:1.1rem;color:var(--ink-soft);font-weight:600;padding:13px var(--tg-space-3) 7px;text-transform:uppercase;}
.command-result {display:flex;align-items:center;gap:var(--tg-space-3);width:100%;min-height:58px;padding:10px var(--tg-space-3);border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;}
.command-result[aria-selected="true"] {background:#edf4ff;}
.command-result > .ui-icon {width:20px;height:20px;color:var(--ink-muted);}
.command-result > span {flex:1;min-width:0;}
.command-result strong, .command-result small {display:block;}
.command-result strong {font-size:1.4rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.command-result small {font-size:1.2rem;color:var(--ink-muted);margin-top:2px;}
.command-result kbd {font-family:inherit;color:var(--ink-soft);font-size:1.1rem;border:0;background:transparent;}
.command-empty {color:var(--ink-muted);padding:var(--tg-space-8) var(--tg-space-5);text-align:center;font-size:1.4rem;}
.command-footer {display:flex;justify-content:space-between;padding:var(--tg-space-3) var(--tg-space-5);background:#f8fafd;border-top:1px solid var(--line);color:var(--ink-muted);font-size:1.1rem;}
.command-footer kbd {font-family:inherit;padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:#fff;}
.command-live {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
/* Authentication uses the same typography and blue brand. */
.auth-page {background:#fff;}
.auth-shell {min-height:100dvh;grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr);}
.auth-story {background:#edf3ff;color:var(--ink);border-right:1px solid #dce6f9;padding:46px 9%;overflow:hidden;position:relative;}
.auth-story .brand {color:var(--ink);}
.auth-page .brand-mark {display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px #2563eb24;}
.auth-page .brand-mark svg {width:34px;height:34px;}
.auth-story .brand small {color:#65738a;}
.auth-story h1 {color:var(--ink);font-size:clamp(3.8rem, 3.9vw, 5.8rem);line-height:1.13;}
.auth-story h1 em {color:var(--primary);font-style:normal;}
.auth-story p {font-size:1.5rem;color:var(--ink-muted);line-height:1.8;}
.auth-story .eyebrow {color:#556d97;}
.auth-story > small {color:#586c8b;font-size:1.2rem;}
.auth-features {gap:18px;flex-wrap:wrap;color:#435b80;font-size:1.2rem;}
.auth-form {padding:70px clamp(var(--tg-space-9), 6.5vw, 110px);justify-content:center;}
.auth-form h2 {font-size:3rem;margin-top:14px;}
.auth-form > p {color:var(--ink-muted);font-size:1.4rem;line-height:1.8;}
.auth-form > form {margin-top:30px;}
.auth-form input {min-height:48px;}
.auth-form form > .button {min-height:48px;margin-top:var(--tg-space-6);}
.auth-form .tag {background:#edf4ff;color:#365f9f;align-self:flex-start;font-size:1.1rem;}
.auth-note, .auth-switch, .secure-note {font-size:1.3rem;line-height:1.8;}
.auth-art {height:265px;margin:34px 0 30px;background:var(--tg-primary);border-radius:16px;box-shadow:0 18px 40px #2563eb1a;border:8px solid #fff;transform:rotate(-3deg);}
.auth-art > span {color:#fff;font-size:5.5rem;line-height:0.95;}
.auth-art > small {color:#dbe8ff;font-size:0.95rem;}
.auth-art > b {color:#d6ebff;font-size:15rem;}
.auth-art > i {border-color:#80adff;background:transparent;}
@media (min-width: 1600px) { :root { --review-list-width: 244px; --review-inspector-width: 332px; } }
@media (max-width: 1100px) { .auth-story { padding: var(--tg-space-9); } .auth-form { padding: 50px var(--tg-space-9); } .auth-story h1 { font-size: 4rem; } .auth-art { height: 220px; } #view-new .brief-layout { grid-template-columns: minmax(0, 1fr) 270px; } }
@media (max-width: 800px) { .page-heading { align-items: flex-start; margin-bottom: 22px; } .page-heading h1 { font-size: 2.5rem; } .page-heading p { font-size: 1.3rem; } #view-new .brief-layout { grid-template-columns: 1fr; } #view-new .brief-summary { position: static; } #view-new .form-card, #view-new .brief-assistant { padding: var(--tg-space-5); } #view-new .brief-steps button { padding: 10px var(--tg-space-2) 14px; gap: var(--tg-space-2); } #view-new .brief-steps small { display: none; } #view-jobs .filter-bar { flex-wrap: wrap; } #view-jobs .filter-bar .search-field { width: 100%; flex-basis: 100%; } #view-jobs #job-list { position: static; max-height: 330px; } .auth-shell { grid-template-columns: 1fr; } .auth-story { display: none; } .auth-form { padding: var(--tg-space-8) var(--tg-space-6); min-height: 100dvh; } .auth-form h2 { font-size: 2.7rem; } .studio-command { margin-top: 9vh; } .command-footer { font-size: 1rem; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .button, .text-button, .style-card { transition: none; } }