/* =========================================================================
   Flints — responsive
   =========================================================================

   Every media query lives here, in the order it had in style.css, so a rule
   that only applies at some width is never hunted for across two files. Loaded
   after style.css, so equal-specificity rules here win.

   Breakpoints in use:
     1180px  outline rail hides
      900px  narrow desktop
      760px  phone / tablet — sidebar becomes a drawer
      480px  small phone
      340px  very small phone
   ========================================================================= */

@media (max-width: 860px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-visual{ display:none; }
}

@media (min-width: 761px){
  .app-shell.sidebar-collapsed{ grid-template-columns: 0 1fr; }
  .app-shell.sidebar-collapsed .sidebar{ opacity:0; pointer-events:none; }
}

@media (min-width: 761px) and (max-width: 900px){
  .editor-inner{ padding:0 28px 0; }
  .editor-content img{ max-width:75%; }
  .activity-section{ max-width:100%; }
  .activity-grid-col{ overflow-x:auto; }
}

@media (max-width: 760px){
  /* A phone shows one thing at a time. The note list is the main screen, the
     way a messaging app opens on its conversations, and a note takes the whole
     screen over it with a back arrow — rather than the desktop's drawer, which
     hid the list behind a gesture and left the editor showing underneath it. */
  .app-shell{ grid-template-columns: 1fr; transition:none; }
  .sidebar{
    position:static; width:100%; height:100%; min-height:0;
    transform:none; border-right:none; grid-column:1; grid-row:1;
    padding-bottom:0;
  }
  .main{ display:none; grid-column:1; grid-row:1; }
  body.note-open .sidebar{ display:none; }
  body.note-open .main{ display:flex; }
  /* The drawer scrim belongs to the model this replaces. */
  .sidebar-scrim{ display:none !important; }
  /* Hide view-toggle & sidebar actions — mobile bottom tabbar handles these. */
  .view-toggle{ display:none; }
  .sidebar-actions{ display:none; }
  .sidebar-path{ display:none; }
  .topbar{ padding:0 10px; gap:6px; }
  .topbar .crumb{ min-width:0; flex:1; }
  .topbar-meta{ display:none; }
  .saved-indicator span:not(.dot){ display:none; }
  .topbar-actions{ gap:2px; }
  .share-popover{ position:fixed; top:60px; right:10px; left:10px; width:auto; }
  .import-export-menu{ position:fixed; bottom:70px; left:10px; right:10px; width:auto; }
  .settings-shell{ width:100%; height:100dvh; max-height:100dvh; border-radius:0; max-width:100%; }
  .settings-sidebar{ width:100%; flex:1; border-right:none; border-bottom:none; flex-direction:column; overflow-y:auto; overflow-x:hidden; padding:4px 0; gap:0; background:var(--surface); }
  .settings-group-label{ display:none; }
  .settings-nav-item{ white-space:nowrap; padding:14px 20px; font-size:15px; border-radius:0; display:flex; align-items:center; gap:14px; position:relative; }
  .settings-nav-item::after{ content:''; position:absolute; bottom:0; left:52px; right:0; height:1px; background:var(--border); }
  .settings-nav-item:last-child::after{ display:none; }
  .settings-nav-item .icon{ width:18px; height:18px; }
  .settings-nav-item .nav-chevron{ display:flex; margin-left:auto; width:16px; height:16px; color:var(--muted); opacity:0.5; }
  .settings-body{ flex-direction:column; position:relative; }
  .settings-body.panel-active .settings-sidebar{ display:none; }
  .settings-body.panel-active .settings-content{ display:flex; flex-direction:column; }
  .settings-content{ display:none; padding:20px 16px; overflow-y:auto; flex:1; }
  .settings-content-section{ display:none; }
  .settings-content-section.active{ display:block; }
  .settings-back-btn{ display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:4px; margin-right:4px; border-radius:var(--radius-sm); }
  .settings-back-btn:hover{ background:var(--surface-2); }
  .settings-back-btn .icon{ width:20px; height:20px; }
  .settings-header #settingsCloseBtn{ display:flex; }
  .settings-body.panel-active .settings-header #settingsCloseBtn{ display:none; }
  .settings-body.panel-active .settings-header .settings-back-btn{ display:flex; }
  body:has(#i18nSettingsModal) .mobile-tabbar{ display:none !important; }
  body:has(#i18nSettingsModal) .app-shell{ padding-bottom:0 !important; }
  .settings-header h2{ font-size:16px; font-weight:700; }
  .settings-header{ padding:14px 16px; }
  .lang-selector{ flex-direction:column; }

  /* Editor */
  .editor-inner{ padding:0 16px 200px; }
  .editor-content{ min-height:320px; font-size:15px; }
  .editor-content img{ max-width:100%; }
  .editor-content h1{ font-size:21px; }
  .editor-content h2{ font-size:18px; }
  .editor-content h3{ font-size:16px; }
  .editor-content h4{ font-size:14px; }
  .editor-content p{ margin:0 0 10px; }
  .editor-content pre{ font-size:13px; padding:12px; }
  .title-input{ font-size:26px; }
  .fmt-toolbar{ width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .fmt-toolbar::-webkit-scrollbar{ display:none; }
  .editor-tabs{ width:100%; }
  .editor-tabs .tab-btn{ flex:1; padding:7px 8px; font-size:12px; }

  /* Links & local graph */
  .links-section{ margin-top:24px; padding-top:14px; }
  .local-graph-section{ margin-top:18px; padding-top:14px;  margin-bottom:18px; padding-bottom:14px; }
  .local-graph-svg{ min-height:140px; }

  /* Preview */
  .preview{ min-height:320px; font-size:15px; }

  /* Activity graph */
  .activity-section{ max-width:100%; overflow-x:hidden; }
  .activity-grid-col{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Welcome */
  .welcome{ padding:16px; }
  .welcome h3{ font-size:18px; }
  .welcome p{ font-size:13px; max-width:280px; }

  /* Slash command menu */
  .slash-command-menu{ min-width:auto; max-width:calc(100vw - 24px); }

  /* Wikilink autocomplete */
  .wikilink-autocomplete{ min-width:180px; max-width:calc(100vw - 24px); }

  /* Find & replace */
  .find-replace-panel{ right:10px; left:10px; min-width:auto; }

  /* Link open popup */
  .link-open-popup{ left:10px; right:10px; max-width:100%; }

  /* Quick switcher — full-screen on phones, but above the bottom tabbar */
  .quick-switcher-overlay{ padding-top:0; background:var(--surface); bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
  .quick-switcher{ max-width:100%; border:none; border-radius:0; box-shadow:none; height:100%; display:flex; flex-direction:column; }
  .quick-switcher .qs-results{ flex:1; max-height:none; overflow-y:auto; }
  .quick-switcher .qs-input-row{ border-bottom:1px solid var(--border); }
  .qs-close-btn{ display:none; }

  /* Input dialog */
  .input-dialog{ max-width:calc(100vw - 24px); padding:16px; }

  /* Note context menu */
  .note-context-menu{ min-width:160px; }

  /* Notification dropdown */
  .notif-dropdown{ position:fixed; top:60px; left:10px; right:10px; width:auto; max-height:60vh; }

  /* Toast */
  .toast{ left:10px; right:10px; transform:none; text-align:center; }
  .toast.show{ transform:none; }
}

@media (max-width: 480px){
  /* The 280px cap belonged to the drawer, where a panel sliding over the
     editor should not swallow the whole screen. The list is a screen in its
     own right now, so capping it just leaves dead space beside it. */
  .sidebar{ width:100%; max-width:none; }
  .welcome{ padding:12px; }
  .welcome h3{ font-size:16px; }
  .welcome p{ font-size:12.5px; max-width:240px; }
  .editor-inner{ padding:0 12px 24px; }
  .editor-content{ font-size:14.5px; min-height:240px; }
  .title-input{ font-size:22px; }
  .fmt-btn{ width:26px; height:26px; }
  .fmt-btn .icon{ width:13px; height:13px; }
  .activity-stats{ flex-wrap:wrap; gap:8px; }
  .activity-header{ flex-direction:column; align-items:flex-start; }
  .shortcuts-list{ gap:0; }
  .shortcut-row{ flex-direction:column; align-items:flex-start; gap:4px; padding:8px 0; }
  .settings-content{ padding:16px 12px; }
  .lang-card{ padding:14px 8px; }
  .lang-flag{ font-size:22px; }
  .share-popover{ top:54px; right:6px; left:6px; }
  .note-item{ padding:8px; }
  .note-item .excerpt{ padding-left:0; font-size:11.5px; }
  .welcome .icon-badge{ width:44px; height:44px; border-radius:12px; }
  .welcome .icon-badge .icon{ width:20px; height:20px; }
  .quick-switcher-overlay{ padding-top:0; }
  .qs-input-row{ padding:10px 12px; }
  .find-replace-panel{ top:4px; right:4px; left:4px; padding:8px 10px; }
  .fr-row{ flex-wrap:wrap; }
}

@media (max-width: 340px){
  .welcome{ padding:10px; gap:10px; }
  .welcome .icon-badge{ width:36px; height:36px; border-radius:10px; }
  .welcome .icon-badge .icon{ width:16px; height:16px; }
  .welcome h3{ font-size:14px; line-height:1.35; }
  .welcome p{ font-size:11.5px; max-width:100%; line-height:1.5; }
  .topbar{ padding:0 6px; gap:4px; }
  .topbar .crumb .current{ font-size:12px; }
  .sidebar-header .brand span{ font-size:15px; }
  .title-input{ font-size:19px; }
  .editor-inner{ padding:0 10px 140px; }
  .fmt-toolbar{ padding:3px; }
  .fmt-btn{ width:24px; height:24px; }
}

@media (max-width: 760px){
  .ctx-submenu{
    position:static; min-width:0; box-shadow:none; border:none;
    padding:0 0 0 14px; transform:none; display:none;
    background:transparent;
  }
  .ctx-sub-wrap.open > .ctx-submenu{ display:block; }
  .ctx-submenu::before{ display:none; }
}

@media (min-width: 761px) and (max-width: 900px){
  .note-cover:not([data-cover-image]), .note-cover[data-cover-image=""]{ padding-left:28px; padding-right:28px; }
}

@media (max-width:760px){
  .note-cover[data-cover-image]:not([data-cover-image=""]){ height:150px; }
  .cover-btn span{ display:none; }
  .note-cover:not([data-cover-image]), .note-cover[data-cover-image=""]{ padding-left:16px; padding-right:16px; }
}

@media (max-width:480px){
  .note-cover[data-cover-image]:not([data-cover-image=""]){ height:120px; margin-bottom:16px; }
  .note-cover:not([data-cover-image]), .note-cover[data-cover-image=""]{ padding-left:12px; padding-right:12px; }
}

@media (max-width:340px){
  .note-cover:not([data-cover-image]), .note-cover[data-cover-image=""]{ padding-left:10px; padding-right:10px; }
}

@media (max-width:480px){
  .cover-modal{ width:100%; max-width:100vw; max-height:100vh; border-radius:0; }
  .cover-grid{ grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); }
  .cover-grid-templates{ grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
}

@media (max-width: 760px){
  .sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:35; }
  .app-shell.sidebar-open .sidebar-scrim{ display:block; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

@media (max-width: 1180px){
  .doc-outline{ display:none; }
  #outlineBtn{ display:none; }
  body:not(.outline-hidden) .editor-scroll{ padding-right:0; }
}

/* =========================================================================
   Phone foundation
   =========================================================================

   Everything below is new mobile work rather than rules moved from style.css.
   ========================================================================= */

@media (max-width: 760px){

  /* 100vh is the height of the viewport *without* the on-screen keyboard, so
     with the keyboard open the shell stays full height and the bottom of the
     editor sits underneath it — including the line being typed. 100dvh
     shrinks with the keyboard, which is the whole point of the unit. */
  .app-shell{ height:100dvh; }

  /* Touch targets. The pointer here is a fingertip, not a 1px cursor, and
     anything under about 44px gets mis-tapped. */
  .btn-icon{ min-width:38px; min-height:38px; }
  .topbar-actions .btn-icon{ min-width:40px; min-height:40px; }
  .graph-toolbar .btn-icon{ min-width:34px; min-height:34px; }
  .graph-toolbar .btn-icon .icon{ width:15px; height:15px; }
  .graph-toolbar{ top:12px; left:12px; padding:4px; gap:4px; }
  .ctx-item{ padding:12px 14px; font-size:14px; }
  .note-item{ padding-top:10px; padding-bottom:10px; }

  /* Controls that only exist on hover cannot be reached at all without a
     pointer, so on touch they are simply always there. */
  .note-item .note-menu-btn{ opacity:1; }
  .tab .tab-close{ opacity:1; }
  .note-cover .cover-controls{ opacity:1; }

  /* The editor column takes the whole width; the desktop gutter that held the
     + and drag handle has nowhere to sit on a phone. */
  .editor-pane{ padding-left:16px; padding-right:16px; }
  .block-gutter{ display:none; }

  /* Room for the keyboard toolbar so the last line is never underneath it. */
  .editor-scroll{ padding-bottom:var(--kb-toolbar-space, 0px); }

  /* Prevent any horizontal overflow across the app */
  *{ box-sizing:border-box; }
  img, video, svg{ max-width:100%; height:auto; }
  table{ width:100%; overflow-x:auto; display:block; }
  pre{ overflow-x:auto; max-width:100%; }
}

/* =========================================================================
   Keyboard toolbar
   =========================================================================

   The desktop editor hangs its controls off hover: the + and drag handle
   appear beside the block under the cursor, the format bar on a selection.
   A finger has no hover state, so on a phone none of that is reachable.

   Notion answers this with a bar pinned directly above the keyboard while
   editing, and so does this. It is the one surface where every block and
   formatting action is always visible, which also means the slash menu stops
   being the only way to discover them.
   ========================================================================= */

.kb-toolbar{
  position:fixed; left:0; right:0; z-index:60;
  display:none; align-items:center; gap:2px;
  padding:6px 8px;
  background:var(--surface); border-top:1px solid var(--border);
  overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Sits on the keyboard, or on the home indicator when there is none. */
  bottom:0;
  padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
}
.kb-toolbar::-webkit-scrollbar{ display:none; }
.kb-toolbar.show{ display:flex; }

.kb-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 9px;
  background:transparent; border:none; border-radius:var(--radius-sm);
  color:var(--ink); font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.kb-btn:active{ background:var(--surface-2); }
.kb-btn.is-active{ background:var(--accent-soft); color:var(--accent); }
.kb-btn .icon{ width:18px; height:18px; }
.kb-sep{ flex:none; width:1px; height:22px; background:var(--border); margin:0 5px; }

/* The first button inserts a block and is the one people reach for most, so
   it reads as a button rather than another icon in the row. */
.kb-btn.kb-primary{ color:var(--accent); }

@media (min-width: 761px){
  /* Desktop has hover; the bar would only take up room. */
  .kb-toolbar{ display:none !important; }
}

/* =========================================================================
   Bottom sheet
   =========================================================================

   Popovers anchored to a control assume a pointer and a large screen. On a
   phone a menu belongs at the bottom, within thumb reach, with rows big
   enough to hit without aiming.
   ========================================================================= */

.mobile-sheet-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end;
  opacity:0; transition:opacity .18s ease;
}
.mobile-sheet-overlay.show{ opacity:1; }

.mobile-sheet{
  width:100%; max-height:72dvh;
  background:var(--surface);
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 32px rgba(0,0,0,.28);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transform:translateY(100%);
  transition:transform .22s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column;
}
.mobile-sheet-overlay.show .mobile-sheet{ transform:translateY(0); }

.mobile-sheet-grip{
  width:38px; height:4px; border-radius:2px;
  background:var(--border); margin:10px auto 4px;
  flex:none;
}
.mobile-sheet-title{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:6px 18px 10px; flex:none;
}
.mobile-sheet-list{ overflow-y:auto; padding:0 8px 12px; }

.mobile-sheet-item{
  display:flex; align-items:center; gap:14px;
  width:100%; min-height:50px; padding:0 12px;
  background:transparent; border:none; border-radius:var(--radius-sm);
  font-family:inherit; font-size:15px; color:var(--ink);
  text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mobile-sheet-item:active{ background:var(--surface-2); }
.mobile-sheet-item .icon{ width:19px; height:19px; color:var(--muted); flex:none; }
.mobile-sheet-label{ flex:1; min-width:0; }

@media (min-width: 761px){
  .mobile-sheet-overlay{ display:none !important; }
}

/* =========================================================================
   Phone tab bar
   =========================================================================

   On a phone the sidebar is a drawer, which put everything in it two gestures
   away: open the drawer, then find the thing. These five are the destinations
   people reach for constantly, so they get a fixed place at thumb height.
   ========================================================================= */

.mobile-tabbar{ display:none; }

@media (max-width: 760px){
  .mobile-tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:55;
    display:flex; align-items:stretch;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }

  .mtab{
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 2px 7px;
    background:transparent; border:none;
    font-family:inherit; font-size:10.5px; font-weight:500; letter-spacing:.01em;
    color:var(--muted); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mtab .icon{ width:21px; height:21px; }
  .mtab span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .mtab:active{ color:var(--ink); }
  .mtab.active{ color:var(--accent); }

  /* Writing a note is the reason the app exists, so it is not just another
     icon in the row. */
  .mtab-new{ flex:0 0 auto; padding:0 14px; }
  .mtab-new .icon{
    width:44px; height:44px; padding:11px;
    box-sizing:border-box;
    border-radius:14px;
    background:var(--accent); color:#fff;
  }
  .mtab-new:active .icon{ opacity:.85; }

  /* Nothing may end up underneath the bar. */
  .app-shell{ padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Two bars must never stack: while the keyboard toolbar is up, the editor
     has focus and navigation is not what the thumb is there for. */
  body.kb-open .mobile-tabbar{ display:none; }
  body.kb-open .app-shell{ padding-bottom:0; }

  /* The tab bar already leads to search, so the sidebar's own button and the
     desktop tab strip are redundant on a phone. */
  .tab-bar{ display:none; }
}

@media (max-width: 760px){
  /* The heatmap is wide and dense — a year of days at 10px each. On the
     welcome screen of a phone it pushes everything else off, so it appears
     only when it was actually asked for, from the account menu. */
  .welcome .activity-section{ display:none; }
  body.show-activity .welcome .activity-section{ display:block; }
  body.show-activity .welcome .icon-badge,
  body.show-activity .welcome h3,
  body.show-activity .welcome p{ display:none; }

  /* No hover on a finger, so the cell tooltip cannot be the only way to read
     a day; the cells get big enough to tap instead. */
  .activity-grid{ grid-template-rows:repeat(7, 12px); grid-auto-columns:12px; gap:3px; }
  .activity-cell{ width:12px; height:12px; }
  .activity-header{ gap:10px; }
  .activity-stats{ flex-wrap:wrap; gap:10px; }
}

/* Back to the list. Only meaningful on a phone, where a note covers the list
   entirely; at wider widths both are on screen and there is nothing to leave. */
.topbar-back{ display:none; }
@media (max-width: 760px){
  body.note-open .topbar-back{ display:inline-flex; }
  .topbar-back .icon{ width:22px; height:22px; }
  /* The title is the only thing that needs the width once the note is open. */
  .topbar{ padding-left:4px; }
}

/* =========================================================================
   Account menu on a phone
   =========================================================================

   The menu is absolutely positioned against the account chip and sized for a
   268px sidebar. Once the list became a full screen it kept that width while
   its anchor sat at the foot of a much wider column, so it opened misaligned
   and ran past the edge. It is a sheet here instead — the same shape as every
   other menu on a phone.
   ========================================================================= */

@media (max-width: 760px){
  .user-menu{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    z-index:130;
    border:none; border-radius:16px 16px 0 0;
    padding:8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -8px 32px rgba(0,0,0,.32);
    max-height:76dvh; overflow-y:auto;
  }
  /* A grip, so it reads as something you dismiss rather than a stray panel. */
  .user-menu::before{
    content:""; display:block;
    width:38px; height:4px; border-radius:2px;
    background:var(--border); margin:2px auto 8px;
  }
  .user-menu .ctx-item{ padding:13px 14px; font-size:15px; }
  .user-menu .ctx-item .icon{ width:19px; height:19px; }

  /* Its submenu cannot fly out sideways on a phone; it opens in place. */
  .ctx-submenu{
    position:static; display:none; width:auto;
    border:none; box-shadow:none; background:transparent;
    padding:0 0 0 26px; margin-top:2px;
  }
  .ctx-sub-wrap.open .ctx-submenu{ display:block; }
  .ctx-sub-chev{ transition:transform .16s ease; }
  .ctx-sub-wrap.open .ctx-sub-chev{ transform:rotate(90deg); }

  /* The account chip stays put at the foot of the list. */
  .sidebar-footer{ position:relative; }
}