/*
 * hosted·ai files: the pages outside the dashboard (DESIGN.md section 5).
 *   - Sign-in (index.php) and the download errors (download.php): one centred card.
 *   - The landing page (index.html) and the public list (public.php): a top bar and a page.
 * This sheet only lays those pages out. Tokens and components (buttons, inputs, notices,
 * cards, tables, the logo) come from base.css. The pages send a strict CSP, so there is
 * no inline style anywhere.
 */

/* ---------------------------------------------------------------- logo */

/* Every one of these pages can be seen from outside hosted.ai, so each shows the endorsed
   lockup ("hosted·ai files") at --lockup-h: 40px, which keeps it above the kit's 170px
   minimum width. The logo files carry 0.5X of clear space (6.46% of their height on the
   left); .logo-flush takes that back so the dots line up with the text below. */
.logo-flush .logo { margin-left: calc(var(--lockup-h) * -0.0646); }

/* ---------------------------------------------------------------- centred card (sign-in, errors) */

/* The card sits a fixed distance from the top rather than in the middle, so it doesn't
   jump when the sign-in switches to the shorter two-factor step. The one column is
   capped at the viewport (an auto column grows to the card's widest content), so the
   card never makes the page scroll sideways. */
.page-center {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start;
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(56px, 15vh, 150px) 16px 48px;
}

/* The page's one card, as on the claude-stats sign-in: near-white on the canvas, a
   hairline and the soft card shadow. It stands alone like a dialog, so it takes the
   dialog radius. */
.solo {
  width: 100%; max-width: 420px;
  padding: 28px 32px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.solo-brand { --lockup-h: 40px; display: flex; margin-bottom: 24px; }
.solo-title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.solo-foot {
  margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 12.5px; line-height: 1.55;
}
.solo-foot a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.solo-foot a:hover { color: var(--text); text-decoration-color: currentColor; }

/* The theme toggle sits in the viewport corner, outside the card. */
.corner-toggle { position: fixed; top: 12px; right: 12px; z-index: 5; }

/* ---------------------------------------------------------------- sign-in (index.php) */

.auth-body { display: grid; gap: 18px; margin-top: 18px; }
.auth-message:empty { display: none; }

/* Google Workspace is the primary path. The four-colour G keeps its white disc, as
   Google's guidelines ask, so it reads on the violet button in both themes. The content
   is centred, so the side padding only matters when space runs out: trimmed, it keeps
   the label on one line down to 360px. Narrower, the label wraps and the button grows. */
.sso-block { display: grid; gap: 18px; }
.sso-btn {
  gap: 10px; height: auto; min-height: 40px; padding: 8px 12px;
  white-space: normal; line-height: 1.3; text-align: center;
}
.sso-g {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-left: -4px; border-radius: 50%; background: #fff;
}
.sso-g svg { width: 14px; height: 14px; }

.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1 1 0; height: 1px; background: var(--border); }

.auth-form { display: grid; gap: 14px; }
.auth-form .check { justify-self: start; }
.auth-form .btn-block { margin-top: 2px; }
.auth-actions { display: flex; gap: 8px; }
.auth-actions .btn-primary { flex: 1 1 auto; }

/* The six digits, spaced out and centred. text-indent gives back the trailing
   letter-spacing so the digits sit in the middle. */
.totp-input {
  text-align: center; text-indent: 0.3em; letter-spacing: 0.3em;
  font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* While an error shows above the form it says what to do, so the code field's hint steps
   aside rather than repeat it (base.css does the same for a .field-error). */
.auth-body:has(.auth-message .notice-critical) .field-hint { display: none; }

/* A request in flight: the button keeps its label and gains a spinner. */
.btn.is-busy { cursor: progress; }
.btn-primary .spinner { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .auth-step { animation: step-in 0.16s ease-out; }
}
@keyframes step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- download errors (download.php) */

.error-mark {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px;
  border-radius: 9px; background: var(--surface-2); color: var(--text-2);
}
.error-mark .i { width: 20px; height: 20px; }
.error-mark.is-private { background: var(--accent-wash); color: var(--accent-text); }
.error-text { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.ip-line {
  margin-top: 16px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px;
}
.ip-line strong { color: var(--text); font-family: var(--mono); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.error-actions { display: flex; gap: 8px; margin-top: 18px; }

/* ---------------------------------------------------------------- top-bar pages (landing, public list) */

/* The top bar is sticky. When the browser scrolls a focused link or a #fragment into
   view it keeps clear of the bar, so keyboard focus never ends up hidden behind it. */
html:has(> body.site) { scroll-padding-top: calc(var(--topbar-h) + 16px); }

/* Narrower than the dashboard: the pages cap the shared page width, and the top bar,
   page and footer all follow it. */
.site {
  --page-max: 1040px;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}
.site > main { flex: 1 0 auto; width: 100%; }
.site .brand { --lockup-h: 40px; }
.site .site-foot { width: 100%; }

/* ---------------------------------------------------------------- landing (index.html) */

.hero { max-width: 640px; padding-top: clamp(40px, 10vh, 104px); }
.hero-title { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.hero-lead { margin-top: 14px; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.facts {
  list-style: none; margin-top: clamp(40px, 8vh, 80px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.fact { padding: 18px 20px; }
.fact-icon {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px;
  border-radius: 8px; background: var(--accent-wash); color: var(--accent-text);
}
.fact-icon .i { width: 18px; height: 18px; }
.fact-title { font-size: 14.5px; font-weight: 700; }
.fact-text { margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
/* The address each kind of link lives on, pinned to the card's foot so the three line up. */
.fact-host { margin-top: auto; padding-top: 12px; color: var(--text-3); font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------------- public list (public.php) */

.public-head { margin-top: 22px; }
/* The name column takes the free width and ellipsizes; the others fit their content.
   Selectors start with table. to outrank base.css's table.data rules. */
table.file-table td.col-name { width: 100%; max-width: 0; }
table.file-table td.col-date { color: var(--text-2); }
table.file-table .col-act { text-align: right; }
.file-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-text { display: grid; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
.row-meta { display: none; color: var(--text-3); font-size: 12px; line-height: 1.35; }
/* Download reads as a quiet violet link, not a column of boxed buttons. */
.btn.dl-btn { color: var(--accent-text); }
.btn.dl-btn:hover { color: var(--accent-text); background: var(--accent-wash); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .facts { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .hero { padding-top: 40px; }
  .hero-title { font-size: 28px; }
}
/* Phones: size and date move under the name, and Download keeps only its icon (its
   aria-label still names the file). */
@media (max-width: 640px) {
  table.file-table .col-size, table.file-table .col-date { display: none; }
  table.file-table td { height: 50px; }
  .row-meta { display: block; }
  .dl-label { display: none; }
}
@media (max-width: 480px) {
  .solo { padding: 24px 20px 18px; }
  .hero-lead { font-size: 15px; }
}
/* The narrowest phones have no room for the landing page's top-bar "Staff sign in" next
   to the lockup; the hero's button is the way in. */
@media (max-width: 380px) {
  .topbar-signin { display: none; }
}