:root{
      --paper: #fbf7ef;
      --paper-2:#f6f0e6;
      --ink:   #111827;
      --muted: #475569;
      --hair:  rgba(15,23,42,.14);
      --hair2: rgba(15,23,42,.09);
      --accent:#b91c1c;
      --accent2:#0f766e;
      --hl:    rgba(185,28,28,.14);
      --shadow: 0 14px 34px rgba(17,24,39,.10);
      --shadow2: 0 6px 18px rgba(17,24,39,.08);
      --chartH: 280px; /* timeline/chart height (resizable) */
    }
    html, body { height: 100%; background: var(--paper); color: var(--ink); }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
    .ring-hair { box-shadow: inset 0 0 0 1px var(--hair); }
    .shadow-soft { box-shadow: var(--shadow); }
    .shadow-soft2 { box-shadow: var(--shadow2); }
    .scrollbar::-webkit-scrollbar{ width: 10px; height: 10px; }
    .scrollbar::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.22); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
    .scrollbar::-webkit-scrollbar-track{ background: transparent; }

    .btn {
      border: 1px solid var(--hair);
      background: rgba(255,255,255,.6);
      color: var(--ink);
    }
    .btn:hover { border-color: rgba(15,23,42,.24); background: rgba(255,255,255,.85); }
    .btn-on {
      border-color: rgba(185,28,28,.35);
      background: rgba(185,28,28,.10);
      color: #7f1d1d;
    }
    .chip {
      border: 1px solid var(--hair);
      background: rgba(255,255,255,.55);
    }
    .chip:hover { background: rgba(255,255,255,.85); }
    .kbd { border: 1px solid var(--hair); background: rgba(255,255,255,.65); }
    mark {
      background: var(--hl);
      color: #7f1d1d;
      border-radius: 6px;
      padding: 0 4px;
    }
    .paper-noise { position: relative; }
    .paper-noise:before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity:.10;
      mix-blend-mode:multiply;
    }
    .tag {
      border: 1px solid var(--hair2);
      background: rgba(251,247,239,.75);
      color: rgba(15,23,42,.75);
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
    }
    .cardclick:hover { box-shadow: 0 10px 26px rgba(17,24,39,.10); transform: translateY(-1px); }
    .cardclick { transition: box-shadow .15s ease, transform .15s ease; cursor: pointer; }
    .focusable:focus { outline: none; box-shadow: 0 0 0 2px rgba(185,28,28,.25); }

    .iconbtn{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--hair);
      background: rgba(255,255,255,.62);
      color: rgba(15,23,42,.82);
      cursor: pointer;
      position: relative;
      z-index: 10;
    }
    .iconbtn:hover { border-color: rgba(15,23,42,.24); background: rgba(255,255,255,.88); }

    /* “uncollapse” buttons (icon-only) must remain visible */
    .uncollapse {
      position: absolute;
      top: 12px;
      z-index: 30;
    }
    .uncollapse.left { left: 12px; }
    .uncollapse.right { right: 12px; }

    /* allow center to truly expand */
    #layoutGrid { transition: grid-template-columns .12s ease; position: relative; }

    /* IMPORTANT: pin grid children to columns so collapsing a rail can't auto-place MAIN into col 1 */
    #leftRail  { grid-column: 1; min-width: 0; }
    main       { grid-column: 2; min-width: 0; }
    #rightRail { grid-column: 3; min-width: 0; }

    /* IMPORTANT: do NOT display:none rails (grid auto-placement will move other children) */
    .rail-collapsed{
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    /* draggable resizers */
    .v-resizer{
      position:absolute;
      top:0; bottom:0;
      width: 10px;
      cursor: col-resize;
      z-index: 25;
      transform: translateX(-5px);
    }
    .v-resizer:before{
      content:"";
      position:absolute;
      left:50%; top: 0; bottom: 0;
      width: 2px;
      transform: translateX(-50%);
      background: rgba(15,23,42,.10);
      opacity: .65;
      border-radius: 999px;
    }
    .v-resizer:hover:before{ background: rgba(15,23,42,.18); }

    /* Center split divider (Stories | Thread) — full height, easy to grab */
    .h-resizer{
      width: 12px;
      height: 100%;
      cursor: col-resize;
      position: relative;
    }
    .h-resizer:before{
      content:"";
      position:absolute;
      left:50%;
      top: 10px;
      bottom: 10px;
      width: 2px;
      transform: translateX(-50%);
      background: rgba(15,23,42,.10);
      opacity:.65;
      border-radius: 999px;
    }
    .h-resizer:hover:before{ background: rgba(15,23,42,.18); }

    /* center split grid */
    #centerSplitGrid{
      display: grid;
/*      grid-template-columns: minmax(420px, 1fr) 12px minmax(360px, 560px);*/
      grid-template-columns: minmax(420px, 1fr) 12px minmax(360px, 1fr);
      gap: 0;
      height: 100%;
    }

    /* IMPORTANT: allow grid children to shrink when center width changes (prevents “thread hidden under right rail”) */
    #centerSplitGrid { min-width: 0; }
    #storiesPane, #threadPane { min-width: 0; }


    /* loading overlays */
    .loading-wrap{ position: relative; }
    .loading-overlay{
      position:absolute;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(251,247,239,.60);
      backdrop-filter: blur(2px);
      z-index: 50;
    }
    .loading-wrap.is-loading .loading-overlay{ display:flex; }
    .spinner{
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 2px solid rgba(15,23,42,.14);
      border-top-color: rgba(185,28,28,.70);
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* selection feel for resizes */
    .noselect, .noselect *{ user-select:none !important; }
    /* ===== Header: prevent “jumping” when pills change ===== */
    #pills{
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      flex-wrap: nowrap;
      max-height: 40px;
      min-height: 40px;          /* reserves space so header height stays constant */
      padding: 2px 2px;
    }
    #pills .chip{ flex: 0 0 auto; } /* never wrap/expand */

    /* ===== Timeline vertical resizer handle ===== */
    .chart-v-resizer{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 12px;
      cursor: row-resize;
      z-index: 30;
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(15,23,42,.06));
    }
    .chart-v-resizer:before{
      content:"";
      position:absolute;
      left:50%;
      top:4px;
      width: 54px;
      height: 3px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(15,23,42,.18);
      opacity: .6;
    }
    .chart-v-resizer:hover:before{ opacity: .95; }

    /* Chart collapse */
    #chartContainer {
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #chartContainer.chart-collapsed {
      margin-bottom: 0;
    }
    #chartHeader {
      transition: padding 0.3s ease, border-bottom 0.3s ease;
    }
    #chartContainer.chart-collapsed #chartHeader {
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
      border-bottom: none;
    }
    #chartContainer.chart-collapsed #chartHeader > div:first-child {
      font-size: 11px;
    }
    #chartContent {
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      overflow: hidden;
      max-height: 1000px;
      opacity: 1;
      display: block;
    }
    #chartContent.chart-collapsed {
      max-height: 0;
      opacity: 0;
      margin: 0;
    }
    #chartContent.chart-collapsed #chart {
      display: none;
    }
    #chartContent.chart-collapsed #chartVResizer {
      display: none !important;
    }
    #chartFooter {
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
      overflow: hidden;
      max-height: 100px;
      opacity: 1;
      display: block;
    }
    #chartFooter.chart-collapsed {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-top: none;
      margin: 0;
    }

    /* Temporal Intelligence section collapse */
    #temporalIntelligenceSection {
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #temporalHeader {
      transition: padding 0.3s ease, border-bottom 0.3s ease;
    }
    #temporalIntelligenceSection.temporal-collapsed #temporalHeader {
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
      border-bottom: none;
    }
    #temporalContent {
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      overflow: hidden;
      max-height: 2000px;
      opacity: 1;
    }
    #temporalContent.temporal-collapsed {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    #temporalControls {
      transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
      overflow: hidden;
      max-height: 50px;
      opacity: 1;
    }
    #temporalControls.temporal-collapsed {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      margin-bottom: 0;
    }
    #temporalBucketControls {
      transition: opacity 0.3s ease;
    }
    #temporalBucketControls.temporal-collapsed {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
    }

    /* Temporal view toggle buttons */
    .btn-view {
      border: none;
      background: transparent;
      color: var(--muted);
      transition: all 0.2s ease;
    }
    .btn-view:hover {
      background: rgba(255,255,255,.85);
      color: var(--ink);
    }
    .btn-view-active {
      background: rgba(185,28,28,.12) !important;
      color: #7f1d1d !important;
      font-weight: 600;
    }

    /* Calendar view */
    #calendarView {
      overflow: auto;
      background: rgba(255,255,255,.40);
    }
    .calendar-container {
      background: linear-gradient(to bottom, rgba(255,255,255,.50), rgba(251,247,239,.30));
    }
    .calendar-table {
      border-spacing: 2px;
      border-collapse: separate;
    }
    .calendar-month-header {
      background: rgba(255,255,255,.70);
      color: rgba(15,23,42,.85);
      border-bottom: 2px solid rgba(15,23,42,.12);
      font-size: 13px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .calendar-day-header {
      color: rgba(71,85,105,.75);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding-bottom: 8px !important;
      font-weight: 600;
    }
    .calendar-day {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 6px;
      position: relative;
      vertical-align: middle;
    }
    .calendar-day:hover {
      transform: translateY(-2px) scale(1.05);
      z-index: 10;
      position: relative;
      box-shadow: 0 4px 16px rgba(0,0,0,.20) !important;
      border-color: rgba(15,118,110,.50) !important;
    }
    .calendar-day-number {
      font-weight: 600;
      line-height: 1.2;
    }
    .calendar-day-count {
      line-height: 1;
      opacity: 0.9;
    }
    .calendar-day[data-selecting="true"] {
      border-color: rgba(15,118,110,.70) !important;
      box-shadow: 0 2px 12px rgba(15,118,110,.30) !important;
      background: rgba(15,118,110,.12) !important;
    }
    .calendar-table {
      border-spacing: 2px;
    }
    .calendar-month-cell {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .calendar-month-cell:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 4px 16px rgba(0,0,0,.20) !important;
    }

    /* Icon navigation buttons */
    .iconbtn-nav {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--hair);
      background: rgba(255,255,255,.6);
      color: rgba(15,23,42,.75);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .iconbtn-nav:hover {
      border-color: rgba(15,23,42,.24);
      background: rgba(255,255,255,.85);
      color: var(--ink);
      transform: translateY(-1px);
    }
    .iconbtn-nav-active {
      border-color: rgba(185,28,28,.35);
      background: rgba(185,28,28,.10);
      color: #7f1d1d;
    }
    .iconbtn-nav-active:hover {
      border-color: rgba(185,28,28,.45);
      background: rgba(185,28,28,.15);
    }

    /* Dropdown menus */
    #sortDropdownMenu, #rangeDropdownMenu {
      max-height: 300px;
      overflow-y: auto;
      z-index: 9999 !important;
      backdrop-filter: blur(8px);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
      padding: 4px;
    }
    /* Ensure parent containers don't clip dropdowns */
    header {
      position: relative;
      z-index: 100;
      overflow: visible !important;
    }
    header > div {
      position: relative;
      z-index: 100;
    }
    .sort-option, .range-option {
      border-radius: 8px;
      border: none;
      margin: 2px 0;
      transition: background 0.15s ease;
    }
    .sort-option:first-child, .range-option:first-child {
      margin-top: 0;
    }
    .sort-option:last-child, .range-option:last-child {
      margin-bottom: 0;
    }
    .sort-option:hover, .range-option:hover {
      background: rgba(251,247,239,.85);
    }
    .sort-option.btn-on, .range-option.btn-on {
      background: rgba(185,28,28,.10);
      color: #7f1d1d;
      font-weight: 600;
    }
    .sort-option.btn-on:hover, .range-option.btn-on:hover {
      background: rgba(185,28,28,.15);
    }