/*
* studio.css — the tool's own appearance.
*
* Deliberately UNLAYERED. In the author origin, unlayered normal declarations beat
* every layered normal declaration whatever the specificity, so these rules sit
* above armor.css and above anything that ever gets injected into the armor layers.
* Everything is rooted at #asas-studio so nothing leaks outward either.
*
* The palette is a graded grey scale, not a set of one-off greys: nine steps from
* paper to ink, so panels, rules and text always sit a predictable distance apart.
*/
#asas-studio {
--g0: #ffffff;
--g1: #f7f6f3;
/* The ground the cards sit ON. A step darker than the page and warmer with
it — beige rather than a grey — so the cards read as objects laid on a
surface instead of holes cut out of one. */
--grid: #f3efe5;
--g2: #eeece7;
--g3: #e2dfd8;
--g4: #cfccc3;
--g5: #a8a49a;
--g6: #78746b;
--g7: #4a4741;
--g8: #24221e;
--g9: #14140f;
--rail: 300px;
/* 352 before the stack grew a grip and two move buttons; at 352 the block name was
cut to five characters, which is not a name. The preview loses 32px and does not
notice — it is scaled to fit either way. */
--stack: 384px;
--bar: 58px;
--r: 3px;
--sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
position: fixed;
inset: 0;
display: grid;
grid-template-rows: var(--bar) 1fr;
font-family: var(--sans);
/* Was 13px. A tool is denser than a marketing page, but 13px base put the facet
counts at 11px and the layout tags at 10px, which is smaller than anyone should
have to read to use the thing. */
font-size: 15px;
line-height: 1.5;
color: var(--g9);
background: var(--g1);
-webkit-font-smoothing: antialiased;
}
#asas-studio *,
#asas-studio *::before,
#asas-studio *::after { box-sizing: border-box; }
/*
* The reset for form controls, wrapped in :where() so it contributes NO specificity.
*
* This is the second time this selector has caused a silent bug. Written as
* `#asas-studio button { color: inherit; background: none }` it scores (1,0,1), which
* beats every class rule in this file — so `.asas-facet:hover { background: … }` and
* `.asas-modes button[aria-pressed="true"] { background: … }` were both being written
* and then thrown away. The active mode was never highlighted and the rail rows never
* lit up on hover; both read as "the studio has no navigation", which is exactly what
* it was reported as.
*
* :where() zeroes the specificity, so these are now a floor that anything can override.
*/
:where(#asas-studio) button,
:where(#asas-studio) input,
:where(#asas-studio) select {
font: inherit;
}
:where(#asas-studio) button { color: inherit; background: none; border: 0; }
/* ------------------------------------------------------------------ top bar -- */
.asas-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 0 14px;
background: var(--g9);
color: var(--g0);
border-bottom: 1px solid var(--g9);
}
/* The mark is a link home, wearing the brand: the orange triangle first — the same
mark the site header carries — then the wordmark, then the Arabic. */
.asas-mark {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
font-size: 14px;
color: inherit;
text-decoration: none;
padding: 6px 10px 6px 4px;
border-radius: var(--r);
}
.asas-mark:hover { background: var(--g8); }
.asas-mark .tri {
display: inline-flex;
width: 16px;
height: 16px;
flex: none;
}
.asas-mark .tri svg { width: 100%; height: 100%; display: block; }
/* Stated in CSS, not only as SVG attributes: the armor reset sits in the author
cascade, and any author rule outranks a presentation attribute — which silently
painted this triangle black-on-black and the person icon invisible. */
.asas-mark .tri svg,
.asas-mark .tri svg path {
stroke: #C25121;
fill: none;
/* 2.6, not 2: at 16px the viewBox scales strokes by two thirds, and a 1.3px line
anti-aliased against the black bar reads as rust, not as the brand orange. */
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.asas-mark small {
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--g5);
font-size: 12.5px;
}
/*
* The language switch. A segmented pair, not a toggle: one lit, one not, and
* pressing either says which language you want rather than which one you are in.
* The single toggling button it replaces read as its own opposite — see
* langSwitch() in studio.js.
*
* It carries a lit border rather than only a fill, because the bar is already
* near-black and a fill alone at this size reads as a shadow.
*/
.asas-lang {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--g7);
border-radius: var(--r);
overflow: hidden;
flex: 0 0 auto;
}
.asas-langopt {
padding: 5px 11px;
font-size: 13px;
line-height: 1.5;
color: var(--g5);
background: var(--g8);
cursor: pointer;
white-space: nowrap;
border: 0;
border-inline-end: 1px solid var(--g7);
}
.asas-langopt:last-child { border-inline-end: 0; }
.asas-langopt:hover { color: var(--g0); background: var(--g7); }
.asas-langopt.is-on {
color: var(--g9);
background: var(--g0);
font-weight: 600;
}
/* Arabic at 13px sits visually smaller than Latin at 13px; a point back and a
touch of line makes the pair read as one control rather than two sizes. */
.asas-langopt[data-lang="ar"] { font-size: 14px; }
.asas-modes { display: flex; gap: 4px; margin-left: 4px; }
.asas-modes button {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1px solid transparent;
color: var(--g4);
padding: 7px 14px 7px 9px;
border-radius: var(--r);
cursor: pointer;
letter-spacing: .01em;
white-space: nowrap;
}
.asas-modes .lb { display: inline-flex; white-space: nowrap; }
/* A flex container drops the leading space inside a flex item, so "Build" and
" & colour" rendered as "Build& colour". */
.asas-modes .amp { margin-left: .3em; }
/* Numbered, because Browse and Build are steps one and two of the same job rather
than two unrelated tabs. */
.asas-modes button .n {
display: grid;
place-items: center;
width: 20px; height: 20px;
border-radius: 50%;
border: 1px solid var(--g7);
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--g5);
}
.asas-modes button:hover { color: var(--g0); background: var(--g8); }
.asas-modes button:hover .n { border-color: var(--g5); color: var(--g2); }
.asas-modes button[aria-pressed="true"] { background: var(--g0); color: var(--g9); font-weight: 600; }
.asas-modes button[aria-pressed="true"] .n { border-color: var(--g9); color: var(--g9); }
/* Blocks | Pages | Journal — the three faces of Browse, one segmented control. */
.asas-tabs {
display: inline-flex;
padding: 3px;
border: 1px solid var(--g7);
border-radius: 999px;
margin-left: 6px;
}
.asas-tabs button {
padding: 4px 13px;
border-radius: 999px;
color: var(--g4);
font-size: 13.5px;
cursor: pointer;
white-space: nowrap;
}
.asas-tabs button:hover { color: var(--g0); }
.asas-tabs button[aria-pressed="true"] { background: var(--g0); color: var(--g9); font-weight: 600; }
#asas-studio[data-mode="build"] .asas-tabs { display: none; }
.asas-back {
display: inline-flex;
align-items: center;
color: var(--g4);
text-decoration: none;
padding: 6px 4px;
white-space: nowrap;
}
.asas-back:hover { color: var(--g0); text-decoration: underline; text-underline-offset: 3px; }
.asas-back:focus-visible { outline: 2px solid var(--g0); outline-offset: 2px; border-radius: var(--r); }
/* The single global search, in the header, 44px tall so it clears the minimum
pointer target on its own without a padded wrapper. */
.asas-search {
flex: 0 1 298px;
max-width: 298px;
min-width: 180px;
position: relative;
}
.asas-search input {
width: 100%;
height: 44px;
background: var(--g8);
border: 1px solid var(--g7);
border-radius: var(--r);
color: var(--g0);
font: inherit;
font-size: 14px;
padding: 0 12px 0 36px;
outline: none;
text-overflow: ellipsis;
}
.asas-search input:hover { border-color: var(--g6); }
.asas-search input:focus-visible {
border-color: var(--g0);
outline: 2px solid var(--g0);
outline-offset: 1px;
}
.asas-search input:focus { border-color: var(--g4); }
.asas-search input::placeholder { color: var(--g6); }
.asas-search::before {
content: "";
position: absolute;
left: 10px; top: 50%;
width: 11px; height: 11px;
margin-top: -7px;
border: 1.5px solid var(--g5);
border-radius: 50%;
}
/* The results header: what is on screen, and the order it is in. Nothing that
narrows the grid may live here — those are down the left panel. */
.asas-gridhead {
display: flex;
align-items: center;
gap: 12px;
margin: 0 2px 12px;
}
.asas-gridhead .asas-count { margin: 0; flex: 1; min-width: 0; }
.asas-sort { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* The same select Sort wears, narrower and without a word beside it: "3 columns"
names itself, and a second uppercase label in the head was one label too many. */
.asas-cols { display: flex; align-items: center; flex: 0 0 auto; }
.asas-colssel { min-width: 132px; }
.asas-sortlbl {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--g6);
}
.asas-sortsel {
height: 44px;
min-width: 178px;
padding: 0 34px 0 12px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
background-image: linear-gradient(45deg, transparent 50%, var(--g7) 50%),
linear-gradient(135deg, var(--g7) 50%, transparent 50%);
background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
color: var(--g9);
font: inherit;
font-size: 13.5px;
cursor: pointer;
appearance: none;
}
.asas-sortsel:hover { border-color: var(--g6); }
.asas-sortsel:focus-visible { outline: 2px solid var(--g9); outline-offset: 1px; border-color: var(--g9); }
/* Who you are, not something you press: a person in a ring and a name, quiet until
hovered. Underneath it is still a button — it opens the account sheet — but nothing
about it borrows the How-it-works treatment any more. */
.asas-account {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 8px;
border: 0;
background: transparent;
color: var(--g3);
cursor: pointer;
border-radius: var(--r);
white-space: nowrap;
}
.asas-account:hover { color: var(--g0); background: var(--g8); }
.asas-account:focus-visible { outline: 2px solid var(--g0); outline-offset: 1px; }
.asas-accicon {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border: 1px solid var(--g6);
border-radius: 50%;
flex: none;
}
.asas-accicon svg { width: 13px; height: 13px; display: block; }
.asas-accicon svg,
.asas-accicon svg * {
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
}
.asas-account.is-in .asas-accicon { border-color: var(--g3); }
.asas-account.is-in { color: var(--g0); }
.asas-spacer { flex: 1; }
.asas-bar .asas-btn {
background: var(--g8);
border: 1px solid var(--g7);
color: var(--g2);
}
.asas-bar .asas-btn:hover { background: var(--g7); color: var(--g0); }
.asas-bar .asas-btn.is-key { background: var(--g0); color: var(--g9); border-color: var(--g0); font-weight: 600; }
.asas-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid var(--g4);
background: var(--g0);
border-radius: var(--r);
cursor: pointer;
white-space: nowrap;
}
.asas-btn:hover { background: var(--g2); }
.asas-btn:disabled { opacity: .45; cursor: default; }
.asas-btn.is-small { padding: 4px 9px; font-size: 13px; }
/* The house heading rule, in the tool as well as on the pages it builds. H5 and H6 are
left alone; the studio does not use them. .asas-mark is the wordmark and sets its own
case, and .ar spans hold Arabic, which uppercase does not touch anyway. */
#asas-studio h1,
#asas-studio h2,
#asas-studio h3,
#asas-studio h4 {
text-transform: uppercase;
}
/* -------------------------------------------------------------------- body -- */
.asas-body {
display: grid;
min-height: 0;
grid-template-columns: var(--rail) 1fr;
}
/*
* min-width: 0 on the two right-hand columns, and it is not cosmetic.
*
* A `1fr` grid track has an automatic minimum size, so it can never be narrower
* than its own content. The Build preview writes an explicit pixel width onto the
* iframe — the width it measured the stage to be — and that width then became the
* column's floor. Shrink the window and the column stayed where it was: measured,
* a 2400px session dragged down to 1280 kept a 2400px body, and everything on the
* right of the two bars (Open full page, Back to the site) sat off the screen with
* no scrollbar to reach it. The panel could grow and never shrink, because the
* observer that resizes it was reading a width its own last write had pinned.
*
* Zero here breaks that loop: the column is free to shrink, the stage then reports
* the space it actually has, and the iframe is re-fitted to it.
*/
.asas-main,
.asas-view,
.asas-stage { min-width: 0; }
/* The build body is three children now — the face switch, the column, the
preview — placed by name so the same markup can be a desktop split and a
phone's one-at-a-time without the JS knowing which it is. */
#asas-studio[data-mode="build"] .asas-body {
grid-template-columns: var(--stack) 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"tabs view"
"stack view";
}
#asas-studio[data-mode="build"] .asas-objtabs { grid-area: tabs; }
#asas-studio[data-mode="build"] .asas-stack { grid-area: stack; }
#asas-studio[data-mode="build"] .asas-view { grid-area: view; }
/* ------------------------------------------------------------- filter rail -- */
/*
* Rooms in a house, not thirty-four words in alphabetical order. Each group has a
* heading — The house, The echo, The market, Pieces — and each room is two lines:
* the house name (Latin + Arabic, one line) and the house English with the count
* under it. No map word ever appears here; Hero, CTA and FAQ are for search.
*/
.asas-rail {
overflow-y: auto;
background: var(--g0);
border-right: 1px solid var(--g3);
padding: 10px 0 40px;
}
.asas-rail h3,
.asas-railhead {
margin: 0;
padding: 16px 14px 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--g6);
display: flex;
align-items: baseline;
gap: 8px;
}
.asas-rail h3:first-child { padding-top: 6px; }
.asas-railhead .ar { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--g6); }
/* Pieces is a drawer: shut by default, a button to open it. */
.asas-drawer {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 2px 4px 2px 0;
margin-left: -2px;
border-radius: var(--r);
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
}
.asas-drawer:hover { color: var(--g9); }
.asas-drawer:focus-visible { outline: 2px solid var(--g9); outline-offset: 1px; }
.asas-drawer .chev { font-size: 11px; width: 10px; display: inline-block; }
.asas-drawer .ar { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.asas-facet {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
padding: 6px 14px 7px;
border: 0;
background: none;
text-align: left;
cursor: pointer;
border-left: 2px solid transparent;
transition: background .12s ease, border-color .12s ease;
line-height: 1.35;
}
.asas-facet:hover { background: var(--g2); border-left-color: var(--g5); }
.asas-facet:focus-visible { outline: 2px solid var(--g9); outline-offset: -2px; background: var(--g2); }
.asas-facet[aria-pressed="true"] { background: var(--g2); border-left-color: var(--g9); }
.asas-facet .nm { display: flex; align-items: baseline; gap: 7px; font-size: 16px; font-weight: 500; color: var(--g9); }
.asas-facet:hover .nm,
.asas-facet[aria-pressed="true"] .nm { font-weight: 600; }
.asas-facet .nm .ar { font-size: 15px; font-weight: 500; }
.asas-facet[aria-pressed="true"] .nm .ar { font-weight: 600; }
/* The gloss and the count, one quiet line. */
.asas-facet .ty {
color: var(--g7);
font-size: 12.5px;
font-weight: 400;
letter-spacing: .01em;
}
.asas-facet:hover .ty,
.asas-facet[aria-pressed="true"] .ty { color: var(--g8); }
/* ------------------------------------------------------------------ chips -- */
/* A zero-count option stays on the list and goes grey. Removing it would make the
panel rearrange itself under the reader's hand and hide the shape of the library. */
.asas-facet.is-off {
background: var(--g2);
cursor: not-allowed;
}
.asas-facet.is-off .nm,
.asas-facet.is-off .ty { color: var(--g5); font-weight: 500; }
.asas-facet.is-off:hover { background: var(--g2); border-left-color: transparent; }
/* The panel names the library it filters and prints the real total under it. */
.asas-paneltitle { padding: 14px 14px 4px; }
.asas-paneltitle h2 {
margin: 0;
font-size: 17px;
font-weight: 650;
letter-spacing: -.01em;
color: var(--g9);
}
.asas-paneltitle p {
margin: 3px 0 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
font-size: 12.5px;
color: var(--g6);
font-variant-numeric: tabular-nums;
}
.asas-paneltitle p .on {
padding: 1px 7px;
border-radius: 999px;
background: var(--g2);
color: var(--g8);
font-weight: 600;
font-variant-numeric: normal;
}
/* Clear sits at the foot of the panel, not as a permanent strip of chips over the
grid, and it is quiet until there is something to clear. */
.asas-railclearwrap { padding: 14px 14px 4px; margin-top: 8px; border-top: 1px solid var(--g3); }
.asas-railclear {
width: 100%;
min-height: 42px;
padding: 10px 12px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
color: var(--g9);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
.asas-railclear:hover { background: var(--g2); border-color: var(--g6); }
.asas-railclear:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
.asas-railclear[disabled] { color: var(--g5); border-color: var(--g3); cursor: not-allowed; background: var(--g1); }
/* ------------------------------------------------------------ catalog grid -- */
.asas-main { overflow-y: auto; padding: 16px; min-height: 0; background: var(--grid); }
.asas-count {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 2px 12px;
color: var(--g6);
}
.asas-count b { color: var(--g9); font-variant-numeric: tabular-nums; }
/*
* Five across on a desktop. An owner decision: four made each card too big, and the
* grid is how you FIND a façade — the click-to-full lightbox is how you judge one.
* Two on a phone, three on a tablet, five with the rail from 1024px up. Fixed tracks,
* not auto-fill with a minimum: `minmax(230px, 1fr)` collapsed to three beside the
* rail, which is the thing this replaces.
*/
/* 16px, not 12. A tall page cover is a big grey rectangle on a warm grey page,
and at 12px two of them side by side read as one wide picture. The gap is half
of what separates them; the card's own shadow is the other half. */
/* How many cards across is the owner's choice, one to six, carried on the root as
data-cols. repeat() needs a literal integer — min() is not allowed where a count
goes — so the six are written out rather than computed, and the narrow-screen
caps are written as the subset they actually lower. A cap never RAISES a choice:
asking for one column gives one column at any width. */
.asas-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
#asas-studio[data-cols="1"] .asas-grid { grid-template-columns: minmax(0, 1fr); }
#asas-studio[data-cols="2"] .asas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#asas-studio[data-cols="3"] .asas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#asas-studio[data-cols="4"] .asas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#asas-studio[data-cols="5"] .asas-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#asas-studio[data-cols="6"] .asas-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* A card below about 200px wide stops being a picture of a block and becomes a
smudge, so the window has the last word. */
@media (max-width: 1180px) {
#asas-studio[data-cols="5"] .asas-grid,
#asas-studio[data-cols="6"] .asas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
#asas-studio[data-cols="4"] .asas-grid,
#asas-studio[data-cols="5"] .asas-grid,
#asas-studio[data-cols="6"] .asas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
#asas-studio[data-cols="3"] .asas-grid,
#asas-studio[data-cols="4"] .asas-grid,
#asas-studio[data-cols="5"] .asas-grid,
#asas-studio[data-cols="6"] .asas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
#asas-studio[data-cols] .asas-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Pages: the same five tracks; the covers are tall. */
.asas-grid.is-pages .asas-shotwrap.is-tall { aspect-ratio: 2 / 3; }
.asas-gridsub {
grid-column: 1 / -1;
margin: 18px 2px 2px;
padding-top: 14px;
border-top: 1px solid var(--g3);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--g7);
}
.asas-gridsub .sub { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--g6); }
.asas-more { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
/* The sentinel that loads the next slice when it scrolls into view. It still
reads "Show more" for a keyboard, but sits as a quiet full-width line. */
.asas-more.is-auto {
justify-self: stretch;
text-align: center;
margin: 4px 0 24px;
padding: 12px;
color: var(--g6);
background: transparent;
border: 1px dashed var(--g3);
font-weight: 500;
}
.asas-more.is-auto:hover { background: var(--g1); }
/* A recipe's cover: its rooms stacked top to bottom in one tall frame — the page as
a page, not one brick's screenshot. Every strip is the same height, so a ten-room
page and a four-room page read at the same scale. */
.asas-cover {
aspect-ratio: 2 / 3;
background: var(--g2);
border-bottom: 1px solid var(--g3);
display: grid;
grid-auto-rows: 1fr;
overflow: hidden;
position: relative;
}
/* The real composed-page shot laid over the strips; strips are the fallback. */
.asas-cover img.real {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
filter: var(--asas-cardgray, none);
}
.asas-cover img {
filter: var(--asas-cardgray, none);
width: 100%;
height: 100%;
/* A grid item's automatic minimum size is min-content, which for an is its
intrinsic height (~206px at this width). That floors each `grid-auto-rows: 1fr`
track at the image height, so the fr never shrinks and ten rooms stack ~2060px
tall — clipped by overflow to nav + hero over a grey band. min-height:0 lets the
1fr tracks divide the frame evenly so every room reads as one thin strip. */
min-height: 0;
min-width: 0;
object-fit: cover;
object-position: center;
display: block;
border-bottom: 1px solid var(--g0);
}
.asas-card.is-recipe .asas-shotwrap { background: var(--g1); }
.asas-cardmeta.is-page .ar { color: var(--g6); font-size: 17px; }
.asas-cardmeta .two { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.asas-cardmeta .two b { font-size: 15.5px; }
.asas-cardmeta .two small { color: var(--g6); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asas-cardadd.is-open { opacity: 1; font-size: 14px; }
/* The rule above All rooms. */
.asas-railsep {
border-top: 1px solid var(--g4);
margin: 14px 2px 2px;
}
.asas-rail h3 .ar {
font-weight: 400;
color: var(--g9);
margin-left: 6px;
}
.asas-card {
position: relative;
display: flex;
flex-direction: column;
/*
* NO PLATE. The card used to be a white rectangle with a border, and the name
* sat on the bottom of it — which made a grid of blocks read as a grid of forms
* rather than a grid of pictures. The owner asked for the panel under the name
* to go: the shot is the object, and the name is written on the paper beneath
* it, with nothing behind it and nothing round it.
*
* What separates one card from the next is now the SHOT's own shade (below),
* not an edge. A border at rest would only draw a frame round the text.
*/
background: none;
border: 0;
cursor: pointer;
text-align: left;
padding: 0;
transition: box-shadow .16s, transform .16s cubic-bezier(.2, 0, 0, 1);
}
/*
* Hover brings the card FORWARD — shot and name together, because they are one card
* even when only one of them is painted.
*
* It was a 2px lift, which reads as a nudge rather than as depth. It is a lift and a
* small scale now: 3.5% is enough to be felt and small enough that a 3-column card
* grows about thirteen pixels, which the grid's own 16px padding absorbs — .asas-main
* scrolls, and a scrolling box clips, so anything larger would shave the cards at the
* edges of the room.
*
* `z-index: 2` is the half of this that is easy to forget: the cards are positioned
* and otherwise all at auto, so a card growing without it slides UNDER its
* right-hand neighbour and the effect reads as a glitch rather than as lifting.
*
* Guarded on (hover: hover). On a touch screen :hover latches after a tap — the card
* would stay big until something else was touched — and there is no pointer to
* explain why.
*/
@media (hover: hover) {
.asas-card:hover { transform: translateY(-6px) scale(1.035); z-index: 2; }
}
.asas-card:hover .asas-shotwrap {
box-shadow:
0 3px 6px rgba(20, 20, 15, .08),
0 22px 44px -18px rgba(20, 20, 15, .34);
}
/* Chosen is the one state that still gets an edge, and the owner said so: the ring
goes round the SHOT, inside its own corner radius, so a picked card is a picture
with a mark on it rather than a flat orange rectangle. */
/*
* The chosen ring, drawn as a pseudo-element and not as anything simpler.
*
* Two things were tried and neither shows: an INSET SHADOW paints beneath the
* element's own content, and the shot's image fills the box edge to edge; an
* OUTLINE with a negative offset is clipped away by the wrap's own overflow:hidden
* (computed style says `2px solid #C25121` and not one pixel of it reaches the
* screen — measured, on all four edges). A positioned child inside the padding box
* is neither hidden nor clipped.
*/
.asas-card.is-picked .asas-shotwrap { position: relative; }
.asas-card.is-picked .asas-shotwrap::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid #C25121;
border-radius: inherit;
pointer-events: none;
}
.asas-card.is-picked:hover .asas-shotwrap {
box-shadow:
0 3px 6px rgba(20, 20, 15, .08),
0 22px 44px -18px rgba(20, 20, 15, .34);
}
/* Someone who has asked their system for less motion still gets the shadow, which
says the same thing without moving anything. Later in the file than the rule
above and at the same specificity, so this wins. */
@media (prefers-reduced-motion: reduce) {
.asas-card { transition: border-color .12s, box-shadow .12s; }
.asas-card:hover { transform: none; }
}
.asas-shotwrap {
aspect-ratio: 16 / 11;
background: var(--g2);
overflow: hidden;
/* The corners and the shade used to belong to the card. They belong here now:
* this is the only painted thing left, so it is the thing that has to sit ON the
* page rather than be a region of it. Two soft casts, near-black at low alpha —
* a 1px contact shadow that sets it down, and a wide light one that lifts it off
* the warm paper. The border-bottom is gone with the plate it used to divide. */
border-radius: var(--r);
box-shadow:
0 1px 2px rgba(20, 20, 15, .06),
0 6px 16px -10px rgba(20, 20, 15, .18);
transition: box-shadow .16s;
display: grid;
place-items: center;
}
.asas-shotwrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
filter: var(--asas-cardgray, none);
}
/* No card image yet: a hatched plate rather than an empty hole, so a missing
thumbnail reads as "not shot yet" and not as "broken template". */
.asas-shotwrap.is-blank {
background-image: repeating-linear-gradient(45deg, var(--g2) 0 6px, var(--g3) 6px 12px);
color: var(--g6);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
}
/* One line of chrome under the shot: `Wajha 012`, the drawing, and the plus that
floats over the image. Not a caption block. */
.asas-cardmeta { padding: 9px 2px 2px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.asas-cardmeta b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Arabic sits smaller than Latin at the same nominal size — finer strokes, no
ascender run — so on a card it takes two pixels more than the Latin beside it
and one step of weight, the same 500-to-600 the rail already uses when a room
is chosen. */
.asas-cardmeta .ar { color: var(--g5); font-size: 17px; font-weight: 700; }
/* The house name on a card: Latin and Arabic in one weight, the room beneath, quiet. */
.asas-cardmeta.is-house { align-items: flex-start; padding-top: 7px; }
.asas-cardmeta.is-house .two { flex: 1 1 auto; min-width: 0; }
.asas-cardmeta.is-house b { font-size: 15.5px; }
.asas-cardmeta.is-house b .ar { font-weight: 600; color: var(--g6); letter-spacing: 0; }
.asas-cardmeta.is-house small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g6); }
.asas-cardmeta.is-house .tag { margin-top: 2px; }
.asas-step .nm .hn .sep { color: var(--g5); font-weight: 400; }
.asas-step .nm .hn .tn { font-weight: 700; }
.asas-cardmeta .tag {
margin-left: auto;
flex: none;
font-size: 11px;
letter-spacing: .04em;
color: var(--g6);
border: 1px solid var(--g3);
border-radius: 999px;
padding: 1px 7px;
line-height: 1.5;
white-space: nowrap;
}
/* The selection control: a plus that becomes a check.
Always visible, never revealed on hover. It used to fade in under the pointer,
which meant the one control that puts a brick in your page was invisible until
you happened to touch the card — and on a phone, invisible full stop. A library
whose main verb is hidden reads as a gallery.
Plus and check are drawn here rather than typed as text so both are optically
centred at the same weight; a glyph "+" and a glyph "✓" never agree on baseline
or size, and the swap between them jumped. */
.asas-cardadd {
position: absolute;
right: 8px; top: 8px;
/* ABOVE EVERYTHING THE TILE PAINTS. The live grid gave the placeholder
screenshot `z-index: 1` so it could sit over the frame and fade out, and this
button — positioned, but at z-index auto — went under it. The placeholder
fades to opacity 0 and stays hit-testable, so the plus was dead on every live
card whether the frame had arrived or not: elementFromPoint at the button's
own centre returned the image. Anything else the wrap ever paints stays
under this. */
z-index: 3;
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid transparent;
background: var(--g9);
color: var(--g0);
display: grid;
place-items: center;
cursor: pointer;
opacity: 1;
/* A hairline of the opposite value and a soft cast, so the circle still has an
edge on a mid-grey photograph — the one background where neither a black nor
a white disc has much contrast to spare. */
box-shadow: 0 0 0 1px rgba(255, 255, 255, .30), 0 1px 4px rgba(0, 0, 0, .28);
transition: background .12s, border-color .12s, box-shadow .12s, transform .08s;
}
/*
* On a dark block the control inverts.
*
* A near-black disc on a black hero is not a subtle control, it is a missing one:
* the library is full of black-drawn blocks and on every one of them the plus
* simply was not there. So the card's own artwork decides — the corner the button
* sits in is sampled when the thumbnail loads, and a dark corner gets a white
* circle with a dark mark. Chosen stays orange either way: the state is the state,
* whatever it is standing on.
*/
.asas-cardadd.on-dark:not(.is-on) {
background: var(--g0);
color: var(--g9);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .32), 0 1px 4px rgba(0, 0, 0, .35);
}
.asas-cardadd.on-dark:not(.is-on):hover { background: var(--g2); }
.asas-cardadd.on-dark:not(.is-on):focus-visible { outline-color: var(--g0); }
/* The mark itself: two bars crossed for the plus, redrawn as a tick when chosen. */
.asas-cardadd-icon {
width: 14px; height: 14px;
display: block;
background: currentColor;
-webkit-mask: var(--plus) center / 14px 14px no-repeat;
mask: var(--plus) center / 14px 14px no-repeat;
}
#asas-studio {
--plus: url('data:image/svg+xml;utf8,');
--tick: url('data:image/svg+xml;utf8,');
}
.asas-cardadd:hover { background: var(--g8); }
.asas-cardadd:active { transform: scale(.96); }
.asas-cardadd:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
/* Chosen. Orange carries the state, but never alone — the mark changes shape and
the card takes an orange border too, so the answer survives a grayscale screen
and a reader who cannot tell the two circles apart by hue. */
.asas-cardadd.is-on {
background: #C25121;
border-color: #C25121;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 1px 4px rgba(0, 0, 0, .30);
}
.asas-cardadd.is-on .asas-cardadd-icon {
-webkit-mask-image: var(--tick);
mask-image: var(--tick);
}
.asas-cardadd.is-on:hover { background: #A9461D; border-color: #A9461D; }
.asas-cardadd.is-on:focus-visible { outline-color: #C25121; }
@media (prefers-reduced-motion: reduce) {
.asas-cardadd { transition: none; }
.asas-cardadd:active { transform: none; }
}
/* ------------------------------------------------------------- build stack -- */
.asas-stack {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--g0);
border-right: 1px solid var(--g3);
}
.asas-stackhead {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--g3);
}
.asas-stackhead strong { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.asas-stackhead .n { color: var(--g5); font-variant-numeric: tabular-nums; font-size: 13.5px; }
/* One scroller for both halves of the column. The stack is usually short and the
colour controls are always the same height, so giving each its own scrollbar
produced two tiny scroll regions and no way to see either fully. */
.asas-stackscroll { overflow-y: auto; flex: 1; min-height: 0; }
.asas-steps { padding: 8px; }
.asas-step {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center;
gap: 8px;
padding: 7px 8px;
border: 1px solid var(--g3);
border-radius: var(--r);
background: var(--g0);
margin-bottom: 6px;
cursor: grab;
}
.asas-step:hover { border-color: var(--g5); background: var(--g1); }
.asas-step.is-drag { opacity: .4; }
.asas-step .i {
color: var(--g5);
font-variant-numeric: tabular-nums;
font-size: 12.5px;
text-align: right;
}
/* The name is the only thing here allowed to be cut short. The Arabic and the
Header/Footer chip sit at their natural width, or the chip that says which slot a
row is in disappears behind the ellipsis of the name beside it. */
.asas-step .nm { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.3; }
.asas-step .nm .hn { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asas-step .nm .hn .ar { font-weight: 500; color: var(--g7); }
.asas-step .nm small { color: var(--g6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
/* The brick's own shot, small, so a slot reads as the thing it holds. */
.asas-stepshot {
width: 56px;
aspect-ratio: 16 / 11;
background: var(--g2);
border: 1px solid var(--g3);
border-radius: 2px;
overflow: hidden;
flex: none;
}
.asas-stepshot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; filter: grayscale(1); }
.asas-step.is-locked { border-color: var(--g8); background: var(--g1); }
.asas-step .asas-lock[aria-pressed="true"] { background: var(--g9); color: var(--g0); border-color: var(--g9); }
.asas-emptystack { padding: 18px 10px 8px; color: var(--g7); }
.asas-emptystack p { margin: 0 0 12px; }
.asas-emptystack .row { display: flex; gap: 6px; flex-wrap: wrap; }
/* --- reordering ----------------------------------------------------------- */
/* A row is grabbed by the grip, not by the row. Dragging from anywhere meant every
attempt to press Swap or Remove started a drag instead, and gave a keyboard user
nothing to focus. */
.asas-step { grid-template-columns: 18px 20px 56px 1fr; grid-template-areas: 'grip i shot name' 'grip i acts acts'; row-gap: 5px; }
.asas-step .asas-grip { grid-area: grip; }
.asas-step .i { grid-area: i; }
.asas-step .asas-stepshot { grid-area: shot; }
.asas-step .nm { grid-area: name; }
.asas-step .asas-stepacts { grid-area: acts; }
.asas-grip {
display: grid;
place-items: center;
width: 18px;
height: 26px;
padding: 0;
border: 0;
border-radius: var(--r);
background: transparent;
color: var(--g5);
cursor: grab;
/* Without this the phone scrolls the panel instead of moving the block. */
touch-action: none;
line-height: 1;
}
.asas-grip:hover { background: var(--g2); color: var(--g8); }
.asas-grip:focus-visible { outline: 2px solid var(--g9); outline-offset: 1px; }
.asas-gripdots { font-size: 15px; letter-spacing: -3px; }
.asas-step.is-slot .asas-grip { cursor: default; color: var(--g4); }
.asas-step.is-slot { background: var(--g1); border-style: dashed; }
.asas-step.is-slot .i { color: var(--g6); }
.asas-slotchip {
flex: none;
margin-left: 4px;
padding: 1px 6px;
border-radius: 9px;
background: var(--g8);
color: var(--g0);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
vertical-align: 1px;
}
.asas-step.is-drag { opacity: .35; }
#asas-studio.is-dragging { cursor: grabbing; }
#asas-studio.is-dragging .asas-step { cursor: grabbing; }
/* The insertion line lives in the list's own coordinate space, which is why .asas-steps
has to be positioned — otherwise it lands relative to the viewport and drifts as the
panel scrolls. */
.asas-steps { position: relative; }
.asas-dropline {
position: absolute;
left: 8px;
right: 8px;
height: 2px;
background: var(--g9);
border-radius: 2px;
pointer-events: none;
}
.asas-dropline::before {
content: "";
position: absolute;
left: -3px; top: -3px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--g9);
}
.asas-move { padding: 3px 4px !important; font-size: 9px !important; line-height: 1.6 !important; }
.asas-move:disabled { opacity: .3; cursor: default; }
.asas-move:disabled:hover { background: var(--g0); color: inherit; border-color: var(--g4); }
/* Announced, never shown. */
.asas-sr {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* --- first-use guidance ---------------------------------------------------- */
.asas-tip {
position: fixed;
z-index: 42;
width: min(300px, 78vw);
padding: 12px 14px;
border: 1px solid var(--g8);
border-radius: var(--r);
background: var(--g9);
color: var(--g0);
box-shadow: 0 18px 40px -24px rgba(0,0,0,.8);
font-size: 14px;
line-height: 1.5;
}
/* A tip that swallows clicks is worse than no tip. Anchored beside the rail it lies
over the first card in the grid, and the first thing anyone tries to do after
reading "start with Navigation" is click a navigation card. The box is inert; only
the row of controls inside it is live. */
.asas-tip { pointer-events: none; }
.asas-tip p { margin: 0 0 10px; }
.asas-tipacts { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.asas-tipn { color: var(--g5); font-size: 12px; font-variant-numeric: tabular-nums; }
.asas-tip .asas-btn { background: transparent; color: var(--g2); border-color: var(--g7); }
.asas-tip .asas-btn:hover { background: var(--g8); color: var(--g0); }
/* The little beak, on whichever side the tip ended up. */
.asas-tip::after {
content: "";
position: absolute;
top: 16px;
width: 0; height: 0;
border: 6px solid transparent;
}
.asas-tip[data-side="right"]::after { left: -12px; border-right-color: var(--g9); }
.asas-tip[data-side="left"]::after { right: -12px; border-left-color: var(--g9); }
.asas-tip[data-side="bottom"]::after { display: none; }
.is-tourtarget {
outline: 2px solid var(--g9);
outline-offset: 1px;
border-radius: var(--r);
}
@media (prefers-reduced-motion: no-preference) {
.is-tourtarget { animation: asas-pulse 1.8s ease-out 2; }
}
@keyframes asas-pulse {
0% { box-shadow: 0 0 0 0 rgba(20,20,15,.35); }
70% { box-shadow: 0 0 0 8px rgba(20,20,15,0); }
100% { box-shadow: 0 0 0 0 rgba(20,20,15,0); }
}
/* Swap and Remove sit side by side in a fixed, narrow column — the previous build
gave the controls a wide track and it ate the preview. */
.asas-stepacts { display: flex; gap: 4px; }
.asas-stepacts button {
border: 1px solid var(--g4);
background: var(--g0);
border-radius: var(--r);
padding: 3px 8px;
font-size: 12.5px;
cursor: pointer;
line-height: 1.5;
}
.asas-stepacts button:hover { background: var(--g9); color: var(--g0); border-color: var(--g9); }
.asas-stackfoot { border-top: 1px solid var(--g3); padding: 10px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
/* ----------------------------------------------------------------- colour -- */
/* Colour used to be a modal. Nobody found it. It sits under the stack now, on screen
the whole time you are building, editing the preview you are already looking at —
so there is no Apply step and nothing to dismiss. */
.asas-colour {
border-top: 1px solid var(--g3);
background: var(--g1);
padding: 4px 12px 18px;
}
.asas-colhead { display: flex; align-items: center; gap: 8px; padding: 10px 0 8px; }
/* ------------------------------------------------- the ten-group accordion --
* One group open at a time; a closed group still answers — its summary line is
* built from live values, so the panel reads as a table of contents of the
* page's style rather than a wall of controls. Sizes follow the contract:
* headings 17px, labels 15px, values 15px, nothing essential under 14px, every
* interactive target at least 44px tall.
*/
.asas-acc {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 10px 10px;
margin-top: 6px;
border: 1px solid var(--g3);
border-radius: var(--r);
background: var(--g0);
text-align: left;
cursor: pointer;
}
.asas-acc:hover { border-color: var(--g5); }
.asas-acc:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
.asas-acc .nm {
font-size: 17px;
font-weight: 650;
letter-spacing: .01em;
color: var(--g9);
flex: 0 0 auto;
}
.asas-acc .sum {
flex: 1;
min-width: 0;
font-size: 14px;
color: var(--g6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.asas-acc .chev { color: var(--g6); font-size: 12px; }
.asas-acc.is-open { border-color: var(--g9); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.asas-accbody {
border: 1px solid var(--g9);
border-top: 0;
border-radius: 0 0 var(--r) var(--r);
padding: 12px 10px;
background: var(--g0);
}
.asas-groupnote { margin: 0 0 10px; font-size: 14px; color: var(--g7); line-height: 1.5; }
.asas-groupnote.is-quiet { color: var(--g6); }
/* A warning is words, not just a colour — the tint only underlines them. */
.asas-groupnote.is-warn { color: #8a3b12; background: #faf1ea; border: 1px solid #e8cdbb; border-radius: var(--r); padding: 8px 10px; }
.asas-groupfoot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--g3); }
/* APPLY TO — the scope selector every compatible group carries. */
.asas-scope {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding: 8px;
border: 1px solid var(--g3);
border-radius: var(--r);
background: var(--g1);
}
.asas-scope .lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--g6);
}
.asas-scopebtn {
min-height: 44px;
padding: 8px 14px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
font-size: 15px;
cursor: pointer;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asas-scopebtn[aria-pressed="true"] { background: var(--g9); color: var(--g0); border-color: var(--g9); font-weight: 600; }
.asas-scopebtn[disabled] { color: var(--g5); cursor: not-allowed; background: var(--g1); }
.asas-scopebtn:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
.asas-scope .hint { font-size: 14px; color: var(--g6); }
/* One control: name, the input row, then where its value comes from. */
.asas-ctl { display: grid; gap: 6px; margin-bottom: 14px; }
.asas-ctl .asas-ctlname { font-size: 15px; font-weight: 600; color: var(--g9); }
.asas-ctl .row { display: flex; align-items: center; gap: 8px; }
.asas-ctl input[type="range"] { flex: 1; accent-color: var(--g9); min-width: 0; height: 44px; }
.asas-ctl input[type="color"] {
width: 44px; height: 44px;
padding: 2px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
cursor: pointer;
}
.asas-hex, .asas-num, .asas-ctl select {
min-height: 44px;
padding: 8px 10px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
font: inherit;
font-size: 15px;
color: var(--g9);
}
.asas-hex { width: 110px; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.asas-num { width: 84px; font-variant-numeric: tabular-nums; }
.asas-ctl select { flex: 1; }
.asas-unit { font-size: 14px; color: var(--g6); min-width: 18px; }
.asas-hex:focus-visible, .asas-num:focus-visible, .asas-ctl select:focus-visible,
.asas-ctl input[type="color"]:focus-visible { outline: 2px solid var(--g9); outline-offset: 1px; border-color: var(--g9); }
/* Segmented enum choices — buttons, not a hidden select. */
.asas-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.asas-segbtn {
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
font-size: 15px;
cursor: pointer;
}
.asas-segbtn[aria-pressed="true"] { background: var(--g9); color: var(--g0); border-color: var(--g9); font-weight: 600; }
.asas-segbtn:hover { border-color: var(--g6); }
.asas-segbtn:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
.asas-seg.is-chips { margin-bottom: 6px; }
.asas-seg.is-chips .asas-segbtn { min-height: 36px; padding: 4px 10px; font-size: 14px; }
/* The advanced drawer inside a group. */
.asas-advtoggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px;
margin: 4px 0 8px;
padding: 8px 10px;
border: 1px dashed var(--g4);
border-radius: var(--r);
background: var(--g1);
font-size: 15px;
font-weight: 600;
color: var(--g8);
cursor: pointer;
text-align: left;
}
.asas-advtoggle:hover { border-color: var(--g6); }
.asas-advtoggle:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
.asas-advtoggle .chev { font-size: 12px; color: var(--g6); }
.asas-modesrow { display: grid; gap: 8px; margin-bottom: 8px; }
/* Provenance: inherited is a whisper, overridden is a fact with a way back. */
.asas-inherit { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--g6); }
.asas-inherit.is-custom { color: var(--g8); }
.asas-inherit.is-custom > span::before {
content: "";
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: #C25121;
margin-right: 6px;
}
.asas-inheritbtn {
min-height: 32px;
padding: 4px 10px;
border: 1px solid var(--g4);
border-radius: var(--r);
background: var(--g0);
font-size: 14px;
cursor: pointer;
}
.asas-inheritbtn:hover { border-color: var(--g6); }
.asas-inheritbtn:focus-visible { outline: 2px solid var(--g9); outline-offset: 1px; }
/* The Responsive group's ledger of everything overridden. */
.asas-ovlist { display: grid; gap: 6px; }
.asas-ovrow {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 8px;
padding: 6px 8px;
border: 1px solid var(--g3);
border-radius: var(--r);
font-size: 14px;
}
.asas-ovrow .k { font-weight: 600; color: var(--g9); }
.asas-ovrow .w { color: var(--g6); }
.asas-ovrow.is-head { margin-top: 10px; border-top: 1px solid var(--g3); padding-top: 10px; justify-content: space-between; }
.asas-ovrow .v { font-variant-numeric: tabular-nums; color: var(--g8); }
/* A selected step is the section being styled — the whole card says so. */
.asas-step.is-selected {
border-color: #C25121;
box-shadow: inset 0 0 0 1px #C25121;
}
.asas-step.is-selected .i { background: #C25121; color: #fff; border-radius: 50%; }
.asas-colour h3 {
margin: 0;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--g7);
}
.asas-colfields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.asas-colfields .asas-field.is-color { grid-column: span 1; }
.asas-colfields .asas-field.is-wide { grid-column: 1 / -1; }
.asas-colgroup {
margin: 16px 0 8px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--g6);
border-top: 1px solid var(--g3);
padding-top: 14px;
}
/* ---------------------------------------------------------------- preview -- */
.asas-view {
min-height: 0;
display: flex;
flex-direction: column;
background: var(--g2);
}
.asas-viewbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--g1);
border-bottom: 1px solid var(--g3);
}
.asas-viewbar .asas-w { display: flex; gap: 2px; }
.asas-viewbar .asas-w button {
border: 1px solid var(--g4);
background: var(--g0);
padding: 4px 10px;
font-size: 12.5px;
border-radius: var(--r);
cursor: pointer;
}
.asas-viewbar .asas-w button[aria-pressed="true"] { background: var(--g9); color: var(--g0); border-color: var(--g9); }
/*
* The stage holds a screen; the screen holds a scaler; the scaler holds the iframe.
*
* Three boxes rather than one because a CSS transform does not change the layout box:
* the scaler still occupies 1290px whatever it is scaled to, so the screen is given
* the painted size explicitly (in JS) and the stage centres that instead. Without it
* the panel scrolls sideways past half a metre of nothing.
*/
.asas-stage {
flex: 1;
min-height: 0;
overflow: auto;
padding: 14px;
display: grid;
place-items: start center;
}
.asas-screen {
position: relative;
overflow: hidden;
background: var(--g0);
border: 1px solid var(--g4);
border-radius: var(--r);
box-shadow: 0 14px 34px -26px rgba(0,0,0,.55);
transition: width .15s ease, height .15s ease;
}
.asas-scaler { position: absolute; top: 0; left: 0; transform-origin: top left; }
.asas-scaler iframe { display: block; border: 0; background: var(--g0); }
.asas-zoom {
color: var(--g6);
font-variant-numeric: tabular-nums;
font-size: 12.5px;
margin-left: 4px;
}
.asas-empty {
display: grid;
place-items: center;
height: 100%;
color: var(--g6);
text-align: center;
padding: 40px;
}
/* A focus ring that survives both grounds: white in the ink bar, ink everywhere else. */
:where(#asas-studio) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--g9);
outline-offset: 2px;
border-radius: 2px;
}
:where(#asas-studio) .asas-bar :is(a, button, input):focus-visible { outline-color: var(--g0); }
.asas-card:focus-visible { outline: 2px solid var(--g9); outline-offset: 2px; }
/* --------------------------------------------------------------- empty & warn -- */
.asas-stage.is-empty { place-items: center; }
.asas-stage.is-empty .asas-screen { display: none; }
.asas-emptynote { text-align: center; max-width: 46ch; }
.asas-emptynote p { margin: 0 0 8px; font-size: 17px; color: var(--g8); }
.asas-emptynote p.sub { font-size: 15px; color: var(--g6); line-height: 1.6; margin-bottom: 20px; }
.asas-emptynote .row { display: flex; gap: 8px; justify-content: center; }
.asas-warn {
margin: 0;
padding: 10px 12px;
background: var(--g2);
border-bottom: 1px solid var(--g3);
color: var(--g7);
font-size: 13.5px;
line-height: 1.5;
}
/* ------------------------------------------------------------------ modals -- */
/* Two dialogs are left. The card inspector, which shows one block at full desktop
width, and the how-it-works panel. The kit drawer that used to live here is gone:
colour is part of building now, not a mode you open. */
/* `height: auto` is not redundant: a