/* Copyright © 2026 Falcontext. All rights reserved. Not open source: see LICENSE. */
/* The web app's page (web/web-shim.js): the writing pad fills the page
   (#webMain) and the popup's own panel is the page itself, a 400 px
   sidebar on the right. On a phone the pad fills the screen and the panel
   slides in over it ("Falcontext" in the pad's bar, "Back to writing" in
   the panel's). */
html { -webkit-text-size-adjust: 100%; }
/* The pad's paper, light and dark (web/write/pad.css), for the page
   around it; sizes, corners and gaps from tokens.css. */
:root { --paper: #fbf8f1; --paper-ink: #1f2a24; --paper-soft: #5d6b63; --paper-line: #d9cdab; --paper-card: #fffdf7; --paper-bar: #f3efe4; --paper-accent: #1f7a4d; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #121a16; --paper-ink: #e8ede7; --paper-soft: #9fb0a6; --paper-line: #26352d; --paper-card: #18231d; --paper-bar: #121a16; }
}
body {
  margin: 0 0 0 auto !important;
  max-width: 400px !important;
  min-height: 100vh;
  box-shadow: -1px 0 0 var(--tint);
}
#webMain {
  position: fixed; top: 0; bottom: 0; left: 0; right: 400px; z-index: 5;
  background: var(--paper);
}
#webMain iframe { display: block; width: 100%; height: 100%; border: 0; }
#webMain [hidden] { display: none !important; }
#webDocNote {
  box-sizing: border-box; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-xl); padding: var(--sp-3xl); text-align: center; color: var(--paper-ink);
  font: var(--fs-l)/1.5 var(--font-ui);
}
#webDocNote h2 { margin: 0; font: 600 var(--fs-2xl)/1.3 var(--font-serif); }
#webDocNote p { margin: 0; max-width: 34em; color: var(--paper-soft); }
#webDocNote .wd-actions { display: flex; flex-wrap: wrap; gap: var(--sp-m); justify-content: center; }
#webDocNote a, #webDocNote button {
  font: inherit; font-size: var(--fs-l); padding: var(--sp-m) var(--sp-xl); border-radius: var(--r-m); cursor: pointer; text-decoration: none;
  border: 1px solid var(--paper-line); background: var(--paper-card); color: var(--paper-ink);
}
#webDocNote .primary { background: var(--paper-accent); border-color: var(--paper-accent); color: var(--on-color); }
/* The sidebar hidden (wider screens): the pad takes the whole page. */
@media (min-width: 761px) {
  html.web-panel-hidden #webMain { right: 0; }
  html.web-panel-hidden body > :not(#webMain) { display: none !important; }
  html.web-panel-hidden body { box-shadow: none; overflow: hidden; }
}
/* Focus Mode (web-shim.js): the pad fills the page and the panel steps
   aside, at every width. */
html.web-focus #webMain { right: 0; bottom: 0; z-index: 40; visibility: visible; }
html.web-focus body > :not(#webMain) { display: none !important; }
html.web-focus body { box-shadow: none; overflow: hidden; }

/* The panel's own overlays stay in its column. */
#proseReader { left: auto !important; right: 0 !important; width: 400px !important; max-width: 400px !important; }

@media (max-width: 760px) {
  body { margin: 0 !important; max-width: none !important; box-shadow: none; }
  #webMain { right: 0; z-index: 40; }
  html.web-panel-open #webMain { visibility: hidden; }
  html:not(.web-panel-open) body { height: 100dvh; overflow: hidden; }
  #proseReader { left: 0 !important; width: 100% !important; max-width: none !important; }
}

/* The bar over the panel on a phone (web-shim.js renderBar): Back to
   writing, and a note when something needs saying. The panel's own look. */
#webBar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s); padding: var(--sp-m) var(--sp-l); font-size: var(--fs-m); border-bottom: 1px solid var(--tint); }
#webBar button { font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer; padding: var(--sp-s) var(--sp-l); color: var(--heading);
  background: var(--surface-alt); border: 1px solid var(--border-input); border-radius: var(--r-s); }
#webBar button:hover { border-color: var(--accent); }
#webBar button:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
#webBar .wb-note { flex-basis: 100%; opacity: .75; font-size: var(--fs-s); }
#webBar .wb-error { flex-basis: 100%; color: var(--danger-text); font-size: var(--fs-s); }
#webBar .wb-note:empty, #webBar .wb-error:empty, #webBar [hidden], #webBar.empty { display: none; }

/* Stepping through what a check found, over the pad (web-shim.js). */
#webFindingBar {
  position: absolute; left: 8px; right: 8px; max-width: 640px; margin: 0 auto; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  display: flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-l);
  border-radius: var(--r-l); background: var(--paper-ink); color: var(--paper-bar); box-shadow: 0 4px 18px var(--shade-3);
  font: var(--fs-l)/1.3 var(--font-ui);
}
#webFindingBar .wf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#webFindingBar .wf-title { font-size: var(--fs-xs); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#webFindingBar .wf-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#webFindingBar .wf-count { font-size: var(--fs-s); opacity: .8; white-space: nowrap; }
#webFindingBar .wf-note { font-size: var(--fs-s); opacity: .85; }
#webFindingBar button {
  flex: none; min-width: 36px; height: 36px; border: 0; border-radius: var(--r-m); background: var(--tint-light);
  color: inherit; font: inherit; font-size: var(--fs-2xl); line-height: 1; cursor: pointer;
}
#webFindingBar .wf-fix { font-size: var(--fs-l); font-weight: 600; padding: 0 var(--sp-l); background: var(--ok); }
#webFindingBar .wf-undo, #webFindingBar .wf-ignore { font-size: var(--fs-l); padding: 0 var(--sp-l); }
#webFindingBar .wf-close { background: none; font-size: var(--fs-2xl); }
#webFindingBar [hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  #webFindingBar { background: var(--paper-ink); color: var(--paper); }
  #webFindingBar button { background: var(--shade-1); }
  #webFindingBar .wf-fix { background: var(--ok); color: var(--on-color); }
  #webFindingBar .wf-close { background: none; }
}

/* Over Perch's sample chapter (web-shim.js showSampleTip): what it is,
   and on a phone the way to the checks. */
#webSampleTip {
  position: absolute; left: var(--sp-m); right: var(--sp-m); max-width: 640px; margin: 0 auto; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  display: flex; align-items: center; gap: var(--sp-s); padding: var(--sp-m) var(--sp-s) var(--sp-m) var(--sp-l);
  border-radius: var(--r-l); background: var(--paper-ink); color: var(--paper-bar); box-shadow: 0 4px 18px var(--shade-3);
  font: var(--fs-l)/1.4 var(--font-ui);
}
#webSampleTip .ws-text { flex: 1; min-width: 0; margin: 0; }
#webSampleTip button { flex: none; border: 0; border-radius: var(--r-m); color: inherit; font: inherit; cursor: pointer; }
#webSampleTip .ws-go { display: none; height: 36px; padding: 0 var(--sp-l); font-weight: 600; background: var(--ok); }
#webSampleTip .ws-close { min-width: 36px; height: 36px; background: none; font-size: var(--fs-2xl); line-height: 1; }
#webSampleTip button:focus-visible { outline: 2px solid var(--paper-bar); outline-offset: 1px; }
@media (prefers-color-scheme: dark) {
  #webSampleTip { color: var(--paper); }
  #webSampleTip .ws-go { color: var(--on-color); }
}
@media (max-width: 760px) {
  #webSampleTip { flex-wrap: wrap; }
  #webSampleTip .ws-wide { display: none; }
  #webSampleTip .ws-go { display: block; }
  /* Back to writing, in reach wherever the panel is scrolled to. */
  html.web-panel-open #webBar .wb-write {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
    bottom: calc(var(--sp-xl) + env(safe-area-inset-bottom, 0px));
    padding: var(--sp-m) var(--sp-xl); font-size: var(--fs-m); box-shadow: 0 4px 18px var(--shade-3);
  }
  html.web-panel-open body { padding-bottom: calc(var(--sp-5xl) * 2); }
  /* With nothing else in it, the bar over the panel takes no room. */
  html.web-panel-open #webBar:not(:has(.wb-note:not(:empty), .wb-error:not(:empty))) { padding: 0; border: 0; }
}

/* Google's file picker (Open from Google Drive, Add a Google Doc) places
   itself on the page where it was scrolled to when it opened; on a phone,
   where this page is taller than the screen, that can be out of sight.
   Held in the middle of the screen instead. */
.picker-dialog-bg { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 2147483000 !important; }
.picker-dialog {
  position: fixed !important; top: 50% !important; left: 50% !important; z-index: 2147483001 !important;
  transform: translate(-50%, -50%); max-width: 100vw; max-height: 100vh; max-height: 100dvh;
}