/* Triplem VIP Notes refinement — sticky-note cards + compact thermal-receipt typography.
   Cards show the title and a short note preview without decorative duplicate note icons. */

#notesList.notes-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}

#notesList > .note-grid-card{
  --note-receipt-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  position:relative!important;
  min-width:0!important;
  width:100%!important;
  height:162px!important;
  min-height:162px!important;
  padding:18px 18px 17px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:9px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,#d7b53f 28%,var(--line-strong))!important;
  border-radius:8px 8px 16px 8px!important;
  clip-path:none!important;
  text-align:left!important;
  color:var(--text-strong)!important;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface-elevated) 64%,#fff3a8 36%),color-mix(in srgb,var(--surface-elevated) 73%,#f4df7d 27%))!important;
  box-shadow:0 9px 20px rgba(15,23,42,.08),inset 0 1px 0 color-mix(in srgb,#fff 58%,transparent)!important;
  isolation:isolate!important;
  transform:none!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

/* One restrained folded-paper corner, rather than competing note glyphs. */
#notesList > .note-grid-card::before{content:none!important}
#notesList > .note-grid-card::after{
  content:""!important;
  position:absolute!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  top:auto!important;
  width:20px!important;
  height:20px!important;
  opacity:.76!important;
  background:linear-gradient(135deg,transparent 0 49%,color-mix(in srgb,#c9a72f 34%,var(--surface-elevated)) 50% 100%)!important;
  border:0!important;
  filter:drop-shadow(-2px -2px 2px rgba(15,23,42,.05))!important;
  pointer-events:none!important;
}

#notesList > .note-grid-card:hover,
#notesList > .note-grid-card:focus-visible{
  transform:translateY(-2px) rotate(-.2deg)!important;
  border-color:color-mix(in srgb,#c9a72f 58%,var(--primary))!important;
  box-shadow:0 14px 26px rgba(15,23,42,.11),inset 0 1px 0 color-mix(in srgb,#fff 62%,transparent)!important;
  outline:none!important;
}
#notesList > .note-grid-card:active{transform:translateY(0) scale(.987)!important}

#notesList .note-grid-title{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  line-clamp:3!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:anywhere!important;
  color:var(--text-strong)!important;
  font-family:var(--note-receipt-font)!important;
  font-size:.82rem!important;
  font-weight:800!important;
  line-height:1.28!important;
  letter-spacing:.012em!important;
}

#notesList .note-grid-preview{
  width:100%;
  min-width:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--text) 74%,var(--muted));
  font-family:var(--note-receipt-font)!important;
  font-size:.66rem;
  font-weight:540;
  line-height:1.38;
  letter-spacing:.01em;
  white-space:normal;
}

#notesList .note-grid-reminder{
  position:absolute;
  top:8px;
  right:8px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));
  background:color-mix(in srgb,var(--surface-elevated) 74%,var(--primary-soft) 26%);
  color:var(--primary);
  font-size:.55rem;
  box-shadow:0 2px 6px rgba(15,23,42,.07);
}
#notesList > .note-grid-card.has-reminder .note-grid-title{padding-right:20px}

/* Retire legacy paper/icon decorations completely. */
#notesList .note-card-mark,
#notesList .note-paper-pencil,
#notesList .note-paper-head,
#notesList .note-paper-preview,
#notesList .note-paper-foot,
#notesList .note-paper-corner,
#notesList .note-paper-reminder{display:none!important}

/* Notes overlays: smaller, calmer typography on desktop and mobile. */
.note-workspace-modal .modal-dialog{
  --note-receipt-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  border-radius:18px!important;
  overflow:hidden!important;
  background:var(--modal-bg)!important;
  border:1px solid var(--line-strong)!important;
  box-shadow:var(--shadow-strong)!important;
}
.note-create-dialog{width:min(610px,calc(100vw - 32px))!important}
.note-detail-dialog{width:min(630px,calc(100vw - 32px))!important}
.note-workspace-modal .modal-head{
  position:relative!important;
  padding-top:12px!important;
  padding-bottom:10px!important;
  background:linear-gradient(135deg,var(--surface-elevated),color-mix(in srgb,var(--surface-elevated) 90%,#fff0a3 10%))!important;
  border-bottom:1px solid var(--line)!important;
}
.note-workspace-modal .modal-head::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,#c8a52d 60%,var(--primary)),transparent 76%);
  opacity:.34;
  pointer-events:none;
}
.note-workspace-modal .modal-head h3,
.note-detail-heading h3{
  font-family:var(--note-receipt-font)!important;
  font-size:.94rem!important;
  font-weight:800!important;
  line-height:1.24!important;
  letter-spacing:.006em!important;
}
.note-workspace-modal .modal-head .help,
#noteDetailMeta{font-size:.64rem!important;line-height:1.35!important}
.note-detail-kicker{font-size:.58rem!important;letter-spacing:.07em!important;margin-bottom:2px!important}
.note-workspace-modal .modal-body{font-size:.75rem!important}
.note-workspace-modal .field>label{font-size:.66rem!important}
.note-workspace-modal :is(.input,textarea,input){font-size:.75rem}
#noteCreateTitleInput,
#noteEditTitleInput,
.note-create-dialog .note-textarea,
#noteEditContent,
.note-detail-content{
  font-family:var(--note-receipt-font)!important;
}
#noteCreateTitleInput,
#noteEditTitleInput{font-weight:760!important;letter-spacing:.006em!important}
.note-create-dialog .note-textarea,
#noteEditContent{
  min-height:145px!important;
  font-size:.75rem!important;
  line-height:1.55!important;
  resize:vertical;
  background:
    repeating-linear-gradient(to bottom,transparent 0 21px,color-mix(in srgb,#c8a52d 7%,transparent) 21px 22px),
    color-mix(in srgb,var(--surface-soft) 93%,#fff0a3 7%)!important;
  border:1px solid var(--line)!important;
  border-radius:11px!important;
  color:var(--text)!important;
}
.note-detail-content{
  min-height:155px!important;
  max-height:min(48vh,400px)!important;
  padding:13px 14px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  border:1px solid var(--line)!important;
  border-radius:11px!important;
  background:
    repeating-linear-gradient(to bottom,transparent 0 20px,color-mix(in srgb,#c8a52d 8%,transparent) 20px 21px),
    color-mix(in srgb,var(--surface-soft) 91%,#fff0a3 9%)!important;
  color:var(--text)!important;
  font-size:.74rem!important;
  font-weight:520!important;
  line-height:1.55!important;
  letter-spacing:.005em!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
}
.note-field-hint{font-size:.62rem!important}
.note-reminder-toggle-copy strong{font-size:.75rem!important}
.note-reminder-toggle-copy small{font-size:.63rem!important}
.note-detail-reminder-status{font-size:.67rem!important;padding:8px 10px!important}
.note-detail-actions{gap:6px!important;margin-top:10px!important;padding-top:10px!important}
.note-detail-actions .btn,
.note-create-footer .btn,
.note-edit-footer .btn{min-height:32px!important;padding:6px 10px!important;font-size:.68rem!important;border-radius:9px!important}

@media(max-width:720px){
  #notesList.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #notesList > .note-grid-card{
    height:138px!important;
    min-height:138px!important;
    padding:14px 12px 13px!important;
    gap:7px!important;
    border-radius:7px 7px 14px 7px!important;
  }
  #notesList .note-grid-title{font-size:.72rem!important;line-height:1.25!important;-webkit-line-clamp:3!important;line-clamp:3!important}
  #notesList .note-grid-preview{font-size:.58rem!important;line-height:1.34!important;-webkit-line-clamp:4;line-clamp:4}
  #notesList .note-grid-reminder{top:6px;right:6px;width:18px;height:18px;font-size:.5rem}

  .note-workspace-modal.modal{padding:14px!important}
  .note-create-dialog,
  .note-detail-dialog{width:calc(100vw - 28px)!important;max-height:calc(100dvh - 28px)!important;border-radius:16px!important}
  .note-workspace-modal .modal-head{padding:10px 11px 8px!important}
  .note-workspace-modal .modal-head h3,
  .note-detail-heading h3{font-size:.84rem!important}
  .note-workspace-modal .modal-head .help,
  #noteDetailMeta{font-size:.58rem!important}
  .note-workspace-modal .modal-body{padding:10px!important;font-size:.7rem!important}
  .note-workspace-modal .field>label{font-size:.61rem!important}
  #noteCreateTitleInput,#noteEditTitleInput{font-size:.69rem!important;min-height:34px!important}
  .note-create-dialog .note-textarea,#noteEditContent{min-height:128px!important;font-size:.68rem!important;line-height:1.5!important}
  .note-detail-content{min-height:135px!important;max-height:43vh!important;padding:11px 12px!important;font-size:.67rem!important;line-height:1.52!important}
  .note-create-reminder-fields{grid-template-columns:1fr!important}
  .note-detail-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .note-detail-actions .btn{width:100%!important;margin:0!important;min-height:30px!important;padding:5px 7px!important;font-size:.62rem!important}
  .note-create-footer .btn,.note-edit-footer .btn{flex:1 1 0;min-height:30px!important;font-size:.62rem!important}
}

@media(max-width:360px){
  #notesList.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #notesList > .note-grid-card{height:130px!important;min-height:130px!important;padding:12px 10px 11px!important}
  #notesList .note-grid-title{font-size:.66rem!important}
  #notesList .note-grid-preview{font-size:.54rem!important;-webkit-line-clamp:4;line-clamp:4}
  .note-workspace-modal.modal{padding:12px!important}
  .note-create-dialog,.note-detail-dialog{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
}

@media(prefers-reduced-motion:reduce){#notesList > .note-grid-card{transition:none!important}}


/* Build 001 Notes search cleanup: the shared filter container is useful in
   filter-heavy sections, but Notes only has Search and should not render a
   full-width background band. */
#notesPanel .filter-inline-row.compact-filter-row,
#notesPanel .filter-inline-row.compact-filter-row .compact-filter-main{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#notesPanel .filter-inline-row.compact-filter-row{
  padding-left:0 !important;
  padding-right:0 !important;
}