/* File Share's own layout. Every colour, font, corner and part comes from the brand's theme.css and base.css and
   the UI kit; this file only places them, plus the few parts the kit doesn't have: the drop area, the copy row,
   the code shown once and the ready message. */
/* The look sits on a wrapper, as canvas boards keep no <body> attributes, so the page fills the screen itself. */
body { margin: 0; background: var(--page); }
.nsys-page { min-height: 100vh; }
[hidden] { display: none !important; }
svg { pointer-events: none; }
.icon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.icon svg { width: 100%; height: 100%; }
.nsys-button--icon .icon { width: var(--nsys-icon); height: var(--nsys-icon); }
.small { font-size: 14px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
p { margin: 0; }

/* Top bar: the app's name beside the wordmark. It scrolls with the page, so it never sits over content. */
.top__brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.top__app { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--header-text) 30%, transparent); font-size: 16px; font-weight: 600; color: var(--header-muted); white-space: nowrap; }

/* The main column. */
.main { --nsys-gutter: 24px; display: grid; gap: 20px; box-sizing: border-box; max-width: 1008px; margin: 0 auto; padding-top: 28px; padding-bottom: 48px; }
.stack { display: grid; gap: 16px; min-width: 0; align-content: start; }
.narrow { width: 100%; max-width: 640px; margin-inline: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-head > :last-child { margin-left: auto; }
.page-head .nsys-page-title { min-width: 0; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.back .icon { width: 18px; height: 18px; }
.note { white-space: pre-line; }
.list-card { gap: 8px; }
.space-card { gap: 8px; }

/* Sign-in, code and ended pages: one card in the middle. */
/* Its space above and below: the brand's nsys-safe-top and nsys-safe-bottom add a notch's or home bar's inset to it
   on a page with no top bar, such as the sign-in page. */
.center { --nsys-gutter: 20px; --nsys-space-top: 56px; --nsys-space-bottom: 40px; box-sizing: border-box; }
.center:not(.nsys-safe-top) { padding-top: var(--nsys-space-top); }
.center:not(.nsys-safe-bottom) { padding-bottom: var(--nsys-space-bottom); }
.center__inner { display: grid; gap: 18px; max-width: 440px; margin: 0 auto; }
.center__brand { justify-self: center; color: var(--text); }
.center-card { gap: 14px; padding: 28px; }
.center-card .nsys-screen-title { margin: 0; }
.center__note { text-align: center; }
.card-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--accent-text) 12%, transparent); color: var(--accent-text); }
.card-icon svg { width: 22px; height: 22px; }
.stack-form { display: grid; gap: 16px; }

/* New share: the form, the drop area and each file's row. */
.form-grid { display: grid; gap: 20px; }
.form-card { gap: 18px; }
.keep-field .nsys-input { max-width: 220px; }
.drop { display: grid; justify-items: center; gap: 8px; padding: 28px 20px; border: 2px dashed color-mix(in srgb, var(--muted) 45%, var(--line)); border-radius: var(--corner); background: color-mix(in srgb, var(--page) 60%, var(--surface)); text-align: center; }
.drop__icon { display: inline-flex; width: 32px; height: 32px; color: var(--accent-text); }
.drop__icon svg { width: 100%; height: 100%; }
.drop__choose { position: relative; }
.drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-list .nsys-row__text { min-width: 0; }
.row-pill { display: block; margin-top: 6px; }
.row-progress { display: block; width: 100%; margin-top: 6px; }
.why { color: var(--bad-text); }
.form-end { display: grid; gap: 8px; }
.drop.is-over { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 8%, var(--surface)); }

/* A form around one button, such as Keep 7 more days or Sign out, sits in its row or menu as the button would. */
.nsys-buttons form, .nsys-menu__panel form { display: contents; }

/* Link ready: the link and code with Copy, and the message to paste. */
.ready-head { display: grid; gap: 2px; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row .nsys-input { flex: 1; min-width: 0; }
.code-show { flex: 1; font: 700 32px/44px var(--heading-font); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ready-message { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--corner); background: var(--page); overflow-wrap: anywhere; }

/* The receiver's files page and its privacy note. */
.files-head { display: grid; gap: 4px; }
.note-card { border-left: 4px solid var(--header-accent); }
.privacy { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--corner); background: var(--surface); font-size: 14px; }
.privacy summary { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.privacy summary .icon { width: 18px; height: 18px; color: var(--accent-text); }
.privacy ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); }
.foot { --nsys-space-bottom: 20px; padding-top: 16px; color: var(--muted); font-size: 14px; text-align: center; }
.foot a, .privacy a { color: var(--accent-text); }
.nf { --nsys-gutter: 24px; }

@media (max-width: 899px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: under 560 px wide, as the UI kit. */
@media (max-width: 559px) {
  .main { --nsys-gutter: 16px; gap: 16px; padding-top: 18px; }
  .center { --nsys-gutter: 16px; --nsys-space-top: 28px; }
  .center-card { padding: 20px; }
  .top__brand .nsys-wordmark__tagline { display: none; }
  .top__app { padding-left: 10px; font-size: 15px; }
  .page-head .nsys-button { width: 100%; }
  .page-head > :last-child { margin-left: 0; }
  .form-end .nsys-buttons .nsys-button { flex: 1; }
  .code-show { font-size: 28px; }
}