/* =====================================================================
Hawaii Robo Labs — light workbench, glass-black chrome,
sunset-amber / lagoon-teal brand accents.
ink: #1D2126 bg: #F2F0EC line: #E2DED7
teal: #2E8F88 amber: #E8930C err: #CF4A3D
==================================================================== */
:root {
--ink: #1D2126;
--ink2: #5C646D;
--bg: #F2F0EC;
--surface: #FFFFFF;
--surface2: #F8F7F4;
--line: #E2DED7;
--amber: #E8930C;
--amber-soft: #FDF0D9;
--teal: #2E8F88;
--teal-soft: #E2F2F0;
--curtain: #5B6BD6;
--ok: #2F9E6F;
--err: #CF4A3D;
--glass: #16181B;
--radius: 10px;
/* legacy aliases kept so any missed reference still resolves */
--paper: var(--bg);
--panel: var(--surface);
--grid: var(--line);
--blue: var(--teal);
--font-display: 'Archivo', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
[hidden] { display: none !important; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
}
button { font-family: var(--font-body); cursor: pointer; }
/* ---------------- Auth ---------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card {
display: grid; grid-template-columns: 1fr 1.2fr; width: min(860px, 100%);
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 18px 50px rgba(22, 24, 27, .12); overflow: hidden;
}
.auth-brand {
background: var(--glass); color: #fff; padding: 44px 36px;
display: flex; flex-direction: column; justify-content: center; gap: 14px;
border-bottom: 3px solid var(--amber);
}
.auth-brand h1 {
font-family: var(--font-display); font-weight: 700; font-size: 2.1rem;
line-height: 1.05; margin: 0; letter-spacing: .5px;
}
.auth-brand .tag { color: #9AA2AA; margin: 0; }
.bot { width: 72px; stroke: var(--amber); stroke-width: 3; fill: none; }
.bot .eye { fill: var(--amber); stroke: none; }
.bot .ant { fill: #fff; stroke: none; animation: blink 2.4s infinite; }
@keyframes blink { 0%, 88% { opacity: 1; } 92%, 96% { opacity: .2; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bot .ant { animation: none; } }
.auth-forms { padding: 36px; }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tab {
border: 1.5px solid var(--line); background: transparent; border-radius: 8px;
padding: 8px 16px; font-family: var(--font-display); font-weight: 600; color: var(--ink);
}
.tab.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 500; }
.form label.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
.form label.checkbox-row input { width: auto; }
.form input, .form select {
border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px;
font: inherit; background: var(--surface2);
}
.form input:focus, .form select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.primary {
background: var(--teal); color: #fff; border: none; border-radius: 8px;
padding: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.primary:hover { filter: brightness(1.08); }
.btn-secondary {
background: var(--surface2); color: var(--ink); border: 1.5px solid var(--line); border-radius: 8px;
padding: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
}
.btn-secondary:hover { background: var(--surface); border-color: var(--ink2); }
.btn-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-with-icon .btn-icon { width: 18px; height: 18px; }
.msg { min-height: 1.2em; font-size: .9rem; color: var(--err); margin: 12px 0 0; }
.msg.ok { color: var(--ok); }
.robo-prompt p { margin: 4px 0 12px; color: var(--ink2); }
.robo-prompt-input {
width: 100%; border: 1.5px solid var(--line); border-radius: 8px;
padding: 10px 12px; font: inherit; background: var(--surface2);
}
.robo-prompt-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.robo-prompt .dialog-actions { margin-top: 18px; }
.robo-prompt .primary { flex: 1; }
.username-status { min-height: 1.1em; font-size: .82rem; color: var(--ink2); }
.username-status.available { color: var(--ok); }
.username-status.taken { color: var(--err); }
/* Password fields: the reveal button sits inside the input's right gutter, so
the field keeps one border and the icon never collides with the text. */
.pw-field { position: relative; display: flex; }
.pw-field input { width: 100%; padding-right: 44px; }
.pw-toggle {
position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
display: grid; place-items: center; width: 34px; height: 34px;
border: none; border-radius: 7px; background: transparent;
color: var(--ink2); padding: 0;
}
.pw-toggle:hover { background: var(--line); color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pw-toggle[aria-pressed="true"] { color: var(--teal); }
.pw-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Hidden password shows a plain eye ("reveal"); revealed shows the struck-out
eye ("hide"), so the icon always names the action the click performs. */
.pw-icon .pw-slash { opacity: 0; transition: opacity .12s ease; }
.pw-toggle[aria-pressed="true"] .pw-icon .pw-slash { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pw-icon .pw-slash { transition: none; } }
.field-hint { min-height: 1.1em; font-size: .82rem; font-weight: 400; color: var(--ink2); }
.field-hint.ok { color: var(--ok); }
.field-hint.bad { color: var(--err); }
/* ---------------- IDE ---------------- */
/* Full-height shell shared by both dashboards (#ide and #ros2Ide). The
viewport height here is what lets .workspace-row flex:1 and hand Blockly
a real height - without it the canvas collapses to nothing. */
.ide-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* ---- Topbar ----
One anatomy on every page, four regions in DOM order:
.topbar-brand logo + product badge
.topbar-context what is being edited (title, board / robot) - IDEs only
.actions the toolbar
.topbar-utility tasks, notifications, account menu (always far right)
Desktop lays them out on one row; the "Responsive" section at the end of
this file re-flows the same markup into two rows on tablets and three on
phones (with .actions becoming a swipeable strip). .topbar-compact marks
the pages whose toolbar is one or two buttons (CV, admin, teacher, KB...)
and stays a single row at every width. */
.topbar {
display: flex; align-items: center; gap: 12px; padding: 10px 16px;
background: var(--glass); color: #E8E6E1; flex-wrap: wrap;
border-bottom: 3px solid var(--amber);
box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 18px -12px rgba(0, 0, 0, .6);
}
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.topbar-context { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-utility { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: .5px; color: var(--amber); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.brand-logo { height: 30px; width: 30px; object-fit: contain; flex-shrink: 0; }
.title-input {
background: #24272B; border: 1px solid #3A3F45; border-radius: 7px;
color: #E8E6E1; font: 600 1rem var(--font-body); padding: 6px 10px; min-width: 180px;
}
.title-input:focus { outline: none; border-color: var(--amber); }
/* Title + optional "Guide" button, docked as one control. The button only
exists for showcase projects that have a Knowledge Base article, so the
bar stays clean for everything else. */
.title-wrap { display: inline-flex; align-items: stretch; }
.title-wrap:has(.guide-btn:not([hidden])) .title-input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.guide-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 0 10px; cursor: pointer;
background: #24272B; color: var(--amber);
border: 1px solid #3A3F45; border-left: 1px solid #3A3F45; border-radius: 0 7px 7px 0;
animation: guide-pulse 1.6s ease-in-out 2;
}
.guide-btn:hover, .guide-btn:focus-visible { background: rgba(232, 147, 12, .14); border-color: var(--amber); outline: none; }
.guide-btn .btn-icon { width: 17px; height: 17px; }
@keyframes guide-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 147, 12, 0); }
50% { box-shadow: 0 0 0 4px rgba(232, 147, 12, .35); }
}
@media (prefers-reduced-motion: reduce) { .guide-btn { animation: none; } }
#boardSelect {
background: #24272B; color: #E8E6E1; border: 1px solid #3A3F45;
border-radius: 8px; padding: 6px 10px; font: 500 .9rem var(--font-body);
}
.actions { margin-left: 0; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.topbar-compact .actions { flex: 0 1 auto; }
.actions button, .topbar-utility > button, .topbar-utility .who, .tasks-wrap button {
background: transparent; color: #E8E6E1; border: 1px solid #3A3F45;
border-radius: 8px; padding: 7px 12px; font-weight: 500;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.actions button:hover, .topbar-utility > button:hover, .tasks-wrap button:hover { border-color: #E8E6E1; }
.actions button.icon-only { padding: 7px 9px; }
.actions button.icon-only:disabled { opacity: .35; cursor: not-allowed; }
.actions button.icon-only:disabled:hover { border-color: #3A3F45; }
.btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
.tb-primary { display: inline-flex; align-items: center; gap: 8px; }
/* Thin divider between toolbar clusters (history | file | deploy). */
.tb-sep { width: 1px; height: 22px; background: #3A3F45; margin: 0 2px; flex-shrink: 0; align-self: center; }
/* Plain text name (pages without an account menu). */
span.who { color: #9AA2AA; font-size: .85rem; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.menu-wrap { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.menu-chevron-btn { padding: 7px 8px !important; }
.menu-wrap .dropdown { top: 100%; left: 0; right: auto; }
.profile-menu { position: relative; }
.profile-menu .who {
color: #9AA2AA; font-size: .85rem; padding: 7px 10px; max-width: 240px;
}
.profile-menu .who .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu .who:hover { border-color: #E8E6E1; color: #E8E6E1; }
.profile-menu .who .btn-icon { color: #9AA2AA; }
.profile-menu .who .chevron { width: 12px; height: 12px; transition: transform .15s ease; }
.profile-menu .who[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.dropdown {
position: absolute; top: 100%; right: 0; margin-top: 6px;
background: var(--surface); color: var(--ink); border: 1px solid var(--line);
border-radius: 10px; box-shadow: 0 18px 40px rgba(22, 24, 27, .18);
min-width: 170px; overflow: hidden; z-index: 95;
}
.dropdown .dropdown-item {
display: flex; align-items: center; gap: 8px; width: 100%;
background: transparent; border: none; border-radius: 0;
padding: 10px 14px; font: 500 .85rem var(--font-body); color: var(--ink);
text-align: left; cursor: pointer; white-space: nowrap;
}
.dropdown .dropdown-item:hover { background: var(--surface2); }
.dropdown .dropdown-item.danger { color: var(--err); }
.dropdown .dropdown-item .btn-icon { color: inherit; }
.dropdown .dropdown-item + .dropdown-item { border-top: 1px solid var(--line); }
/* Type-to-search autocomplete (schools, and the "assign a plan" student/
teacher picker) - a themed replacement for ,
whose popup can't be restyled and only matches on exact, full text. */
.autocomplete-field { z-index: 1; }
.autocomplete-field input { padding-right: 30px; }
.ac-clear {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; border: none; background: transparent; color: var(--ink2);
cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%;
font-size: 17px; line-height: 1; padding: 0;
}
.ac-clear:hover { background: var(--surface2); color: var(--ink); }
.ac-menu { left: 0; right: 0; top: 100%; margin-top: 6px; min-width: 0; }
.ac-list { max-height: 260px; overflow-y: auto; }
.ac-menu .dropdown-item {
/* block, not the .dropdown flex row: a result is one run of text, and
flex would treat the around the matched part as its own item
and push it apart by the row `gap`. */
display: block; width: 100%; font: inherit; font-size: .85rem; white-space: normal; text-align: left;
}
.ac-menu .dropdown-item mark { background: transparent; color: var(--teal); font-weight: 700; padding: 0; }
.ac-menu .dropdown-item.is-active,
.ac-menu .dropdown-item:hover { background: var(--surface2); }
.ac-menu .dropdown-item.is-empty { color: var(--ink2); cursor: default; }
.ac-menu .dropdown-item.is-empty:hover { background: transparent; }
.autocomplete-field input.is-invalid { border-color: var(--err); box-shadow: 0 0 0 3px rgba(207, 74, 61, .12); }
.dialog-actions { display: flex; gap: 10px; margin-top: 4px; }
.dialog-actions .primary { flex: 1; }
.dialog-actions button:not(.primary) {
border: 1.5px solid var(--line); background: var(--surface2); border-radius: 8px;
padding: 12px 16px; font-weight: 500; color: var(--ink);
}
.confirm-msg { color: var(--ink); margin: 4px 0 22px; line-height: 1.5; }
.dialog-actions .primary.danger-btn { background: var(--err); }
.renew-actions { flex-direction: column; }
.renew-actions a { text-decoration: none; }
.renew-actions .btn-with-icon { justify-content: flex-start; }
.renew-actions .btn-secondary { border: 1.5px solid var(--line); }
.renew-back { display: flex; justify-content: center; gap: 20px; margin-top: 4px; }
/* Sign out sits beside "continue" without competing with it for attention. */
.renew-signout { color: var(--ink2); }
/* Date over badge: the Status column sits past the card's edge on narrow
screens, so an expired plan says so where the reader is already looking. */
.renew-expiry { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.dashboard-choice-list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 18px; }
.dashboard-choice {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px;
}
.dashboard-choice.is-default { border-color: var(--ok); }
.dashboard-choice-name { font-weight: 600; }
.dashboard-choice-default-tag { color: var(--ok); font-size: .78rem; font-weight: 600; }
.dashboard-choice-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-whatsapp:hover { filter: brightness(1.06); }
/* Signature: the burn switch — fills like a progress gauge while flashing */
.burn {
position: relative; overflow: hidden; border: 2px solid var(--amber) !important;
color: #fff; font-family: var(--font-display); font-weight: 700;
}
.burn .burn-fill {
position: absolute; inset: 0; width: 0%; background: var(--amber);
transition: width .25s ease;
}
.burn .burn-label { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.burn.busy { pointer-events: none; }
.burn.done { border-color: var(--ok) !important; }
.burn.done .burn-fill { background: var(--ok); width: 100%; }
.teacher-edit-banner {
display: flex; align-items: center; gap: 10px; padding: 8px 16px;
background: var(--amber); color: #241A05; font-size: .85rem; font-weight: 500;
}
.teacher-edit-banner button {
margin-left: auto; border: 1.5px solid #241A05; background: transparent;
border-radius: 6px; padding: 4px 12px; font-size: .78rem; font-weight: 600; color: #241A05;
}
.sample-difficulty-picker {
display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
}
.sample-difficulty-picker select {
border: 1.5px solid #241A05; border-radius: 6px; padding: 3px 6px;
font: 500 .78rem var(--font-body); background: rgba(255,255,255,.55); color: #241A05;
}
.sample-article-search { width: 190px; }
.sample-article-search input {
border: 1.5px solid #241A05; border-radius: 6px; padding: 3px 6px 3px 30px;
font: 500 .78rem var(--font-body); background: rgba(255,255,255,.55); color: #241A05;
box-shadow: none; width: 100%;
}
.sample-article-search .app-search-icon { left: 8px; width: 14px; height: 14px; color: #241A05; }
.workspace-row { flex: 1; display: flex; min-height: 0; }
#blocklyDiv { flex: 1; }
/* Toolbox category icons (left-side block palette) — kept in sync with
the actual block colors defined in blocks.js, not the page theme. */
.blocklyTreeRow { cursor: pointer; }
.blocklyZoom, .blocklyTrash { cursor: pointer; }
.blocklyTreeIcon.cat-icon {
display: inline-block !important; vertical-align: middle; visibility: visible !important;
width: 18px !important; height: 18px !important;
background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
margin-right: 6px;
}
.cat-icon-program { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v18'/%3E%3Cpath d='M5 4h12l-3 4 3 4H5'/%3E%3C/svg%3E"); }
.cat-icon-pins { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5BD8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v4'/%3E%3Cpath d='M15 2v4'/%3E%3Cpath d='M7 8h10v4a5 5 0 0 1-10 0V8z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E"); }
.cat-icon-timing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5AF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.cat-icon-sensors { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20v-3'/%3E%3Cpath d='M8.5 19a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 16.5a9.5 9.5 0 0 1 14 0'/%3E%3Ccircle cx='12' cy='17' r='1' fill='%230E9F6E' stroke='none'/%3E%3C/svg%3E"); }
.cat-icon-motion { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E"); }
.cat-icon-sound { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E"); }
.cat-icon-serial { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DB2777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 9l3 3-3 3'/%3E%3Cpath d='M13 15h4'/%3E%3C/svg%3E"); }
.cat-icon-logic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b80a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 10-8 10-8-10z'/%3E%3C/svg%3E"); }
.cat-icon-loops { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ba55b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.cat-icon-math { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b67a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.cat-icon-text { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a55b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M12 6v14'/%3E%3C/svg%3E"); }
.cat-icon-variables { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a55b5b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l6 12'/%3E%3Cpath d='M10 6l-6 12'/%3E%3Cpath d='M14 9h6'/%3E%3Cpath d='M14 15h6'/%3E%3C/svg%3E"); }
.cat-icon-functions { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5ba5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M15 3h2a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-2'/%3E%3C/svg%3E"); }
.code-panel {
width: 380px; display: flex; flex-direction: column; background: var(--surface);
border-left: 1px solid var(--line);
}
.code-head, .console-head {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-display); font-weight: 600; font-size: .85rem;
letter-spacing: .5px; text-transform: uppercase;
padding: 8px 12px; background: var(--surface2); border-bottom: 1px solid var(--line);
}
.console-head { border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px; }
/* Always visible (unlike #monitorControls, which only matters on the Serial
Monitor tab) - Burn reads the same selected port, so its status belongs
here regardless of which sub-tab is showing. */
.port-chip {
display: inline-flex; align-items: center; gap: 7px;
border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px;
padding: 4px 12px 4px 10px; font-size: .78rem; color: var(--ink2);
}
.port-chip:hover { border-color: var(--teal); color: var(--ink); }
.port-chip .btn-icon { width: 14px; height: 14px; }
.port-chip .status-dot { width: 8px; height: 8px; box-shadow: none; }
.port-chip.is-selected { color: var(--ink); }
.code-head button {
border: 1.5px solid var(--line); background: var(--surface); border-radius: 6px;
padding: 3px 10px; font-size: .78rem; color: var(--ink);
}
#codeView { flex: 1.4; margin: 0; overflow: auto; padding: 12px; font: .78rem/1.5 var(--font-mono); }
#consoleView, #monitorView {
flex: 1; margin: 0; overflow: auto; padding: 12px;
font: .75rem/1.5 var(--font-mono); background: #16181B; color: #9FE8C1;
}
#consoleView .err { color: #FCA5A5; }
/* ---- ROS 2: Diagnostics and Terminal tabs (docs/plans/web-terminal.md) ----
Both take the console's slot in the panel: same flex share, same dark
ground for the output, so switching tabs moves nothing else. */
.diag-view, .term-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.diag-controls {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
padding: 8px 12px; background: var(--surface2); border-bottom: 1px solid var(--line);
}
.diag-controls select {
flex: 1 1 140px; min-width: 0; border: 1.5px solid var(--line); border-radius: 6px;
padding: 4px 6px; font: 500 .78rem var(--font-body); background: var(--surface); color: var(--ink);
}
.diag-view .hint { margin: 6px 12px 0; font-size: .74rem; }
.diag-view .hint:empty { display: none; }
#diagOutput {
flex: 1; margin: 8px 0 0; overflow: auto; padding: 12px; white-space: pre-wrap;
font: .75rem/1.5 var(--font-mono); background: #16181B; color: #9FE8C1;
}
#diagOutput .err { color: #FCA5A5; }
#diagOutput .meta { color: #8B949E; }
.term-banner {
display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 12px; background: var(--amber-soft); border-bottom: 1px solid var(--amber);
font-size: .78rem; color: var(--ink);
}
.term-banner strong { font-weight: 700; }
.term-actions { display: flex; gap: 6px; }
.term-mount { flex: 1; min-height: 0; background: #16181B; padding: 6px 0 0 6px; }
.term-mount .xterm { height: 100%; }
.term-status { margin: 0; padding: 6px 12px; font-size: .74rem; background: var(--surface2); border-top: 1px solid var(--line); }
.console-tabs { display: flex; gap: 4px; }
.subtab {
border: none; background: transparent; border-radius: 6px; padding: 4px 10px;
font-family: var(--font-display); font-weight: 600; font-size: .78rem;
letter-spacing: .5px; text-transform: uppercase; color: var(--ink2);
}
.subtab.active { background: var(--teal); color: #fff; }
.monitor-controls { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal; }
.monitor-controls select {
border: 1.5px solid var(--line); border-radius: 6px; padding: 3px 6px;
font: 500 .78rem var(--font-body); background: var(--surface);
}
.monitor-controls button {
border: 1.5px solid var(--ok); color: var(--ok); background: transparent;
border-radius: 6px; padding: 3px 10px; font-size: .78rem; font-weight: 600;
}
.monitor-controls button.connected { border-color: var(--err); color: var(--err); }
.monitor-send {
display: flex; gap: 6px; padding: 8px 12px; background: var(--surface2);
border-top: 1px solid var(--line);
}
.monitor-send input {
flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 6px;
padding: 6px 8px; font: .8rem var(--font-mono); background: var(--surface);
}
.monitor-send select {
border: 1.5px solid var(--line); border-radius: 6px; padding: 6px; font-size: .75rem;
}
.monitor-send button {
border: 1.5px solid var(--line); background: var(--surface); border-radius: 6px;
padding: 6px 12px; font-size: .8rem; font-weight: 500; color: var(--ink);
}
.monitor-send button:disabled, .monitor-send input:disabled { opacity: .5; cursor: not-allowed; }
/* ---------------- dialogs ---------------- */
dialog {
border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px;
width: min(480px, 92vw); font-family: var(--font-body);
box-shadow: 0 18px 50px rgba(22, 24, 27, .3);
}
dialog::backdrop { background: rgba(20, 22, 25, .45); }
dialog h2 { font-family: var(--font-display); margin-top: 0; }
/* Shared close affordance, injected into every dialog by dialogs.js.
The dialog element is already positioned by the UA (absolute, or fixed
when opened with showModal), so it is the containing block here - no
position needs setting on the dialog itself. */
.dialog-close {
position: absolute; top: 12px; right: 12px;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0;
background: transparent; border: none; border-radius: 8px;
color: var(--ink2); cursor: pointer; line-height: 0;
}
.dialog-close svg { width: 18px; height: 18px; }
.dialog-close:hover { background: var(--surface2); color: var(--ink); }
/* Keep a long title from running underneath the button. */
.has-dialog-close > h2 { padding-right: 34px; }
dialog.dialog-fullscreen {
width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
inset: 0; margin: 0; border-radius: 0; border: none;
display: flex; flex-direction: column; padding: 24px 40px;
}
dialog.dialog-fullscreen #editDialogFields {
flex: 1; display: flex; flex-direction: column; overflow: auto; min-height: 0;
}
dialog.dialog-fullscreen #editDialogFields .field-block { flex: 1; min-height: 0; }
dialog.dialog-fullscreen #editDialogFields .kb-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
dialog.dialog-fullscreen #editDialogFields .kb-editor .ql-container { flex: 1; overflow: auto; }
dialog.dialog-fullscreen .dialog-actions { flex-shrink: 0; margin-top: 16px; }
.proj-list { list-style: none; margin: 0 0 16px; padding: 0; max-height: 300px; overflow: auto; }
.proj-list li {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 9px 6px; border-bottom: 1px solid var(--line);
}
.proj-list .proj-desc { font-size: .78rem; color: var(--ink2); display: block; margin-top: 2px; }
.proj-list .proj-actions { display: flex; gap: 6px; flex-shrink: 0; }
.proj-list button {
border: 1.5px solid var(--line); background: var(--surface2); border-radius: 6px; padding: 6px;
display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.proj-list button.danger { border-color: var(--err); color: var(--err); background: transparent; }
.student-sub { font-size: .75rem; color: var(--ink2); }
.roll-input {
width: 76px; border: 1.5px solid var(--line); border-radius: 6px;
padding: 5px 8px; font-size: .8rem; background: var(--surface);
}
/* ---------------- Admin dashboard ---------------- */
.admin-tabs {
display: flex; gap: 4px; padding: 10px 16px; background: var(--glass);
border-bottom: 3px solid var(--amber); overflow-x: auto;
}
.admin-tab {
border: none; background: transparent; border-radius: 8px; padding: 8px 16px;
font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: #9AA2AA;
white-space: nowrap;
}
.admin-tab.active { background: var(--teal); color: #fff; }
.admin-content { padding: 20px; max-width: 1100px; margin: 0 auto; }
.admin-panel { display: flex; flex-direction: column; gap: 20px; }
.admin-card {
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: 20px 22px; box-shadow: 0 1px 3px rgba(29, 33, 38, .06);
}
.admin-card h2 { font-family: var(--font-display); margin: 0 0 14px; font-size: 1.05rem; }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-row label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; min-width: 140px; flex: 1 1 160px; }
.form-row label.wide { flex: 2 1 260px; }
.form-row input, .form-row select {
border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; background: var(--surface2); width: 100%;
}
.form-row button { align-self: flex-end; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.admin-table th, .admin-table td {
text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.admin-table th {
font-family: var(--font-display); font-size: .75rem; letter-spacing: .5px;
text-transform: uppercase; color: var(--ink2);
}
.admin-table code { font-family: var(--font-mono); background: var(--surface2); padding: 2px 6px; border-radius: 4px; }
.key-output {
width: 100%; margin-top: 12px; font-family: var(--font-mono); font-size: .85rem;
border: 1.5px solid var(--line); border-radius: 8px; padding: 10px; resize: vertical; background: var(--surface2);
}
.key-filters { margin-bottom: 12px; }
.pagination { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .85rem; }
.pagination button {
border: 1.5px solid var(--line); background: var(--surface2); border-radius: 6px; padding: 6px 14px; font: inherit; color: var(--ink);
}
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.tag-used { color: var(--ink2); font-size: .78rem; }
.tag-unused { color: var(--ok); font-weight: 600; font-size: .78rem; }
.access-toggle {
border: 1.5px solid var(--ok); color: var(--ok); background: transparent;
border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 600;
}
.access-toggle.is-disabled { border-color: var(--err); color: var(--err); }
/* An account that is active but whose dashboards an admin has overridden -
distinct from plain "Active" so the exception is visible in the row. */
.access-toggle.is-custom { border-color: var(--amber); color: #B5750A; }
/* ---------------- access control modal (Users tab) ---------------- */
.access-account-row {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px;
}
.access-row-name { font-weight: 600; }
.access-row-note { color: var(--ink2); font-size: .8rem; margin-top: 2px; }
.access-dashboards { display: flex; flex-direction: column; gap: 10px; }
.access-dashboard { border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.access-dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.access-effective {
font-size: .7rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.access-effective.yes { background: var(--teal-soft); color: var(--teal); }
.access-effective.no { background: #FBE3DF; color: var(--err); }
.access-choices { display: flex; gap: 8px; margin: 10px 0 8px; }
.access-choice {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px;
font-size: .82rem; font-weight: 600; color: var(--ink2); cursor: pointer;
}
.access-choice input { margin: 0; }
.access-choice.is-picked { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.hint { color: var(--ink2); font-size: .85rem; margin: -6px 0 14px; }
.table-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; margin-top: 10px; }
.table-toolbar.spread { justify-content: space-between; }
.table-toolbar select {
border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px;
font: inherit; background: var(--surface2); color: var(--ink);
}
/* ---------------- Invoice generator (Admin > Invoices) ---------------- */
.invoice-generator { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.invoice-generator-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.invoice-step-label {
display: flex; align-items: center; gap: 8px; font-family: var(--font-display);
font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
color: var(--teal); margin-bottom: 14px;
}
.invoice-step-label-spaced { margin-top: 22px; }
.invoice-step-label .step-num {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 20px; height: 20px; border-radius: 50%; background: var(--teal-soft); color: var(--teal);
font-size: .72rem;
}
.hint-inline { color: var(--ink2); font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: normal; }
#invRecipientTabs.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
#invRecipientTabs .tab { text-align: center; }
.invoice-empty-state {
display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 30px 20px; margin-top: 16px;
color: var(--ink2);
}
.invoice-empty-state .btn-icon { width: 30px; height: 30px; color: var(--line); }
.invoice-empty-state p { margin: 0; font-size: .88rem; max-width: 30ch; }
.invoice-recipient-card {
display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 16px 0;
background: linear-gradient(135deg, var(--teal-soft), var(--surface2));
border: 1px solid var(--line); border-radius: var(--radius);
}
.invoice-recipient-avatar {
width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.invoice-recipient-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.invoice-recipient-info strong {
font-family: var(--font-display); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.invoice-recipient-type {
width: fit-content; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--teal); background: var(--surface); border: 1px solid var(--teal); border-radius: 999px; padding: 1px 8px;
}
.invoice-recipient-contact { display: flex; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--ink2); }
.invoice-recipient-contact span:empty { display: none; }
.invoice-subs-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--teal); cursor: pointer; }
.invoice-subs-table tbody tr.is-selected { background: var(--teal-soft); }
.invoice-options-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 16px 0; }
.toggle-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .88rem; font-weight: 500; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-switch .track {
width: 38px; height: 21px; border-radius: 999px; background: var(--line); position: relative;
transition: background-color .15s ease; flex-shrink: 0;
}
.toggle-switch .track::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
.toggle-switch input:checked + .track { background: var(--teal); }
.toggle-switch input:checked + .track::after { transform: translateX(17px); }
.toggle-switch input:focus-visible + .track { outline: 2px solid var(--teal); outline-offset: 2px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface2); border: 1.5px solid var(--line); border-radius: 999px; }
.segmented-option { position: relative; }
.segmented-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented-option span {
display: block; padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600;
color: var(--ink2); cursor: pointer; transition: background-color .15s ease, color .15s ease; white-space: nowrap;
}
.segmented-option input:checked + span { background: var(--teal); color: #fff; }
.segmented-option input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.invoice-summary {
position: sticky; top: 20px; background: var(--glass); color: #fff; border-radius: var(--radius);
padding: 22px 20px; display: flex; flex-direction: column; gap: 16px;
border-top: 3px solid var(--amber); box-shadow: 0 14px 34px rgba(22, 24, 27, .2);
}
.invoice-summary-head { display: flex; flex-direction: column; gap: 4px; }
.invoice-summary-eyebrow {
font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--amber);
}
.invoice-summary-recipient { font-weight: 600; color: #fff; font-size: .95rem; overflow-wrap: anywhere; }
.invoice-summary-rows { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.invoice-summary-row { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: .86rem; color: #C7CBD1; }
.invoice-summary-row dt, .invoice-summary-row dd { margin: 0; font-weight: 500; }
.invoice-summary-row dd { color: #fff; }
.invoice-summary-total {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.invoice-summary-total span { font-size: .82rem; color: #C7CBD1; font-weight: 600; }
.invoice-summary-total strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--amber); }
.invoice-summary-actions { display: flex; flex-direction: column; gap: 8px; }
.invoice-summary-actions .btn-secondary { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.invoice-summary-actions .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.invoice-summary-actions button:disabled { opacity: .4; cursor: not-allowed; }
.invoice-summary .msg { color: #FFB4A8; margin: 0; }
.invoice-summary .msg.ok { color: #7CE0B3; }
@media (max-width: 860px) {
.invoice-generator { grid-template-columns: 1fr; }
.invoice-summary { position: static; }
}
/* Invoice history: sales/tax summary tiles + cancelled-row styling + preview */
.invoice-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 6px; }
.invoice-stat-tile {
background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius);
padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.invoice-stat-tile-accent { background: var(--teal-soft); border-color: var(--teal); }
.invoice-stat-label { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
.invoice-stat-tile strong { font-family: var(--font-display); font-size: 1.35rem; overflow-wrap: anywhere; }
.invoice-stat-tile-accent strong { color: var(--teal); }
.invoice-stats-row-cancelled { margin-top: 4px; }
.invoice-stat-tile-muted { background: #FBE3DF; border-color: var(--err); }
.invoice-stat-tile-muted strong { color: var(--err); }
.admin-table tbody tr.is-cancelled { opacity: .55; }
.invoice-preview-dialog { width: min(820px, 94vw); }
.invoice-preview-frame-wrap {
height: 70vh; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 4px 0;
}
.invoice-preview-frame-wrap iframe { width: 100%; height: 100%; border: none; background: #525659; }
.difficulty-tag {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-display); font-size: .7rem; font-weight: 700;
letter-spacing: .4px; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.difficulty-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.difficulty-tag.easy { background: var(--teal-soft); color: var(--teal); }
.difficulty-tag.intermediate { background: var(--amber-soft); color: #B5750A; }
.difficulty-tag.hard { background: #FBE3DF; color: var(--err); }
.difficulty-tag.expert { background: #E7E5FA; color: var(--curtain); }
.difficulty-select {
border: 1.5px solid var(--line); border-radius: 6px; padding: 4px 6px;
font-size: .78rem; font-family: var(--font-body); background: var(--surface2); color: var(--ink);
}
.tag-input {
border: 1.5px solid var(--line); border-radius: 6px; padding: 4px 6px; width: 90px;
font-size: .78rem; font-family: var(--font-body); background: var(--surface2); color: var(--ink);
}
.article-search-input {
border: 1.5px solid var(--line); border-radius: 6px; padding: 4px 6px; width: 150px;
font-size: .78rem; font-family: var(--font-body); background: var(--surface2); color: var(--ink);
}
.article-cell { display: flex; align-items: center; gap: 6px; position: relative; }
.table-btn.icon-only:disabled { opacity: .35; cursor: not-allowed; }
.table-btn.icon-only:disabled:hover { border-color: var(--line); color: inherit; }
.table-btn.icon-only.confirm-btn:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.project-tag {
display: inline-flex; align-items: center;
font-family: var(--font-display); font-size: .7rem; font-weight: 700;
letter-spacing: .4px; text-transform: uppercase;
padding: 2.5px 8px; border-radius: 999px; white-space: nowrap;
background: transparent; border: 1.5px solid var(--teal); color: var(--teal);
}
/* Board a showcase project is written for - same chip shape as .project-tag,
in the neutral ink colour so the KITE/track tags keep the accent. */
.board-tag {
display: inline-flex; align-items: center;
font-family: var(--font-display); font-size: .7rem; font-weight: 600;
letter-spacing: .3px;
padding: 2.5px 8px; border-radius: 999px; white-space: nowrap;
background: transparent; border: 1.5px solid var(--ink2); color: var(--ink2);
}
/* A hardware requirement, not a label: this project refuses to run on any
other kind of robot, so it is filled rather than outlined like .board-tag. */
.platform-tag {
display: inline-flex; align-items: center;
font-family: var(--font-display); font-size: .7rem; font-weight: 600;
letter-spacing: .3px;
padding: 2.5px 8px; border-radius: 999px; white-space: nowrap;
background: var(--amber-soft); border: 1.5px solid var(--amber); color: #B5750A;
}
.proj-list li.samples-group-head-row { border-bottom: none; padding: 9px 0 4px; display: block; }
.samples-group-head {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-size: .78rem; font-weight: 700;
letter-spacing: .6px; text-transform: uppercase; color: var(--ink2);
}
.proj-list li.samples-group-head-row:first-child { padding-top: 0; }
.samples-group-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.samples-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.samples-filter button {
border: 1.5px solid var(--line); background: var(--surface2); color: var(--ink);
border-radius: 999px; padding: 5px 13px; font-size: .78rem; font-weight: 600;
}
.samples-filter button.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.name-link {
background: none; border: none; padding: 0; font: inherit; color: var(--teal);
font-weight: 600; text-decoration: underline; cursor: pointer;
}
.table-btn {
border: 1.5px solid var(--line); background: var(--surface2); border-radius: 6px;
padding: 5px 10px; font-size: .78rem; white-space: nowrap; color: var(--ink);
}
.table-btn.danger { border-color: var(--err); color: var(--err); background: transparent; }
.table-btn.icon-only {
padding: 6px; display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle;
}
.table-btn.icon-only .btn-icon { width: 15px; height: 15px; }
.quick-adjust-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 14px; }
.quick-adjust-row .table-btn { padding: 4px 9px; }
/* ---------------- progress / milestones ---------------- */
.progress-cell { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.progress-track { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--ok); border-radius: 999px; }
.progress-label { font-size: .78rem; color: var(--ink2); white-space: nowrap; }
.milestones-dialog { width: min(520px, 92vw); }
.milestones-dialog.wide-dialog { width: min(640px, 92vw); max-height: 86vh; overflow-y: auto; }
.dialog-subhead {
font-family: var(--font-display); font-size: .85rem; margin: 18px 0 8px; color: var(--ink);
}
.dialog-subhead .hint { font-family: var(--font-body); font-weight: 400; margin: 0; display: inline; }
.plan-items-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.plan-kit-picker {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
padding: 10px 12px; margin-bottom: 10px;
background: var(--surface2); border: 1px dashed var(--line); border-radius: 8px;
}
.plan-kit-picker > label:first-child { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; flex: 1 1 220px; }
.plan-kit-picker select { border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; background: var(--surface); color: var(--ink); }
.plan-kit-picker .checkbox-row { margin: 0 0 8px; }
.plan-kit-picker .table-btn { margin-bottom: 4px; }
.plan-kit-picker .plan-kit-qty { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; flex: 0 0 64px; }
.plan-kit-picker .plan-kit-qty input {
width: 64px; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 8px; font: inherit; background: var(--surface); color: var(--ink);
}
/* One row per kit the plan includes: name, how many, whether optional parts count. */
.plan-kits-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.plan-kit-row {
display: grid; grid-template-columns: 1fr 70px auto auto; gap: 8px; align-items: center;
padding: 6px 10px; background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 8px; font-size: .85rem;
}
.plan-kit-row strong { font-weight: 600; }
.plan-kit-row .plan-kit-parts { color: var(--ink2); font-weight: 400; }
.plan-kit-row input[type="number"] {
width: 64px; border: 1.5px solid var(--line); border-radius: 6px; padding: 5px 6px; font: inherit; background: var(--surface);
}
.plan-kit-row .checkbox-row { margin: 0; font-size: .8rem; white-space: nowrap; }
.plan-kit-row .icon-btn { color: var(--err); }
.plan-kits-empty { color: var(--ink2); font-size: .85rem; margin: 0 0 4px; }
.plan-kit-tag {
display: inline-block; padding: 1px 8px; margin: 1px 2px 1px 0; border-radius: 999px; font-size: .78rem; font-weight: 600;
background: var(--teal-soft); color: var(--teal); border: 1px solid var(--teal);
}
.plan-item-row {
display: grid; grid-template-columns: 2fr 70px 1.4fr auto; gap: 6px; align-items: center;
}
.plan-item-row input {
border: 1.5px solid var(--line); border-radius: 6px; padding: 7px 8px; font: inherit; background: var(--surface2);
}
.plan-item-row .icon-btn { color: var(--err); }
.plan-items-empty { color: var(--ink2); font-size: .85rem; margin: 0 0 10px; }
.subscription-tag {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-display); font-size: .7rem; font-weight: 700;
letter-spacing: .4px; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.subscription-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.subscription-tag.active { background: var(--teal-soft); color: var(--teal); }
.subscription-tag.expired { background: var(--amber-soft); color: #B5750A; }
.subscription-tag.cancelled { background: #FBE3DF; color: var(--err); }
.plan-type-tag {
display: inline-block; font-size: .72rem; font-weight: 600; color: var(--ink2);
background: var(--surface2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
}
.milestones-list { list-style: none; margin: 0 0 16px; padding: 0; max-height: 380px; overflow: auto; }
.milestones-list li { padding: 9px 4px; border-bottom: 1px solid var(--line); }
.milestones-list label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.milestones-list input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.milestone-title { font-weight: 600; }
.milestone-title.done { text-decoration: line-through; color: var(--ink2); }
.milestone-desc { font-size: .8rem; color: var(--ink2); margin-top: 2px; }
.student-detail-summary {
display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px;
margin: 4px 0 12px; padding: 12px; background: var(--surface2); border-radius: 10px;
}
.student-detail-stat { display: flex; flex-direction: column; gap: 2px; }
.student-detail-stat .stat-value { font: 700 1.1rem var(--font-display); color: var(--ink); }
.student-detail-stat .stat-label {
font-size: .7rem; color: var(--ink2); text-transform: uppercase; letter-spacing: .4px;
}
/* ---------------- Knowledge base (docs-style layout) ---------------- */
.kb-shell { display: flex; height: calc(100vh - 53px); height: calc(100dvh - var(--topbar-h, 53px)); overflow: hidden; }
.actions .kb-contents-btn { display: none; }
.kb-backdrop { position: fixed; inset: var(--topbar-h, 53px) 0 0; background: rgba(22, 24, 27, .45); z-index: 80; }
.kb-sidebar {
width: 260px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line);
padding: 20px 16px; overflow-y: auto;
}
.kb-sidebar h2 {
font-family: var(--font-display); font-size: .75rem; letter-spacing: .5px; text-transform: uppercase;
color: var(--ink2); margin: 0 0 12px;
}
.kb-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-nav-list .kb-nav-list { margin: 2px 0 2px 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.kb-nav-btn {
width: 100%; text-align: left; background: none; border: none; border-radius: 8px;
padding: 9px 12px; font: 500 .9rem var(--font-body); color: var(--ink);
display: flex; align-items: center; gap: 6px;
}
.kb-nav-btn:hover { background: var(--surface2); }
.kb-nav-btn.active { background: var(--teal); color: #fff; font-weight: 600; }
.kb-nav-btn span { flex: 1; }
.kb-nav-btn .difficulty-tag { flex-shrink: 0; font-size: .62rem; padding: 2px 7px; }
.kb-nav-btn.active .difficulty-tag { background: rgba(255,255,255,.25); color: #fff; }
.kb-nav-chevron {
width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s ease; color: var(--ink2);
}
.kb-nav-btn.active .kb-nav-chevron { color: #fff; }
.kb-nav-node.expanded > .kb-nav-btn .kb-nav-chevron { transform: rotate(90deg); }
.kb-nav-node:not(.expanded) > .kb-nav-list { display: none; }
.kb-search { position: relative; margin-bottom: 16px; }
.kb-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink2); width: 16px; height: 16px; }
.kb-search input {
width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px;
padding: 9px 10px 9px 32px; font: .85rem var(--font-body); background: var(--surface2);
}
.kb-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.kb-search-results { display: flex; flex-direction: column; gap: 8px; }
.kb-search-result {
display: block; width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--line);
border-radius: 8px; padding: 10px 12px; cursor: pointer; font: inherit;
}
.kb-search-result:hover { border-color: var(--teal); }
.kb-search-result-path { font-size: .7rem; color: var(--ink2); margin-bottom: 2px; }
.kb-search-result-title { font-weight: 600; font-size: .9rem; margin-bottom: 3px; color: var(--ink); }
.kb-search-result-title .difficulty-tag { font-size: .62rem; padding: 2px 7px; vertical-align: middle; margin-left: 4px; }
.kb-search-result-snippet { font-size: .8rem; color: var(--ink2); line-height: 1.5; }
.kb-search-empty { color: var(--ink2); font-size: .85rem; margin: 0; }
.kb-search-results mark, .kb-content mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.kb-main { flex: 1; overflow-y: auto; padding: 32px 40px; }
.kb-article { max-width: 820px; }
.kb-breadcrumb { font-size: .8rem; color: var(--ink2); margin: 0 0 8px; }
.kb-breadcrumb strong { color: var(--ink); }
.kb-difficulty-row:empty { display: none; }
.kb-difficulty-row { margin: 0 0 16px; }
.kb-content h1 { font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 .6em; }
.kb-content h2 { font-family: var(--font-display); font-size: 1.3rem; margin-top: 1.8em; }
.kb-content h3 { font-family: var(--font-display); font-size: 1.05rem; margin-top: 1.6em; }
.kb-content p { line-height: 1.7; }
.kb-content a { color: var(--teal); }
.kb-content code { font-family: var(--font-mono); background: var(--surface2); padding: 2px 6px; border-radius: 4px; font-size: .85em; }
.kb-content pre { background: var(--glass); color: #E6EDF7; padding: 16px; border-radius: 10px; overflow-x: auto; }
.kb-content pre code { background: none; padding: 0; }
.kb-content blockquote, .kb-content .callout {
border-left: 4px solid var(--amber); background: var(--amber-soft); padding: 12px 16px;
border-radius: 0 8px 8px 0; margin: 20px 0;
}
.kb-content img { max-width: 100%; border-radius: 8px; }
.kb-content ul, .kb-content ol { line-height: 1.7; }
.kb-content table, .kb-table {
width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: .9rem;
display: block; overflow-x: auto; /* narrow screens scroll the table, not the page */
}
.kb-content th, .kb-content td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kb-content thead th { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line); white-space: nowrap; }
.kb-content tbody tr:last-child td { border-bottom: none; }
.kb-content .kb-open-sample-btn {
display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
background: var(--teal); color: #fff; text-decoration: none;
font-family: var(--font-display); font-weight: 600; font-size: .95rem;
padding: 12px 20px; border-radius: 8px;
}
.kb-content .kb-open-sample-btn:hover { filter: brightness(1.08); }
/* Line-by-line code walkthroughs (server/seed/kb-curriculum-visuals.js).
These live here rather than as inline styles on the cells for one reason:
an inline style beats any media query, and the phone rules further down
restack these three columns into a stack. */
.kb-content table.kb-codewalk th.cw-n { text-align: right; }
.kb-content table.kb-codewalk td.cw-n {
color: var(--ink2); font-family: var(--font-mono); font-size: .8rem;
text-align: right; width: 2.6em; white-space: nowrap;
}
.kb-content table.kb-codewalk td.cw-c { width: 46%; }
.kb-content table.kb-codewalk td.cw-c code { white-space: pre; background: none; padding: 0; }
.kb-content table.kb-codewalk td.cw-s { color: var(--ink2); }
.kb-empty { color: var(--ink2); text-align: center; padding: 60px 20px; }
.kb-components-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 20px; }
.kb-component-card {
display: flex; flex-direction: column; align-items: center; gap: 6px;
width: 96px; padding: 10px 8px; background: var(--surface2); border: 1px solid var(--line);
border-radius: 10px; text-align: center;
}
.kb-component-card span { font-size: .75rem; color: var(--ink2); line-height: 1.3; }
.kb-wiring-diagram {
display: block; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 10px;
}
.kb-wiring-table { font-size: .86rem; }
.kb-wiring-table code { font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; }
.kb-wiring-table td:nth-child(4) { white-space: nowrap; }
.kb-wire-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.kb-power-notes li { margin-bottom: 8px; }
.kb-output-figure { margin: 12px 0 20px; max-width: 260px; }
.kb-output-illustration {
display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px 10px 0 0; border-bottom: none;
}
.kb-output-figure figcaption {
font-size: .8rem; color: var(--ink2); text-align: center; line-height: 1.4;
padding: 8px 10px; border: 1px solid var(--line); border-top: none; border-radius: 0 0 10px 10px;
}
/* Kit BOM tab: one card per kit - eyebrow / name / stat tiles up top, a
category-grouped parts table, and the kit's notes in an amber callout.
Same pattern as the KB wiring articles so the two read as one system. */
.bom-kit-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; margin-bottom: 4px; }
.bom-eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.bom-kit-head h2 { margin: 0; font-size: 1.3rem; }
.bom-sub { margin: 6px 0 0; color: var(--ink2); max-width: 62ch; font-size: .9rem; line-height: 1.5; }
.bom-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.bom-stat { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; min-width: 104px; }
.bom-stat b { display: block; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bom-stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.bom-toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; }
.bom-table td.bom-cat { background: var(--surface2); font-family: var(--font-display); font-weight: 600; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; padding: 7px 12px; }
.bom-table th.bom-qty, .bom-table td.bom-qty { text-align: right; white-space: nowrap; }
.bom-table td.bom-qty { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.bom-table td.bom-part { min-width: 180px; }
.bom-table td.bom-part b { font-weight: 600; }
.bom-table td.bom-spec, .bom-table td.bom-note { color: var(--ink2); font-size: .84rem; }
.bom-table td.bom-spec { min-width: 160px; }
.bom-table td.bom-note { min-width: 180px; }
.bom-table td.bom-cov { white-space: nowrap; }
.bom-bar { display: inline-block; width: 64px; height: 7px; border-radius: 4px; background: var(--teal-soft); vertical-align: middle; margin-right: 8px; overflow: hidden; }
.bom-bar i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.bom-bar.all i { background: var(--amber); }
.bom-cov span:last-child { font-family: var(--font-mono); font-size: .8rem; font-variant-numeric: tabular-nums; }
.bom-opt { display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #B5750A; background: var(--amber-soft); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.bom-actions { white-space: nowrap; text-align: right; }
.bom-actions .table-btn { padding: 4px; }
.bom-rules { margin-top: 14px; background: var(--surface2); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 0 10px 10px 0; padding: 10px 16px; font-size: .86rem; color: var(--ink2); }
.bom-rules strong { color: var(--ink); }
.bom-rules ul { margin: 6px 0 0; padding-left: 18px; }
.bom-rules li { margin: 3px 0; }
.bom-empty { color: var(--ink2); margin: 0; padding: 6px 0; }
.kb-ui-mockup { display: block; margin: 14px 0 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.kb-category-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* Block reference: one toolbox category, then its blocks drawn at real size.
The artwork is Blockly's own SVG (see server/seed/kb-block-svgs.js), so it is
whatever width the block is - hence the horizontal scroll on the wide ones
rather than squashing them out of proportion. */
.kb-block-cat { margin: 26px 0; padding: 2px 0 2px 16px; }
.kb-block-cat-head { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 1.05rem; }
.kb-content .kb-block-cat-head { margin-top: 0; }
.kb-block-cat-intro { margin: 0 0 6px; color: var(--ink2); font-size: .9rem; }
.kb-block-entry {
display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: flex-start;
padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.kb-block-entry:last-child { border-bottom: none; }
.kb-block-art { flex: 0 1 auto; max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
.kb-block-art svg.kb-block { display: block; }
.kb-block-copy { flex: 1 1 300px; min-width: 260px; font-size: .9rem; line-height: 1.6; color: var(--ink2); }
.kb-block-copy strong { display: block; color: var(--ink); margin-bottom: 2px; }
.kb-textarea {
width: 100%; min-height: 260px; border: 1.5px solid var(--line); border-radius: 8px;
padding: 12px; font: .85rem/1.5 var(--font-mono); background: var(--surface2); resize: vertical;
}
.field-block { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; margin: 14px 0; }
/* ---- Knowledge Base image uploads ---- */
.kb-drop {
border: 2px dashed var(--line); border-radius: 12px; padding: 20px 16px; text-align: center;
transition: border-color .15s ease, background .15s ease;
}
.kb-drop.is-over { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); }
.kb-drop p { margin: 6px 0 0; font-weight: 400; }
.kb-drop-icon { width: 30px; height: 30px; color: var(--ink2); }
.link-btn {
background: none; border: none; padding: 0; color: var(--teal);
font: inherit; text-decoration: underline; cursor: pointer;
}
.kb-upload { margin-top: 10px; }
.kb-upload-head { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink2); margin-bottom: 5px; }
.kb-upload-track { height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.kb-upload-bar { height: 100%; width: 0; border-radius: 999px; background: var(--teal); transition: width .18s ease; }
.kb-upload-bar.is-done { background: var(--teal); }
.kb-upload-bar.is-error { background: #DC2626; }
.kb-image-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-image-item {
display: flex; align-items: center; gap: 12px; padding: 8px;
border: 1px solid var(--line); border-radius: 10px; background: var(--surface2);
}
.kb-image-item img {
width: 56px; height: 42px; object-fit: cover; border-radius: 6px;
background: var(--surface); flex-shrink: 0;
}
.kb-image-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-image-meta code {
font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
background: none; padding: 0;
}
.kb-image-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* ---- Knowledge Base outliner ----
The Sections table doubles as a tree editor: rows carry their nesting as
indentation, a grip starts a drag, and a drop line shows both where the row
will land and - by how far it is indented - what it will land under. */
.kb-row .kb-grip-cell { width: 30px; padding-right: 0; }
.kb-grip {
color: var(--line); cursor: grab; padding: 2px; border-radius: 5px;
transition: color .12s ease, background .12s ease;
}
.kb-row:hover .kb-grip { color: var(--ink2); background: var(--surface2); }
.kb-grip:active { cursor: grabbing; }
/* The indent spacer is an element rather than padding so the guide line can
sit on it and show which parent a nested row belongs to. */
.kb-title-indent {
display: inline-block; height: 1.15em; vertical-align: middle;
border-left: 2px solid var(--line); margin-right: 0;
}
.kb-title-indent[style*="width:0px"] { border-left: none; }
.kb-title-cell { white-space: nowrap; }
.kb-move-cell { white-space: nowrap; }
.kb-move-cell .table-btn { padding: 4px; }
.table-btn[disabled] { opacity: .25; cursor: default; pointer-events: none; }
.kb-row { transition: background .12s ease, opacity .12s ease; }
.kb-row.is-dragging { opacity: .35; }
.kb-row.is-dragging .kb-grip { cursor: grabbing; }
/* One-row-tall marker with no border of its own, so it reads as a line drawn
between two rows rather than as another row. */
tr.kb-drop-line td { padding: 0 !important; border: none !important; height: 0; }
tr.kb-drop-line div {
height: 3px; border-radius: 3px; background: var(--teal);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
position: relative;
}
tr.kb-drop-line div::before {
content: ''; position: absolute; left: -5px; top: -3.5px;
width: 10px; height: 10px; border-radius: 50%; background: var(--teal);
}
.table-icon { display: inline-flex; align-items: center; color: var(--ink2); }
.table-icon.is-html { color: var(--amber); }
.table-icon.is-rich { color: var(--teal); }
.kb-editor-modes { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.kb-mode {
padding: 5px 12px; border: 1.5px solid var(--line); border-radius: 999px;
background: var(--surface); color: var(--ink2); font-size: .82rem; cursor: pointer;
}
.kb-mode.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.kb-editor-modes .hint { font-size: .8rem; }
.kb-html-source { min-height: 320px; font-size: .8rem; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.kb-editor {
background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden;
}
.kb-editor .ql-toolbar.ql-snow {
border: none; border-bottom: 1.5px solid var(--line); background: var(--surface2);
font-family: var(--font-body); border-radius: 8px 8px 0 0;
}
.kb-editor .ql-container.ql-snow { border: none; font-family: var(--font-body); font-size: .95rem; }
.kb-editor .ql-editor { min-height: 220px; line-height: 1.6; }
.kb-editor .ql-editor.ql-blank::before { color: var(--ink2); font-style: normal; }
@media (max-width: 900px) {
.auth-card { grid-template-columns: 1fr; }
.code-panel { width: 300px; }
/* Knowledge Base: the section tree becomes a drawer (kb.js toggles
.is-open from the Contents button in the topbar) so the article gets
the whole screen and the tree, however long, scrolls on its own. */
.actions .kb-contents-btn { display: inline-flex; }
.topbar-compact .actions .kb-contents-btn .btn-label { display: inline; } /* keep the word even on small phones */
.kb-sidebar {
position: fixed; top: var(--topbar-h, 53px); bottom: 0; left: 0; z-index: 85;
width: min(86vw, 340px); border-right: 1px solid var(--line);
box-shadow: 0 0 40px rgba(22, 24, 27, .25);
transform: translateX(-104%); transition: transform .22s ease;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.kb-sidebar.is-open { transform: none; }
.kb-main { padding: 20px 16px 48px; }
.kb-content h1 { font-size: 1.45rem; }
.kb-content h2 { font-size: 1.15rem; }
.kb-content pre { padding: 12px; font-size: .8rem; }
.kb-breadcrumb { line-height: 1.6; }
}
/* ---------------------------------------------------------------------
Knowledge Base article content on a phone.
The shell above already turns the section tree into a drawer. What is
left is the article itself, and three things in it do not survive a
360px screen on their own:
1. The diagrams. Each one is an inline