/* The app's own layout: the shell, the top bar (an overlay with a large title), the scroller, the bottom dock with the glass pill, screen transitions,
   and the starter's demo screens (list of notes, detail, editor, settings) in the new style. The flight components are in components.css. */

/* The shell is as tall as the VISIBLE area (--app-h) and starts where it starts (--app-top). js/viewport.js writes both from innerHeight and
   visualViewport, not from Telegram's --tg-viewport-height: on iOS the keyboard shrinks the window or overlays it, and this follows either.
   It is transparent: the sky (base.css) shows through; html and body carry the solid --bg. NO z-index here: the sky, #app and #layer are painted in DOM order,
   and #layer must stay above #app also while the keyboard lift makes it a fixed box without a z-index (base.css, html.kb-lift #layer). */
#app { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100%); display: flex; flex-direction: column; }
/* #layer holds the sheets and the toasts. With no sheet open it never catches a tap: while a keyboard lift lasts it is a full-screen fixed box (base.css,
   html.kb-lift #layer), and a lift that outlives its sheet (js/sheetlift.js re-lifts on a keyboard height measured after the field lost the focus) would
   otherwise leave an invisible box over the whole app. A toast keeps its own pointer-events. */
#layer:not(.sheet-open) { pointer-events: none; }
#view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* A screen arriving. Only the CONTENT moves, and only with transform (docs/design.md rule 3): the bar and the dock are glass, and glass inside an ancestor
   whose opacity animates loses its backdrop. animation-fill-mode is "backwards" on purpose: a finished transform kept by "forwards"/"both" would stay the
   containing block of fixed children (references/ui-pitfalls.md L1). */
.screen.push .page { animation: push-in var(--d3) var(--ease-out) backwards; }
.screen.pop .page { animation: pop-in var(--d3) var(--ease-out) backwards; }
.screen.fade .page { animation: settle var(--d3) var(--ease-out) backwards; }
@keyframes push-in { from { transform: translateX(44px); } }
@keyframes pop-in { from { transform: translateX(-36px); } }
@keyframes settle { from { transform: translateY(10px); } }

/* ---- the top bar: an overlay sibling of the scroller. Transparent at rest; once content is under it, glass (the ::before) with a soft fading edge (the ::after).
   The compact title of a "large" bar shows only after the large title has scrolled away (components.js bindBar). padding-top is exactly var(--sat). */
.bar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(var(--hit), 1fr) minmax(0, auto) minmax(var(--hit), 1fr);
  align-items: center; gap: var(--s2); min-height: calc(var(--bar-h) + var(--sat)); padding: var(--sat) calc(var(--sar) + var(--s3)) 0 calc(var(--sal) + var(--s3)); }
.bar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  opacity: 0; visibility: hidden; transition: opacity var(--d2) var(--ease), visibility 0s linear var(--d2); }
.bar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-fill), transparent); opacity: 0; transition: opacity var(--d2) var(--ease); }
.bar.scrolled::before { opacity: 1; visibility: visible; transition: opacity var(--d2) var(--ease), visibility 0s; }
.bar.scrolled::after { opacity: 1; }
.bar-side { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bar-side.end { justify-content: flex-end; }
.bar-title { min-width: 0; font: 650 var(--t-headline)/1.25 var(--font-display); letter-spacing: -.01em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A root screen: no back arrow, the actions on the right take the room they need, and the compact title is centred on the whole bar (out of the grid). */
.bar.large { grid-template-columns: minmax(0, 1fr) auto; }
.bar.large .bar-title { position: absolute; left: 30%; right: 30%; bottom: 0; line-height: var(--bar-h); pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.bar.large.titled .bar-title { opacity: 1; transform: none; }
/* the large title, first thing in the scroller */
.large-title { display: grid; gap: 2px; padding: 0 2px var(--s1); }
.large-title h1 { font: 700 var(--t-xl)/1.12 var(--font-display); letter-spacing: -.022em; overflow-wrap: anywhere; }
.large-title p { color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.large-title p::first-letter { text-transform: uppercase; }

/* ---- the scroller runs UNDER the bar and the dock: its content is padded by their heights */
.scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.page { width: 100%; max-width: var(--column); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start;   /* minmax(0, 1fr): a long unbroken line inside a card never widens the column */
  padding: calc(var(--sat) + var(--bar-h) + var(--s1)) calc(var(--sar) + var(--s4)) calc(var(--fab) + var(--dock-gap) + var(--sab) + var(--s6)) calc(var(--sal) + var(--s4)); }

/* ---- the dock: the tinted glass pill at the bottom, centred, at most 87% wide and at least 10 px from the edges (iPhone rules for fixed bars) */
.dock { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--sab) + var(--dock-gap)); display: flex; justify-content: center;
  padding: 0 calc(var(--sar) + 10px) 0 calc(var(--sal) + 10px); pointer-events: none; }
.dock > * { pointer-events: auto; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); max-width: min(87%, 440px); min-height: var(--fab); padding: 0 26px 0 20px;
  border-radius: var(--r-pill); color: var(--accent-contrast); font: 650 var(--t-headline)/1.2 var(--font); letter-spacing: -.005em; white-space: nowrap;
  background: var(--glass-sheen-tint), var(--glass-tint); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 14px 30px -12px var(--accent), 0 4px 12px rgba(0, 0, 0, .12);
  transition: transform var(--d3) var(--spring); }
.pill span { overflow: hidden; text-overflow: ellipsis; }
.pill:active { transform: scale(.95); transition-duration: 90ms; transition-timing-function: var(--ease); }
html[data-kb] .dock, html[data-kb] .build { display: none; }      /* data-kb is set while a keyboard is up (viewport.js): with it there is room only for the field and its buttons */

/* ---- the user chip of the demo home (top right): a glass capsule with the initial and the name */
.user-chip { display: inline-flex; align-items: center; gap: var(--s2); max-width: min(62vw, 260px); min-height: var(--hit); padding: 0 var(--s4) 0 6px; border-radius: var(--r-pill);
  color: var(--text); transition: transform var(--d3) var(--spring); }
.user-chip:active { transform: scale(.95); transition-duration: 90ms; }
.user-chip span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); font-weight: 600; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); font-size: var(--t-sm); font-weight: 700; }

/* ---- the demo list and its states (loading, error, empty, loaded) */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--hit); }
.list-head h2 { font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 66px; padding: var(--s3) var(--s4); text-align: left; border-radius: 20px;
  background: var(--card-fill); box-shadow: inset 0 0 0 .5px var(--card-edge), inset 0 1px 0 var(--card-edge), var(--card-shadow); transition: transform var(--d3) var(--spring); }
.row:active { transform: scale(.985); transition-duration: 90ms; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: 550; }
.row-meta { font-size: var(--t-meta); color: var(--muted); }
.row > svg { color: var(--muted); }
.skel-row { height: 66px; border-radius: 20px; }
.empty, .notice { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s7) var(--s4) var(--s5); }
.empty h2, .notice h2 { font: 700 var(--t-title)/1.25 var(--font-display); letter-spacing: -.01em; }
.empty p, .notice p { color: var(--muted); max-width: 320px; overflow-wrap: anywhere; }
.empty .actions, .notice .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s1); }
.notice .mark { --size: 72px; }
.build { text-align: center; font-size: var(--t-cap); color: var(--muted); }
.build code { font-family: var(--mono); }

/* ---- detail and editor */
.note { padding: var(--s5); border-radius: var(--r-card); font-size: 18px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--card-fill); box-shadow: inset 0 0 0 .5px var(--card-edge), inset 0 1px 0 var(--card-edge), var(--card-shadow); }
.meta { font-size: var(--t-sm); color: var(--muted); padding: 0 var(--s1); }
.editor-card { padding: var(--s4); border-radius: var(--r-card); background: var(--card-fill); box-shadow: inset 0 0 0 .5px var(--card-edge), var(--card-shadow); }

/* ---- settings sheet (key/value lines kept for the account box) */
.kv { display: grid; gap: var(--s2); margin: 0; font-size: var(--t-sm); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.kv dt { color: var(--muted); flex: none; }
.kv dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.section-label { font-size: var(--t-meta); font-weight: 600; color: var(--muted); }