/* Notes, the team's message library (static/js/pages/notes.js). The page's rules are the client
   portal's Notes page, extracted by scripts/portal_vendor.py (imported first, below); this file
   adds only what the portal's page has no counterpart for: the filter toolbar, the inline
   editor, the favourite star and the archive confirm. Every rule under html.ui-new. */
@import url("/static/portal/css/notes_inline.css");

html.ui-new .ptn .nts { margin: 0 auto; padding: var(--space-5, 32px) var(--space-4, 24px) 64px; }
html.ui-new .ptn .nts-head h1 { margin: 0; }
html.ui-new .ptn .nts-start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.ui-new .ptn .ntn-tile-info { cursor: default; box-shadow: inset 0 0 0 1px var(--ink-200, #e4dde8); }
html.ui-new .ptn .ntn-tile-info .nts-ic { font: 600 20px/1 "Source Code Pro", ui-monospace, monospace; }

html.ui-new .ptn .ntn-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3, 16px); }
html.ui-new .ptn .ntn-tools select,
html.ui-new .ptn .ntn-tools input { font: inherit; font-size: var(--text-sm); border: 1px solid var(--ink-200, #e4dde8);
  border-radius: 999px; padding: 7px 14px; background: var(--white); color: var(--ink-900); }
html.ui-new .ptn .ntn-tools select { width: auto; flex: none; max-width: 260px; }
html.ui-new .ptn .ntn-tools input { width: auto; flex: 1; min-width: 220px; }
html.ui-new .ptn .ntn-ic-new { font: 400 26px/1 var(--font-sans); color: var(--ink-900); }

html.ui-new .ptn .nts-row { cursor: pointer; grid-template-columns: 96px minmax(0, 1fr) auto; }
html.ui-new .ptn .nts-when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-new .ptn .nts-state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 260px; }
html.ui-new .ptn .ntn-li.is-open .nts-row { box-shadow: inset 0 0 0 2px #9140B0; border-radius: 16px 16px 0 0; }
html.ui-new .ptn .ntn-li.is-archived .nts-title { color: var(--ink-500); }
html.ui-new .ptn .ntn-star { background: none; border: 0; padding: 0 2px; font-size: 18px; line-height: 1; color: var(--ink-400, #9b9b9b); cursor: pointer; }
html.ui-new .ptn .ntn-star.on { color: #E0A21B; }

html.ui-new .ptn .ntn-ed { background: var(--white); border-radius: 0 0 16px 16px; padding: 14px 16px 16px;
  box-shadow: inset 0 0 0 2px #9140B0; margin-top: -2px; }
html.ui-new .ptn .ntn-li.is-open > .ntn-ed:first-child { border-radius: 16px; margin-top: 0; }
html.ui-new .ptn .ntn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
html.ui-new .ptn .ntn-ed .field { margin: 0 0 10px; }
html.ui-new .ptn .ntn-ed .field[hidden] { display: none; }
html.ui-new .ptn .ntn-ed textarea { width: 100%; min-height: 140px; font: inherit; }
html.ui-new .ptn .ntn-slash { display: flex; align-items: center; gap: 4px; }
html.ui-new .ptn .ntn-slash span { font-family: "Source Code Pro", ui-monospace, monospace; color: var(--ink-500); }
html.ui-new .ptn .ntn-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.ui-new .ptn .ntn-archive { margin-left: auto; color: #a92e64; }
html.ui-new .ptn .ntn-confirm { margin-left: auto; font-size: var(--text-sm); color: var(--ink-700); display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.ui-new .ptn .ntn-err { color: #B3261E; font-size: var(--text-sm); min-height: 1.1em; margin: 0 0 8px; }
@media (max-width: 640px) {
  html.ui-new .ptn .nts-start { grid-template-columns: 1fr; }
  html.ui-new .ptn .nts-row { grid-template-columns: minmax(0, 1fr) auto; }
}
/* A note's trigger (its play) and why it works (owner, 2026-10-21). */
html.ui-new .ptn .ntn-why { display: flex; gap: 6px; align-items: baseline; color: var(--ink-600, #57534e); font-size: var(--text-xs, 12px); margin-top: 2px; }
html.ui-new .ptn .ntn-why .ntn-play { flex: none; }
html.ui-new .ptn .ntn-why-field { grid-column: 1 / -1; }
/* The fill-ins under Words: a press drops {{first_name}} where the cursor is (from the old Templates editor). */
html.ui-new .ptn .ntn-fills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 10px; font-size: var(--text-xs, 12px); color: var(--ink-600, #57534e); }
html.ui-new .ptn .ntn-fills .ntn-fill { cursor: pointer; font-family: "Source Code Pro", ui-monospace, monospace; }