/* =====================================================================
   launcher.css — the Admin Launcher's own rules (R80).
   Tokens and components come from /chassis/roses.css (ORGAN 9), cream
   paper by default; this file adds the parchment treatment the handover
   asked for: engraved double borders, monogram cartouches, a hinge with a
   fleuron between the two doors, restrained antique gold. Accents are per
   app (--accent on the card) and exist for recognition, not decoration.
   Priorities, in order: recognition, navigation, admin/guild switching,
   editing, beauty, growth. Nothing here trades 1 to 4 for 5.
   ===================================================================== */

:root {
  --plaque-radius: 6px;
  --hair: rgba(var(--ink-rgb), .18);
  --hair2: rgba(var(--ink-rgb), .34);
  --vellum: rgba(var(--ink-rgb), .035);
}

html { scroll-behavior: smooth; }
body { font-size: 17px; min-height: 100vh; }
button { font: inherit; border: 1.5px solid var(--accent); background: var(--card); color: var(--ink); border-radius: 12px; padding: 7px 16px; min-height: 40px; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; }
button:active { background: var(--panel2); }
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 700; }
button.ghost { border-color: var(--line); color: var(--muted); }
button.danger { border-color: var(--deep-red); color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--field); color: var(--ink); }
input::placeholder { color: var(--placeholder); }
input:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---- the door: login ---- */
#login { position: fixed; inset: 0; background: var(--paper); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
#login .box { background: var(--card); border: 1.5px solid var(--accent); outline: 1px solid var(--hair); outline-offset: -6px; border-radius: var(--plaque-radius); padding: 34px 30px 28px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 12px 40px var(--shadow); }
#login h2 { font-family: 'IM Fell English SC', serif; color: var(--accent); font-size: 32px; font-weight: 400; margin: 2px 0 4px; letter-spacing: .04em; }
#login .brand-script { font-size: 28px; display: block; }
#login .suits { color: var(--deep-red); font-size: 15px; margin-left: 8px; }
#login input { width: 100%; margin-top: 8px; }
#login .err { color: var(--bad); font-size: 14px; min-height: 1.2em; margin: 8px 0 6px; font-family: 'Helvetica Neue', Helvetica, sans-serif; }

/* ---- header ---- */
header { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--paper); border-bottom: 2px solid var(--accent-fill); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
header h1 { font-size: 22px; margin: 0; font-weight: 400; white-space: nowrap; display: flex; align-items: baseline; gap: 10px; }
header h1 .brand { font-family: 'Great Vibes', cursive; color: var(--accent); font-size: 28px; }
header h1 .suits { color: var(--deep-red); font-size: 15px; }
header h1 .title { font-family: 'IM Fell English SC', serif; letter-spacing: .06em; }
header h1 small { font-weight: 400; color: var(--muted); font-size: 14px; display: block; font-family: 'IM Fell English', serif; font-style: italic; white-space: normal; }
header .titlebox { display: flex; flex-direction: column; }
header .spacer { flex: 1; }
.find { position: relative; }
.find input { width: 240px; padding-left: 34px; border-radius: 99px; background: var(--card); }
.find .glyph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 17px; pointer-events: none; }
.find kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 12px/1 'Helvetica Neue', Helvetica, sans-serif; color: var(--faint); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; background: var(--paper); pointer-events: none; }
.find input:focus + .glyph + kbd, .find input:not(:placeholder-shown) ~ kbd { display: none; }
.actor { font-size: 13.5px; color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; border: 1.5px solid var(--line); border-radius: 99px; padding: 4px 12px; white-space: nowrap; }
body.editing #editBtn { background: var(--gold-tint); color: var(--accent); font-weight: 700; }
@media (max-width: 1000px) { header { gap: 8px; padding: 12px 16px; } header h1 .brand { display: none; } .find input { width: 180px; } }
@media (max-width: 640px) { header h1 small { display: none; } .find { order: 9; flex-basis: 100%; } .find input { width: 100%; } }

/* ---- main, sections, the engraved rule ---- */
main { max-width: 1240px; margin: 0 auto; padding: 22px 24px 140px; }
@media (max-width: 640px) { main { padding: 16px 16px 140px; } }
.rule { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; color: var(--accent); font-family: 'IM Fell English SC', serif; font-weight: 400; font-size: 19px; letter-spacing: .12em; }
.rule::before, .rule::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--hair2); box-shadow: 0 2px 0 var(--hair); }
.rule .n { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 12.5px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.rule .hint { font-family: 'IM Fell English', serif; font-style: italic; letter-spacing: 0; font-size: 15px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); font-family: 'IM Fell English', serif; font-style: italic; padding: 30px 10px; border: 1px dashed var(--line2); border-radius: var(--plaque-radius); }

/* ---- the app cards: a large Admin door, a smaller companion door below ---- */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.app {
  --accent: var(--accent2);
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1.5px solid var(--line2); border-radius: var(--plaque-radius);
  outline: 1px solid var(--hair); outline-offset: -6px;
  box-shadow: inset 0 0 60px var(--vellum), 0 1px 0 rgba(var(--ink-rgb), .06);
  transition: box-shadow .15s, transform .15s;
}
.app::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; opacity: .9; }
.app:hover { box-shadow: inset 0 0 60px var(--vellum), 0 8px 26px var(--shadow); }
.app.hidden-by-find { display: none; }
.door { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; padding: 20px 20px 18px; border-radius: var(--plaque-radius) var(--plaque-radius) 0 0; }
.door.admin { min-height: 124px; }
.door.admin:hover { background: var(--gold-tint); }
.door .text { display: flex; flex-direction: column; min-width: 0; }
.door .name { font-family: 'IM Fell English SC', serif; font-size: 22px; line-height: 1.15; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.door .label { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
.door.admin .label::before { content: "◆ "; font-size: 9px; vertical-align: 2px; }
.hinge { display: flex; align-items: center; gap: 10px; padding: 0 20px; color: var(--accent); font-size: 15px; line-height: 1; }
.hinge::before, .hinge::after { content: ""; flex: 1; border-top: 1px solid var(--hair2); }
.door.companion { padding: 12px 20px 16px; gap: 12px; border-radius: 0 0 var(--plaque-radius) var(--plaque-radius); }
.door.companion:hover { background: var(--panel2); }
.door.companion .label { margin: 0; color: var(--ink); letter-spacing: .08em; text-transform: none; font-size: 15px; font-family: 'EB Garamond', Baskerville, Georgia, serif; }
.door.companion .arrow { margin-left: auto; color: var(--muted); font-size: 18px; transition: transform .15s; }
.door.companion:hover .arrow { transform: translateX(3px); color: var(--accent); }
/* a door with no URL yet: hangs there, dashed, and says so */
.door.unhung { cursor: not-allowed; }
.door.unhung .cartouche { border-style: dashed; opacity: .7; }
.door.unhung .label::after { content: " · no door yet"; text-transform: none; letter-spacing: 0; color: var(--faint); }
.door.companion.unhung .label::after { content: " (no door yet)"; }

/* ---- the cartouche: the monogram medallion, drawn by CSS until the icon family exists ---- */
.cartouche {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%;
  color: var(--accent); background: radial-gradient(circle at 50% 38%, var(--card) 0%, var(--panel2) 100%);
  border: 1.5px solid var(--accent);
  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent), 0 1px 2px rgba(var(--ink-rgb), .12);
  font-family: 'IM Fell English SC', serif; font-size: 30px; line-height: 1; letter-spacing: -.02em;
  overflow: hidden;
}
.cartouche img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.cartouche.small { width: 42px; height: 42px; font-size: 17px; box-shadow: none; border-width: 1px; }
.cartouche.small img { padding: 7px; }
.door.admin:hover .cartouche { box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 400px) { .cartouche { width: 64px; height: 64px; font-size: 25px; } .door .name { font-size: 20px; } }

/* ---- daily destinations: small tiles with the site's own mark in a plain frame ---- */
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.site { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line2); border-radius: var(--plaque-radius); padding: 14px 8px 12px; outline: 1px solid var(--hair); outline-offset: -4px; transition: box-shadow .15s; }
.site:hover { box-shadow: 0 6px 18px var(--shadow); background: var(--gold-tint); }
.site .mark { width: 44px; height: 44px; border-radius: 10px; background: var(--field); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.site .mark img { width: 30px; height: 30px; object-fit: contain; }
.site .mark .mono { font-family: 'IM Fell English SC', serif; font-size: 20px; color: var(--accent); }
.site .name { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; text-align: center; line-height: 1.2; }
.site.hidden-by-find { display: none; }

/* ---- edit mode ---- */
.tools { display: none; position: absolute; top: 8px; right: 8px; gap: 4px; z-index: 2; }
body.editing .tools { display: flex; }
.tools button, .grip { min-height: 30px; height: 30px; padding: 0 9px; font-size: 14px; border-radius: 8px; border-color: var(--line2); background: var(--card); color: var(--muted); line-height: 1; }
.tools button:hover { color: var(--accent); border-color: var(--accent); }
.tools button.sure { background: var(--deep-red); border-color: var(--deep-red); color: #fff; font-weight: 700; }
.grip { display: none; position: absolute; top: 8px; left: 8px; cursor: grab; z-index: 2; letter-spacing: -2px; font-size: 16px; user-select: none; touch-action: none; }
body.editing .grip { display: inline-flex; align-items: center; }
body.editing .app, body.editing .site { border-style: dashed; }
body.editing .door, body.editing .site { cursor: default; }
.app.dragging, .site.dragging { opacity: .45; transform: scale(.98); }
.app.drop-before { box-shadow: -4px 0 0 var(--accent-fill), inset 0 0 60px var(--vellum); }
.app.drop-after { box-shadow: 4px 0 0 var(--accent-fill), inset 0 0 60px var(--vellum); }
.site.drop-before { box-shadow: -4px 0 0 var(--accent-fill); }
.site.drop-after { box-shadow: 4px 0 0 var(--accent-fill); }
.site .tools { top: 4px; right: 4px; } .site .grip { top: 4px; left: 4px; }
.site .tools button { height: 26px; min-height: 26px; padding: 0 7px; font-size: 13px; }
.editbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 2px solid var(--accent-fill); box-shadow: 0 -8px 30px var(--shadow); align-items: center; gap: 10px; flex-wrap: wrap; }
body.editing .editbar { display: flex; }
.editbar .spacer { flex: 1; }
.editbar .state { font-size: 13.5px; color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.editbar .state.dirty { color: var(--accent); font-weight: 700; }
.editbar .add-inline { display: none; }
body.editing .add-inline { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 1.5px dashed var(--line2); border-radius: var(--plaque-radius); color: var(--muted); font-family: 'IM Fell English', serif; font-style: italic; font-size: 17px; cursor: pointer; background: none; }
body.editing .add-inline:hover { color: var(--accent); border-color: var(--accent); }
body.editing .add-inline.site-add { min-height: 0; padding: 14px 8px; font-size: 15px; }

/* ---- dialogs ---- */
dialog { border: 1.5px solid var(--accent); outline: 1px solid var(--hair); outline-offset: -6px; border-radius: var(--plaque-radius); background: var(--card); color: var(--ink); padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 16px 60px var(--shadow); }
dialog::backdrop { background: var(--scrim); }
dialog form, dialog .body { padding: 22px 24px 20px; }
dialog h3 { font-family: 'IM Fell English SC', serif; color: var(--accent); font-weight: 400; font-size: 26px; margin: 0 0 4px; letter-spacing: .04em; }
dialog .whimsy { margin: 0 0 16px; font-size: 15px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fields .wide { grid-column: 1 / -1; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.fields label input { text-transform: none; letter-spacing: 0; font-size: 16px; }
.fields fieldset { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--plaque-radius); padding: 10px 14px 14px; margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fields legend { font-family: 'IM Fell English SC', serif; color: var(--accent); font-size: 17px; letter-spacing: .06em; padding: 0 6px; }
@media (max-width: 560px) { .fields, .fields fieldset { grid-template-columns: 1fr; } }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line2); cursor: pointer; padding: 0; min-height: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--accent); }
.swatches input[type=color] { width: 40px; height: 30px; padding: 2px; border-radius: 8px; }
.preview { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--plaque-radius); background: var(--paper); grid-column: 1 / -1; }
.preview .cartouche { --accent: var(--pv, var(--accent2)); }
.preview .pvname { font-family: 'IM Fell English SC', serif; font-size: 20px; }
.preview .pvlabel { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pv, var(--accent2)); }
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.dlg-actions .left { margin-right: auto; }
.problem { color: var(--bad); font-size: 14px; min-height: 1.2em; margin-top: 10px; font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.versions { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.versions li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.versions li .v { font-family: 'IM Fell English SC', serif; color: var(--accent); min-width: 44px; }
.versions li .meta { color: var(--muted); font-size: 13.5px; font-family: 'Helvetica Neue', Helvetica, sans-serif; }
.versions li button { margin-left: auto; min-height: 32px; padding: 3px 12px; font-size: 14px; }
.versions li.current .v::after { content: " · now"; color: var(--muted); font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; }
.check { display: flex; align-items: center; gap: 10px; text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; color: var(--ink) !important; flex-direction: row !important; }
.check input { width: 20px; height: 20px; }

/* ---- first run ---- */
#firstRun { max-width: 520px; margin: 60px auto; text-align: center; }
#firstRun p { color: var(--muted); }

@media print { header, .editbar, .tools, .grip { display: none !important; } .app, .site { break-inside: avoid; } }

/* ---- edit mode, second pass (R80 review of the first screenshots):
   the tools never sit on top of a name or a mark ---- */
body.editing .door.admin { padding-top: 50px; }
body.editing .sites { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.editing .site { padding-top: 40px; }
body.editing .site .tools { top: auto; bottom: auto; left: auto; right: 4px; top: 4px; }
body.editing .site .tools button:nth-child(-n+2) { display: none; }   /* arrows: drag does it here; the app cards keep them */
body.editing .toast { bottom: 96px; }
@media (max-width: 640px) { body.editing .toast { bottom: 150px; } }

/* ---- icons over monograms: the monogram waits underneath ---- */
.cartouche, .site .mark { position: relative; }
.cartouche img, .site .mark img { position: absolute; inset: 0; margin: auto; opacity: 0; transition: opacity .2s; }
.site .mark img { width: 30px; height: 30px; }
.cartouche.has-icon img, .site .mark.has-icon img { opacity: 1; }
.cartouche.has-icon .mono, .site .mark.has-icon .mono { visibility: hidden; }

/* ---- night: the muted accents are daylight colours; by night they are
   lifted toward the ink so a plum label still reads on navy ---- */
:root[data-theme="dark"] .app .door .label,
:root[data-theme="dark"] .app .cartouche,
:root[data-theme="dark"] .app .hinge { color: color-mix(in srgb, var(--accent) 50%, #FBF6E4); }
:root[data-theme="dark"] .app .cartouche { border-color: color-mix(in srgb, var(--accent) 60%, #FBF6E4); }
:root[data-theme="dark"] .app .door.companion .label { color: var(--ink); }
:root[data-theme="dark"] .app::before { background: color-mix(in srgb, var(--accent) 70%, #FBF6E4); }

/* =====================================================================
   R81: the compact launcher. Séb, 15 Sept 2026: every app on one screen,
   no section titles, narrower tiles, less text, no boxes; let the icons
   breathe. Everything above still holds for dialogs, edit bar, and
   header; these rules replace the card and tile look.
   ===================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main { max-width: 1480px; padding-top: 28px; }

/* apps: a grid of medallions */
.apps { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 10px; }
.app {
  background: none; border: 0; outline: 0; box-shadow: none;
  align-items: center; text-align: center; border-radius: 16px; padding: 6px 4px 8px;
  transition: background .15s;
}
.app::before { display: none; }
.app:hover { background: rgba(var(--ink-rgb), .04); box-shadow: none; }
.door { flex-direction: column; gap: 8px; padding: 0; border-radius: 12px; background: none !important; width: 100%; }
.door.admin { min-height: 0; padding: 4px 4px 2px; }
.door .name { font-size: 16.5px; line-height: 1.2; letter-spacing: .01em; }
.door.admin .cartouche { width: 84px; height: 84px; font-size: 32px; transition: transform .15s, box-shadow .15s; }
.door.admin:hover .cartouche { transform: translateY(-2px) scale(1.04); }
.door.admin:hover .name { color: var(--accent); }
.hinge { display: none; }

/* the companion door: one quiet line under the name */
.door.companion { flex-direction: row; justify-content: center; gap: 6px; padding: 3px 8px; margin-top: 4px; width: auto; border-radius: 99px; }
.door.companion .cartouche.small { width: 22px; height: 22px; font-size: 10px; border-width: 1px; box-shadow: none; }
.door.companion .label { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 12.5px; letter-spacing: .02em; color: var(--muted); }
.door.companion:hover { background: rgba(var(--ink-rgb), .07) !important; }
.door.companion:hover .label { color: var(--accent); }
.door.companion .arrow { display: none; }

/* a door with no URL yet: faded and dashed, no words (the tooltip says it) */
.door.unhung .label::after, .door.companion.unhung .label::after { content: none; }
.door.unhung .cartouche { opacity: .5; border-style: dashed; }
.door.unhung .name, .door.unhung .label { opacity: .6; }

/* the break between apps and sites: a hairline, no title */
#sitesSection { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hair); }

/* sites: small round marks on the paper */
.sites { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 6px; }
.site { background: none; border: 0; outline: 0; padding: 6px 2px 4px; gap: 7px; border-radius: 12px; box-shadow: none; }
.site:hover { background: rgba(var(--ink-rgb), .05); box-shadow: none; }
.site .mark { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--card); box-shadow: 0 1px 3px rgba(var(--ink-rgb), .16); transition: transform .15s; }
.site:hover .mark { transform: translateY(-2px); }
.site .mark img { width: 26px; height: 26px; }
.site .name { font-size: 12.5px; color: var(--muted); }
.site:hover .name { color: var(--ink); }

/* edit mode on the compact tiles: the tools sit in a row above, the tile
   shows its bounds so a drag has somewhere to land */
body.editing .app, body.editing .site { border: 1.5px dashed var(--line2); background: rgba(var(--ink-rgb), .02); }
body.editing .app { padding-top: 40px; }
body.editing .site { padding-top: 34px; }
body.editing .door.admin { padding-top: 4px; }
.app .tools { top: 6px; right: 6px; gap: 2px; }
.app .tools button { height: 26px; min-height: 26px; padding: 0 6px; font-size: 12.5px; }
.app .grip, .site .grip { top: 6px; left: 6px; height: 26px; min-height: 26px; padding: 0 6px; }
body.editing .add-inline { min-height: 150px; border-radius: 16px; font-size: 15px; }
body.editing .add-inline.site-add { min-height: 0; }
.app.drop-before, .site.drop-before { box-shadow: -4px 0 0 var(--accent-fill); }
.app.drop-after, .site.drop-after { box-shadow: 4px 0 0 var(--accent-fill); }

@media (max-width: 640px) {
  .apps { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 20px 4px; }
  .door.admin .cartouche { width: 68px; height: 68px; font-size: 26px; }
  .door .name { font-size: 15px; }
  .app .tools button:nth-child(-n+2) { display: none; }
}

/* R81, second pass: fixed, narrow columns rather than stretched ones */
.apps { grid-template-columns: repeat(auto-fill, 128px); justify-content: start; gap: 22px 16px; }
.sites { grid-template-columns: repeat(auto-fill, 84px); justify-content: start; gap: 14px 12px; }
.door.companion { max-width: 100%; }
.door.companion .label { line-height: 1.25; }
/* edit mode on a narrow tile: grip, edit, and remove; dragging does the moving */
.app .tools button:nth-child(-n+2) { display: none; }
@media (max-width: 640px) {
  .apps { grid-template-columns: repeat(auto-fill, 108px); justify-content: space-between; gap: 18px 6px; }
  .sites { justify-content: space-between; }
}
.apps { grid-template-columns: repeat(auto-fill, 120px); gap: 22px 12px; }
body.editing .sites { grid-template-columns: repeat(auto-fill, 120px); gap: 14px 12px; }
@media (max-width: 640px) {
  .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 4px; }
  .sites { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.editing .sites { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}