@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

  :root{
    /* ---- Warm-green grey scale (HSL, saturation raised at the extremes) ---- */
    --g50:  hsl(100, 22%, 96%);
    --g100: hsl(100, 20%, 93%);
    --g200: hsl(100, 17%, 87%);
    --g300: hsl(100, 14%, 78%);
    --g400: hsl(100, 11%, 62%);
    --g500: hsl(103, 11%, 48%);
    --g600: hsl(103, 13%, 38%);
    --g700: hsl(103, 16%, 28%);
    --g800: hsl(103, 20%, 20%);
    --g900: hsl(103, 24%, 13%);

    /* ---- Primary (forest green) ---- */
    --p100: hsl(140, 30%, 92%);
    --p300: hsl(140, 26%, 70%);
    --p500: hsl(140, 29%, 33%);
    --p600: hsl(140, 31%, 28%);
    --p700: hsl(140, 34%, 22%);

    /* ---- Accent (clay red — margin rule, destructive, active marker) ---- */
    --r100: hsl(14, 45%, 92%);
    --r500: hsl(14, 53%, 42%);
    --r600: hsl(14, 56%, 35%);

    /* ---- Semantic aliases ---- */
    --paper:      var(--g100);
    --sidebar-bg: var(--g50);
    --surface:    hsl(60, 30%, 98%);
    --hairline:   var(--g200);
    --ink:        var(--g900);
    --ink-2:      var(--g600);
    --ink-3:      var(--g400);
    --accent:     var(--p500);
    --accent-dim: var(--p600);
    --margin-red: var(--r500);

    /* ---- Spacing scale (base 16) ---- */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
    --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;

    /* ---- Type scale ---- */
    --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:18px;
    --t-xl:20px; --t-2xl:24px; --t-3xl:30px;

    /* ---- Elevation (5 levels, two-part shadows) ---- */
    --e-xs: 0 1px 2px hsla(103,24%,13%,0.05);
    --e-sm: 0 1px 3px hsla(103,24%,13%,0.10), 0 2px 6px hsla(103,24%,13%,0.04);
    --e-md: 0 2px 6px hsla(103,24%,13%,0.10), 0 6px 16px hsla(103,24%,13%,0.06);
    --e-lg: 0 4px 10px hsla(103,24%,13%,0.10), 0 12px 32px hsla(103,24%,13%,0.10);
    --e-xl: 0 8px 20px hsla(103,24%,13%,0.12), 0 24px 56px hsla(103,24%,13%,0.14);

    --radius-sm:6px;
    --radius:10px;
    --radius-lg:14px;

    --tap:44px; /* minimum touch target */
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  #app{
    display:flex;
    height:100dvh;
    width:100vw;
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }
  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:var(--radius-sm);
  }

  /* ================= Sidebar ================= */
  #sidebar{
    width:320px;
    flex-shrink:0;
    background:var(--sidebar-bg);
    display:flex;
    flex-direction:column;
    position:relative;
    padding-left:var(--s7);
  }
  #sidebar::before{
    content:"";
    position:absolute;
    left:var(--s5);
    top:0; bottom:0;
    width:1.5px;
    background:var(--margin-red);
    opacity:0.4;
  }
  .sidebar-head{
    padding:var(--s6) var(--s4) var(--s4) 0;
  }
  .brand{
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:var(--t-xl);
    color:var(--ink);
    margin:0;
    display:flex;
    align-items:baseline;
    gap:var(--s2);
    line-height:1.1;
  }
  .brand .dot{ color:var(--margin-red); }
  .tagline{
    font-size:var(--t-xs);
    color:var(--ink-3);
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin:var(--s1) 0 var(--s5) 0;
  }
  #search{
    width:100%;
    min-height:var(--tap);
    padding:0 var(--s3);
    border:none;
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:inset 0 0 0 1px var(--g200), var(--e-xs);
    font-family:'Inter',sans-serif;
    font-size:var(--t-sm);
    color:var(--ink);
    outline:none;
  }
  #search::placeholder{ color:var(--ink-3); }
  #search:focus{ box-shadow:inset 0 0 0 2px var(--accent); }

  #new-note-btn{
    margin:0 var(--s4) var(--s3) 0;
    min-height:var(--tap);
    padding:0 var(--s4);
    background:var(--accent);
    color:var(--surface);
    border:none;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:var(--t-sm);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--s2);
    box-shadow:var(--e-sm);
    transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  }
  #new-note-btn:hover{ background:var(--accent-dim); box-shadow:var(--e-md); }
  #new-note-btn:active{ box-shadow:var(--e-xs); transform:translateY(1px); }

  #note-list{
    flex:1;
    overflow-y:auto;
    padding:0 var(--s2) var(--s8) 0;
    -webkit-overflow-scrolling:touch;
  }
  /* Borders removed — separation now comes from spacing + hover background. */
  .note-item{
    position:relative;
    padding:var(--s3);
    margin-bottom:var(--s1);
    cursor:pointer;
    border-radius:var(--radius);
    transition:background 0.12s ease;
  }
  .note-item:hover{ background:var(--g100); }
  .note-item.active{
    background:var(--surface);
    box-shadow:var(--e-sm);
  }
  .note-item.active::after{
    content:"";
    position:absolute;
    left:calc(var(--s3) * -1 - 6px);
    top:var(--s2); bottom:var(--s2);
    width:3px;
    border-radius:3px;
    background:var(--margin-red);
  }
  .note-title{
    font-family:'Zilla Slab',serif;
    font-weight:600;
    font-size:var(--t-base);
    line-height:1.3;
    color:var(--ink);
    margin-bottom:var(--s1);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding-right:var(--s6);
  }
  .note-preview{
    font-family:'Inter',sans-serif;
    font-size:var(--t-xs);
    color:var(--ink-2);
    line-height:1.5;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:var(--s2);
  }
  .note-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:var(--s5);
  }
  .note-date{
    font-size:var(--t-xs);
    color:var(--ink-3);
    font-family:'IBM Plex Mono',monospace;
  }
  .note-tags{ display:flex; gap:var(--s1); flex-wrap:wrap; margin-top:var(--s2); }
  .tag-chip{
    font-size:var(--t-xs);
    font-family:'Inter',sans-serif;
    padding:2px var(--s2);
    background:var(--p100);
    border-radius:999px;
    color:var(--p700);
  }
  /* Tap target is 44px via padding; the glyph itself stays small. */
  .delete-btn{
    opacity:0;
    background:none;
    border:none;
    color:var(--margin-red);
    cursor:pointer;
    font-size:var(--t-xs);
    line-height:1;
    width:var(--tap); height:var(--tap);
    margin:calc(var(--s3) * -1) calc(var(--s2) * -1) calc(var(--s3) * -1) 0;
    border-radius:var(--radius-sm);
    transition:opacity 0.12s ease, background 0.12s ease;
  }
  .note-item:hover .delete-btn,
  .note-item.active .delete-btn{ opacity:0.7; }
  .delete-btn:hover{ opacity:1 !important; background:var(--r100); }

  .empty-list{
    padding:var(--s8) var(--s3);
    color:var(--ink-3);
    font-size:var(--t-sm);
    line-height:1.6;
    white-space:pre-line;
  }

  /* Backdrop dims content behind the mobile drawer. */
  #scrim{
    display:none;
    position:fixed; inset:0;
    background:hsla(103,24%,13%,0.4);
    z-index:4;
    opacity:0;
    transition:opacity 0.2s ease;
  }
  #scrim.show{ display:block; opacity:1; }

  /* ================= Main editor ================= */
  #main{
    flex:1;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    min-width:0;
  }
  #main.empty-state{ align-items:center; justify-content:center; }
  .empty-main{ text-align:center; max-width:320px; padding:var(--s6); }
  .empty-main .mark{
    font-family:'Zilla Slab',serif;
    font-size:var(--t-3xl);
    color:var(--g300);
    display:block;
    margin-bottom:var(--s3);
  }
  .empty-main h2{
    font-family:'Zilla Slab',serif;
    font-size:var(--t-xl);
    margin:0 0 var(--s2);
    color:var(--ink);
  }
  .empty-main p{
    font-size:var(--t-sm);
    color:var(--ink-2);
    line-height:1.6;
    margin:0 0 var(--s6);
  }
  .empty-main button{
    min-height:var(--tap);
    padding:0 var(--s6);
    background:var(--accent);
    color:var(--surface);
    border:none;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:var(--t-sm);
    cursor:pointer;
    box-shadow:var(--e-sm);
  }
  .empty-main button:hover{ background:var(--accent-dim); box-shadow:var(--e-md); }

  #editor-header{
    padding:var(--s6) var(--s7) var(--s4);
    flex-shrink:0;
  }
  .title-row{ display:flex; align-items:center; gap:var(--s2); }
  #title-autocomplete{ position:relative; flex:1; min-width:0; }
  /* Ghost sits behind the real input. Both share identical font/padding/border
     so the typed-so-far text lines up exactly and only the suggestion tail
     (which the real input has nothing drawn over) shows through. */
  #title-ghost{
    position:absolute;
    inset:0;
    padding:var(--s1) 0;
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:var(--t-2xl);
    line-height:1.2;
    white-space:pre;
    overflow:hidden;
    pointer-events:none;
  }
  #title-ghost-typed{ color:transparent; }
  #title-ghost-suggest{ color:var(--g300); }
  #title-input{
    position:relative;
    width:100%;
    border:none; outline:none; background:transparent;
    font-family:'Zilla Slab',serif;
    font-weight:700;
    font-size:var(--t-2xl);
    line-height:1.2;
    color:var(--ink);
    padding:var(--s1) 0;
  }
  #title-input::placeholder{ color:var(--g300); }

  .header-row{
    display:flex;
    align-items:center;
    gap:var(--s3);
    margin-top:var(--s2);
  }
  /* Tags are metadata: de-emphasised so the title stays primary. */
  #tags-input{
    flex:1;
    min-width:0;
    border:none; outline:none; background:transparent;
    font-family:'Inter',sans-serif;
    font-size:var(--t-xs);
    color:var(--ink-2);
    padding:var(--s2) 0;
  }
  #tags-input::placeholder{ color:var(--ink-3); }

  .view-toggle{
    display:flex;
    background:var(--g100);
    border-radius:var(--radius);
    padding:3px;
    gap:2px;
    flex-shrink:0;
  }
  .view-toggle button{
    padding:var(--s2) var(--s3);
    min-height:34px;
    background:transparent;
    border:none;
    border-radius:var(--radius-sm);
    font-family:'Inter',sans-serif;
    font-size:var(--t-xs);
    font-weight:500;
    color:var(--ink-2);
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.12s ease, color 0.12s ease;
  }
  .view-toggle button:hover{ color:var(--ink); }
  .view-toggle button.active{
    background:var(--surface);
    color:var(--p700);
    font-weight:600;
    box-shadow:var(--e-xs);
  }

  .save-status{
    font-size:var(--t-xs);
    font-family:'IBM Plex Mono',monospace;
    color:var(--ink-3);
    opacity:0;
    transition:opacity 0.4s ease;
    white-space:nowrap;
    flex-shrink:0;
  }
  .save-status.show{ opacity:1; }

  #editor-body{
    flex:1;
    display:flex;
    overflow:hidden;
    min-height:0;
  }
  #source-pane, #preview-pane, #direct-pane{
    flex:1;
    overflow-y:auto;
    padding:var(--s6) var(--s7) var(--s10);
    min-width:0;
    -webkit-overflow-scrolling:touch;
  }
  #source-pane{
    box-shadow:inset -1px 0 0 var(--hairline);
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 27px,
        var(--g200) 28px
      );
    background-attachment:local;
  }
  #source{
    width:100%;
    height:100%;
    min-height:400px;
    max-width:68ch; /* keeps line length in the 45–75 char range */
    border:none; outline:none; resize:none;
    background:transparent;
    font-family:'IBM Plex Mono',monospace;
    font-size:var(--t-sm);
    line-height:28px;
    color:var(--ink);
  }
  #source::placeholder{ color:var(--g300); }

  /* ---- Rendered markdown (shared look between Preview and Direct) ---- */
  #preview-pane{
    font-family:'IBM Plex Mono',monospace;
    font-size:var(--t-sm);
    line-height:1.75;
    color:var(--ink);
  }
  #preview-pane > *{ max-width:68ch; }
  #preview-pane h1, #preview-pane h2, #preview-pane h3,
  #preview-pane h4, #preview-pane h5, #preview-pane h6{
    font-family:'Zilla Slab',serif;
    line-height:1.25;
    margin:var(--s6) 0 var(--s2);
  }
  /* Heading level reads through color as well as size: h1 darkest, each
     level down a shade lighter, h5/h6 holding at the h4 shade rather than
     fading further (see refactoring-ui-skill: weight+color over size alone). */
  #preview-pane h1{ font-size:var(--t-2xl); color:var(--g900); }
  #preview-pane h2{ font-size:var(--t-xl);  color:var(--g800); }
  #preview-pane h3{ font-size:var(--t-lg);  color:var(--g700); }
  #preview-pane h4, #preview-pane h5, #preview-pane h6{ color:var(--g600); }
  #preview-pane p{ margin:0 0 var(--s4); }
  #preview-pane code{
    background:var(--g100);
    padding:1px var(--s1);
    border-radius:var(--radius-sm);
    font-size:0.9em;
  }
  #preview-pane pre{
    background:var(--g100);
    padding:var(--s3) var(--s4);
    border-radius:var(--radius);
    overflow-x:auto;
  }
  #preview-pane pre code{ background:none; padding:0; }
  #preview-pane blockquote{
    border-left:3px solid var(--margin-red);
    margin:var(--s4) 0;
    padding:var(--s1) 0 var(--s1) var(--s4);
    color:var(--ink-2);
  }
  #preview-pane a{ color:var(--accent); font-weight:500; }
  #preview-pane hr{ border:none; border-top:1px solid var(--hairline); margin:var(--s6) 0; }
  #preview-pane table{ border-collapse:collapse; }
  #preview-pane th, #preview-pane td{
    border:1px solid var(--hairline);
    padding:var(--s2) var(--s3);
  }
  #preview-pane li:has(input[type="checkbox"]),
  #preview-pane li.no-bullet{
    list-style:none;
    margin-left:-1.4em;
  }
  #preview-pane li input[type="checkbox"]{
    margin-right:var(--s2);
    width:17px; height:17px;
    accent-color:var(--accent);
    cursor:pointer;
    vertical-align:-2px;
  }

  /* ---- Direct Write ---- */
  #direct-pane{
    outline:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:var(--t-sm);
    line-height:1.75;
    color:var(--ink);
    display:none;
    cursor:text;
  }
  #direct-pane .dw-line{
    max-width:68ch;
    min-height:1.75em;
    white-space:pre-wrap;
    word-break:break-word;
    padding:0 var(--s2);
    margin-left:calc(var(--s2) * -1);
    border-radius:var(--radius-sm);
  }
  /* Raw line reads as "inset / being edited": recessed tint, no heavy ring. */
  #direct-pane .dw-line.dw-raw{
    background:var(--g100);
    box-shadow:inset 0 1px 2px hsla(103,24%,13%,0.06);
  }
  #direct-pane .dw-h{ font-family:'Zilla Slab',serif; font-weight:700; line-height:1.25; }
  #direct-pane .dw-h1{ font-size:var(--t-2xl); margin:var(--s5) 0 var(--s2); color:var(--g900); }
  #direct-pane .dw-h2{ font-size:var(--t-xl);  margin:var(--s5) 0 var(--s2); color:var(--g800); }
  #direct-pane .dw-h3{ font-size:var(--t-lg);  margin:var(--s4) 0 var(--s1); color:var(--g700); }
  #direct-pane .dw-h4, #direct-pane .dw-h5, #direct-pane .dw-h6{
    font-size:var(--t-base); margin:var(--s4) 0 var(--s1); color:var(--g600);
  }
  #direct-pane .dw-bullet, #direct-pane .dw-number{ display:flex; gap:var(--s2); }
  #direct-pane .dw-dot{ color:var(--p300); }
  #direct-pane .dw-num{ color:var(--ink-3); min-width:1.6em; }
  #direct-pane .dw-check{ display:flex; align-items:flex-start; gap:var(--s2); }
  #direct-pane .dw-check input{
    margin-top:5px;
    width:17px; height:17px;
    accent-color:var(--accent);
    cursor:pointer;
    flex-shrink:0;
  }
  #direct-pane .dw-checked-text{ text-decoration:line-through; color:var(--ink-3); }
  #direct-pane .dw-quote{
    border-left:3px solid var(--margin-red);
    padding-left:var(--s3);
    color:var(--ink-2);
  }
  #direct-pane code{ background:var(--g100); padding:1px var(--s1); border-radius:var(--radius-sm); }
  #direct-pane a{ color:var(--accent); font-weight:500; }
  #direct-pane hr{ border:none; border-top:1px solid var(--hairline); margin:var(--s3) 0; }

  .hidden{ display:none !important; }

  #menu-btn{
    display:none;
    background:none;
    border:none;
    color:var(--ink-2);
    font-size:var(--t-lg);
    cursor:pointer;
    width:var(--tap); height:var(--tap);
    margin-left:calc(var(--s3) * -1);
    border-radius:var(--radius-sm);
    flex-shrink:0;
    align-items:center;
    justify-content:center;
  }
  #menu-btn:hover{ background:var(--g100); }

  /* ================= Tablet ================= */
  @media (max-width:1024px){
    #sidebar{ width:264px; }
    #editor-header{ padding:var(--s5) var(--s6) var(--s3); }
    #source-pane, #preview-pane, #direct-pane{ padding:var(--s5) var(--s6) var(--s9); }
  }

  /* ================= Mobile ================= */
  @media (max-width:720px){
    /* Drawer */
    #sidebar{
      position:fixed;
      z-index:5;
      height:100dvh;
      width:min(88vw, 340px);
      box-shadow:var(--e-xl);
      transform:translateX(-100%);
      transition:transform 0.24s cubic-bezier(0.32,0.72,0,1);
      padding-left:var(--s6);
      padding-top:env(safe-area-inset-top);
    }
    #sidebar.open{ transform:translateX(0); }
    #menu-btn{ display:flex; }

    #editor-header{
      padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s4) var(--s3);
    }
    #title-input, #title-ghost{ font-size:var(--t-xl); }

    /* Split stacks vertically instead of squeezing two columns into ~180px. */
    #editor-body{ flex-direction:column; }
    #source-pane{
      box-shadow:inset 0 -1px 0 var(--hairline);
      max-height:50%;
    }
    #source-pane, #preview-pane, #direct-pane{
      padding:var(--s4) var(--s4) var(--s9);
    }

    /* View toggle moves into the thumb zone as a bottom bar. */
    .header-row{
      position:fixed;
      left:0; right:0; bottom:0;
      z-index:3;
      margin:0;
      padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
      background:var(--surface);
      box-shadow:0 -1px 0 var(--hairline), var(--e-lg);
      gap:var(--s2);
    }
    .view-toggle{ flex:1; }
    .view-toggle button{
      flex:1;
      min-height:var(--tap);
      padding:var(--s2) var(--s1);
      font-size:var(--t-xs);
    }
    /* Tags move above the bar, on their own line. */
    #tags-input{
      position:fixed;
      left:0; right:0;
      bottom:calc(var(--tap) + var(--s5) + env(safe-area-inset-bottom));
      z-index:3;
      padding:var(--s2) var(--s4);
      background:var(--surface);
      box-shadow:0 -1px 0 var(--hairline);
    }
    .save-status{
      position:fixed;
      right:var(--s4);
      bottom:calc(var(--tap) + var(--s8) + env(safe-area-inset-bottom));
      z-index:3;
      padding:var(--s1) var(--s2);
      background:var(--g100);
      border-radius:999px;
    }
    /* Clear the fixed bottom furniture so nothing hides under it. */
    #source-pane, #preview-pane, #direct-pane{
      padding-bottom:calc(var(--tap) + var(--s10) + env(safe-area-inset-bottom));
    }
    #note-list{ padding-bottom:calc(var(--s10) + env(safe-area-inset-bottom)); }
  }

  @media (max-width:380px){
    .view-toggle button{ padding:var(--s2) 2px; letter-spacing:-0.01em; }
  }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:var(--g300); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--g400); background-clip:content-box; }
  ::-webkit-scrollbar-track{ background:transparent; }

  /* ================= Lock screen ================= */
  #lock-screen{
    position:fixed;
    inset:0;
    z-index:20;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--s6);
    padding-top:calc(var(--s6) + env(safe-area-inset-top));
    overflow-y:auto;
  }
  #lock-form{
    width:100%;
    max-width:400px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:var(--s7);
    box-shadow:var(--e-lg);
  }
  #lock-form .brand{ margin-bottom:var(--s6); font-size:var(--t-lg); }
  #lock-form h1{
    font-family:'Zilla Slab',serif;
    font-size:var(--t-2xl);
    margin:0 0 var(--s2);
    color:var(--ink);
  }
  #lock-blurb{
    font-size:var(--t-sm);
    line-height:1.6;
    color:var(--ink-2);
    margin:0 0 var(--s6);
  }
  #lock-form input[type="password"],
  #lock-form input[type="url"],
  #lock-form input[type="email"]{
    width:100%;
    min-height:var(--tap);
    padding:0 var(--s3);
    margin-bottom:var(--s3);
    border:none;
    border-radius:var(--radius);
    background:var(--g50);
    box-shadow:inset 0 0 0 1px var(--g200);
    font-family:'IBM Plex Mono',monospace;
    font-size:var(--t-sm);
    color:var(--ink);
    outline:none;
  }
  #lock-form input[type="password"]:focus,
  #lock-form input[type="url"]:focus,
  #lock-form input[type="email"]:focus{ box-shadow:inset 0 0 0 2px var(--accent); }
  #lock-submit{
    width:100%;
    min-height:var(--tap);
    background:var(--accent);
    color:var(--surface);
    border:none;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:var(--t-sm);
    cursor:pointer;
    box-shadow:var(--e-sm);
    margin-top:var(--s2);
  }
  #lock-submit:hover:not(:disabled){ background:var(--accent-dim); box-shadow:var(--e-md); }
  #lock-submit:disabled{ opacity:0.6; cursor:default; }

  .lock-error{
    display:none;
    font-size:var(--t-xs);
    line-height:1.5;
    color:var(--r600);
    background:var(--r100);
    border-radius:var(--radius-sm);
    padding:var(--s2) var(--s3);
    margin:0 0 var(--s2);
  }
  .lock-error.show{ display:block; }

  /* Deliberately prominent: this is the one irreversible thing in the app. */
  .lock-warning{
    font-size:var(--t-xs);
    line-height:1.6;
    color:var(--ink-2);
    background:var(--g50);
    border-left:3px solid var(--margin-red);
    border-radius:var(--radius-sm);
    padding:var(--s3);
    margin:var(--s5) 0 0;
  }
  .lock-warning strong{ color:var(--ink); }

  /* ================= Sidebar footer ================= */
  .sidebar-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s2);
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)) 0;
    box-shadow:0 -1px 0 var(--hairline);
  }
  /* Sync state is visually distinct from the save state on purpose. */
  .sync-pill{
    font-family:'IBM Plex Mono',monospace;
    font-size:var(--t-xs);
    color:var(--ink-3);
    background:var(--g100);
    border-radius:999px;
    padding:var(--s1) var(--s3);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #lock-btn{
    min-height:34px;
    padding:0 var(--s3);
    background:transparent;
    border:none;
    border-radius:var(--radius-sm);
    font-family:'Inter',sans-serif;
    font-size:var(--t-xs);
    font-weight:500;
    color:var(--ink-2);
    cursor:pointer;
    flex-shrink:0;
  }
  #lock-btn:hover{ background:var(--g100); color:var(--ink); }

  .save-status.is-error{ color:var(--r600); font-weight:600; }

  /* ================= Sync pill states ================= */
  .sync-pill{
    border:none;
    cursor:pointer;
    transition:background 0.12s ease, color 0.12s ease;
  }
  .sync-pill:hover{ background:var(--g200); }
  .sync-pill.is-syncing{ color:var(--accent-dim); }
  .sync-pill.is-pending{ color:var(--ink-2); }
  .sync-pill.is-error{ color:var(--r600); background:var(--r100); }

  /* ================= Sync modal ================= */
  #sync-modal{
    position:fixed;
    inset:0;
    z-index:25;
    background:hsla(103,24%,13%,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--s6);
  }
  #sync-modal-panel{
    width:100%;
    max-width:400px;
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:var(--s7);
    box-shadow:var(--e-lg);
  }
  #sync-modal-panel .brand{ margin-bottom:var(--s5); font-size:var(--t-lg); }
  #sync-account-label{
    font-size:var(--t-sm);
    color:var(--ink);
    font-weight:600;
    margin:0 0 var(--s1);
  }
  #sync-status-detail{
    font-size:var(--t-xs);
    font-family:'IBM Plex Mono',monospace;
    color:var(--ink-3);
    margin:0 0 var(--s5);
  }
  #sync-disconnect-btn{
    width:100%;
    min-height:var(--tap);
    background:transparent;
    color:var(--r600);
    border:none;
    box-shadow:inset 0 0 0 1px var(--r100);
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:var(--t-sm);
    cursor:pointer;
    margin-bottom:var(--s5);
  }
  #sync-disconnect-btn:hover{ background:var(--r100); }
  #sync-form input{
    width:100%;
    min-height:var(--tap);
    padding:0 var(--s3);
    margin-bottom:var(--s3);
    border:none;
    border-radius:var(--radius);
    background:var(--g50);
    box-shadow:inset 0 0 0 1px var(--g200);
    font-family:'IBM Plex Mono',monospace;
    font-size:var(--t-sm);
    color:var(--ink);
    outline:none;
  }
  #sync-form input:focus{ box-shadow:inset 0 0 0 2px var(--accent); }
  .sync-actions{ display:flex; gap:var(--s2); margin-top:var(--s2); }
  .sync-actions button{
    flex:1;
    min-height:var(--tap);
    border:none;
    border-radius:var(--radius);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:var(--t-sm);
    cursor:pointer;
  }
  #sync-register-btn{ background:var(--accent); color:var(--surface); box-shadow:var(--e-sm); }
  #sync-register-btn:hover{ background:var(--accent-dim); box-shadow:var(--e-md); }
  #sync-login-btn{ background:var(--g100); color:var(--ink); }
  #sync-login-btn:hover{ background:var(--g200); }

  .link-btn{
    display:block;
    width:100%;
    text-align:center;
    background:none;
    border:none;
    color:var(--ink-2);
    font-family:'Inter',sans-serif;
    font-size:var(--t-xs);
    text-decoration:underline;
    cursor:pointer;
    padding:var(--s3) 0 0;
  }
  .link-btn:hover{ color:var(--ink); }

  #lock-join-fields{ margin-bottom:var(--s3); }