/* ================================================== BUNKER CLOUD — access gate and sync bar Built on the 1.0 tokens in style.css. ================================================== */ /* Nothing private is painted until the session is resolved. The class is set by cloud-config.js in , before the first paint. */ html.cloud-gated .bunker-shell { display: none !important; } .cloud-gate { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; overflow-y: auto; padding: var(--s-5) var(--s-4); background: var(--ink); } .cloud-gate__panel { display: grid; gap: var(--s-3); width: min(440px, 100%); padding: var(--s-6) var(--s-5) var(--s-5); border: 1px solid var(--rule-strong); border-top: var(--index-bar) solid var(--signal); background: var(--plate); } .cloud-gate__brand { margin: 0; color: var(--steel); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.3em; } .cloud-gate__brand::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; background: var(--signal); vertical-align: 0.15em; } .cloud-gate__title { margin: 0; color: var(--bone); font-family: var(--font-display-tight); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: 0.04em; line-height: 1; } .cloud-gate__lead, .cloud-gate__loading, .cloud-gate__hint { margin: 0; color: var(--steel); font-size: var(--fs-sm); line-height: 1.5; } .cloud-gate__loading::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); background: var(--signal); animation: cloud-pulse 1s ease-in-out infinite alternate; } @keyframes cloud-pulse { from { opacity: 0.25; } to { opacity: 1; } } .cloud-gate__form { display: grid; gap: var(--s-3); margin-top: var(--s-2); } .cloud-gate__submit { width: 100%; min-height: 46px; } .cloud-gate__notice { margin: 0; padding: var(--s-2) var(--s-3); border-left: var(--index-bar) solid var(--steel); background: var(--plate-sunken); font-size: var(--fs-sm); } .cloud-gate__error { margin: 0; padding: var(--s-2) var(--s-3); border-left: var(--index-bar) solid var(--signal); background: var(--signal-wash); color: var(--bone); font-size: var(--fs-sm); } .cloud-gate__error[hidden] { display: none; } .cloud-gate__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-1); } .cloud-gate__link { min-height: 36px; padding: 0; border: 0; background: none; color: var(--steel); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .cloud-gate__link:hover { color: var(--bone); } .cloud-gate__facts { display: grid; gap: 1px; margin: var(--s-1) 0 0; padding: 1px; } .cloud-gate__facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--plate-sunken); box-shadow: 0 0 0 1px var(--rule); } .cloud-gate__facts dt { color: var(--steel); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; } .cloud-gate__facts dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; } .cloud-gate__actions { display: grid; gap: var(--s-2); margin-top: var(--s-2); } .cloud-gate__actions > .action-button, .cloud-gate__actions > .secondary-button { width: 100%; min-height: 46px; } .cloud-gate__actions > .cloud-gate__link { justify-self: start; margin-top: var(--s-2); } /* ---- Sync bar, inside the command bar ---- */ .cloud-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-left: auto; } /* On the ROOT the date is hidden, so the bar takes the right edge; in a chamber it sits after the date. */ .bunker-date + .cloud-bar { margin-left: var(--s-3); } /* The ROOT hides the date, which still precedes the bar in the DOM. */ body.hud-active .bunker-date + .cloud-bar { margin-left: auto; } .cloud-status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: none; color: var(--steel); font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em; } .cloud-status::before { content: ""; width: 6px; height: 6px; background: var(--steel-dim); } .cloud-status--synced::before { background: var(--bone); } .cloud-status--saving::before { background: var(--steel); animation: cloud-pulse 0.8s ease-in-out infinite alternate; } .cloud-status--offline { color: var(--bone); } .cloud-status--conflict, .cloud-status--sync-error { border-color: var(--signal); color: var(--bone); cursor: pointer; } .cloud-status--conflict::before, .cloud-status--sync-error::before { background: var(--signal); } .cloud-user { max-width: 220px; overflow: hidden; color: var(--steel); font-family: var(--font-mono); font-size: var(--fs-2xs); text-overflow: ellipsis; white-space: nowrap; } .cloud-signout { min-height: 28px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: none; color: var(--bone); font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.1em; cursor: pointer; } .cloud-signout:hover { border-color: var(--bone); } /* ---- Conflict dialog ---- */ .cloud-conflicts__panel { display: grid; gap: var(--s-3); max-height: calc(100vh - 32px); overflow-y: auto; } .cloud-conflicts__panel p { margin: 0; } .cloud-conflicts__row { display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--plate-sunken); box-shadow: 0 0 0 1px var(--rule); } .cloud-conflicts__name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; } .cloud-conflicts__meta { color: var(--steel); font-family: var(--font-mono); font-size: var(--fs-xs); } @media (max-width: 760px) { .cloud-bar { width: 100%; margin-left: 0; } .bunker-date + .cloud-bar { margin-left: 0; } .cloud-user { flex: 1; max-width: none; } .cloud-signout { min-height: 36px; } .cloud-gate__panel { padding: var(--s-5) var(--s-4) var(--s-4); } }