/* The shell's chrome (designs/minion-town-spa.md § 1 and § 2). The gutter
   sits on the shorter viewport axis; the corner button at its end paints
   above the stage; an expanded panel shares the chrome's one background
   with no delimiter, and the iframe pane is inset and framed. */
:root {
  --gutter: 56px;
  --chrome-bg: #f2efe8;
  --chrome-fg: #1d1f24;
  --chrome-accent: #2f6f5e;
  --pane-bg: #ffffff;
  --label-fg: #8a5300;
  --path-bg: #dcebe5;
  --path-fg: #1f4f42;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --chrome-bg: #1d1f24;
    --chrome-fg: #e8e6e1;
    --chrome-accent: #7fc8b0;
    --pane-bg: #2a2d33;
  --label-fg: #e2b25e;
  --path-bg: #2b4a41;
  --path-fg: #cfeee3;
    --label-fg: #e2b25e;
    --path-bg: #2b4a41;
    --path-fg: #cfeee3;
  }
}
:root[data-scheme="dark"] {
  color-scheme: dark;
  --chrome-bg: #1d1f24;
  --chrome-fg: #e8e6e1;
  --chrome-accent: #7fc8b0;
  --pane-bg: #2a2d33;
}
:root[data-scheme="light"] { color-scheme: light; }

body.shell {
  background: var(--chrome-bg);
  color: var(--chrome-fg);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "chrome stage";
}
#stage { grid-area: stage; position: relative; z-index: 0; overflow: auto; background: var(--chrome-bg); }
#chrome {
  grid-area: chrome;
  position: relative;
  z-index: 10;
  background: var(--chrome-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.shell:not([data-ready]) #chrome { visibility: hidden; }
#gutter { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; pointer-events: none; }
#gutter .slot { width: 40px; height: 40px; }
#corner {
  width: 44px;
  height: 44px;
  margin: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--chrome-accent);
  color: var(--chrome-bg);
  font: 600 22px/1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}
#corner:focus-visible { outline: 3px solid var(--chrome-fg); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#menu {
  position: fixed;
  left: calc(var(--gutter) + 4px);
  bottom: 8px;
  z-index: 20;
  min-width: 15rem;
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 0.5rem;
  border-radius: 14px 14px 14px 2px;
  background: var(--pane-bg);
  color: var(--chrome-fg);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
  transform-origin: bottom left;
  animation: grow 120ms ease-out;
}
@keyframes grow { from { transform: scale(0.6); opacity: 0; } }
#menu button, #menu a {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
#menu button:hover:not(:disabled), #menu a:hover { background: var(--chrome-bg); }
#menu button:disabled { opacity: 0.5; cursor: default; }
#menu .menu-head { margin: 0.5rem 0.6rem 0.1rem; font-size: 0.8rem; opacity: 0.7; }
#menu .menu-who { margin: 0.25rem 0.6rem 0.5rem; font-size: 0.875rem; }
#menu .segmented { display: flex; gap: 2px; padding: 0 0.3rem; }
#menu .segmented button { text-align: center; }
#menu .segmented button[aria-checked="true"] { background: var(--chrome-accent); color: var(--pane-bg); }
#menu [data-when="in"] { display: none; }
body[data-signed-in="true"] #menu [data-when="in"] { display: block; }
body[data-signed-in="true"] #menu [data-when="out"] { display: none; }

.flush { background: var(--chrome-bg); border: 0; box-shadow: none; }
#landing, #panel { max-width: 36rem; margin: 0 auto; padding: 3rem 1.25rem; }
#panel h1:focus { outline: none; }
#panel label { display: block; margin: 1rem 0; }
#panel input { display: block; width: 100%; box-sizing: border-box; padding: 0.5rem; font: inherit; margin-top: 0.25rem; }
#panel button { font: inherit; padding: 0.5rem 1rem; margin: 0 0.5rem 0.5rem 0; cursor: pointer; }
#panel button.link { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; }

/* The Inventory (designs/minion-town-spa.md § 4): list and detail side by
   side on a stage wider than 720 px, one at a time otherwise. One surface,
   no rule between them. */
body[data-panel="inventory"] #panel { max-width: 64rem; }
#panel label.inline { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0.75rem 0.5rem 0; }
#panel label.inline input[type="text"] { display: inline-block; width: 12rem; margin: 0; }
#panel label.check input { display: inline; width: auto; margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 1rem; }
.crumbs .sep { opacity: 0.6; }
#panel .crumbs button.link, #picker .crumbs button { margin: 0; }
.inventory-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.inventory-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows .quiet, .rows .empty { padding: 0.75rem 0.5rem; opacity: 0.7; }
#panel .rows button.row, #picker .rows button.row {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 44px;
  margin: 0; padding: 0.5rem 0.6rem; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.rows button.row:hover:not(:disabled), .rows button.row[aria-pressed="true"], .rows button.row[aria-selected="true"] {
  background: color-mix(in srgb, var(--chrome-accent) 18%, transparent);
}
.rows button.row:disabled { opacity: 0.45; cursor: default; }
.rows button.row[data-special] .name { font-style: italic; opacity: 0.8; }
.rows .glyph { width: 1.5rem; text-align: center; }
.rows .name { flex: 1; overflow-wrap: anywhere; }
.rows .chevron { opacity: 0.6; }
.detail h2 { margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.detail .quiet { opacity: 0.75; }
.detail .actions { margin: 1rem 0; }
.detail .text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; padding: 0.75rem; border-radius: 8px; background: var(--pane-bg); }
#panel button.danger { color: #b3261e; }
.detail .back { display: none; }
#inventory[data-selected="true"] .detail .back { display: inline; }
#inventory[data-selected="true"] .rows, #inventory[data-selected="true"] .inventory-tools { display: none; }
@media (min-width: 720px) and (min-aspect-ratio: 1/1) {
  .inventory-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #inventory[data-selected="true"] .rows { display: block; }
  #inventory[data-selected="true"] .inventory-tools { display: flex; }
  #inventory[data-selected="true"] .detail .back { display: none; }
}

/* The path picker (designs/minion-town-spa-chips.md § 4): an anchored
   popover on a fine pointer; on a coarse one a sheet over the stage that
   rises to 8 px below its top, below the chrome and its corner button. */
#picker {
  position: absolute; z-index: 1; top: 4rem; right: 1.5rem; width: min(24rem, calc(100% - 3rem));
  max-height: calc(100% - 6rem); display: flex; flex-direction: column; box-sizing: border-box;
  padding: 1rem; border-radius: 12px; background: var(--chrome-bg); color: var(--chrome-fg);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}
#picker[hidden] { display: none; }
#picker h2 { margin: 0 0 0.5rem; font-size: 1.05rem; overflow-wrap: anywhere; }
#picker input { font: inherit; padding: 0.5rem; box-sizing: border-box; width: 100%; }
#picker .rows { flex: 1; overflow: auto; margin: 0.5rem 0; min-height: 6rem; }
#picker .crumbs button { font: inherit; padding: 0.25rem 0.5rem; border-radius: 6px; border: 0; background: var(--pane-bg); color: inherit; cursor: pointer; }
#picker .picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
#picker .picker-foot label { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 100%; }
#picker .picker-foot button { font: inherit; padding: 0.5rem 1rem; cursor: pointer; }
@media (pointer: coarse) {
  #picker { top: 8px; left: 0; right: 0; bottom: 0; width: auto; max-height: none; border-radius: 12px 12px 0 0; }
  #picker .rows button.row { min-height: 52px; }
  #picker .crumbs button { min-height: 44px; min-width: 44px; }
  #picker[data-mode="search"] { bottom: auto; height: calc(min(var(--picker-viewport, 100%), 100%) - 8px); }
}

#pane {
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  background: var(--pane-bg);
  overflow: hidden;
}
#pane iframe { width: 100%; height: 100%; border: 0; display: block; }
#pane .pane-note { position: absolute; inset: 0; margin: auto; height: 1.5em; text-align: center; opacity: 0.5; pointer-events: none; }

@media (max-aspect-ratio: 1/1) {
  body.shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--gutter);
    grid-template-areas: "stage" "chrome";
  }
  #chrome { flex-direction: row-reverse; }
  #gutter { flex-direction: row; padding: 0 8px; }
  #menu { left: 8px; bottom: calc(var(--gutter) + 4px); }
}

/* The inbox (designs/minion-town-spa.md § 5; chips in minion-town-spa-chips.md § 1). */
#inbox .segmented { margin-bottom: 0.75rem; }
#inbox .segmented button[aria-pressed="true"] { font-weight: 600; }
.inbox-filter { display: flex; gap: 0.5rem; align-items: center; }
.messages .message-row { padding: 0.6rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); list-style: none; }
.messages .message-row.sent { margin-left: 2.5rem; text-align: right; }
.messages .message-row.reply { margin-left: 1.25rem; }
.messages .message-row.sent.reply { margin-left: 3.75rem; }
.messages .echo { opacity: 0.6; }
.messages .first { display: none; }
.messages .text { margin: 0.3rem 0; white-space: pre-wrap; }
.messages .foot { padding-top: 0.75rem; }
.sender { font-weight: 600; }
.sender.stranger .glyph { font-weight: 400; margin-right: 0.15rem; }
#inbox .chip { font: inherit; font-size: 0.95em; padding: 0.05rem 0.5rem; margin: 0 0.1rem; cursor: pointer; min-height: 1.6em; }
#inbox .chip.label, #composer .chip.label { border: 1.5px dashed var(--label-fg); color: var(--label-fg); background: transparent; border-radius: 999px; font-style: italic; }
#inbox .chip.path { border: 0; background: var(--path-bg); color: var(--path-fg); border-radius: 3px; font-style: normal; }
.chip-wrap { position: relative; display: inline-block; }
.chip-pop { position: absolute; left: 0; top: 100%; z-index: 5; background: var(--pane-bg); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 6px; padding: 0.25rem; white-space: nowrap; }
.chip-pop[hidden] { display: none; }
.composer { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem; align-items: end; margin-top: 1rem; }
.composer[hidden] { display: none; }
.composer textarea { grid-column: 1; font: inherit; width: 100%; box-sizing: border-box; }
.composer-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.composer-menu { position: absolute; bottom: 100%; left: 0; z-index: 6; min-width: 16rem; max-height: 18rem; overflow: auto; background: var(--pane-bg); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 6px; padding: 0.4rem; }
.composer-menu[hidden] { display: none; }
.composer-menu li { list-style: none; padding: 0.3rem 0.5rem; min-height: 1.5rem; cursor: pointer; }
.composer-menu li[aria-selected="true"] { background: var(--path-bg); color: var(--path-fg); }
@media (pointer: coarse) { .composer-menu li { min-height: 44px; display: flex; align-items: center; } }