/* ============================================================================= ESSENLIX SKILLS PLATFORM — "Atelier" redesign Single-stylesheet, framework-free, drop-in replacement for app/static/app.css ----------------------------------------------------------------------------- • Everything is driven by CSS custom properties in :root (see "TOKENS"). • Dark mode is pre-tokenized: add data-theme="dark" to to enable. • Class names match the existing component inventory so templates change little. • Target: WCAG 2.1 AA. Primary green on white = 5.2:1; white on green = 5.2:1. ============================================================================= */ /* ---------------------------------------------------------------------------- FONTS (self-hosted Manrope, as today. Mono uses the system stack so no new font dependency is required. To match the mocks exactly you MAY self-host IBM Plex Mono and swap --font-mono — optional, not required.) ---------------------------------------------------------------------------- */ @font-face{ font-family:"Manrope"; src:url("/static/fonts/manrope.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } /* ---------------------------------------------------------------------------- TOKENS — LIGHT (default) ---------------------------------------------------------------------------- */ :root{ /* brand */ --brand:#2F7A52; /* primary green — actions, active states, focus */ --brand-strong:#276B45; /* hover / pressed */ --brand-tint:#EEF4EE; /* faint green fill (chips, success bg, avatars) */ --brand-tint-border:#DCE8DB; --accent:#E08A3C; /* orange — RESERVED for the attention dot only */ /* ink & surfaces */ --ink:#1B1A17; /* primary text */ --muted:#6F6B63; /* secondary text (AA: 5.3:1 on white) */ --faint:#78756D; /* meta / small labels (AA: 4.6:1 on white) */ --disabled:#A8A297; /* placeholder / disabled (decorative only) */ --canvas:#F7F5F1; /* page background (warm paper) */ --surface:#FFFFFF; /* cards, app bar */ --surface-2:#FAF8F4; /* subtle inset panels, table header */ --line:#E7E2D9; /* borders / dividers */ --hairline:#F0ECE4; /* lighter inner dividers (table rows) */ /* status — success */ --ok:#2F7A52; --ok-ink:#1A4D2E; --ok-bg:#EEF4EE; --ok-border:#DCE8DB; /* status — warning */ --warn:#8A6A1F; --warn-bg:#FBF3E4; --warn-border:#EBD9B0; --warn-icon:#C98A1E; /* status — error */ --bad:#B5482F; --bad-bg:#FBEDEA; --bad-border:#F0CFC8; /* workflow-kind taxonomy */ --kind-det:#3A6EA5; --kind-det-border:#CDDDF0; /* deterministic (blue) */ --kind-agt:#0D8A7E; --kind-agt-border:#B8E3DD; /* agentic (teal) */ /* type */ --font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* radius */ --r-card:14px; --r-control:10px; --r-input:10px; --r-chip:8px; --r-pill:999px; --r-sm:6px; /* elevation */ --shadow-sm:0 1px 2px rgba(40,36,28,.04); --shadow-card:0 1px 3px rgba(40,36,28,.06); --shadow-pop:0 12px 32px rgba(40,36,28,.10); --ring:0 0 0 3px rgba(47,122,82,.18); /* spacing scale (4px base) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:44px; --s9:56px; /* motion */ --t-fast:120ms; --t:200ms; --ease:cubic-bezier(.2,.6,.2,1); /* layout */ --page-max:1600px; --appbar-h:64px; --gutter:40px; } /* ---------------------------------------------------------------------------- TOKENS — DARK (starting point; enable with ) Only the values that should change are overridden — every component below reads tokens, so dark mode needs no per-component rules. ---------------------------------------------------------------------------- */ :root[data-theme="dark"]{ --brand:#4FAE78; --brand-strong:#5FBF87; --brand-tint:#1E2D24; --brand-tint-border:#2E463A; --accent:#E89B52; --ink:#F2EFE9; --muted:#B7B2A8; --faint:#8E897F; --disabled:#6B665D; --canvas:#1A1916; --surface:#211F1B; --surface-2:#262420; --line:#36322B; --hairline:#2B2925; --ok:#4FAE78; --ok-ink:#A9D9BD; --ok-bg:#1E2D24; --ok-border:#2E463A; --warn:#D9B36A; --warn-bg:#2C2616; --warn-border:#4A3F22; --warn-icon:#D9B36A; --bad:#E08A77; --bad-bg:#2E1C18; --bad-border:#4A2A22; --kind-det:#7FAAD8; --kind-det-border:#2C3D52; --kind-agt:#4FC0B2; --kind-agt-border:#234742; --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-card:0 1px 3px rgba(0,0,0,.40); --shadow-pop:0 12px 32px rgba(0,0,0,.45); --ring:0 0 0 3px rgba(79,174,120,.30); } /* ---------------------------------------------------------------------------- RESET & BASE ---------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-sans); background:var(--canvas); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{margin:0; letter-spacing:-.02em; color:var(--ink)} h1{font-size:28px; font-weight:800; line-height:1.2} h2{font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.01em} h3{font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.01em} p{margin:0} a{color:var(--brand); text-decoration:none} a:hover{color:var(--brand-strong)} small,.meta{color:var(--faint)} .mono{font-family:var(--font-mono)} .page{max-width:var(--page-max); margin:0 auto; padding:32px var(--gutter) 56px} /* uppercase tracked micro-label (used for field labels, section eyebrows) */ .eyebrow{font:600 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)} /* ---------------------------------------------------------------------------- APP BAR ---------------------------------------------------------------------------- */ .appbar{ height:var(--appbar-h); background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 32px; position:sticky; top:0; z-index:50; } .appbar__brand{display:inline-flex; align-items:center} .appbar__brand img{height:24px; width:auto; display:block} .appbar__nav{display:inline-flex; align-items:center; gap:22px} .appbar__email{font:500 13px/1 var(--font-sans); color:var(--faint)} .appbar__link{font:500 13px/1 var(--font-sans); color:var(--faint)} .appbar__link:hover{color:var(--ink)} .appbar__link.is-active{color:var(--brand); font-weight:700; border-bottom:2px solid var(--brand); padding-bottom:2px} .avatar{ width:30px; height:30px; border-radius:var(--r-pill); background:var(--brand-tint); border:1px solid var(--brand-tint-border); display:inline-flex; align-items:center; justify-content:center; font:700 13px/1 var(--font-sans); color:var(--brand); } /* attention dot — the ONE use of --accent */ .attention-dot{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--accent); display:inline-block; animation:pulse 1.3s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ---------------------------------------------------------------------------- BUTTONS ---------------------------------------------------------------------------- */ .btn,.btn-ghost,.btn-sm{ display:inline-flex; align-items:center; gap:8px; justify-content:center; font-family:var(--font-sans); font-weight:700; font-size:14px; line-height:1; border-radius:var(--r-control); border:1px solid transparent; cursor:pointer; padding:12px 20px; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); text-decoration:none; white-space:nowrap; } /* primary — WHITE text on green (replaces the old dark-on-green) */ .btn{background:var(--brand); color:#fff} .btn:hover{background:var(--brand-strong); color:#fff} /* ghost — white, bordered, muted text; hover gains brand border */ .btn-ghost{background:var(--surface); color:var(--muted); border-color:var(--line); font-weight:600} .btn-ghost:hover{border-color:var(--brand); color:var(--ink)} /* compact — for tables/lists */ .btn-sm{padding:8px 14px; font-size:13px; border-radius:var(--r-chip)} .btn-sm.btn{background:var(--brand); color:#fff} .btn-sm.btn-ghost{background:var(--surface); color:var(--muted); border-color:var(--line)} :where(.btn,.btn-ghost,.btn-sm,.input,.opt,a):focus-visible{outline:none; box-shadow:var(--ring)} /* ---------------------------------------------------------------------------- CARD ---------------------------------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:30px; box-shadow:var(--shadow-sm); } .card__sub{color:var(--muted); margin-top:6px; max-width:760px} /* ---------------------------------------------------------------------------- WORKFLOW CARDS (home) — flat, description visible (no flip) ---------------------------------------------------------------------------- */ .skill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px} .skill-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-sm); transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); text-decoration:none; color:inherit; } .skill-card:hover{box-shadow:var(--shadow-card); border-color:var(--brand-tint-border)} .skill-card h3{min-height:44px} .skill-card p{color:var(--muted); font-size:13.5px; flex:1} .skill-card .start{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--brand)} /* ---------------------------------------------------------------------------- TAGS / KIND CHIPS ---------------------------------------------------------------------------- */ .tag{ display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 8px; color:var(--muted); } .tag::before{content:""; width:6px; height:6px; border-radius:var(--r-pill); background:currentColor} .tag--det{color:var(--kind-det); border-color:var(--kind-det-border)} .tag--agt{color:var(--kind-agt); border-color:var(--kind-agt-border)} /* inline kind label used on skill cards (dot + word, no border) */ .kind{display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase} .kind::before{content:""; width:6px; height:6px; border-radius:var(--r-pill); background:currentColor} .kind--det{color:var(--kind-det)} .kind--agt{color:var(--kind-agt)} /* ---------------------------------------------------------------------------- BREADCRUMB ---------------------------------------------------------------------------- */ .crumb{font:500 13px/1 var(--font-sans); color:var(--faint); margin-bottom:24px} .crumb a{color:var(--brand); font-weight:600} .crumb .sep{margin:0 8px; color:var(--line)} /* ---------------------------------------------------------------------------- STEPPER (one definition; set labels in the template) ---------------------------------------------------------------------------- */ .stepper{display:flex; gap:10px; margin-bottom:28px} .step{ flex:1; display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 16px; } .step__num{ width:26px; height:26px; border-radius:var(--r-pill); flex:none; background:var(--surface-2); color:var(--disabled); display:inline-flex; align-items:center; justify-content:center; font:700 13px/1 var(--font-sans); } .step__label{display:flex; flex-direction:column; gap:3px; min-width:0} .step__title{font:700 13px/1.2 var(--font-sans); color:var(--ink)} .step__hint{font:500 12px/1.2 var(--font-sans); color:var(--faint)} .step.is-upcoming{opacity:.7} .step.is-upcoming .step__title{color:var(--muted)} .step.is-active{border:1.5px solid var(--brand); box-shadow:var(--ring)} .step.is-active .step__num{background:var(--brand-tint); border:1.5px solid var(--brand); color:var(--brand)} .step.is-done .step__num{background:var(--brand); color:#fff} /* ---------------------------------------------------------------------------- FORMS ---------------------------------------------------------------------------- */ .field{margin-bottom:22px} .label{display:block; font:700 12px/1 var(--font-sans); letter-spacing:.02em; color:var(--ink); margin-bottom:9px} .label .opt-note{font-weight:500; color:var(--disabled); text-transform:none; letter-spacing:0} .label .req{font-weight:600; color:var(--bad)} .input{ width:100%; font:500 14px/1 var(--font-sans); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-input); padding:13px 15px; } .input::placeholder{color:var(--disabled)} .input:focus{outline:none; border-color:var(--brand); box-shadow:var(--ring)} /* upload drop zone */ .drop{ border:1.5px dashed var(--brand-tint-border); background:var(--brand-tint); border-radius:12px; padding:34px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; transition:border-color var(--t) var(--ease); } .drop.is-dragover{border-color:var(--brand)} .drop__icon{width:42px; height:42px; border-radius:11px; background:var(--surface); border:1px solid var(--brand-tint-border); display:inline-flex; align-items:center; justify-content:center; color:var(--brand); font:700 20px/1 var(--font-sans)} .drop__hint{font:500 14px/1.4 var(--font-sans); color:var(--muted)} /* file list */ .file{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-control); padding:11px 14px; } .file__type{font:600 11px/1 var(--font-mono); color:var(--brand); background:var(--brand-tint); border-radius:var(--r-sm); padding:4px 7px} .file__name{flex:1; font:500 13.5px/1 var(--font-mono); color:var(--ink)} .file__size{font:500 12px/1 var(--font-sans); color:var(--disabled)} .file__remove{font:600 16px/1 var(--font-sans); color:var(--disabled); cursor:pointer; background:none; border:none} /* split footer (Back / … / Continue) */ .wizard-footer{display:flex; align-items:center; justify-content:space-between; margin-top:22px; gap:12px} .wizard-footer .group{display:flex; gap:12px} /* ---------------------------------------------------------------------------- QUESTION UI (agentic) ---------------------------------------------------------------------------- */ .qprogress{display:flex; align-items:center; gap:14px; margin-bottom:24px} .qprogress span{font:600 12px/1 var(--font-mono); color:var(--muted); white-space:nowrap} .qbar{flex:1; height:6px; border-radius:3px; background:var(--hairline); overflow:hidden} .qbar__fill{display:block; height:100%; background:var(--brand); border-radius:3px} .opt{ display:flex; align-items:center; gap:12px; cursor:pointer; border:1px solid var(--line); border-radius:11px; padding:14px 16px; margin-bottom:10px; font:500 14px/1 var(--font-sans); color:var(--muted); background:var(--surface); transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .opt__radio{width:18px; height:18px; border-radius:var(--r-pill); border:1.5px solid var(--disabled); display:inline-flex; align-items:center; justify-content:center; flex:none} .opt.is-selected{border:1.5px solid var(--brand); background:var(--brand-tint); color:var(--ink); font-weight:600} .opt.is-selected .opt__radio{border-color:var(--brand)} .opt.is-selected .opt__radio::after{content:""; width:9px; height:9px; border-radius:var(--r-pill); background:var(--brand)} /* ---------------------------------------------------------------------------- CALLOUTS & ALERTS ---------------------------------------------------------------------------- */ .callout{display:flex; gap:13px; border-radius:12px; padding:16px 18px; margin-bottom:24px; background:var(--ok-bg); border:1px solid var(--ok-border)} .callout__icon{flex:none; width:20px; height:20px; border-radius:var(--r-pill); margin-top:1px; display:inline-flex; align-items:center; justify-content:center; font:700 12px/1 var(--font-sans); color:#fff} .callout__title{font:700 13.5px/1.3 var(--font-sans); margin-bottom:3px} .callout__body{font:400 13.5px/1.5 var(--font-sans)} /* success (default) */ .callout .callout__icon{background:var(--brand)} .callout .callout__title{color:var(--ok-ink)} .callout .callout__body{color:var(--ok)} /* warning */ .callout.warn{background:var(--warn-bg); border-color:var(--warn-border)} .callout.warn .callout__icon{background:var(--warn-icon)} .callout.warn .callout__title{color:#7A5A14} .callout.warn .callout__body{color:var(--warn)} /* error */ .alert.error{background:var(--bad-bg); border-color:var(--bad-border)} .alert.error .callout__icon{background:var(--bad)} .alert.error .callout__title{color:var(--bad)} .alert.error .callout__body{color:var(--bad)} /* ---------------------------------------------------------------------------- QC LEVEL ROWS (replaces dense bullet text) ---------------------------------------------------------------------------- */ .qc-levels{display:flex; flex-direction:column; gap:10px; margin-bottom:22px} .qc-level{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--r-control); padding:14px 16px} .qc-level.is-warn{border-color:var(--warn-border); background:#FEFBF5} .qc-level__name{font:700 14px/1 var(--font-sans); color:var(--ink); width:58px} .qc-level__n{font:500 12px/1 var(--font-mono); color:var(--faint); width:50px} .qc-level__finding{flex:1; font:400 13.5px/1.4 var(--font-sans); color:var(--muted)} .qc-level__finding strong{font-weight:700; color:var(--ink)} /* status pill (shared by QC rows, My runs, Admin) — pairs colour + glyph + word */ .pill{display:inline-flex; align-items:center; gap:6px; font:600 12px/1 var(--font-sans); border-radius:var(--r-pill); padding:5px 11px; border:1px solid transparent; white-space:nowrap} .pill--ok{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-border)} .pill--warn{color:var(--warn); background:var(--warn-bg); border-color:var(--warn-border)} .pill--bad{color:var(--bad); background:var(--bad-bg); border-color:var(--bad-border)} /* technical report disclosure (replaces the dark navy island with a light mono panel) */ .qc-report-toggle{font:600 13px/1 var(--font-sans); color:var(--faint); border-top:1px solid var(--hairline); padding-top:16px; cursor:pointer} .qc{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-control); padding:16px 18px; font:500 12.5px/1.7 var(--font-mono); color:var(--muted); white-space:pre-wrap; overflow:auto; max-height:340px; margin-top:12px} /* ---------------------------------------------------------------------------- LIVE STATUS LOG (agentic, 2s poll) ---------------------------------------------------------------------------- */ .log{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:20px 22px; box-shadow:var(--shadow-sm)} .log__head{display:flex; align-items:center; gap:9px; margin-bottom:14px} .log__head .live-dot{width:8px; height:8px; border-radius:var(--r-pill); background:var(--kind-agt); animation:pulse 1.2s ease-in-out infinite} .log__head .live-dot.is-done{background:var(--brand); animation:none} .log__title{font:700 12px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--ink)} .log__refresh{font:500 11px/1 var(--font-mono); color:var(--disabled); margin-left:auto} .log__wrap{background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-control); padding:6px 0; max-height:260px; overflow:auto} .log__row{display:flex; gap:12px; padding:8px 16px; border-bottom:1px solid var(--hairline)} .log__row:last-child{border-bottom:none} .log__time{font:500 11px/1.4 var(--font-mono); color:var(--disabled); width:60px; flex:none} .log__tag{font:600 11px/1 var(--font-sans); border-radius:var(--r-sm); padding:3px 7px; height:fit-content} .log__tag--answered,.log__tag--done{color:var(--ok); background:var(--ok-bg)} .log__tag--waiting{color:var(--warn); background:var(--warn-bg)} .log__tag--neutral{color:var(--muted); background:var(--hairline)} .log__tag--error{color:var(--bad); background:var(--bad-bg)} .log__msg{font:500 12px/1.4 var(--font-mono); color:var(--muted); flex:1} /* agent prose (reasoning/answers): readable sans, real line height, keep line breaks */ .log__msg--prose{font:400 13px/1.55 var(--font-sans); white-space:pre-wrap; word-break:break-word} /* ---------------------------------------------------------------------------- TABLES (My runs, Admin) ---------------------------------------------------------------------------- */ .table-scroll{overflow:auto; border-radius:var(--r-card)} /* fixed-height scroll window (~8 rows) with the sticky header staying put */ .table-scroll--rows{max-height:505px} .grid{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden} /* fixed layout: widths fill the full table width (no trailing gap); cells stay single-line and ellipsize so every row is the same height */ .grid--fixed{table-layout:fixed} .grid--fixed th,.grid--fixed td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* opt a fixed-layout cell back into wrapping (e.g. the input-files list) */ .grid--fixed td.cell-wrap{white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word} /* a cell holding a status pill: never ellipsize the pill */ .grid--fixed td.cell-pill{overflow:visible; text-overflow:clip} /* input-files cell: wrap the comma-separated list but cap at two lines so a long list never grows the row. The clamp lives on an inner span, NOT the : making the cell itself a -webkit-box would drop table-cell vertical alignment and break the line-clamp. The stays a normal cell so the row aligns with the others. */ .grid--fixed td.cell-files{white-space:normal; word-break:break-word; text-overflow:clip} .grid--fixed td.cell-files .files-clamp{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden} /* auto-layout table: fills the container when content is short, but cells never wrap — long content widens the table so .table-scroll scrolls horizontally */ .grid--scroll th,.grid--scroll td{white-space:nowrap} .grid thead th{ text-align:left; background:var(--surface-2); border-bottom:1px solid var(--line); font:700 10.5px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:13px 22px; position:sticky; top:0; z-index:1; } .grid tbody td{padding:16px 22px; border-bottom:1px solid var(--hairline); vertical-align:middle; font:500 14px/1.4 var(--font-sans); color:var(--ink)} .grid tbody tr:last-child td{border-bottom:none} .grid .cell-mono{font:500 12.5px/1.3 var(--font-mono); color:var(--muted)} .grid .cell-muted{color:var(--muted)} /* "needs your answer" row highlight */ .grid tr.row--attn td{background:#FEFBF5} /* admin filter bar — fields share the row evenly and grow to fill the table width */ .filters{display:flex; gap:12px; align-items:center; margin-bottom:18px} .filters > .input{flex:1 1 0; min-width:110px; width:auto; padding:10px 13px; font-size:13px} .filters select.input{appearance:none} /* labelled date field: the label grows with the others, the input fills it */ .filters .flbl{flex:1 1 0; min-width:120px; display:flex; align-items:center; gap:8px; font:600 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--faint)} .filters .flbl .input{flex:1 1 auto; min-width:0} .filters .btn{flex:0 0 auto} /* ---------------------------------------------------------------------------- AUTH (login / recovery) ---------------------------------------------------------------------------- */ .auth{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px; background:var(--canvas); padding:80px 0} .auth__logo{height:34px; width:auto} .auth__card{width:420px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:36px 34px; box-shadow:var(--shadow-card)} .auth__card h1{font-size:24px} .auth__card .input-tag{font:500 13px/1.4 var(--font-mono); color:var(--ink); background:var(--surface-2); border-radius:var(--r-sm); padding:2px 6px} .btn-google{width:100%; padding:14px 18px} .btn-google .g{width:18px; height:18px; border-radius:var(--r-pill); background:#fff; display:inline-flex; align-items:center; justify-content:center; font:800 12px/1 var(--font-sans); color:var(--brand)} /* error page card */ .error-card{width:460px; max-width:calc(100vw - 32px); text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:38px 36px; box-shadow:var(--shadow-card)} .error-card__icon{width:48px; height:48px; border-radius:var(--r-pill); margin-bottom:16px; background:var(--bad-bg); border:1px solid var(--bad-border); color:var(--bad); display:inline-flex; align-items:center; justify-content:center; font:700 22px/1 var(--font-sans)} .error-card .ref{font:500 12px/1.4 var(--font-mono); color:var(--disabled); margin:8px 0 24px} /* ---------------------------------------------------------------------------- TEMPLATE SUPPORT HELPERS (small wrappers the templates need) ---------------------------------------------------------------------------- */ /* title + kind-tag header row (wizard, agentic, admin panels) */ .card-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px} /* file-list container (rows are .file; built server- or client-side) */ .file-list{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px} /* success medallion on the deterministic "done" screen (mirrors .error-card__icon) */ .success-medallion{width:48px; height:48px; border-radius:var(--r-pill); margin-bottom:16px; background:var(--brand-tint); border:1px solid var(--brand-tint-border); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; font:700 22px/1 var(--font-sans)} /* ---------------------------------------------------------------------------- MOTION PREFERENCES ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }