/* Phone layout for touch devices (web and Android app), active under html.is-touch. Rules: review/mobile_design_system.md. */
html.is-touch {
  --primary: #416DC3; --primary-hover: #3659A3;
  --text: #213047; --text-muted: #67768C;
  --border: #E4EAF2; --divider: #E4EAF2;
  --badge-bg: #EAF1FC; --badge-text: #416DC3; --item-hover-bg: #EAF1FC;
  --pt-tint: #EAF1FC; --pt-panel: #F8FAFD; --pt-input: #F2F5FA; --pt-ripple: #22416DC3;
  --pt-search-bg: rgba(255, 255, 255, 0.93);
  --pt-grad: linear-gradient(135deg, #ECF3FF 0%, #F3F2FA 50%, #FAF6F0 100%);
  --pt-top-bg: rgba(243, 246, 252, 0.94);
  --pt-bar: 60px; --pt-search: 46px; --pt-head: 118px;
}
html.is-touch[data-theme="dark"] {
  --primary: #6C93E4; --primary-hover: #8AA9EC;
  --pt-tint: rgba(108, 147, 228, 0.18); --pt-panel: #1b2536; --pt-input: #0f172a; --pt-ripple: #226C93E4;
  --pt-search-bg: #1b2536;
  --pt-grad: linear-gradient(135deg, #0b1220 0%, #0f172a 50%, #131a2b 100%);
  --pt-top-bg: rgba(15, 23, 42, 0.94);
}
html.is-touch.pt-collapsed { --pt-bar: 48px; --pt-head: 56px; }

html.is-touch body {
  background: var(--pt-grad) fixed;
  padding: calc(118px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px));
}
html.is-touch :is(header, #searchBarContainer, #monthNavBar, #mobile-drawer-layer) { display: none !important; }
html.is-touch button, html.is-touch .pt-row { -webkit-tap-highlight-color: transparent; }

/* Title bar + search (fixed; folds on scroll) */
.pt-top { display: none; }
html.is-touch .pt-top {
  display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: env(safe-area-inset-top, 0px) 16px 8px; background: var(--pt-top-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pt-bar { display: flex; align-items: center; gap: 8px; height: var(--pt-bar); transition: height 180ms ease; }
.pt-titlewrap { flex: 1; min-width: 0; }
.pt-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size 180ms ease; }
html.is-touch.pt-collapsed .pt-title { font-size: 16px; }
.pt-status { font-size: 11px; line-height: 1.3; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-status[hidden] { display: none; }
.pt-iconbtn {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 16px;
  background: transparent; color: var(--text); cursor: pointer;
}
.pt-iconbtn:active { background: var(--pt-ripple); }
.pt-iconbtn:disabled { opacity: 0.35; }
.pt-iconbtn.all { color: var(--primary); }
.pt-search {
  display: flex; align-items: center; gap: 10px; height: var(--pt-search); margin-top: 6px; padding: 0 6px 0 14px;
  border-radius: 24px; background: var(--pt-search-bg); color: var(--text-muted); overflow: hidden;
  box-shadow: 0 1px 4px rgba(33, 48, 71, 0.10);
  transition: height 180ms ease, margin 180ms ease, opacity 180ms ease;
}
html.is-touch.pt-collapsed .pt-search { height: 0; margin-top: 0; opacity: 0; pointer-events: none; }
.pt-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.pt-search input::placeholder { color: var(--text-muted); }
.pt-clear { display: none; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); place-items: center; }
.pt-top.has-text .pt-clear { display: grid; }
html.is-touch.pt-select-mode .pt-search, html.is-touch.pt-signed-out .pt-search { display: none; }
html.is-touch.pt-signed-out { --pt-head: 68px; }
html.is-touch.pt-signed-out body { padding-top: calc(76px + env(safe-area-inset-top, 0px)); }

/* Note list: rounded panel per month on the gradient page */
html.is-touch .container { max-width: 720px; }
html.is-touch .notes-list { gap: 12px; }
html.is-touch .month-date-col { position: static; background: transparent; padding: 4px 4px; }
html.is-touch.pt-single-month .month-date-col { display: none; }
.pt-title-count { font-size: 12px; font-weight: 400; color: var(--text-muted); }
html.is-touch .month-date-month { font-size: 15px; }
html.is-touch .month-date-count { background: var(--pt-tint); color: var(--primary); }
html.is-touch .month-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
html.is-touch .note-item-row { padding: 14px 4px; border-bottom: 1px solid var(--divider); }
html.is-touch .note-item-row:first-child { border-radius: 0; }
html.is-touch .note-item-row:last-child { border-bottom: 0; border-radius: 0; }
html.is-touch .note-title { font-size: 15px; font-weight: 600; color: var(--text); }
html.is-touch .note-header { align-items: center; min-height: 21px; }
html.is-touch .note-header.no-title { position: static; width: 100%; }
html.is-touch .note-header-time { display: block; flex-shrink: 0; margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
html.is-touch :is(.note-quote, .note-plain-content) { font-size: 14px; line-height: 1.55 !important; }
html.is-touch .note-body .note-preview { -webkit-line-clamp: 2; line-clamp: 2; min-height: 0; line-height: 1.55; }
html.is-touch .note-preview-domain-spacer { display: none; float: right; width: 0; overflow: hidden; height: var(--pt-note-line, 1.55em); }
html.is-touch .note-preview.domain-second { min-height: calc(2 * var(--pt-note-line, 1.55em)); }
html.is-touch .note-preview.domain-second .note-preview-domain-spacer { display: block; }
html.is-touch :is(.note-preview-domain, .note-meta-domain) {
  display: block; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 400; line-height: 1.4;
}
html.is-touch .note-preview-domain { display: flex; align-items: center; float: right; clear: right; margin-left: 8px; height: var(--pt-note-line, 21.7px); }
html.is-touch .note-preview-domain-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.is-touch .domain-is-title { display: none; }
html.is-touch .note-meta { font-size: 12px; color: var(--text-muted); }
html.is-touch .note-meta { justify-content: flex-end; opacity: 1; }
html.is-touch .note-meta time { display: none; }
html.is-touch .note-item-row:has(.note-body.is-collapsed) .note-meta,
html.is-touch .note-meta:not(:has(.note-meta-domain)) { display: none; }
html.is-touch .note-item-row:not(:has(.note-body)) .note-meta { margin-top: 6px; }
html.is-touch .note-meta:has(.domain-is-title) { display: none; }
html.is-touch .welcome-card { border: 0; border-radius: 24px; background: var(--pt-panel); box-shadow: none; margin-top: 8px; }
html.is-touch .welcome-feature-item { background: var(--pt-tint); border: 0; border-radius: 16px; }
html.is-touch .welcome-login-btn { height: 48px; border-radius: 18px; box-shadow: none; }

/* Floating new-note button */
html.is-touch .mobile-fab-btn {
  display: flex; align-items: center; justify-content: center; position: fixed; right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: #fff; border: 0; box-shadow: 0 4px 14px rgba(65, 109, 195, 0.4); z-index: 800;
}
html.is-touch .mobile-fab-btn:active { background: var(--primary-hover); transform: scale(0.94); }
html.is-touch .mobile-fab-btn svg { stroke-width: 1.8; width: 24px; height: 24px; }
html.is-touch:is(.pt-select-mode, .pt-menu-open) .mobile-fab-btn { display: none; }
html.is-touch .toast-bar { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); border-radius: 18px; }

/* Full-screen menu */
.pt-menu { display: none; }
html.is-touch .pt-menu.show {
  display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1500; background: var(--pt-grad);
  padding-top: env(safe-area-inset-top, 0px);
}
.pt-menu-head, html.is-touch #docModal .doc-page-header { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; flex: none; }
html.is-touch #docModal { background: var(--pt-grad); padding: env(safe-area-inset-top, 0px) 0 0; }
html.is-touch #docModal .modal-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
html.is-touch.pt-collapsed #docModal .modal-title { font-size: 16px; }
html.is-touch #closeDocModal { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; border: 0 !important; border-radius: 16px !important; background: transparent !important; color: var(--text) !important; }
html.is-touch #closeDocModal svg { width: 22px !important; height: 22px !important; stroke-width: 1.8; }
html.is-touch #closeDocModal:active { background: var(--pt-ripple) !important; }
.pt-menu-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; }
.pt-group { padding: 4px 0; border-bottom: 1px solid var(--border); }
.pt-menu-body > .pt-group:last-child { border-bottom: 0; }
.pt-row {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 16px;
  background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.pt-row svg { flex: none; color: var(--text-muted); }
.pt-row:active { background: var(--pt-ripple); }
.pt-row.on { background: var(--pt-tint); color: var(--primary); }
.pt-row.on svg { color: var(--primary); }
.pt-row-label { flex: 1; min-width: 0; }
.pt-row-count { flex: none; font-size: 12px; color: var(--text-muted); }
.pt-picker { position: relative; display: flex; gap: 12px; padding: 8px 0; }
.pt-select { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; height: 46px; padding: 0 14px 0 16px; border: 0; border-radius: 24px; background: var(--pt-input); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.pt-select svg { flex: none; color: var(--text-muted); transition: transform 150ms; }
.pt-select.open svg { transform: rotate(180deg); }
.pt-pop { position: absolute; top: calc(100% - 4px); z-index: 5; width: calc(50% - 6px); max-height: 252px; overflow-y: auto; padding: 6px; border-radius: 24px; background: var(--pt-panel); box-shadow: 0 8px 28px rgba(33, 48, 71, 0.22); }
.pt-pop.year { left: 0; }
.pt-pop.month { right: 0; }
.pt-pop-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 16px; background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.pt-pop-item:active { background: var(--pt-ripple); }
.pt-pop-item.on { background: var(--pt-tint); color: var(--primary); }
.pt-stepper { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; }
.pt-stepper-label { font-size: 15px; font-weight: 700; }
.pt-account { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 0 0 12px; }
.pt-account > svg { flex: none; color: var(--text-muted); }
.pt-account-name { flex: none; font-size: 15px; white-space: nowrap; }
.pt-account-mail { flex: 1 1 0; min-width: 0; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-account .pt-iconbtn { margin-left: auto; }
.pt-footer { display: flex; flex-direction: column; align-items: center; flex: none; margin: 0 16px; padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.pt-footer-text { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* Multi-select */
.pt-selbar { display: none; }
html.is-touch.pt-select-mode .pt-selbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--pt-panel); border-radius: 24px 24px 0 0;
  box-shadow: 0 -2px 16px rgba(33, 48, 71, 0.12);
}
.pt-selbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
  border: 0; border-radius: 16px; background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.pt-selbar button:active { background: var(--pt-ripple); }
.pt-selbar button[data-sel="delete"] { color: var(--danger); }
html.is-touch.pt-select-mode body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html.is-touch.pt-select-mode .note-item-row { padding-right: 40px; -webkit-user-select: none; user-select: none; }
html.is-touch.pt-select-mode .note-item-row::after {
  content: ''; position: absolute; top: 14px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--text-muted); box-sizing: border-box;
}
html.is-touch.pt-select-mode .note-item-row.pt-selected { background: var(--pt-tint); border-radius: 16px; }
html.is-touch.pt-select-mode .note-item-row.pt-selected::after {
  border-color: var(--primary);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Dialogs and sheets */
html.is-touch :is(.modal-card, .trash-card, .doc-card) { border-radius: 24px; }
html.is-touch .form-input { background: var(--pt-input); border-color: transparent; border-radius: 10px; }
html.is-touch .create-input-wrap { background: var(--pt-input); border-color: transparent; }
html.is-touch .create-input-wrap :is(textarea.form-input, .input-action-row) { background: transparent; }
html.is-touch .pt-sheet { border-radius: 24px; }
html.is-touch .pt-sheet > button { height: 48px; border-radius: 16px; }
html.is-touch .pt-card .pt-actions button { height: 48px; border-radius: 18px; }
html.is-touch .modal-overlay { z-index: 1000; }
html.is-touch :is(#docModal, #trashModal) { z-index: 1600; }