— these rules restyle that
content inside the modal. Scoped under .legal-doc so nothing leaks into other dialogs. */
.legal-doc { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink); text-align: left; }
.legal-doc__updated { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
.legal-doc h2 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.legal-doc h2 .n { color: var(--c-primary, #149186); margin-right: 5px; }
.legal-doc h3 { font-size: 14.5px; font-weight: 700; margin: 12px 0 4px; }
.legal-doc p { margin: 7px 0; }
.legal-doc ul { margin: 7px 0 7px 18px; padding: 0; }
.legal-doc li { margin: 4px 0; }
.legal-doc .muted { color: var(--muted); }
.legal-doc .callout { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
border-left: 3px solid var(--c-primary, #149186); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.legal-doc th, .legal-doc td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); vertical-align: top; }
.legal-doc th { color: var(--muted); font-weight: 600; }
.legal-doc code { font-size: 12.5px; background: rgba(255, 255, 255, .07); border-radius: 4px; padding: 1px 5px; }
.legal-doc a { color: var(--c-primary, #149186); text-decoration: underline; }
/* ── HQ · Aree dell'App (hotels wave 2, piece 22) ──────────────────────────────────────────────
One row per area of a client's app: its icon in its own colour, its name, the machine id under it,
then move-up / move-down / edit / delete. Built from the HQ variables already in this file so it
sits in the console rather than beside it. */
.hq-arearow { display: flex; align-items: center; gap: 11px; padding: 9px 11px;
border: 1px solid var(--hq-line2); border-radius: 12px; background: var(--hq-panel); }
.hq-areaico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.hq-areatxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hq-areatxt b { font-size: 14px; color: var(--hq-bright); overflow-wrap: anywhere; }
/* The machine id is deliberately quiet: Tony needs to see it, an owner never does. */
.hq-areatxt em { font-size: 11px; font-style: normal; color: var(--hq-soft); overflow-wrap: anywhere; }
.hq-areaacts { flex: none; display: flex; gap: 4px; }
.hq-areabtn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
background: transparent; border: 1px solid var(--hq-line2); color: var(--hq-soft); cursor: pointer; }
.hq-areabtn:hover:not(:disabled) { color: var(--hq-bright); border-color: var(--hq-soft); }
/* ⚠️ A disabled arrow (first row can't go up) must LOOK unavailable, or it reads as a broken button. */
.hq-areabtn:disabled { opacity: .3; cursor: default; }
.hq-areabtn--danger:hover { color: #e08578; border-color: rgba(196, 71, 58, .5); }
/* The icon + colour pickers in the area form. A short curated set on purpose — 20 icons is a better
decision than 300, and every one of these already ships in the sprite. */
.hq-icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; margin: 0 0 14px; }
.hq-iconpick { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
background: var(--hq-panel); border: 1px solid var(--hq-line2); color: var(--hq-soft); }
.hq-iconpick.is-on { color: #14110a; background: var(--hq-gold); border-color: var(--hq-gold); }
.hq-colorpick { aspect-ratio: 1; border-radius: 9px; cursor: pointer; background: var(--c);
border: 2px solid transparent; }
.hq-colorpick.is-on { border-color: var(--hq-bright); }
/* The form's own labels sit tighter than the card's, so the modal doesn't scroll on a phone. */
.hq-modal__panel .hq-lbl { margin: 0 0 5px; }
.hq-modal__panel .input { margin: 0 0 4px; }
/* HQ · the SETS rows in the area form (piece 39) — one input per list Tony defines. */
.hq-setrows { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; }
.hq-setrows .input { margin: 0; }
.hq-setadd { width: 100%; margin: 0 0 14px; }
/* HQ · the per-area FIELD SWITCHES (§5) — what an item in this area carries. Same pill as the icon
grid so the form reads as one thing, but text-width instead of square. */
.hq-pillrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hq-pill { padding: 7px 13px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
background: var(--hq-panel); border: 1px solid var(--hq-line2); color: var(--hq-soft); }
.hq-pill.is-on { color: #14110a; background: var(--hq-gold); border-color: var(--hq-gold); }
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
§C STEP 4 · THE THREE HOTEL LOOKS — Classico · Elegante · Moderno (2026-07-28)
⛔ HOTEL ONLY. Every selector below starts at .hrooms, which exists on no restaurant or bar page.
Nothing here can move Pane&Vino, and nothing here borrows from the menu paper or the Specialità
card — that is the rule the whole hotel UI is built under.
⭐ Each look degrades on its own terms when a hotel has sent no photos yet (the normal day-one
state): the photo-less rules sit beside each look rather than in one shared "no image" block, so a
missing picture reads as a design choice instead of a hole.
═══════════════════════════════════════════════════════════════════════════════════════════════ */
.hrooms { display: flex; flex-direction: column; }
.hroom { position: relative; text-align: left; }
.hroom[data-card] { cursor: pointer; }
.hroom__name { font-family: var(--font-display); margin: 0; }
.hroom__text { margin: 0; }
/* ⭐ §E item 2 — the room's price, printed only when the owner typed one.
⭐ ON THE TITLE'S OWN ROW, pushed right (Tony, 2026-07-31, after seeing it on its own line): "we
lose vertical space… all the way to the right like you did in the opened card. Looks cleaner (in
all Hotel styles)." A card is a scarce screenful, and a price is one short token — it costs a whole
line to say four characters, and the name's line has room to spare.
⚠️ BASELINE, not centre: the name is 27px and the price 16px, so centring them makes the price
float and the pair stops reading as one heading. `min-width:0` on the name lets a long room name
take the space it needs without ever shoving the price off the edge.
⛔ NEVER var(--c-primary) — see .hfeat__price. And the UI face, not the display face: a display
font is chosen for a room NAME, and several of the eighteen render digits badly at small sizes. */
.hroom__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hroom__head .hroom__name { min-width: 0; }
.hroom__price { flex: none; font-family: var(--font-ui); font-variant-numeric: tabular-nums;
white-space: nowrap; color: var(--ink); }
.hroom .tagrow { margin-top: 11px; }
/* ── CLASSICO · the printed brochure ──────────────────────────────────────────────────────────── */
.hrooms--classico { gap: 16px; }
.hroom--classico { background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); }
.hroom--classico .hroom__cover { display: block; width: 100%; height: 214px; object-fit: cover; }
.hroom--classico .hroom__body { padding: 18px 20px 20px; }
/* ⭐⭐ ASK FOR THE WEIGHT THE FACE ACTUALLY HAS (2026-07-30). --font-display-w carries the client
font's own single weight (js/data/fonts.js). Seventeen of the twenty client faces ship exactly ONE
weight, so a rule naming 700 or 750 asked for something the file does not contain.
⚠️ MEASURED: on Chrome the engine matches DOWN to the real weight rather than faking a heavier one
(Outfit at 600 and at 750 render identical advance widths), so the "faux bold" I first claimed here
is UNCONFIRMED — and iOS Safari, the engine that matters, could not be tested. The change stands on
a different reason: the wardrobe's faces genuinely differ (Outfit 600, Baskerville 700, Marcellus
400), and only asking for the face's OWN weight renders each one as it was drawn.
⛔ HOTEL-ONLY ON PURPOSE. .card__title, .spec-card__title and .menu-thumb__name also name
--font-display, but they are SHARED with the restaurant: changing them would move Pane&Vino, and no
gate compares CSS. They keep their literal 600 until that is a decision Tony makes. */
.hroom--classico .hroom__name { font-weight: var(--font-display-w, 600); font-size: calc(27px * var(--font-display-scale, 1)); line-height: 1.1; color: var(--ink); }
/* The brochure look: the price is quiet beside a big name, not a competing headline. */
.hroom--classico .hroom__price { font-size: 16px; font-weight: 700; }
/* The little rule under the name is the brochure's one flourish, and it wears the venue's colour. */
.hroom--classico .hroom__rule { width: 46px; height: 2px; margin: 12px 0 13px; border-radius: 2px;
background: var(--c-accent); }
/* ⭐ THREE LINES, THEN "…" (Tony, 2026-07-31). ⚠️ This REVERSES the brochure's founding idea — the
header of this file still describes Classico as showing "the FULL text. Nothing to tap to know
everything", and that is no longer true: he asked for 3 lines here and 2 on Elegante, so a long
room now has to be opened. Written down because it looks like a bug to anyone reading that comment.
⚠️ Clamped BY LINE, not by characters, so the cut lands correctly in Italian and in German alike. */
.hroom--classico .hroom__text { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hroom--classico .hroom__more { margin-top: 15px; display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--c-primary); }
/* No photo → the brochure keeps its shape and puts the venue's colour where the picture was, as a
thin band above the name. Not a grey box, not a placeholder icon. */
/* ⚠️ NO BAR WHERE THE PHOTO WAS. A 3px rule in the venue's colour was meant to stand in for the
picture; on a client whose colour is a grey (Cesare Augusto's is) it read as a stray divider, and
the card already has one piece of colour — the flourish under the name. One is the right number. */
.hroom--classico:not(.hroom--shot) .hroom__body { padding-top: 22px; }
/* ── ELEGANTE · restrained, horizontal, quiet ─────────────────────────────────────────────────── */
.hrooms--elegante { gap: 0; }
.hroom--elegante { display: grid; grid-template-columns: 112px 1fr; gap: 15px; align-items: center;
padding: 15px 0; border-bottom: 1px solid var(--line); }
.hroom--elegante:last-child { border-bottom: 0; }
.hroom--elegante .hroom__sq { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 3px; }
.hroom--elegante .hroom__name { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
font-weight: var(--font-display-w, 600); color: var(--ink); }
/* Elegante's name is a small spaced-out label, so the price must NOT out-shout it. 13px against the
name's 12.5px reads as its equal on the row rather than as a louder second thing. */
.hroom--elegante .hroom__price { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
/* ⭐ TWO LINES (Tony, 2026-07-31, was three). Elegante is the look that has to scan — ten rooms in one
thumb-flick — and two lines is what keeps a row a row. */
.hroom--elegante .hroom__text { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hroom--elegante .hroom__more { margin-top: 10px; font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--c-primary); font-weight: 700; }
/* No photo → the text simply takes the whole width. The row stays a row; nothing is left empty. */
.hroom--elegante:not(.hroom--shot) { grid-template-columns: 1fr; gap: 0; }
/* ── MODERNO · the photo IS the card ──────────────────────────────────────────────────────────── */
.hrooms--moderno { gap: 14px; }
.hroom--moderno { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.05; }
.hroom--moderno .hroom__full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ THE VEIL IS STRONGER THAN THE MOCK-UP'S, and it had to be. The drawing used photographs that
happened to be dark at the bottom; Cesare Augusto's real rooms are white walls and pale wood, and
over those the name and the two lines were barely legible — a caption you have to squint at is a
caption nobody reads. It now reaches higher and lands darker, and is checked against his brightest
photograph rather than against a favourable one. */
.hroom--moderno .hroom__veil { position: absolute; inset: 0; background: linear-gradient(to top,
rgba(8, 11, 14, .96) 0%, rgba(8, 11, 14, .84) 26%, rgba(8, 11, 14, .48) 52%, rgba(8, 11, 14, 0) 82%); }
.hroom--moderno .hroom__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 17px 17px 16px; }
.hroom--moderno .hroom__name { font-size: calc(21px * var(--font-display-scale, 1)); font-weight: var(--font-display-w, 600); letter-spacing: -.015em; color: #fff; }
/* ⛔ WHITE, not var(--ink). Moderno's body sits ON the photograph — --ink is near-white and would
usually pass, but "usually" is not good enough over an image whose brightness is the owner's. */
.hroom--moderno .hroom__price { font-size: 16px; font-weight: 700; color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.hroom--moderno .hroom__text { margin-top: 6px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .82);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hroom--moderno .hroom__count { position: absolute; top: 13px; right: 13px; z-index: 2; font-size: 11px;
font-weight: 650; color: #fff; background: rgba(8, 11, 14, .55); backdrop-filter: blur(6px);
border-radius: var(--radius-pill); padding: 5px 10px; }
/* The chips float on the photograph, so they are glass rather than the app's normal chip. */
.hroom--moderno .tagrow .tagchip { color: #fff; background: rgba(255, 255, 255, .17);
border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.hroom--moderno .tagrow .tagico { color: #fff; }
/* No photo → the card becomes a panel in the venue's own colour, keeping its height and its shape,
so a hotel mid-way through sending pictures does not get a page of holes. */
/* ⚠️ AND WITHOUT A PHOTO IT STOPS PRETENDING TO BE ONE. Keeping the 4:3 frame left two thirds of the
card empty above the text — a hole in the venue's own colour is still a hole. With nothing to show,
the card simply becomes a coloured panel the size of its words. */
.hroom--moderno:not(.hroom--shot) { aspect-ratio: auto; background: linear-gradient(160deg,
color-mix(in srgb, var(--c-primary) 88%, #000), color-mix(in srgb, var(--c-primary-dark) 92%, #000)); }
.hroom--moderno:not(.hroom--shot) .hroom__veil { display: none; }
.hroom--moderno:not(.hroom--shot) .hroom__body { position: static; padding: 18px 17px 17px; }
/* The look picker in HQ's area form (§C step 4). Each option carries a tiny abstract drawing of the
look rather than only its name — "Elegante" means nothing until you have seen it, and Tony is
choosing between three shapes, not three words. */
/* Three, not four: there is no "menu paper" option for a hotel — it was never a choice a hotel had. */
.hq-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.hq-look { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 4px 9px;
background: var(--hq-panel); border: 1px solid var(--hq-line); border-radius: 10px; cursor: pointer; }
.hq-look b { font-size: 10.5px; font-weight: 700; color: var(--hq-soft); letter-spacing: .01em; }
.hq-look.is-on { border-color: var(--hq-teal); background: rgba(42, 165, 149, .1); }
.hq-look.is-on b { color: var(--hq-bright); }
.hq-look__art { display: flex; flex-direction: column; gap: 2px; width: 34px; height: 30px; justify-content: center; }
.hq-look__art i { display: block; background: var(--hq-soft); border-radius: 1.5px; opacity: .55; }
.hq-look.is-on .hq-look__art i { background: var(--hq-teal); opacity: 1; }
/* classico: a big photo band over two text lines */
.hq-look__art--classico i:first-child { height: 13px; width: 100%; border-radius: 2px; }
.hq-look__art--classico i:nth-child(2) { height: 2px; width: 62%; margin-top: 2px; }
.hq-look__art--classico i:last-child { height: 2px; width: 88%; }
/* elegante: a small square beside the text — drawn as a row */
.hq-look__art--elegante { flex-direction: row; align-items: center; gap: 4px; }
.hq-look__art--elegante i:first-child { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.hq-look__art--elegante i:nth-child(2), .hq-look__art--elegante i:last-child { display: none; }
.hq-look__art--elegante::after { content: ''; flex: 1; height: 2px; background: currentColor;
color: var(--hq-soft); opacity: .55; border-radius: 1.5px; }
.hq-look.is-on .hq-look__art--elegante::after { color: var(--hq-teal); opacity: 1; }
/* moderno: one filled block — the photo IS the card */
.hq-look__art--moderno i:first-child { height: 26px; width: 100%; border-radius: 4px; }
.hq-look__art--moderno i:nth-child(2), .hq-look__art--moderno i:last-child { display: none; }
/* ── THE MANAGER'S ITEM ROW ON A HOTEL (Tony, 2026-07-29) ──────────────────────────────────────
Rooms carry four or five lines of description, so two of them filled the owner's screen and the
one thing he scans for — the name — was the smallest element on the row. Bigger picture, dominant
name, two lines of text and then "…".
⛔⛔ MANAGER ONLY, AND HOTELS ONLY. `.row--bigitem` is put on by restaurantAdmin.js and by nothing
else, so the guest's room list and Pane&Vino's dish list are both untouched. The two lists do
different jobs: the owner is finding a row to edit, the guest is choosing a room.
⚠️ CLAMPED BY LINES, NOT CHARACTERS. Two lines of Italian and two of German are very different
character counts, and a character cut chops mid-word in one language and not the other. line-clamp
measures what is actually on screen, and the "…" comes free — in every language.
⚠️ The clamp lives on the row's own sub-line only, never on `.row__sub` generally, which the whole
Manager uses for one-line captions. */
.row--bigitem .ra-thumb { width: 92px; height: 92px; border-radius: 10px; }
.row--bigitem .ra-thumb--empty i { font-size: 30px; }
.row--bigitem .row__title { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.row--bigitem .row__sub { margin-top: 4px; font-size: 13px; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The WHOLE row opens the editor, the ellipsis included — an ellipsis that is its own tappable thing
is a target half the taps miss on a phone. Nothing inside may swallow the tap. */
.row--bigitem .row__text { pointer-events: none; }
/* ── THE AREA'S OWN INTRODUCTION (Tony, 2026-07-29) ────────────────────────────────────────────
It opens the area, so it has to READ like an opening — his words: "right now it looks like a bunch
of text dropped there for the sake of it". ⛔ Not a word of the hotel's text is changed; the whole
difference is typographic, and it uses THEIR OWN paragraph breaks:
· the FIRST paragraph as the lead — larger, in the venue's own face, in full ink;
· anything after it as quieter body copy, so the eye knows where the opening ends;
· a hairline below, so the list underneath starts as a new thing rather than as more of this.
⚠️ A hotel that wrote one paragraph gets a lead and nothing else, which is right — there is
nothing to demote. */
.area-intro { margin: 2px 2px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
/* #11ter — the introduction's photograph. FULL WIDTH, above the words, and 16:9 because the crop is
fixed at 16:9 in the Manager: declaring the ratio here means the space is reserved before the image
arrives, so the paragraph underneath does not jump when it lands. ⚠️ `object-fit: cover` in case an
older photo predates the crop. */
.area-intro__shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md, 12px); margin: 0 0 14px; background: var(--surface-2); }
/* An area whose introduction is ONLY a photograph: no words to separate from, so no rule under it. */
.area-intro--shotonly { padding-bottom: 0; border-bottom: 0; }
/* ⭐ 17px, DOWN FROM 18.5 (Tony, 2026-08-03, looking at Fontana: "it reads bold").
⛔⛔ AND THE REASON IT IS THE SIZE AND NOT THE WEIGHT, which is worth knowing before anyone tries
the obvious fix again: EVERY DISPLAY FACE SHIPS EXACTLY ONE WEIGHT. `js/data/fonts.js` says so in
its own header — "one weight per face, and the weight differs because the faces do" — and the
folder proves it: lora-600, outfit-600, marcellus-400, playfair-600. So `font-weight` on this
line is a number the font cannot honour. Fontana asked for 400 and drew Lora 600, because 600 is
the only Lora there is; measured in the live app, not reasoned about. Only Cormorant, Caveat,
Inter and Sora ship more than one cut.
⚠️ CONSEQUENCE: making the lead lighter means SHIPPING a 400 cut of that face (self-host + preload,
the procedure the project already follows) — or making it smaller, which works on every face at
once and costs nothing. This is the second.
⚠️ The weight stays 500: it is what the rule has always said, it changes nothing on a
single-weight face, and on the four faces that DO have several cuts it keeps them where they were. */
.area-intro__lead { margin: 0; font-family: var(--font-display); font-size: calc(17px * var(--font-display-scale, 1)); font-weight: 500;
line-height: 1.45; letter-spacing: .005em; color: var(--ink); }
.area-intro__body { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
/* ⭐ TWO LINES, THEN A CHEVRON (Tony, 2026-07-30). Cesare Augusto's introduction is eight lines of
room specification above his actual rooms — true, useful, and not what a guest opening Le Camere
came for. ⛔ THE LEAD IS NEVER CLAMPED: the bold opening sentence stays whole in every look. Only
the paragraphs under it fold.
⚠️ The clamp is on the WRAPPER, not on each paragraph — clamping each one would give two lines per
paragraph and defeat the point. line-clamp on a container works because the paragraphs inside are
normal flow content.
⚠️ In EVERY style, at his request. This is the one place the three looks agree, because the
introduction is not part of the look — it is the page's opening. */
/* ⛔⛔ max-height, NOT -webkit-line-clamp. My first version used line-clamp and it did NOTHING —
measured on the live page: eight lines, and the toggle changed the height by zero. line-clamp
counts INLINE lines inside a -webkit-box, and this wrapper holds BLOCKS, so each paragraph
became one box child and nothing was ever clipped. The comment I wrote claiming otherwise was
simply wrong, and only opening the page showed it.
⭐ A height limit does not care what is inside it. 45px = two lines of 13.5px at 1.65 line-height,
with the paragraph's own top margin moved onto the wrapper so it is not counted twice. */
.area-intro__more { max-height: 45px; overflow: hidden; margin-top: 12px; transition: max-height .2s ease; }
.area-intro__more.is-open { max-height: none; }
/* ⭐ THE VENUE'S DESCRIPTION ON HOME — seven lines, then a chevron (Tony, 2026-08-07). Planber's runs
to about twenty and pushed everything else off the screen.
⭐ `-webkit-line-clamp` IS CORRECT HERE, even though the note above says it did nothing on
`.area-intro__more`. Both are true and the difference is what is inside: line-clamp counts INLINE
lines within a -webkit-box, so it cannot clip a wrapper full of
BLOCKS (each becomes one box
child) and it clips a single
of running text exactly as intended. ⛔ Do not "correct" this to a
max-height — a pixel height would cut a line in half the moment the venue's font or size changes,
and every venue here has its own face.
⚠️ No transition: animating to `none` is not animatable, and a half-opened clamp shows a clipped
line of somebody's welcome. It opens at once, like the chevron promises. */
.about__txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.about__txt.is-open { -webkit-line-clamp: unset; overflow: visible; }
/* ⭐⭐ §G / #4 — THE STAY DATES SHEET. It stands between the guest tapping «Attiva» and the phone's
own permission dialog, which is asked ONCE ever: this screen is what gives him a reason first.
⚠️ `100svh`, never `vh` — on iOS `vh` counts the address bar that is not there, so the panel is
pushed under the fold and the Conferma button sits off-screen exactly when it matters most.
⛔ AND THE BODY IS NEVER PINNED. `position:fixed` on
stops iOS painting tall overlays at
all; the app has that written down from an earlier modal and it cost a session to find. */
.stay-ask { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
padding: 18px; background: rgba(8, 16, 20, .62); overscroll-behavior: contain; }
.stay-ask__panel { position: relative; width: min(420px, 100%); max-height: 100svh; overflow: auto;
border-radius: 18px; padding: 22px 20px 18px; background: var(--surface, #1b2224);
border: 1px solid var(--line, rgba(255, 255, 255, .12)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.stay-ask__x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: grid;
place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.stay-ask__t { margin: 0 26px 6px 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.stay-ask__sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Two dates side by side: they are read together, and stacking them makes a two-field form look
like a booking. On a narrow phone they wrap by themselves rather than squeezing. */
.stay-ask__row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.stay-ask__row label { flex: 1 1 140px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* ⛔ THE CAPTION ONLY — `> label > span:first-child`, never every span in the row. The row now holds a
second span (the field wrapper, which carries the empty-box hint), and a blanket rule painted it
uppercase and letterspaced too. Worse than the hint: `text-transform` and `letter-spacing` INHERIT
into a form control even though `font` does not, so on iOS — where the value reads «10 ago 2026»
rather than digits — the date itself would have come out as «10 AGO 2026». */
.stay-ask__row > label > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.stay-ask__row .input { margin: 0; width: 100%; }
.stay-ask__err { margin: -8px 0 12px; font-size: 12.5px; font-weight: 600; color: var(--c-danger, #e0715f); }
.stay-ask__panel .btn + .btn { margin-top: 8px; }
.area-intro__more .area-intro__body { margin-top: 0; }
.area-intro__more .area-intro__body + .area-intro__body { margin-top: 12px; }
.area-intro__toggle { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 0;
background: none; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 12px;
font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-primary);
-webkit-tap-highlight-color: transparent; }
.area-intro__toggle i, .area-intro__toggle svg { transition: transform .18s ease; }
.area-intro__toggle.is-open i, .area-intro__toggle.is-open svg { transform: rotate(180deg); }
/* ⚠️ On the cream Moderno carta the accent would be the venue's colour on paper — but this block is
never inside the carta, so it keeps the app's own accent everywhere. */
/* ── A HOTEL'S SERVICES: a list of features, not a wall of cards (Tony, 2026-07-29) ────────────
"Smaller title, put an icon in front of each like in the rest of the Apps (coloured square +
icon) + description. No need for the separator. Make it less prominent."
⭐ A room is a thing a guest CHOOSES between and earns a photograph; a service is a fact he CHECKS.
Same weight for both is what made Generali read as shouting. ⛔ Hotel-only markup — `.hfeat`
exists on no restaurant or bar page. */
.hfeats { display: flex; flex-direction: column; gap: 2px; }
.hfeat { display: flex; align-items: center; gap: 14px; padding: 14px 2px;
border-bottom: 1px solid var(--line); }
.hfeat:last-child { border-bottom: 0; }
/* The coloured square + icon the rest of the app uses for a section — one colour per service, so the
list reads as a set of distinct things rather than as one thing repeated. */
/* ⭐ DOUBLE SIZE (Tony, 2026-07-29): "the icon and the image should be x2 the size it is now." At 42px
a photograph of the pool was a stamp; at 84 it is a picture, and the icon squares keep the same
rhythm beside it so a list of mixed rows still lines up. */
/* ⭐ ÷1.5 (Tony, 2026-07-30): "in Generali reduce the square with the icon by x1.5". 84 → 56px.
⚠️ The icon INSIDE is drawn at a fixed 48px by the renderer, which would leave 4px of breathing
room in a 56px box — so the glyph is scaled with the box rather than left to fill it. */
.hfeat__ico { flex: none; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 32px;
color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
/* #68 — "nessuna icona" in a list where the OTHER rows carry a square: the space is held so the
column of titles stays straight, and nothing at all is drawn in it. ⚠️ Where NO row in the list has
an icon, featuresHTML emits no box at all and the list is a clean column of names — this class is
never reached in that case. */
.hfeat__ico--none { background: transparent; border-color: transparent; }
/* ⛔⛔ THE SIZE IS SET AT THE CALL, NOT HERE, and a rule written here is DEAD CODE. An app icon is a
WEBFONT glyph — `` — so `.hfeat__ico svg { width }`
matched nothing, and even a correct `font-size` here would lose to the inline style anyway.
I shipped exactly that rule, told Tony the icons were 2.3× bigger, and nothing had moved.
⭐ The size lives in featuresHTML: tIcon(…, { size: 48 }). If it needs changing, change it there. */
/* ⚠️ `flex: 1` ADDED 2026-07-31, and it is the description's doing. This block used to be sized by its
text, which was WIDE, so it filled the row and pushed the price and the chevron to the right edge
on its own. With the description gone the block shrank to the width of a title and the chevron came
with it — a ">" floating in the middle of the row, three rows in three different places. Nothing in
the gates can see this; it took opening the page. */
.hfeat__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
/* ⭐ THE TITLE CARRIES THE ROW ALONE (Tony, 2026-07-31): "only the Title x1.3 bigger and no
description". 16.5 × 1.3 = 21.5. The description moved into the card behind the ">", which is what
makes every row worth tapping and the list consistent — see featuresHTML for the reasoning.
🧹 The old `.hfeat__txt span` rule (a one-line clamp on the description) went with it: featuresHTML
is the only user of this block, and it no longer emits that span at all. */
.hfeat__txt b { font-family: var(--font-display); font-size: calc(21.5px * var(--font-display-scale, 1)); font-weight: var(--font-display-w, 600); line-height: 1.25; color: var(--ink); }
/* The owner's own photograph takes the square the moment he uploads one. */
.hfeat__shot { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
border: 1px solid var(--line); }
/* A service that has something behind it says so — and only then. Wi-Fi and check-in carry nothing
the row does not already print, so they stay flat and untappable (Tony, 2026-07-29). */
.hfeat--open { cursor: pointer; }
.hfeat__chev { flex: none; align-self: center; color: var(--muted); opacity: .7; }
/* ⭐ §E item 2 — the price the owner typed, on a service row. `margin-left:auto` pins it to the right
whatever the text does, so the column holds even when one row has a price and its neighbour does
not. ⛔ NEVER var(--c-primary): Cesare Augusto's brand grey computes to 2.5:1 on this ground and
fails AA at every size — the brand colour is for micro-labels, never for a number a guest reads. */
.hfeat__price { flex: none; margin-left: auto; align-self: center; font-family: var(--font-ui);
font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
font-variant-numeric: tabular-nums; color: var(--ink); }
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
LA CARTA — the hotel's own menu and drink card (§D1.c, 2026-07-30)
═══════════════════════════════════════════════════════════════════════════════════════════════
Tony saw the restaurant's paper on his hotel and sent it back: "The menus/drink cards for the
Hotels get their own style… using the colors, font and general style we used for Le Camere, so we
get consistency in the look." Drawn as three mock-ups on his real menu (assets/mock-carta.html),
then decided by him in two rounds:
ROUND 1 → "no clamp" · "remove the card option on Classico and Moderno too… never cards, just
lists" · "una per tutti" (one dish card, not one per look)
⛔ SO THERE ARE NO PANELS ANYWHERE, and that cost the three looks their easiest difference — the
box WAS the distinction. Each now earns its identity from three things only:
photo 64px/4px corner · 72px/3px · 84px/14px
title accent flourish · centred .18em caps + hairline · tight display type
rows air, no rule · a hairline under each · a fainter hairline
price plain · quiet · in a pill
⭐ EACH LOOK STILL INHERITS ITS VOICE FROM ITS OWN ROOM CARD above, so a guest moving from
Le Camere to Il Ristorante stays in one app: .hcarta--classico borrows .hroom--classico's 27px
display name and its 46×2 flourish; --elegante borrows the .18em uppercase title and the hairline
rows; --moderno borrows .hroom__count's pill, which now holds the price.
⛔ NOT ONE DECLARATION IS SHARED WITH THE RESTAURANT'S PAPER. `.notepad` is untouched and frozen
byte-for-byte by tools/smoke-notepad-freeze.js.
⚠️ ALL THREE SIT DIRECTLY ON THE PAGE TEXTURE now that the panels are gone (the pinstripe at 40%,
:121-133) — which is why the mock was judged with that texture on rather than on flat black.
⚠️ THE PRICE IS NEVER var(--c-primary). Cesare Augusto's brand is #5c5c5c, which on this page
computes to 2.5:1 — below the 4.5:1 floor and below even the 3:1 large-text one. Brand colour is
for micro-labels (as .hroom__more uses it); a number a guest must read gets --ink. */
.hcarta { display: flex; flex-direction: column; }
.hcarta__title { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-w, 600); color: var(--ink); }
/* ⭐ THE PHOTO IS A BLOCK, NOT A THUMBNAIL (Tony, 2026-07-30): "make sure the photo square is as
big as the 3 rows of the content on the right (including the Allergeni icons) so that it looks
like a block — right now the height of the photo gets to half of the allergeni icons."
⚠️ So the row STRETCHES and the image takes its height from the text beside it, with aspect-ratio
keeping it square — which means the COLUMN must be auto, not a fixed px, or the width could never
follow the height. Each look keeps its own min-width (64/72/84) as the floor for a short row.
⚠️ A MAX IS DELIBERATE. "No clamp" means a description can run to five lines, and without a ceiling
the square would grow with it until one dish owned the screen. 132px is roughly a three-line row —
the shape he asked for — and taller rows simply stop growing rather than distorting. */
.hcarta__dish { display: grid; align-items: stretch; }
.hcarta__name { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-w, 600);
color: var(--ink); overflow-wrap: break-word; text-wrap: balance; }
/* ⚠️ align-self, not the row's alignment. Elegante and Moderno centre the row so the square photo
sits level with the text block (exactly as the room card does) — and centring dragged the price
down beside the DESCRIPTION, which reads as a price for the wrong line and makes the column
ragged. Caught by opening the mock, not by reading it. */
.hcarta__price { font-family: var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums;
color: var(--ink); align-self: start; }
/* ⚠️ The TEXT column must not stretch with the row, or its own margins would be pushed apart. Only
the photograph stretches; the words keep their natural height at the top of the row. */
.hcarta__dish > div { align-self: start; }
/* ⭐ NO CLAMP, ANYWHERE (Tony, 2026-07-30). A room can be teased; on a menu the description IS the
dish, so it is never cut. */
.hcarta__desc { margin: 0; }
/* ⭐ THE ONE GAP THAT IS HALF (Tony, 2026-07-30): "the space Veggie/Allergeni → title, reduce it by
half." So the flex gap becomes 14 — which IS that one distance — and every OTHER gap adds 14 back
with a margin, returning to 28. ⚠️ Done with a POSITIVE margin on the courses rather than a
negative one on the head: a negative margin is a number nobody can read the intent of, and the
next person to change the gap would silently move the title instead of the courses. This way the
gap IS the small distance and the margin IS the top-up. */
.hcarta__course { margin-top: 14px; }
/* ⛔⛔ NOT aspect-ratio. The first attempt asked for a SQUARE whose side followed the text height —
`align-self: stretch` + `aspect-ratio: 1` + `width: auto` in an `auto` column — and that is
CIRCULAR: the column's width depends on the image's width, which depends on its height, which
depends on the row's height, which depends on the column. The browser broke the loop by taking the
max-width (132px) as the width and then making the row 132px tall to match — so the photograph
DROVE the row instead of following it, and got bigger than the text rather than level with it.
MEASURED on the live demo: photo 132px, text 98px.
⭐ So the column keeps a fixed width and only the HEIGHT follows. The image fills the row top to
bottom — which is what Tony actually asked for: "as big as the 3 rows of the content on the right
(including the Allergeni icons), so that it looks like a block". It is a block; on a row taller
than it is wide it is a portrait block rather than a square, and no CSS can have both. */
/* ⛔⛔ `height: 0; min-height: 100%` — NOT `height: 100%`. Tony: "why in specialità del giorno the
photo is not a square?" Because that dish's photograph is PORTRAIT: an ![]()
still contributes its
INTRINSIC height when sizing the grid row, so at 78px wide a tall photo asked for ~147px and the
row grew to fit it, while a landscape one at the same width asked for less than the text and
behaved. Same circularity as before, wearing a different hat — and invisible until a client
uploads a portrait photo, which is what a phone camera produces by default.
⭐ height:0 removes the intrinsic contribution entirely, so the TEXT alone sizes the row;
min-height:100% then fills it. object-fit: cover crops rather than distorts. */
.hcarta__shot { display: block; object-fit: cover; background: rgba(255, 255, 255, .05);
align-self: stretch; width: 100%; height: 0; min-height: 100%; }
/* A dish with no photograph gives its width to the text rather than keeping an empty square. */
.hcarta__dish--nophoto { grid-template-columns: 1fr auto !important; }
/* The two filter buttons, CENTRED and BELOW the title (the paper pins them top-right). ⛔ Its own
class, never `.paper-filters` — that one is shared with Pane&Vino and must not move. */
/* ⚠️ It now sits ABOVE the title (the renderer emits filters → title → courses), so this bottom
margin is the gap between the buttons and the menu's name rather than between name and courses. */
/* ⛔ NO BOTTOM MARGIN HERE. The carta is a flex column with its own `gap`, so a margin ADDS to it:
22px + a 32px gap read as 54px on the live page, and the head's 18px + 32 read as 50 — which is
why Tony saw the title "lost floating around". MEASURED, then removed: the gap is now the ONE
thing that spaces this page, so the three distances cannot drift apart again.
⭐ ITS VALUE IS HIS: "the distance from the top separator to the start of the VEGGIE/ALLERGENI
should be used as the correct distance also between the VEGGIE/ALLERGENI and the Title, and from
the Title to the Antipasti." That distance measured 28px. */
/* ⛔ NO BOX (Tony, 2026-07-30): "remove the box around the 2 Veggie and Allergeni". Just the icon
and its word — which is what the restaurant's own filters have always been. The box was mine, and
on the cream carta it read as two empty buttons rather than as a filter. */
.hcarta__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 0; }
.hcarta__filters .pfilter { min-width: 0; padding: 2px; border: 0; }
/* ⭐ CLASSICO: the bar rides the first course's heading, hard right, sharing its baseline. */
.hcarta__course-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.hcarta__course-head .hcarta__filters { justify-content: flex-end; flex: none; gap: 0 16px; margin-bottom: 2px; }
/* ── CLASSICO · a list, generous. Air does the work. ─────────────────────────────────────────── */
.hcarta--classico { gap: 14px; }
/* ⭐ CENTRED, IN EVERY LOOK (Tony, 2026-07-30): "it should be centered". Elegante already was;
Classico and Moderno follow it, so the menu's name reads the same way whichever look is chosen.
The flourish under it centres with it. */
.hcarta--classico .hcarta__head { margin: 0; text-align: center; }
/* ⭐ ×1.5 (Tony, 2026-07-30: "make the menu Title x1.5 bigger"). Each look scales its OWN size, so
the three keep their relationship to each other: 27→40.5, 12.5→18.75, 24→36. The menu's name is
now the largest thing on the page, which is what a printed carta does too. */
.hcarta--classico .hcarta__title { font-size: 40.5px; line-height: 1.1; letter-spacing: -.005em; }
/* ⚠️ `margin: 12px auto 0`, in THIS rule. A separate `margin-left/right: auto` was added above and
did nothing: the same selector appears again here, later in the file, and its shorthand reset both
sides back to 0 — so the flourish stayed hard left under a centred title. Two rules for one
selector is how a fix disappears without anything looking wrong. */
.hcarta--classico .hcarta__rule { width: 46px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: var(--c-accent); }
/* ⚠️ THE RULE MOVES TO THE ROW. With the filters beside the heading, a border on the heading alone
would underline the words and stop short of the buttons — a line that looks broken. The row owns
it, so it runs the full width under both. */
.hcarta--classico .hcarta__course-name { margin: 0; font-family: var(--font-display);
font-weight: var(--font-display-w, 600); font-size: 21px; line-height: 1.15; color: var(--ink); }
.hcarta--classico .hcarta__course-head { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hcarta--classico .hcarta__dish { grid-template-columns: 78px 1fr auto; gap: 14px; }
.hcarta--classico .hcarta__dish + .hcarta__dish { margin-top: 22px; }
/* ⭐ A SQUARE FLOOR. The row takes its height from the TEXT, so a short item (a name, four words,
no allergen row) produced a row shorter than the column is wide and the photo came out a
squashed strip — Tony saw it on Espresso. min-height = the column width, so the picture can grow
with a tall row but never drop below square. One number per look, matching its own column. */
.hcarta--classico .hcarta__shot { min-height: 78px; border-radius: 4px; }
.hcarta--classico .hcarta__name { font-size: 16.5px; line-height: 1.3; }
.hcarta--classico .hcarta__price { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.hcarta--classico .hcarta__desc { margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.hcarta--classico .iconrow { margin-top: 8px; }
/* ── ELEGANTE · a list, quiet. Hairlines do the work. ────────────────────────────────────────── */
.hcarta--elegante { gap: 14px; } /* the one rhythm — see .hcarta__filters */
.hcarta--elegante .hcarta__head { text-align: center; margin: 0; }
.hcarta--elegante .hcarta__title { font-size: 18.75px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.hcarta--elegante .hcarta__rule { height: 1px; background: var(--line); margin: 11px 0 0; }
.hcarta--elegante .hcarta__course-name { margin: 0 0 4px; font-family: var(--font-ui); font-size: 11px;
letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.hcarta--elegante .hcarta__dish { grid-template-columns: 84px 1fr auto; gap: 15px; padding: 15px 0;
border-bottom: 1px solid var(--line); }
.hcarta--elegante .hcarta__dish:last-child { border-bottom: 0; }
.hcarta--elegante .hcarta__shot { min-height: 84px; border-radius: 3px; }
.hcarta--elegante .hcarta__name { font-size: 15px; line-height: 1.3; }
.hcarta--elegante .hcarta__price { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.hcarta--elegante .hcarta__desc { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.hcarta--elegante .iconrow { margin-top: 9px; }
/* ── MODERNO · the parts that stay whatever the ground ──────────────────────────────────────── */
/* ⚠️ "The photo IS the card" cannot be translated literally to a menu — twenty 4:3 photographs is
twenty screenfuls. Its honest translation is the dominant 84px square and the pill. */
.hcarta--moderno { gap: 14px; }
.hcarta--moderno .hcarta__head { margin: 0; text-align: center; }
.hcarta--moderno .hcarta__title { font-size: 36px; letter-spacing: -.015em; line-height: 1.15; }
/* ⭐ HALVED (Tony, 2026-07-30): "reduce the gap from the line below it to the first piatto by half."
28px = this 14px margin + the dish's own 14px padding-top. The dish padding is shared with the
bottom of every row, so halving THAT would squash the whole carta; the heading's margin is the
piece that belongs to this gap alone. 0 + 14 = 14px, exactly half. */
.hcarta--moderno .hcarta__course-name { margin: 0; font-family: var(--font-display);
font-weight: var(--font-display-w, 600); font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
/* ⭐ THE ROW IS CLASSICO'S ROW NOW (Tony, 2026-07-30): "make the photo as big as the one in the
Classico style and make the title/description and icons fit like in Classico." 96 → 78px.
⚠️ WHY IT WAS 96: the Moderno look descends from the rooms, where "the photo IS the card". On a
menu that reasoning does not survive contact — a 96px column stole 18px from the text on a 390px
phone, so "Salumi, pecorino, miele e focaccia calda" broke over two lines and every row grew.
⛔ The 14px corner radius STAYS. That, not the size, is what makes this look modern; matching
Classico's 4px would have merged the two looks, which is the opposite of the point. */
.hcarta--moderno .hcarta__dish { grid-template-columns: 68px 1fr auto; gap: 14px; padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, .07); }
.hcarta--moderno .hcarta__dish:last-child { border-bottom: 0; }
/* ⭐ THE CARTA TIGHTENS (Tony, 2026-07-30): "reduce the gap between the Title and Antipasti by 1/3
… reduce the gap between the last piatto and the next portata by 1/3 (same for the others below)."
⚠️ Both gaps are built from .hcarta__course's margin-top PLUS the carta's 14px flex gap, so one
number cannot serve both — the first course also has the title above it and no dish padding.
· between courses : 14 flex + 0 + 14 (the last dish's own bottom padding) = 28px, was 42px
· under the title : 14 flex + 5 = 19px, was 28px
⛔ Scoped to --moderno: Classico's and Elegante's rhythm is deliberate and stays as it is. */
.hcarta--moderno .hcarta__course { margin-top: 0; }
.hcarta--moderno .hcarta__course:first-of-type { margin-top: 5px; }
.hcarta--moderno .hcarta__shot { min-height: 68px; border-radius: 14px; }
.hcarta--moderno .hcarta__name { font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; }
/* ⛔ THE GLASS PILL IS GONE, and it had to go with the cream. It was the mark that tied this look to
.hroom__count on the rooms — but a translucent WHITE pill on cream paper is invisible, and a
blurred backdrop over a flat colour blurs nothing. On a printed carta the price is simply the
number, in the ink of the page, and that is what this is now.
⚠️ WRITTEN HERE RATHER THAN OVERRIDDEN ABOVE. My first attempt added a second
`.hcarta--moderno .hcarta__price` rule in the cream block; this one sits LATER in the file, same
specificity, so it won and the pill survived — measured on the live page as
rgba(255,255,255,0.1). Exactly the trap the accent flourish hit an hour earlier: two rules for one
selector is how a fix disappears with nothing looking wrong. One rule, one place. */
.hcarta--moderno .hcarta__price { font-size: 15.5px; font-weight: 700; line-height: 1.3;
color: #34312b; }
.hcarta--moderno .hcarta__desc { margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.hcarta--moderno .iconrow { margin-top: 8px; }
/* ⚠️⚠️ THIS BLOCK SITS HERE, AFTER the dark Moderno rules, and the position is load-bearing.
It was first written ABOVE them and SIX of its selectors were silently overridden by their later
twins — .hcarta--moderno itself, the title, the course name (three rules deep), the dish name, the
description and the dish row. The cream appeared, so it looked as though it had worked; the type
colours never changed, and "Antipasti" rendered in the DARK theme's near-white on cream paper —
invisible. That is the same trap that hid the accent flourish and the price pill earlier the same
day: TWO RULES FOR ONE SELECTOR, and CSS quietly takes the last one.
⭐ Rather than merge six pairs by hand, the whole block moved. Reverting is still one deletion.
⚠️ If you ever add a rule to the dark Moderno section above, check here for a twin. */
/* ══════════════════════════════════════════════════════════════════════════════════════════════
── MODERNO · THE LIGHT ONE. A printed carta on cream paper. ─────────────────────────────────
══════════════════════════════════════════════════════════════════════════════════════════════
Tony, 2026-07-30, after seeing all three live: "can we make the Moderno (just for the Menus) that
is inside a container with a cream bg… or even better that is the same as the Elegante in Pane e
Vino, but placed in the Moderno in the Hotels? so this way we actually have 3 different styles and
one is on a light bg?"
⭐ HE IS RIGHT, AND IT FIXES SOMETHING THE PANELS USED TO HIDE. Once "never cards, just lists"
removed the boxes, all three looks were dark type on the same dark page and separated only by size
and rhythm — close cousins. A light ground is a genuinely different look, so the three now read as
three: dark brochure · dark quiet list · light printed carta.
⛔⛔ BUT IT IS NOT PANE&VINO'S PAPER, AND MUST NEVER BE. Two reasons, both hard:
1. Tony's own governing rule for the hotel: "Do not use the menu format for this, create its own."
2. PRACTICAL, and the one that would actually bite: notepadHTML's output is frozen byte-for-byte
by tools/smoke-notepad-freeze.js. Sharing it would mean any future change to the hotel's carta
moves Pane&Vino's menu — the exact coupling this whole effort exists to prevent.
So this is the hotel's own cream surface, wearing the hotel's own classes. Same feeling on screen,
no shared line of code.
⭐ IT WEARS THE CLIENT'S OWN FACE, which Pane&Vino's paper cannot: that one hardcodes Cormorant.
Here the headings stay on --font-display, so a hotel on Outfit gets a cream carta in Outfit.
⚠️ REVERTING IS ONE COMMIT. Everything below is scoped to .hcarta--moderno and lives in this one
contiguous block; deleting it returns Moderno to the dark list it was. Nothing else reads it.
⚠️ The colours are LITERALS, not tokens, on purpose. --ink and --muted are the dark theme's, and on
cream they would be invisible. These four are the paper's own, and they are the only place in the
hotel CSS where that is true. */
/* ⭐ CREAMIER (Tony, 2026-07-30): #faf6ee read as off-white rather than paper. #f7efdd carries more
yellow and less grey — the difference between "unbleached" and "cream" — while staying light
enough for #34312b ink to sit at well over 10:1. */
/* ⭐ LESS AIR AT THE TOP (Tony, 2026-07-30): "move them closer to the Title and less space above them
to the border — we need to recover some lost space." 26px of padding above a bar that then had its
own gap below it pushed the menu's name a third of the way down the screen. 16px, and the bar sits
close to the title it belongs to. */
.hcarta--moderno { background: #f7efdd; border: 1px solid rgba(53, 49, 43, .13); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); padding: 16px 20px 26px; color: #34312b; }
/* the gap the filter bar leaves under itself, only on the light carta where space is scarcest */
/* ⭐ −1/3 AGAIN (Tony, 2026-07-30): the flex gap is 14px, so -4px left 10px of air between the two
icons and "Menu à la Carta". -7px leaves 7px — the bar now reads as part of the title's block. */
.hcarta--moderno .hcarta__filters { margin-bottom: -7px; }
/* ⛔⛔ THE COURSE HEADINGS ARE INK, NOT THE BRAND — and this was caught by looking, not by thinking.
Pane&Vino's cream paper puts its course names in --c-primary and they sing, because HIS brand is a
terracotta. Cesare Augusto's is #5f656d, a mid grey, and on #faf6ee "Antipasti" came out so faint
it read as a disabled label — I could barely see it in the screenshot.
⭐ THE RULE, now hit for the third time today: a brand colour is safe on SMALL LABELS and on LARGE
type, and unsafe everywhere in between. The title survives because it is 36px; a 18px heading does
not. So headings take the paper's own ink and the brand keeps the title alone — which also gives
the page a hierarchy it did not have when both were the same colour.
⚠️ This is why the carta could never simply BE Pane&Vino's paper: his is designed around one brand
that happens to be strong. A hotel's could be anything, including a grey. */
.hcarta--moderno .hcarta__title { color: var(--c-primary); }
.hcarta--moderno .hcarta__course-name { color: #34312b; text-align: center; }
/* the flourish under a course heading, so a centred label is not left floating on the paper */
/* ⭐ ×1.5 (Tony, 2026-07-30) — 18 → 27px. On cream the course heading is the page's main rhythm, and
at 18px it read as a label rather than a division of the menu. */
/* ⭐ ÷1.3 (Tony, 2026-07-30): "make Antipasti x1.3 less big". 27 → 20.8px. The ×1.5 that took it to
27px was right when the heading had to carry the page alone; now that the carta is compact it was
competing with the 36px title instead of sitting under it. 36 · 20.8 · 16.5 is a real hierarchy. */
.hcarta--moderno .hcarta__course-name { font-size: 24px; padding-bottom: 10px;
border-bottom: 1px solid rgba(53, 49, 43, .14); }
/* ⭐ THE PHOTO TAKES THE VENUE'S OWN EDGE (Tony: "make sure the photo thumb have a color border,
1px, in the bg color we set up in HQ"). --brand-header-bg is exactly that colour — the one he
picks on the client card — and on cream a 1px line of it reads as a printed keyline round each
plate, which is what a real carta does.
⚠️ box-sizing is stated explicitly: the image is sized width:100% inside a fixed column, so a
border added on top of that would push it 2px wider than its column and misalign every row.
⚠️ It falls back to the paper's own ink, so a venue whose header colour never resolved gets a
sensible keyline rather than no border at all. */
.hcarta--moderno .hcarta__shot { box-sizing: border-box;
border: 1px solid var(--brand-header-bg, #34312b); }
.hcarta--moderno .hcarta__name { color: #34312b; }
.hcarta--moderno .hcarta__desc { color: #8a8170; font-style: italic; }
.hcarta--moderno .hcarta__dish { border-bottom: 1px solid rgba(53, 49, 43, .10); }
/* The filter buttons need the paper's own border and its own muted, or they vanish into the cream. */
.hcarta--moderno .hcarta__filters .pfilter { border-color: rgba(53, 49, 43, .18); }
.hcarta--moderno .hcarta__filters .pfilter__lbl { color: #8a8170; }
/* ⚠️ The allergen rings are drawn with the app's amber/green, which are tuned for the dark page. On
cream they need darkening or they read as highlighter. Same hues, lower lightness. */
.hcarta--moderno .alg { --alg: #b07d14; --veg: #3f8b52; }
/* ⭐ SPECIALITÀ DEL GIORNO WEARS THE TITLE'S TREATMENT (Tony, 2026-07-30): "the Specialità del
giorno title should be centered and x1.5 what it is now — can it have the same style as Menu a
la Carta, with the line below?"
⚠️ ×1.5 OF ITSELF, not the menu title's size. It is still a heading INSIDE the page, under the
menu it belongs to, so matching the menu's own 40.5px would make the two compete. 21 → 31.5px
(Classico), 18 → 27px (Moderno), and Elegante's tiny label → 16.5px, each ×1.5 of its own.
⭐ Centred with the rule beneath, which is what he means by "the same style": the block reads as
a second carta rather than as one more course of the first.
⚠️ It is the COURSE NAME that is dressed, not a title — the block has no title of its own, so
restyling the course heading is what puts the words in the right place without a second renderer.
⛔ Scoped to .hcarta--spec, so a real course heading in the menu above is untouched. */
/* ⭐ CENTRED FOR REAL (Tony, 2026-07-30, after seeing it still sitting left). text-align on the
heading was never going to work: it is a shrink-to-fit item in a space-between flex row, so its box
IS its text. Centring the ROW is what moves it. The text-align stays for the wrapped case. */
.hcarta--spec .hcarta__course-head { justify-content: center; }
.hcarta--spec .hcarta__course-name { text-align: center; }
.hcarta--classico.hcarta--spec .hcarta__course-name { font-size: 31.5px; }
/* ⭐ ÷1.5 AND IN THE BRAND (Tony, 2026-07-30): "make Specialità del Giorno x1.5 smaller and the same
title color as Menu à la Carta". 40.5 → 27px, and --c-primary, the colour the carta's own title
wears — so the two headings on the page finally read as the same rank of thing.
⚠️ THIS IS THE ONE PLACE THE BRAND IS SAFE ON A MID-SIZE HEADING, and only because 27px is large
enough. The COURSE names above stay ink (#34312b) for exactly the reason recorded there: on a grey
brand like Cesare Augusto's, a 20.8px heading in --c-primary reads as a disabled label. Do not
"make it consistent" by moving the course names to the brand too. */
/* ⚠️ NO RULE UNDER IT (Tony, 2026-07-30): "centered and no underline". This REVERSES his own earlier
"with the line below" — on the cream carta the rule read as a course divider and made the day's
special look like one more portata. Overriding both halves explicitly, because the inherited
.hcarta--moderno .hcarta__course-name sets padding-bottom AND a border. */
.hcarta--moderno.hcarta--spec .hcarta__course-name { font-size: 27px; color: var(--c-primary);
padding-bottom: 0; border-bottom: 0; }
.hcarta--elegante.hcarta--spec .hcarta__course-name { font-size: 16.5px; padding-bottom: 10px;
border-bottom: 1px solid var(--line); }
/* A carta filtered down to nothing. Its own class so a restaurant CSS edit can never move it. */
.hcarta__empty { color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; padding: 24px 0; }
/* ⛔ THE DISH CARD, hotel only. The modal itself is SHARED with Pane&Vino, so this scopes by the
venue's own class rather than editing .cardmodal__price — which is var(--c-primary) and therefore
2.5:1 on Cesare Augusto's grey. Tony: "una per tutti" — one card for all three looks. */
.cardmodal--hotel .cardmodal__price { color: var(--ink); }
/* #66 · HQ — THE AREAS SHOWN AS TWO GROUPS (2026-08-01)
⚠️ HQ-only classes, painted in the `--hq-*` tokens like everything else on that surface. They do
not exist on a client app and must not: this is Tony's screen. */
.hq-grouphd { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--hq-soft); }
.hq-grouphd:first-of-type { margin-top: 10px; }
/* ⚠️ NO CAP HERE. `.hq-sub` carries `max-width: 640px`, which is right for a paragraph in a narrow
column and wrong for this one: the card is far wider on the screen Tony actually works on, so the
line broke after "but you can" with half the row empty beside it. Tony, 2026-08-04: *"make it stay
on 1 row… no point in 2."* ⛔ It is the CAP that is lifted, not the wrapping — a genuinely narrow
window still wraps, because the alternative is a line running off the side of the card. */
.hq-areahelp { margin: 6px 0 2px; line-height: 1.45; max-width: none; }
/* ── THE TWO PANELS AT THE FOOT OF A CLIENT (2026-08-04) ────────────────────────────────────────
⛔⛔ NEITHER OF THESE HAD A RULE AT ALL. `.hq-areas__head` and `.hq-areas__note` were written into
the markup and never styled, so the headings rendered at whatever the card inherited and read as
body text rather than as sections. Tony: *"make them in capital letters and x1.5 bigger so they
actually look like areas."*
⭐ Modelled on `.hq-grouphd`, which is what already labels a group on this screen — uppercase and
letter-spaced, so the two panels announce themselves the same way the rest of HQ does rather than
inventing a third heading style. */
.hq-areas__head { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.hq-areas__head b { font-size: 18px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--hq-bright); }
/* ⚠️ The icon must not grow with the word — 1.5× on a glyph beside uppercase text reads as a
mistake. It keeps the size it is drawn at and simply sits centred against the taller line. */
.hq-areas__head .ti { flex: none; color: var(--hq-soft); }
/* Tony: "make the description smaller and in the same style as [the areas help line]." Same size,
same colour, same rhythm — and the same absence of a cap, for the same reason. */
.hq-areas__note { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--hq-soft); max-width: none; }
/* A built-in row is greyed so "you cannot rename or delete this" reads as a rule, not a fault.
⛔ NOT `opacity` on the whole row — that would fade the arrows too, and the arrows are the point:
they are what lets Tony move his own areas above and below these. */
.hq-arearow--builtin .hq-areatxt b { color: var(--hq-soft); font-weight: 600; }
.hq-arearow--builtin .hq-areaico { opacity: .55; }
/* The add button sits INSIDE the group it adds to, so it needs its own breathing room and a rule
under the whole block — everything below it acts on the WHOLE app, not on the areas. */
/* ⭐ Full width, like every other button in the card (Tony, 2026-08-01: "should be full width as the
others"). It sits in a list of full-width actions — a button that stops short reads as a different
kind of thing, and it is not one. */
.hq-areaadd { margin-top: 10px; width: 100%; }
.hq-sep--areas { margin: 18px 0 4px; }
/* ── #12bis(a) · SU GOOGLE — the one panel on this card that has a FRAME ────────────────────────
⛔⛔ Tony, 2026-08-06: *"please make it stand out in its own panel inside the HQ… it is getting
very crowded and difficult to read."* Everything else on a client card is a heading with a rule
above it — `.hq-mgr` is literally a border-top and nothing more — so the way to make one block
read as its own thing is to give it the one property none of the others has: a box.
⭐ TEAL, not gold and not red. Gold on this screen means "the action that makes money" (send the
payment link, put it online) and red means "you cannot undo this". This is neither: it is a report
about whether the app is finished, and it must not shout in a colour that already means something. */
.hq-seo { margin-top: 14px; padding: 13px 14px 14px; border-radius: 14px;
background: linear-gradient(160deg, rgba(42, 165, 149, .10), rgba(42, 165, 149, .03));
border: 1px solid rgba(42, 165, 149, .34);
display: flex; flex-direction: column; gap: 8px; }
.hq-seo__head { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.hq-seo__head b { font-size: 18px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--hq-bright); }
/* Same rule as the areas heading: the glyph keeps its own size against the taller line. */
.hq-seo__ico { display: inline-flex; flex: none; color: var(--hq-teal); }
/* The state, readable without opening anything. ⚠️ It is `margin-left:auto` rather than a flex
spacer — the heading has three children and a spacer would be a fourth thing to keep in step. */
/* ⛔ AN EMPTY PILL IS NOT A PILL. Seen on the bench: the heading is drawn before the venue has been
read, and for that second the state showed as a small bordered capsule with nothing in it —
which looks like a control that failed to load rather than an answer that has not arrived. */
.hq-seo__pill:empty { display: none; }
.hq-seo__pill { margin-left: auto; flex: none; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--hq-line2); color: var(--hq-soft); }
.hq-seo__pill.is-on { color: var(--hq-good); border-color: rgba(75, 185, 138, .5); background: rgba(75, 185, 138, .12); }
.hq-seo__pill.is-ready { color: var(--hq-teal); border-color: rgba(42, 165, 149, .5); background: rgba(42, 165, 149, .12); }
.hq-seo__pill.is-not { color: var(--hq-gold); border-color: rgba(243, 177, 75, .45); background: rgba(243, 177, 75, .1); }
.hq-seo__state { margin: 0; font-size: 14px; font-weight: 600; color: var(--hq-bright); }
/* The count line IS the button that opens the list — one target, and the count stays on screen
while the list is shut, or nobody ever opens it. */
.hq-seo__more { background: none; border: 0; padding: 2px 0; margin: 0; text-align: left;
font: inherit; font-size: 13px; color: var(--hq-soft); cursor: pointer; align-self: flex-start; }
.hq-seo__more:hover { color: var(--hq-bright); }
.hq-seo__chev { display: inline-block; width: 12px; color: var(--hq-teal); }
.hq-seo__list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px;
padding: 10px 0 2px; border-top: 1px solid rgba(42, 165, 149, .22); }
/* ⚠️ `align-items: baseline` would drop the mark half a line on a row that wraps onto two. The mark
belongs to the FIRST line of its sentence, which is what `flex-start` plus the line-height does. */
.hq-seo__row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; }
.hq-seo__row > span:first-child { flex: none; width: 13px; text-align: center; }
.hq-seo__row.is-ok { color: var(--hq-soft); }
.hq-seo__row.is-ok > span:first-child { color: var(--hq-good); }
.hq-seo__row.is-bad { color: var(--hq-bright); }
.hq-seo__row.is-bad > span:first-child { color: #e07a72; }
/* ⛔ THE ADVISORY ROW MUST NOT LOOK LIKE THE BLOCKING ONES. A missing photograph is worth showing
and is not worth refusing over, and a third colour is what says so without a sentence. */
.hq-seo__row.is-warn { color: var(--hq-ink); }
.hq-seo__row.is-warn > span:first-child { color: var(--hq-gold); }
/* WHICH ones — the names travel with the count, so the line is an instruction rather than a report. */
.hq-seo__row em { font-style: normal; color: var(--hq-soft); }
.hq-seo__row i { font-style: normal; font-size: 11.5px; color: var(--hq-soft); opacity: .85; }
.hq-seo__btn { width: 100%; margin-top: 2px; }
.hq-seo__btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ---- #12 · DOMINIO PROPRIO — the panel under «Su Google» -------------------------------------
⛔ IT HAD ITS OWN COLOUR TAKEN AWAY ONCE AND TONY PUT IT BACK (2026-08-14). The first version was
deliberately neutral, on the argument that «Su Google» is opened daily and this once per venue,
so it should not compete. He looked at it and asked for a real panel with a real colour. He is
right and the reasoning was wrong: this is the one panel that carries a PAID service, and a grey
frame reads as an afterthought bolted onto the card rather than something worth €100.
⭐ BLUE, and specifically not the other three. Teal already means «Su Google»; gold means a
warning everywhere in HQ; red means broken. Blue is the only free hue on this card, and it stays
free for exactly one thing — the venue's own address.
⚠️ Same radius, padding and geometry as .hq-seo, on purpose: a different SHAPE would say it is a
different kind of thing, and it is not — it is the second half of the same conversation. */
.hq { --hq-blue: #5f92dd; }
.hq-dom { margin-top: 12px; padding: 13px 14px 14px; border-radius: 14px;
background: linear-gradient(160deg, rgba(95, 146, 221, .12), rgba(95, 146, 221, .035));
border: 1px solid rgba(95, 146, 221, .34);
display: flex; flex-direction: column; gap: 8px; }
.hq-dom__head { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; }
.hq-dom__head b { font-size: 18px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--hq-bright); }
.hq-dom__ico { display: inline-flex; flex: none; color: var(--hq-blue); }
/* ⛔ AN EMPTY PILL IS NOT A PILL — the same lesson the «Su Google» pill records. The heading paints
before Cloudflare has answered, and for that second an empty bordered capsule looks like a
control that failed to load rather than an answer that has not arrived yet. */
.hq-dom__pill:empty { display: none; }
.hq-dom__pill { margin-left: auto; flex: none; font-size: 11px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--hq-line2); color: var(--hq-soft); }
.hq-dom__pill.is-on { color: var(--hq-good); border-color: rgba(75, 185, 138, .5); background: rgba(75, 185, 138, .12); }
.hq-dom__pill.is-wait { color: var(--hq-gold); border-color: rgba(243, 177, 75, .45); background: rgba(243, 177, 75, .1); }
.hq-dom__pill.is-not { color: #e07a72; border-color: rgba(224, 122, 114, .45); background: rgba(224, 122, 114, .1); }
/* The field and its button on one line, and the field takes what is left: a hostname is long and
the button's label is two syllables. ⚠️ It wraps rather than shrinking the input below readable
width — HQ is used on a phone and a squeezed address field is where typos come from. */
.hq-dom__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hq-dom__form .input { flex: 1 1 220px; min-width: 0; }
.hq-dom__form .btn { flex: none; }
/* ⚠️ THE PRIMARY BUTTON WEARS THE PANEL'S COLOUR, not the app's green. Seen on the bench the moment
the blue arrived: a green «Crea» inside a blue frame reads as a control borrowed from somewhere
else. Scoped to .hq-dom, so the green primary everywhere else in HQ is untouched. */
.hq-dom .hq-btn-primary { background: linear-gradient(150deg, #3a6cb0, var(--hq-blue)); }
.hq-dom .input:focus { border-color: var(--hq-blue); }
.hq-dom__addr { margin: 2px 0 0; font-size: 15px; font-weight: 700; word-break: break-all; }
.hq-dom__addr a { color: var(--hq-bright); text-decoration: none; border-bottom: 1px solid rgba(95, 146, 221, .45); }
.hq-dom__addr a:hover { color: var(--hq-blue); border-bottom-color: var(--hq-blue); }
/* The two steps. Same row grammar as the readiness checks above, because they answer the same
shape of question and Tony has already learned to read it. */
.hq-dom__row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; }
.hq-dom__row > span:first-child { flex: none; width: 13px; text-align: center; }
.hq-dom__row.is-ok { color: var(--hq-soft); }
.hq-dom__row.is-ok > span:first-child { color: var(--hq-good); }
.hq-dom__row.is-warn { color: var(--hq-ink); }
.hq-dom__row.is-warn > span:first-child { color: var(--hq-gold); }
/* The record, laid out the way a domain technician reads one — label left, value right, monospace
so a hyphen and a dot are not a guess. ⚠️ It has to survive being read off a phone screen and
typed into somebody else's control panel. */
.hq-dom__cname { display: grid; gap: 6px; margin: 4px 0 2px; padding: 11px 12px;
border-radius: 12px; background: var(--hq-panel); border: 1px solid var(--hq-line2); }
.hq-dom__cname .hq-lbl { margin: 0 0 2px; color: var(--hq-soft); }
.hq-dom__cname .btn { margin-top: 4px; }
.hq-dom__kv { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.hq-dom__kv > span { flex: none; min-width: 92px; color: var(--hq-soft); }
.hq-dom__kv > b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
color: var(--hq-bright); word-break: break-all; }
.hq-dom__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hq-dom__acts .btn { flex: 1 1 auto; }
/* ⛔⛔ THE COUNT — Tony: «I will not remember». By NUMBER, never a percentage, and on screen every
time the panel opens rather than only once it is high: a warning that appears for the first time
at 80 is a warning nobody has learned to look for. */
.hq-dom__use { margin: 6px 0 0; font-size: 12.5px; color: var(--hq-soft); }
.hq-dom__use.is-warn { color: var(--hq-gold); font-weight: 600; }
/* "Fino a N persone" in the opened room card. Sits under the description, above the tag chips —
⛔ it is a FACT about the room, so it reads at body weight, not as a chip: chips are the features
a guest scans, and burying the one thing he looks for first among them would lose it. */
.cardmodal__guests { display: flex; align-items: center; gap: 7px; margin: 10px 0 0;
color: var(--ink-soft); font-family: var(--font-ui); font-size: 15px; }
/* #69 — the "what goes in this button?" picker. A row, not a tile: Tony reads names, and a grid of
equal squares would make «Eventi & Offerte» and «Le Camere» look interchangeable when they are not. */
.hq-navpick { width: 100%; text-align: left; cursor: pointer; background: var(--hq-panel);
border: 1px solid var(--hq-line2); }
.hq-navpick:hover { border-color: var(--hq-soft); }
/* Already in the bar: shown, not hidden — picking it is how Tony MOVES a button, and hiding it would
make the list change shape depending on what he happened to have chosen. */
.hq-navpick.is-in { opacity: .5; }
/* #83 — the snapshot picker. A row says WHEN and WHAT, because most copies are nightly ones of the
same content and the one worth choosing is the one somebody took on purpose. */
.hq-snaplist { display: flex; flex-direction: column; gap: 6px; max-height: 46svh; overflow-y: auto; overscroll-behavior: contain; margin: 10px 0 4px; }
.hq-snaprow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--hq-line, rgba(255,255,255,.14)); border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.hq-snaprow:hover { background: rgba(255,255,255,.05); }
.hq-snaprow__when { font-weight: 600; font-size: 14px; }
.hq-snaprow__what { font-size: 12px; opacity: .6; }