*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* v30H: tells the UA to paint native form-control internals (select popups, scrollbars) light. Previously undeclared, which is why popups in dark mode. */ color-scheme: dark; --bg: #1c1a17; --surface: #242220; --surface-2: #2c2a26; --border: #3a3733; --border-focus: #d99a3f; --amber: #d99a3f; --amber-pale: #2e2418; --text: #ede9e3; --text-muted: #a89e90; --text-dim: #8c8174; --error-bg: #2e1916; --error-border: #6b2c26; --error-text: #f87171; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.6; transition: background-color .15s ease, color .15s ease; } .app { max-width: 700px; margin: 0 auto; padding: 48px 24px 96px; } /* Header */ .header { padding-bottom: 28px; border-bottom: 2px solid var(--border); margin-bottom: 48px; display: flex; align-items: flex-end; justify-content: space-between; } .logo { font-family: var(--serif); font-size: 34px; font-weight: 400; color: var(--text); letter-spacing: -0.5px; } .tagline { color: var(--text-dim); font-size: 12px; padding-bottom: 4px; } /* Creator */ .creator-heading { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 8px; color: var(--text); } .creator-desc { color: var(--text-muted); margin-bottom: 32px; font-size: 13px; line-height: 1.7; } /* Fields */ .field-group { margin-bottom: 24px; } .field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; } .optional { color: var(--text-dim); font-weight: 400; } .text-input { width: 100%; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text); font-family: var(--sans); font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow); } .text-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(186,117,23,.1); } .text-input::placeholder { color: var(--text-dim); } /* Sample inputs */ .samples-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .link-btn { background: none; border: none; color: var(--amber); font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; font-family: var(--sans); } .link-btn:hover { opacity: 0.75; } .sample-block { margin-bottom: 16px; } .sample-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .sample-label { font-size: 11px; color: var(--text-dim); font-weight: 500; letter-spacing:.04em; } .remove-btn { background: none; border: none; color: var(--text-dim); font-size: 11px; cursor: pointer; font-family: var(--sans); } .remove-btn:hover { color: var(--error-text); } .sample-block textarea { width: 100%; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.7; resize: vertical; min-height: 130px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow); } .sample-block textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(186,117,23,.1); } .sample-block textarea::placeholder { color: var(--text-dim); } .sample-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; } .overlong-warn { font-size: 11px; color: #b45309; } .char-count { font-size: 11px; color: var(--text-dim); margin-left: auto; } /* Auth */ .auth-block { margin: 28px 0; padding: 16px 18px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); } .auth-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .auth-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--amber); flex-shrink: 0; width: 15px; height: 15px; } .auth-label span { font-size: 13px; color: var(--text-muted); line-height: 1.6; } /* Error */ .error-block { padding: 12px 16px; border: 1.5px solid var(--error-border); background: var(--error-bg); border-radius: var(--radius); color: var(--error-text); font-size: 13px; margin-bottom: 16px; } /* Analyse button */ .analyse-btn { width: 100%; padding: 14px; background: var(--amber); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: background 0.15s, transform 0.1s; letter-spacing: .01em; } .analyse-btn:hover:not(:disabled) { background: #a36614; } .analyse-btn:active:not(:disabled) { transform: scale(0.99); } .analyse-btn:disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; } /* Loading */ .loading-block { text-align: center; padding: 32px; color: var(--text-muted); font-size: 13px; } .spinner { width: 28px; height: 28px; border: 2.5px solid var(--border); border-top-color: var(--amber); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes spin { to { transform: rotate(360deg); } } /* Results */ /* v30H: obsolete .results-section rule removed. Its 56px margin-top, 48px padding-top and 2px border-top were a separator from the analyse form that once sat above the results on a single page. Profile Detail became its own screen (#screen-review), so the separator separated from nothing and rendered as 106px of dead space above the profile name. The class is still applied by renderResults() and is now inert; no descendant selectors depend on it. */ .results-title { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 4px; color: var(--text); } .results-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 24px; } .summary-block { border-left: 3px solid var(--amber); padding: 4px 0 4px 18px; margin-bottom: 24px; } .summary-text { color: var(--text-muted); font-size: 14px; line-height: 1.8; } .traits-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .chip { font-size: 12px; padding: 5px 13px; border-radius: 100px; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); font-weight: 500; } .chip.sm { font-size: 11px; padding: 3px 9px; } .section-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; margin-top: 36px; display: block; } /* Layer 1 scores */ .scores-list { display: flex; flex-direction: column; gap: 10px; } .score-row { display: flex; align-items: center; gap: 12px; } .score-dim { font-size: 12px; color: var(--text-muted); width: 200px; flex-shrink: 0; } .score-track { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; } .score-fill { height: 100%; background: var(--amber); border-radius: 2px; } .score-num { font-size: 12px; color: var(--text); font-weight: 600; width: 22px; text-align: right; flex-shrink: 0; } .score-band { font-size: 11px; color: var(--text-dim); width: 52px; flex-shrink: 0; } /* Layer 2 groups */ .groups-list { display: flex; flex-direction: column; gap: 12px; } .group-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .group-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .group-name { font-size: 13px; font-weight: 600; color: var(--text); } .level-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; letter-spacing: .03em; } .lv-high { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .lv-medium { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .lv-low { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); } .group-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .group-evidence { font-size: 12px; color: var(--text-muted); font-style: italic; border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 10px; line-height: 1.6; } .group-instr { font-size: 13px; color: var(--text); line-height: 1.6; } .group-instr::before { content: '→ '; color: var(--amber); font-weight: 600; } .recreation-block { margin-top: 32px; padding: 20px; background: var(--amber-pale); border: 1.5px solid #f0d9a8; border-radius: var(--radius); } .recreation-text { font-size: 13px; color: var(--text-muted); line-height: 1.8; } .notice { margin-top: 24px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; color: var(--text-dim); text-align: center; } @media (max-width: 600px) { .app { padding: 28px 16px 60px; } .header { flex-direction: column; align-items: flex-start; gap: 4px; } .score-dim { width: 130px; } } /* ═══════════════════════════════════════════════════════════════════════════ v11 additions — profiles panel, radar chart, save/update UI, label fixes ═══════════════════════════════════════════════════════════════════════════ */ /* ── Saved profiles panel ──────────────────────────────────────────────────── */ .profiles-panel { margin-bottom: 48px; padding-bottom: 36px; border-bottom: 2px solid var(--border); } .profiles-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .profiles-heading { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--text); } .profiles-count { font-size: 12px; color: var(--text-dim); } /* Profile list items */ .profile-list { display: flex; flex-direction: column; gap: 8px; } .profile-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .profile-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .profile-item-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .profile-item-date { font-size: 11px; color: var(--text-dim); } .profile-item-actions { display: flex; gap: 8px; flex-shrink: 0; } /* Profile action buttons */ .pf-btn { background: none; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 5px 12px; font-size: 12px; font-family: var(--sans); font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .pf-load { color: var(--amber); border-color: var(--amber); background: transparent; } .pf-load:hover { background: var(--amber); color: #fff; } .pf-dupe { color: var(--text-muted); } .pf-dupe:hover { background: var(--surface-2); } .pf-del { color: var(--text-dim); } .pf-del:hover { color: var(--error-text); border-color: var(--error-border); background: var(--error-bg); } /* ── Results: editable name + summary ─────────────────────────────────────── */ .result-name-row { margin-bottom: 8px; } .result-name-input { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--text); border: 1.5px solid transparent; background: transparent; padding: 4px 0; width: 100%; letter-spacing: -0.3px; outline: none; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; border-radius: var(--radius); } .result-name-input:hover { border-color: var(--border); background: var(--surface); padding: 4px 10px; } .result-name-input:focus { border-color: var(--amber); background: var(--bg); padding: 4px 10px; box-shadow: 0 0 0 3px rgba(186,117,23,.1); } .result-name-input::placeholder { color: var(--text-dim); } .summary-edit-wrap { margin-bottom: 20px; } .result-summary-input { width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--text-muted); font-family: var(--sans); font-size: 13px; line-height: 1.7; resize: vertical; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .result-summary-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(186,117,23,.1); } .result-summary-input::placeholder { color: var(--text-dim); } /* ── Save actions ──────────────────────────────────────────────────────────── */ .save-actions { display: flex; align-items: center; gap: 16px; margin: 20px 0 12px; } .save-btn { padding: 10px 20px; background: transparent; color: var(--amber); border: 2px solid var(--amber); border-radius: var(--radius); font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .save-btn:hover { background: var(--amber); color: #fff; } .save-confirm { font-size: 13px; font-weight: 500; transition: opacity 0.3s; } .save-confirm--ok { color: #15803d; } .save-confirm--error { color: var(--error-text); } /* ── Privacy notice ────────────────────────────────────────────────────────── */ .privacy-notice { font-size: 12px; color: var(--text-dim); padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; line-height: 1.6; } /* ── Radar chart ───────────────────────────────────────────────────────────── */ .radar-wrap { display: flex; justify-content: center; margin: 16px 0 24px; } .radar-svg { width: 100%; max-width: 500px; height: auto; display: block; } /* ── Score band colour variants ────────────────────────────────────────────── */ .score-band--high { color: #15803d; } .score-band--medium { color: #b45309; } .score-band--low { color: var(--text-dim); } /* ── Layer 2: confidence line ──────────────────────────────────────────────── */ .group-confidence { font-size: 11px; color: var(--text-dim); margin-top: 8px; } .conf-value { font-weight: 500; color: var(--text-muted); } /* ── Mobile adjustments ────────────────────────────────────────────────────── */ @media (max-width: 600px) { .profile-item { flex-direction: column; align-items: flex-start; gap: 10px; } .profile-item-name { max-width: 100%; } .profile-item-actions { width: 100%; justify-content: flex-start; } .save-actions { flex-direction: column; align-items: flex-start; gap: 10px; } .radar-svg { max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ v13 additions — Layer 1 sliders, Layer 2 pentagon, section headers ═══════════════════════════════════════════════════════════════════════════ */ /* ── Score row — column layout with slider ─────────────────────────────────── */ /* Override v11's horizontal flex row for the new vertical layout */ .score-row { display: flex; flex-direction: column; margin-bottom: 14px; gap: 0; } .score-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } /* Remove the fixed width — no longer in a fixed-column flex row */ .score-dim { font-size: 12px; color: var(--text-muted); width: auto; flex-shrink: unset; } .score-row-vals { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ── Range slider styling ──────────────────────────────────────────────────── */ .score-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--surface-2); border-radius: 2px; outline: none; cursor: pointer; margin: 4px 0 5px; } .score-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--amber); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform 0.1s; } .score-slider::-webkit-slider-thumb:hover { transform: scale(1.2); } .score-slider::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--amber); cursor: pointer; } .score-slider:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 2px; } /* ── Layer 1 section header (label + reset button) ─────────────────────────── */ .l1-section-header { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; margin-bottom: 16px; } .l1-section-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); } .reset-btn { background: none; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 5px 13px; font-size: 11px; font-family: var(--sans); font-weight: 500; color: var(--text-muted); cursor: pointer; transition: border-color 0.12s, color 0.12s; white-space: nowrap; } .reset-btn:hover { border-color: var(--amber); color: var(--amber); } /* ── Layer 2 section header ────────────────────────────────────────────────── */ .l2-section-header { margin-top: 36px; margin-bottom: 16px; } /* ── Layer 2 pentagon chart ────────────────────────────────────────────────── */ .radar-wrap--l2 { margin-top: 4px; } .radar-svg--l2 { max-width: 380px; } /* ── Mobile adjustments ────────────────────────────────────────────────────── */ @media (max-width: 600px) { .l1-section-header { flex-direction: column; align-items: flex-start; gap: 10px; } .radar-svg--l2 { max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ v14 polish — score card redesign, radar label size bumps ═══════════════════════════════════════════════════════════════════════════ */ /* ── Scores helper copy ────────────────────────────────────────────────────── */ .scores-helper { font-size: 12px; color: var(--text-dim); margin: -4px 0 18px; font-style: italic; } /* ── Score card (replaces score-row) ──────────────────────────────────────── */ .score-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px 10px; margin-bottom: 10px; box-shadow: var(--shadow); } .score-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .score-card .score-dim { font-size: 13px; font-weight: 500; color: var(--text); width: auto; } .score-card-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .score-val-display { font-size: 16px; font-weight: 700; color: var(--amber); line-height: 1; } .score-of-ten { font-size: 11px; font-weight: 400; color: var(--text-dim); } /* ── Score slider — thicker track, clear thumb ─────────────────────────────── */ .score-card .score-slider { margin: 2px 0 6px; height: 4px; } .score-card .score-slider::-webkit-slider-thumb { width: 18px; height: 18px; } .score-card .score-slider::-moz-range-thumb { width: 18px; height: 18px; } /* ── Scale hints — Low / Medium / High below slider ───────────────────────── */ .score-scale-hints { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 2px; padding: 0 1px; letter-spacing: .01em; } /* ── L2 pentagon wider container ───────────────────────────────────────────── */ .radar-svg--l2 { max-width: 420px; } /* ── Mobile overrides ──────────────────────────────────────────────────────── */ @media (max-width: 600px) { .score-card { padding: 12px 14px 8px; } .score-card .score-dim { font-size: 12px; width: auto; } .score-val-display { font-size: 14px; } .radar-svg--l2 { max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ v15 additions — Generation section ═══════════════════════════════════════════════════════════════════════════ */ /* ── Generation section ────────────────────────────────────────────────────── */ .generation-section { margin-top: 56px; padding-top: 48px; border-top: 2px solid var(--border); } /* ── Selects (profile + output type) ───────────────────────────────────────── */ .gen-select { cursor: pointer; } /* ── Source material textarea ──────────────────────────────────────────────── */ .gen-source-area { width: 100%; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--text); font-family: var(--sans); font-size: 13px; line-height: 1.7; resize: vertical; min-height: 180px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--shadow); } .gen-source-area:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(186,117,23,.1); } .gen-source-area::placeholder { color: var(--text-dim); } /* ── No profiles hint ──────────────────────────────────────────────────────── */ .gen-no-profiles-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-style: italic; } /* ── Generation mode indicator (v28) ───────────────────────────────────────── */ /* Shows which of the two selectors are active: Personal only / Brand only / Personal + Brand. Sits between the selectors and the output type field so it reads as confirmation of what was just chosen above. */ .gen-mode-indicator { display: inline-block; font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-pale); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; margin: -8px 0 24px; } /* ── Generated output section ──────────────────────────────────────────────── */ .gen-output-section { margin-top: 36px; padding-top: 24px; border-top: 1.5px solid var(--border); } .gen-output-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } /* ── New output action (foot of output section) ───────────────────────────── */ .gen-new-output-wrap { margin-top: 20px; display: flex; justify-content: flex-end; } /* ── Email subject line ────────────────────────────────────────────────────── */ .gen-subject-wrap { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; } .gen-subject-label { font-weight: 600; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .gen-subject-text { color: var(--text); } /* ── Generated text display ────────────────────────────────────────────────── */ .gen-output-text { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 22px; font-size: 14px; line-height: 1.8; color: var(--text); white-space: pre-wrap; /* preserves line breaks from API response */ word-break: break-word; min-height: 80px; } /* ── Mobile overrides ──────────────────────────────────────────────────────── */ @media (max-width: 600px) { .gen-output-header { flex-direction: column; align-items: flex-start; gap: 10px; } .gen-source-area { min-height: 140px; } } /* ═══════════════════════════════════════════════════════════════════════════ v16 additions — Post-generation QA panel ═══════════════════════════════════════════════════════════════════════════ */ /* ── QA panel container ────────────────────────────────────────────────────── */ .gen-qa-panel { margin-top: 20px; } .qa-divider { border: none; border-top: 1.5px solid var(--border); margin-bottom: 18px; } /* ── Claim check status row ────────────────────────────────────────────────── */ .qa-claim-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .qa-claim-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; letter-spacing: .03em; } .qa-claim--passed { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .qa-claim--passed_with_adjustments { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .qa-claim--needs_review { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; } .qa-claim--failed { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); } /* ── Revised content notice ────────────────────────────────────────────────── */ .qa-revised-notice { font-size: 12px; color: #b45309; font-style: italic; margin-bottom: 12px; padding: 8px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); line-height: 1.5; } /* ── Claim notes list ──────────────────────────────────────────────────────── */ .qa-notes-wrap { margin-bottom: 12px; } .qa-notes-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .qa-notes-list li { font-size: 12px; color: var(--text-muted); padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #c2410c; border-radius: var(--radius); line-height: 1.5; } /* ── Scorecard ─────────────────────────────────────────────────────────────── */ .qa-scorecard { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .qa-score-row { display: flex; align-items: center; justify-content: space-between; } .qa-score-row--readiness { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); } .qa-score-label { font-size: 12px; color: var(--text-muted); } .qa-score-label--readiness { font-size: 12px; font-weight: 600; color: var(--text); } /* ── Band badges (shared by all four score rows) ───────────────────────────── */ .qa-band { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 100px; letter-spacing: .03em; } /* Dimension bands */ .qa-band--strong { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .qa-band--good { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .qa-band--partial { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .qa-band--weak { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); } /* Overall readiness badges */ .qa-band--ready { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .qa-band--minor_review { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .qa-band--needs_review { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; } /* ── Unavailable notice ────────────────────────────────────────────────────── */ .qa-unavailable { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; } /* ═══════════════════════════════════════════════════════════════════════════ v15B additions — Tab navigation layout ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tab navigation ────────────────────────────────────────────────────────── */ .tab-nav { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 36px; gap: 0; } .tab-btn { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; /* overlap the nav border */ padding: 12px 22px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; } .tab-btn:hover { color: var(--text); } .tab-btn--active { color: var(--amber); border-bottom-color: var(--amber); font-weight: 600; } /* ── Tab panels ─────────────────────────────────────────────────────────────── */ .tab-panel { display: none; } .tab-panel.tab-panel--active { display: block; } /* ── Review tab hint (visible when no profile loaded yet) ──────────────────── */ .review-hint { color: var(--text-dim); font-size: 13px; font-style: italic; margin-bottom: 0; padding: 12px 0; } /* ── Generation section — inside its own tab, no separator needed ──────────── */ .generation-section { margin-top: 0; padding-top: 0; border-top: none; } /* ── Profiles panel — above tabs, add bottom spacing before tab nav ─────────── */ .profiles-panel + .tab-nav { margin-top: 0; } /* ── Mobile tab overrides ───────────────────────────────────────────────────── */ @media (max-width: 600px) { .tab-btn { padding: 10px 14px; font-size: 12px; } .tab-nav { overflow-x: auto; } } /* ═══════════════════════════════════════════════════════════════════════════ v17 — App shell layout (sidebar + workspace) Additive. Does not modify any existing component CSS. ═══════════════════════════════════════════════════════════════════════════ */ /* Override v16 page padding when shell is present. Selecting via .app-shell context means the v16 .app class is unaffected if reused. */ body:has(.app-shell) { background: var(--surface); } /* ── Shell container ───────────────────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; font-family: var(--sans); color: var(--text); } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width .15s ease; } /* ── Header: brand + account in one section, single border at the base ──── */ .sidebar-header { display: flex; flex-direction: column; gap: 12px; /* the ONE number controlling the gap between the brand row and the account row — was previously hidden as a bottom- padding on .sidebar-brand-row, stacked under this header's own padding. One source, not two. */ padding: 22px var(--sidebar-outer-x) 14px; /* top = 22px, the exact same number as .workspace-header's own top padding. Not a calculated match — the same literal value, so both columns start from the same baseline. */ position: relative; /* anchors the account dropdown */ } .sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--sidebar-inner-x); /* horizontal only now — no bottom padding here anymore, that job belongs to the header's gap above */ } .brand-mark { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--text); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; position: relative; top: 1px; /* optical correction for DM Serif Display's high-sitting glyphs */ } .sidebar-collapse-btn { flex-shrink: 0; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--text-dim); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: color .15s ease, border-color .15s ease, background .15s ease; } .sidebar-collapse-btn svg { width: 16px; height: 16px; } .sidebar-collapse-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); } /* ── Account trigger — a row in the same menu system as the nav below it, not a separate card. Same 10/12 outer/inner padding as .sidebar-link, no border, hover-only background — structurally a sibling of the nav items, not a boxed panel floating under the brand. ───────────────────── */ .account-trigger { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; column-gap: 10px; width: 100%; padding: 8px var(--sidebar-inner-x); background: none; border: none; border-radius: var(--radius); cursor: pointer; text-align: left; transition: background .15s ease; } .account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--surface-2); } .account-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--amber-pale); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--amber); letter-spacing: 0.02em; user-select: none; } .account-trigger-text { min-width: 0; /* required even in a grid item, or text won't be allowed to shrink below its content size and ellipsis won't fire */ display: flex; flex-direction: column; gap: 1px; } .account-name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .account-email { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .account-trigger-chevron { flex-shrink: 0; width: 14px; height: 14px; color: var(--text-dim); } /* ── Account dropdown menu ───────────────────────────────────────────────── */ .account-menu { position: absolute; top: 100%; left: 10px; right: 10px; margin-top: 6px; min-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); padding: 6px; z-index: 40; } .account-menu-header { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .account-menu-name { font-size: 13px; font-weight: 600; color: var(--text); } .account-menu-email { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: none; border: none; border-radius: calc(var(--radius) - 2px); font-size: 13px; font-family: var(--sans); color: var(--text); cursor: pointer; text-align: left; } .account-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); } .account-menu-item:not(:disabled):hover { background: var(--surface-2); } .account-menu-item:disabled { color: var(--text-dim); cursor: default; } .account-menu-item--logout { color: var(--error-text); } .account-menu-item--logout svg { color: var(--error-text); } .account-menu-item--logout:hover { background: var(--error-bg); } .account-menu-section-label { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } .theme-options { display: flex; gap: 4px; padding: 0 6px 6px; } .theme-option { flex: 1; padding: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); font-size: 11.5px; font-family: var(--sans); color: var(--text-muted); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .theme-option:hover { color: var(--text); } .theme-option--active { background: var(--amber-pale); border-color: var(--amber); color: var(--amber); font-weight: 600; } .account-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; } .sidebar-nav { flex: 1; padding: 14px var(--sidebar-outer-x) 0; display: flex; flex-direction: column; gap: 2px; } .sidebar-link { display: flex; align-items: center; gap: 11px; padding: 9px var(--sidebar-inner-x); border-radius: var(--radius); font-size: 13px; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; border: 1px solid transparent; white-space: nowrap; overflow: hidden; } .sidebar-link:hover { background: var(--surface-2); color: var(--text); } .sidebar-link.sidebar-link--active { background: var(--bg); color: var(--text); font-weight: 500; border-color: var(--border); box-shadow: var(--shadow); } .sidebar-icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; position: relative; left: -3px; /* the stroke icons (house/people/folder/gear) have internal padding baked into their viewBox that a solid circle or text glyph doesn't — their bounding box already lines up with the avatar/brand text, but the visible ink sits a few px further right without this. Verified against an actual rendered screenshot, not eyeballed. */ } .sidebar-footer { padding: 10px 10px 14px; border-top: 1px solid var(--border); } .sidebar-meta { padding: 8px 12px 0; font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; } /* ── Sidebar collapsed state ────────────────────────────────────────────── Toggled via .sidebar--collapsed by js/shell.js. The account avatar stays visible and clickable throughout — only the surrounding text/labels hide. ───────────────────────────────────────────────────────────────────────── */ .sidebar--collapsed { width: 64px; } .sidebar--collapsed .brand-mark { display: none; } .sidebar--collapsed .sidebar-brand-row { justify-content: center; } .sidebar--collapsed .sidebar-collapse-btn svg { transform: scaleX(-1); } .sidebar--collapsed .account-trigger { grid-template-columns: 30px; justify-content: center; padding: 7px; } .sidebar--collapsed .account-trigger-text, .sidebar--collapsed .account-trigger-chevron { display: none; } .sidebar--collapsed .account-menu { left: 8px; right: auto; width: 240px; } .sidebar--collapsed .sidebar-link { justify-content: center; padding: 9px; } .sidebar--collapsed .sidebar-link span:not(.sidebar-icon) { display: none; } .sidebar--collapsed .sidebar-meta { display: none; } /* ── Workspace ────────────────────────────────────────────────────────────── */ .workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .workspace-header { padding: 22px 36px 0; background: var(--bg); border-bottom: 1px solid var(--border); } /* ── Breadcrumb ───────────────────────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; min-height: 16px; } .breadcrumb-link { color: var(--text-dim); text-decoration: none; cursor: pointer; transition: color .15s ease; } .breadcrumb-link:hover { color: var(--text-muted); } .breadcrumb-current { color: var(--text); font-weight: 500; } .breadcrumb-sep { color: var(--text-dim); opacity: 0.6; } /* ── Workspace title row ─────────────────────────────────────────────────── */ .workspace-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; } .workspace-title-block { min-width: 0; flex: 1; } .workspace-title { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.4px; color: var(--text); margin-bottom: 4px; line-height: 1.2; } .workspace-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 640px; } .workspace-action { flex-shrink: 0; padding-top: 6px; } /* ── Workspace main (scrolling area) ─────────────────────────────────────── */ .workspace-main { flex: 1; overflow-y: auto; padding: 28px 36px 60px; background: var(--bg); } /* ── Screens ─────────────────────────────────────────────────────────────── */ .screen { display: none; } .screen.screen--active { display: block; } .screen-section-label { font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } /* ── Toolbar row (search + count) ────────────────────────────────────────── */ .toolbar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .search-wrap { position: relative; flex: 1; max-width: 320px; } .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-dim); pointer-events: none; } .search-input { width: 100%; padding: 8px 12px 8px 34px; font-size: 13px; border: 1px solid var(--border); border-radius: 100px; background: var(--bg); color: var(--text); font-family: var(--sans); transition: border-color .15s ease, box-shadow .15s ease; } .search-input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--amber-pale); } .row-count { font-size: 11px; color: var(--text-dim); margin-left: auto; } /* ── Data table (Profiles list) ──────────────────────────────────────────── */ .data-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: hidden; } .data-table-header, .data-table-row { display: grid; grid-template-columns: 2.2fr 2fr 0.9fr 0.6fr; gap: 14px; padding: 12px 18px; align-items: center; } .data-table-header { background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .data-table-body .data-table-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s ease; } .data-table-body .data-table-row:last-child { border-bottom: none; } .data-table-body .data-table-row:hover { background: var(--surface); } .data-table-body .data-table-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; background: var(--surface); } .th--actions, .td--actions { text-align: right; } .td--name { display: flex; align-items: center; gap: 11px; min-width: 0; } .profile-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--amber-pale); color: var(--amber); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; } .td--name .name-text { font-weight: 500; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td--summary { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td--date { font-size: 12px; color: var(--text-dim); } /* Row "more" menu trigger */ .row-menu-wrap { position: relative; display: inline-block; } .row-menu-btn { background: transparent; border: 1px solid transparent; border-radius: var(--radius); padding: 5px 8px; cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; transition: background .12s ease, border-color .12s ease; } .row-menu-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); } .row-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 150px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; z-index: 20; display: none; } .row-menu.row-menu--open { display: block; } .row-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; font: inherit; font-size: 12px; color: var(--text); padding: 7px 10px; border-radius: 4px; cursor: pointer; } .row-menu-item:hover { background: var(--surface); } .row-menu-item--danger { color: var(--error-text); } .row-menu-item--danger:hover { background: var(--error-bg); } /* ── Home screen ─────────────────────────────────────────────────────────── */ /* v30E — Home quick actions (Generate Content / Saved Outputs). Two-up on wide layouts, stacked below the app's existing 900px narrow breakpoint (matches .app-shell's own mobile threshold above). Tokens only — no new colour palette. */ .home-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .home-quick-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 18px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; font-family: var(--sans); transition: border-color .12s ease, box-shadow .12s ease; } .home-quick-card:hover { border-color: var(--border-focus); box-shadow: var(--shadow); } .home-quick-card:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .hqc-text { flex: 1; min-width: 0; } .hqc-label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; } .hqc-desc { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.5; } .hqc-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-dim); transition: transform .12s ease, color .12s ease; } .home-quick-card:hover .hqc-arrow { color: var(--text); transform: translateX(2px); } @media (max-width: 900px) { .home-quick-actions { grid-template-columns: 1fr; } } .home-recent-list { display: flex; flex-direction: column; gap: 8px; } .home-recent-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; transition: background .12s ease, border-color .12s ease; } .home-recent-row:hover { background: var(--surface); border-color: var(--text-dim); } .home-recent-info { flex: 1; min-width: 0; } .home-recent-name { font-weight: 500; font-size: 13px; color: var(--text); margin-bottom: 2px; } .home-recent-meta { font-size: 11px; color: var(--text-dim); } .home-recent-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ── Buttons (workspace-level) ───────────────────────────────────────────── */ .primary-btn { background: var(--text); color: var(--bg); border: none; padding: 9px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: opacity .15s ease, transform .05s ease; } .primary-btn:hover { opacity: 0.9; } .primary-btn:active { transform: translateY(1px); } .secondary-btn { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 7px 13px; border-radius: var(--radius); font-size: 12px; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: background .15s ease, border-color .15s ease; } .secondary-btn:hover { background: var(--surface); border-color: var(--text-dim); } .danger-btn { background: var(--bg); color: var(--error-text); border: 1px solid var(--error-border); padding: 8px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: background .15s ease; } .danger-btn:hover { background: var(--error-bg); } /* ── Empty states ────────────────────────────────────────────────────────── */ .empty-state { padding: 56px 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); } .empty-state--soft { background: transparent; border-color: transparent; padding: 32px 24px; } .empty-title { font-family: var(--serif); font-size: 18px; color: var(--text); margin-bottom: 6px; } .empty-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.6; } .empty-state .primary-btn { margin-top: 4px; } /* ── Settings ───────────────────────────────────────────────────────────── */ .settings-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 18px 22px; margin-bottom: 16px; max-width: 640px; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .settings-row:last-child { border-bottom: none; } .settings-label { color: var(--text-muted); } .settings-value { color: var(--text); font-weight: 500; font-family: var(--mono, monospace); font-size: 12px; } .settings-section-title { font-family: var(--serif); font-size: 16px; color: var(--text); margin-bottom: 8px; } .settings-note { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; } /* ── Mobile: simplified stacked layout below 900px ───────────────────────── */ @media (max-width: 900px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--border); } .sidebar.sidebar--collapsed { width: 100%; } /* collapse is a desktop-only affordance */ .sidebar-collapse-btn { display: none; } .sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 10px; } .sidebar-footer { flex-direction: row; border-top: 1px solid var(--border); padding: 10px; } .sidebar-meta { display: none; } .workspace-header { padding: 18px 20px 0; } .workspace-main { padding: 22px 20px 40px; } .workspace-title { font-size: 24px; } .data-table-header, .data-table-row { grid-template-columns: 1.6fr 0.9fr 0.5fr; gap: 10px; padding: 12px 14px; } .th--summary, .td--summary { display: none; } .toolbar-row { flex-wrap: wrap; } } /* ═══════════════════════════════════════════════════════════════════════════ v18 — Wide-screen content containment + QA reason notes ═══════════════════════════════════════════════════════════════════════════ */ /* ── Content containment ───────────────────────────────────────────────────── On ultra-wide monitors the workspace was sprawling. Cap content widths and left-align inside the workspace, leaving empty space on the right. --------------------------------------------------------------------------- */ /* Workspace header content — breadcrumb + title row stop at 1200px */ .workspace-header > .breadcrumb, .workspace-header > .workspace-title-row { max-width: 1200px; width: 100%; } /* Default screen width — covers Home, Profiles, Projects, Review */ .workspace-main > .screen { max-width: 1200px; width: 100%; } /* Generate — text-heavy, tighter for prose readability */ .workspace-main > #screen-generate { max-width: 960px; } /* Create — form-only, narrow */ .workspace-main > #screen-create { max-width: 800px; } /* Settings — narrow settings panel */ .workspace-main > #screen-settings { max-width: 720px; } /* Generated output prose — slightly tighter still for ideal line length */ .gen-output-text { max-width: 760px; } /* Profile row tone summary already truncates via text-overflow:ellipsis. Confirm the rule still applies after width caps — no change needed. */ /* ── QA score row restructure for stacked label/badge + reason note ──────── */ /* Existing v16 .qa-score-row was display:flex on one line. v18 wraps that line in .qa-score-row-main and adds an optional .qa-score-reason below. */ .qa-score-row { display: flex; flex-direction: column; gap: 4px; } .qa-score-row--readiness { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); } .qa-score-row-main { display: flex; align-items: center; justify-content: space-between; } .qa-score-reason { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 2px 0 0 0; padding: 6px 10px 6px 12px; border-left: 2px solid var(--border); background: var(--surface); border-radius: 0 4px 4px 0; max-width: 720px; } /* Mobile tweaks for v18 containment */ @media (max-width: 900px) { .workspace-main > .screen, .workspace-main > #screen-generate, .workspace-main > #screen-create, .workspace-main > #screen-settings { max-width: 100%; } .gen-output-text { max-width: 100%; } .qa-score-reason { max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ v19 — Output Review panel redesign + table menu clipping fix ═══════════════════════════════════════════════════════════════════════════ */ /* ── Output Review heading area ──────────────────────────────────────────── */ .qa-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding-top: 4px; } .qa-heading { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--text); letter-spacing: -0.2px; margin: 0; } /* Main status badge — derived from claimCheckStatus + overallReadiness */ .qa-main-status { font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 100px; letter-spacing: 0.03em; flex-shrink: 0; } .qa-main--ready { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .qa-main--minor_review { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .qa-main--needs_review { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; } .qa-main--failed { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); } /* ── Detail checks container ─────────────────────────────────────────────── */ .qa-checks { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 4px 18px; margin-top: 14px; } /* Each check is its own bordered row with breathing room */ .qa-check { padding: 14px 0; border-bottom: 1px solid var(--border); } .qa-check:last-child { border-bottom: none; } .qa-check-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .qa-check-label { font-size: 13px; font-weight: 500; color: var(--text); } /* Overall readiness row — slightly emphasized as the bottom-line check */ .qa-check--readiness .qa-check-label { font-weight: 600; } /* Reason note — sits below the row, left-aligned, muted */ .qa-check-reason { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 8px 0 0 0; padding: 0; max-width: 720px; text-align: left; } /* ── Profile table — fix three-dot menu clipping ─────────────────────────── */ .data-table-wrap { overflow: visible; } /* Restore corner cleanliness on the header without overflow:hidden */ .data-table-header { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .data-table-body .data-table-row:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } /* Row menu — upward variant for when downward open would clip below workspace */ .row-menu.row-menu--up { top: auto; bottom: calc(100% + 4px); } /* Mobile: ensure check rows stay readable */ @media (max-width: 900px) { .qa-checks { padding: 4px 14px; } .qa-check-reason { max-width: 100%; } .qa-header { flex-wrap: wrap; } } /* ═══════════════════════════════════════════════════════════════════════════ v21 — Left-aligned sticky header; centred workspace content retained ═══════════════════════════════════════════════════════════════════════════ */ /* ── Body locks scrolling so the workspace owns its own scroll context ────── */ body:has(.app-shell) { overflow: hidden; height: 100vh; } /* ── Workspace becomes the scroll container ───────────────────────────────── */ .workspace { height: 100vh; overflow-y: auto; } /* Workspace-main no longer scrolls — workspace scrolls instead. Padding kept so content has breathing room from the sticky header. */ .workspace-main { overflow-y: visible; flex: initial; } /* ── Sticky header (sits at the top of the scrolled workspace) ────────────── */ .workspace-header { position: sticky; top: 0; z-index: 20; background: var(--bg); } /* ── Centre workspace content; header left-aligns from workspace edge ─────── */ /* v21: header breadcrumb and title row are left-aligned within the workspace. The v18 max-width cap (1200px) still prevents sprawl on ultra-wide screens. Auto-margins removed from header elements — they were causing the header to float centred like the content column rather than behave as an app header. */ .workspace-main > .screen { margin-left: auto; margin-right: auto; } /* ── Output Review — 2x2 grid of compact check cards ──────────────────────── */ .qa-checks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .qa-check-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); } .qa-check-card .qa-check-label { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* Overall readiness card — slightly emphasised as the bottom-line check */ .qa-check-card--readiness { background: var(--surface); } .qa-check-card--readiness .qa-check-label { color: var(--text); font-weight: 600; } /* ── Review notes (consolidated reasons under the grid) ──────────────────── */ .qa-review-notes { margin-top: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 100%; } .qa-review-notes-heading { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } .qa-review-notes-list { display: flex; flex-direction: column; gap: 12px; } .qa-review-note { display: flex; flex-direction: column; gap: 3px; } .qa-review-note-label { font-size: 12px; font-weight: 600; color: var(--text); } .qa-review-note-text { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0; text-align: left; max-width: 720px; } /* ── Mobile fallback: stack workspace, no sticky, single-column grid ─────── */ @media (max-width: 900px) { body:has(.app-shell) { overflow: visible; height: auto; } .workspace { height: auto; overflow-y: visible; } .workspace-header { position: static; } .qa-checks-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ v22 — profileType badge support ═══════════════════════════════════════════════════════════════════════════ */ /* ── Profile type badges ──────────────────────────────────────────────────── */ .profile-type-badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; vertical-align: middle; line-height: 1.6; white-space: nowrap; } /* Personal: neutral/muted — confirms type without competing with the profile name */ .badge--personal { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); } /* Brand: reserved for future Brand Voice profiles — not rendered in Phase B */ .badge--brand { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } /* ── Profile type row on the detail/review screen ────────────────────────── */ .result-type-row { margin-bottom: 10px; } /* ═══════════════════════════════════════════════════════════════════════════ v23 — Brand Voice form and detail screen ═══════════════════════════════════════════════════════════════════════════ */ /* ── Workspace action group: two buttons side by side ────────────────────── */ .workspace-action-group { display: flex; gap: 8px; align-items: center; } .btn--brand-voice { border-color: var(--amber, #b87d00); color: var(--amber, #b87d00); } .btn--brand-voice:hover { background: #fffbeb; border-color: #b45309; color: #b45309; } /* ── Brand profile avatar tint ────────────────────────────────────────────── */ .brand-avatar-brand { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } /* ── Brand form wrapper ───────────────────────────────────────────────────── */ .brand-form-wrap { max-width: 720px; } .brand-form-mode-label { font-size: 12px; color: var(--text-dim); margin-left: 8px; vertical-align: middle; } /* ── Brand form sections ──────────────────────────────────────────────────── */ .brand-form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); } .brand-form-heading { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 18px 0; } .brand-field-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; } .brand-field-row .field-label { width: 180px; flex-shrink: 0; margin-bottom: 0; } .brand-field-row .text-input { flex: 1; } /* ── Brand sliders ────────────────────────────────────────────────────────── */ .brand-slider-group { margin-bottom: 18px; } .brand-slider-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .brand-slider-header .field-label { flex: 1; margin-bottom: 0; } .slider-val-display { font-size: 15px; font-weight: 600; color: var(--text); min-width: 16px; text-align: right; } .slider-val-unit { font-size: 12px; color: var(--text-dim); } .brand-slider { width: 100%; height: 4px; accent-color: var(--amber, #b87d00); cursor: pointer; display: block; } .slider-hint { display: block; font-size: 11px; color: var(--text-dim); margin-top: 4px; } /* ── Phrase textareas ─────────────────────────────────────────────────────── */ .brand-phrases-area { font-size: 13px; line-height: 1.6; resize: vertical; } /* ── Compiled brand guide (details/summary) ───────────────────────────────── */ .brand-guide-details { margin-top: 20px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .brand-guide-summary { font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 10px 14px; user-select: none; background: var(--surface); list-style: none; } .brand-guide-summary::-webkit-details-marker { display: none; } .brand-guide-summary::before { content: '▶ '; font-size: 9px; color: var(--text-dim); } details[open] .brand-guide-summary::before { content: '▼ '; } .brand-guide-pre { font-size: 11px; line-height: 1.7; color: var(--text-muted); background: var(--surface-2); padding: 12px 14px; margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'Cascadia Code', monospace; border-top: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════════════════════════ v24 — Brand Voice schema hardening: identity fields, CTA wording, notes ═══════════════════════════════════════════════════════════════════════════ */ /* ── Preferred CTA wording row: smooth show/hide via JS inline style ──────── */ /* No CSS needed — controlled by attachBrandFormHandlers via style.display */ /* ── Brand summary / internal notes char-count alignment ─────────────────── */ /* sample-footer already handles layout; .char-count already styled in v22B */ /* ── Brand form heading width fix for longer labels ──────────────────────── */ /* "Promotional intensity ceiling" is longer than "Commercial intensity ceiling" */ .brand-slider-header .field-label { min-width: 0; word-break: break-word; } /* ── Login screen ───────────────────────────────────────────────────────── */ /* ── v30A.2 patch4 — .login-screen owns its own scroll context. Because #app-shell is always present in the DOM (even when logged out), the body:has(.app-shell) rule at line ~2193 applies overflow:hidden and height:100vh to whether or not the user is authenticated. That was correct for the old centred login card (no scroll needed) but breaks the public landing page: header, hero, how-it-works, privacy strip and footer can exceed viewport height, and the body lock prevents them from scrolling. Giving .login-screen its own height/overflow-y makes the public shell scroll internally without disturbing the app-shell layout contract when signed in. */ .login-screen { height: 100vh; min-height: 100vh; overflow-y: auto; background: var(--pub-bg, var(--surface)); } /* ── v30A.2 patch1 — Inline sidebar Log out, corrected. ────────────────────── Small subordinate text action placed under the account name/email inside the .sidebar-header account area. Deliberately NOT styled as a nav row — no icon, no full-width, no border, no background. Reads as a secondary action attached to the account block, not a navigation destination. Sibling of #account-trigger (never nested inside it). Shares .js-logout-btn class with the dropdown Log out — both routed through the same auth.js delegated handler. */ .account-logout-inline { align-self: flex-start; display: inline-block; /* Align with the account name text: matches the account-trigger's internal left padding (--sidebar-inner-x) + avatar (30px) + column-gap (10px). Using calc() so it stays aligned if the tokens shift later. */ margin: 6px 0 4px calc(var(--sidebar-inner-x) + 40px); padding: 2px 0; background: transparent; border: none; color: var(--text-muted); font-family: var(--sans); font-size: 11px; letter-spacing: 0.02em; cursor: pointer; opacity: 0.75; transition: opacity 120ms ease, color 120ms ease; } .account-logout-inline:hover { color: var(--text); opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .account-logout-inline:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; border-radius: 2px; } /* Collapsed sidebar — hide entirely; Log out remains accessible via the dropdown when the sidebar is collapsed. */ .sidebar--collapsed .account-logout-inline { display: none; } .settings-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .settings-link:hover { text-decoration-thickness: 2px; } /* ── v29G — Archived profiles view ──────────────────────────────────────────── */ .profiles-view-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .view-toggle-btn { background: transparent; color: var(--text-muted); border: none; padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; font-family: var(--sans); cursor: pointer; transition: background .15s ease, color .15s ease; } .view-toggle-btn:hover { color: var(--text); } .view-toggle-btn--on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .archived-section { margin-bottom: 24px; } .archived-heading { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; } .archived-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .archived-row { display: grid; grid-template-columns: 2.4fr 1.4fr auto; gap: 14px; padding: 12px 18px; align-items: center; border-bottom: 1px solid var(--border); } .archived-row:last-child { border-bottom: none; } .archived-row .td--date { color: var(--text-dim); font-size: 12px; } .restore-btn { white-space: nowrap; } /* ── v29I — Output Review bullet notes ──────────────────────────────────────── */ .qa-review-note-list { margin: 4px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.55; } .qa-review-note-list li { margin: 2px 0; } /* ── v29J — Personal + Brand Blend summary ──────────────────────────────────── */ .gen-blend-summary { margin: 12px 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; } .gen-blend-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .gen-blend-list { list-style: none; margin: 0; padding: 0; } .gen-blend-list li { margin: 2px 0; color: var(--text); } .gen-blend-role { color: var(--text-muted); margin-right: 4px; } .gen-blend-name { color: var(--text); font-weight: 500; } .gen-blend-priority { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; font-style: italic; } /* ── v29L — Save output control + Saved Outputs screen ─────────────────────── */ .gen-save-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .gen-save-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gen-save-disclosure { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); max-width: 60ch; } .gen-save-result { font-size: 13px; color: var(--text-muted); } .gen-save-result--ok { color: var(--amber); } .gen-save-result--err { color: var(--error-text); } .saved-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .saved-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; /* v30A.1_patch1 — offset scrollIntoView so the sticky .workspace-header (position: sticky; top: 0) does not clip the top of the auto-expanded item on Saved Outputs. Applies to both the explicit "Open in Saved Outputs" button path and the v30A.1 Project detail row-body click path (both call the same navigateTo('saved', {openOutputId}) → renderSaved- Screen → scrollIntoView({block:'start'}) path). 112px covers the workspace-header height (padding 22+0 desktop / 18+0 mobile plus breadcrumb + title content) with a small safety buffer. Older browsers ignore scroll-margin-top and fall back to current behaviour. */ scroll-margin-top: 112px; } .saved-item-main { display: flex; flex-direction: column; gap: 4px; } .saved-item-title { font-weight: 600; color: var(--text); } .saved-item-meta { font-size: 12px; color: var(--text-muted); } .saved-item-actions { display: flex; gap: 14px; margin-top: 10px; } .saved-item-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .saved-detail-subject { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } .saved-detail-label { font-weight: 600; } .saved-detail-text { white-space: pre-wrap; line-height: 1.6; color: var(--text); } .saved-detail-note { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); font-style: italic; } /* ── v29L.1 — UX hygiene patch ─────────────────────────────────────────────── */ /* Selector header row: field label + Clear control on one line */ .gen-select-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .gen-clear-btn { background: none; border: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; } .gen-clear-btn:hover { color: var(--amber); text-decoration: underline; } /* Both-selected helper line (shown only when Personal and Brand are both set) */ .gen-both-hint { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 0 0 24px; } /* Saved Outputs tab count badges (display-time only) */ .saved-tab-count { font-weight: 600; opacity: 0.75; } /* Word counts (display-time only; never persisted) */ .gen-wordcount { margin-left: 10px; margin-right: auto; font-size: 12px; color: var(--text-muted); } .saved-detail-wordcount { margin-top: 8px; font-size: 12px; color: var(--text-muted); } /* ── v29N: Output Version History ─────────────────────────────────────────── */ .saved-detail-vhead { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .saved-detail-review { margin-top: 8px; font-size: 12px; color: var(--text-muted); } .saved-version-warning { margin: 10px 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--text); background: var(--amber-pale); border: 1px solid var(--amber); border-radius: var(--radius); } .versions-area { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); } .versions-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .version-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); } .version-row:last-child { border-bottom: none; } .version-row-label { flex: 1 1 auto; min-width: 180px; font-size: 13px; color: var(--text); } .version-row--archived .version-row-label { color: var(--text-muted); } .versions-controls { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .versions-archived-toggle { margin-top: 10px; font-size: 12px; color: var(--text-muted); } .version-editor { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--amber-pale); } .version-edit-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 8px 0 4px; } .version-edit-label:first-child { margin-top: 0; } .version-edit-text { width: 100%; resize: vertical; min-height: 160px; font-family: inherit; line-height: 1.6; } .version-editor-actions { margin-top: 10px; display: flex; gap: 8px; } .version-edit-msg { margin-top: 8px; font-size: 12px; color: var(--amber); min-height: 16px; } /* ── v30A: Projects ──────────────────────────────────────────────────────── */ /* Projects UI reuses existing tokens (--border, --text, --text-muted, --radius, --bg-*, --amber-pale) and follows the layout patterns from Saved Outputs list-rows and Profile cards. No new colour palette introduced. */ .projects-actions { margin-bottom: 16px; display: flex; justify-content: flex-end; } .projects-list { display: flex; flex-direction: column; gap: 8px; } .project-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg, transparent); } .project-card--archived { opacity: 0.75; } .project-card-main { flex: 1 1 auto; min-width: 0; } .project-card-name { font-size: 14px; font-weight: 600; color: var(--text); } .project-card-desc { margin-top: 4px; font-size: 13px; color: var(--text-muted); line-height: 1.4; word-break: break-word; } .project-card-date { margin-top: 6px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .project-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .projects-archived-wrap { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); } .projects-archived-toggle { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .projects-archived-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } /* ── v30A: Project detail (lightweight, Option B) ─────────────────────────── */ .project-detail-meta { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .project-detail-name { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--text); } .project-detail-desc { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.5; word-break: break-word; } .project-detail-actions { display: flex; gap: 8px; margin-bottom: 20px; } .project-detail-outputs-head { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .project-detail-outputs { display: flex; flex-direction: column; gap: 6px; } .project-detail-output { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); } .project-detail-output-main { flex: 1 1 auto; min-width: 0; } .project-detail-output-title { font-size: 13px; font-weight: 600; color: var(--text); } .project-detail-output-meta { margin-top: 3px; font-size: 12px; color: var(--text-muted); } .project-detail-output-actions { display: flex; gap: 6px; } /* ── v30A: Save-output Project selector ───────────────────────────────────── */ .gen-save-project-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .gen-save-project-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .gen-save-project-select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev, transparent); color: var(--text); min-width: 180px; } /* ── v30A: Move-to-project control inside saved-output detail ────────────── */ .saved-detail-move-project { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .saved-detail-move-project-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .saved-detail-move-project-select { font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev, transparent); color: var(--text); min-width: 180px; } .saved-detail-move-project-hint { flex: 1 1 100%; margin-top: 4px; font-size: 12px; color: var(--text-muted); font-style: italic; } /* ── v30A.1: Mouse click affordance on active Project cards and Project detail linked-output rows. Explicit buttons remain the keyboard-accessible path; these styles signal that clicking the container body works too, for mouse users. Archived Project cards are deliberately excluded — they have no Open button today, so adding container-click would break keyboard parity. Hover uses a subtle border-colour lift rather than a background shift, so nested buttons keep their own styling and the affordance stays quiet. */ .project-card:not(.project-card--archived) { cursor: pointer; transition: border-color 120ms ease; } .project-card:not(.project-card--archived):hover { border-color: var(--text-muted); } .project-detail-output { cursor: pointer; transition: border-color 120ms ease; } .project-detail-output:hover { border-color: var(--text-muted); } /* ── v30A.1: Minimal closed-state select polish. The existing token-based styling (border, bg-elev, text tokens) already respects theme correctly. The banked "rough in dark mode" concern was mostly the open dropdown panel, which is OS/browser-rendered and out of scope. cursor: pointer is the one safe cross-browser addition — everything else risks the custom-select territory the polish patch is not building. */ .gen-save-project-select, .saved-detail-move-project-select { cursor: pointer; } /* ── v30C: Profile Quality Guidance panel ───────────────────────────────────── Advisory-only guidance shown on the profile-creation screen between the samples container and the auth block. Uses existing CSS custom properties only — no new palette. Populated by updateProfileQualityGuidance() in app.js. Never affects Analyse button state or any blocking behaviour. */ .pq-guidance { margin: 20px 0 24px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text); line-height: 1.55; } .pq-header { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .pq-computed { list-style: none; padding: 0; margin: 0 0 12px 0; } .pq-fallback { margin: 0; padding: 4px 0; color: var(--text-muted); font-size: 13px; } .pq-item { padding: 4px 0; color: var(--text); } .pq-item + .pq-item { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; } .pq-item-short { color: var(--text); } .pq-variety { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .pq-variety-heading { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .pq-variety-list { list-style: disc; padding-left: 20px; margin: 0 0 8px 0; color: var(--text-muted); } .pq-variety-list li { padding: 2px 0; } .pq-variety-note { font-size: 12px; color: var(--text-dim); font-style: italic; margin: 0; } .pq-footer-note { margin: 10px 0 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } /* ══════════════════════════════════════════════════════════════════════════════ v30F — Multi-output Pack System styles ══════════════════════════════════════════════════════════════════════════════ */ /* ── Mode switch ─────────────────────────────────────────────────────────────── */ .gen-mode-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 4px; } .gen-mode-btn { padding: 6px 16px; font-size: 13px; font-family: inherit; border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .gen-mode-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); } .gen-mode-btn--active { background: var(--accent, #BA7517); color: #fff; } [data-theme="dark"] .gen-mode-btn--active { background: var(--accent-dark, #d99a3f); color: #1c1a17; } .gen-mode-btn--active:hover { opacity: 0.9; } /* ── Pack selection panel ────────────────────────────────────────────────────── */ .gen-pack-panel { border: 1px solid var(--accent, #BA7517); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: var(--bg-surface, var(--bg-card, transparent)); } .gen-pack-checks { display: flex; flex-direction: column; gap: 8px; } .gen-pack-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; } .gen-pack-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent, #BA7517); } .gen-pack-summary { font-size: 12px; color: var(--text-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } /* ── Pack results container ──────────────────────────────────────────────────── */ .gen-pack-results { margin-top: 16px; } .gen-pack-progress { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; min-height: 18px; } .gen-pack-cancel { margin-top: 4px; margin-bottom: 12px; } .gen-pack-cancel-btn { font-size: 12px; color: var(--error, #c53030); background: none; border: none; cursor: pointer; text-decoration: underline; font-family: inherit; } /* ── Item cards ──────────────────────────────────────────────────────────────── */ .pack-item-card { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--bg-card, var(--bg-surface, #fff)); transition: border-color 0.15s; } [data-theme="dark"] .pack-item-card { background: var(--bg-card, #2a2825); } .pack-item--failed { border-color: var(--error, #c53030); } .pack-item--edited { border-color: var(--warning, #d69e2e); } .pack-item--warning { border-color: var(--warning, #d69e2e); } .pack-item--cancelled { opacity: 0.5; } .pack-item--collapsed { cursor: pointer; } .pack-item--collapsed:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); } .pack-item-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; gap: 8px; } .pack-item-card:not(.pack-item--cancelled):not(.pack-item--collapsed) .pack-item-header { border-bottom: 1px solid var(--border); } .pack-item-type { font-size: 14px; font-weight: 500; } .pack-item-badges { display: flex; gap: 4px; flex-wrap: wrap; } .pack-item-badge, .pack-save-badge { font-size: 11px; padding: 2px 10px; border-radius: 6px; font-weight: 500; white-space: nowrap; } .pack-badge--pending { background: var(--bg-surface, #f0f0f0); color: var(--text-muted); } [data-theme="dark"] .pack-badge--pending { background: #333; } .pack-badge--active { background: #e6f0ff; color: #1a5cb0; } [data-theme="dark"] .pack-badge--active { background: #1a3a5c; color: #7ab5f5; } .pack-badge--completed { background: #e6f9ed; color: #1a7a3a; } [data-theme="dark"] .pack-badge--completed { background: #1a3a25; color: #5cd085; } .pack-badge--failed { background: #fde8e8; color: #c53030; } [data-theme="dark"] .pack-badge--failed { background: #3a1a1a; color: #f56565; } .pack-badge--warning { background: #fef3c7; color: #92400e; } [data-theme="dark"] .pack-badge--warning { background: #3a2e12; color: #f6c95e; } .pack-badge--cancelled { background: var(--bg-surface, #f0f0f0); color: var(--text-muted); text-decoration: line-through; } [data-theme="dark"] .pack-badge--cancelled { background: #333; } .pack-badge--saved { background: #e6f9ed; color: #1a7a3a; } [data-theme="dark"] .pack-badge--saved { background: #1a3a25; color: #5cd085; } /* ── Spinner ─────────────────────────────────────────────────────────────────── */ .pack-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--border); border-top-color: var(--accent, #BA7517); border-radius: 50%; animation: pack-spin 0.8s linear infinite; margin-right: 4px; vertical-align: middle; } @keyframes pack-spin { to { transform: rotate(360deg); } } /* ── Item body ───────────────────────────────────────────────────────────────── */ .pack-item-body { padding: 12px 14px; } .pack-item-output { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; padding: 10px; background: var(--bg-surface, #f7f7f5); border-radius: 6px; margin-bottom: 10px; max-height: 200px; overflow-y: auto; } [data-theme="dark"] .pack-item-output { background: #1c1a17; } .pack-item-notice { font-size: 12px; margin-bottom: 8px; padding: 6px 10px; border-radius: 6px; } .pack-item-notice--warning { background: #fef3c7; color: #92400e; } [data-theme="dark"] .pack-item-notice--warning { background: #3a2e12; color: #f6c95e; } .pack-item-error { font-size: 12px; color: var(--error, #c53030); margin-top: 6px; } /* ── QA mini panel ───────────────────────────────────────────────────────────── */ .pack-item-qa { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); margin-bottom: 10px; } .pack-qa-chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; } .pack-qa--good { background: #e6f9ed; color: #1a7a3a; } [data-theme="dark"] .pack-qa--good { background: #1a3a25; color: #5cd085; } .pack-qa--warning { background: #fef3c7; color: #92400e; } [data-theme="dark"] .pack-qa--warning { background: #3a2e12; color: #f6c95e; } .pack-qa--bad { background: #fde8e8; color: #c53030; } [data-theme="dark"] .pack-qa--bad { background: #3a1a1a; color: #f56565; } .pack-qa-stale { font-size: 11px; color: var(--text-muted); font-style: italic; } /* ── Item actions ────────────────────────────────────────────────────────────── */ .pack-item-actions { display: flex; gap: 6px; flex-wrap: wrap; } .pack-action-btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-family: inherit; transition: background 0.1s; } .pack-action-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); } .pack-action--retry { border-color: var(--error, #c53030); color: var(--error, #c53030); } .pack-action--review { background: #e6f0ff; color: #1a5cb0; border-color: #b0cff5; font-weight: 500; } [data-theme="dark"] .pack-action--review { background: #1a3a5c; color: #7ab5f5; border-color: #3a5a8c; } /* ── Pack-level actions panel ────────────────────────────────────────────────── */ .gen-pack-actions { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 12px; background: var(--bg-surface, #f7f7f5); } [data-theme="dark"] .gen-pack-actions { background: #1c1a17; } .gen-pack-project-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .gen-pack-actions-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ── Edit textarea ───────────────────────────────────────────────────────────── */ .pack-edit-textarea { width: 100%; font-size: 13px; line-height: 1.6; font-family: inherit; padding: 10px; border: 1px solid var(--warning, #d69e2e); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text); margin-bottom: 10px; resize: vertical; box-sizing: border-box; } [data-theme="dark"] .pack-edit-textarea { background: #2a2825; } /* ── Mobile layout ───────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .gen-mode-switch { display: flex; width: 100%; } .gen-mode-btn { flex: 1; text-align: center; padding: 8px 12px; } .gen-pack-check { font-size: 15px; padding: 2px 0; } .gen-pack-check input[type="checkbox"] { width: 18px; height: 18px; } .pack-item-header { padding: 8px 12px; } .pack-item-body { padding: 10px 12px; } .pack-item-type { font-size: 13px; } .pack-action-btn { font-size: 12px; padding: 5px 10px; } .gen-pack-actions-row { flex-direction: column; align-items: stretch; } .gen-pack-actions-row button { width: 100%; text-align: center; } } /* ══════════════════════════════════════════════════════════════════════════════ v30G — Custom Output Templates styles ══════════════════════════════════════════════════════════════════════════════ */ .tpl-view-toggle { display: flex; gap: 4px; margin-bottom: 16px; } .tpl-list { display: flex; flex-direction: column; gap: 8px; } .tpl-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card, var(--bg-surface, #fff)); gap: 12px; } [data-theme="dark"] .tpl-row { background: var(--bg-card, #2a2825); } .tpl-row-main { flex: 1; min-width: 0; } .tpl-row-name { font-size: 14px; font-weight: 500; } .tpl-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .tpl-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .tpl-form { max-width: 560px; } .tpl-family-group { display: flex; gap: 12px; flex-wrap: wrap; } .tpl-radio { display: flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; } .tpl-radio input { accent-color: var(--accent, #BA7517); } .tpl-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .tpl-checkbox input { accent-color: var(--accent, #BA7517); width: 16px; height: 16px; } .tpl-constraints { margin-bottom: 8px; } .tpl-form-actions { display: flex; gap: 8px; margin-top: 16px; } .field-row { display: flex; gap: 12px; } .field-group--half { flex: 1; } .field-group--third { flex: 1; } .field-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; } .text-area--sm { resize: vertical; min-height: 48px; } .text-area--md { resize: vertical; min-height: 80px; } @media (max-width: 720px) { .tpl-row { flex-direction: column; align-items: stretch; } .tpl-row-actions { justify-content: flex-end; } .field-row { flex-direction: column; gap: 0; } .tpl-form-actions { flex-direction: column; } .tpl-form-actions button { width: 100%; } } /* v30G patch1 — version-mismatch notice */ .pack-item-notice--danger { background: #fde8e8; color: #c53030; } [data-theme="dark"] .pack-item-notice--danger { background: #3a1a1a; color: #f56565; } /* ══════════════════════════════════════════════════════════════════════════════ v30H — Visual polish ══════════════════════════════════════════════════════════════════════════════ */ /* ── Shared disclosure primitive ─────────────────────────────────────────────── One pattern, used by Profile Detail sections and the completed Output Review. The button is visually transparent so expanded sections look as they did before: the existing label span keeps its own typography untouched. */ .cf-disclosure { display: flex; align-items: center; gap: 8px; background: none; border: none; border-radius: var(--radius); padding: 2px 4px; margin-left: -4px; font: inherit; color: inherit; text-align: left; cursor: pointer; } .cf-disclosure:hover .cf-chevron { border-color: var(--amber); } .cf-disclosure:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .cf-chevron { width: 7px; height: 7px; flex: none; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim); transform: rotate(45deg); transform-origin: center; transition: transform .15s ease; margin-top: -3px; } /* v30H patch1 — .gen-pack-disclosure added. The pack trigger carries a .cf-chevron but is not a .cf-disclosure, so its chevron never rotated with aria-expanded. Selector list only; no declaration changed. */ .cf-disclosure[aria-expanded="false"] .cf-chevron, .gen-pack-disclosure[aria-expanded="false"] .cf-chevron { transform: rotate(-45deg); margin-top: 0; } /* ── Profile Detail: Layer 2 header becomes a flex row like Layer 1 ─────────── */ .l2-section-header { display: flex; align-items: center; justify-content: space-between; } /* ── Compact Multiple-output selector ───────────────────────────────────────── Presentation only. The seven built-in checkboxes and any custom-template checkboxes remain the sole source of truth; getSelectedPackTypes() still reads :checked from the DOM and is untouched. */ .gen-pack-disclosure { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 9px 12px; font-family: var(--sans); font-size: 13px; color: var(--text); text-align: left; cursor: pointer; } .gen-pack-disclosure:hover { border-color: var(--amber); } .gen-pack-disclosure:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } .gen-pack-disclosure-label { flex: 1; } .gen-pack-surface { border: 1.5px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 12px; margin-top: -2px; } .gen-pack-group + .gen-pack-group { margin-top: 14px; } .gen-pack-group-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .gen-pack-group-empty { font-size: 12px; color: var(--text-dim); font-style: italic; } /* ── Sidebar: parent-active while a nested screen is open ───────────────────── Profiles stays identifiable as the parent without claiming to be the exact current screen. The breadcrumb continues to name Generate. Additive only: no new link, icon, tab stop or injected node. */ .sidebar-link.sidebar-link--parent-active { color: var(--text); font-weight: 500; background: none; border-color: transparent; box-shadow: none; position: relative; } .sidebar-link.sidebar-link--parent-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--amber); } /* v30H patch1 — PACK_MAX reached: unchecked options are disabled. Without a visible cue the row looks selectable but does not respond. Checked options are never disabled, so they always remain deselectable and full-strength. Degrades safely where :has() is unsupported — the checkbox is still disabled. */ .gen-pack-check:has(input[type="checkbox"]:disabled) { cursor: not-allowed; color: var(--text-dim); }