/* Legal Notes Pro (legal_notes_pro_v5.html) on the Planit skin.
Loaded right after /shell/skin.css. Every rule is scoped to body.pl-skin.pl-notespro.
The page is generated by site1-tools-work/legal-notes-pro/make_planit_variant.py, which
also injects the two skin links, the body classes and the inline SVG icons.
!important is used only against the page's inline styles and against skin.css rules
that are themselves !important (form fields, h1 to h3, focus ring). */
/* ------------------------------------------------------------------ tokens */
body.pl-skin.pl-notespro {
/* the page's own variables, mapped onto the Planit tokens */
--ink: var(--pl-ink);
--paper: #fff;
--accent: var(--pl-navy);
--accent-light: var(--pl-gold);
--teal: var(--pl-gold-ink);
--gray-50: var(--pl-paper);
--gray-100: var(--pl-paper-2);
--gray-200: var(--pl-line);
--gray-300: oklch(0.84 0.012 265);
--gray-400: oklch(0.66 0.02 265);
--gray-500: oklch(0.52 0.025 265);
--gray-600: var(--pl-ink-2);
--gray-700: oklch(0.33 0.035 265);
--gray-800: var(--pl-ink);
--gray-900: var(--pl-navy);
--success: var(--pl-ok);
--warning: var(--pl-due);
--error: var(--pl-bad);
--info: var(--pl-navy-2);
/* used by the page but never defined there */
--primary: var(--pl-navy);
--primary-dark: var(--pl-navy);
--primary-deep: var(--pl-navy-2);
--accent-gold: var(--pl-gold);
--accent-bronze: var(--pl-gold-ink);
/* no shadows, no gradients */
--shadow-soft: none;
--shadow-medium: none;
--shadow-large: none;
--shadow-premium: none;
--gradient-primary: var(--pl-navy);
--gradient-gold: var(--pl-gold);
--gradient-subtle: transparent;
/* page-local */
--np-hub: 2.25rem; /* breadcrumb bar height */
--np-line-navy: oklch(0.4 0.04 265); /* decorative hairline on navy */
--np-field-navy: oklch(0.55 0.03 265); /* field outline on navy, 3:1 against --pl-navy */
--np-gold-tint: oklch(0.965 0.03 90);
--np-due-tint: oklch(0.97 0.02 45);
--np-scrim: oklch(0.2 0.04 265 / 0.55);
--np-fab-bottom: 6rem; /* knowledge button sits above status bar and footer */
}
/* beats ":root.dark-mode body" so a stored dark-mode preference cannot recolour the page */
html body.pl-skin.pl-notespro { color: var(--pl-ink); }
body.pl-skin.pl-notespro ::selection { background: oklch(0.9 0.07 90); color: var(--pl-navy); }
/* this page has navy areas of its own beyond the breadcrumb: the focus ring turns gold there too */
body.pl-skin.pl-notespro .sidebar :focus-visible,
body.pl-skin.pl-notespro .app-footer :focus-visible,
body.pl-skin.pl-notespro .knowledge-header :focus-visible,
body.pl-skin.pl-notespro .modal-header :focus-visible { outline-color: var(--pl-gold) !important; }
/* ------------------------------------------------------------ breadcrumb */
body.pl-skin.pl-notespro .lex-hubbar {
box-sizing: border-box;
height: var(--np-hub);
padding: 0 1rem;
gap: 0.55rem;
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
font: 500 0.8125rem/1 var(--pl-sans);
background: var(--pl-navy);
color: var(--pl-on-navy-2);
border-bottom: 2px solid var(--pl-gold);
}
body.pl-skin.pl-notespro .lex-hubbar .cur { color: #fff; font-weight: 500; }
/* ---------------------------------------------------------------- layout */
/* the app fills the viewport below the breadcrumb, so its own footer is no longer cut off */
body.pl-skin.pl-notespro .app-container {
height: calc(100vh - var(--np-hub));
height: calc(100dvh - var(--np-hub));
}
body.pl-skin.pl-notespro .main-content { min-width: 0; background: #fff; }
/* --------------------------------------------------------------- sidebar */
body.pl-skin.pl-notespro .sidebar {
background: var(--pl-navy);
color: var(--pl-on-navy);
border-right: 1px solid var(--pl-navy-2);
box-shadow: none;
}
body.pl-skin.pl-notespro .sidebar-header {
display: flex;
flex-direction: column-reverse; /* tagline reads as an eyebrow above the title */
gap: 0.5rem;
padding: 1.5rem 1.25rem 1.25rem;
border-bottom: 1px solid var(--np-line-navy);
}
body.pl-skin.pl-notespro .logo {
margin: 0;
font: 600 1.5rem/1.1 var(--pl-serif);
letter-spacing: -0.01em;
color: #fff;
}
body.pl-skin.pl-notespro .logo-tagline {
font: 500 0.6875rem/1.4 var(--pl-sans);
font-style: normal;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pl-gold);
}
body.pl-skin.pl-notespro .sidebar-actions { padding: 1.25rem 1.25rem 0.25rem; }
body.pl-skin.pl-notespro .sidebar .btn-primary {
justify-content: center;
min-height: 2.5rem;
padding: 0.55rem 1.1rem;
background: transparent;
color: #fff;
border: 1px solid var(--pl-gold);
border-radius: 999px;
}
body.pl-skin.pl-notespro .sidebar .btn-primary:hover { background: var(--pl-gold); border-color: var(--pl-gold); color: var(--pl-navy); }
body.pl-skin.pl-notespro .sidebar .btn-primary .np-ico { width: 1rem; height: 1rem; }
body.pl-skin.pl-notespro .notes-list-container {
padding: 1rem 1.25rem 1.5rem;
scrollbar-color: var(--np-line-navy) var(--pl-navy);
}
body.pl-skin.pl-notespro .sidebar .search-input {
min-height: 2.5rem;
margin-bottom: 1.25rem;
padding: 0.6rem 0.8rem;
font: 400 0.875rem/1.4 var(--pl-sans) !important;
color: var(--pl-on-navy) !important;
background: var(--pl-navy-2) !important;
border: 1px solid var(--np-field-navy) !important;
border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-notespro .sidebar .search-input::placeholder { color: var(--pl-on-navy-2) !important; }
body.pl-skin.pl-notespro .notes-list-header { align-items: center; min-height: 1.75rem; padding: 0 0 0.5rem; }
body.pl-skin.pl-notespro .notes-list-header h3 {
font: 500 0.6875rem/1.4 var(--pl-sans) !important; /* skin.css sets the serif on every h3 */
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pl-on-navy-2);
opacity: 1;
}
body.pl-skin.pl-notespro .collapse-icon { font-size: 0.625rem; color: var(--pl-on-navy-2); }
body.pl-skin.pl-notespro .note-item {
margin-bottom: 0.25rem;
padding: 0.7rem 0.75rem;
background: transparent;
border: 1px solid transparent;
border-radius: var(--pl-radius);
color: var(--pl-on-navy);
transition: background-color 0.15s var(--pl-ease), border-color 0.15s var(--pl-ease);
}
body.pl-skin.pl-notespro .note-item:hover { background: var(--pl-navy-2); border-color: var(--np-line-navy); }
body.pl-skin.pl-notespro .note-item.active { background: var(--pl-navy-2); border-color: var(--pl-gold); color: #fff; }
body.pl-skin.pl-notespro .note-item-title {
padding-right: 1.75rem;
font: 600 0.875rem/1.35 var(--pl-sans);
color: #fff;
overflow-wrap: anywhere;
}
body.pl-skin.pl-notespro .note-item-preview { font-size: 0.75rem; line-height: 1.45; color: var(--pl-on-navy-2); opacity: 1; }
body.pl-skin.pl-notespro .note-item-meta {
margin-top: 0.35rem;
font: 400 0.6875rem/1.4 var(--pl-mono);
color: var(--pl-on-navy-2);
opacity: 1;
}
body.pl-skin.pl-notespro .note-item.active .note-item-meta { color: var(--pl-gold-soft); }
body.pl-skin.pl-notespro .sidebar .no-search-results { color: var(--pl-on-navy-2); }
body.pl-skin.pl-notespro .note-item-actions { top: 0.45rem; right: 0.45rem; }
body.pl-skin.pl-notespro .note-item:focus-within .note-item-actions { display: flex; }
body.pl-skin.pl-notespro .note-action-btn,
body.pl-skin.pl-notespro .note-item.active .note-action-btn {
width: 1.75rem;
height: 1.75rem;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--pl-radius);
color: var(--pl-on-navy-2);
}
body.pl-skin.pl-notespro .note-action-btn:hover,
body.pl-skin.pl-notespro .note-item.active .note-action-btn:hover { background: var(--pl-navy); border-color: var(--np-line-navy); color: #fff; }
body.pl-skin.pl-notespro .note-action-btn .np-ico { width: 0.95rem; height: 0.95rem; pointer-events: none; }
/* tags: renderNoteTags() writes gradient backgrounds inline */
body.pl-skin.pl-notespro .tag {
padding: 0.28rem 0.45rem;
background: transparent !important;
color: var(--pl-navy);
border: 1px solid currentColor;
border-radius: 3px;
font: 600 0.625rem/1 var(--pl-sans);
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.pl-skin.pl-notespro .sidebar .tag { color: var(--pl-gold-soft); }
body.pl-skin.pl-notespro .tag:hover { transform: none; box-shadow: none; }
/* --------------------------------------------------------------- top bar */
body.pl-skin.pl-notespro .top-bar {
flex-wrap: wrap; /* title on the first row, the whole toolbar on the second */
gap: 0.75rem;
padding: 1rem 1.5rem 0.85rem;
background: #fff;
border-bottom: 1px solid var(--pl-line);
box-shadow: none;
}
body.pl-skin.pl-notespro .note-title-input {
flex: 1 1 12rem;
min-width: 0;
padding: 0.1rem 0;
font: 600 1.5rem/1.25 var(--pl-serif) !important;
letter-spacing: -0.01em;
color: var(--pl-navy) !important;
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
}
/* the title edits in place: a navy underline instead of a box around the headline */
body.pl-skin.pl-notespro .note-title-input:focus-visible { outline: none !important; border-bottom-color: var(--pl-navy) !important; }
body.pl-skin.pl-notespro .note-title-input::placeholder { color: var(--gray-400) !important; }
body.pl-skin.pl-notespro .hamburger-btn {
width: 2.75rem;
height: 2.75rem;
margin-left: -0.6rem;
padding: 0;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: var(--pl-radius);
}
body.pl-skin.pl-notespro .hamburger-btn span { width: 1.25rem; height: 2px; border-radius: 1px; background: var(--pl-navy); }
body.pl-skin.pl-notespro .hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.pl-skin.pl-notespro .hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.pl-skin.pl-notespro .toolbar { flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
body.pl-skin.pl-notespro .toolbar-btn {
flex: none;
width: 2.125rem;
height: 2.125rem;
padding: 0;
background: #fff;
color: var(--pl-navy);
border: 1px solid var(--pl-line);
border-radius: var(--pl-radius);
font: 600 0.9375rem/1 var(--pl-serif);
transition: background-color 0.15s var(--pl-ease), border-color 0.15s var(--pl-ease), color 0.15s var(--pl-ease);
}
body.pl-skin.pl-notespro .toolbar-btn:hover { background: var(--pl-paper-2); border-color: var(--gray-400); color: var(--pl-navy); }
body.pl-skin.pl-notespro .toolbar-btn.active { background: var(--pl-navy); border-color: var(--pl-navy); color: #fff; }
body.pl-skin.pl-notespro .toolbar-btn .np-ico { width: 1.125rem; height: 1.125rem; }
body.pl-skin.pl-notespro .toolbar-btn em { font-weight: 500; }
body.pl-skin.pl-notespro .toolbar-btn[onclick*="'article'"],
body.pl-skin.pl-notespro .toolbar-btn[title="AI Assistant"] { font: 600 0.75rem/1 var(--pl-sans); letter-spacing: 0.02em; }
body.pl-skin.pl-notespro .toolbar-separator { width: 1px; height: 1.25rem; margin: 0 0.25rem; background: var(--pl-line); }
body.pl-skin.pl-notespro .toolbar-separator + .toolbar-separator { display: none; }
/* group rules only while the toolbar fits on one row (about 914px); a wrapped row must not end in a rule */
body.pl-skin.pl-notespro .top-bar { container: np-top / inline-size; }
@container np-top (max-width: 57.5rem) {
body.pl-skin.pl-notespro .toolbar-separator { display: none; }
}
/* the page stays light: the dark-mode switch is not offered */
body.pl-skin.pl-notespro .dark-mode-toggle { display: none; }
/* ---------------------------------------------------------------- editor */
body.pl-skin.pl-notespro .editor-main { padding: 1.75rem 1.5rem 3rem; background: #fff; }
body.pl-skin.pl-notespro .editor {
max-width: 48rem;
padding: 0;
font: 400 1rem/1.75 var(--pl-sans);
color: var(--pl-ink);
caret-color: var(--pl-navy);
}
body.pl-skin.pl-notespro .editor:focus-visible { outline: none !important; } /* the caret marks focus in the writing area */
body.pl-skin.pl-notespro .editor p { color: inherit; }
body.pl-skin.pl-notespro .editor h1,
body.pl-skin.pl-notespro .editor h2,
body.pl-skin.pl-notespro .editor h3 { margin: 1.5rem 0 0.6rem; font-weight: 600; line-height: 1.25; color: var(--pl-navy); }
body.pl-skin.pl-notespro .editor > :first-child { margin-top: 0; }
body.pl-skin.pl-notespro .editor a { color: var(--pl-navy); }
body.pl-skin.pl-notespro .editor blockquote { padding-left: 1rem; border-left: 1px solid var(--pl-line); color: var(--pl-ink-2); }
body.pl-skin.pl-notespro .editor table td,
body.pl-skin.pl-notespro .editor table th { border-color: var(--pl-line); }
body.pl-skin.pl-notespro .editor table th { background: var(--pl-paper-2); color: var(--pl-navy); }
body.pl-skin.pl-notespro .editor .legal-citation {
padding: 0.1rem 0.4rem;
font: 500 0.875em/1.4 var(--pl-mono);
color: var(--pl-navy);
background: var(--np-gold-tint);
border: 1px solid oklch(0.86 0.06 90);
border-radius: 4px;
}
body.pl-skin.pl-notespro .editor .legal-citation:hover { background: oklch(0.94 0.045 90); border-color: oklch(0.8 0.08 90); box-shadow: none; }
body.pl-skin.pl-notespro .editor .deadline {
padding: 0.1rem 0.4rem;
font: 600 0.875em/1.4 var(--pl-mono);
color: var(--pl-due);
background: var(--np-due-tint);
border: 1px solid oklch(0.86 0.06 45);
border-radius: 4px;
}
body.pl-skin.pl-notespro .editor .deadline:hover { background: oklch(0.95 0.035 45); box-shadow: none; }
body.pl-skin.pl-notespro .table-control-btn {
padding: 0.35rem 0.65rem;
background: var(--pl-navy);
color: #fff;
border-radius: 999px;
font: 600 0.6875rem/1 var(--pl-sans);
}
body.pl-skin.pl-notespro .table-control-btn:hover { background: var(--pl-navy-2); color: #fff; }
body.pl-skin.pl-notespro .cross-references-section {
max-width: 48rem;
margin-top: 2.5rem;
padding: 1rem 0 0;
border-top: 1px solid var(--pl-line);
}
body.pl-skin.pl-notespro .cross-references-header {
min-height: 2rem;
font: 600 0.75rem/1.4 var(--pl-sans);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pl-ink-2);
}
body.pl-skin.pl-notespro .cross-references-header:hover { color: var(--pl-navy); }
body.pl-skin.pl-notespro #crossRefCount { letter-spacing: 0; text-transform: none; }
body.pl-skin.pl-notespro .cross-references-content { background: var(--pl-paper); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); }
body.pl-skin.pl-notespro .cross-references-form .form-select { min-height: 2.5rem; padding: 0.5rem 0.75rem; }
body.pl-skin.pl-notespro .cross-references-form .form-input { min-height: 2.5rem; }
body.pl-skin.pl-notespro .cross-ref-tag {
padding: 0.4rem 0.55rem 0.4rem 0.85rem;
background: var(--pl-navy);
color: #fff;
border-radius: 999px;
font: 500 0.8125rem/1.3 var(--pl-sans);
}
body.pl-skin.pl-notespro .cross-ref-tag-remove { padding: 0 0.25rem; opacity: 0.75; }
/* ------------------------------------------------------ status and footer */
body.pl-skin.pl-notespro .status-bar {
gap: 0.5rem 1rem;
min-height: 2.5rem;
padding: 0.4rem 1.5rem;
background: var(--pl-paper);
border-top: 1px solid var(--pl-line);
font: 400 0.75rem/1.4 var(--pl-mono);
color: var(--pl-ink-2);
}
body.pl-skin.pl-notespro .status-indicator { width: 7px; height: 7px; background: var(--pl-ok); }
body.pl-skin.pl-notespro .app-footer {
padding: 0.55rem 1.5rem;
background: var(--pl-navy);
color: var(--pl-on-navy-2);
border-top: 2px solid var(--pl-gold);
font: 400 0.75rem/1.5 var(--pl-sans);
text-align: left;
}
body.pl-skin.pl-notespro .app-footer a { color: var(--pl-gold); text-decoration: none; }
body.pl-skin.pl-notespro .app-footer a:hover { color: var(--pl-gold-soft); text-decoration: underline; }
/* -------------------------------------------------------- knowledge hub */
body.pl-skin.pl-notespro .knowledge-trigger {
right: 1.5rem;
bottom: var(--np-fab-bottom);
width: 3.25rem;
height: 3.25rem;
background: var(--pl-navy);
color: #fff;
border: 1px solid var(--pl-navy);
box-shadow: none;
transition: background-color 0.15s var(--pl-ease), color 0.15s var(--pl-ease);
}
body.pl-skin.pl-notespro .knowledge-trigger:hover { background: var(--pl-navy-2); color: var(--pl-gold); transform: none; box-shadow: none; }
body.pl-skin.pl-notespro .knowledge-trigger .np-ico { width: 1.375rem; height: 1.375rem; }
body.pl-skin.pl-notespro .knowledge-hub {
background: #fff;
border: 1px solid var(--gray-300);
border-radius: var(--pl-radius);
box-shadow: none;
}
body.pl-skin.pl-notespro .knowledge-header {
padding: 1.1rem 3.5rem 1rem 1.25rem;
background: var(--pl-navy);
border-bottom: 2px solid var(--pl-gold);
border-radius: 0;
}
body.pl-skin.pl-notespro .knowledge-header h3 { margin: 0 0 0.3rem; padding: 0; font-size: 1.25rem; font-weight: 600; color: #fff; }
body.pl-skin.pl-notespro .knowledge-header-subtitle {
font: 500 0.6875rem/1.4 var(--pl-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pl-gold);
opacity: 1;
}
body.pl-skin.pl-notespro .knowledge-close,
body.pl-skin.pl-notespro .modal-close,
body.pl-skin.pl-notespro .modal-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
background: transparent;
color: #fff;
border: 1px solid var(--np-line-navy);
border-radius: 999px;
font: 400 1.125rem/1 var(--pl-sans);
}
body.pl-skin.pl-notespro .knowledge-close { top: 0.9rem; right: 0.9rem; }
body.pl-skin.pl-notespro .knowledge-close:hover,
body.pl-skin.pl-notespro .modal-close:hover,
body.pl-skin.pl-notespro .modal-close-btn:hover { background: var(--pl-navy-2); border-color: var(--pl-on-navy-2); color: #fff; transform: none; }
/* search row and "current as of" line are inline-styled divs without classes */
body.pl-skin.pl-notespro .knowledge-header + div { padding: 1rem 1.25rem !important; }
body.pl-skin.pl-notespro .knowledge-search { min-height: 2.5rem; padding: 0.55rem 0.8rem; font-size: 0.875rem; }
body.pl-skin.pl-notespro .knowledge-tabs { gap: 0.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--pl-line); }
body.pl-skin.pl-notespro .knowledge-tab {
min-height: 2.75rem;
margin-bottom: -1px;
padding: 0.8rem 0.75rem;
border-bottom: 2px solid transparent;
font: 600 0.8125rem/1 var(--pl-sans);
color: var(--pl-ink-2);
}
body.pl-skin.pl-notespro .knowledge-tab:hover { color: var(--pl-navy); }
body.pl-skin.pl-notespro .knowledge-tab.active { color: var(--pl-navy); border-bottom-color: var(--pl-gold); }
body.pl-skin.pl-notespro .knowledge-tabs + div {
padding: 0.5rem 1.25rem !important;
background: var(--pl-paper) !important;
border-top: 0 !important;
border-bottom: 1px solid var(--pl-line);
font: 400 0.6875rem/1.4 var(--pl-mono) !important;
color: var(--pl-ink-2) !important;
text-align: left !important;
}
body.pl-skin.pl-notespro .knowledge-content { padding: 1.1rem 1.25rem 1.5rem; background: #fff; }
body.pl-skin.pl-notespro .knowledge-toc {
margin-bottom: 1.25rem;
padding: 0 0 1.25rem;
background: transparent;
border: 0;
border-bottom: 1px solid var(--pl-line);
border-radius: 0;
box-shadow: none;
}
body.pl-skin.pl-notespro .knowledge-toc-title {
margin-bottom: 0.75rem;
font: 600 0.6875rem/1.4 var(--pl-sans);
letter-spacing: 0.12em;
color: var(--pl-ink-2);
}
body.pl-skin.pl-notespro .knowledge-toc-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
body.pl-skin.pl-notespro .knowledge-toc-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 2.25rem;
padding: 0.45rem 0.8rem;
background: #fff;
color: var(--pl-navy);
border: 1px solid var(--pl-line);
border-radius: 999px;
font: 500 0.8125rem/1.2 var(--pl-sans);
text-align: left;
}
body.pl-skin.pl-notespro .knowledge-toc-item:hover { background: var(--pl-paper-2); border-color: var(--pl-navy); color: var(--pl-navy); transform: none; }
body.pl-skin.pl-notespro .knowledge-toc-count { margin-left: 0; font: 400 0.6875rem/1 var(--pl-mono); color: var(--pl-ink-2); opacity: 1; }
body.pl-skin.pl-notespro .knowledge-category { margin-bottom: 1.75rem; }
body.pl-skin.pl-notespro .knowledge-category-title {
margin-bottom: 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--pl-navy);
font: 600 0.75rem/1.4 var(--pl-sans);
letter-spacing: 0.1em;
color: var(--pl-navy);
}
body.pl-skin.pl-notespro .knowledge-item {
margin: 0 -0.5rem;
padding: 0.85rem 0.5rem;
background: transparent;
border: 0;
border-bottom: 1px solid var(--pl-line);
border-radius: 0;
transition: background-color 0.15s var(--pl-ease);
}
body.pl-skin.pl-notespro .knowledge-item:hover { background: var(--pl-paper-2); border-color: var(--pl-line); box-shadow: none; }
body.pl-skin.pl-notespro .knowledge-item-title { margin-bottom: 0.3rem; font: 600 0.9375rem/1.35 var(--pl-sans); color: var(--pl-navy); }
body.pl-skin.pl-notespro .knowledge-item-content { font-size: 0.8125rem; line-height: 1.6; color: var(--pl-ink-2); }
body.pl-skin.pl-notespro .knowledge-item-summary { font-size: 0.8125rem; font-style: normal; line-height: 1.6; color: var(--pl-ink); }
body.pl-skin.pl-notespro .knowledge-item-meta { margin-top: 0.45rem; font: 400 0.6875rem/1.55 var(--pl-mono); color: var(--pl-ink-2); }
body.pl-skin.pl-notespro .knowledge-item-link {
display: inline-flex;
align-items: center;
min-height: 2rem;
margin-top: 0.6rem;
padding: 0.35rem 0.8rem;
background: #fff;
color: var(--pl-navy);
border: 1px solid var(--pl-line);
border-radius: 999px;
font: 600 0.75rem/1 var(--pl-sans);
text-decoration: none;
}
body.pl-skin.pl-notespro .knowledge-item-link:hover { background: var(--pl-paper-2); border-color: var(--pl-navy); color: var(--pl-navy); }
body.pl-skin.pl-notespro .knowledge-back-to-top {
width: 2.5rem;
height: 2.5rem;
background: var(--pl-navy);
color: #fff;
border: 1px solid var(--pl-navy);
box-shadow: none;
font: 400 1.125rem/1 var(--pl-sans);
}
body.pl-skin.pl-notespro .knowledge-back-to-top:hover { background: var(--pl-navy-2); box-shadow: none; }
/* ---------------------------------------------- modals, palette, buttons */
body.pl-skin.pl-notespro .modal-overlay,
body.pl-skin.pl-notespro .command-palette-overlay,
body.pl-skin.pl-notespro .modal-backdrop,
body.pl-skin.pl-notespro .sidebar-overlay { background: var(--np-scrim); }
body.pl-skin.pl-notespro .modal,
body.pl-skin.pl-notespro .modal-content {
background: #fff;
color: var(--pl-ink);
border: 1px solid var(--pl-line);
border-radius: var(--pl-radius);
box-shadow: none;
}
body.pl-skin.pl-notespro .modal-header {
padding: 1.1rem 1.5rem;
background: var(--pl-navy);
color: #fff;
border-bottom: 2px solid var(--pl-gold);
}
body.pl-skin.pl-notespro .modal-title { font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: #fff; }
body.pl-skin.pl-notespro .modal-body { padding: 1.5rem; }
body.pl-skin.pl-notespro .modal-footer { gap: 0.5rem; padding: 1rem 1.5rem; background: var(--pl-paper); border-top: 1px solid var(--pl-line); }
body.pl-skin.pl-notespro .form-label { margin-bottom: 0.4rem; font: 600 0.8125rem/1.4 var(--pl-sans); color: var(--pl-ink); }
/* skin.css covers text fields, selects and textareas; the event dialog also has number and datetime fields */
body.pl-skin.pl-notespro .form-input,
body.pl-skin.pl-notespro .form-select,
body.pl-skin.pl-notespro .form-textarea {
background: #fff;
color: var(--pl-ink);
border: 1px solid var(--pl-field);
border-radius: var(--pl-radius);
font-family: var(--pl-sans);
}
body.pl-skin.pl-notespro .form-input:focus,
body.pl-skin.pl-notespro .form-select:focus,
body.pl-skin.pl-notespro .form-textarea:focus { border-color: var(--pl-field); box-shadow: none; }
body.pl-skin.pl-notespro input[type="checkbox"] { accent-color: var(--pl-navy); }
body.pl-skin.pl-notespro .btn {
justify-content: center;
gap: 0.5rem;
min-height: 2.5rem;
padding: 0.6rem 1.1rem;
border-radius: 999px;
font: 600 0.875rem/1 var(--pl-sans);
transition: background-color 0.15s var(--pl-ease), border-color 0.15s var(--pl-ease), color 0.15s var(--pl-ease);
}
body.pl-skin.pl-notespro .btn-primary { background: var(--pl-navy); color: #fff; border: 1px solid var(--pl-navy); }
body.pl-skin.pl-notespro .btn-primary:hover { background: var(--pl-navy-2); border-color: var(--pl-navy-2); color: #fff; transform: none; box-shadow: none; }
body.pl-skin.pl-notespro .btn-secondary { background: #fff; color: var(--pl-navy); border: 1px solid var(--pl-line); }
body.pl-skin.pl-notespro .btn-secondary:hover { background: var(--pl-paper-2); border-color: var(--gray-400); color: var(--pl-navy); }
body.pl-skin.pl-notespro #versionsList .btn { min-height: 2rem; }
/* templates: a list of rows like the hub's question rows; the emoji icons stay hidden */
body.pl-skin.pl-notespro .modal-content .modal-body { padding: 1.25rem 1.5rem 1.5rem; }
body.pl-skin.pl-notespro .templates-grid { display: block; margin-top: 0; border-top: 2px solid var(--pl-navy); }
body.pl-skin.pl-notespro .template-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 1rem;
margin: 0 -0.5rem;
padding: 0.85rem 0.5rem;
text-align: left;
background: transparent;
border: 0;
border-bottom: 1px solid var(--pl-line);
border-radius: 0;
transition: background-color 0.15s var(--pl-ease);
}
body.pl-skin.pl-notespro .template-item::after {
content: "\2192";
grid-column: 2;
grid-row: 1 / span 2;
color: var(--pl-gold-ink);
transition: transform 0.2s var(--pl-ease);
}
body.pl-skin.pl-notespro .template-item:hover { background: var(--pl-paper-2); border-color: var(--pl-line); box-shadow: none; transform: none; }
body.pl-skin.pl-notespro .template-item:hover::after { transform: translateX(3px); }
body.pl-skin.pl-notespro .template-icon { display: none; }
body.pl-skin.pl-notespro .template-name { grid-column: 1; margin-bottom: 0.15rem; font: 600 1.0625rem/1.3 var(--pl-serif); color: var(--pl-navy); }
body.pl-skin.pl-notespro .template-description { grid-column: 1; font-size: 0.8125rem; color: var(--pl-ink-2); }
body.pl-skin.pl-notespro .command-palette {
width: min(36rem, calc(100vw - 2rem));
max-width: none;
border: 1px solid var(--pl-line);
border-radius: var(--pl-radius);
box-shadow: none;
}
body.pl-skin.pl-notespro .command-input {
padding: 1rem 1.25rem;
font-size: 1rem !important;
border: 0 !important;
border-bottom: 2px solid var(--pl-line) !important;
border-radius: 0 !important;
}
/* the field spans the whole palette: a navy rule under it instead of a box inside the box */
body.pl-skin.pl-notespro .command-input:focus-visible { outline: none !important; border-bottom-color: var(--pl-navy) !important; }
body.pl-skin.pl-notespro .command-icon { display: none; } /* emoji glyphs from the command list */
body.pl-skin.pl-notespro .command-item { padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--pl-line); }
body.pl-skin.pl-notespro .command-item:last-child { border-bottom: 0; }
body.pl-skin.pl-notespro .command-item:hover { background: var(--pl-paper-2); }
body.pl-skin.pl-notespro .command-item.selected { background: var(--np-gold-tint); }
body.pl-skin.pl-notespro .command-title { font: 600 0.875rem/1.35 var(--pl-sans); color: var(--pl-navy); }
body.pl-skin.pl-notespro .command-description { font-size: 0.75rem; color: var(--pl-ink-2); }
/* ---------------------------------------------------------------- toasts */
/* stacked above the knowledge button, clear of the status bar and the footer links */
body.pl-skin.pl-notespro .toast-container { right: 1.5rem; bottom: calc(var(--np-fab-bottom) + 4rem); align-items: flex-end; }
body.pl-skin.pl-notespro .toast {
gap: 0.65rem;
width: max-content;
min-width: 0;
max-width: min(24rem, calc(100vw - 2rem));
padding: 0.7rem 1rem;
background: var(--pl-navy);
color: var(--pl-on-navy);
border: 1px solid var(--pl-navy);
border-radius: var(--pl-radius);
box-shadow: none;
transition: opacity 0.3s var(--pl-ease);
}
body.pl-skin.pl-notespro .toast-title { font: 500 0.875rem/1.4 var(--pl-sans); color: #fff; }
body.pl-skin.pl-notespro .toast-icon {
flex: none;
width: 1.25rem;
height: 1.25rem;
background: transparent;
border: 1px solid currentColor;
font: 700 0.6875rem/1 var(--pl-sans);
}
body.pl-skin.pl-notespro .toast-success .toast-icon { color: var(--pl-gold); background: transparent; }
body.pl-skin.pl-notespro .toast-info .toast-icon { color: var(--pl-on-navy); background: transparent; }
body.pl-skin.pl-notespro .toast-error .toast-icon { color: #fff; background: var(--pl-bad); border-color: var(--pl-bad); }
/* ------------------------------------- AI assistant (inline styles from JS) */
body.pl-skin.pl-notespro #aiSettingsModal { background: var(--np-scrim) !important; }
body.pl-skin.pl-notespro #aiSettingsModal > div {
width: min(32rem, calc(100% - 2rem)) !important;
padding: 0 1.5rem 1.5rem !important;
background: #fff !important;
border: 1px solid var(--pl-line) !important;
border-radius: var(--pl-radius) !important;
box-shadow: none !important;
}
body.pl-skin.pl-notespro #aiSettingsModal > div > h2:first-child {
margin: 0 -1.5rem 1.25rem !important;
padding: 1.1rem 1.5rem !important;
background: var(--pl-navy) !important; /* skin.css clears h1 to h3 backgrounds with !important */
color: #fff !important;
border-bottom: 2px solid var(--pl-gold) !important;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
body.pl-skin.pl-notespro #aiSettingsModal h3 {
border-top: 1px solid var(--pl-line) !important;
font-size: 1.0625rem;
font-weight: 600;
color: var(--pl-navy) !important;
}
body.pl-skin.pl-notespro #aiSettingsModal label { font-size: 0.8125rem; font-weight: 600 !important; }
body.pl-skin.pl-notespro #aiSettingsModal input,
body.pl-skin.pl-notespro #aiSettingsModal select {
min-height: 2.5rem;
padding: 0.5rem 0.7rem !important;
font-family: var(--pl-sans) !important;
color: var(--pl-ink) !important;
background: #fff !important;
border: 1px solid var(--pl-field) !important; /* also the password field, which skin.css does not list */
border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-notespro #quickStartWizardLNP {
color: var(--pl-ink);
background: var(--pl-paper) !important;
border: 1px solid var(--pl-line) !important;
border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-notespro #quickStartWizardLNP div { color: var(--pl-ink-2) !important; }
body.pl-skin.pl-notespro #quickStartWizardLNP > div:first-child { color: var(--pl-navy) !important; }
body.pl-skin.pl-notespro #quickStartWizardLNP a { color: var(--pl-navy) !important; }
body.pl-skin.pl-notespro #lnp-openai-cors-warning {
padding: 0.5rem 0.65rem !important;
font-size: 0.75rem !important;
color: var(--pl-due) !important;
background: var(--np-due-tint) !important;
border: 1px solid oklch(0.86 0.06 45) !important;
border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-notespro #lnp-openai-cors-warning .np-ico { width: 0.875rem; height: 0.875rem; margin-right: 0.2rem; vertical-align: -0.125rem; }
body.pl-skin.pl-notespro #aiStatusDot { width: 0.625rem !important; height: 0.625rem !important; background: var(--gray-400) !important; }
body.pl-skin.pl-notespro #aiStatusDot[style*="76, 175, 80"] { background: var(--pl-ok) !important; }
body.pl-skin.pl-notespro #aiSaveBtn {
min-height: 2.75rem;
background: var(--pl-navy) !important;
color: #fff !important;
border-radius: 999px !important;
font-weight: 600 !important;
}
body.pl-skin.pl-notespro #aiSaveBtn:hover { background: var(--pl-navy-2) !important; }
body.pl-skin.pl-notespro #aiSettingsModal button[onclick^="clearAICacheLNP"] {
min-height: 2.25rem;
padding: 0.45rem !important;
background: #fff !important;
color: var(--pl-bad) !important;
border: 1px solid oklch(0.86 0.05 27) !important;
border-radius: 999px !important;
font-size: 0.75rem !important;
font-weight: 600;
}
body.pl-skin.pl-notespro .ai-action-btn {
min-height: 2.5rem;
padding: 0.65rem 1rem;
background: #fff;
color: var(--pl-navy);
border: 1px solid var(--pl-line);
border-radius: 999px;
font: 600 0.875rem/1.2 var(--pl-sans);
}
body.pl-skin.pl-notespro .ai-action-btn:hover { background: var(--pl-paper-2); border-color: var(--pl-navy); }
body.pl-skin.pl-notespro #aiHistoryPanel { border-top: 1px solid var(--pl-line) !important; }
body.pl-skin.pl-notespro #aiHistoryList {
background: var(--pl-paper) !important;
border: 1px solid var(--pl-line) !important;
border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-notespro .ai-history-entry { background: #fff; border: 1px solid var(--pl-line); border-radius: var(--pl-radius); }
body.pl-skin.pl-notespro .ai-history-entry:hover { background: var(--pl-paper-2); }
body.pl-skin.pl-notespro .ai-history-timestamp { font: 500 0.75rem/1.4 var(--pl-mono); color: var(--pl-gold-ink); }
body.pl-skin.pl-notespro #aiSettingsModal [style*="26, 122, 109"] {
color: var(--pl-ink-2) !important;
background: var(--pl-paper) !important;
border: 1px solid var(--pl-line);
border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-notespro #aiSettingsModal strong[style*="#1a7a6d"] { color: var(--pl-navy) !important; }
body.pl-skin.pl-notespro #aiSettingsModal span[style*="#1a7a6d"] { color: var(--pl-gold-ink) !important; }
body.pl-skin.pl-notespro #aiSettingsModal em[style*="#888"] { color: var(--pl-ink-2) !important; }
body.pl-skin.pl-notespro #aiCloseBtn {
min-height: 2.5rem;
background: #fff !important;
color: var(--pl-navy) !important;
border: 1px solid var(--pl-line) !important;
border-radius: 999px !important;
font-weight: 600 !important;
}
body.pl-skin.pl-notespro #aiCloseBtn:hover { background: var(--pl-paper-2) !important; }
/* AI result dialog and version preview: overlays built with inline styles only */
body.pl-skin.pl-notespro > div[style*="z-index: 10001"],
body.pl-skin.pl-notespro > div[style*="z-index: 10000"]:not(#aiSettingsModal) { background: var(--np-scrim) !important; }
body.pl-skin.pl-notespro > div[style*="z-index: 10001"] > div,
body.pl-skin.pl-notespro > div[style*="z-index: 10000"]:not(#aiSettingsModal) > div {
background: #fff !important;
border: 1px solid var(--pl-line) !important;
border-radius: var(--pl-radius) !important;
box-shadow: none !important;
}
body.pl-skin.pl-notespro > div[style*="z-index: 10001"] h3 { border-bottom: 1px solid var(--pl-line) !important; color: var(--pl-navy) !important; }
body.pl-skin.pl-notespro > div[style*="z-index: 10001"] button {
min-height: 2.5rem;
background: #fff !important;
color: var(--pl-navy) !important;
border: 1px solid var(--pl-line) !important;
border-radius: 999px !important;
font-weight: 600 !important;
}
body.pl-skin.pl-notespro > div[style*="z-index: 10001"] button[onclick^="applyTagsFromResult"],
body.pl-skin.pl-notespro > div[style*="z-index: 10001"] button[onclick^="if(confirm"] {
background: var(--pl-navy) !important;
color: #fff !important;
border-color: var(--pl-navy) !important;
}
body.pl-skin.pl-notespro > div[style*="z-index: 10001"] span[style*="#FFC107"] {
padding: 0.25rem 0.55rem !important;
background: var(--pl-gold) !important;
color: var(--pl-navy) !important;
border-radius: 999px !important;
font: 600 0.6875rem/1 var(--pl-sans) !important;
vertical-align: middle;
}
/* ---------------------------------------------------------------- narrow */
@media (min-width: 768px) {
body.pl-skin.pl-notespro .knowledge-hub { right: 1.5rem; bottom: var(--np-fab-bottom); }
}
@media (min-width: 768px) and (max-width: 1023px) {
body.pl-skin.pl-notespro { --np-fab-bottom: 7.25rem; } /* footer may wrap to two lines */
}
@media (max-width: 767px) {
body.pl-skin.pl-notespro { --np-fab-bottom: 8.75rem; }
/* off-canvas sidebar starts below the breadcrumb instead of under it */
body.pl-skin.pl-notespro .sidebar {
top: var(--np-hub);
height: calc(100vh - var(--np-hub));
height: calc(100dvh - var(--np-hub));
}
body.pl-skin.pl-notespro .sidebar.open { box-shadow: none; }
body.pl-skin.pl-notespro .top-bar { gap: 0.6rem 0.5rem; padding: 0.5rem 1rem 0.75rem; }
body.pl-skin.pl-notespro .note-title-input { font-size: 1.25rem !important; }
body.pl-skin.pl-notespro .toolbar-btn { width: 2.5rem; height: 2.5rem; }
body.pl-skin.pl-notespro .toolbar-separator { display: none; }
body.pl-skin.pl-notespro .editor-main { padding: 1.25rem 1rem 2rem; }
body.pl-skin.pl-notespro .editor { padding: 0; }
body.pl-skin.pl-notespro .status-bar { flex-wrap: wrap; padding: 0.45rem 1rem; }
body.pl-skin.pl-notespro .status-item:last-child { flex: 1 1 10rem; min-width: 10rem; } /* wraps to its own row before the placeholder clips */
body.pl-skin.pl-notespro #matterId { width: 100% !important; }
body.pl-skin.pl-notespro .app-footer { padding: 0.5rem 1rem; font-size: 0.6875rem; }
body.pl-skin.pl-notespro .knowledge-trigger { right: 1rem; }
body.pl-skin.pl-notespro .knowledge-hub { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
body.pl-skin.pl-notespro .toast-container { left: 1rem; right: 1rem; align-items: stretch; }
body.pl-skin.pl-notespro .toast { width: auto; max-width: none; }
}