/* =====================================================================
   launcher.css: the Admin Launcher's own rules (R80).
   The tokens, the bar, day and night, and the fonts are the fleet's dress
   (R145: /lg/looking-glass.css, then /lg/roses.css for the Roses-era class
   names this page was written with). What's left here is the Launcher's
   own: engraved double borders, monogram cartouches, a hinge with a
   fleuron between the two doors, restrained antique gold. Accents are per
   app (--app on the card, toned for day or night by the shell) 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 { min-height: 100vh; }
button { font: inherit; border: 2px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 9px 18px; min-height: 44px; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 700; }
button:active { background: var(--panel2); }
button.primary { background: var(--ink); border-color: var(--ink); color: var(--cream); font-weight: 800; }
button.ghost { border-color: var(--line); color: var(--muted); background: var(--paper); }
button.danger { border-color: var(--danger); color: var(--danger); }
button:disabled { opacity: .45; 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(--gold-text); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---- the door: login ---- */
#login { position: fixed; inset: 0; background: var(--cream); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
#login .box { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 4px 14px var(--shadow); border-radius: var(--r); padding: 30px 28px 26px; max-width: 400px; width: 100%; text-align: center; }
#login h2 { font-family: var(--fell); color: var(--ink); font-size: 32px; font-weight: 400; margin: 10px 0 6px; }
#login .logo, #needLink .logo { height: 54px; max-width: 100%; }
:root:not([data-theme="dark"]) .logo.night, :root[data-theme="dark"] .logo.day { display: none; }
#login input { width: 100%; margin-top: 8px; }
#login .err { color: var(--danger); font-size: 14px; min-height: 1.2em; margin: 8px 0 6px; font-family: var(--sans); }

/* ---- the bar is the fleet's (R145); the find box and the page's own chips sit in its slot ---- */
.find { position: relative; }
.find input { width: 240px; min-height: 44px; padding: 8px 14px 8px 34px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: 15px; }
.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 var(--sans); color: var(--faint); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; background: var(--cream); pointer-events: none; }
.find input:focus + .glyph + kbd, .find input:not(:placeholder-shown) ~ kbd { display: none; }
body.editing #editBtn { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-text); }
.lg-slot .chip { font-size: 15px; }
#outBtn.sure { border-color: var(--danger); color: var(--danger); }
@media (max-width: 1000px) { .find input { width: 190px; } }
/* a phone: the chips sit beside who is signed in, the find box takes the row under them */
@media (max-width: 720px) { .lg-slot { flex-basis: 0; } .find { flex: 1 1 100%; order: 9; } .find input { width: 100%; } .find kbd { display: none; } }

/* ---- 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(--muted); font-family: var(--fellsc); 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: var(--sans); 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: var(--fell); font-style: italic; letter-spacing: 0; font-size: 15px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); font-family: var(--fell); 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 {
  --app: var(--info);
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); 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(--app); border-radius: 0 0 3px 3px; opacity: .9; }
.app:hover { box-shadow: inset 0 0 60px var(--vellum), 0 8px 26px var(--shadow2); }
.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: var(--fellsc); font-size: 22px; line-height: 1.15; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.door .label { font-family: var(--sans); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--app); 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(--app); 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: var(--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(--app); }
/* 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; }

/* ---- 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(--app, var(--gold-text)); background: radial-gradient(circle at 50% 38%, var(--paper) 0%, var(--panel2) 100%);
  border: 1.5px solid var(--app, var(--gold-text));
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px color-mix(in srgb, var(--app, var(--gold-text)) 55%, transparent), 0 1px 2px rgba(var(--ink-rgb), .12);
  font-family: var(--fellsc); 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(--paper), inset 0 0 0 4px var(--app), 0 0 16px color-mix(in srgb, var(--app) 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(--paper); 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(--shadow2); 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: var(--fellsc); font-size: 20px; color: var(--gold-text); }
.site .name { font-family: var(--sans); 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(--paper); color: var(--muted); line-height: 1; }
.tools button:hover { color: var(--gold-text); border-color: var(--gold-text); }
.tools button.sure { background: var(--danger); border-color: var(--danger); 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(--gold), inset 0 0 60px var(--vellum); }
.app.drop-after { box-shadow: 4px 0 0 var(--gold), inset 0 0 60px var(--vellum); }
.site.drop-before { box-shadow: -4px 0 0 var(--gold); }
.site.drop-after { box-shadow: 4px 0 0 var(--gold); }
.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(--cream); border-top: 2px solid var(--gold); box-shadow: 0 -8px 30px var(--shadow2); align-items: center; gap: 10px; flex-wrap: wrap; }
body.editing .editbar { display: flex; }
.editbar .spacer { flex: 1; }
.editbar button { padding: 8px 14px; }
.editbar .state { font-size: 13.5px; color: var(--muted); font-family: var(--sans); }
.editbar .state.dirty { color: var(--gold-text); 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: var(--fell); font-style: italic; font-size: 17px; cursor: pointer; background: none; }
body.editing .add-inline:hover { color: var(--gold-text); border-color: var(--gold-text); }
body.editing .add-inline.site-add { min-height: 0; padding: 14px 8px; font-size: 15px; }

/* ---- dialogs ---- */
dialog { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 16px 60px var(--shadow2); }
dialog::backdrop { background: var(--scrim); }
dialog form, dialog .body { padding: 22px 24px 20px; }
dialog h3 { font-family: var(--fell); color: var(--ink); font-weight: 400; font-size: 28px; margin: 0 0 4px; }
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: var(--sans); }
.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: var(--fellsc); color: var(--muted); 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(--paper); box-shadow: 0 0 0 1px var(--line2); cursor: pointer; padding: 0; min-height: 0; }
.swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.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(--cream); grid-column: 1 / -1; }
.preview .cartouche { --app: var(--pv, var(--info)); }
.preview .pvname { font-family: var(--fellsc); font-size: 20px; }
.preview .pvlabel { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pv, var(--info)); }
.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(--danger); font-size: 14px; min-height: 1.2em; margin-top: 10px; font-family: var(--sans); }
.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: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-text); min-width: 44px; white-space: nowrap; }
.versions li .meta { color: var(--muted); font-size: 13.5px; font-family: var(--sans); }
.versions li button { margin-left: auto; min-height: 32px; padding: 3px 12px; font-size: 14px; }
.versions li .v .now { color: var(--muted); font-family: var(--sans); font-weight: 400; 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 { .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 accents arrive toned for the theme (LG.tone in
   launcher.js, R145), so a plum label still reads on navy with no lift
   of our own ---- */

/* =====================================================================
   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 and the edit
   bar; 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(--app); }
.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: var(--sans); 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(--app); }
.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(--paper); 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(--gold); }
.app.drop-after, .site.drop-after { box-shadow: 4px 0 0 var(--gold); }

@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)); }
}

/* R109: a door that signs you in wears a small key at the medallion's foot */
.door.haspass .cartouche { position: relative; }
.door.haspass .cartouche::after {
  content: "⚷"; position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); color: var(--app); border: 1px solid var(--app);
  font: 12px/18px var(--sans); text-align: center;
}
.door.companion.haspass .cartouche::after { display: none; }

/* =====================================================================
   R112: no lunette under an engraving. Séb, 20 Sept 2026: the icons look
   ridiculous inside the circles. They did: the medallion is 84px, the
   ring and its inset borders eat 12px of padding, and a portrait
   engraving contained in what's left came out about 37px wide. The
   cartouche was drawn for a two-letter monogram and it is still right
   for one; an icon simply doesn't need a frame, so it doesn't get one.
   The monogram medallion is untouched and still appears on every door
   that has no icon.
   ===================================================================== */
.cartouche.has-icon {
  background: none; border: 0; box-shadow: none; overflow: visible;
}
.cartouche.has-icon img { padding: 0; width: 100%; height: 100%; object-fit: contain; }

/* the large door: the engraving gets the whole column and stands taller
   than the circle ever was, because nothing is cropping it now */
.door.admin .cartouche.has-icon {
  width: 100%; height: 106px; border-radius: 0;
  filter: drop-shadow(0 2px 3px rgba(var(--ink-rgb), .22));
  transition: transform .15s, filter .15s;
}
.door.admin:hover .cartouche.has-icon {
  box-shadow: none;
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 5px 9px rgba(var(--ink-rgb), .3));
}
/* the small door: same treatment, kept small (today this is Five Doors) */
.door.companion .cartouche.small.has-icon { width: 26px; height: 26px; }

/* an unhung door still fades, but a dashed ring around a picture is noise */
.door.unhung .cartouche.has-icon { border-style: none; opacity: .45; filter: grayscale(.6); }
/* the key for a door that signs you in: no ring to hang off, so it sits
   just inside the engraving's bottom corner and keeps its own little disc */
.door.haspass .cartouche.has-icon::after { right: 8px; bottom: 0; }

@media (max-width: 640px) {
  .door.admin .cartouche.has-icon { height: 88px; }
}

/* =====================================================================
   R113: the key belongs to the engraving, not to the column. R112 left
   the icon box the full width of the tile with the picture centred
   inside it, so the key, pinned to the box's corner, landed in the empty
   parchment to the right and read as a thing beside the icon rather than
   a mark on it. Worse, the eye then saw the engraving as shoved left.

   The box now fits the picture: the image goes back into the flow at its
   own width, the box shrinks to it, and the corner the key hangs off is
   the engraving's own corner. Nothing is displaced, because nothing but
   the picture was ever in there.
   ===================================================================== */
.cartouche.has-icon img { position: static; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.cartouche.has-icon .mono { display: none; }   /* no longer needed underneath, and it was holding the box open */
.door.admin .cartouche.has-icon { width: auto; max-width: 100%; }
.door.companion .cartouche.small.has-icon { width: auto; height: 26px; }

/* the key: a small seal on the engraving's lower corner, quieter than the
   ringed disc it wears on a monogram medallion, and never in the way of a
   click */
.door.haspass .cartouche.has-icon::after {
  right: 0; bottom: 3px; pointer-events: none;
  width: 17px; height: 17px;
  font-size: 10px; line-height: 15px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border-color: color-mix(in srgb, var(--app) 45%, transparent);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .18);
}

/* =====================================================================
   R114: a new icon family, and the grid finds its middle. Séb, 20 Sept
   2026: the icons should be centred, not left-aligned, and here is a set
   that works better than the engravings.

   The new marks are square, gold-framed tiles that carry their own bevel
   and their own shadow, so the drop-shadow R112 added under a cut-out
   engraving now reads as a halo. It goes; the hover lift stays.
   ===================================================================== */

/* the grid sits in the middle of the page rather than packing left, which
   only ever looked deliberate when a row happened to be full */
.apps, .sites { justify-content: center; }
body.editing .sites { justify-content: center; }

/* and the mark sits in the middle of its own column, whatever its shape */
.cartouche.has-icon { margin-inline: auto; }

/* a framed tile needs no shadow of ours; it brought its own */
.door.admin .cartouche.has-icon { filter: none; }
.door.admin:hover .cartouche.has-icon {
  filter: drop-shadow(0 4px 8px rgba(var(--ink-rgb), .28));
}

/* =====================================================================
   R117: half the air. Séb, 20 Sept 2026: too much blank space around the
   icons, especially top and bottom, and the same below on the links.
   Every vertical measure in the compact layout is halved: the page's own
   padding, the row gaps in both grids, the padding inside a tile, the gap
   between a mark and its name, and the rule that divides the apps from
   the destinations. Horizontal measures are left alone, because the
   columns were not the complaint.
   ===================================================================== */
main { padding-top: 14px; padding-bottom: 70px; }
@media (max-width: 640px) { main { padding-top: 10px; padding-bottom: 70px; } }

.apps { gap: 11px 12px; }
.sites, body.editing .sites { gap: 7px 12px; }
.app { padding: 3px 4px 4px; }
.site { padding: 3px 2px 2px; gap: 4px; }

.door { gap: 4px; }
.door.admin { padding: 2px 4px 1px; }
.door.companion { padding: 2px 8px; margin-top: 2px; }

#sitesSection { margin-top: 17px; padding-top: 13px; }

@media (max-width: 640px) {
  .apps { gap: 9px 4px; }
}

/* ---- R156: uploading an icon from the edit card ---- */
.icon-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
.icon-row .icon-thumb { width: 36px; height: 36px; object-fit: contain; }
.icon-row .icon-up { min-height: 32px; padding: 3px 12px; font-size: 14px; }
.icon-note { flex: 1 1 220px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.icon-compare { display: flex; align-items: flex-end; justify-content: center; gap: 22px; padding: 14px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: var(--plaque-radius); background: var(--cream); flex-wrap: wrap; }
.icon-compare figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.icon-compare figure[hidden] { display: none; }
.icon-compare img { width: 128px; height: 128px; object-fit: contain; }
.icon-compare .small img { width: 42px; height: 42px; }
.icon-compare figcaption { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.icon-meta { font-family: var(--sans); font-size: 13.5px; color: var(--muted); min-height: 1.2em; margin: 8px 0 0; }
#icGo:disabled { opacity: .5; cursor: default; }

/* =====================================================================
   R157: the emblems a fifth larger on the desktop. Séb, 24 Sept 2026:
   the main icons 20% bigger without making the tiles bigger, or not
   much. Only the large (Admin) door grows; the companion door and the
   daily destinations keep their size, so the two doors read further apart.

   The room comes from the tile's side padding first. The column was
   120px, less 4px of tile padding and 4px of door padding on each side,
   so a square icon was held to 104px by its width, not by its 106px box.
   A fifth more is 125px. With the side padding gone the column only has
   to grow from 120 to 126px to hold it. Height can't be borrowed the same
   way, since R117 already halved it, so each row grows by about 19px.

   Desktop only (641px and up): the phone layout and the Tablet Launcher,
   which draws its own cards, are left as they were.
   ===================================================================== */
@media (min-width: 641px) {
  body:not([data-mode="tablets"]) .apps { grid-template-columns: repeat(auto-fill, 126px); }
  body:not([data-mode="tablets"]) .app { padding-inline: 0; }
  body:not([data-mode="tablets"]) .door.admin { padding-inline: 0; }
  /* an engraved or framed icon: 106px box → 125px (and 104px wide → 125px) */
  body:not([data-mode="tablets"]) .door.admin .cartouche.has-icon { height: 125px; }
  /* a monogram medallion on a door with no icon grows with it: 84 → 101px */
  body:not([data-mode="tablets"]) .door.admin .cartouche:not(.has-icon) { width: 101px; height: 101px; font-size: 38px; }
  /* the hover lift was 1.05; at this size 1.03 moves it the same few pixels */
  body:not([data-mode="tablets"]) .door.admin:hover .cartouche.has-icon { transform: translateY(-3px) scale(1.03); }
}