/* --- UI Fit-to-screen patch (no page-level horizontal scrolling) --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden; }
/* Ensure the main grid never grows wider than the viewport */
.wrap { width: 100%; max-width: 100vw; min-width: 0; }

/* Grid/flex children should be allowed to shrink instead of forcing overflow */
.side, .main, .panel, .row, .subgrid, .toolbar { min-width: 0; }

/* Long text should wrap instead of expanding containers */
pre, code, .mono { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; }

/* Inputs/buttons shouldn't force layout wider than viewport */
input, select, textarea, button { max-width: 100%; }

/* Tables (if any) should not force page overflow; keep scrolling inside the table container */
table { max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; }

/* If any container still overflows, clip it locally instead of at page level */
.side, .main { overflow-x: hidden; }

    :root{--bg:#e6f4ff; --text:#0a2a66; --primary:#0a3b8e; --border:#cfe0ff; --muted:#5b79a6; --ok:#15803d; --err:#b91c1c;--primary-hover: var(--text);--ring:#6aa9ff;--ok-border:#16a34a;--warn:#ffd60a;--warn-border:#e3b400;--err-border:#ef4444;--ready: var(--primary);--ready-border: var(--text);--purple:#7c3aed;--purple-hover:#6d28d9;--page-header-height:0px;--main-left:0px;--main-width:100%;}
    html,body{height:100%;overflow-y:hidden}
    body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg);display:flex;flex-direction:column;height:100vh;overflow:hidden}

    .top{display:flex;align-items:flex-start;gap:12px;
      padding:12px 16px;border-bottom:1px solid var(--border);
      background: linear-gradient(var(--bg), #ffffff);
      position:sticky;top:0;z-index:5
    }
    .logo{height:56px;width:auto}
    .brand{font-weight:800;font-size:20px;letter-spacing:.2px}
    .badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#0a3b8e;color:#fff;padding:4px 10px;border-radius:999px}
    .status{margin-left:auto;font-size:12px;color:var(--muted)}
    .wrap{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0;min-width:0}
    .btn{padding:8px 10px;border:1px solid var(--primary);background:var(--primary);color:#fff;border-radius:8px;cursor:pointer}
    .btn .btn-icon{margin-right:6px;line-height:1}
    .btn .btn-icon:only-child{margin-right:0}
    .btn.secondary{background:#fff;color:var(--primary)}
    .btn.ok{background:var(--ok);border-color:var(--ok)}
    .btn.danger{background:#b91c1c;border-color:#b91c1c}
    .btn.small{padding:6px 8px;border-radius:8px;font-size:12px}
    .main{padding:calc(14px + var(--page-header-height)) 14px 14px;overflow:auto;min-height:0;display:grid;gap:12px;min-width:0;justify-items:center}
    .main > .card{width:100%;max-width:1200px}
    #scopeDecompositionRulesSection{display:block !important;width:100%;max-width:1200px;justify-self:center}
    #scopeDecompositionRulesSection > .card{width:100%;box-sizing:border-box}
    .sticky-savebar{width:100%;max-width:1200px;box-sizing:border-box;overflow:hidden}
    .sticky-savebar .savebar-top-row{flex-wrap:nowrap}
    .sticky-savebar .savebar-left{min-width:0;flex:1 1 auto}
    .sticky-savebar .project-info-row{min-width:0;flex-wrap:wrap;max-width:100%}
    .sticky-savebar .project-info-item .value{
      max-width:240px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .sticky-savebar .project-info-item.project-name .value{
      max-width:320px;
    }
    .sticky-savebar .savebar-btn{
      padding:6px 10px;
      font-size:12px;
      border-radius:8px;
      min-width:0;
    }
    .card{background:#fff;border:1px solid var(--border);border-radius:12px}
    .card .hd{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:800;display:flex;align-items:center;gap:10px}
    .card .bd{padding:10px 12px}
    /* --- Global section polish (cards & headers) --- */
    .card{
      box-shadow: 0 10px 26px rgba(10,42,102,0.06);
      border-color: rgba(207,224,255,0.95);
    }
    .card .hd{
      background: linear-gradient(#f7fbff, #ffffff);
      border-bottom: 1px solid rgba(207,224,255,0.9);
    }
    .card .bd{ padding: 12px; }
    .toolbar, .foot{ gap: 10px; }
    .toolbar{ align-items: center; }
    .hint{ line-height: 1.25; }
    details{
      border-color: rgba(207,224,255,0.95);
      box-shadow: 0 8px 18px rgba(10,42,102,0.05);
    }

    .row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
    .field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px}
.label{font-size:12px;color:var(--muted);font-weight:800}
.label-with-icon{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.meta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}
#projectMetadataCard .project-info-icon{
  font-size:15px;
}
    .input,.select,.textarea{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#f7fbff;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px}
    .textarea{min-height:96px;height:96px;resize:vertical}
    .rich-wrap{position:relative}
    .rich-wrap-table{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .rich-toolbar{
      position:absolute;
      top:6px;
      right:6px;
      left:auto;
      display:none;
      gap:6px;
      align-items:center;
      z-index:2;
    }
    .rich-toolbar:empty{ display:none !important; }
    .rich-wrap:focus-within .rich-toolbar{display:flex}
    .rich-toolbar.rich-toolbar-inline{
      position:static;
      display:flex;
      margin-left:auto;
      margin-right:6px;
    }
    .field:focus-within .rich-toolbar-inline{display:flex}
    .rich-wrap-table .rich-toolbar{
      display:flex;
      margin-left:auto;
      margin-right:6px;
    }
    #projectBriefDetails summary{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .rich-toolbar .btn{padding:4px 8px;font-size:12px;line-height:1}
    .rich-editor{
      min-height:96px;
      height:auto;
      padding:26px 10px 8px;
      border:1px solid var(--border);
      border-radius:8px;
      background:#f7fbff;
      font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size:13px;
      line-height: 1.5;
      white-space:pre-wrap;
      word-break:break-word;
      outline:none;
    }
    .rich-editor[data-toolbar="inline"]{
      padding-top:8px;
    }
    .rich-editor:empty:before{
      content: attr(data-placeholder);
      color: var(--muted);
    }
    /* --- Project Brief height tweak --- */
    #f_brief.textarea{min-height:160px;height:auto;}
    #f_value.textarea{min-height:140px;height:auto;}
    #in_goals.textarea,
    #in_users.textarea,
    #in_pains.textarea,
    #in_success.textarea,
    #f_alignment.textarea{
      min-height:120px;
      height:auto;
    }
    .rich-editor[data-source="f_brief"]{min-height:160px;}
    .rich-editor[data-source="f_value"]{min-height:140px;}
    .rich-editor[data-source="in_goals"],
    .rich-editor[data-source="in_users"],
    .rich-editor[data-source="in_pains"],
    .rich-editor[data-source="in_success"],
    .rich-editor[data-source="f_alignment"]{
      min-height:120px;
    }


    .hint{font-size:12px;color:var(--muted)}
    /* Force generator hint texts to align left */
    #objReqGeneratorCard .hint,
    #objReqGeneratorCardPlaceholder .hint{
      text-align: left;
    }
    
    
    /* --- Generator (Objectives & Requirements) polish --- */
    #objReqGeneratorCard,
    #objReqGeneratorCardPlaceholder{
      border-color: rgba(106,169,255,0.55);
      box-shadow: 0 10px 26px rgba(10,42,102,0.08);
    }
    #objReqGeneratorCard .hd,
    #objReqGeneratorCardPlaceholder .hd{
      background: linear-gradient(#f7fbff, #ffffff);
      border-bottom: 1px solid rgba(207,224,255,0.9);
      position: relative;
    }
    #objReqGeneratorCard .hd::before,
    #objReqGeneratorCardPlaceholder .hd::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:4px;
      background: linear-gradient(to bottom, var(--ring), rgba(106,169,255,0.15));
      border-top-left-radius:12px;
      border-bottom-left-radius:12px;
    }
    #objReqGeneratorCard .bd,
    #objReqGeneratorCardPlaceholder .bd{ padding-top: 12px; }
    #objReqGeneratorCard .bd .row,
    #objReqGeneratorCardPlaceholder .bd .row{ width:100%; }
    #objReqGeneratorCard .bd .row .hint,
    #objReqGeneratorCardPlaceholder .bd .row .hint{ line-height:1.35; }
    #objReqGeneratorCard .tag,
    #objReqGeneratorCardPlaceholder .tag{
      font-weight: 800;
      border-radius: 999px;
      padding: 3px 10px;
    }
    #objReqGeneratorCard #objReqGenStatus.tag,
    #objReqGeneratorCardPlaceholder #objReqGenStatusPlaceholder.tag{
      background:#eaf3ff;
      border:1px solid rgba(207,224,255,0.95);
      color: var(--primary);
      font-size: 14px;
      padding: 5px 14px;
    }
    #objReqGeneratorCard .toolbar .btn.secondary,
    #objReqGeneratorCardPlaceholder .toolbar .btn.secondary{
      box-shadow: 0 4px 12px rgba(10,42,102,0.08);
    }
    #objReqGeneratorCard .label,
    #objReqGeneratorCardPlaceholder .label{ letter-spacing: .15px; }
    #objReqGeneratorCard #objReqGenLastRun,
    #objReqGeneratorCardPlaceholder #objReqGenLastRunPlaceholder{
      font-family: monospace;
      font-weight: 500;
      color: var(--muted);
    }
    #objReqGeneratorCard #objReqGenLog,
    #objReqGeneratorCardPlaceholder #objReqGenLogPlaceholder{
      margin-top: 6px;
      max-height: 160px;
      overflow: auto;
      border: 1px dashed rgba(207,224,255,0.95);
      background: #f7fbff;
      border-radius: 12px;
      padding: 10px 12px;
    }
    #objReqGeneratorCard #objReqGenLog:empty,
    #objReqGeneratorCardPlaceholder #objReqGenLogPlaceholder:empty{
      padding: 0;
      border: none;
      background: transparent;
      max-height: 0;
    }
    #objReqGeneratorCard .btn.btn-clear,
    #objReqGeneratorCardPlaceholder .btn.btn-clear{ opacity: 0.95; }
    #objReqGeneratorCard .btn.btn-clear:hover,
    #objReqGeneratorCardPlaceholder .btn.btn-clear:hover{ opacity: 1; }

.toolbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
    .foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
    .log{font-size:12px;color:#0a2a66;white-space:pre-wrap}
    .log a{color:var(--primary);text-decoration:underline;word-break:break-all}
    .log a:hover{color:var(--primary-hover)}

    table{width:100%;border-collapse:separate;border-spacing:0 6px}
    th{font-size:12px;color:var(--muted);text-align:left}
    th.delete-header{text-align:center;font-weight:700;filter:grayscale(0.5) sepia(1) hue-rotate(-50deg) saturate(5) brightness(0.8)}
    td{background:#f7fbff;border:1px solid var(--border);padding:6px;vertical-align:top}
    /* --- Objective title textarea: align to column width --- */
    #objBody td:nth-child(2) .title {
     width: 100%;
     box-sizing: border-box;
     min-height: 72px;
     height: 72px;
     font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size:13px;
     line-height:1.5;
     color:var(--text);
     background:#f7fbff;
     border:1px solid var(--border);
     border-radius:8px;
    }
    #objBody td:nth-child(2) .rich-editor {
     width: 100%;
     box-sizing: border-box;
     min-height: 72px;
     height: 72px;
     font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size:13px;
     line-height:1.5;
     color:var(--text);
     background:#f7fbff;
     border:1px solid var(--border);
     border-radius:8px;
    }
    #objBody td:nth-child(5) .tf {
     width: 100%;
     box-sizing: border-box;
     min-height: 72px;
     height: 72px;
     font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size:13px;
     line-height:1.5;
     color:var(--text);
     background:#f7fbff;
     border:1px solid var(--border);
     border-radius:8px;
    }
    #objBody td:nth-child(5) .rich-editor {
     width: 100%;
     box-sizing: border-box;
     min-height: 72px;
     height: 72px;
     font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size:13px;
     line-height:1.5;
     color:var(--text);
     background:#f7fbff;
     border:1px solid var(--border);
     border-radius:8px;
    }
    #objBody .pr,
    #objBody .owner{
      font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size:13px;
      line-height:1.5;
      color:var(--text);
      background:#f7fbff;
      border:1px solid var(--border);
      border-radius:8px;
    }
    /* --- General Requirements: compact statement textarea --- */
    #reqBody td:nth-child(4) .st {
      width: 100%;
      box-sizing: border-box;
      min-height: 72px;
      height: 72px;
      resize: vertical;
    }
    #reqBody td:nth-child(4) .rich-editor {
      width: 100%;
      box-sizing: border-box;
      min-height: 72px;
      height: 72px;
    }
    #reqBody .cat,
    #reqBody .pr,
    #reqBody .rel{
      font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size:13px;
      line-height:1.5;
      color:var(--text);
      background:#f7fbff;
      border:1px solid var(--border);
      border-radius:8px;
    }
    /* KPI table inputs should fill their cells */
    [data-kpi-body] input.input{
      width: 100%;
      box-sizing: border-box;
    }
    [data-kpi-body] textarea.textarea{
      width: 100%;
      box-sizing: border-box;
      min-height: 96px;
      height: auto;
      resize: vertical;
    }

    tr td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
    tr td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}

    .chips{display:flex;flex-wrap:wrap;gap:6px}
    .chip{display:flex;gap:6px;align-items:center;background:#f7fbff;border:1px solid var(--border);padding:5px 8px;border-radius:999px}
    .chip button{border:none;background:transparent;cursor:pointer;color:#b00;font-weight:900}
    details{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px}
    details > summary{cursor:pointer;font-weight:800;color:var(--primary)}
    .subgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    

/* Ultrawide desktops: widen side panels a bit */
@media (max-width:1100px){ .subgrid{grid-template-columns:1fr} }

    .tag{font-size:12px;background:#eaf3ff;border:1px solid var(--border);padding:3px 8px;border-radius:999px}

    /* --- Counts badge for Objectives/Requirements (header) --- */
    .count-pill{margin-left:auto; white-space:nowrap;}
  
  /* --- Project Metadata: per-field fitted widths (scoped) --- */
  #projectMetadataCard .row { gap: 12px; }
  #projectMetadataCard .field { flex: 0 0 auto; }
  #projectMetadataCard .field.pm-id     { width: 26ch; min-width: 22ch; }
  #projectMetadataCard .field.pm-name   { width: 18ch; min-width: 14ch; }
  #projectMetadataCard .field.pm-domain { width: 12ch; min-width: 10ch; }
  #projectMetadataCard .field.pm-status { width: 14ch; min-width: 12ch; }
  #projectMetadataCard .field.pm-type   { width: 14ch; min-width: 12ch; }
  #projectMetadataCard .field.pm-lang   { width: 14ch; min-width: 12ch; }
  #projectMetadataCard .field.pm-system { width: 12ch; min-width: 10ch; }
  #projectMetadataCard input,
#projectMetadataCard select {
  width: 100%;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  background:#f7fbff;
  border:1px solid var(--border);
  border-radius:8px;
}
  /* --- End Project Metadata tuning --- */


    

    


    /* --- Header (logo + tagline + badge aligned to text width) --- */
    .top-left{
      display:grid;
      grid-template-columns:auto auto;
      grid-template-rows:auto auto;
      align-items:center;
      column-gap:12px;
    }
    .top-left .logo{grid-column:1;grid-row:1}
    .top-left .badge{grid-column:2;grid-row:1;align-self:center}
    .tagline-title{grid-column:1 / -1;font-size:20px;line-height:1.15;font-weight:800;color:var(--text)}
    .tagline-sub{font-size:13px;line-height:1.2;font-weight:600;color:var(--muted);margin-top:6px}



/* --- Override: internal horizontal scroll for all sections except Project Metadata --- */
html, body { overflow-x: hidden; } /* keep page-level no horizontal scroll */

.panel { overflow-x: auto; }        /* allow internal horizontal scroll where needed */
#projectMetadataCard.panel { overflow-x: hidden; } /* exception: keep metadata fitted/wrapped */

/* Prefer scrolling over wrapping for monospace/log/JSON areas */
pre, code, .mono { white-space: pre; overflow-wrap: normal; word-break: normal; }

/* Safety: allow panels to shrink inside grid without forcing page overflow */
.panel, .side, .main { min-width: 0; }

/* Project info styles are shared in shared_sticky.css */

.top-left-stack{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* --- Sticky Save Bar (TOP of main panel) --- */
/* --- Sticky Save Bar (TOP of main panel) --- */
.sticky-savebar{
  position: relative;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(10, 58, 142, 0.15);
  border-radius: 10px;
  padding: 6px 12px !important;
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 2px 8px rgba(10, 42, 102, 0.08), 
              0 1px 2px rgba(10, 42, 102, 0.04);
  transition: box-shadow 0.2s ease;
}

.page-header{
  position: fixed;
  top: 0;
  left: var(--main-left);
  width: calc(var(--main-width) - var(--main-scrollbar, 0px));
  z-index: 40;
  background: var(--bg);
}
.page-header-inner{
  display: flex;
  justify-content: center;
  padding: 2px 14px 4px;
}

.sticky-savebar:hover {
  box-shadow: 0 4px 12px rgba(10, 42, 102, 0.12), 
              0 2px 4px rgba(10, 42, 102, 0.06);
}

/* Save bar action buttons - compact, same look and feel */
.sticky-savebar .savebar-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.sticky-savebar .savebar-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-weight:600;
  font-size:13px;
  padding:5px 10px;
  min-width:0;
  white-space:nowrap;
  background:#93c5fd;
  border-color:#60a5fa;
  color:#0a2a66;
}
.sticky-savebar .savebar-btn .btn-icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.sticky-savebar .savebar-btn .btn-icon svg{
  display:block;
}
.sticky-savebar .savebar-btn.saving{
  opacity:0.7;
  pointer-events:none;
  cursor:not-allowed;
}
.sticky-savebar .savebar-btn.saving::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  margin-left:8px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:white;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg);}
}
.sticky-savebar .savebar-btn.saved{
  background:#93c5fd;
  animation:savedPulse 0.6s ease;
}
@keyframes savedPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}
.auto-save-indicator{
  font-size:11px;
  color:var(--muted);
  margin-left:8px;
  white-space:nowrap;
}

/* Left accent border - subtle and lighter */
.sticky-savebar::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: linear-gradient(to bottom, var(--primary), rgba(10,58,142,0.3));
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  z-index: 1;
}

.sticky-savebar .row{
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

/* Single row: project info + buttons - keep on one line */
.sticky-savebar .savebar-top-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sticky-savebar .savebar-status-row{
  margin-top: 4px;
}
.sticky-savebar #status{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-savebar .savebar-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex: 1 1 auto;
  overflow: hidden;
}
.sticky-savebar .savebar-left .project-info-row{
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.sticky-savebar .savebar-left .project-info-item{
  font-size: 12px;
  flex-shrink: 0;
}
.sticky-savebar .savebar-left .project-info-item.project-name{
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.sticky-savebar .savebar-left .project-info-item.project-name .value{
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px){
  .sticky-savebar .savebar-top-row{ flex-wrap: wrap; }
  .sticky-savebar .savebar-left{ flex-wrap: wrap; overflow: visible; }
}

/* Mobile optimizations */
@media (max-width: 768px){
  .sticky-savebar{
    padding: 8px 12px;
  }
  
  .sticky-savebar .savebar-left{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  
  .project-info-row{
    width: 100%;
    flex-wrap: wrap;
  }
  
  .project-info-item.project-name .value{
    max-width: calc(100vw - 200px);
  }
  
  .sticky-savebar .savebar-top-row > div:last-child{
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }
  
  .sticky-savebar .savebar-btn{
    flex: 1;
    min-width: auto;
  }
  
  .sticky-savebar #status{
    font-size: 11px;
  }
  
  .auto-save-indicator{
    font-size: 10px;
  }
}

/* --- Minimal compact top header (keeps toggle + active badge + status) --- */
.top.top-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:8px 12px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);

  position:sticky;
  top:0;
  z-index:30;
}

.top-compact-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}


.top.top-compact .active-project-badge{
  max-width:380px;
}

.top.top-compact .status{
  margin-left:auto;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

@media (max-width: 520px){
  .top-compact-left{ flex-wrap:wrap; }
  .top.top-compact .active-project-badge{ max-width:100%; }
}


/* --- Tiny flow separator (between Generator and Project Outputs) --- */
.section-sep{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:2px 0;
  margin:2px 0 -6px 0; /* keep it subtle and tight */
}
.section-sep::before,
.section-sep::after{
  content:"";
  flex:1;
  height:2px;
  background:linear-gradient(to right, transparent, var(--border), transparent);
}
.section-sep span{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.2px;
  white-space:nowrap;
}

/* --- Section title accents (text color only) --- */
.hd-title{ font-weight:800; }
/* Project Outputs header uses same colors as Project Inputs (no override) */

/* --- Enhanced styling: collapsible section headers (triangle, teal bar, same look for all) --- */
/* Value Statement, SMART Objectives, General Requirements, Scope Decomposition Rules, Project Brief, Business Context, Delivery Constraints */
#valueStatementDetails,
#smartObjectivesDetails,
#generalRequirementsDetails,
#decompositionRulesCard,
#projectBriefDetails,
#businessContextDetails,
#deliveryConstraintsDetails{
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
#valueStatementDetails > div,
#smartObjectivesDetails > div,
#generalRequirementsDetails > div{
  padding: 14px 14px 8px 14px;
}
#decompositionRulesCard > .bd{
  padding: 14px 14px 8px 14px;
}
/* Project Brief and Business Context / Delivery Constraints: same content padding when open */
#projectBriefDetails .row,
#businessContextDetails .row,
#deliveryConstraintsDetails .row{
  padding: 0 14px 8px 14px;
}
#projectBriefDetails .row:first-child,
#businessContextDetails .row:first-child,
#deliveryConstraintsDetails .row:first-child{
  padding-top: 14px;
}
#valueStatementDetails > summary,
#smartObjectivesDetails > summary,
#generalRequirementsDetails > summary,
#decompositionRulesCard > summary,
#projectBriefDetails > summary,
#businessContextDetails > summary,
#deliveryConstraintsDetails > summary{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(to right, #e8f0fe, #f7fafc);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--primary);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
  list-style: none;
}
#valueStatementDetails > summary::-webkit-details-marker,
#smartObjectivesDetails > summary::-webkit-details-marker,
#generalRequirementsDetails > summary::-webkit-details-marker,
#decompositionRulesCard > summary::-webkit-details-marker,
#projectBriefDetails > summary::-webkit-details-marker,
#businessContextDetails > summary::-webkit-details-marker,
#deliveryConstraintsDetails > summary::-webkit-details-marker{
  display: none;
}
#valueStatementDetails > summary::marker,
#smartObjectivesDetails > summary::marker,
#generalRequirementsDetails > summary::marker,
#decompositionRulesCard > summary::marker,
#projectBriefDetails > summary::marker,
#businessContextDetails > summary::marker,
#deliveryConstraintsDetails > summary::marker{
  display: none;
}
#valueStatementDetails > summary::before,
#smartObjectivesDetails > summary::before,
#generalRequirementsDetails > summary::before,
#decompositionRulesCard > summary::before,
#projectBriefDetails > summary::before,
#businessContextDetails > summary::before,
#deliveryConstraintsDetails > summary::before{
  content: "▶";
  display: inline-block;
  flex-shrink: 0;
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--primary);
}
#valueStatementDetails[open] > summary::before,
#smartObjectivesDetails[open] > summary::before,
#generalRequirementsDetails[open] > summary::before,
#decompositionRulesCard[open] > summary::before,
#projectBriefDetails[open] > summary::before,
#businessContextDetails[open] > summary::before,
#deliveryConstraintsDetails[open] > summary::before{
  transform: rotate(90deg);
}
#valueStatementDetails > summary:hover,
#smartObjectivesDetails > summary:hover,
#generalRequirementsDetails > summary:hover,
#decompositionRulesCard > summary:hover,
#projectBriefDetails > summary:hover,
#businessContextDetails > summary:hover,
#deliveryConstraintsDetails > summary:hover{
  background: linear-gradient(to right, #dbeafe, #eff6ff);
  border-color: var(--ring);
}
#valueStatementDetails > summary::after,
#smartObjectivesDetails > summary::after,
#generalRequirementsDetails > summary::after,
#decompositionRulesCard > summary::after,
#projectBriefDetails > summary::after,
#businessContextDetails > summary::after,
#deliveryConstraintsDetails > summary::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--primary), var(--text));
  border-radius: 10px 0 0 10px;
}
#valueStatementDetails[open] > summary,
#smartObjectivesDetails[open] > summary,
#generalRequirementsDetails[open] > summary,
#decompositionRulesCard[open] > summary,
#projectBriefDetails[open] > summary,
#businessContextDetails[open] > summary,
#deliveryConstraintsDetails[open] > summary{
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
}

/* Keep Scope Decomposition Rules title inline so alignment matches other sections */
#decompositionRulesCard > summary .hd-title{
  display: inline;
}

/* Decomposition rules: collapsible sub-category rule blocks */
.deco-rule-block{
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
.deco-rule-block > .bd{
  padding: 14px 14px 8px 14px;
}
.deco-rule-summary{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(to right, #e8f0fe, #f7fafc);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  transition: all 0.2s ease;
}
.deco-rule-summary::-webkit-details-marker,
.deco-rule-summary::marker{
  display: none;
  content: '';
}
.deco-rule-summary::before{
  content: "\25B6";
  display: inline-block;
  flex-shrink: 0;
  font-size: 9px;
  transition: transform 0.2s ease;
  color: var(--primary);
}
.deco-rule-block[open] > .deco-rule-summary::before{
  transform: rotate(90deg);
}
.deco-rule-summary:hover{
  background: linear-gradient(to right, #dbeafe, #eff6ff);
  border-color: var(--ring);
}
.deco-rule-summary::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--primary), var(--text));
  border-radius: 10px 0 0 10px;
}
.deco-rule-block[open] > .deco-rule-summary{
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
}
.deco-rule-header-title{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deco-rule-header-actions{
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Decomposition rules: Advanced Meta toggle */
.deco-meta-advanced > summary{
  font-size: 12px;
  margin-bottom: 4px;
}
.deco-meta-advanced > summary::-webkit-details-marker,
.deco-meta-advanced > summary::marker{
  display: none;
  content: '';
}

/* Decomposition rules: Simple mode textarea */
.deco_wp_simple{
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  min-height: 80px;
  resize: vertical;
}

/* Decomposition rules: mode toggle button */
.deco_mode_toggle{
  font-size: 11px !important;
  padding: 2px 8px !important;
}

#smartObjectivesDetails .textarea,
#smartObjectivesDetails .sp,
#smartObjectivesDetails .ms,
#smartObjectivesDetails .ac,
#smartObjectivesDetails .rl,
#smartObjectivesDetails .tb,
#smartObjectivesDetails .nt{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  background:#f7fbff;
  border:1px solid var(--border);
  border-radius:8px;
}

/* --- Project Brief styling (matches Business Context appearance exactly) --- */
/* Project Brief uses the same default styling as Business Context (details > summary) */
/* No special styling needed - inherits from default details/summary rules */
#valueStatementDetails > summary .pill,
#projectBriefDetails > summary .pill,
#businessContextDetails > summary .pill,
#deliveryConstraintsDetails > summary .pill,
#smartObjectivesDetails > summary .count-pill,
#generalRequirementsDetails > summary .count-pill{
  font-weight: 600;
  background: rgba(15, 118, 110, 0.1);
  border: 1px solid rgba(15, 118, 110, 0.25);
  color: #0f766e;
  margin-left: auto;
}
#valueStatementDetails > summary .vs-lock-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
#valueStatementDetails > summary .vs-lock-wrap .pill{
  margin-left: 0;
}
#valueStatementDetails > summary .vs-lock-wrap label{
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  color: #0f766e;
  cursor: pointer;
  user-select: none;
}
#valueStatementDetails > summary .vs-lock-wrap input[type="checkbox"]{
  margin: 0 4px 0 0;
  cursor: pointer;
}
/* Field-level lock controls */
.field-label-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 22px;
}
.field-lock-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  min-height: 22px;
}
.field-lock-wrap .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.field-lock-wrap label{
  margin: 0;
  font-weight: 500;
  font-size: 13px;
  color: #0f766e;
  cursor: pointer;
  user-select: none;
}
.field-lock-wrap input[type="checkbox"]{
  margin: 0 4px 0 0;
  cursor: pointer;
}


/* --- Collapsible section headers (Objectives / Requirements) --- */
.hd .hd-toggle{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color: currentColor;
  font-weight:900;
  font-size:14px;
  transform: translateY(-1px);
}
.hd .hd-toggle[aria-expanded="false"]{ opacity:0.95; }
.hd .hd-toggle[aria-expanded="true"]{ opacity:1; }
.hd .hd-toggle .tri{
  display:inline-block;
  transform-origin:center;
  transition: transform .12s ease;
}
.hd .hd-toggle[aria-expanded="true"] .tri{ transform: rotate(90deg); }
/* hide body when collapsed (JS toggles this class) */
.card.collapsed > .bd{ display:none; }

/* Run Center button parity (Ready/Stop/Clear) */
.btn-purple{border-color:var(--purple);background:var(--purple)}
.btn-purple:hover{background:var(--purple-hover)}
.status-btn{min-width:auto;padding:10px 12px;text-align:center;pointer-events:none;border:1px solid var(--ready-border);background:var(--ready);color:#fff}
.status-running{background: var(--warn)!important;border-color: var(--warn-border)!important}
.status-success{background: var(--ok)!important;border-color: var(--ok-border)!important}
.status-fail{background: var(--err)!important;border-color: var(--err-border)!important}
.btn-stop.running{ background: var(--err); border-color: var(--err-border); }

/* Value Statement locked visual */
#f_value.locked,
.rich-editor[data-source="f_value"].locked{
  border-color: var(--warn-border);
  background: rgba(255, 214, 0, 0.08);
}

/* Objectives and Requirements locked visual (inputs only) */
.row-locked td .input,
.row-locked td .textarea,
.row-locked td .rich-editor,
.row-locked td .select,
.row-locked td input:not(.lock),
.row-locked td textarea,
.row-locked td select{
  border-color: var(--warn-border) !important;
  background: rgba(255, 214, 0, 0.08) !important;
}

/* Lock icon styling */
.lock-icon{
  display: block;
  text-align: center;
  font-size: 14px;
  margin-top: 4px;
  line-height: 1;
}

/* Locked inputs/textarea (same as value statement) */
input.locked, textarea.locked, .rich-editor.locked{
  border-color: var(--warn-border) !important;
  background: rgba(255, 214, 0, 0.08) !important;
}

/* RTL support for Hebrew language text inputs only */
.input.rtl-text, .textarea.rtl-text, .rich-editor.rtl-text{
  direction: rtl;
  text-align: right;
  font-family: "Segoe UI", "David Libre", "David", "Noto Sans Hebrew", Arial, sans-serif;
}