/*
* The qpkit app shell: every tool page is one top bar and then the tool,
* edge to edge, with no hero and no card around it.
*
*
* nav.js puts the qpkit mark first
* Audio Trimmer
* …
the tool's controls; scrolls sideways on a phone
* …
help and the main action, always in view
*
* the stage and a settings panel, each scrolling on its own
*
*
*
* or … one full-width column that scrolls with the page
*
* Load order on a page: tool-theme.css, media-tools.css (if used),
* app-shell.css, then the page's own sheet. Colours come from the
* tool-theme tokens, so html[data-theme="dark"] (see theme.js) restyles the
* shell and the shared controls in one place.
*/
:root {
--qp-bar-h: 64px;
--qp-side-w: 340px;
--qp-pad: 18px;
}
body.qp-app {
min-height: 100vh;
min-height: 100dvh;
margin: 0;
}
[hidden] { display: none !important; }
/* ---------- Bar ---------- */
.qp-bar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 8px;
height: var(--qp-bar-h);
padding: 0 14px 0 12px;
border-bottom: 1px solid var(--border, #ded8cd);
background: color-mix(in srgb, var(--bg, #f4f0e8) 86%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
backdrop-filter: blur(16px) saturate(1.2);
}
/* The mark nav.js seats in the bar. */
.qp-bar .qp-home {
flex: none;
width: 40px;
height: 40px;
border-radius: 11px;
box-shadow: 0 4px 14px rgba(25, 25, 24, .16);
}
.qp-bar .qp-home .__accessbox-mark { width: 38px; height: 38px; }
.qp-title {
flex: none;
margin: 0 6px 0 2px;
color: var(--text, #191918);
font-family: "Manrope", "Inter", system-ui, sans-serif;
font-size: 1.04rem;
font-weight: 800;
letter-spacing: -.035em;
line-height: 1;
white-space: nowrap;
}
.qp-title span { color: var(--ab-accent, #ff5c35); }
.qp-tools {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 8px;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.qp-tools::-webkit-scrollbar { display: none; }
.qp-actions {
display: flex;
flex: none;
align-items: center;
gap: 8px;
margin-left: auto;
}
.qp-spacer { flex: 1; }
/* Bar controls that only mean something once the tool has something loaded
(Undo, Start over, Export…) carry .qp-if-ready; the view that appears when
it has, carries data-qp-ready. No page script has to toggle them. */
body:not(:has([data-qp-ready]:not([hidden]))) .qp-if-ready { display: none !important; }
body:has([data-qp-ready]:not([hidden])) .qp-if-empty { display: none !important; }
.qp-sep {
flex: none;
width: 1px;
height: 24px;
background: var(--border, #ded8cd);
}
.qp-status {
overflow: hidden;
min-width: 0;
color: var(--muted, #6c6a63);
font-size: .74rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- Bar controls ---------- */
.qp-btn {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 12px;
border: 1px solid var(--border, #ded8cd);
border-radius: 10px;
color: var(--text, #191918);
background: var(--surface, #fffdf8);
cursor: pointer;
font: 650 .78rem/1 "Inter", system-ui, sans-serif;
text-decoration: none;
white-space: nowrap;
}
.qp-btn svg { width: 16px; height: 16px; flex: none; }
.qp-btn:disabled { opacity: .42; cursor: not-allowed; }
.qp-btn.is-icon { width: 36px; padding: 0; }
.qp-btn.is-icon svg { width: 17px; height: 17px; }
/* .btn-primary too, for page scripts that promote a button by toggling it. */
.qp-btn.is-primary,
.qp-btn.btn-primary {
border-color: var(--text, #191918);
color: var(--bg, #f4f0e8);
background: var(--text, #191918);
box-shadow: 0 6px 16px rgba(25, 25, 24, .14);
}
.qp-btn[aria-pressed="true"] {
border-color: color-mix(in srgb, var(--ab-accent) 45%, var(--border));
color: color-mix(in srgb, var(--ab-accent) 78%, var(--text));
background: color-mix(in srgb, var(--ab-accent) 11%, var(--surface));
}
@media (hover: hover) {
.qp-btn:hover:not(:disabled) { border-color: var(--border-hover, #aaa297); }
.qp-btn.is-primary:hover:not(:disabled),
.qp-btn.btn-primary:hover:not(:disabled) { border-color: var(--ab-accent); background: var(--ab-accent); color: #fff; }
}
/* A group: several quiet buttons in one outline, like a toolbar segment. */
.qp-group {
display: inline-flex;
flex: none;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--border, #ded8cd);
border-radius: 11px;
background: color-mix(in srgb, var(--surface-subtle, #f8f5ee) 80%, transparent);
}
.qp-group .qp-btn {
height: 30px;
border-color: transparent;
border-radius: 8px;
background: transparent;
box-shadow: none;
}
.qp-group .qp-btn.is-icon { width: 30px; }
.qp-group .qp-btn[aria-pressed="true"] {
border-color: transparent;
color: var(--text, #191918);
background: var(--surface, #fffdf8);
box-shadow: 0 1px 5px rgba(25, 25, 24, .1);
}
@media (hover: hover) {
.qp-group .qp-btn:hover:not(:disabled) { border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
}
.qp-group-label {
padding: 0 4px 0 8px;
color: var(--muted, #6c6a63);
font-size: .72rem;
font-weight: 600;
white-space: nowrap;
}
.qp-select {
height: 36px;
padding: 0 30px 0 11px;
border: 1px solid var(--border, #ded8cd);
border-radius: 10px;
color: var(--text, #191918);
background: var(--surface, #fffdf8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23928f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
cursor: pointer;
font: 600 .78rem "Inter", system-ui, sans-serif;
-webkit-appearance: none;
appearance: none;
}
/* ---------- Popover (help, menus) ---------- */
.qp-pop {
position: fixed;
z-index: 60;
width: min(360px, calc(100vw - 24px));
max-height: calc(100vh - var(--qp-bar-h) - 24px);
overflow: auto;
padding: 16px 18px;
border: 1px solid var(--border, #ded8cd);
border-radius: 14px;
color: var(--text, #191918);
background: var(--surface, #fffdf8);
box-shadow: 0 18px 50px rgba(25, 25, 24, .16);
font-size: .8rem;
line-height: 1.55;
}
.qp-pop h2 { margin: 0 0 8px; font-size: .9rem; letter-spacing: -.02em; }
.qp-pop h3 { margin: 14px 0 6px; color: var(--muted); font: 600 .64rem "DM Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.qp-pop p { margin: 0 0 8px; color: var(--text-secondary, #626159); }
.qp-pop p:last-child { margin-bottom: 0; }
.qp-keys { display: grid; gap: 6px; margin: 0; }
.qp-keys div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qp-keys dt { flex: none; margin: 0; }
.qp-keys dd { margin: 0; color: var(--muted); text-align: right; }
.qp-app kbd {
display: inline-block;
min-width: 22px;
padding: 2px 6px;
border: 1px solid var(--border, #ded8cd);
border-bottom-width: 2px;
border-radius: 6px;
color: var(--text-secondary, #626159);
background: var(--surface, #fffdf8);
font: 500 .66rem "DM Mono", ui-monospace, monospace;
text-align: center;
}
/* ---------- Workspace: stage and settings panel ---------- */
.qp-work {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--qp-side-w);
height: calc(100vh - var(--qp-bar-h));
height: calc(100dvh - var(--qp-bar-h));
}
.qp-work.is-side-left { grid-template-columns: var(--qp-side-w) minmax(0, 1fr); }
.qp-work.is-side-left .qp-side { order: -1; border-right: 1px solid var(--border, #ded8cd); border-left: 0; }
.qp-stage {
position: relative;
min-width: 0;
min-height: 0;
overflow: auto;
padding: var(--qp-pad);
}
.qp-side {
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: 4px var(--qp-pad) 28px;
border-left: 1px solid var(--border, #ded8cd);
background: color-mix(in srgb, var(--surface-subtle, #f8f5ee) 55%, transparent);
overscroll-behavior: contain;
}
/* An empty stage is one big drop target. */
.qp-stage > .dropzone {
height: 100%;
min-height: 340px;
}
/* ---------- Settings sections ---------- */
.qp-sec {
padding: 16px 0;
border-bottom: 1px solid var(--border, #ded8cd);
}
.qp-sec:last-child { border-bottom: 0; }
.qp-sec-title,
.qp-sec > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 11px;
color: var(--text-secondary, #56534d);
font: 600 .64rem/1.2 "DM Mono", ui-monospace, monospace;
letter-spacing: .085em;
text-transform: uppercase;
}
/* Inside a section a field's label is a label, not a second heading. */
.qp-sec .control-label,
.qp-sec .field label,
.qp-sec .control-section > label:first-child {
display: block;
margin: 0 0 7px;
color: var(--text-secondary, #56534d);
font: 650 .74rem/1.3 "Inter", system-ui, sans-serif;
letter-spacing: 0;
text-transform: none;
}
.qp-sec .range-head .control-label { margin-bottom: 0; }
.qp-sec .range-head { align-items: baseline; margin-bottom: 6px; }
.qp-sec > summary {
margin: 0;
cursor: pointer;
list-style: none;
}
.qp-sec > summary::-webkit-details-marker { display: none; }
.qp-sec > summary::after {
width: 7px;
height: 7px;
margin-right: 3px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
content: "";
opacity: .6;
transform: rotate(45deg) translateY(-2px);
transition: transform .18s;
}
.qp-sec:not([open]) > summary::after { transform: rotate(-45deg); }
details.qp-sec[open] > summary { margin-bottom: 12px; }
details.qp-sec:not([open]) { padding-bottom: 16px; }
/* A quiet text action, for a section heading's "Clear all" and the like. */
.qp-link {
padding: 2px 0;
border: 0;
color: color-mix(in srgb, var(--ab-accent) 80%, var(--text));
background: none;
cursor: pointer;
font: 700 .72rem "Inter", system-ui, sans-serif;
letter-spacing: 0;
text-transform: none;
}
.qp-link:disabled { color: var(--muted); cursor: default; opacity: .55; }
@media (hover: hover) {
.qp-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
}
/* ---------- Document layout ---------- */
.qp-doc {
width: 100%;
padding: var(--qp-pad) 20px 48px;
}
/* ---------- Phones and narrow windows ---------- */
@media (max-width: 840px) {
:root { --qp-side-w: 100%; --qp-pad: 12px; }
/* One column that scrolls with the page: the settings follow the stage,
and nothing between them is a scroll container, so a page's sticky
player or dock sticks to the window. */
.qp-work,
.qp-work.is-side-left {
display: block;
height: auto;
}
.qp-stage { overflow: visible; }
.qp-side,
.qp-work.is-side-left .qp-side {
overflow: visible;
border-top: 1px solid var(--border, #ded8cd);
border-right: 0;
border-left: 0;
}
.qp-stage > .dropzone { height: auto; min-height: 58vh; }
}
/* A phone's bar is two rows: the mark, title and main actions, then the
tool's controls across the full width (scrolling sideways if they must),
so no control is cut off at the edge of a single crowded row. */
@media (max-width: 640px) {
.qp-bar {
flex-wrap: wrap;
height: auto;
min-height: var(--qp-bar-h);
row-gap: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
/* The fade only shows on a control that runs past the edge, which says
the row scrolls. */
.qp-tools {
order: 3;
flex: 1 0 100%;
padding-right: 20px;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.qp-tools:empty { display: none; }
/* The first row never wraps its actions: the title gives way instead, and
is cut short rather than pushing a button onto a row of its own. */
.qp-title {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.qp-actions { margin-left: 0; }
/* Secondary actions with an icon keep only the icon, whatever label a
page script writes into them; the main action keeps its words. */
.qp-actions .qp-btn:not(.is-icon):not(.is-primary):not(.btn-primary):has(svg) {
width: 36px;
gap: 0;
padding: 0;
font-size: 0;
}
}
@media (max-width: 520px) {
:root { --qp-bar-h: 56px; }
.qp-bar { gap: 6px; padding-right: 8px; padding-left: 8px; }
.qp-bar .qp-home { width: 38px; height: 38px; }
.qp-bar .qp-home .__accessbox-mark { width: 36px; height: 36px; }
.qp-title { font-size: .98rem; }
.qp-btn { padding: 0 10px; }
.qp-btn .qp-wide { display: none; }
.qp-doc { padding-right: 12px; padding-left: 12px; }
}
/* ---------- Dark theme ----------
A page opts in with theme.js; these redefine the tool-theme and
media-tools tokens, and the paper colours those sheets hard-code. */
html[data-theme="dark"] {
color-scheme: dark;
background: #131312;
--media-ink: #f1ede4;
--media-muted: #9a958a;
--media-line: #34322e;
--media-surface: rgba(28, 27, 25, .92);
}
html[data-theme="dark"] body.__accessbox-tool {
--bg: #131312;
--paper: #131312;
--surface: #1c1b19;
--surface-strong: #232220;
--surface-subtle: #181816;
--card: #1c1b19;
--ink: #f1ede4;
--text: #f1ede4;
--text-secondary: #bdb8ad;
--text-dim: #bdb8ad;
--muted: #9a958a;
--quiet: #7c776e;
--faint: #7c776e;
--text-muted: #7c776e;
--border: #34322e;
--line: #34322e;
--line2: #45433d;
--border-hover: #5d5a52;
}
html[data-theme="dark"] body.__accessbox-tool input,
html[data-theme="dark"] body.__accessbox-tool textarea,
html[data-theme="dark"] body.__accessbox-tool select { background-color: #181816; }
html[data-theme="dark"] body.__accessbox-tool input::placeholder,
html[data-theme="dark"] body.__accessbox-tool textarea::placeholder { color: #6f6b63; }
html[data-theme="dark"] body.__accessbox-tool::-webkit-scrollbar-thumb,
html[data-theme="dark"] body.__accessbox-tool *::-webkit-scrollbar-thumb { background: #45433d; background-clip: padding-box; }
html[data-theme="dark"] .qp-btn.is-primary { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .qp-pop { box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .btn { color: var(--media-ink); background: #1f1e1c; }
html[data-theme="dark"] .btn-primary { border-color: #f1ede4; color: #191918; background: #f1ede4; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .segmented { background: #121211; }
html[data-theme="dark"] .segmented button { color: #9a958a; }
html[data-theme="dark"] .segmented button[aria-pressed="true"] { color: #f1ede4; background: #2b2a27; box-shadow: 0 2px 9px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .control-label,
html[data-theme="dark"] .control-section > label:first-child { color: #a9a499; }
html[data-theme="dark"] .control-help { color: #8b867c; }
html[data-theme="dark"] .media-select,
html[data-theme="dark"] .media-input { background: #181816; }
html[data-theme="dark"] .drop-icon { background: color-mix(in srgb, var(--media-soft) 70%, #1c1b19); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .dropzone { border-color: #3d3b36; background-color: rgba(255, 253, 248, .02); }
@media (hover: hover) {
html[data-theme="dark"] .btn:hover:not(:disabled) { border-color: #5d5a52; }
html[data-theme="dark"] .btn-primary:hover:not(:disabled) { border-color: var(--media-accent); color: #0f0f0e; background: var(--media-accent); }
}
@media (prefers-reduced-motion: reduce) {
.qp-sec > summary::after { transition: none; }
}