/*
* swarmlet-base.css
*
* Purpose:
* Single source of truth for the SWARMATIC swarmlet visual language.
* Every swarmlet links this file first, then its own CSS for swarmlet-
* specific components only. Nothing in this file is swarmlet-specific.
*
* Token set mirrors workbench.css exactly so the iframe and shell
* share the same visual grammar without coupling their stylesheets.
*
* Layout standard (agreed 2026-05):
* - Subheader strip: card image · name · status · id · description · states
* - Two-column body: 65% primary working area / 35% secondary framed panels
* - Mobile: single column, primary first, secondary panel below
*
* Font strategy:
* Avenir Next / Avenir are system fonts on Apple devices (no download).
* DM Sans is the fallback for Windows / Linux — loaded via Google Fonts.
* Each swarmlet template must include this link in :
*
*
*
*
*/
/* ─────────────────────────────────────────────
TOKENS
───────────────────────────────────────────── */
:root {
--font: "Avenir Next", "Avenir", "DM Sans", system-ui, sans-serif;
--font-mono: "DM Mono", "Fira Mono", "Courier New", monospace;
--ink: #1D1D1F;
--paper: #F5F5F7;
--warm: #ECEEF0;
--warm-deep: #E0E2E5;
--rule: #D1D1D6;
--muted: #AEAEB2;
--accent: #2D7DD2;
--accent-dim: rgba(45, 125, 210, 0.10);
--accent-focus: rgba(45, 125, 210, 0.20);
--header-bg: #1C2B3A;
--cell-border: #C7C7CC;
--status-green: #34C759;
/* semantic banner colours */
--error-bg: #fdecea;
--error-border: #e8a898;
--error-text: #8b2a1a;
--success-bg: #f0f7f2;
--success-border:#a8cdb8;
--success-text: #1a5c38;
--info-bg: #dce8f0;
--info-border: #7aaac0;
--info-text: #1a3a5c;
--warning-bg: #fdf6e8;
--warning-border:#e8c87a;
--warning-text: #7a4a0a;
--pending-bg: #fdf8f0;
--pending-border:#e8d498;
--pending-text: #6a4a0a;
}
/* ─────────────────────────────────────────────
RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
min-height: 100%;
font-family: var(--font);
font-size: 16px;
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ─────────────────────────────────────────────
PAGE SHELL
Body is a flex column. The subheader strip sits at the top;
the two-column body fills the rest.
───────────────────────────────────────────── */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ─────────────────────────────────────────────
SUBHEADER STRIP
Rendered by the shared fragment fragments/swarmlet-header.html.
White bar spanning the full iframe width.
───────────────────────────────────────────── */
.swarmlet-subheader {
background: #ffffff;
border-bottom: 1px solid var(--rule);
padding: 12px 20px;
display: flex;
align-items: flex-start;
gap: 14px;
flex-shrink: 0;
}
.swarmlet-card-img {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.swarmlet-card-placeholder {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--header-bg);
color: #c9a84c;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.swarmlet-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.swarmlet-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.swarmlet-name {
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.swarmlet-status {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--status-green);
display: flex;
align-items: center;
gap: 4px;
}
.swarmlet-status::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--status-green);
display: inline-block;
flex-shrink: 0;
}
.swarmlet-id {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.swarmlet-description {
font-size: 13px;
color: #6e6e73;
line-height: 1.5;
}
.swarmlet-states {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.state-pill {
font-family: var(--font-mono);
font-size: 10px;
background: var(--warm);
color: var(--ink);
border-radius: 5px;
padding: 2px 7px;
letter-spacing: 0.04em;
}
.state-arrow {
font-size: 11px;
color: var(--muted);
}
/* ─────────────────────────────────────────────
TWO-COLUMN BODY
65% primary / 35% secondary.
Stacks to single column on mobile.
───────────────────────────────────────────── */
.swarmlet-body {
flex: 1;
display: grid;
grid-template-columns: 65fr 35fr;
align-items: start;
min-height: 0;
}
.swarmlet-primary {
padding: 24px 28px 40px;
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.swarmlet-secondary {
padding: 20px 18px 40px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
/* narrow variant for auth screens (sign_in, sign_up) — single centred column */
.swarmlet-body--narrow {
display: flex;
justify-content: center;
}
.swarmlet-body--narrow .swarmlet-primary {
border-right: none;
max-width: 440px;
width: 100%;
}
/* ─────────────────────────────────────────────
SECONDARY PANEL (framed card)
Use .panel as a wrapper for each distinct
block of secondary content on the right.
───────────────────────────────────────────── */
.panel {
background: #ffffff;
border: 1px solid var(--rule);
border-radius: 12px;
padding: 14px 16px;
}
.panel-heading {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 10px;
}
.panel-hint {
font-size: 13px;
color: #6e6e73;
line-height: 1.55;
margin-bottom: 10px;
}
.panel-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 0.5px solid var(--warm-deep);
font-size: 14px;
gap: 12px;
}
.panel-row:last-child { border-bottom: none; }
.panel-key {
color: var(--muted);
font-size: 13px;
flex-shrink: 0;
}
.panel-val {
color: var(--ink);
font-weight: 500;
font-size: 14px;
text-align: right;
word-break: break-word;
}
/* ─────────────────────────────────────────────
HEADINGS
───────────────────────────────────────────── */
h1 {
font-family: var(--font);
font-size: 26px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
margin-bottom: 6px;
}
h2 {
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 10px;
}
/* ─────────────────────────────────────────────
FORM ELEMENTS
───────────────────────────────────────────── */
label {
display: block;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
margin-top: 16px;
}
label:first-of-type { margin-top: 0; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"] {
width: 100%;
background: #fff;
border: 1px solid var(--cell-border);
border-radius: 10px;
padding: 10px 13px;
font-family: var(--font);
font-size: 15px;
color: var(--ink);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--muted); }
input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-focus);
}
textarea {
width: 100%;
background: #fff;
border: 1px solid var(--cell-border);
border-radius: 10px;
padding: 10px 13px;
font-family: var(--font);
font-size: 15px;
color: var(--ink);
min-height: 110px;
resize: vertical;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
line-height: 1.6;
}
textarea::placeholder { color: var(--muted); }
textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-focus);
}
select {
width: 100%;
background: #fff;
border: 1px solid var(--cell-border);
border-radius: 10px;
padding: 10px 13px;
font-family: var(--font);
font-size: 15px;
color: var(--ink);
outline: none;
appearance: none;
cursor: pointer;
transition: border-color 0.15s;
}
select:focus { border-color: var(--accent); }
/* ─────────────────────────────────────────────
BUTTONS
───────────────────────────────────────────── */
.btn-primary {
display: block;
width: 100%;
margin-top: 16px;
background: var(--header-bg);
color: #FFFFFF;
border: none;
border-radius: 10px;
padding: 12px 18px;
font-family: var(--font);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.4; cursor: default; }
.btn-secondary {
display: block;
width: 100%;
margin-top: 10px;
background: none;
color: var(--muted);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 11px 18px;
font-family: var(--font);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--muted); color: var(--ink); }
/* ready state — coach has suggested completion */
.btn-secondary.ready {
background: var(--status-green);
border-color: var(--status-green);
color: #fff;
}
.btn-secondary.ready:hover { opacity: 0.85; }
.btn-icon {
background: none;
border: none;
cursor: pointer;
color: var(--muted);
font-size: 16px;
line-height: 1;
padding: 2px 4px;
transition: color 0.15s;
}
.btn-icon:hover { color: var(--accent); }
/* inline button row */
.btn-row {
display: flex;
gap: 8px;
align-items: center;
margin-top: 14px;
flex-wrap: wrap;
}
.btn-row .btn-secondary {
margin-top: 0;
width: auto;
padding: 9px 16px;
}
.btn-row .btn-primary {
margin-top: 0;
flex: 1;
min-width: 140px;
}
/* ─────────────────────────────────────────────
BANNERS
───────────────────────────────────────────── */
.error-banner,
.success-banner,
.info-banner,
.warning-banner,
.pending-banner {
border-radius: 10px;
padding: 12px 16px;
font-size: 14px;
line-height: 1.55;
border-width: 1px;
border-style: solid;
}
.error-banner { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); }
.success-banner { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.info-banner { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.warning-banner { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.pending-banner { background: var(--pending-bg); border-color: var(--pending-border); color: var(--pending-text); }
/* ─────────────────────────────────────────────
PROGRESS BAR
───────────────────────────────────────────── */
.progress-label {
display: flex;
justify-content: space-between;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.progress-bar {
height: 4px;
background: var(--warm-deep);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--accent);
border-radius: 4px;
transition: width 0.3s ease;
}
/* ─────────────────────────────────────────────
COACH PROMPT BLOCK
───────────────────────────────────────────── */
.coach-prompt {
background: var(--warm);
border-radius: 10px;
padding: 14px 16px;
}
.coach-label {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 6px;
}
.coach-prompt p,
.coach-prompt div {
font-size: 16px;
color: var(--ink);
line-height: 1.6;
}
/* ─────────────────────────────────────────────
CONTENT PANEL (profile / goal / positioning so far)
Used inside .swarmlet-secondary as a .panel,
or standalone inside .swarmlet-primary.
───────────────────────────────────────────── */
.content-panel {
padding-top: 16px;
border-top: 1px solid var(--rule);
margin-top: 8px;
}
.content-empty {
font-size: 13px;
color: var(--muted);
font-style: italic;
}
.content-entry {
display: flex;
padding: 7px 0;
border-bottom: 1px solid var(--warm-deep);
font-size: 14px;
gap: 12px;
}
.content-entry:last-child { border-bottom: none; }
.content-key {
flex: 0 0 150px;
color: var(--muted);
font-size: 13px;
}
.content-value {
flex: 1;
color: var(--ink);
word-break: break-word;
line-height: 1.5;
}
/* ─────────────────────────────────────────────
MATERIAL PANEL (document / URL enrichment)
Intended for use as a .panel inside .swarmlet-secondary.
───────────────────────────────────────────── */
.material-panel {
/* kept for backward compatibility — wraps a framed secondary panel */
}
.material-heading {
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 6px;
}
.material-hint {
font-size: 13px;
color: #6e6e73;
line-height: 1.6;
margin-bottom: 12px;
}
.material-form { margin-top: 10px; }
.material-form label {
margin-top: 8px;
font-size: 9px;
}
.material-form input[type="file"] {
width: 100%;
font-size: 13px;
font-family: inherit;
padding: 5px 0;
color: var(--ink);
}
.material-form input[type="file"]::file-selector-button {
margin-right: 10px;
padding: 5px 12px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 7px;
font-family: var(--font);
font-size: 12px;
color: var(--muted);
cursor: pointer;
transition: border-color 0.15s;
}
.material-form input[type="file"]::file-selector-button:hover {
border-color: var(--muted);
color: var(--ink);
}
.material-form .btn-secondary {
margin-top: 8px;
width: auto;
padding: 7px 14px;
font-size: 13px;
}
/* ─────────────────────────────────────────────
PENDING DOCUMENTS
───────────────────────────────────────────── */
.pending-list {
margin-bottom: 10px;
padding: 8px 12px;
background: #fff;
border: 1px dashed var(--rule);
border-radius: 10px;
font-size: 13px;
color: var(--muted);
}
.pending-label {
display: block;
color: var(--ink);
margin-bottom: 4px;
font-size: 12px;
letter-spacing: 0.04em;
}
.pending-list ul {
margin: 0;
padding-left: 16px;
color: var(--muted);
}
.pending-list li {
padding: 2px 0;
font-size: 12px;
}
/* ─────────────────────────────────────────────
FOOTER LINK
───────────────────────────────────────────── */
.footer-link {
font-size: 13px;
color: var(--accent);
margin-top: 12px;
}
.footer-link a:hover { text-decoration: underline; }
/* ─────────────────────────────────────────────
STAT CARDS (summary numbers)
───────────────────────────────────────────── */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.stat-card {
background: var(--warm);
border-radius: 10px;
padding: 12px 14px;
}
.stat-label {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.stat-value {
font-size: 26px;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
/* ─────────────────────────────────────────────
TABS
───────────────────────────────────────────── */
.tab-bar {
display: flex;
gap: 0;
border-bottom: 1px solid var(--rule);
margin-bottom: 20px;
}
.tab {
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
text-decoration: none;
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: var(--font);
transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--ink); }
.tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
font-weight: 600;
}
/* ─────────────────────────────────────────────
TAGS / CHIPS (capability keys, swarmlet ids)
───────────────────────────────────────────── */
.tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
background: var(--warm);
color: var(--ink);
border-radius: 5px;
padding: 3px 8px;
letter-spacing: 0.03em;
}
.tag-accent {
background: var(--accent-dim);
color: var(--accent);
}
/* ─────────────────────────────────────────────
INLINE VALIDATION ERROR
───────────────────────────────────────────── */
.inline-error {
font-size: 13px;
color: var(--error-text);
margin-top: 6px;
}
/* ─────────────────────────────────────────────
SPINNER (legacy inline use)
───────────────────────────────────────────── */
.spinner {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ─────────────────────────────────────────────
PROCESSING OVERLAY
───────────────────────────────────────────── */
.processing-overlay {
position: fixed;
inset: 0;
background: rgba(245, 245, 247, 0.80);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
z-index: 100;
}
.processing-overlay[hidden] { display: none; }
.processing-overlay-spinner {
width: 28px;
height: 28px;
border: 3px solid rgba(45, 125, 210, 0.18);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
.processing-overlay-label {
font-size: 13px;
font-weight: 500;
color: var(--accent);
letter-spacing: 0.03em;
}
/* ─────────────────────────────────────────────
SKELETON SHIMMER
───────────────────────────────────────────── */
.skeleton-block { padding: 4px 0; }
.skeleton-line {
height: 12px;
border-radius: 6px;
background: linear-gradient(
90deg,
var(--warm) 25%,
var(--warm-deep) 50%,
var(--warm) 75%
);
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
margin-bottom: 10px;
width: 100%;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line--full { width: 100%; }
.skeleton-line--medium { width: 80%; }
.skeleton-line--short { width: 55%; }
.skeleton-line--xshort { width: 35%; }
.skeleton-line--heading {
height: 20px;
border-radius: 7px;
margin-bottom: 14px;
width: 60%;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ─────────────────────────────────────────────
BUTTON LOADING STATE
───────────────────────────────────────────── */
.btn-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.30);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 8px;
flex-shrink: 0;
}
.btn-primary:disabled {
opacity: 0.75;
cursor: not-allowed;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ─────────────────────────────────────────────
MOBILE — single column, primary first
───────────────────────────────────────────── */
@media (max-width: 640px) {
.swarmlet-body {
grid-template-columns: 1fr;
}
.swarmlet-primary {
border-right: none;
border-bottom: 1px solid var(--rule);
padding: 20px 16px 28px;
}
.swarmlet-secondary {
padding: 16px 16px 32px;
}
.swarmlet-subheader {
padding: 10px 14px;
}
.swarmlet-id {
display: none; /* too cramped on small screens */
}
}