/* SPDX-FileCopyrightText: 2026 Veydan Project */
/* SPDX-License-Identifier: LicenseRef-PolyForm-Perimeter-1.0.1 */

/* Mobile design system on top of the shared desktop tokens/base.
 * Colours go through the --m-* tokens below; components never use raw hex. */

:root {
  --touch: 44px;
  --nav-h: 64px;
  /* The bar floats: this much glow under it, above the system's own bar. */
  --nav-gap: 10px;
  --m-radius: 16px; /* rows, fields, players and small tiles of the phone */
  /* Android injects real insets into these; env() covers iOS / fixed WebViews. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* The phone's colours follow the palette's tokens (palettes/): a palette
   never needs to name them. */
[data-theme='light'] {
  --m-card: var(--surface);
  --m-card-border: var(--border);
  --m-card-shadow: 0 1px 2px rgba(23, 20, 60, 0.05);
  --m-field: var(--surface-2);
  --m-seg: var(--surface-hover);
  --m-tile: var(--surface);
  /* The header of a screen: glass over the glow; a bar over content: denser glass. */
  --m-head: var(--pane);
  --m-nav: var(--glass-bar);
  --m-tag: var(--accent-tint);
  --m-highlight: var(--accent-bg);
  --m-sheet: var(--surface);
  --m-icon-mix: 18%;
  --m-icon-glyph-mix: 0%;
}

[data-theme='dark'] {
  --m-card: var(--surface);
  --m-card-border: var(--border);
  --m-card-shadow: none;
  /* A field must stand out from the page (--bg) and from a card or a sheet (--surface). */
  --m-field: var(--surface-2);
  --m-seg: var(--surface-2);
  --m-tile: var(--surface-2);
  --m-head: var(--pane);
  --m-nav: var(--glass-bar);
  --m-tag: var(--accent-tint);
  --m-highlight: var(--accent-bg);
  --m-sheet: var(--surface);
  --m-icon-mix: 24%;
  --m-icon-glyph-mix: 20%;
}

html {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  background: var(--bg);
}

body {
  font-size: var(--fs-body);
  user-select: none;
  -webkit-user-select: none;
  background: var(--bg);
}

input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

/* Camera preview from the barcode scanner is rendered behind the webview */
html.scanning, html.scanning body, html.scanning .shell, html.scanning .screen {
  background: transparent !important;
}
/* A scanner over the whole screen (core/ui/QrScanner) lives outside the shell:
   the shell goes while it scans, and only the camera and the scanner's own
   frame are left. */
html.scan-cover .shell { visibility: hidden; }

/* ── Page frame ── */
.m-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  animation: vfade var(--dur-base) ease-out;
}
.m-page.home {
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: transparent;
}
.m-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: transparent;
}
.m-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.m-sub {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.45;
}
.m-hint {
  color: var(--text-2);
  font-size: var(--fs-base);
  line-height: 1.45;
  margin-bottom: var(--sp-4);
}
.m-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding: var(--sp-4) var(--sp-1) var(--sp-2);
}
.m-section {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  padding: var(--sp-4) var(--sp-1) var(--sp-2);
}
.m-error {
  color: var(--danger-text);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

/* ── Header: back/menu, optional folder tile, title, right actions ── */
.m-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  /* A 40px .m-ibtn plus the padding: headers with and without buttons are equal. */
  min-height: 56px;
  margin: 0;
  padding: var(--sp-2) var(--sp-2);
  background: var(--m-head);
  -webkit-backdrop-filter: var(--pane-filter);
  backdrop-filter: var(--pane-filter);
}
.m-header .m-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xl);
}
/* A root screen has no back arrow: its title starts on the page's left edge. */
.m-header > .m-title:first-child { padding-left: var(--sp-2); }
.m-header .spacer { flex: 1; }
.m-ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.m-ibtn:active { background: var(--m-seg); transform: scale(0.97); transition-duration: var(--dur-press); }
.m-ibtn.on { color: var(--accent-text); background: var(--accent-tint); }
.m-ibtn.accent { color: var(--accent-text); }

/* Coloured icon tile: `--c` is the item colour */
.m-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--c, var(--accent)) var(--m-icon-mix), transparent);
  color: color-mix(in srgb, var(--c, var(--accent)) calc(100% - var(--m-icon-glyph-mix)), #fff);
}
.m-doc.muted {
  --c: var(--text-3);
}
.m-doc.lg { width: 36px; height: 36px; border-radius: var(--radius); }

/* ── Touch-sized controls ── */
.btn, .icon-btn, .seg-btn { min-height: var(--touch); }
input, select, textarea {
  min-height: var(--touch);
  font-size: var(--fs-md); /* prevents iOS zoom on focus */
}
/* No mouse grip on the phone: a text area grows or scrolls by itself. */
textarea { resize: none; }
/* A mark big enough for a finger; its label, tapped, toggles it too. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; }

/* ── Search field ── */
.m-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.m-page > .m-search {
  flex-shrink: 0;
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
  background: var(--m-head);
}
.m-page > .m-search:first-child {
  padding-top: var(--sp-2);
}
.m-search .field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.m-search .field > svg {
  position: absolute;
  left: 12px;
  color: var(--text-3);
  pointer-events: none;
}
.m-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 38px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--m-field);
  font-size: var(--fs-body);
}
.m-search input:focus { box-shadow: 0 0 0 2px var(--accent-border); }
.m-search .clear {
  position: absolute;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m-search .cancel {
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--fs-body);
  padding: 0 var(--sp-1);
}

/* ── Segment bar ── */
.m-page > .m-seg {
  flex-shrink: 0;
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
  background: var(--m-head);
}
.m-seg {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--sp-3);
}
.m-seg::-webkit-scrollbar { display: none; }
.m-seg-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--m-seg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.m-seg-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── Cards ── */
.m-card {
  background: var(--pane-strong);
  border: 1px solid var(--m-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--m-card-shadow);
}
.m-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Note card: doc tile, title + date, preview */
.m-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
  width: 100%;
  text-align: left;
  font: inherit;
  position: relative;
}
.m-note:active { background: var(--surface-2); }
.m-note .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-note .top { display: flex; align-items: center; gap: var(--sp-2); }
.m-note .title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-note .date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.m-note .date svg { color: var(--accent-text); }
.m-note .preview {
  font-size: var(--fs-sm);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-note .check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.m-note .check.on { background: var(--accent); border-color: var(--accent); }
.m-note.selected { outline: 2px solid var(--accent-border); }

/* ── Grouped list rows (settings, tags, drawer) ── */
.m-list {
  background: var(--pane-strong);
  border: 1px solid var(--m-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--m-card-shadow);
  overflow: hidden;
}
.m-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  text-decoration: none;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--fs-body);
}
.m-row:last-child { border-bottom: 0; }
.m-row:active { background: var(--surface-2); }
.m-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row-value { color: var(--text-2); font-size: var(--fs-base); white-space: nowrap; }
.m-row .count { color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.m-row .chev { color: var(--text-3); display: inline-flex; }
.m-row.danger { color: var(--danger-text); justify-content: center; font-weight: 600; }
.m-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Accent text button: "+ Создать папку" */
.m-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-2);
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
}

/* ── Module tile (home, hub) ── */
.m-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--pane-strong);
  border: 1px solid var(--m-card-border);
  border-radius: var(--radius-card);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-fast);
}
.m-tile svg { color: var(--accent-text); }
.m-tile .label { font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.m-tile:active { transform: scale(0.96); }
.m-tile.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.m-tile.active svg { color: #fff; }
.m-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

/* ── Gradient button ── */
.m-btn-grad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent-grad);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 700;
  box-shadow: var(--shadow-accent);
  text-decoration: none;
}
.m-btn-grad { transition: transform var(--dur-fast) var(--ease); }
.m-btn-grad:active { filter: brightness(1.08); transform: scale(0.97); transition-duration: var(--dur-press); }
@media (prefers-reduced-motion: reduce) {
  .m-ibtn:active, .m-btn-grad:active { transform: none; }
}
.m-btn-grad:disabled { opacity: 0.5; box-shadow: none; }

/* ── Field with label (forms) ── */
.m-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.m-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.m-field input, .m-field select { width: 100%; }

/* ── FAB ── */
.m-fab {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--nav-h) + var(--nav-gap) + var(--sab) + var(--sp-4));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-grad);
  color: #fff;
  box-shadow: var(--shadow-accent);
  z-index: 5;
}
.m-fab:active { filter: brightness(1.08); }

/* ── Chips / tags ── */
.m-chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--m-tag);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.m-chips.scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--sp-4));
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.m-chips.scroll::-webkit-scrollbar { display: none; }
.m-chip.active { background: var(--accent); color: #fff; }
.m-chip.small { min-height: 20px; padding: 0 8px; font-size: var(--fs-2xs); }
.m-chip.neutral { background: var(--m-seg); color: var(--text-2); }
/* A chip in the user's colour is `.m-chip.tinted` with `style:--chip`: its
   colours are the one rule of base.css (`.tinted`), as on the desktop. One
   with no `--chip` (an entity: a profile, a proxy, a domain…, or a tag with
   no colour) is the neutral chip, its kind told by its mark. An `.m-chip`
   has no border, so its tint is mixed over the neutral chip (--m-seg)
   instead of the page: a colour close to the surface still reads as a
   chip, as `.m-chip.neutral` does (chip-contrast.test.ts covers --m-seg). */
.m-chip.tinted:not([style*='--chip']) { background: var(--m-seg); color: var(--text-2); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .m-chip.tinted[style*='--chip'] {
    background: color-mix(in srgb, var(--chip) var(--chip-tint), var(--m-seg));
  }
  .m-chip.tinted.active[style*='--chip'] {
    background: color-mix(in srgb, var(--chip) var(--chip-tint-strong), var(--m-seg));
  }
}
.m-chip.add {
  background: var(--m-seg);
  color: var(--text-2);
  width: 28px;
  padding: 0;
  justify-content: center;
}

/* ── Avatar (2FA) ── */
.m-avatar {
  --c: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--c);
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-body);
  flex-shrink: 0;
}

/* ── Meta table ── */
.m-meta {
  display: grid;
  grid-template-columns: 88px 1fr;
  row-gap: var(--sp-2);
  column-gap: var(--sp-3);
  font-size: var(--fs-sm);
  align-items: center;
}
.m-meta dt { color: var(--text-3); }
.m-meta dd { color: var(--text); margin: 0; min-width: 0; }

/* ── Search highlight ── */
mark.m-highlight {
  background: var(--m-highlight);
  color: inherit;
  border-radius: 3px;
  padding: 1px 0;
}

/* ── Empty state ── */
.m-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-4);
  color: var(--text-3);
  text-align: center;
}
.m-empty p { color: var(--text-2); font-weight: 600; margin: 0; }
.m-empty span { font-size: var(--fs-sm); }

/* ── Bottom sheet chrome ── */
.m-dim {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: 50;
}
.m-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + var(--sab));
  will-change: transform;
  box-shadow: var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
/* In the dark a sheet is --surface, nearly the colour of a field: its fields,
   search boxes and tiles take a lighter fill, so they can be seen. */
[data-theme='dark'] .m-sheet { --m-field: var(--surface-hover); }
.m-sheet .handle {
  width: 100%;
  height: auto;
  background: transparent;
  margin: 0;
  flex-shrink: 0;
}

/* A search field with the app's own clear button shows only that one: the
   browser's cross of type="search" would stand beside it. */
.m-search .field:has(.clear) input::-webkit-search-cancel-button,
.m-search .field:has(.clear) input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}