/* studio.css — the emblem studio. * * The materials are the trunk form's, on purpose: the studio is a room inside * the same session and it should read as another piece of the same page rather * than as a second application. Aged parchment for the workbench, brass for the * one control that commits, and the tag's own handwriting throughout. * * WHAT IS DELIBERATELY NOT HERE: the size of the drawable square. studio.js * measures the stage and writes the side length onto #st-canvas, because the * square is a thing the tools have to agree with — a CSS-only square would put * the number in two places and only one of them would be right. See the long * note at the top of studio.js. */ /* ---------- The ladder ---------- THREE OF THESE RUNGS ARE THIS FILE'S — .st-backdrop, .st-panel and .st-cursors — and they are three sibling elements at the top of the document, so each number is the number it actually renders at rather than one trapped inside a parent's stacking context. The rest of the list is the neighbourhood they sit in: the rung immediately below (the form they are raised over), the one that had to move to clear them, and the two that must still beat them. The sentence used to read "Three rungs" and then name seven, which is the sort of thing a reader checks once and then stops trusting the comment. (The first attempt at this correction said six. Count the rows.) 7500 .trunk-form-backdrop the form, which stays mounted behind 7800 .st-backdrop 7900 .st-panel 7950 .st-cursors 7960 .hint.notice trunks.css — the page's one line of prose to the user, which has to be legible OVER the canvas: two of the four notices it carries while the studio is up are the only feedback their case has (see .hint.notice in trunks.css). It was 7600 — chosen against the form's backdrop, before this file existed — and was therefore painted behind the studio's blur 9999 .polaroid.dragging 10000 .lock-screen The full page ladder lives in trunks.css under `.trunk.lifted`. Nothing in it moves for the studio: these three sit in the gap the form's 7500 and the dragging photo's 9999 already left. The notice's rung is the one number that moved for the studio, and it moved because it had to clear it. */ .st-backdrop { position: fixed; inset: 0; z-index: 7800; background: rgba(20, 12, 4, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: st-fade 0.22s ease both; } /* ---------- `hidden` HIDES ---------- One rule, and it is what makes the attribute work for every element in this studio — including the ones that do not exist yet. THE TRAP IT CLOSES HAS SPRUNG TWICE ON THIS BRANCH. The UA stylesheet's `[hidden] { display: none }` loses to any author `display` on ORIGIN, before specificity is consulted at all, so `.st-panel { display: flex }` would leave the panel on screen with `hidden` set, and `.st-group { display: flex }` meant that shutting a tool group did nothing whatsoever — the fill toggle stayed visible, and clickable, for the pen. Both were found by hand, one task apart. The per-element answer — a `.st-thing[hidden] { display: none }` beside each block — is what failed both times, because it is a thing to REMEMBER. This is the same fact with one home instead of seven. IT WINS BY SPECIFICITY, not by order: every selector here is (1,1,0), one id plus one attribute, and the strongest `display` rule anywhere in this file is (0,1,1) (`.st-canvas svg`). It is an ordinary declaration and not `!important`, so it stops applying the moment the attribute comes off and an element shown again gets whatever `display` its own block gives it. THE THREE IDS ARE THE STUDIO'S THREE ROOTS. index.html puts the backdrop, the panel and the cursor layer at the top of the document as siblings — the z-index ladder above is why — so no single selector reaches all three. Everything else the studio hides is inside the panel (.st-offline, .st-note, .st-group, .st-face) and Task 14's cursors will be inside the cursor layer, so the two descendant selectors cover the rest at any depth, today and later. WHAT ELSE THE DESCENDANT SELECTORS CATCH: nothing that is meant to stay on screen. `[hidden]` matches the attribute itself and not `aria-hidden`, which is the only one the markup underneath uses — trunks.js writes `aria-hidden` on the preview trunk's parts and Drawings.toSvg writes neither, so the preview and the canvas are untouched. An element that wants to be seen does not carry the attribute; that is the whole meaning of it. THE PER-CLASS RULES ARE GONE rather than kept as belt and braces, and that is a decision. They were worse than redundant: the note that used to stand here told the next author that adding a `display` to any of those blocks would silently stop `hidden` from hiding, which this rule now makes untrue — and a file carrying seven copies of a fact plus a paragraph explaining a failure that can no longer happen is how the pattern that failed twice gets taught to the next reader. tests/studio.test.js holds this rule STRUCTURALLY: it re-derives every `display` declaration in this file and fails if any of them ever reaches (1,1,0), so a class block added tomorrow cannot quietly outrank it and a hidden element added tomorrow needs no rule of its own. */ #studio-backdrop[hidden], #studio-panel[hidden], #studio-cursor-layer[hidden], #studio-panel [hidden], #studio-cursor-layer [hidden] { display: none; } .st-panel { position: fixed; /* Centred by auto margins rather than by a translate, so the entrance animation below owns `transform` outright and the two cannot fight. */ inset: 0; margin: auto; width: min(1060px, 94vw); height: min(760px, 92vh); z-index: 7900; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; font-family: 'Kalam', cursive; color: #3a2a10; /* The same aged parchment as the form's tag: a lit corner, a stained one, and the desk's own sepia dot grid. */ background-color: #f3e7c9; background-image: radial-gradient(ellipse 60% 44% at 22% 8%, rgba(255, 251, 238, 0.9) 0%, transparent 70%), radial-gradient(ellipse 54% 46% at 92% 96%, rgba(146, 108, 50, 0.20) 0%, transparent 72%), radial-gradient(circle, rgba(120, 90, 55, 0.17) 1.1px, transparent 1.7px); background-size: auto, auto, 18px 18px; border: 1px solid #9a7434; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 252, 240, 0.55), inset 0 0 40px rgba(120, 86, 34, 0.16), 0 26px 64px rgba(20, 12, 3, 0.6); animation: st-rise 0.3s cubic-bezier(0.2, 0.88, 0.3, 1) both; } .st-panel:focus { outline: none; } /* Both entrances are transform/opacity only, and both replay by themselves: an animation restarts whenever an element goes from display:none to shown, which is exactly what opening the studio does. */ @keyframes st-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes st-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } /* The other person's cursor, over the canvas. Task 14 fills it; it is here now so the rung exists and can be measured with the other two. Never a click target — a cursor that swallowed a pointer event would stop the person it is drawn for from drawing. */ .st-cursors { position: fixed; inset: 0; z-index: 7950; pointer-events: none; } /* ---------- The header ---------- */ .st-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .st-title { margin: 0; font-family: 'Caveat', cursive; font-weight: 600; font-size: 26px; line-height: 1.1; color: #4a3520; } .st-name-label { font-family: 'Caveat', cursive; font-size: 19px; color: #6b4e22; margin-left: 6px; } #st-name { width: 190px; padding: 5px 9px; font: inherit; font-size: 15px; color: #33240c; background: rgba(255, 253, 245, 0.62); border: 1px solid #a98a4e; border-radius: 2px; /* Ruled-paper seat rather than a floating input box, matching the form. */ box-shadow: inset 0 1px 3px rgba(120, 86, 34, 0.18); transition: box-shadow 0.2s ease, border-color 0.2s ease; } #st-name:focus { outline: none; border-color: #8a6520; box-shadow: inset 0 1px 3px rgba(120, 86, 34, 0.18), 0 0 0 2px rgba(255, 214, 122, 0.55); } #st-name:disabled { opacity: 0.6; cursor: not-allowed; background: rgba(214, 198, 166, 0.5); } .st-spacer { flex: 1; } .st-head button { padding: 7px 15px; font: inherit; font-size: 13px; color: #5c421a; background: rgba(255, 252, 242, 0.5); border: 1px solid rgba(138, 101, 32, 0.4); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease; } .st-head button:hover:not(:disabled) { transform: translateY(-1px); } .st-head button:focus-visible { outline: 2px solid #ffd77a; outline-offset: 2px; } .st-head button:disabled { opacity: 0.45; cursor: not-allowed; } /* "Save as new" — the variant. Plain, deliberately: there is only ever one primary in a room, and this is the rarer of the two verbs. `nowrap` because its label is three words in a header that is already a flex row with a text input in it. */ .st-head .st-secondary { white-space: nowrap; } /* Save is the only brass in the room — the same plate as the trunk's own, and the same plate the form's Save wears. */ .st-head .st-primary { font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #2b1d06; text-shadow: 0 1px 0 rgba(255, 246, 214, 0.5); border-color: rgba(0, 0, 0, 0.42); background-image: linear-gradient(157deg, #d9ab52 0%, #8a6520 26%, #d9ab52 52%, #8a6520 74%, #4e380e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.45); } .st-head .st-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 13px rgba(255, 214, 122, 0.6); } /* ---------- The studio has lost the server ---------- The same line, in the same warm ink, as the form's .tf-offline. A studio that goes quiet without saying so is indistinguishable from a broken one. */ .st-offline { flex: 0 0 auto; margin: -4px 0 0; font-family: 'Caveat', cursive; font-size: 17px; line-height: 1.15; color: #8a4b2a; opacity: 0.92; } /* ---------- The tool strip ---------- One horizontal strip across the top, the rest canvas, grouped exactly as the design's §4 sketch draws it: ✒ 🖌 ▭ ◯ ╱ T ⌫ ↶ │ ▪▪▪▪▪▪ + │ ─────●─── │ start from ▾ i.e. the tools, then the inks and a free colour picker, then the size, then "start from" — with a `│` between the groups. studio.js builds the controls; this is what they are made of. Everything in it is a real