/* ============================================================================
   Markdown — PARA styles. The "second brain" surface (Projects gallery, Tasks
   list, Notion-style project detail) + the shared Editor modal. Flat privacy
   glass: no borders, no shadows, no gradients — hairlines via 1px var(--sep)
   only. Everything is token-driven, so it restyles with the rest of the system.
   ============================================================================ */

/* ---- toolbar: count · filter · + New ---- */
.pa-toolbar{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-6); }
.pa-count{ font-size:13px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.pa-toolbar .filter{ margin-left:auto; } /* push filter + New to the right */
.pa-toolbar .pa-new{ flex:0 0 auto; }
.pa-toolbar .filter + .pa-new{ margin-left:var(--sp-2); }

/* ---- gallery: responsive grid of project cards ---- */
.pa-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4); }
.pa-card{ appearance:none; -webkit-appearance:none; text-align:left; width:100%; min-width:0; font:inherit; color:inherit;
  background:var(--pg-flat); border:none; border-radius:var(--radius); padding:var(--sp-5); cursor:pointer;
  display:flex; flex-direction:column; gap:var(--sp-3);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.pa-card:hover{ background:var(--pg-foc); transform:translateY(-1px); }
.pa-card:focus-visible{ outline:2px solid var(--sig-partial); outline-offset:2px; }
.pa-card-top{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; }
.pa-card-ic{ width:22px; height:22px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.pa-card-ic svg{ width:20px; height:20px; }
.pa-card-top .mc-badge{ flex:0 0 auto; }
.pa-card-name{ font-size:15px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--ink); overflow-wrap:anywhere; }
.pa-card-meta{ font-size:12px; color:var(--ink-dim); line-height:1.4; }

/* category chip — quiet pill, shares the .tag shape */
.pa-cat{ display:inline-flex; align-items:center; font-size:11px; line-height:1.1; color:var(--ink-dim);
  background:var(--color-bg-overlay); padding:4px 9px; border-radius:999px; white-space:nowrap; }
.pa-card-top .pa-cat{ margin-left:auto; } /* sit the category at the far end of the top row */

/* ---- progress bar: track + fill + % ---- */
.pa-progress{ display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; } /* anchor to card bottom */
.pa-progress-track{ flex:1; min-width:0; height:8px; border-radius:999px; background:var(--color-bg-overlay); overflow:hidden; }
.pa-progress-bar{ height:100%; border-radius:999px; background:var(--sig-live); transition:width var(--dur) var(--ease); }
.pa-progress-pct{ flex:0 0 auto; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--ink-dim); min-width:30px; text-align:right; }

/* ---- task list ---- */
.pa-tasklist{ display:flex; flex-direction:column; }
.pa-task{ display:grid; grid-template-columns:24px minmax(0,1fr) auto auto; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-2); border-top:1px solid var(--sep); border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease); }
.pa-task:first-child{ border-top:none; }
.pa-task:hover{ background:var(--color-bg-overlay); }

/* checkbox — square, fills with live green when on */
.pa-check{ appearance:none; -webkit-appearance:none; width:22px; height:22px; border:none; border-radius:7px;
  background:var(--color-bg-overlay); color:transparent; cursor:pointer; display:grid; place-items:center; padding:0;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pa-check:hover{ background:var(--color-bg-hover); }
.pa-check.on{ background:var(--sig-live); color:var(--bg0); }
.pa-check svg{ width:14px; height:14px; }
.pa-check:focus-visible{ outline:2px solid var(--sig-partial); outline-offset:2px; }

.pa-task-name{ appearance:none; -webkit-appearance:none; background:none; border:none; text-align:left; cursor:pointer; padding:0;
  min-width:0; font:500 13.5px/1.35 var(--sans); letter-spacing:-.01em; color:var(--ink);
  white-space:normal; overflow-wrap:anywhere; transition:color var(--dur-fast) var(--ease); }
.pa-task-name:hover{ color:var(--sig-partial); }
.pa-task-name.done{ color:var(--ink-faint); text-decoration:line-through; }
.pa-task .tag{ flex:0 0 auto; }
.pa-task-meta{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); justify-content:flex-end; font-size:12px; color:var(--ink-dim); min-width:0; }
.pa-task-due{ color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* ---- detail page ---- */
.pa-detail{ display:flex; flex-direction:column; gap:var(--sp-6); min-width:0; }
.pa-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.pa-detail-title{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.pa-detail-title .h1{ margin:0; overflow-wrap:anywhere; }
.pa-detail-head .btn{ flex:0 0 auto; }

/* properties panel — a quiet flat pane of key/value rows */
.pa-props{ background:var(--pg-flat); border-radius:var(--radius); padding:var(--sp-2) var(--sp-5); }
.pa-prop{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--sp-4); align-items:center; padding:var(--sp-3) 0; }
.pa-prop + .pa-prop{ border-top:1px solid var(--sep); }
.pa-prop-k{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:12px; color:var(--ink-dim); min-width:0; }
.pa-prop-k svg{ width:15px; height:15px; flex:0 0 auto; color:var(--ink-faint); }
.pa-prop-v{ font-size:13.5px; line-height:1.5; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.pa-prop-v .pa-progress{ margin-top:0; }

/* notes / rich body */
.pa-body{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); overflow-wrap:anywhere; }
.pa-body strong{ color:var(--ink); font-weight:600; }

/* linked child sections */
.pa-section{ display:flex; flex-direction:column; gap:var(--sp-3); }
.pa-section .block-h{ margin:0; align-items:center; }
.pa-section .block-h .btn{ flex:0 0 auto; }

/* resource / note name lists */
.pa-linklist{ display:flex; flex-direction:column; }
.pa-link{ appearance:none; -webkit-appearance:none; background:none; border:none; cursor:pointer; text-align:left; width:100%;
  display:inline-flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-2);
  border-top:1px solid var(--sep); border-radius:var(--radius-md); font:500 13.5px/1.35 var(--sans); letter-spacing:-.01em;
  color:var(--ink); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pa-link:first-child{ border-top:none; }
.pa-link:hover{ background:var(--color-bg-overlay); color:var(--sig-partial); }
.pa-link svg{ width:16px; height:16px; flex:0 0 auto; color:var(--ink-faint); }
.pa-link span{ min-width:0; overflow-wrap:anywhere; }

/* empty states */
.pa-empty{ font-size:13px; color:var(--ink-dim); padding:var(--sp-5) var(--sp-2); }
.pa-empty.sm{ font-size:12.5px; padding:var(--sp-3) var(--sp-2); }

/* ============================================================================
   EDITOR — the shared create/edit modal (from editor.js). A glass card over a
   full-screen scrim. Flat: fill + blur only, hairline separators where needed.
   ============================================================================ */
.editor-overlay{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:var(--sp-4);
  background:rgba(0,0,0,.45); animation:mc-fade var(--dur-fast) var(--ease); }
.editor{ width:100%; max-width:520px; max-height:86vh; overflow:auto; background:var(--pg-flat);
  backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3);
  border:none; border-radius:var(--radius); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5);
  animation:mc-rise var(--dur) var(--ease) both; scrollbar-width:none; -ms-overflow-style:none; }
.editor::-webkit-scrollbar{ display:none; }
.editor-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.editor-title{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.editor-body{ display:flex; flex-direction:column; gap:var(--sp-4); }
.editor-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.editor-label{ font-size:12px; color:var(--ink-dim); letter-spacing:-.01em; }
.editor-actions{ display:flex; align-items:center; gap:var(--sp-2); justify-content:space-between; margin-top:var(--sp-2); }

/* ---- responsive ---- */
@media (max-width:560px){
  .pa-toolbar{ gap:var(--sp-2); }
  .pa-toolbar .filter{ order:3; margin-left:0; width:100%; flex-wrap:wrap; }
  .pa-toolbar .filter + .pa-new{ margin-left:0; }
  .pa-gallery{ grid-template-columns:minmax(0,1fr); }
  .pa-prop{ grid-template-columns:minmax(0,1fr); gap:var(--sp-1); }
  .editor{ padding:var(--sp-5); }
}
/* narrow task rows — drop the priority/meta to a second line */
@media (max-width:480px){
  .pa-task{ grid-template-columns:24px minmax(0,1fr) auto; }
  .pa-task-meta{ grid-column:2 / -1; justify-content:flex-start; }
}