:root {
  --bg: #0f1220;           /* panel background */
  --bg-soft: #12162a;      /* slightly lighter for stripes/sections */
  --fg: #e9edf3;           /* primary text */
  --muted: #9aa3b2;        /* secondary text */
  --accent: #6aa6ff;       /* accent (links, highlights) */
  --border: #232842;       /* border color */
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --w: 340px;              /* panel width */
  --sidebar-w: min(360px, 92vw);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b0d17; /* page bg behind the panel */
  color: var(--fg);
  font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app {
  display: grid;
  grid-template-columns: var(--w) 1fr; /* sidebar + main area */
  height: 100%;
}

/********************************* Canvas *********************************/

#canvas { 
  display: block;
  width: 100vw; 
  height: 100vh;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/*************************** Floating App Menu (Top Right) ***************************/

/* Wrapper is fixed in upper-right corner, over the canvas */
.app-menu.app-menu--floating {
  position: fixed;
  top: 2px; /* 10px */
  right: 10px; /* 10px */
  z-index: 50; /* above canvas, below dialogs */
  font-size: 13px; /* 13px */
}

/* Ellipsis button */
.app-menu__button {
  background: rgba(10, 13, 26, 0.85);
  color: var(--fg);
  border: 0px solid rgba(255,255,255,0.10); /* 1px */
  border-radius: 6px; /* 999px */
  padding: 4px 4px; /* 4px 10px */
  font-size: 18px;          /* 22px nice size for ⋯ */
  line-height: 0.8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*box-shadow: 0 4px 12px rgba(0,0,0,.4);*/
}

.app-menu__button:hover {
  background: rgba(18, 22, 42, 0.95);
  border-color: rgba(255,255,255,0.18);
}
/*
.app-menu__button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(106,166,255,0.4);
}
*/
/* Dropdown: hidden by default */
.app-menu__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0px; /* 6px */
  min-width: 210px;
  padding: 6px 0;
  border-radius: 10px;
  background: rgba(12, 15, 30, 0.98);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;

  z-index: 60;
}

/* Show dropdown when parent has .is-open */
.app-menu.is-open .app-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menu items */
.app-menu__item {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--fg);
  text-align: left;
  padding: 7px 14px;
  font: inherit;
  cursor: pointer;
}

.app-menu__item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--accent);
}

.app-menu__item:focus {
  outline: none;
  background: rgba(255,255,255,0.06);
}

.app-menu__separator {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255,255,255,0.08);
}

/*************************** Sidebar ***************************/
aside.sidebar {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow);
  padding: 0px 12px 0px 12px; /* 18px 16px 16px 16px */
  z-index: 20;
  display: grid;
  position: fixed;
  grid-template-rows: auto 1fr;
  inset: 0 auto 0 0; /* top, right, bottom, left */
  width: var(--sidebar-w);
  will-change: transform;
  transform: translateX(-100%);
  transition: transform 260ms ease;
}

/* When the sidebar has the 'open' class, slide it into view */
.sidebar.open { transform: translateX(0); }

/* Close button in the top-right of the sidebar */
.sidebar__close {
  position: absolute;
  top: 0px; /* 10px */
  right: 0px; /* 10px */
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 30px;  /* 18px */
  line-height: 1;
  padding: 6px;
  cursor: pointer !important;
}
.sidebar__close:hover {
  color: var(--accent);
  cursor: pointer;
}

.sidebar__scroll {
  display: flex;
  flex-direction: column;
  /* occupy the second grid row (the 1fr row) so it fills remaining height */
  grid-row: 2;
  flex: 1;
  min-height: 0; /* allow children to shrink and scroll correctly */
  overflow: hidden; /* internal scrolling handled by panel content */
}

/*************************** Sidebar header + app menu ***************************/
/*
.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 4px 2px;      (4px 0 8px 0)
  margin-bottom: 4px;
}

.sidebar__header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar__app-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
*/
/*************************** Panel tabs ***************************/
.panel__tabs {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0 8px 0; /* was 12px on top */
}
.panel__tabs .tab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 6px 8px;
  font-weight: 600;
  font-size: 18px;  /* 14px */
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.panel__tabs .tab-btn:hover {
  color: var(--fg);
  background: rgba(255,255,255,0.01);
}
.panel__tabs .tab-btn.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.panel__tabs .tab-btn:disabled,
.panel__tabs .tab-btn.is-disabled {
  color: var(--muted);
  cursor: default;
  background: transparent;
  pointer-events: none;
  border-bottom-color: transparent;
}
.panel__tabs-sep {
  height: 1px;
  background: rgba(255,255,255,0.04);
  width: calc(100% + 32px); /* extend full panel width including padding */
  margin: 8px -16px 2px; /* 8px -16px 12px;  neutralize panel padding */
}


/********************************* Panels *********************************/

[hidden] {
  display: none !important;
}

/* Container for all panels */
.panels-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-top: 12px; /* Space after the tab separator */
}

/* Panel base state: panels are flex children that can fill available height */
.panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  min-height: 0;
}

/* Scrollable region inside the panel */
.panel__content {
  flex: 1;           /* take all remaining vertical space */
  min-height: 0;
  padding-bottom: 12px;
}

/* Edit/view modifiers for panel content */
.panel__content--view {
  display: block;
  overflow: auto;
}

.panel__content--edit {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Panel header area */
.panel__header {
  position: static;
  /* border-bottom: 1px solid var(--border); */
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* right-aligned */
  gap: 8px;
  flex-shrink: 0;             /* don't allow to compress */
}

/* Modifier for left-aligned header buttons */
.panel__header--left {
  justify-content: flex-start;
  margin-right: auto;
}

/* Panel footer area for buttons */
.panel__footer {
  position: static;           /* no absolute positioning */
  border-top: 1px solid var(--border);
  padding: 12px 8px;          /* 12px 16px */
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* right-aligned by default */
  gap: 8px;
  flex-shrink: 0;             /* don't let the footer compress */
}

/* Modifier for left-aligned footer buttons */
.panel__footer--left {
  justify-content: flex-start;
  margin-right: auto;
}


/*************************** Subpanel tabs ***************************/
.subpanel__tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
}
.subpanel__tabs .subtab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 2px 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.subpanel__tabs .subtab-btn:hover {
  color: var(--fg);
  background: rgba(255,255,255,0.01);
}
.subpanel__tabs .subtab-btn.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.subpanel__tabs .subtab-btn:disabled {
  color: var(--muted);
  cursor: default;
  background: transparent;
  pointer-events: none;
  border-bottom-color: transparent;
}


/********************************* Subpanels (Edit Item) *********************************/

.subpanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding-bottom: 12px;
}


/********************************* Thumbnail *********************************/

/* Thumbnail/label section */
.thumblabel__section {
  display: flex;
  align-items: flex-start;   /* top-align thumbnail + text */
  gap: 8px;
  padding-top: 14px;
}
.thumblabel__section .label {
  flex: 1 1 auto;   /* take remaining horizontal space */
  margin: 0;        /* remove default h2 margin */
}

.thumb__section {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.thumb__right {
  display: flex;
  align-items: flex-start;  /* top aligned */
  margin-left: auto;        /* push to far right */
  gap: 4px;
  min-height: 52px;
}

.thumbnail-img {
  /*width: 72px;
  height: 72px;
  border-radius: 6px;*/
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.2);
}

/****************************** Action button *******************************/

.action-btn,
.action-btn-secondary {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 600;
}

.action-btn {
  background: var(--accent);
  color: #0b0d17;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.action-btn:hover {
  opacity: 0.80;
}

.action-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.action-btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.08);
}

.action-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
}

.action-btn-small {
  padding: 2px 12px;
  border-radius: 4px;
}

.action-btn-close {
  padding: 0px 2px;
  border-radius: 2px;
  font-size: 16px;
  line-height: 13px;  /* approximately the width */
}

/********************************* Sidebar section *********************************/

.sidebar__section + .sidebar__section {
  margin-top: 2px; /* 18px */
  padding-top: 14px;
}

/* Edit panels: let the last section fill remaining height */
.panel__content--edit > .sidebar__section:last-child,
.subpanel > .sidebar__section:last-child {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* View panels: sections behave like normal stacked blocks */
.panel__content--view > .sidebar__section {
  display: block;
  flex: 0 0 auto;
}


/********************************* Labels and text boxes *********************************/

.control-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}

h2.label {
  margin: 8px 0 2px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .2px;
  font-weight: 650;
}

.details {
  padding: 14px 0;
}

/* View panels: details flow naturally with the rest of the content */
.panel__content--view .details {
  display: block;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

/* Edit panels: details may expand/scroll internally */
.panel__content--edit .details {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* labels and details containing user-defined html elements */
.display-textarea p { margin: 0 0 10px; }
.display-textarea p:last-child { margin-bottom: 0; }
.display-textarea h3 { font-size: 14px; margin: 12px 0 6px; }
.display-textarea ul { margin: 8px 0 8px 0px; }
.display-textarea a { color: var(--accent); text-decoration: none; }
.display-textarea a:hover { text-decoration: underline; }
.display-textarea .tagnavigate__tree {margin: 0;}  /* no margin for tag navigation tree */

.edit-input,
.edit-textarea {
  width: 100%;
  min-height: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--fg);
  padding: 8px 10px;
  font: inherit;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none;
}

.panel__content--edit .edit-input,
.panel__content--edit .edit-textarea,
.subpanel .edit-input,
.subpanel .edit-textarea {
  flex: 1 1 auto;
  min-height: 0;
}

.edit-input:focus,
.edit-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Prevent focus highlighting on read-only inputs */
.edit-input[readonly]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.04);
  box-shadow: none;
}

/* single-row text input */
.edit-text {
  font: inherit;
  color: var(--fg-light);
  background: var(--bg-soft);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  width: 100%;
  display: block;

  /* Look consistent with your existing .edit-textarea */
  box-sizing: border-box;

  /* Remove input outline highlighting (optional) */
  outline: none;
}

.edit-text:focus {
  border-color: var(--accent);
}

.date {  /* date display */
  font-size: 14px;
  letter-spacing: .3px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}


/* ---------------- Tag navigator (View Timeline) ---------------- */

.tagnavigate__tree {
  list-style: none;
  padding: 0;
  margin: 0;
}


/********************************* Significance selecitons *********************************/

/* Significance radio group (two rows of three) 
.significance .significance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px; /* 8px 
}
.significance-controls {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.sig-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.02);
   border: 1px solid rgba(255,255,255,0.04);
  /* padding: 6px 8px; 
  border-radius: 6px;
  color: var(--fg);
  font-weight: 600;
  cursor: pointer;
  /* min-width: 76px; 
  /* height: 32px; 
  justify-content: center;
}
.sig-btn input[type="radio"] {
  display: none;
}
.sig-btn span {
  padding: 0px 12px;  /* 6px 
  border-radius: 4px;
}
.sig-btn:hover {
  background: rgba(255,255,255,0.03);
}
.sig-btn input[type="radio"]:checked + span,
.sig-btn.is-active span {
  color: #0b0d17;
}
.sig-btn input[type="radio"]:checked + span {
  /* indicate selected: invert background and text 
  background: var(--accent);
  color: #0b0d17;
}
*/


/********************************* Item type / date specification / prominence *********************************/

/* shared toggle rows */
.toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.toggle-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  color: var(--fg);
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
}

.toggle-btn input[type="radio"] {
  display: none;
}

.toggle-btn span {
  padding: 0px 12px;
  border-radius: 4px;
}

.toggle-btn:hover {
  background: rgba(255,255,255,0.03);
}

.toggle-btn input[type="radio"]:checked + span {
  background: var(--accent);
  color: #0b0d17;
}

.toggle-btn.is-disabled {
  opacity: 0.5;
  cursor: default;
}

.toggle-btn.is-disabled:hover {
  background: rgba(255,255,255,0.02);
}

.toggle-btn input[type="radio"]:disabled + span {
  opacity: 0.65;
}

/* prominence slider */
.prominence-slider {
  padding: 2px 2px 0 2px;
}

.prominence-slider input[type="range"] {
  width: 100%;
  margin: 0;
}

.prominence-labels {
  display: flex;
  justify-content: space-between;
  padding: 4px 2px 0 2px;
  color: var(--muted);
  font-size: 12px;
}

/* Type + Date in one row */
.type-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* push date-spec to the right */
.type-date-right {
  margin-left: auto;
}


/********************************* Color selection *********************************/

.color-selectors {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.color-sel-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  color: var(--fg);
  font-weight: 600;
  cursor: pointer;
}

.color-sel-btn input[type="radio"] {
  display: none;
}

.color-sel-btn span {
  padding: 0px 12px;
  border-radius: 4px;
}

.color-sel-btn:hover {
  background: rgba(255,255,255,0.03);
}

.color-sel-btn input[type="radio"]:checked + span {
  background: var(--accent);
  color: #0b0d17;
}

.color-sel-btn.is-disabled {
  opacity: 0.5;
  cursor: default;  /* not-allowed; */
}

.color-sel-btn.is-disabled:hover {
  background: rgba(255,255,255,0.02);
}

.color-controls {
  display: flex;
  gap: 4px;  /* 8px */
  flex-wrap: wrap;
  padding: 0px 10px; /* added */
}

.color-btn {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
}

.color-btn:hover {
  transform: scale(1.1);
}

.color-btn.is-active {
  box-shadow: 0 0 0 2px var(--accent);
}

.color-btn[data-color="white"] { background: rgb(255,255,255); }
.color-btn[data-color="blue"] { background: rgb(0,100,255); }
.color-btn[data-color="purple"] { background: rgb(100,0,255); }
.color-btn[data-color="red"] { background: rgb(255,0,100); }
.color-btn[data-color="orange"] { background: rgb(255,100,100); }
.color-btn[data-color="yellow"] { background: rgb(255,255,100); }
.color-btn[data-color="green"] { background: rgb(0,255,100); }
.color-btn[data-color="black"] { background: rgb(0,0,0); }

/* ---------------- Tag Manager (Edit Timeline > Tags) ---------------- */

.tagmgr__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.tagmgr__tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tagmgr__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.tagmgr__row:hover {
  background: rgba(255,255,255,0.03);
}

.tagmgr__row.is-selected {
  background: rgba(106,166,255,0.14);
  outline: 1px solid rgba(106,166,255,0.25);
}

.tagmgr__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagmgr__input {
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--fg);
  padding: 4px 8px;
  border-radius: 6px;
  font: inherit;
}

/* Row actions live on the right side of a tag row */
.tagmgr__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* Show actions on hover OR when selected */
.tagmgr__row:hover .tagmgr__actions,
.tagmgr__row.is-selected .tagmgr__actions {
  opacity: 1;
  pointer-events: auto;
}

.tagmgr__iconbtn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  border-radius: 6px;
  padding: 2px 4px;
  line-height: 1;
  cursor: pointer;
}

.tagmgr__iconbtn--narrow {
  padding: 2px 2px;
}

.tagmgr__iconbtn:hover {
  color: var(--fg);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.tagmgr__iconbtn--danger:hover {
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.35);
  background: rgba(255,107,107,0.08);
}

/* Optional: footer spacing for +Tag */
.tagmgr__footer {
  margin-top: 10px;
}

/* ---------------- Tag Picker (Edit Item > Tags) ---------------- */

.tagpick__hint {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.tagpick__tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tagpick__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
}

.tagpick__row:hover {
  background: rgba(255,255,255,0.03);
}

.tagpick__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* keep checkbox visually aligned */
.tagpick__row input[type="checkbox"] {
  transform: translateY(1px);
}