/* FVA 365 Office, main-entry home upgrade, 2026-10-23.
   Screenshot home layout for the signed-in workspace home only.
   It does not restyle auth, org picker, or tool views, and it never
   hides the existing launcher. Signed out state is handled by the
   existing auth view: this home only renders after openOrg, so a
   signed-in user and a real organisation are always present here. */
.fva-hero {
  border-radius: 28px;
  background: linear-gradient(135deg, #03392d, #044b3b 55%, #0f766e);
  color: #fff;
  padding: 24px;
  overflow: hidden;
}
.fva-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fva-hero-pill {
  display: inline-block; background: rgba(255,255,255,0.2); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
}
.fva-hero-month { color: #a7f3d0; font-size: 13px; font-family: 'JetBrains Mono', monospace; }
.fva-hero h2 { font-size: 24px; margin: 12px 0 8px; line-height: 1.2; color: #fff; }
.fva-hero p { color: #d1fae5; font-size: 15px; line-height: 1.5; margin: 0; }
.fva-hero-foot {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.25);
  font-size: 14px; color: #d1fae5;
}
.fva-section-label {
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: #64748b; margin: 24px 0 12px;
}
.fva-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fva-quick-actions button {
  flex: 1 1 110px; white-space: nowrap; border: 1px solid #e2e8f0; background: #fff;
  border-radius: 999px; padding: 0 14px; min-height: 44px; cursor: pointer; font-weight: 600;
}
.fva-stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.fva-stat-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 16px;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.fva-stat-card strong { font-size: 20px; color: #0f172a; overflow-wrap: anywhere; }
.fva-stat-label { font-size: 12px; color: #64748b; }
.fva-doors-head { display: flex; justify-content: space-between; align-items: center; }
.fva-view-all { border: 0; background: transparent; color: #0b6b56; font-weight: 700; cursor: pointer; min-height: 44px; }
.fva-door-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fva-door-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 14px;
  text-align: left; cursor: pointer; display: flex; gap: 10px; align-items: center; min-width: 0;
}
.fva-door-mark {
  width: 44px; height: 44px; min-width: 44px; border-radius: 14px; background: #ecfdf5;
  color: #0b6b56; display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.fva-door-card strong { display: block; font-size: 14px; color: #0f172a; }
.fva-door-card span { font-size: 12px; color: #64748b; }
.fva-note { font-size: 12px; color: #64748b; margin-top: 12px; line-height: 1.5; }
.fva-group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 1024px) {
  .fva-door-grid, .fva-group-grid { grid-template-columns: repeat(4, 1fr); }
  .fva-hero h2 { font-size: 32px; }
}
/* Main-entry top bar: never let the brand text overlap another control. */
.topbar .brand { min-width: 0; }
.topbar .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bottom nav, workspace only. It is hidden with the wsView by showView. */
.fva-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
  padding-bottom: env(safe-area-inset-bottom); background: #fff;
  border-top: 1px solid #e2e8f0; display: flex; z-index: 30;
}
.fva-bottom-nav.hidden { display: none; }
.fva-bottom-nav button {
  flex: 1; border: 0; background: transparent; color: #64748b;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer; min-height: 44px; font-size: 12px;
}
.fva-bottom-nav button.active { color: #0b6b56; font-weight: 700; }
.fva-bottom-nav .fva-nav-centre { flex: 0 0 56px; font-size: 22px; color: #0b6b56; }
#wsView:not(.hidden) { padding-bottom: 88px; }
#orgView:not(.hidden) { padding-bottom: 88px; }
/* Upgrade-all: tool views share the same card treatment as the Doors. */
#appPane .card { border-radius: 20px; }
/* Create picker: hidden must always win over the picker layout rule. */
.fva-picker {
  position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,0.6);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.fva-picker[hidden] { display: none !important; }
.fva-picker-box {
  background: #fff; border-radius: 16px; padding: 20px; width: 100%; max-width: 480px;
  display: grid; gap: 8px; max-height: 90vh; overflow-y: auto;
}
.fva-picker-box button {
  width: 100%; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px;
  cursor: pointer; text-align: left; padding: 0 12px; min-height: 44px;
}
@media (min-width: 640px) { .fva-picker { align-items: center; } }

/* My organisations view, same new upgrade set. The picker is not a
   workspace-only view: it gets the green hero, full org cards that
   can never be cut off under the sticky top bar, and the bottom nav
   when the user is signed in. Join, Sign out, and footer behaviour
   are unchanged, only restyled by the rules below. */
#orgView { scroll-margin-top: 90px; }
#orgView:not(.hidden) { padding-bottom: 88px; }
#orgView .fva-org-hero { margin-bottom: 16px; }
.fva-org-heading { scroll-margin-top: 90px; }
#orgList { overflow: visible; }
.fva-org-card { overflow: visible; scroll-margin-top: 90px; }
.fva-org-card h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.fva-org-card .fva-org-open { display: inline-block; margin-top: 10px; font-weight: 700; color: #0b6b56; }
.fva-org-card:focus-visible { outline: 3px solid #0b6b56; outline-offset: 2px; }
@media (max-width: 560px) { #orgView { padding-top: 4px; } }

/* Fancy FVA launcher pack, deliberate exception to the clean internal
   look, for launcher tiles and menu tiles only. Tool views stay clean.
   Emerald and gold only, never another suite's colours or shapes. */
.fva-door-card, #launcher .launcher-tile {
  border-radius: 20px; min-height: 68px; overflow-wrap: anywhere;
  box-shadow: 0 1px 0 rgba(3, 57, 45, 0.06);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.fva-door-card:hover, #launcher .launcher-tile:hover {
  border-color: #0b6b56; box-shadow: 0 6px 18px rgba(3, 57, 45, 0.12);
  transform: translateY(-1px);
}
.fva-door-card:active, #launcher .launcher-tile:active { transform: translateY(0) scale(0.98); }
.fva-door-card:focus-visible, #launcher .launcher-tile:focus-visible {
  outline: 3px solid #c9a06b; outline-offset: 2px;
}
.fva-door-mark, #launcher .tile-mark {
  /* Neutral white mark background, so each colourful logo stands out
     on its own colour instead of sitting on a green tint. */
  background: #ffffff;
  border: 1px solid #e2e8f0; color: #0b6b56; overflow: hidden;
}
.fva-door-mark svg, #launcher .tile-mark svg { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.fva-door-card strong, #launcher .tile-name { font-weight: 800; color: #0f172a; }
#launcher .tile-open { display: block; font-size: 11px; color: #8a6d2b; font-weight: 700; }
#launcher .launcher-tile.active { background: #003a34; color: #fff; border-color: #003a34; }
#launcher .launcher-tile.active .tile-name { color: #fff; }
#launcher .launcher-tile.active .tile-group { color: #dde5e1; }
#launcher .launcher-tile.active .tile-open { color: #e8c87a; }
#launcher .launcher-tile.quiet { background: #f4f6f4; }
@media (prefers-reduced-motion: reduce) {
  .fva-door-card, #launcher .launcher-tile { transition: none; transform: none; }
  .fva-door-card:hover, #launcher .launcher-tile:hover { transform: none; }
}

/* Launcher pack grid, not a vertical list. The base stylesheet sets the
   launcher grid to one column, which stacked every tool down the page.
   This override loads later and wins: 2 columns at phone width, 3 at
   640px and up, 6 on desktop. Group views use the same breakpoints.
   Tiles stack vertically so logo, name, and Open in Office fit a narrow
   column without clipping, and the tap target stays 68px and up. */
#launcher .launcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#launcher .launcher-tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-width: 0; }
#launcher .launcher-tile .tile-text { min-width: 0; overflow-wrap: anywhere; }
#launcher .launcher-tile .tile-name { font-size: 14px; }
@media (min-width: 640px) {
  #launcher .launcher-grid, .fva-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #launcher .launcher-grid, .fva-group-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
#wsView:not(.hidden) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Tile stack, 2026-10-23: name up, other labels under it, never on top.
   Every launcher, door, and group tile stacks strictly top to bottom:
   logo mark, app name, group label, Open in Office. Each label is on
   its own line, in normal flow, never absolutely positioned, never
   pulled over another label with a negative margin. Tile height grows
   to fit all four lines, so no name is clipped. This block loads last
   and wins over the earlier row layout for door cards. */
.fva-door-card {
  flex-direction: column; align-items: flex-start; height: auto;
}
.fva-door-card .fva-door-mark,
.fva-door-card .fva-door-text,
.fva-door-card .fva-door-name,
.fva-door-card .fva-door-group,
.fva-door-card .fva-door-open,
#launcher .launcher-tile .tile-mark,
#launcher .launcher-tile .tile-text,
#launcher .launcher-tile .tile-name,
#launcher .launcher-tile .tile-group,
#launcher .launcher-tile .tile-open {
  position: static; margin: 0; float: none;
}
.fva-door-card .fva-door-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%;
}
.fva-door-card .fva-door-name {
  display: block; font-weight: 800; font-size: 14px; line-height: 1.25;
  color: #0f172a; overflow-wrap: anywhere;
}
.fva-door-card .fva-door-group { display: block; font-size: 12px; color: #64748b; }
.fva-door-card .fva-door-open { display: block; font-size: 12px; color: #8a6d2b; font-weight: 700; }
#launcher .launcher-tile { height: auto; }
#launcher .launcher-tile .tile-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%;
  overflow-wrap: anywhere;
}
#launcher .launcher-tile .tile-name { line-height: 1.25; }
#launcher .launcher-tile .tile-group { display: block; }
#launcher .launcher-tile .tile-open { display: block; }
/* Group headings sit above their own pack grid, in normal flow. */
.launcher-group h3 { display: block; margin: 0 0 12px; }
.launcher-group { display: block; margin-bottom: 16px; }
.fva-group-grid { margin-top: 0; }
#wsView .card > h2, #wsView .card > p { display: block; }
#wsView:not(.hidden) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }