/* ============================================================
   Shared components — header/appbar, FAB, card
   Requires tokens.css (and ideally base.css) linked first.
   ============================================================ */

/* ---------- Header / app bar ----------
   Structure every app uses:
   <header class="appbar">
     <div class="appbar-inner">
       <div class="appbar-top">
         <div class="appbar-title"><svg/img class="logo">...</svg><h1>App</h1></div>
         <div class="appbar-actions"> ...app-specific status/buttons... </div>
       </div>
     </div>
   </header>
*/
header.appbar{
  position:sticky; top:0; z-index:20;
  background:rgba(15,17,21,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:14px 0;
  /* If an app's viewport meta opts into viewport-fit=cover (Loopr does;
     Splittr/Vaultr don't), iOS lets page content draw into the safe
     areas — the sticky header then starts at the true top of the
     screen and gets visually covered by the status bar/notch/Dynamic
     Island. env(safe-area-inset-top) is 0 without viewport-fit=cover,
     so this is a no-op for apps that don't opt in — safe to keep here
     for all three regardless of which ones currently do. */
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
}
.appbar-inner{ max-width:720px; margin:0 auto; padding:0 16px; }
.appbar-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.appbar-title{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.appbar-title .logo{ width:42px; height:42px; border-radius:10px; display:block; flex-shrink:0; }
.appbar-title h1{ font-size:24px; font-weight:700; margin:0; }
.appbar-actions{
  display:flex; align-items:center; gap:8px;
  flex:1; min-width:0; justify-content:flex-end;
}
.file-status-inline{
  font-size:11px; color:var(--text-muted);
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; flex-shrink:1; max-width:150px;
}

/* Header save-state icon: a diskette, grey when idle / green when the
   current data is saved. Same markup works whether the element is a plain
   <span>/<div> (Loopr, Splittr — decorative, non-interactive) or a
   <button> (Vaultr — autosave is click-to-toggle there); style is
   identical either way, only the cursor differs. */
.autosave-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0;
  background:none; border:none; padding:0; margin:0;
  color:var(--text-muted);
  font:inherit;
  /* Neutralize native <button> theming (Vaultr uses a real <button> here
     since its autosave is click-to-toggle) — without this, some browsers
     paint their own platform button chrome (a grey/white pill) on top of
     the box regardless of the background/border values above. */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  box-shadow:none;
}
.autosave-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.autosave-icon.on{ color:var(--positive); }
button.autosave-icon{ cursor:pointer; }

/* ---------- FAB + FAB stack menu ----------
   Primary FAB bottom-right (usually "add new"); a second FAB
   bottom-left toggles a vertical stack of labeled mini-pills
   (Dashboard/Save/Open/Settings/Coffee, per app). Color comes
   from --accent, which each app's color picker can override
   live via document.documentElement.style.setProperty.
*/
.fab{
  position:fixed; right:18px; bottom:22px; z-index:15;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  border:none; cursor:pointer;
}
.fab-menu-wrap{ position:fixed; left:18px; bottom:22px; z-index:15; width:56px; height:56px; }
.fab-left{ position:absolute; left:0; right:auto; bottom:0; }
.fab-mini{
  position:absolute; left:0;
  height:44px; border-radius:22px;
  padding:0 16px 0 13px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  display:flex; align-items:center; gap:9px;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
  cursor:pointer;
  transition:opacity 0.18s ease, transform 0.18s ease;
  white-space:nowrap;
  opacity:0;
  transform:translateY(10px) scale(0.6);
  pointer-events:none;
  transform-origin:left bottom;
  font-family:var(--sans);
  font-size:14px; font-weight:600;
  text-decoration:none;
}
/* Mini-pill icons are accent-colored (not currentColor) so they track
   each app's live accent picker, matching Splittr's original design intent. */
.fab-mini svg{ width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:2; flex-shrink:0; }
.fab-mini span:last-child{ font-weight:600; }
.fab-menu-wrap.open .fab-mini{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

/* Each app positions its own mini-pills via their #ids, stacked
   54px apart starting at bottom:66px (see each app's own <style>
   block) — the item set/order differs per app so that part stays
   local rather than shared. */

/* ---------- "Reopen last file" prompt ----------
   One shared dialog for all three apps: a centered, dimmed-backdrop
   modal — never a bottom sheet, never an inline/floating banner —
   so it looks and sits identically everywhere, on every screen size.
   Markup (same in all three, only element ids differ per app's JS):
   <div class="reconnect-modal-backdrop" id="...">
     <div class="reconnect-modal">
       <div class="reconnect-modal-text">... <b>filename</b> ...</div>
       <div class="reconnect-modal-actions">
         <button>Start blank / Not now</button>
         <button class="primary">Reopen file</button>
       </div>
     </div>
   </div>
   Toggle visibility either by setting style.display to 'flex'/'none',
   or by adding/removing the 'open' class (both work — Vaultr's shared
   openModal()/closeModal() helpers just add/remove 'open' by id). */
.reconnect-modal-backdrop{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,0.55);
  display:none; align-items:center; justify-content:center;
  padding:16px;
}
.reconnect-modal-backdrop.open{ display:flex; }
.reconnect-modal{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  width:100%; max-width:420px; max-height:88vh; overflow-y:auto;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  animation:reconnectModalIn .18s ease;
}
@keyframes reconnectModalIn{
  from{ transform:translateY(8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.reconnect-modal-text{ font-size:14px; color:var(--text); line-height:1.5; margin-bottom:16px; }
.reconnect-modal-text b, .reconnect-modal-text strong{ color:var(--accent); }
.reconnect-modal-actions{ display:flex; gap:8px; }
.reconnect-modal-actions button{
  flex:1; height:40px; border-radius:var(--radius-sm); border:1px solid var(--border);
  font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer;
  background:var(--surface-2); color:var(--text);
}
/* --accent-text: each app defines this alongside --accent (its own
   dark/light contrast choice for text on its accent color — Loopr and
   Splittr's accents need dark text, Vaultr's blue was already using
   a dedicated token for this that had gone unused until now). */
.reconnect-modal-actions .primary{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); }

/* ---------- Secondary-screen header (title + back button) ----------
   Every app's non-main views (Settings, Dashboard) start with this same
   row: a back button that returns to the main view, plus the screen's
   name. Markup (same in all three, only the button's id differs):
   <div class="screen-header">
     <button class="screen-back" id="..." title="Back">
       <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
     </button>
     <div class="screen-title">Settings</div>
   </div>
   The left FAB (the menu-toggle one, bottom-left) also acts as a back
   button whenever a secondary view like this is the active one — see
   each app's fabMenuToggle/fab-menu click handler. */
.screen-header{
  display:flex; align-items:center; gap:10px;
  padding:2px 0 4px 0;
  margin-bottom:var(--card-gap);
}
.screen-back{
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  color:var(--text); cursor:pointer;
}
.screen-title{ font-size:20px; font-weight:700; color:var(--text); }

/* ---------- App info row ----------
   Used inside the "App" card at the bottom of each app's Settings
   screen (e.g. a Version line) — label left, muted mono value right.
   Container card is each app's own existing card style, so this stays
   just the row, not a card of its own:
   <div class="app-info-row"><span>Version</span><span class="app-info-value">...</span></div> */
.app-info-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--text);
  padding:4px 0;
}
.app-info-row .app-info-value{
  color:var(--text-muted); font-family:var(--mono); font-size:12px;
}

/* ---------- Card ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:var(--card-gap);
}
.card-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
  color:var(--text-muted); margin-bottom:10px;
}