/* Snaips Asiakasluotain's pages (ScraperShell links this file; docs/scraper/README.md, Customer flow): the user's prototype of
   2 November 2026 and design of 5 November 2026 on the site's own tokens (app.css). Every class is prefixed sc- so nothing meets Bootstrap's or the marketing pages' names; buttons
   are the site's .btn with a few variants. */

.sc-app { width: min(1120px, calc(100% - 64px)); margin-inline: auto; display: flex; flex-direction: column; min-height: 100vh; }
.sc-app :is(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }

/* The workspace's header is the site's own (MarketingHeader); a tool's own links (.sc-subnav) and the gear menus' popovers are here. */
.sc-navlink { font: 500 12px var(--font-mono); color: var(--text-muted); padding: 13px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.sc-navlink:hover, .sc-navlink.active { color: #fff; }
.sc-navlink.active { border-bottom-color: var(--accent-blue); }
.sc-popover { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 230px; padding: 14px; border: 1px solid var(--border-color); border-radius: 8px; background: #111a29; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); display: grid; gap: 10px; }
.sc-popover form { margin: 0; }

.sc-main { flex: 1; padding: 52px 0 86px; }
/* A tool's own links under the workspace's header (the user's hierarchy, 5 November 2026). */
.sc-subnav { display: flex; gap: 26px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); }
/* The workspace's home: the tools as tiles. */
.sc-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; align-items: stretch; }
.sc-tool { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sc-tool p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0; }
.sc-tool .btn { margin-top: auto; }
.sc-tool .sc-rows { align-self: stretch; }
/* The latest luotaukset on the workspace's home: the name takes the room, the status sits at the right (the user's design, 5 November 2026). */
.sc-tool .sc-subrow { grid-template-columns: minmax(0, 1fr) auto; padding-left: 20px; padding-right: 20px; }
.sc-tool .sc-subrow .sc-status { grid-row: auto; justify-self: end; white-space: nowrap; }
.sc-tool .sc-lead { color: #fff; font-weight: 600; }
.sc-tool-state { font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* Buttons: the site's .btn, at the prototype's size, and its quieter kinds. */
.sc-app .btn { min-height: 46px; padding: 11px 18px; font-size: 12px; gap: 10px; white-space: nowrap; }
.sc-app .btn.btn-sm, .sc-app .sc-btn-small { min-height: 36px; padding: 8px 13px; font-size: 11px; }
.sc-app .sc-btn-ghost { background: rgba(15, 22, 35, .5); color: var(--text-soft); border-color: var(--border-color); box-shadow: none; }
.sc-app .sc-btn-ghost:hover { background: var(--bg-card-hover); border-color: #50627a; color: #fff; }
.sc-app .sc-btn-quiet { border: 0; background: none; color: #9dc3ff; padding: 6px 2px; min-height: unset; box-shadow: none; font: 600 12px var(--font-mono); cursor: pointer; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.sc-app .sc-btn-quiet:hover { background: none; color: #fff; transform: none; }
.sc-app .sc-btn-danger { background: transparent; color: #fca5a5; border: 1px solid rgba(239, 68, 68, .6); box-shadow: none; }
.sc-app .sc-btn-danger:hover { background: rgba(239, 68, 68, .15); color: #fff; }
/* The site's .btn is solid blue whatever its kind; here an outline button must look unselected, or a picked answer cannot be told apart. */
.sc-app .btn-outline-primary { background: transparent; color: #93c5fd; border: 1px solid rgba(59, 130, 246, .6); box-shadow: none; }
.sc-app .btn-outline-primary:hover { background: rgba(59, 130, 246, .15); color: #fff; box-shadow: none; }
.sc-app .btn-outline-danger { background: transparent; color: #fca5a5; border: 1px solid rgba(239, 68, 68, .6); box-shadow: none; }
.sc-app .btn-outline-danger:hover { background: rgba(239, 68, 68, .15); color: #fff; }
.sc-arr { font: 400 17px/1 Arial, sans-serif; }
/* The marketing cards lift on hover; these are work surfaces, so they stay put. */
.sc-app .card:hover { transform: none; border-color: var(--border-color); background: linear-gradient(180deg, rgba(19, 26, 38, .96), rgba(15, 22, 35, .96)); }

/* Fields, the prototype's inputs for every form here. */
.sc-app .form-control, .sc-app .form-select { background-color: #0b111c; border: 1px solid var(--border-color); color: var(--text-main); border-radius: 7px; padding: 12px 13px; font-size: 13px; }
.sc-app .form-control-sm, .sc-app .form-select-sm { padding: 8px 10px; font-size: 12px; }
.sc-app .form-control:focus, .sc-app .form-select:focus { border-color: #5d9bfa; box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); background-color: #0b111c; color: var(--text-main); }
.sc-app .form-control::placeholder { color: #708097; }
.sc-app textarea.form-control { line-height: 1.65; }
.sc-label { display: block; color: var(--text-soft); font-size: 12px; font-weight: 650; margin-bottom: 8px; }
.sc-label .sc-req { color: #8cbcff; }
.sc-label .sc-optional { color: var(--text-muted); font-weight: 400; }
.sc-app .form-label { color: var(--text-soft); font-size: 12px; font-weight: 650; margin-bottom: 8px; }
.sc-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; line-height: 1.6; }
.sc-field { margin-bottom: 21px; }

/* Page head: where you are, the title and its one action. */
.sc-crumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font: 500 12px var(--font-mono); color: var(--text-muted); margin-bottom: 24px; }
.sc-crumbs a { color: var(--text-muted); text-decoration: none; }
.sc-crumbs a:hover { color: #fff; }
.sc-crumbs .sc-here { color: #d2e1f3; }
.sc-eyebrow { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #8ab7ff; display: flex; align-items: center; gap: 9px; margin: 0 0 17px; }
.sc-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent-green); border-radius: 50%; flex: none; }
.sc-pagehead { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 37px; }
.sc-pagehead h1 { color: #fff; letter-spacing: -1.25px; font-weight: 700; font-size: clamp(29px, 3.2vw, 41px); line-height: 1.17; margin: 0 0 10px; }
.sc-lede { color: var(--text-muted); font-size: 15px; line-height: 1.75; max-width: 660px; margin: 0; }
.sc-pagehead-actions { display: flex; gap: 10px; align-items: center; flex: none; }
.sc-app .sc-h2 { font-size: 19px; letter-spacing: -.45px; color: #fff; line-height: 1.35; font-weight: 650; margin: 0; }
.sc-app .sc-h3 { font-size: 15px; color: #fff; font-weight: 650; margin: 0 0 6px; }
.sc-subhead { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.sc-sectionbar { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin: 0 0 15px; }
.sc-count { font: 400 12px var(--font-mono); color: var(--text-muted); }
.sc-section { margin-top: 40px; }

/* Surfaces. */
.sc-surface { border: 1px solid var(--border-color); border-radius: 8px; background: linear-gradient(135deg, rgba(19, 26, 38, .94), rgba(15, 22, 35, .97)); }
.sc-panel { border: 1px solid var(--border-color); background: var(--bg-panel); border-radius: 8px; padding: 29px 31px; }
.sc-panel + .sc-panel, .sc-surface + .sc-panel, .sc-panel + .sc-surface { margin-top: 20px; }
.sc-notice { padding: 15px 18px; border-left: 2px solid var(--accent-blue); background: rgba(59, 130, 246, .07); color: #c5d5e8; font-size: 13px; line-height: 1.7; border-radius: 0 6px 6px 0; margin-bottom: 20px; }
.sc-notice.is-warning { border-left-color: #dbac54; background: rgba(219, 172, 84, .08); color: #f1dcae; }
.sc-notice.is-danger { border-left-color: var(--accent-red); background: rgba(239, 68, 68, .08); color: #fecaca; }
.sc-notice.is-success { border-left-color: var(--accent-green); background: rgba(16, 185, 129, .08); color: #c7f0de; }
.sc-notice a { color: #fff; }
.sc-notice ul { margin: 6px 0 0; padding-left: 18px; }
.sc-empty { padding: 35px 25px; text-align: center; color: var(--text-muted); font-size: 13px; }
.sc-empty strong { display: block; color: #fff; font-size: 15px; margin-bottom: 8px; }

/* Rows: the studies, a study's markets and their rounds. */
.sc-rows { overflow: hidden; }
.sc-row { display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(155px, .85fr) minmax(145px, .85fr) 190px; align-items: center; gap: 19px; padding: 22px 24px; border-bottom: 1px solid var(--border-soft); color: inherit; text-decoration: none; transition: background .15s; }
.sc-row:last-child { border-bottom: 0; }
a.sc-row:hover { background: rgba(59, 130, 246, .04); color: inherit; }
.sc-mark { width: 42px; height: 42px; display: grid; place-items: center; background: #19283a; border: 1px solid #2b4665; border-radius: 8px; color: #add0ff; font-weight: 750; font-size: 15px; }
.sc-name { font-size: 15px; font-weight: 650; color: #fff; letter-spacing: -.2px; overflow-wrap: anywhere; }
.sc-meta { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.sc-status { display: flex; gap: 7px; align-items: center; color: var(--text-soft); font-size: 12px; }
.sc-status::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #7890ae; }
.sc-status.is-green::before { background: var(--accent-green); }
.sc-status.is-blue::before { background: var(--accent-blue); }
.sc-status.is-amber::before { background: #dbac54; }
.sc-status.is-red::before { background: var(--accent-red); }
.sc-date { font: 400 11px var(--font-mono); color: var(--text-muted); }
.sc-go { justify-self: end; color: #a8ceff; display: flex; gap: 9px; align-items: center; font: 600 12px var(--font-mono); white-space: nowrap; }
a.sc-row:hover .sc-go { color: #fff; }
.sc-market-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 24px; }
.sc-subrows { border-top: 1px solid var(--border-soft); }
.sc-subrow { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(150px, 1fr) minmax(120px, .8fr) auto; gap: 16px; align-items: center; padding: 13px 24px 13px 40px; border-bottom: 1px solid var(--border-soft); color: inherit; text-decoration: none; font-size: 12px; }
.sc-subrow:last-child { border-bottom: 0; }
a.sc-subrow:hover { background: rgba(59, 130, 246, .04); color: inherit; }
.sc-rows + .sc-rows { margin-top: 14px; }

/* The searches' count line (the user's design, 5 November 2026). */
.sc-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: -14px 0 26px; color: #9fb2c9; font-size: 13px; }
.sc-kpis-dot { width: 5px; height: 5px; border-radius: 50%; background: #536782; }

/* A search's tabs, its next step with the stage meter, and its summary (the user's design, 5 November 2026). */
.sc-tabs { display: flex; gap: 6px; overflow-x: auto; margin: -12px 0 24px; border-bottom: 1px solid var(--border-color); }
.sc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-bottom: 2px solid transparent; color: #8ea0b7; font-size: 13px; white-space: nowrap; text-decoration: none; }
.sc-tab:hover { color: #fff; }
.sc-tab.active { color: #e8f1fe; border-bottom-color: var(--accent-blue); }
.sc-tab-count { font: 600 10px var(--font-mono); color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 999px; padding: 1px 7px; }
.sc-info { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .78fr); gap: 19px; align-items: stretch; margin-bottom: 28px; }
.sc-next { padding: 28px; }
.sc-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 0 0 26px; }
.sc-stages span { height: 5px; border-radius: 99px; background: #233146; }
.sc-stages span.done { background: var(--accent-green); }
.sc-stages span.current { background: var(--accent-blue); }
.sc-next .sc-eyebrow { margin-bottom: 10px; }
.sc-app .sc-next-title { color: #fff; font-size: 22px; letter-spacing: -.5px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.sc-next-text { color: var(--text-muted); font-size: 14px; line-height: 1.7; max-width: 580px; margin: 0 0 20px; }
.sc-next-text:last-child { margin-bottom: 0; }
.sc-summary { padding: 24px; }
.sc-summary .sc-h3 { margin-bottom: 18px; }
.sc-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 12px; }
.sc-summary dt { color: var(--text-muted); font-weight: 400; }
.sc-summary dd { margin: 0; color: #e4ebf6; text-align: right; }

/* The companies' table. */
.sc-tablewrap { overflow-x: auto; }
.sc-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.sc-table th { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--border-color); color: #8d9eb6; font: 600 11px var(--font-mono); letter-spacing: .04em; }
.sc-table td { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text-soft); vertical-align: top; }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-table td strong { display: block; color: #fff; font-weight: 650; }
.sc-table td small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* A dialog over the page (the companies' export). */
.sc-dialog-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 13, .77); backdrop-filter: blur(3px); }
.sc-dialog { width: 100%; max-width: 560px; padding: 26px; border: 1px solid #34455e; border-radius: 13px; background: #121c2c; box-shadow: 0 25px 100px rgba(0, 0, 0, .46); }
.sc-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 10px; }
.sc-dialog-close { border: 0; background: none; color: #97aabd; font-size: 25px; line-height: 1; padding: 0 5px; cursor: pointer; }
.sc-dialog-close:hover { color: #fff; }
.sc-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-color); }

/* The intake: the form beside what happens next. */
.sc-layout { display: grid; grid-template-columns: minmax(0, 700px) minmax(250px, 1fr); gap: 44px; align-items: start; }
.sc-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 25px; }
.sc-mode { display: block; position: relative; background: #111927; border: 1px solid var(--border-color); border-radius: 8px; padding: 15px 14px; cursor: pointer; min-height: 82px; margin: 0; }
.sc-mode:hover { border-color: #536a89; }
.sc-mode.selected { background: rgba(59, 130, 246, .09); border-color: #4b92f8; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .13); }
.sc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sc-mode:has(input:focus-visible) { outline: 2px solid #93c5fd; outline-offset: 3px; }
.sc-mode strong { display: flex; justify-content: space-between; gap: 6px; color: #e4edfa; font-size: 13px; }
.sc-mode small { display: block; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; margin-top: 5px; }
.sc-radio { width: 15px; height: 15px; border: 1px solid #63758b; border-radius: 50%; display: inline-block; flex: none; }
.sc-mode.selected .sc-radio { border: 4px solid var(--accent-blue); background: #fff; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { position: relative; margin: 0; }
.sc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sc-chip span { display: block; padding: 7px 12px; border-radius: 6px; background: #101a29; border: 1px solid #34445a; color: #bbc9da; font-size: 12px; cursor: pointer; }
.sc-chip input:checked + span { background: rgba(59, 130, 246, .14); color: #d7e7ff; border-color: var(--accent-blue); }
.sc-chip input:focus-visible + span { outline: 2px solid #93c5fd; outline-offset: 3px; }
.sc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.sc-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--text-soft); cursor: pointer; margin: 0; }
.sc-check input { width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--accent-blue); flex: none; }
.sc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sc-knownbox { margin: 12px 0 19px; padding: 15px; border: 1px solid var(--border-color); background: rgba(10, 15, 24, .4); border-radius: 7px; }
.sc-knownbox .sc-hint, .sc-knownbox .sc-known-fields { margin-left: 24px; }
.sc-known-fields { margin-top: 13px; }
.sc-advanced { margin-top: 26px; border-top: 1px solid var(--border-color); }
.sc-advanced > summary { list-style: none; display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 18px 0; color: #cfdeef; font-size: 13px; font-weight: 650; }
.sc-advanced > summary::-webkit-details-marker { display: none; }
.sc-advanced > summary .sc-summary-note { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.sc-advanced > summary::after { content: "+"; font: 400 21px var(--font-mono); color: #8cbcff; margin-left: auto; }
.sc-advanced[open] > summary::after { content: "−"; }
.sc-advanced-body { padding: 7px 0 0; }
.sc-advanced h3 { margin: 14px 0 12px; font-size: 12px; color: #a9bfd9; font-family: var(--font-mono); letter-spacing: .02em; }
.sc-advanced.is-boxed { border: 1px solid var(--border-color); border-radius: 8px; padding: 0 20px; margin-top: 20px; background: rgba(15, 22, 35, .6); }
.sc-advanced.is-boxed[open] { padding-bottom: 18px; }
.sc-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-color); }
.sc-note { font: 400 11px/1.6 var(--font-mono); color: var(--text-muted); white-space: pre-line; }
.sc-side { padding-top: 10px; position: sticky; top: 27px; }
.sc-side .sc-subhead { margin: 0 0 20px; }
.sc-mini { display: grid; gap: 22px; }
.sc-mini-item { display: flex; gap: 14px; align-items: flex-start; }
.sc-mini-ico { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border: 1px solid #34445a; background: #152031; border-radius: 7px; color: #9ac3ff; font: 600 12px var(--font-mono); }
.sc-mini-item strong { color: #fff; font-size: 13px; }
.sc-mini-item p { color: var(--text-muted); font-size: 12px; margin: 3px 0 0; line-height: 1.6; }
.sc-rule { border-top: 1px solid var(--border-soft); margin: 24px 0; }
.sc-small { color: var(--text-muted); font-size: 12px; line-height: 1.7; margin: 0; }

/* The market choice. */
.sc-intro { border-left: 2px solid var(--accent-blue); padding-left: 16px; color: var(--text-soft); max-width: 700px; font-size: 13px; margin: 0 0 24px; }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sc-market { min-width: 0; position: relative; border: 1px solid var(--border-color); background: var(--bg-panel); border-radius: 8px; padding: 20px 20px 19px; display: flex; flex-direction: column; text-align: left; color: inherit; font: inherit; transition: border .15s, background .15s; }
button.sc-market { cursor: pointer; }
button.sc-market:hover { border-color: #607b9d; }
.sc-market.selected { background: linear-gradient(150deg, rgba(59, 130, 246, .11), var(--bg-panel) 65%); border-color: #5a99ed; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .12); }
.sc-market-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.sc-market-num { font: 600 11px var(--font-mono); color: #83b8ff; text-transform: uppercase; }
.sc-tick { height: 19px; width: 19px; display: grid; place-items: center; border: 1px solid #48617e; border-radius: 5px; color: transparent; font-size: 13px; }
.sc-market.selected .sc-tick { color: #fff; background: var(--accent-blue); border-color: var(--accent-blue); }
.sc-market h3 { font-size: 17px; line-height: 1.35; letter-spacing: -.35px; margin: 22px 0 8px; color: #fff; font-weight: 650; }
.sc-market p { font-size: 12px; line-height: 1.65; color: var(--text-muted); margin: 0 0 19px; }
.sc-market dl { margin: auto 0 0; border-top: 1px solid var(--border-soft); padding-top: 15px; }
.sc-market dt { font: 500 10px var(--font-mono); color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; }
.sc-market dt + dd + dt { margin-top: 12px; }
.sc-market dd { font-size: 12px; margin: 0; color: var(--text-soft); }
.sc-strength-good { color: #84dfba; }
.sc-strength-promising { color: #9bc2ff; }
.sc-strength-weak { color: var(--text-soft); }
.sc-strength-no { color: #fca5a5; }
.sc-market-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.sc-market-link { font: 600 11px var(--font-mono); color: #a9caff; }
.sc-reasoning { margin-top: 14px; padding: 22px 24px; }
.sc-reasoning table { margin-bottom: 0; }
.sc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0; border-top: 1px solid var(--border-soft); margin-top: 28px; }
.sc-bottom .sc-small strong { color: #fff; }

/* Finding companies: the settings beside who is sought. */
.sc-pills { display: flex; flex-wrap: wrap; gap: 11px; margin: -15px 0 28px; }
.sc-pill { border: 1px solid var(--border-color); color: #a6b9cf; background: rgba(19, 26, 38, .7); padding: 7px 11px; border-radius: 6px; font: 500 11px var(--font-mono); }
.sc-config { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 22px; align-items: start; }
.sc-config-card { padding: 26px 27px; }
.sc-config-card .sc-lede { font-size: 13px; margin-bottom: 14px; }
.sc-setup { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border-soft); }
.sc-setup strong { display: block; color: #fff; font-size: 13px; }
.sc-setup small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.sc-app .sc-number { width: 94px; text-align: center; padding: 9px; }
.sc-toggle { display: flex; background: #0b111c; border: 1px solid var(--border-color); border-radius: 7px; padding: 4px; gap: 3px; }
.sc-choice { border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); padding: 7px 9px; font-size: 11px; white-space: nowrap; cursor: pointer; }
.sc-choice.selected { background: #223b5a; color: #e7f1ff; }
.sc-criteria { padding-top: 18px; }
.sc-config-card .sc-actions { border-top: 0; padding-top: 8px; }
.sc-profile { margin: 20px 0 0; padding: 0; list-style: none; }
.sc-profile li { padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); }
.sc-profile li:last-child { border-bottom: 0; }
.sc-profile-label { display: block; color: var(--text-muted); font: 500 10px var(--font-mono); margin-bottom: 3px; text-transform: uppercase; }

/* The results: progress, the counts, and one row per company checked, opened one at a time. */
.sc-progress { padding: 18px 20px; margin-bottom: 22px; }
.sc-progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; color: var(--text-soft); font-size: 13px; margin-bottom: 12px; }
.sc-bar { height: 6px; border-radius: 3px; background: #1a2638; overflow: hidden; }
.sc-bar > span { display: block; height: 100%; background: var(--accent-blue); border-radius: 3px; transition: width .4s ease; }
.sc-bar.is-indeterminate > span { width: 30% !important; animation: sc-slide 1.4s ease-in-out infinite; }
@keyframes sc-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .sc-bar.is-indeterminate > span { animation: none; width: 100% !important; opacity: .5; } }
/* The research's stages under its bar: done, the current one with its count, and ahead. */
.sc-steplist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.sc-steplist li { display: flex; align-items: center; gap: 10px; color: #718198; font-size: 13px; }
.sc-steplist li.done { color: var(--text-soft); }
.sc-steplist li.current { color: #fff; font-weight: 600; }
.sc-steplist-mark { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 1px solid #344257; border-radius: 50%; font-size: 10px; }
.sc-steplist li.done .sc-steplist-mark { background: rgba(16, 185, 129, .13); color: #79dfb7; border-color: rgba(16, 185, 129, .4); }
.sc-steplist li.current .sc-steplist-mark { border: 0; color: #8cbcff; }
.sc-steplist li.current .sc-steplist-mark .spinner-border { width: 14px; height: 14px; border-width: 2px; }
.sc-steplist .sc-count { margin-left: auto; font-weight: 400; }
/* The counts and the filter, indented at both ends to line up with the text inside the boxes above and below. */
.sc-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 0 21px; }
.sc-metrics { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.sc-metric strong { display: block; color: #fff; font-size: 21px; line-height: 1.2; font-weight: 650; }
.sc-metric strong.is-green { color: #84dfba; }
.sc-metric strong.is-amber { color: #efcc87; }
.sc-metric strong.is-red { color: #fca5a5; }
.sc-metric span { font: 400 10.5px var(--font-mono); color: var(--text-muted); text-transform: uppercase; }
.sc-app .sc-filter { width: auto; min-width: 170px; padding: 9px 10px; font-size: 12px; background-color: var(--bg-panel); }
.sc-list { overflow: hidden; }
.sc-item { border-bottom: 1px solid var(--border-soft); }
.sc-item:last-child { border-bottom: 0; }
.sc-item-head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 16px; align-items: center; padding: 16px 20px; color: inherit; cursor: pointer; }
.sc-item-toggle { min-width: 0; padding: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.sc-item-head:hover { background: rgba(59, 130, 246, .04); }
.sc-item-name { color: #f2f6ff; font-size: 14px; font-weight: 650; }
.sc-item-town { color: var(--text-muted); font-size: 12px; margin-left: 10px; font-weight: 400; }
.sc-chevron { color: #8cbcff; font: 400 18px var(--font-mono); line-height: 1; }
.sc-item.open { background: rgba(59, 130, 246, .03); }
.sc-item-body { padding: 4px 20px 22px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; font-size: 13px; color: var(--text-soft); }
.sc-item-body h4 { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.sc-item-body section + section { margin-top: 18px; }
.sc-item-body p { margin: 0 0 6px; }
.sc-item-body a { color: #9cc4ff; }
.sc-item-body code { color: #9cc4ff; font-size: 11.5px; }
.sc-fit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.sc-fit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7890ae; }
.sc-fit.is-fit { color: #94e0bd; }
.sc-fit.is-fit::before { background: var(--accent-green); }
.sc-fit.is-unsure { color: #efcc87; }
.sc-fit.is-unsure::before { background: #dbac54; }
.sc-fit.is-notfit { color: #fca5a5; }
.sc-fit.is-notfit::before { background: var(--accent-red); }
/* An opened row's header: the two verdicts the company does not have, as marks in their colours, left of its written verdict. */
.sc-item-status { display: flex; align-items: center; gap: 12px; }
.sc-marks { display: flex; gap: 6px; }
.sc-mark-btn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 7px; background: #0b111c; color: var(--text-muted); font: 600 14px var(--font-mono); cursor: pointer; }
.sc-mark-btn:hover { border-color: #50627a; color: #fff; }
.sc-mark-btn.is-fit { color: #94e0bd; }
.sc-mark-btn.is-unsure { color: #efcc87; }
.sc-mark-btn.is-notfit { color: #fca5a5; }
.sc-mark-btn.is-fit:hover { background: rgba(16, 185, 129, .15); border-color: rgba(16, 185, 129, .6); }
.sc-mark-btn.is-unsure:hover { background: rgba(219, 172, 84, .15); border-color: rgba(219, 172, 84, .6); }
.sc-mark-btn.is-notfit:hover { background: rgba(239, 68, 68, .15); border-color: rgba(239, 68, 68, .6); }
.sc-results-bottom { display: flex; justify-content: space-between; gap: 15px; align-items: flex-end; margin-top: 20px; }
.sc-more { margin-top: 35px; border-top: 1px solid var(--border-soft); padding-top: 23px; display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.sc-more .sc-h2 { margin-bottom: 5px; }

/* A study's actions behind "…". */
.sc-dots { position: relative; }
.sc-dots > summary { list-style: none; cursor: pointer; }
.sc-dots > summary::-webkit-details-marker { display: none; }
/* A market card's settings: a quiet gear in its head. */
.sc-gear { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #34445a; border-radius: 7px; color: var(--text-muted); }
/* The search's settings: a square button around the gear. */
.sc-app .btn.sc-settings { width: 42px; height: 42px; min-height: 42px; padding: 0; display: inline-grid; place-items: center; }
.sc-gear-icon { display: block; flex: none; }
.sc-gear:hover, .sc-dots[open] > .sc-gear { color: #fff; border-color: #50627a; }

/* A quote and its source, everywhere evidence is shown. */
.sc-app .scraper-quote { margin: 4px 0 8px; padding-left: 12px; border-left: 2px solid rgba(59, 130, 246, .55); font-size: 12px; color: #d4e1ef; }
.sc-app .scraper-quote a { color: #9cc4ff; }
.sc-app .table { --bs-table-bg: transparent; }
.sc-sign-in { max-width: 520px; margin: 2rem auto; }
.sc-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Screen 5, the emails, as one studio (the user's design, 5 November 2026): the choices on the left, the email being shaped on the right
   (sticky), the next step in a bar at the bottom. A company row's email status on the round page. */
.sc-out-badge { border: 1px solid var(--border-color); border-radius: 5px; padding: 2px 7px; font: 500 10px var(--font-mono); color: #a6b9cf; white-space: nowrap; }
.sc-modes.is-stacked { grid-template-columns: 1fr; }
.sc-modes.is-compact .sc-mode { min-height: unset; padding: 11px 13px; }
.sc-studio { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 22px; align-items: start; }
.sc-studio-main > .sc-surface, .sc-studio-main > .sc-notice { margin-bottom: 16px; }
.sc-studio-preview { position: sticky; top: 20px; max-height: calc(100vh - 150px); overflow-y: auto; padding-bottom: 4px; }
.sc-stages { display: flex; gap: 22px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.sc-stage { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 8px 0 10px; font: 600 12px var(--font-mono); display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sc-stage:hover:not(:disabled) { color: #fff; }
.sc-stage.selected { color: #fff; border-bottom-color: var(--accent-blue); }
.sc-stage:disabled { opacity: .45; cursor: default; }
.sc-stage .sc-step-n { width: 21px; height: 21px; font-size: 10px; }
.sc-stage.selected .sc-step-n { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
/* The ways of writing, as three tabs. */
.sc-modetabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.sc-modetab { display: flex; flex-direction: column; gap: 5px; text-align: left; background: #111927; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 13px; color: inherit; cursor: pointer; }
.sc-modetab:hover:not(:disabled) { border-color: #536a89; }
.sc-modetab.selected { background: rgba(59, 130, 246, .09); border-color: #4b92f8; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .13); }
.sc-modetab-title { color: #e4edfa; font-size: 13px; font-weight: 650; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-modetab-badge { font: 600 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: #79dfb7; border: 1px solid rgba(16, 185, 129, .45); border-radius: 999px; padding: 1px 7px; }
.sc-modetab-help { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.sc-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.sc-start { border-style: dashed; }
/* The AI's instructions: the tone as two labelled pairs, the recommendation marked ✨ and its reason behind "Miksi?". */
.sc-tone-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.sc-tone-label { width: 86px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.sc-tone-locked { border: 1px solid var(--border-color); border-radius: 7px; padding: 7px 11px; font-size: 11px; color: #e7f1ff; background: #0b111c; }
.sc-spark { color: #c4b5fd; }
.sc-why { margin-top: 4px; }
.sc-why > summary { cursor: pointer; font-size: 12px; color: #b4c9e2; }
.sc-why[open] > summary { margin-bottom: 6px; }
/* The email as a mail program shows it: the live preview, a sample and a draft. The locked footer is small and muted under a divider. */
.sc-mailcard { background: #0e1520; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.sc-mailcard-head { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); display: grid; gap: 5px; font-size: 12px; }
.sc-mailcard-head > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.sc-mailcard-head dt { color: var(--text-muted); font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.sc-mailcard-head dd { margin: 0; color: var(--text-soft); overflow-wrap: anywhere; }
.sc-mailcard-subject dd { color: #fff; font-weight: 650; font-size: 13px; }
.sc-mailcard-address, .sc-mailcard-kind { color: var(--text-muted); }
.sc-app .sc-mailcard-edit { margin-left: 8px; font-size: 11px; padding: 0; }
.sc-mailcard-notices { padding: 12px 16px 0; }
.sc-mailcard-body { padding: 14px 16px 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.65; color: #e4edfa; }
.sc-mailcard-signature { padding: 10px 16px 0; white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.sc-mailcard-footer { margin: 16px 16px 0; padding: 10px 0 14px; border-top: 1px solid #2a3a50; font-size: 12px; line-height: 1.55; color: #64748b; overflow-wrap: anywhere; }
.sc-mailcard-footer > div { white-space: pre-wrap; }
.sc-mailcard-footer-label { display: block; font: 500 9.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: #55657c; margin-bottom: 4px; }
.sc-mailcard-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 16px 16px; border-top: 1px solid var(--border-soft); }
.sc-mailcard-empty { padding: 28px 18px; text-align: center; }
.sc-mailcard-body:has(textarea) { white-space: normal; }
.sc-mail-cta { margin: 12px 0 0; font-size: 13px; color: var(--text-soft); white-space: normal; }
.sc-mail-cta .sc-profile-label { margin-bottom: 2px; }
.sc-preview-placeholder { color: var(--text-muted); margin: 0; white-space: normal; }
.sc-muted { color: var(--text-muted); font-weight: 400; }
/* A value from data is lightly underlined, a fallback dashed, an AI part tinted violet; a pill is a placeholder still to be filled. */
.sc-val { text-decoration: underline; text-decoration-color: rgba(96, 165, 250, .45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sc-val.is-fallback { text-decoration-style: dashed; color: #cbd5e1; }
.sc-val.is-ai { text-decoration: none; background: rgba(167, 139, 250, .13); border-radius: 3px; box-shadow: 0 0 0 2px rgba(167, 139, 250, .13); }
.sc-val.is-cta { text-decoration: none; color: #9cc4ff; }
.sc-tok { padding: 0; margin: 0; border-radius: 3px; color: inherit; background: rgba(59, 130, 246, .22); box-shadow: 0 0 0 1px rgba(59, 130, 246, .35); }
.sc-tok.is-ai { background: rgba(167, 139, 250, .22); box-shadow: 0 0 0 1px rgba(167, 139, 250, .45); }
.sc-tok.is-missing, .sc-tok.is-unknown { background: rgba(239, 68, 68, .2); box-shadow: 0 0 0 1px rgba(239, 68, 68, .5); }
.sc-tok.is-cta { background: rgba(16, 185, 129, .16); box-shadow: 0 0 0 1px rgba(16, 185, 129, .4); }
.sc-mailcard .sc-tok, .sc-draft-evidence .sc-tok { padding: 0 4px; }
/* The preview pane: its company, the versions to compare, and its priced buttons. */
.sc-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.sc-app .sc-preview-company { max-width: 62%; }
.sc-versions { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-version { border: 1px solid var(--border-color); background: transparent; color: var(--text-muted); border-radius: 6px; padding: 4px 10px; font: 500 11px var(--font-mono); cursor: pointer; }
.sc-version:hover { color: #fff; }
.sc-version.selected { background: #223b5a; color: #e7f1ff; border-color: #3b6ea8; }
.sc-version-list { display: grid; gap: 4px; justify-items: start; }
.sc-preview-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; }
.sc-sample-label { font: 500 11px var(--font-mono); color: var(--text-muted); margin: 0 0 8px; }
/* The template editor: the text area over a layer that shows its placeholders as pills; both must wrap alike (no padding on a pill). */
.sc-template-library { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.sc-editor-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sc-editor-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-editor { position: relative; background: #0b111c; border-radius: 7px; }
.sc-editor-mirror, .sc-app .sc-editor-input { font-size: 13px; line-height: 1.65; padding: 12px 13px; border: 1px solid transparent; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; letter-spacing: normal; tab-size: 4; }
.sc-editor-mirror { position: absolute; inset: 0; overflow: hidden; color: var(--text-main); pointer-events: none; }
.sc-editor-mirror mark { padding: 0; margin: 0; }
.sc-app .sc-editor .sc-editor-input { position: relative; display: block; background: transparent; color: transparent; caret-color: #e4edfa; resize: none; overflow: hidden; border-color: var(--border-color); min-height: 180px; field-sizing: content; }
.sc-app .sc-editor .sc-editor-input:focus { background: transparent; color: transparent; }
.sc-app .sc-editor .sc-editor-input::selection { background: rgba(59, 130, 246, .35); color: transparent; }
.sc-chip-wrap { position: relative; display: inline-block; }
.sc-app .sc-popover.sc-fieldmenu, .sc-app .sc-popover.sc-agentform, .sc-app .sc-popover.sc-chip-panel { left: 0; right: auto; z-index: 40; }
.sc-popover.sc-fieldmenu { min-width: 250px; max-height: 330px; overflow-y: auto; gap: 2px; }
.sc-popover.sc-agentform, .sc-popover.sc-chip-panel { width: 310px; gap: 8px; }
.sc-fieldmenu-group { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 8px 0 2px; }
.sc-fieldmenu-group:first-child { margin-top: 0; }
.sc-fieldmenu-item { text-align: left; background: none; border: 0; color: var(--text-soft); padding: 5px 7px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.sc-fieldmenu-item:hover, .sc-fieldmenu-item:focus-visible { background: rgba(59, 130, 246, .14); color: #fff; }
.sc-chip-title { color: #fff; font-size: 13px; }
/* The template's field chips (their own names: .sc-chip is the intake's country chip). */
.sc-fieldchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.sc-fieldchip { border: 1px solid rgba(59, 130, 246, .45); background: rgba(59, 130, 246, .12); color: #cfe1ff; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; cursor: pointer; }
.sc-fieldchip:hover { border-color: #60a5fa; color: #fff; }
.sc-fieldchip.is-ai { border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .13); color: #e4dcff; }
.sc-fieldchip.is-missing, .sc-fieldchip.is-unknown { border-color: rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .12); color: #fecaca; }
/* Stage 2: a draft's evidence under its row. */
.sc-draft-evidence { padding: 4px 20px 20px; font-size: 13px; color: var(--text-soft); }
.sc-draft-evidence h4 { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.sc-draft-evidence section + section { margin-top: 16px; }
.sc-draft-evidence p { margin: 0 0 6px; }
.sc-draft-evidence a { color: #9cc4ff; }
/* The next step, at the bottom of the window. */
.sc-actionbar { position: sticky; bottom: 0; z-index: 20; margin-top: 24px; padding: 12px 18px; background: #0b111c; border: 1px solid var(--border-color); border-radius: 10px 10px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
.sc-actionbar-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.sc-actionbar-info { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--text-soft); flex: 1 1 320px; min-width: 0; }
.sc-actionbar-info strong { color: #fff; }
.sc-actionbar-cap { flex-basis: 100%; font-size: 11.5px; color: #f1dcae; }
.sc-actionbar-go { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.sc-actionbar-reason { font-size: 12px; color: #f1dcae; }
.sc-actionbar-problems { margin-bottom: 10px; }
.sc-actionbar-counts { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-actionbar-counts .is-green { color: #84dfba; }
.sc-actionbar-counts .is-red { color: #fca5a5; }
.sc-actionbar-note { flex-basis: 100%; font-size: 11.5px; color: var(--text-muted); }
/* The sender's details, in a panel from the side. */
.sc-drawer-backdrop { position: fixed; inset: 0; background: rgba(3, 6, 12, .6); z-index: 1040; }
.sc-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 1050; background: #0f1623; border-left: 1px solid var(--border-color); padding: 22px 24px 0; overflow-y: auto; box-shadow: -20px 0 50px rgba(0, 0, 0, .45); animation: sc-drawer-in .18s ease-out; }
@keyframes sc-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-drawer { animation: none; } }
.sc-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sc-drawer-actions { display: flex; gap: 14px; align-items: center; position: sticky; bottom: 0; background: #0f1623; padding: 14px 0 18px; border-top: 1px solid var(--border-soft); }
@media (max-width: 991px) {
  .sc-studio { grid-template-columns: minmax(0, 1fr); }
  .sc-studio-preview { position: static; max-height: none; overflow: visible; }
  .sc-modetabs { grid-template-columns: minmax(0, 1fr); }
  .sc-template-library { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sc-actionbar { padding: 12px; }
  .sc-actionbar-row, .sc-actionbar-go { flex-direction: column; align-items: stretch; gap: 8px; }
  .sc-actionbar-info { flex: 0 0 auto; font-size: 12px; }
  .sc-actionbar-go { margin-left: 0; }
  .sc-actionbar .btn { width: 100%; }
  .sc-mailcard-head > div { grid-template-columns: 1fr; gap: 0; }
  .sc-popover.sc-agentform, .sc-popover.sc-chip-panel { width: min(310px, calc(100vw - 48px)); }
  .sc-tone-label { width: 100%; }
}

@media (max-width: 950px) {
  .sc-layout, .sc-config { grid-template-columns: 1fr; gap: 25px; }
  .sc-side { display: none; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 15px; }
  .sc-row .sc-status, .sc-row .sc-date { display: none; }
  .sc-item-body { grid-template-columns: 1fr; }
  .sc-info { grid-template-columns: 1fr; }
  .sc-tools { grid-template-columns: 1fr; }
  .sc-subrow { grid-template-columns: 1fr auto; padding-left: 24px; }
  .sc-subrow .sc-status { grid-row: 2; }
}
@media (max-width: 640px) {
  .sc-app { width: calc(100% - 32px); }
  .sc-main { padding: 31px 0 60px; }
  .sc-pagehead { align-items: flex-start; flex-direction: column; margin-bottom: 27px; }
  .sc-pagehead h1 { font-size: 31px; }
  .sc-pagehead-actions, .sc-pagehead-actions .btn { width: 100%; }
  .sc-row { grid-template-columns: 38px 1fr; gap: 13px; padding: 16px; }
  .sc-mark { width: 38px; height: 38px; }
  .sc-row .sc-go { grid-column: 2; justify-self: start; font-size: 11px; }
  .sc-next, .sc-summary { padding: 20px; }
  .sc-dialog { padding: 20px; }
  .sc-dialog-foot { flex-direction: column-reverse; align-items: stretch; }
  .sc-panel { padding: 19px; }
  .sc-modes { gap: 8px; }
  .sc-mode { padding: 11px; }
  .sc-mode strong { font-size: 12px; }
  .sc-mode small { font-size: 10px; }
  .sc-actions, .sc-bottom, .sc-results-bottom, .sc-more { align-items: stretch; flex-direction: column; }
  .sc-actions .btn, .sc-bottom .btn, .sc-more .btn { width: 100%; }
  .sc-checks, .sc-split { grid-template-columns: 1fr; }
  .sc-config-card { padding: 20px; }
  .sc-setup { grid-template-columns: 1fr; }
  .sc-filterbar { align-items: flex-start; flex-direction: column; }
  .sc-metrics { gap: 18px; }
  .sc-item-head { padding: 14px 16px; grid-template-columns: minmax(0, 1fr) auto; }
  .sc-item-head .sc-chevron { display: none; }
  .sc-item-town { display: block; margin: 2px 0 0; }
  .sc-item-body { padding: 4px 16px 18px; }
  .sc-market-row { padding: 16px; }
  .sc-advanced > summary { flex-wrap: wrap; row-gap: 2px; }
  .sc-advanced > summary::after { order: 1; }
  .sc-advanced > summary .sc-summary-note { order: 2; flex-basis: 100%; }
}

/* Asiakasluotain's payments (the user's pricing decision, 5 November 2026): a new luotaus's packages as the intake's mode cards, the
   buyer's details beside the basket, and the balance lines. */
.sc-payment { margin-bottom: 24px; }
.sc-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 16px 0 22px; }
.sc-package { display: flex; flex-direction: column; gap: 6px; position: relative; background: #111927; border: 1px solid var(--border-color); border-radius: 8px; padding: 15px 14px; cursor: pointer; margin: 0; }
.sc-package:hover { border-color: #536a89; }
.sc-package.selected { background: rgba(59, 130, 246, .09); border-color: #4b92f8; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .13); }
.sc-package input { position: absolute; opacity: 0; pointer-events: none; }
.sc-package:has(input:focus-visible) { outline: 2px solid #93c5fd; outline-offset: 3px; }
.sc-package-name { color: #e4edfa; font-size: 13px; font-weight: 650; }
.sc-package-price { color: #fff; font-size: 22px; font-weight: 750; letter-spacing: -.03em; }
.sc-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.sc-checkout > .sc-notice, .sc-checkout > .btn { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; }
.sc-basket { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--border-color); border-radius: 8px; background: #111927; font-size: 13px; }
.sc-basket-row { display: flex; justify-content: space-between; gap: 12px; color: var(--text-soft); }
.sc-basket-row strong { color: #fff; white-space: nowrap; }
.sc-basket-sub { color: var(--text-muted); font-size: 12px; }
.sc-basket-total { padding-top: 8px; border-top: 1px solid var(--border-soft); color: #fff; font-size: 15px; }
.sc-warn-text { color: #f1dcae; }
.sc-balance { color: var(--text-soft); }
.sc-balance strong { color: #fff; }
@media (max-width: 640px) {
  .sc-checkout { grid-template-columns: 1fr; }
}