/* Daily Utility Cloud Storage — public site.
   Tokens and layout ported from the Angular preview (src/styles.css, src/styles/theme.css)
   so the static site keeps the same design. Hand-written CSS: no Tailwind, no build step. */

/* --------------------------------------------------------------------- theme */

:root {
  color-scheme: light;

  --font-sans: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;

  --radius: 0.6rem;
  --background: #fafafa;
  --foreground: #303030;
  --card: #ffffff;
  --card-foreground: #303030;
  --primary: #1a6fcc;
  --primary-foreground: #ffffff;
  --muted: #f9f9f9;
  --muted-foreground: #6b6b6b;
  --border: #eeeeee;
  --input: #e1e1e1;
  --ring: #1a6fcc;
  --brand: #1a6fcc;
  --grey-200: #303030;
  --surface: #fafafa;
  --shadow-e2: 0 4px 12px 0 rgb(0 0 0 / 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08);

  /* The marketing gradient and its scrim, shared by every surface carrying the brand band:
     the sign-in panel and the legal pages' hero. Fixed brand blues rather than the theme's
     brand token — a dark-theme brand blue would wash the white type off the band. */
  --panel-gradient: linear-gradient(150deg, #3fa9f5 0%, #2a6fd6 100%);
  /* White type over the light top stop is only ~2.6:1 on its own. Darkening the two corners
     the text actually occupies buys AA without muddying the middle. */
  --panel-scrim: linear-gradient(150deg, rgb(0 0 0 / 0.22) 0%, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.28) 100%);
}

/* "System" is the default: no data-theme attribute, so the OS preference decides. An
   explicit light or high-contrast choice must win over it, hence the :not() guards. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='high-contrast']) {
    color-scheme: dark;
    --background: #121212;
    --foreground: #ececec;
    --card: #1e1e1e;
    --card-foreground: #ececec;
    --primary: #4d9bf0;
    --muted: #262626;
    --muted-foreground: #a0a0a0;
    --border: #3a3a3a;
    --input: #3a3a3a;
    --ring: #4d9bf0;
    --brand: #4d9bf0;
    --grey-200: #ececec;
    --surface: #121212;
    --shadow-e2: 0 4px 12px 0 rgb(0 0 0 / 0.5);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --background: #121212;
  --foreground: #ececec;
  --card: #1e1e1e;
  --card-foreground: #ececec;
  --primary: #4d9bf0;
  --muted: #262626;
  --muted-foreground: #a0a0a0;
  --border: #3a3a3a;
  --input: #3a3a3a;
  --ring: #4d9bf0;
  --brand: #4d9bf0;
  --grey-200: #ececec;
  --surface: #121212;
  --shadow-e2: 0 4px 12px 0 rgb(0 0 0 / 0.5);
}

:root[data-theme='high-contrast'] {
  color-scheme: dark;
  --background: #000000;
  --foreground: #ffffff;
  --card: #000000;
  --card-foreground: #ffffff;
  --primary: #4da6ff;
  --primary-foreground: #000000;
  --muted: #1a1a1a;
  --muted-foreground: #e0e0e0;
  --border: #ffffff;
  --input: #ffffff;
  --ring: #ffff00;
  --brand: #4da6ff;
  --grey-200: #ffffff;
  --surface: #000000;
  --shadow-e2: 0 0 0 1px var(--border);
  --shadow-sm: 0 0 0 1px var(--border);
}

:root[data-theme='high-contrast'] *:focus-visible {
  outline: 3px solid var(--ring) !important;
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The Angular build hid the scrollbar on both elements; kept so the gradient panel still
     runs edge to edge. */
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.2;
}

img,
svg {
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 30;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-e2);
}

/* ------------------------------------------------------------ theme switcher */

.theme-switcher {
  display: inline-flex;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  padding: 0.25rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

.theme-switcher button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--grey-200);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.theme-switcher button:hover {
  background: var(--muted);
}

.theme-switcher button[aria-pressed='true'] {
  background: var(--brand);
  color: var(--primary-foreground);
}

.theme-switcher button[aria-pressed='true']:hover {
  background: var(--brand);
  opacity: 0.9;
}

.theme-switcher svg {
  width: 1rem;
  height: 1rem;
}

.theme-switcher-float {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
}

/* ------------------------------------------------------------- sign-in page */

.signin {
  position: relative;
  display: flex;
  min-height: 100vh;
  /* dvh so mobile browser chrome does not push the column past the fold. */
  min-height: 100dvh;
}

/* Marketing panel. Purely decorative, so it is the half that goes when there is no room for
   both columns — the sign-in column must never be the thing that drops. */
.marketing {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--panel-gradient);
}

/* Soft circles bleeding off two corners, clipped by the panel's overflow. */
.marketing-blob {
  position: absolute;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.1);
  pointer-events: none;
}

.marketing-blob-a {
  top: -8rem;
  right: -6rem;
  width: 26rem;
  height: 26rem;
}

.marketing-blob-b {
  bottom: -10rem;
  left: -8rem;
  width: 22rem;
  height: 22rem;
}

.marketing-scrim {
  position: absolute;
  inset: 0;
  background: var(--panel-scrim);
  pointer-events: none;
}

.marketing-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.marketing-lockup img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
}

.marketing-lockup span {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.marketing-art {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0;
}

.marketing-art img {
  width: 13.75rem;
  max-width: 100%;
  filter: drop-shadow(0 20px 25px rgb(0 0 0 / 0.25));
}

.marketing-copy {
  position: relative;
}

/* Display sizing: 1.2 leading (Poppins descenders clip at 1.15) and slight negative
   tracking. The brand line breaks after "Every file," — the rag is authored, not left
   to wrapping. */
/* The pill sits directly above the display heading, which has no top margin of its own —
   the gap has to come from here. */
.marketing-copy .pill {
  margin-bottom: 0.875rem;
}

.marketing-copy h2 {
  margin: 0;
  font-size: 2.125rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

/* 44ch keeps the supporting copy to three even lines at 1rem; 34ch wrapped it into four
   ragged lines with a one-word widow. */
.marketing-copy p {
  margin: 1.25rem 0 0;
  max-width: 44ch;
  color: rgb(255 255 255 / 0.85);
  text-wrap: pretty;
}

.pill {
  display: inline-block;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.15);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

/* The pill on a card background rather than the gradient, so it borrows the brand
   colour instead of white-on-white. */
.pill-quiet {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}

.signin-pill-row {
  margin: 1rem 0 0;
  text-align: center;
}

.signin-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  background: var(--card);
  padding: 3rem 1rem;
}

.signin-inner {
  width: 100%;
  max-width: 24.5rem;
  margin: 0 auto;
}

/* The brand lockup is not repeated here: the app name already lives in the marketing panel,
   and the centered heading reads cleaner without the duplicate title. On narrow screens the
   panel is gone, so the lockup comes back. */
.signin-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.signin-lockup img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
}

.signin-lockup span {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.signin-inner h1 {
  margin: 2rem 0 0;
  text-align: center;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
}

.signin-lead {
  margin: 0.5rem 0 0;
  text-align: center;
  color: var(--muted-foreground);
}

.provider-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 3rem;
  border-radius: 0.625rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}

.btn-google {
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
}

.btn-google:hover {
  background: var(--muted);
}

/* Black fill comes from Apple's own sign-in guidance, so it is deliberately a fixed colour
   rather than a token. `--card` is #000 on the high-contrast theme, hence the border:
   without it the button would be invisible there. */
.btn-apple {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

:root[data-theme='dark'] .btn-apple {
  border-color: var(--border);
}

:root[data-theme='high-contrast'] .btn-apple {
  border-color: #fff;
}

.btn-provider svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The preview carries no auth: pressing a provider button reveals this notice in place of
   starting a sign-in flow. */
.provider-notice {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  padding: 1rem;
}

.provider-notice[hidden] {
  display: none;
}

.provider-notice strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--foreground);
}

.provider-notice p {
  margin: 0.25rem 0 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* A centered label flanked by two rules — ports the divider-with-text component. */
.divider {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 0.062rem;
  background: var(--border);
}

.divider span {
  margin: 0 0.5rem;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.security-note {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  border-radius: var(--radius);
  background: var(--muted);
  padding: 1rem;
}

.security-note svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--muted-foreground);
}

.security-note p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.legal-consent {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.legal-consent a {
  color: var(--brand);
  text-decoration: underline;
}

/* --------------------------------------------------------------- legal pages */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(6px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.brand img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius);
}

/* Brand band. Same gradient as the sign-in marketing panel, so a visitor who arrives here
   from that screen stays in one visual world. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--panel-gradient);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--panel-scrim);
}

.hero-blob {
  position: absolute;
  top: -7rem;
  right: -5rem;
  width: 22rem;
  height: 22rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.1);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.hero h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

/* Document metadata: quieter than the title it annotates — small, labels dimmed. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 1rem 0 0;
  font-size: 0.87rem;
}

.hero-meta > div {
  display: flex;
  gap: 0.5rem;
}

.hero-meta dt {
  color: rgb(255 255 255 / 0.65);
}

.hero-meta dd {
  margin: 0;
  font-weight: 500;
  color: rgb(255 255 255 / 0.95);
}

.layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

/* Contents rail. A 20-section legal document is unnavigable without one, but it is an aid
   rather than the page, so it is the half that drops on narrow screens. */
.toc {
  display: none;
}

.toc h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.toc ol {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.toc a {
  display: block;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.87rem;
  line-height: 1.35;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.toc a:hover {
  background: var(--muted);
  color: var(--foreground);
}

/* 40rem is about 75 characters at body size: past that, long legal sentences lose the
   reader's place line to line. */
.doc {
  min-width: 0;
  max-width: 40rem;
}

.doc > p,
.doc section p {
  margin: 0.75rem 0 0;
}

/* `scroll-margin` keeps the sticky header from covering the heading a contents link
   jumps to. */
.doc h2 {
  margin: 2.5rem 0 0;
  scroll-margin-top: 6rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.doc ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.doc li::marker {
  color: var(--brand);
}

.notice {
  border-radius: var(--radius);
  background: var(--muted);
  padding: 0.75rem 1rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.contact-card {
  margin-top: 3rem;
  border-radius: var(--radius);
  background: var(--muted);
  padding: 1rem;
}

.contact-card h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.contact-card p {
  margin: 0.5rem 0 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.contact-card a {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.87rem;
  color: var(--brand);
}

.doc-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.87rem;
}

.link-brand {
  color: var(--brand);
  text-decoration: underline;
}

.link-muted {
  color: var(--muted-foreground);
  text-decoration: underline;
}

.link-muted:hover {
  color: var(--foreground);
}

.site-footer {
  border-top: 1px solid var(--border);
}

.site-footer p {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------- breakpoints */

/* sm — matches the Angular theme's 600px breakpoint. */
@media (min-width: 600px) {
  .hero-inner {
    padding: 3.5rem 1.5rem;
  }

  .site-header-inner,
  .layout,
  .site-footer p {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* lg — 1200px, the width at which both sign-in columns fit. */
@media (min-width: 1200px) {
  .marketing {
    display: flex;
    width: 43%;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
  }

  .signin-lockup,
  .signin-pill-row {
    display: none;
  }

  .signin-inner h1 {
    margin-top: 0;
  }

  .layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 2.5rem;
  }

  .toc {
    display: block;
  }

  .toc-sticky {
    position: sticky;
    top: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}