/* Grain — the shell's chrome.
 *
 * One stylesheet for the window every app is hosted in. An app styles its own
 * surface and nothing else; if a second app had to restyle a toolbar, the
 * shell would not be doing its job.
 *
 * System fonts only. A tool that promises your file never leaves your machine
 * must not fetch a webfont on load — it would be a broken promise on the very
 * first request, and it would not work offline.
 */

.gr-shell {
  --bg: #FFFFFF; --chrome: #F7F5F1; --chrome-2: #EFECE6;
  --line: #E3E0DA; --line-2: #CFCAC1;
  --ink: #211C16; --ink-2: #4A4338; --muted: #6C6356;
  --accent: #9A3B1B; --accent-2: #7E2F14; --accent-tint: #F3E7DF;
  --green: #2F5D3A;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--bg); overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.gr-shell *, .gr-picker * { box-sizing: border-box; }
.gr-shell button { font-family: inherit; font-size: inherit; color: inherit; }
.gr-sp { flex: 1; }

/* ---- title bar ---- */
.gr-title {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .7rem; background: var(--chrome);
  border-bottom: 1px solid var(--line); flex: none;
}
.gr-brand { font-weight: 700; letter-spacing: -.01em; font-size: .85rem; }
.gr-docname {
  border: 1px solid transparent; background: transparent; border-radius: 3px;
  padding: .16rem .4rem; font: inherit; color: var(--ink-2); width: 15rem; outline: none;
}
.gr-docname:hover { border-color: var(--line-2); }
.gr-docname:focus { border-color: var(--accent); background: #fff; color: var(--ink); }
.gr-chip {
  background: #fff; border: 1px solid var(--line-2); border-radius: 3px;
  padding: .17rem .6rem; font-size: .74rem; color: var(--muted); cursor: pointer;
}
.gr-chip:hover { border-color: var(--accent); color: var(--accent); }

.gr-tabs { display: flex; gap: .25rem; }
.gr-tab {
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  padding: .17rem .6rem; font-size: .76rem; color: var(--muted); cursor: pointer;
}
.gr-tab:hover { background: var(--chrome-2); }
.gr-tab.on { background: #fff; border-color: var(--line-2); color: var(--accent); font-weight: 600; }

/* ---- toolbar ---- */
.gr-toolbar {
  display: flex; align-items: center; gap: .12rem; flex: none;
  padding: .28rem .55rem; background: var(--chrome-2);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin;
}
.gr-tool {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
  padding: .2rem .45rem; font-size: .75rem; color: var(--ink-2); cursor: pointer;
}
.gr-tool:hover { background: #fff; border-color: var(--line-2); }
.gr-tool:active { background: var(--accent-tint); border-color: var(--accent); }
.gr-tool .g {
  display: inline-block; min-width: 1em; text-align: center;
  font-weight: 700; color: var(--accent);
}
.gr-tsep { width: 1px; height: 18px; background: var(--line-2); margin: 0 .3rem; flex: none; }
.gr-more { margin-left: auto; padding-left: .8rem; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.gr-more kbd {
  font: inherit; background: #fff; border: 1px solid var(--line-2);
  border-radius: 3px; padding: 0 .25rem; margin-left: .15rem;
}

/* ---- stage: one pane per mounted app ---- */
.gr-stage { flex: 1; display: flex; min-height: 0; }
.gr-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-right: 1px solid var(--line-2);
}
.gr-pane:last-child { border-right: 0; }
.gr-pane-hd {
  display: flex; align-items: center; gap: .5rem; flex: none;
  padding: .3rem .65rem; background: var(--chrome-2);
  border-bottom: 1px solid var(--line);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
/* A single pane needs no label — the title bar already says which app this
 * is, and a strip that repeats it costs a row of the document. The header
 * earns its space only when there are two panes to tell apart. */
.gr-stage > .gr-pane:only-child > .gr-pane-hd { display: none; }
.gr-stage > .gr-pane:not(:only-child).on .gr-pane-hd {
  color: var(--accent); box-shadow: inset 0 2px 0 var(--accent);
}
.gr-pane-hd em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: .72rem;
}
.gr-pane-body { flex: 1; position: relative; min-height: 0; overflow: hidden; }

/* ---- status ---- */
.gr-status {
  display: flex; align-items: center; gap: 1.1rem; flex: none;
  padding: .3rem .7rem; background: var(--chrome);
  border-top: 1px solid var(--line); font-size: .73rem; color: var(--muted);
}
.gr-status b { color: var(--ink-2); font-weight: 600; }
.gr-save { color: var(--muted); }
.gr-save.on { color: var(--green); }

/* ---- command palette ---- */
.gr-palette {
  position: absolute; inset: 0; display: none;
  background: rgba(33, 28, 22, .28); z-index: 40;
}
.gr-palette.on { display: block; }
.gr-pbox {
  width: min(640px, 92vw); margin: 12vh auto 0; background: #fff;
  border: 1px solid var(--line-2); border-radius: 6px;
  box-shadow: 0 18px 48px rgba(33, 28, 22, .22); overflow: hidden;
}
.gr-pinput {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  padding: .7rem .85rem; font: inherit; font-size: .95rem; outline: none; color: var(--ink);
}
.gr-plist { list-style: none; margin: 0; padding: .25rem; max-height: 46vh; overflow-y: auto; }
.gr-plist li {
  display: grid; grid-template-columns: 5.5rem 11rem 1fr auto;
  align-items: baseline; gap: .5rem;
  padding: .34rem .6rem; border-radius: 4px; cursor: pointer;
}
.gr-plist li.sel { background: var(--accent-tint); }
.gr-plist .pg { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.gr-plist .pt { font-weight: 600; }
.gr-plist .pd { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-plist .pk { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.gr-pempty { padding: .7rem .6rem; color: var(--muted); }

/* ---- colour picker ---- */
.gr-picker {
  position: fixed; z-index: 60; left: 50%; top: 28%; transform: translateX(-50%);
  background: #fff; border: 1px solid #CFCAC1; border-radius: 6px; padding: .6rem;
  box-shadow: 0 14px 34px rgba(33, 28, 22, .2);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px;
}
.gr-pl { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #6C6356; margin-bottom: .4rem; }
.gr-pgrid { display: grid; grid-template-columns: repeat(5, 1.5rem); gap: .3rem; }
.gr-sw { width: 1.5rem; height: 1.5rem; border: 1px solid #CFCAC1; border-radius: 3px; cursor: pointer; padding: 0; }
.gr-sw:hover { outline: 2px solid #9A3B1B; outline-offset: 1px; }
.gr-pnone {
  margin-top: .45rem; width: 100%; background: #F7F5F1; border: 1px solid #CFCAC1;
  border-radius: 3px; padding: .2rem; font-size: .74rem; color: #4A4338; cursor: pointer;
}