/* Page rules of the doors. What every page shares — the tokens, the type, the controls, the panel, the tables, the pills, the
   action rows, the mark, the sheets, the header and its menus — is admin-shared.css, declared once (house rule 21; DESIGN.md
   "The shared stylesheet"). This file holds what belongs to a page or a layout: the shell (the rail and the side column), the
   pages' own arrangements (the calendar, the floor plan, the document pages, the Design page) and the spacing a page gives a
   shared component. A page never restyles what the shared stylesheet defines. Began 2026-09-07 as the <style> block of
   emictech-web protected/chatbot.html (bd285af). */
.wrap{margin:0;padding:88px 24px 80px}   /* every door fits the window (2026-09-11): the content starts under the logo and ends at the right edge */
.layout{display:flex;flex-direction:column}
.content{width:100%;min-width:0}
.rail{display:flex;flex-wrap:wrap;gap:6px 28px;margin-bottom:28px;align-items:flex-start}
.rail a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text3);text-decoration:none;padding:9px 14px;border-radius:9px}   /* the rail's three tones (2026-09-17): the group label quietest (text4), an entry readable (text3), the hovered or active one the text colour; the fill is the active entry's alone */
.rail a .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}   /* the rail's icons (2026-09-17): the doors' line style, in the word's colour in every state — one target, one behaviour (Qing: "why icon and text diff behaviour?") */
.rail a:hover{color:var(--text)}
.rail a.active{background:var(--bg2);color:var(--text)}
/* the rail's groups (S7-13): a small label, then the group's pages; groups sit side by side until the wide layout
   stacks them in the left column (the block below, which must come after these rules) */
.rail-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rail-label{flex:0 0 100%;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text4);margin:0 0 -2px 14px}   /* the group label: a heading, not a target — the rail's quiet tone (2026-09-17; the text colour until then) */
/* From laptop width up, the side column — the tenant's title with its switcher, then the rail — stands left of the
   content and stays put while the content scrolls (Qing, 2026-09-07). Inside the 1180px page width on laptops, where
   the content narrows to make room; outside it on wide monitors, where the content keeps its full width. */
@media(min-width:1200px){
  /* The door is a shell (Qing, 2026-09-11): under the fixed header (57px) the two columns fill the window and the page itself
     never scrolls. The content scrolls inside its panel — its bar starts at the panel's top, not at the header. The menu
     stands still; taller than the window, its rail moves under the pointer without a bar, and the title with its switcher
     stays outside the moving part so the switcher's menu is never clipped. The hairline between the columns is the
     content's left border: from the header's line to the window's bottom whatever the page's length; 16px from the menu's
     pills, 16px to the content. The 31px of padding keep the title and the content at 88px from the top, as on every door.
     Below 1200px the menu sits above the content and the page scrolls as one. */
  .wrap.tenant{box-sizing:border-box;height:100vh;padding:57px 0 0 24px;overflow:hidden}   /* padding, not margin: a margin would collapse onto the body and add 57px of page scroll */
  .layout{flex-direction:row;gap:16px;align-items:stretch;height:100%}
  .side{flex:0 0 180px;display:flex;flex-direction:column;padding-top:31px}
  .side > .rail{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
  .side > .rail::-webkit-scrollbar{display:none}
  .content{flex:1;min-width:0;overflow-y:auto;border-left:1px solid var(--border);padding:31px 24px 80px 16px}
  .side > h1.tenant,.side > details.switch{margin-bottom:22px}   /* the block, not the heading inside the switcher */
  .side > h1.tenant,.side > details.switch{margin-left:14px}   /* text on one edge with the pages' text */
  .rail{display:block}
  .rail a{margin-bottom:2px}
  /* the hairline between groups sits midway: a page's text is 9px (its padding) + 6px above the line, the next group's
     label 15px below it — the same 15px each side (Qing, 2026-09-11: 10px margin + 10px padding read as 19 above, 10 below) */
  .rail-group{display:block;margin-bottom:6px}
  .rail-group + .rail-group{border-top:1px solid var(--border);padding-top:15px}
  .rail-group .rail-label{margin:0 0 4px 14px}
}
section{display:none}
section.active{display:block}
.card .k{margin-bottom:8px}
.chart{margin-bottom:24px}   /* the box is the shared stylesheet's; a chart stands in a column */
.chart .k{margin-bottom:14px}   /* the name's type and colour are the shared stylesheet's */
#conv-rows tr{cursor:pointer}
#conv-rows tr:hover td{background:var(--bg2);color:var(--text)}
.msg{max-width:85%;margin-bottom:10px;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.5;white-space:pre-wrap}
.msg.user{background:var(--text);color:var(--bg);margin-left:auto;border-bottom-right-radius:4px}
.msg.assistant{background:var(--bg);border:1px solid var(--border2);color:var(--text3);border-bottom-left-radius:4px}
.msg .mt{font-size:10px;opacity:.55;margin-top:3px}
.prompt-ta{width:100%;min-height:340px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.6}
.prompt-ta.short{min-height:140px}
.greetings td[rowspan]{vertical-align:top}   /* the phone's one greeting stands at the top of the rows it spans */
.greetings tr + tr td:last-child{padding-right:12px}   /* under a spanned cell a row's last cell is not at the table's edge: it keeps its inner padding */   /* the widget's terms: a shorter text than a prompt */   /* the prompt editor keeps its typeface; size, padding and radius are the controls' */
.prompt-ta:focus{outline:none;border-color:var(--text4);color:var(--text)}
.greet-in{width:100%;margin:0}   /* size and look from the shared stylesheet's controls */

/* ── additions for the platform pages (not in chatbot.html) ── */
/* the tenant's name as the title — and, since S5-7, the switcher: a control, so a step below the 32px title of the
   designed admin pages and two below the 44px page headline (Qing, 2026-09-07) */
h1.tenant{font-size:16px;letter-spacing:-0.02em}
.center{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}
.center h1{margin-bottom:12px}
.signin{max-width:440px}.signin .addrow{justify-content:center}   /* the staff sign-in card */
/* a link in content — a table cell, a request card, a booking's facts — is text in the design's colour; the
   underline appears on hover. Never the browser's blue. */
.rail a.soon{opacity:.55}
/* ── the tenant switcher: the title opens the list of tenants this person may enter, each at the same section ── */
details.switch{position:relative;margin-bottom:40px}
details.switch summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
details.switch summary h1{min-width:0}   /* a long name wraps inside the column instead of pushing the chevron out */
details.switch summary::-webkit-details-marker{display:none}
details.switch summary h1{margin:0}
details.switch .chev{flex:none;color:var(--text4);transition:transform .15s,color .15s}
details.switch summary:hover .chev{color:var(--text)}
details.switch[open] .chev{transform:rotate(180deg)}
details.switch .menu{left:0;top:calc(100% + 8px)}   /* its look: the door's pop-up menus, admin-shared.css */
/* ── the document pages of the operator door: Architecture and Progress (S5-5). The <style> blocks of emictech-web
   protected/architecture.html (f1e3903) and protected/progress.html (65d87db), scoped to .doc; where the two differed
   the board's values sit under .doc.progress ── */
.doc{--blue:var(--c-blue);--fm:ui-monospace,SFMono-Regular,Menlo,monospace}   /* the third ground is --bg3, a shared token */
.doc.architecture{line-height:1.55}
.doc h1{font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-0.035em;line-height:1.03;text-wrap:balance;margin:0 0 20px}
.doc .lead{font-size:17px;color:var(--text3);margin-bottom:8px}
.doc .lead.full{max-width:none;font-size:20px;line-height:1.5;margin-bottom:0}
.doc .lead strong{color:var(--text);font-weight:600}
.doc .rule{height:1px;background:var(--border);margin:44px 0}
.doc h2{font-size:12px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text4);margin:0 0 20px}
.doc figure{margin:0 0 12px;max-width:1100px}   /* a figure keeps the width it was drawn for, whatever the window (Qing, 2026-09-11: "too big") */
.doc svg{display:block;width:100%;max-width:100%;height:auto}   /* a figure; the mark's drawing is button.ask svg, which outranks this (2026-09-15: it stretched the ? on four pages) */
.doc figcaption{font-size:13.5px;color:var(--text4);margin-top:14px}
.doc figcaption b{color:var(--text3);font-weight:600}
/* generated figures (scripts/build_figures.py, docs/figures/*.json): Archify's classes bound to the tokens. Colour says
   what a thing is — a page people see, the core, a table, a gate; rented stays grey dashed, the main path is white. */
.doc .fig{--fig-page:var(--c-sky);--fig-core:var(--ok);--fig-table:var(--c-violet);--fig-gate:var(--c-orange);--fig-rented:var(--text4);--fig-outside:var(--text3)}
.doc .fig .c-grid{display:none}
.doc .fig .c-mask{fill:var(--bg);stroke:none}
.doc .fig .c-frontend{fill:color-mix(in srgb, var(--fig-page) 12%, transparent);stroke:var(--fig-page)}
.doc .fig .c-backend{fill:color-mix(in srgb, var(--fig-core) 12%, transparent);stroke:var(--fig-core)}
.doc .fig .c-database{fill:color-mix(in srgb, var(--fig-table) 12%, transparent);stroke:var(--fig-table)}
.doc .fig .c-security{fill:color-mix(in srgb, var(--fig-gate) 12%, transparent);stroke:var(--fig-gate)}
.doc .fig .c-cloud{fill:none;stroke:var(--fig-rented);stroke-dasharray:4 4}
.doc .fig .c-external{fill:none;stroke:var(--fig-outside)}
.doc .fig .c-region{fill:none;stroke:var(--border2);stroke-dasharray:8 4}
.doc .fig .c-security-group{fill:none;stroke:var(--danger);stroke-dasharray:4 4}
.doc .fig .c-lane{fill:none;stroke:var(--border);stroke-dasharray:6 6}
.doc .fig .a-default,.doc .fig .a-dashed{stroke:var(--text4);fill:none}
.doc .fig .a-dashed{stroke-dasharray:4 4}
.doc .fig .a-emphasis{stroke:var(--text);fill:none}
.doc .fig .a-security{stroke:var(--fig-gate);fill:none;stroke-dasharray:5 5}
.doc .fig .m-default,.doc .fig .m-dashed{fill:var(--text4)}
.doc .fig .m-emphasis{fill:var(--text)}
.doc .fig .m-security{fill:var(--fig-gate)}
.doc .fig .t-primary{fill:var(--text)}
.doc .fig .t-muted,.doc .fig .t-messagebus,.doc .fig .t-backend,.doc .fig .t-cloud{fill:var(--text3)}
.doc .fig .t-dim{fill:var(--text4)}
.doc .fig .t-frontend{fill:var(--fig-page)}
.doc .fig .t-database{fill:var(--fig-table)}
.doc .fig .t-security{fill:var(--fig-gate)}
.doc .fig .semantic-sigil{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.76}
.doc .fig .semantic-sigil .sigil-fill{fill:currentColor;stroke:none}
.doc .fig .s-frontend{color:var(--fig-page)}
.doc .fig .s-backend{color:var(--fig-core)}
.doc .fig .s-database{color:var(--fig-table)}
.doc .fig .s-security{color:var(--fig-gate)}
.doc .fig .s-cloud{color:var(--fig-rented)}
.doc .fig .s-external{color:var(--fig-outside)}
.doc .split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.doc .panel{padding:20px 22px}   /* a documentation panel breathes a little more; the box is shared */
.doc .panel .k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}   /* a panel's name is one thing on every page — the chart's: 12px, 600, the text colour (Qing, 2026-09-17: the manual's panels read 11px bold grey) */
/* The Instructions page (tenant/instructions.html): the doc shape on the tenant door. Its panels carry prose and
   rows; its calendar legend is three real cells (the calendar's own rules, .cal .cell) standing in a row. */
/* Two to a row where there is room: the drawing and the buttons keep the full measure, the four short panels pair
   off, and the manual is one screenful instead of a scroll (2026-09-16). Below 1180px it is one column again — the
   .pair pages take the same breakpoint. */
@media (min-width:1180px){
  .doc.guide{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}   /* the pairs' gutter: one left half on every Restaurant page */
  .doc.guide .drawing .figure svg{margin-inline:auto}   /* the panel is wider than the drawing here, never narrower */
  .doc.guide .drawing .legend{justify-content:center}
  .doc.guide > h2,.doc.guide > .panel.wide{grid-column:1 / -1}
  .doc.guide > .panel:not(.wide) td.label{width:150px}   /* half the measure: the label keeps less of it */
}
/* Wide enough for the drawing to keep its labels: at 1700px a half column gives it 667px and at 1800px 717px, so
   its 13px type renders at 10 to 11px — the page's own smallest. Then the first two panels pair off as well and the
   manual is three rows (Qing, 2026-09-16: "why the first two panels are not side by side?"). At 1280 a half column
   is 503px and those labels would render at 7px, which is why they keep the full measure there. */
@media (min-width:1700px){
  /* the drawing is 400px tall beside a table of nine rows, so the telephone panel goes under it rather than leaving
     the drawing's box half empty (Qing, 2026-09-16: "the empty space in the fig panel not too big") */
  /* the drawing spans the top; the buttons stand beside the other two, which stack (Qing, 2026-09-16). The .panel
     in each selector is there to outrank .panel.wide above, which the buttons keep for the narrower window. */
  /* three panels, two columns: the drawing and the calendar down the left, the buttons table beside them, ending
     where its rows end rather than stretching to the height of the two (Qing, 2026-09-16) */
  .doc.guide > .panel.drawing{grid-column:1;grid-row:2}
  .doc.guide > .panel.buttons{grid-column:2;grid-row:2 / span 2;align-self:start}
  .doc.guide > .panel.screen{grid-column:1;grid-row:3}
}
.doc.guide h2{margin-bottom:16px}
.doc.guide .panel{margin-bottom:14px}
.doc.guide .panel p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--text3)}
.doc.guide .panel p:last-child{margin-bottom:0}
.doc.guide .panel p b,.doc.guide .panel li b{color:var(--text);font-weight:600}
.doc.guide .panel ul{margin-bottom:0}
.doc.guide .panel li{line-height:1.5}
.doc.guide .panel ol.ladder{margin:6px 0 0}
.doc.guide .panel ol.ladder li{padding:9px 0 9px 40px;font-size:14px}
.doc.guide .panel ol.ladder li::before{top:9px}
/* The life of a reservation, drawn: every arrow is a state the engine allows (core/scheduling TRANSITIONS) and
   carries what makes it happen — a button, the guest, or nothing at all (dashed: the platform by itself). The node
   colours are the day list's pills. The figure keeps its drawn width on a phone and scrolls in its box, because
   shrinking it to 400px makes the labels unreadable. */
.doc.guide .figure{overflow-x:auto;margin:2px 0 10px}
.doc.guide .figure svg{display:block;width:100%;min-width:660px;max-width:880px;height:auto}   /* a figure keeps the width it was drawn for (.doc figure, 2026-09-11: "too big"): stretched to 1493px on a wide window its 11px labels rendered at 19px, larger than the page it explains */
/* The Workflow page's two figures were drawn 1260 wide with 12px labels: they keep that width and scroll in their
   box on a narrow window, rather than shrink their labels to 8px (2026-09-17). Its table tints: blue is new, a
   struck grey is a moment that no longer happens. */
.doc.guide .figure.wide svg{min-width:960px;max-width:1260px}
/* An archify artifact in the page (the Workflow page's first figure): its own page in a frame, the frame in the
   panel's hairline, tall enough for the drawing and its guided-view bar on a laptop; lower on a phone. */
.doc.guide .embed{margin:2px 0 12px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg)}
.doc.guide .embed iframe{display:block;width:100%;height:1120px;border:0;background:var(--bg)}
@media(max-width:900px){.doc.guide .embed iframe{height:720px}}
.doc.guide td.new{color:var(--c-blue)}
.doc.guide td.gone{color:var(--text4);text-decoration:line-through}
.doc.guide .life .node rect{stroke-width:1.1}
.doc.guide .life .wait rect{fill:color-mix(in srgb, var(--warn) 16%, transparent);stroke:var(--warn)}
.doc.guide .life .good rect{fill:color-mix(in srgb, var(--ok) 16%, transparent);stroke:var(--ok)}
.doc.guide .life .end rect{fill:color-mix(in srgb, var(--danger) 14%, transparent);stroke:var(--danger)}
.doc.guide .life .n{fill:var(--text);font-size:14.5px;font-weight:600;text-anchor:middle}
.doc.guide .life .who{fill:var(--text3);font-size:13.5px;font-weight:600}
.doc.guide .life .l{fill:var(--text4);font-size:13px}   /* drawn for the half column: at 0.82 these land on the page's own 11px */
.doc.guide .life .l.mid{text-anchor:middle}
.doc.guide .life .e{fill:none;stroke:var(--border2);stroke-width:1.2}
.doc.guide .life .e.auto{stroke-dasharray:5 4}
.doc.guide .life .head{fill:var(--border2)}
.doc.guide .legend i.wait{background:var(--warn)}
.doc.guide .legend i.good{background:var(--ok)}
.doc.guide .legend i.end{background:var(--danger)}
/* the buttons table shows each button as it looks where you press it, so its first column is as wide as the widest
   button and no wider, and the email beside it keeps a column it can spell a name in */
.doc.guide .moves td.label{width:1%;white-space:nowrap;padding-right:20px}
.doc.guide .moves td:last-child,.doc.guide .moves th:last-child{width:150px}
.doc.guide .moves td .pbtn{cursor:default}
@media (max-width:760px){                        /* at the counter: the lanes stack, and a row of the moves reads as a block */
  .doc.guide .moves thead{display:none}
  .doc.guide .moves tr{display:block;padding:8px 0;border-top:1px solid var(--border)}
  .doc.guide .moves tr:first-child{border-top:none}
  .doc.guide .moves td{display:block;border:none;padding:0}
  .doc.guide .moves td.label{width:auto;padding:0 0 4px}
  .doc.guide .moves td:last-child,.doc.guide .moves th:last-child{width:auto}
  .doc.guide .moves td:last-child{color:var(--text4);margin-top:2px}
  .doc.guide .moves td:last-child::before{content:"Email: "}
}
.doc.guide .cells{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px}
.doc.guide .cells .cell{width:132px;flex:none}
.doc.guide .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--text3);margin:0 0 12px}
.doc.guide .legend span{display:inline-flex;align-items:center;gap:6px}
.doc.guide .legend i{width:12px;height:12px;border-radius:2px;background:var(--bg3)}
.doc.guide .legend i.booked{background:var(--text3)}
.doc.guide .legend i.waiting{background:var(--warn)}
.doc.guide .legend i.full{background:var(--danger)}
/* the head stands over its own column: the cells lose the outer padding and so must the heads above them, or a
   head sits 12px to the right of what it names (measured 2026-09-16 against the buttons table) */
.doc.guide .panel table :is(td,th):first-child{padding-left:0}
.doc.guide .panel table :is(td,th):last-child{padding-right:0}
.doc .panel.own .k{color:var(--text)}
.doc .panel ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--text3)}
.doc .panel li{padding:6px 0;border-top:1px solid var(--border)}
.doc .panel li:first-child{border-top:none}
.doc .panel li b{color:var(--text);font-weight:600}
.doc .panel li .meta{color:var(--text4);font-size:12.5px;margin-left:auto;white-space:nowrap;font-family:var(--fm)}
.doc code{font-family:var(--fm);font-size:0.9em;background:var(--bg3);border-radius:4px;padding:1px 5px;color:var(--text3)}
.doc ol.ladder{list-style:none;counter-reset:s;margin-top:22px}
.doc ol.ladder li{counter-increment:s;position:relative;padding:12px 0 12px 44px;border-top:1px solid var(--border);font-size:14.5px;color:var(--text3)}
.doc ol.ladder li::before{content:counter(s);position:absolute;left:0;top:12px;width:26px;height:26px;border:1px solid var(--border2);border-radius:7px;font-family:var(--fm);font-size:12px;color:var(--text4);display:flex;align-items:center;justify-content:center}
.doc ol.ladder li b{color:var(--text);font-weight:600}
.doc .foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text4)}
.doc .stamp{font-family:var(--fm);font-size:11.5px;color:var(--text4);margin-top:10px}
.doc .tablewrap{overflow-x:auto;margin-top:22px}
.doc .note{font-size:13.5px;color:var(--text4);margin-top:26px}
.doc .note b{color:var(--text);font-weight:600}   /* the word a note leads with, in the text colour — a rule, not seventeen style attributes (2026-09-17) */
.doc pre.tree{font-family:var(--fm);font-size:12.5px;line-height:1.7;color:var(--text3);background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 22px;overflow-x:auto;margin:12px 0 0}
.doc pre.tree b{color:var(--text);font-weight:600}
.doc pre.tree i{color:var(--text4);font-style:normal}
.doc pre.tree em{color:var(--text);font-style:normal}
.doc table.map{width:100%;min-width:820px;border-collapse:collapse;font-size:13px}
.doc table.map code{white-space:nowrap}
.doc table.map th{font-size:10.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--text4);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.doc table.map td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text3);vertical-align:top}
.doc table.map td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.doc table.map td.none{color:var(--text4)}
.doc table.map td small{display:block;color:var(--text4);font-weight:400;font-size:11.5px;margin-top:2px}
.doc table.docs-map td:first-child{white-space:normal;width:22%}   /* the Handshake page: a document's files wrap under its name, the role keeps its room */
.doc table.docs-map td:nth-child(2){width:15%}
.doc table.docs-map td:nth-child(3){width:30%}
/* the assembled instructions: each piece says what it is and where it comes from, then shows itself (2026-09-13) */
.assembled{margin-top:14px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.assembled .piece + .piece{border-top:1px solid var(--border)}   /* not <section>: the page hides those */
.assembled .who{display:flex;align-items:baseline;gap:10px;padding:9px 14px;background:var(--bg2);font-size:12px}
.assembled .who b{color:var(--text);font-weight:600}
.assembled .who span{color:var(--text4)}
.assembled .who i{margin-left:auto;color:var(--text4);font-style:normal;font-variant-numeric:tabular-nums}
.assembled pre{margin:0;padding:12px 14px;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;color:var(--text3);max-height:360px;overflow:auto}   /* the prompt box's face (.prompt-ta) */
.doc ul.docs{list-style:none;margin-top:4px}
.doc ul.docs li{border-top:1px solid var(--border)}
.doc ul.docs a{display:flex;gap:16px;align-items:baseline;padding:13px 2px;text-decoration:none;color:var(--text3);font-size:14.5px;transition:color .15s}
.doc ul.docs a:hover{color:var(--text)}
.doc ul.docs a b{color:var(--text);font-weight:600;flex:0 0 210px;font-family:var(--fm);font-size:13px}
.doc ul.docs a span{color:var(--text4);font-size:13.5px}
/* the board */
.doc.progress h1{margin-bottom:18px;line-height:1.02}
.doc.progress h2{margin-bottom:18px}
.doc.progress code{border-radius:5px;padding:1px 6px;color:var(--text)}
.doc.progress .split{margin-top:0}
.doc.progress .panel li{padding:8px 0;display:flex;gap:10px;align-items:baseline}
.doc.progress .tablewrap{margin-top:0}
.doc.progress table.map{min-width:760px}
.doc.progress .foot{font-size:13.5px}
.doc .empty{color:var(--text4);font-size:13.5px}
.doc .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.doc .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);font-size:13px;color:var(--text3)}
.doc .chip b{color:var(--text);font-weight:600}
.doc .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.doc .phase{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--border)}
.doc .phase:first-of-type{border-top:none}
.doc .phase .ph{font-size:14px;color:var(--text);font-weight:600}
.doc .phase .ph small{display:block;color:var(--text4);font-weight:400;font-size:12px;margin-top:4px;font-family:var(--fm)}
.doc .bar{height:5px;background:var(--bg3);border-radius:3px;margin-top:10px;overflow:hidden}
.doc .bar i{display:block;height:100%;background:var(--ok)}
.doc .tasks{display:flex;flex-direction:column;gap:6px}
.doc .task{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);font-size:13.5px;color:var(--text3);cursor:pointer}
.doc .task:hover{border-color:var(--text4)}
.doc .task .id{font-family:var(--fm);font-size:11.5px;color:var(--text4);flex:0 0 44px}
.doc .task .t{flex:1}
.doc .task .who{font-size:12px;color:var(--text4);white-space:nowrap}
.doc .task .st{font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap}
.doc .task.done .st{color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, transparent)}
.doc .task.doing .st{color:var(--warn);background:color-mix(in srgb, var(--warn) 14%, transparent)}
.doc .task.blocked .st{color:var(--danger);background:color-mix(in srgb, var(--danger) 12%, transparent)}
.doc .task.todo .st{color:var(--text3);background:var(--bg3)}
.doc .task.done .t{color:var(--text4);text-decoration:line-through;text-decoration-color:var(--border)}
.doc .ev{display:none;margin:2px 0 8px 54px;font-size:12.5px;color:var(--text4);font-family:var(--fm);line-height:1.7}
.doc .ev.open{display:block}
.doc .ev b{color:var(--text3);font-weight:500}
.doc .pending{color:var(--warn);font-weight:600}
@media(max-width:760px){.doc .split{grid-template-columns:1fr}.doc .phase{grid-template-columns:1fr}}
@media(max-width:640px){.doc ul.docs a{flex-direction:column;gap:4px}.doc ul.docs a b{flex:none}}

/* a category's name inside a card preview: a value's heading, spaced by a class, not by the page */
.cat{margin:14px 0 4px}


/* the pack's daily-work pages (S7-3): a day's navigation, past rows, the requests as cards, actions in a row */
.daynav{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
/* a day has more than one view — the list and the room: the pages of one thing, joined, not two rail entries */
.views{display:inline-flex;gap:0}
.views .pbtn{border-radius:0;margin:0}
.views .pbtn:first-child{border-radius:9px 0 0 9px}
.views .pbtn:last-child{border-radius:0 9px 9px 0;margin-left:-1px}
.views .pbtn.on{border-color:var(--text);color:var(--text);background:var(--bg2);z-index:1}
tr.past td{color:var(--text4)}
.reqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.req .when{font-size:18px;font-weight:700;margin-bottom:6px}
.req .acts{display:flex;gap:8px;align-items:center}
.req .acts form{display:inline}
.move{display:inline-flex;gap:6px;align-items:center}

/* the floor plan (S7-3): the room as a stage, tables as boxes — tokens only; taken = inverted, inactive = dashed */
.legend{display:inline-flex;gap:12px;align-items:center;font-size:12px;color:var(--text4)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--text4);vertical-align:-2px;margin-right:5px}
.legend i.taken{background:var(--text);border-color:var(--text)}
.legend i.off{border-style:dashed;opacity:.5}
.legend i.combo{border-style:dashed}
.stage{position:relative;width:100%;padding-top:62%;background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;touch-action:none}
.stage .tbl{position:absolute;box-sizing:border-box;border:1px solid var(--border2);background:var(--bg);color:var(--text3);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;overflow:hidden;user-select:none;cursor:pointer}
.stage .tbl b{font-size:13px;color:var(--text)}
.stage .tbl.rect{border-radius:8px}
.stage .tbl.circle{border-radius:50%}
.stage .tbl.free{border-color:var(--text4)}
.stage .tbl.taken{background:var(--text);border-color:var(--text);color:var(--bg)}
.stage .tbl.taken b{color:var(--bg)}
.stage .tbl.off{opacity:.4;border-style:dashed}
.stage .tbl.combo{border-style:dashed}
.stage .tbl.sel{outline:2px solid var(--text);outline-offset:2px}
.stage .tbl .ct{position:absolute;top:3px;right:6px;font-size:11px;font-weight:700}
.stage.edit .tbl{cursor:move}
.stage .arealbl{position:absolute;font-size:11px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:.08em;pointer-events:none}
.fp-note{min-height:16px;margin:8px 0 14px}   /* its type is .src's; the height is kept so the room does not jump when the note empties */
.sheet.wide{max-width:960px}
.settings h4,.fp-panel h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text4);margin:16px 0 6px}
.settings .frow,.fp-panel .frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.settings .frow label,.fp-panel .frow label{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--text3)}
.settings input:where([type=text],[type=number],[type=time],[type=date],[type=email],[type=url]),.fp-panel input{max-width:150px}   /* short fields; a select keeps the one width of every select */   /* short fields; size from the shared stylesheet */
.fp-panel .del{background:none;border:none;color:var(--text4);cursor:pointer;font-size:16px;padding:0 6px}
.fp-panel .del:hover{color:var(--text)}
tr.fp-dim td{color:var(--text4)}
.settings table input[type=time]{max-width:110px}
.settings .frow{margin:8px 0 4px}
/* settings as a label column and a field column: one field per line, hints beside the field */
.settings .fields{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:10px 18px;align-items:center;margin:8px 0 4px}
.settings .fields label{font-size:13px;color:var(--text3)}
.settings .fields>div{font-size:13px}   /* a value that is stated, not typed, reads at the label's size: it inherited the body's 16px and stood out as a heading (Qing, 2026-09-14: "why the time have big font??") */
.settings .fields .hint{margin:0 0 0 10px;display:inline}
.settings .fields input.wide,.settings .fields textarea.wide{max-width:420px;width:100%}
.settings .fields.links input.wide{max-width:none}   /* the site's links stand under its texts, which run to the panel's edge; a 420px field ended 300px short of them (Qing, 2026-10-15: "right side is not aligned") */
/* the Texts page of the Website group: prose fields read like a document — the section's name as a small heading above
   its field (no label column), the field as wide as prose reads well, growing with its text (control.js), no inner
   scroll, no grip; the language marker only when the site speaks more than one language */
.settings .fields.texts{display:block;margin:14px 0 4px}
.settings .fields.texts>label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin:0 0 8px}   /* a label's tone, as in .fields label; the card's name above stays the white one */
.settings .fields.texts>label .hint{display:block;text-transform:none;letter-spacing:0;margin:4px 0 0;font-size:12px;line-height:1.45}
.settings .fields.texts>div{margin-bottom:26px}
.settings .fields.texts>div.by-lang{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px 18px}   /* only a text's languages stand side by side: unnamed, this grid reached the Emails page's chips and laid each out as a full-width row (2026-09-16) */   /* a text's languages side by side — German and English as one pair (Qing, 2026-09-15: "eng and german field side by side"); one language fills the row */
.settings .fields.texts .lang{display:flex;gap:10px;align-items:flex-start;min-width:0}
.settings .fields.texts .lang>span{width:24px;color:var(--text4);font-size:12px;padding-top:9px}
.settings .fields.texts textarea,.settings .fields.texts input.wide{flex:1;min-width:0;max-width:none}
.settings .fields.texts textarea{overflow:hidden;min-height:0}   /* the prose fields grow with their text (control.js): no scroll inside these */
/* the floor plan palette: a table dragged from its button, the room lighting up as the drop target */
.fp-pal{cursor:grab;touch-action:none;user-select:none}
.fp-ghost{position:fixed;z-index:40;pointer-events:none;opacity:.85;border:1px solid var(--text4);background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.fp-ghost.rect{border-radius:8px}
.fp-ghost.circle{border-radius:50%}
.stage.drop{border-color:var(--text4)}
.stage-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--text4);font-size:13px;pointer-events:none}
.stage.edit .arealbl{pointer-events:auto;cursor:move;padding:2px 6px;margin:-2px -6px;border:1px dashed transparent;border-radius:6px;user-select:none;touch-action:none}
.stage.edit .arealbl:hover{border-color:var(--border2);color:var(--text3)}
/* a choice of two, as a segment: the sheet's walk-in / reservation */
.seg{gap:8px}
.segopt{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;height:36px;padding:0 14px;border:1px solid var(--border2);border-radius:9px;cursor:pointer;font-size:13px;color:var(--text3)}   /* the one control size */
.segopt:has(input:checked){border-color:var(--text);color:var(--text)}
.segopt input[type=radio]{appearance:none;-webkit-appearance:none;width:12px;height:12px;border-radius:50%;border:1px solid var(--border2);background:var(--bg);margin:0}
.segopt input[type=radio]:checked{border-color:var(--text);background:var(--text);box-shadow:inset 0 0 0 3px var(--bg2)}
.segopt .hint{margin:0;display:inline}
/* a booking's row opens its sheet; the sheet carries the facts and finger-sized actions (S7-3 UX audit) */
tr.rowlink{cursor:pointer}
tr.rowlink:hover td,tr.rowlink:focus-visible td{color:var(--text);background:var(--bg3)}   /* the inset tone: the panel is bg2, so bg2 showed nothing */
tr.rowlink:focus-visible{outline:none}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 20px;font-size:14px}
.facts dt{padding-top:2px}   /* the type is th's */
.facts dd{margin:0;color:var(--text3)}
/* the day's list keeps one geometry from day to day: a fixed layout, the columns in shares of the width, the guest's
   name taking what the others leave — so paging through the month moves nothing under the calendar (Qing,
   2026-09-16: "when click through dates, the col of the table underneath changes pos"). */
/* the two lists hug their values (Qing, 2026-09-17: a field between the name and the number, a field after the last
   column): each list fills its half exactly, its columns sized to their values, an even gutter between them. */
.bk-table,table.guests{table-layout:auto;width:100%}   /* the list fills its half exactly: the browser sizes the columns to their values, the surplus is small in a half (Qing, 2026-09-17: the right edge touched the panel — the table overflowed its half and scrolled) */
.bk-table th,.bk-table td,table.guests th,table.guests td{padding-right:16px}   /* the gutter: seven columns in a 616px content box (the half at 1600) leave no more — measured 627px at 20px */
.bk-table th,table.guests th,.bk-table td:nth-child(1),.bk-table td:nth-child(3),table.guests td:nth-child(2),table.guests td:nth-child(5),table.guests td:nth-child(6){white-space:nowrap}   /* a head, a time, a number, a date stay on one line; a name, a note, a state's "until" may wrap */
table.guests td:nth-child(3){overflow-wrap:anywhere}   /* an e-mail breaks rather than widening the list */
.bk-table th:last-child,.bk-table td:last-child,table.guests th:last-child,table.guests td:last-child{padding-right:12px}
.chart.daylist,.chart.guests,.chart.refunds{overflow-x:auto}
.chart.refunds td{white-space:nowrap}.chart.refunds td:nth-child(1),.chart.refunds td:nth-child(2),.chart.refunds td:nth-child(5){white-space:normal}   /* the seating, the name and what happened wrap, a name between its words only (2026-10-16: "Muste / r"); the amount and the buttons never: in a half (from 1600 px) the buttons stood outside the panel (screening of 2026-09-28, UX-2) */
.chart.charges td:nth-child(4),.chart.charges td:nth-child(6){white-space:normal}.chart.charges td:nth-child(5){white-space:nowrap}   /* To charge has the menu before the money: the menu and what happened wrap, the amount never */
.chart.refunds td.act{text-align:right;white-space:normal}.chart.refunds td.act form{display:inline-block;margin:2px 0}.chart.refunds td.act form+form{margin-left:6px}.chart.refunds td.act .pbtn{white-space:nowrap}   /* a tight half puts the × under Mark refunded, never outside the panel */
.refund-in{width:6.5em;margin:0 6px 0 0;text-align:right;vertical-align:middle}   /* the amount refunded: the whole deposit unless changed (audit R18) */
.chart.refunds{container-type:inline-size}
@media (min-width:761px){@container (max-width:760px){   /* a half (from 1600 px) or a tablet: a panel too narrow for the values and the buttons side by side gives each row's buttons a line of their own under it, at the right, and the values keep their columns (2026-10-16: at 1800 px To charge's buttons stood outside the panel) */
  .chart.refunds table{display:grid;grid-template-columns:repeat(5,auto)}   /* the values' columns, sized to them as the table sized its own */
  .chart.charges table{grid-template-columns:repeat(6,auto)}
  .chart.refunds thead,.chart.refunds tbody,.chart.refunds tr{display:contents}
  .chart.refunds th:last-child{display:none}
  .chart.refunds tbody td{border-bottom:none}
  .chart.refunds tbody td.act{grid-column:1 / -1;padding-top:0;border-bottom:1px solid var(--border)}   /* the buttons close the row, its line under them */
}}
@media (max-width:760px){                       /* a phone or a narrow tablet: each deposit reads as a block, its buttons under it (UX-2) */
  .chart.refunds thead{display:none}
  .chart.refunds tr{display:block;padding:10px 0;border-top:1px solid var(--border)}
  .chart.refunds tr:first-child{border-top:none}
  .chart.refunds tbody td{display:block;border:none;padding:0;white-space:normal}   /* one left edge: the seating, the name, the money */
  .chart.refunds td[data-label]::before{content:attr(data-label) ": "}
  .chart.refunds tbody td.act{padding-top:8px}
}
.bk-table .pill,table.guests .pill,.visits .pill{min-width:84px;text-align:center}   /* a column of states reads as a column: one width for confirmed, requested, arrived, no show, cancelled (Qing, 2026-09-17: "pill width not the same?") */
.bk-table tbody :where(tr.rowlink:nth-child(4n+3)) td,table.guests tbody :where(tr.rowlink:nth-child(2n)) td{background:var(--bg)}   /* every other row on the grey ground, so a long list reads in rows (Qing, 2026-09-16); the day's rows are each followed by a folded detail row, the guests' are not */
/* a row's detail (2026-09-17, in place of the sheet): on the day's list it unfolds beneath its row; on Guests it stands in the right half. One open at a time; the open row reads in the text colour, nothing more (Qing, 2026-09-17: "why need the vertical line") */
.detail{display:none}
.detail.show{display:block}
tr.detail.show{display:table-row}
tr.rowlink.open td{color:var(--text)}
tr.rowlink.fp-dim + tr.detail{display:none}   /* a row the room dims takes its detail with it */
.bk-table tbody tr.detail td{background:var(--bg);padding:14px 0 18px;white-space:normal;overflow-wrap:normal}   /* the detail on the page ground, its content aligned with the name column (Qing: "title not aligned with the content") */
.detail-grid{display:grid;grid-template-columns:1fr;gap:6px}   /* the facts, then the buttons */
.detail-grid .facts{margin:0}
.detail-grid .facts dd{max-width:52ch}   /* a note wraps at a line's length, so an opened row never widens the table */
.detail-grid .acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px}   /* the buttons end at the right edge, as every button row on the doors does (Qing, 2026-09-17) */
.detail-grid .acts .hint{margin:0 auto 0 0}   /* a sentence in the row reads from the left; the buttons keep the right */
.detail-grid .acts form{display:inline-flex;gap:8px;align-items:center}
.detail-grid .page-src{grid-column:1 / -1;margin:0}
/* Guests (2026-09-17): the list in the left half, the opened guest's reservations in the right — the pair every Restaurant page has */
.pair.guests{align-items:start}
.guest-detail .hint{margin:0}
.guest-detail:has(.detail.show) > .hint{display:none}
.guest-detail .detail .sub{margin:0 0 12px;font-size:13px;color:var(--text3)}
.guest-detail .visits{width:auto;max-width:100%;margin:0;font-size:13px}
.guest-detail .visits th,.guest-detail .visits td{padding:6px 36px 6px 0;white-space:nowrap;border-bottom:1px solid var(--border)}
.guest-detail .visits th:last-child,.guest-detail .visits td:last-child{padding-right:0}
.guest-detail .visits tr:last-child td{border-bottom:0}
.guest-detail .visits tr.past td{color:var(--text4)}
@media (max-width:640px){.bk-table th,.bk-table td{padding:12px 6px;font-size:13px}.bk-table td:first-child,.bk-table th:first-child{padding-left:12px}}
/* the room stays legible on a phone: it keeps a minimum width and scrolls inside its own frame */
.stage-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Floor plan: since the doors fit the window, the room is capped at a readable width and the day's list sits beside it
   on a wide window; below 1280 px the two stack, the room first. The list's column is never narrower than its six
   columns need (480 px) — the room gives way first — and the column scrolls inside itself before the page ever does. */
.fp-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.fp-room{max-width:760px;min-width:0}
.fp-side{min-width:0;overflow-x:auto}
.fp-side table{margin:0}
@media(min-width:1280px){.fp-layout{grid-template-columns:minmax(420px,760px) minmax(480px,1fr)}}
@media (max-width:700px){.stage-wrap .stage{min-width:640px;padding-top:0;height:400px}}
/* ── A pair: two boxes that belong together stand side by side on a wide window and stack below 1180 px, where
   their fields stop fitting next to each other (Qing, 2026-09-14: "these two panels side by side instead of row by
   row?", "booking page and seats and turns can be placed side by side"). ── */
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;margin-bottom:24px}
/* the day beside the month (Qing, 2026-09-17: "make the calendar and the rows side by side"): from 1600px — a monitor,
   not a laptop — the month, and the room under it, stand in a left column and the day's list in the right, the list a
   little wider; below they stack, the month first, and the list keeps the whole width its eight columns want. The
   list is a container: narrow, its cells tighten, whatever the window. */
.pair.day,.pair.guests{grid-template-columns:minmax(0,1fr)}
@media(min-width:1600px){.pair.day,.pair.guests{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}   /* half and half from 1600px — a half of at least 660px fits the day's seven columns without a scroll; a laptop stacks: the two panels share the pair equally and change only with the window, never with the day's rows (Qing, 2026-09-17: "half half for the two panels … otherwise fixed"; "the width of the left panel … the same for each page") */

.chart.room{display:flex;flex-direction:column}
.chart.room .stage-wrap{flex:1;min-height:240px;display:flex}
.chart.room .stage{padding-top:0;height:100%;flex:1}
.chart.room .k.row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}   /* the same: the room's name stays where a name is */
.pair > .chart{margin-bottom:0;min-width:0}
.pair > .column{min-width:0}.pair > .column > .chart:last-child{margin-bottom:0}   /* a column of panels in a pair: the panels keep their distance, the column ends flush */
.pair .chart table{width:100%}
@media(min-width:1180px){.pair{grid-template-columns:1fr 1fr}}
/* The Assistant page: the prompt is what the page is about, so it takes the left half and the settings stand
   row by row on the right (Qing, 2026-09-16). Stacked below 1180px the settings come first, the order they
   are read in — the prompt is the long box at the end. */
@media(min-width:1180px){
  .pair.agent{align-items:stretch}                                   /* the two halves end together */
  .pair.agent>.column:last-child{order:-1;display:flex;flex-direction:column}
  /* the prompt's box takes the height the settings beside it set — three panels for one tenant, four for another —
     and the writing area takes what the panel's name and its buttons leave (Qing, 2026-09-16: "make the height of
     the sys prompt smart that it matches the height of the right panels"). */
  .pair.agent>.column:last-child>.chart{flex:1;display:flex;flex-direction:column}
  .pair.agent>.column:last-child>.chart>form{flex:1;display:flex;flex-direction:column;min-height:0}
  .pair.agent>.column:last-child .prompt-ta{flex:1}
}

/* The Emails page (tenant/emails.html). Rebuilt 2026-09-16 on Qing's reading of it: one button per email, apart
   from each other and the row exactly as wide as the email under it; the email as the guest receives it, its subject
   on the sheet's own ground above the sheet the way a mail client shows it; and the tops of that panel and of the
   sentences beside it on one line. The sheet stands in an isolated frame, so nothing of it reaches the door's styles
   and nothing of the door's reaches it; the frame takes the sheet's own height (control.js fits it), so no ground is
   left under the last line ("the background of the letters sometimes is too larger than the content"). */
.chart > .pair{margin-bottom:0}
/* The Emails page is two panels (Qing, 2026-09-16: "the layout of this page looks horrible"): on the left what one
   writes — which email, its subject, its opening and closing, the placeholders as a row of chips — and on the right the
   mail as the guest reads it, no wider than a mail is. The two end together, like the Assistant page's pair. */
.pair.emails{row-gap:24px}
@media(min-width:1180px){.pair.emails{grid-template-columns:1fr 1fr;align-items:stretch}}   /* half and half (Qing, 2026-09-16: "why not the two panels half half"); the mail's sheet is fluid up to its own width */
.pair.emails > .chart{margin-bottom:0}
/* the two end together, and the left one's Save row stands at its foot, level with the mail's */
@media(min-width:1180px){.pair.emails > .chart:first-child,.emails .forms,.emails .forms form:not([hidden]){display:flex;flex-direction:column}
  .emails .forms,.emails .forms form:not([hidden]){flex:1}
  .emails .forms form:not([hidden]) > .prow{margin-top:auto}}
.emails .preview .mail{max-width:640px}
.emails .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}   /* which email: a row of buttons, the shown one framed */
.emails .tabs .pbtn{min-width:0;padding:0 10px;overflow:hidden}
.emails .tabs .pbtn.on{border-color:var(--text);color:var(--text);background:var(--bg2)}
.emails .langs .views{margin:0}
.emails .mail{border:1px solid var(--border);border-radius:10px;overflow:hidden}
/* the subject line stands where the sheet stands: the sheet is 560px centred in the frame, so the line is inset by
   the gutter beside it and the subject reads as the guest's mail client shows it, over the sheet */
.emails .mail-head{display:flex;align-items:baseline;gap:18px;font-size:13px;padding:13px max(15px, calc((100% - 560px) / 2));
  border-bottom:1px solid var(--border);border-bottom-color:color-mix(in srgb, currentColor 20%, transparent)}
.emails .mail-head .sub{color:inherit;opacity:.55}
.emails iframe.email{width:100%;height:560px;border:0;display:block;background:transparent}   /* the height until control.js has the sheet's own */
/* a placeholder is a chip that inserts itself; the way back to the platform's sentence is a quiet button beside the
   field; the guest's link is a locked line under the closing — shown, never typed (William, 2026-09-15) */
.emails button.pill.ph{cursor:pointer;font:inherit;background:none;color:var(--text3);margin:0 6px 6px 0}
.emails button.pill.ph:hover{color:var(--text);border-color:var(--text4)}
.emails .chips{display:flex;flex-wrap:wrap;gap:6px;line-height:1}   /* a chip is as wide as its word */
.emails button.pill.ph{margin:0}
.emails button.reset{background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* A clock is ours, not the browser's: a native time input is rendered in the reader's own locale, which put "06:00
   PM" next to our 24-hour tables (Qing, 2026-09-14). This is a plain field holding exactly what we store. */
input.clock{max-width:92px;text-align:center;font-variant-numeric:tabular-nums}

.settings textarea{width:100%;max-width:560px}
.chart .settings table{margin-bottom:4px}

/* ── A Markdown document in the reading room (admin/document_markdown.html): the renderer's plain tags in the design's
   type; the same rules a website text renders with on its own site are not needed here ── */
.doc.markdown{max-width:760px;margin:0 auto;padding:56px 24px 96px;line-height:1.6;color:var(--text)}
.doc.markdown h1{margin:0 0 24px}
.doc.markdown h2{font-size:24px;font-weight:600;letter-spacing:-0.02em;margin:40px 0 12px}
.doc.markdown h3{font-size:18px;font-weight:600;margin:28px 0 8px}
.doc.markdown p,.doc.markdown ul,.doc.markdown ol,.doc.markdown blockquote{margin:0 0 16px}
.doc.markdown ul,.doc.markdown ol{padding-left:22px}
.doc.markdown li{margin-bottom:4px}
.doc.markdown blockquote{border-left:2px solid var(--border);padding-left:16px;color:var(--text3)}
.doc.markdown pre{background:var(--bg3);padding:14px 16px;border-radius:8px;overflow-x:auto;margin:0 0 16px}
.doc.markdown pre code{background:none;padding:0}
.doc.markdown table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:14px}
.doc.markdown th,.doc.markdown td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.doc.markdown th{color:var(--text4);font-weight:600}
.doc.markdown hr{border:0;border-top:1px solid var(--border);margin:32px 0}
.doc.markdown img{max-width:100%}

/* ── The Palette page (admin/palette.html): the admin's dark palette in real colour, compact enough for one screen ── */
.palette h2{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text4);margin:16px 0 6px}
.palette .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.palette .sw{display:grid;grid-template-columns:22px 1fr;gap:0 10px;align-items:center;border:1px solid var(--border);border-radius:9px;padding:7px 10px;background:var(--bg2)}
.palette .sw i{display:block;width:22px;height:22px;border-radius:6px;grid-row:1 / span 4;border:1px solid var(--border)}
.palette .sw b{display:block;font-size:12.5px;line-height:1.3}
.palette .sw code{display:block;color:var(--text4);font-size:11px;line-height:1.3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.palette .sw span{display:block;font-size:11.5px;line-height:1.3;color:var(--text3)}
.palette .live{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* the two sets side by side, each panel wearing its own (data-theme on the panel) with the contrast of every text token and
   meaning on the card and on the page; under 4.5 shows in --danger */
.palette.themes{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1100px){.palette.themes{grid-template-columns:1fr}}
.palette .theme{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:14px 18px 18px}
.palette .theme h2.t{font-size:14px;font-weight:700;letter-spacing:-0.01em;text-transform:none;color:var(--text);margin:0 0 2px}
.palette .theme .sub{font-size:12px;color:var(--text4);margin:0 0 6px}
.palette .sw .cr{display:block;font-size:11px;line-height:1.3;color:var(--text4)}
.palette .sw .cr.low{color:var(--danger)}
/* the Design page's component demos: the real classes inside each set's panel, so the page cannot drift from the stylesheet */
.palette .demo{margin:8px 0 18px}
.palette .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.palette .note{font-size:12px;color:var(--text4)}
.palette .demo .cards,.palette .demo .chart,.palette .demo .rail{margin-bottom:0}
.palette .demo .acct-menu{position:static;display:block;width:200px}
.palette .demo .type p{margin:0 0 6px}
.palette .demo .type .k{margin-bottom:6px}
.palette .scrollbox{height:80px;width:200px;overflow:auto;border:1px solid var(--border);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--text3)}   /* the demo of a box that scrolls */
.palette .demo :is(.overlay,.cf-overlay){position:static;display:flex;border-radius:12px}.palette .demo .sheet{max-width:420px}   /* the sheet and the question stand in the flow, on their scrim */
/* Bookings: the month calendar — one cell per day, the covers against the capacity as a line along the bottom */
.chart .k.head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;row-gap:10px}   /* beside the room (1180–1600px) the name and its buttons do not fit one row: the buttons drop under the name, whole, instead of breaking the month over two lines and clipping the arrow (2026-09-17) */
.chart .k.head > span:first-child{white-space:nowrap}
.chart .k.head > span:first-child [role=tooltip]{white-space:normal}   /* the name stays on one line, its ? text wraps: it ran out of its box on one line (2026-10-21) */
.chart .k .figures{display:block;margin-top:5px;font:400 13px/1.4 var(--f);text-transform:none;letter-spacing:0;color:var(--text3)}   /* the day's figures: one quiet line under a panel's name — the requests under the month, the day's own under its date — in place of the five cards beside the calendar (Qing, 2026-09-17: "do we need the stat boxes next to the calendar?") */
.chart .k.head .nav{margin-left:auto}   /* the name keeps a name's place at the panel's top; the buttons hang from the same edge — centred against a 36px button the name sat 10px lower than every other panel's (Qing, 2026-09-16) */
.chart .k.head .nav{display:inline-flex;align-items:center;gap:8px}   /* the day's buttons, then the month's turn (Qing, 2026-09-16: "include the two top buttons in the calendar panel") */
.chart .k.head .nav .pbtn{margin:0;text-transform:none;letter-spacing:0}   /* a button in the panel's name row keeps a button's case */
.chart .k.head .nav .turn{display:inline-flex;gap:6px;margin-left:8px}
.chart .k.head .nav .pbtn.cancelled{min-width:134px}   /* Show and Hide cancelled are one width, so the toggle does not shift its neighbours (Qing, 2026-09-16; the wider label measures 132px) */
.cal .grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;container-type:inline-size}
/* A cell is a seventh of whatever the month is given, and beside the room that is about 60 px: "18:00 · 8/8"
   does not fit and was being cut mid-figure. The figure is the part that goes, never the time or the word —
   the cell keeps its bar and its colour, and the title says the numbers in full. */
@container (max-width:610px){.cal .cell .r{display:none}}
.cal .cell .r{font-size:11px}      /* the figure reads under the time, so a 12/24 still fits a 100 px cell */
.cal .wd{font-size:14px;font-weight:600;color:var(--text3);text-align:center;letter-spacing:.06em;padding-bottom:8px}
.cal .cell{position:relative;display:block;min-height:68px;padding:8px 10px 11px;border:1px solid var(--border2);border-radius:8px;background:none;color:var(--text3);text-decoration:none;overflow:hidden}   /* on the panel's own ground: white in the light set */
.cal .cell .n{display:block;font-size:15px;font-weight:600;color:var(--text)}
.cal .cell .c{display:block;font-size:12px;color:var(--text3);margin-top:4px}
.cal .cell i{position:absolute;left:0;bottom:0;height:4px;background:var(--text3)}
.cal .cell.full i{background:var(--danger)}
/* every gauge sits on a track: without one an empty bar is nothing and a short bar is a speck */
.cal .cell .s::after,.cal .cell::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--bg3);border-radius:2px;z-index:0}
.cal .cell::after{height:4px}
.cal .cell:has(.s)::after{display:none}   /* a day of seatings has a track per seating, not one for the day */
.cal .cell.closed::after,.cal .cell.closed .s::after{display:none}   /* nothing to fill on a closed day */
.cal .cell .s i,.cal .cell>i{z-index:1;border-radius:2px}
/* A counter of a dozen seats or fewer is counted, not measured: one square per seat under the time, booked in the
   bar's grey, waiting in amber, free as the track's tone, all red when full. The seating keeps no track and no
   bottom padding then — the squares are the line's floor. A narrow cell (the calendar beside the room) keeps the
   squares but flattens them to a segmented bar so eight still fit in 40 px. */
/* A seat's side is one figure, --seat, taken from the calendar's own width (the grid is the container): a
   seventh of it less the cell's frame and the seven gaps, split eight ways, and never more than 12 px. Width and
   height both read it, so the box is a square at every width — a flex row would stretch it to the row's height. */
.cal .cell .s .seats{--seat:min(12px,calc(((100cqw - 24px) / 7 - 36px) / 8));display:flex;gap:2px;margin-top:3px;height:var(--seat)}
.cal .cell .s .seats b{flex:0 1 var(--seat);height:var(--seat);border-radius:2px;background:var(--bg3)}
.cal .cell .s .seats b.k{background:var(--text3)}
.cal .cell .s .seats b.w{background:var(--warn)}
.cal .cell .s.full .seats b.k{background:var(--danger)}
.cal .cell .s:has(.seats){padding-bottom:0}
.cal .cell .s:has(.seats)::after{display:none}
/* An evening guests arrive into (Le Bistro: one seating, arrivals 18:00 to 20:00) shows its squares alone, without
   the start time and the figure (William, 2026-10-21): five to a row, each a fifth of the cell's inside less the gaps,
   never more than 16 px, so ten seats are two even rows under the date. The title keeps the figure. */
.cal .cell .s.bare .seats{--seat:min(16px,calc(((100cqw - 24px) / 7 - 34px) / 5));display:grid;grid-template-columns:repeat(5,var(--seat));gap:3px;height:auto;margin-top:6px}
.cal .cell .s.bare .seats b{margin:0}   /* a booked square is <b class="k">, and .chart .k (a panel's name) has a bottom margin: in a grid it would open a gap under the first row */
@container (max-width:610px){.cal .cell .s .seats{gap:1px;height:3px}.cal .cell .s .seats b{height:3px;border-radius:1px}
  .cal .cell .s.bare .seats{display:flex;gap:1px;margin-top:4px}}   /* beside the room: the same flat segmented bar as a seating's */
.cal .cell .s span,.cal .cell .c{position:relative;z-index:1}
/* what is waiting for an answer rides the same bar after what is booked, in the request pill's colour (--warn:
   pending); its figure follows the booked one as "+2". A full seating is red (--danger: nothing more can be
   booked there — William, 2026-09-14: "make it red: full"), the colour a closed day's label already wears; the two
   differ in shape, a full bar against a dashed frame with no bar. A full bar leaves the waiting share no room, so
   red and amber never meet on one line. */
.cal .cell i.w,.cal .cell .s i.w{background:var(--warn)}
.cal .cell em.w{font-style:normal;color:var(--warn)}
/* A day is one of three things, and each has its own ground rather than its own shade of grey (Qing, 2026-09-16:
   "for old dates how to differentiate the box looks", "shall the box for closed days be grayed out or colored red"):
   an evening one can book stands as a box on its own ground; a closed day is a dashed frame with no ground — nothing
   to fill, and red is taken: it means full; a day that has passed keeps its box, so the grid stays whole, sits on
   the grey ground, and everything in it fades to the muted grey — the frame, the figures, the seats, a red full
   seating too — so the eye runs over the white month ahead (a first cut took the frame away and left the month
   looking half drawn; a second put the future on grey and the past on white, the wrong way about). A day of
   another month stays faint. */
.cal .cell.closed{border-style:dashed;background:none}
.cal .cell.closed .c{color:var(--text4)}
.cal .cell.out{opacity:.55}
.cal .cell.past{background:var(--bg);border-color:var(--border);color:var(--text4)}   /* the box stays, on the grey ground: gone (Qing, 2026-09-16: "past boxes gray, current and future white") */
.cal .cell.past .n{color:var(--text4);font-weight:500}
.cal .cell.past .c,.cal .cell.past .s,.cal .cell.past .s.full,.cal .cell.past em.w{color:var(--text4)}   /* red and amber included: it is over */
.cal .cell.past .s i,.cal .cell.past>i,.cal .cell.past .s.full i,.cal .cell.past .s .seats b.k,.cal .cell.past .s.full .seats b.k,.cal .cell.past .s .seats b.w{background:var(--border2)}
.cal .cell.past:hover{border-color:var(--border2)}
/* today: the number in a filled disc, no frame — the white frame means the selected day and nothing else */
.cal .cell.today .n{display:block;width:22px;height:22px;line-height:21px;padding:0 .8px 0 0;margin:0 0 0 -4px;text-align:center;border-radius:50%;background:var(--text);color:var(--bg)}   /* a 22px circle; the digits are seated by their ink, not the line box: 21px of line puts the cap centre within a quarter pixel of the middle in Chrome's and Safari's font boxes alike, .8px of right padding centres the two digits (measured 2026-09-16) */
.cal .cell.active{border-color:var(--text);color:var(--text);opacity:1;box-shadow:inset 0 0 0 1px var(--text)}   /* the day you are looking at wears a 2px frame in the text colour — the border and one inset ring, so the grid keeps its size (Qing, 2026-09-17: the four states — past, future, today, selected — told apart by ground and form, never by a hue: colour on this calendar is the seats' */
.cal .cell:hover{background:var(--bg3);color:var(--text);opacity:1}   /* the inset tone, not a second white frame */
.cal .cell:hover .s .seats b,.cal .cell:hover .s::after,.cal .cell:hover::after{background:var(--border2)}   /* a free seat and an empty track are painted in the inset tone too: on the hovered cell's inset ground they vanished (Qing, 2026-09-17) — there they step to the hairline's darker tone */
.cal .cell:hover .s .seats b.k{background:var(--text3)}.cal .cell:hover .s .seats b.w{background:var(--warn)}.cal .cell:hover .s.full .seats b.k{background:var(--danger)}
.cal .cell.past:hover .s .seats b.k,.cal .cell.past:hover .s .seats b.w,.cal .cell.past:hover .s.full .seats b.k{background:var(--text4)}   /* a past day's taken seats keep their quiet grey, one step darker than the hovered ground */
.cal .cell.active .c{color:var(--text3)}
.cal .cell .s{display:block;position:relative;font-size:12px;color:var(--text3);margin-top:5px;padding-bottom:6px;white-space:nowrap}
.cal .cell .s i{position:absolute;left:0;bottom:0;height:3px;background:var(--text3)}
.cal .cell .s.full{color:var(--text3)}
.cal .cell .s.full i{background:var(--danger)}
.cal .cell.active .s{color:var(--text3)}
.cal .cell .s.other{color:var(--text3)}   /* covers outside the seatings: shown, not hidden */
/* One hue, one meaning, in the cell too (Qing, 2026-09-14: "using colors in the calendar to indicate text with
   semantics like closed, full"). The word and the count already say it — the colour only lets the eye find it across a
   month, so it is never the only carrier. Placed after .active, whose greys would otherwise win. */
.cal .cell.closed .c,.cal .cell.active.closed .c{color:var(--text4)}       /* a closed day is a quiet fact: the dashed
   frame and the word say it; red is kept for a full seating alone (William, 2026-09-14: "closed grey") */
.cal .cell.full .c,.cal .cell.active.full .c{color:var(--danger)}          /* the day has no seat left */
.cal .cell .s.full,.cal .cell.active .s.full{color:var(--danger)}          /* one seating of the day is taken */
/* the width the pages read at (2026-09-11): the cap grew to 1600 px for tables, forms, the calendar and the figures; a line of
   prose stays at a measure a reader can follow */
.doc p,.doc .note,.doc figcaption,.doc .lead,.doc .lead.full{max-width:900px}
/* The guest's own page (app.emictech.com/<tenant>/r/<token>, 2026-10-21). A restaurant with its own look heads it with
   its name, set as its letter sets a name without a logo, and EmicTech stands small at the foot. The sentence before the
   button reads across the panel at the text's size. On a phone the label column is 45 % of the row, not 220 px: beside
   220 px an address stacked word by word in 80 px */
.nav-in .house{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.guestpage .say{margin-top:14px;max-width:900px;font-size:15px;line-height:1.5;color:var(--text)}
.guestpage .by{margin-top:32px;display:flex;justify-content:center}
.guestpage .by a{color:var(--text4)}
.guestpage .by a:hover{color:var(--text3)}
.guestpage .by svg{height:18px;width:auto;display:block}
@media (max-width:560px){.guestpage td.label{width:45%}}
