/* ========================= DROITS DISPONIBLES ==========================
   The panel under the facts strip: the list a visitor reads, the editor
   the holder works in. Loaded by the page, because the cell that opens it
   is on the page.

   The colour of a state is the same in the bar, the legend, the pill and
   the dot, so "vert" means available everywhere it appears.
   ===================================================================== */

.rg{
    --rg-line:  var(--light-grey2, #ebebeb);
    --rg-mut:   #5f5f5f;
    --rg-card:  #ffffff;
    --rg-soft:  #f4f4f4;
    --rg-ok:    var(--primary-color);
    --rg-taken: #151515;
    --rg-kept:  #9a9a9a;
    --rg-none:  #d8d8d8;
    color: var(--text-color);
}
.dark .rg{
    --rg-line:  rgba(255,255,255,0.14);
    --rg-mut:   #a8a8a8;
    --rg-card:  #151515;
    --rg-soft:  rgba(255,255,255,0.05);
    --rg-taken: #ededed;
    --rg-kept:  #7a7a7a;
    --rg-none:  #3a3a3a;
    color: var(--off-white);
}

.rights_panel[hidden]{ display: none; }
.rights_panel{ padding: 0 32px 4px; }

.rg{
    background: var(--rg-card); border: 1px solid var(--rg-line); border-radius: 14px;
    overflow: hidden;
}

/* ------------------------------- the head ---------------------------- */
.rg_head{ position: relative; padding: 22px 26px 18px; border-bottom: 1px solid var(--rg-line); }
.rg_title{ padding: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.rg_sub{ padding: 4px 0 0; font-size: 13px; color: var(--rg-mut); }
.rg_lede{ padding: 7px 0 0; max-width: 62ch; font-size: 13.5px; line-height: 1.55em; color: var(--rg-mut); }
.rg_lede strong{ color: var(--text-color); font-weight: 700; }
.dark .rg_lede strong{ color: var(--off-white); }

.rg .rg_btn{
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    padding: 9px 17px; border: 1px solid var(--rg-line); border-radius: 999px;
    background: var(--rg-card); font-size: 13px; font-weight: 700;
    color: var(--text-color); text-decoration: none; cursor: pointer;
}
.dark .rg .rg_btn{ color: var(--off-white); }
.rg .rg_btn:hover{ border-color: var(--rg-mut); }
/* --text-color is the ink on lime in both themes -- it is declared once in
   :root and never redefined under .dark. The dark rule above is (0,3,0) and
   the button carries both classes, so the accent has to match it or the
   label comes out #ccc on lime, which is no label at all. */
.rg .rg_go,
.dark .rg .rg_go{ background: var(--primary-color); border-color: var(--primary-color); color: var(--text-color); }
.rg .rg_go:hover{ filter: brightness(0.94); }
.rg .rg_go.is_busy{ opacity: 0.6; pointer-events: none; }
.rg .rg_small{ padding: 7px 14px; font-size: 12.5px; }
.rg .rg_close{ position: absolute; top: 20px; right: 24px; }

/* ------------------------------ the editor --------------------------- */
.rg_grid{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.rg_main{ padding: 8px 26px 22px; min-width: 0; }
.rg_rail{
    padding: 20px 22px 22px; border-left: 1px solid var(--rg-line); background: var(--rg-soft);
    align-self: stretch;
}

.rg_group{
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 20px 0 6px; border-bottom: 1px solid var(--rg-line); margin-bottom: 4px;
}
.rg_group_t{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; }
.rg_group_n{ font-size: 12.5px; color: var(--rg-mut); }

.rg_line{
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 13px 0; border-bottom: 1px solid var(--rg-line);
}
.rg_line:last-of-type{ border-bottom: 0; }
.rg_line_name{ padding: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rg_line_name strong{ font-size: 15px; font-weight: 800; }
.rg_line_note{ padding: 3px 0 0; font-size: 13px; color: var(--rg-mut); }

/* the scope rides on the name, because that is what it qualifies */
.rg .rg_scope{
    padding: 3px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--primary-color); background: transparent;
    font-size: 11.5px; font-weight: 700; color: var(--text-color);
}
.dark .rg .rg_scope{ color: var(--off-white); }
.rg .rg_scope[hidden]{ display: none; }
.rg .rg_scope.is_empty{ border-style: dashed; border-color: var(--rg-line); color: var(--rg-mut); font-weight: 400; }
.rg .rg_scope:hover{ border-color: var(--primary-color); }

/* ------------------------------- the pills --------------------------- */
.rg_pills{
    display: inline-flex; padding: 3px; border-radius: 999px;
    border: 1px solid var(--rg-line); background: var(--rg-card);
}
.rg .rg_p{
    padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--rg-mut); white-space: nowrap;
}
.rg .rg_p:hover{ color: var(--text-color); }
.dark .rg .rg_p:hover{ color: var(--off-white); }
.rg .rg_p.is_available{ background: var(--rg-ok);    color: var(--text-color); }
.rg .rg_p.is_taken    { background: var(--rg-taken); color: var(--rg-card); }
.rg .rg_p.is_kept     { background: var(--rg-soft);  color: var(--text-color); box-shadow: inset 0 0 0 1px var(--rg-line); }
.dark .rg .rg_p.is_kept{ color: var(--off-white); }

/* ------------------------------- the bulk ---------------------------- */
.rg_bulk{
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--rg-line);
}
.rg_bulk_note{ flex: 1 1 240px; padding: 0; font-size: 12.5px; line-height: 1.45em; color: var(--rg-mut); }

/* ------------------------------- the rail ---------------------------- */
.rg_rail_label{ padding: 0 0 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--rg-mut); }
.rg_card{
    background: var(--rg-card); border: 1px solid var(--rg-line); border-radius: 11px;
    padding: 15px 17px; margin-bottom: 14px;
}
.rg_card_label{ padding: 0 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; color: var(--rg-mut); }
.rg_card_big{ padding: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.rg_card_sub{ padding: 4px 0 0; font-size: 12.5px; line-height: 1.45em; color: var(--rg-mut); }
.rg_card_sub[hidden]{ display: none; }

.rg_bar{ display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--rg-none); }
.rg_bar_p{ display: block; height: 100%; transition: width 160ms ease; }
.rg_bar_p.is_available{ background: var(--rg-ok); }
.rg_bar_p.is_taken    { background: var(--rg-taken); }
.rg_bar_p.is_kept     { background: var(--rg-kept); }
.rg_bar_p.is_unset    { background: var(--rg-none); }

.rg_legend{ list-style: none; margin: 12px 0 0; padding: 0; }
.rg_legend li{
    display: flex; align-items: center; gap: 9px;
    padding: 6px 0; font-size: 12.5px;
}
.rg_legend b{ margin-left: auto; font-size: 13px; font-weight: 800; }
.rg_key{ width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rg_key.is_available{ background: var(--rg-ok); }
.rg_key.is_taken    { background: var(--rg-taken); }
.rg_key.is_kept     { background: var(--rg-kept); }
.rg_key.is_unset    { background: var(--rg-none); }

.rg_warn{
    border: 1px solid rgba(214,158,46,0.45); background: rgba(214,158,46,0.08);
    border-radius: 11px; padding: 13px 15px; margin-bottom: 14px;
}
.rg_warn[hidden]{ display: none; }
.rg_warn_t{ padding: 0 0 5px; font-size: 13px; font-weight: 800; }
.rg_warn_b{ padding: 0; font-size: 12.5px; line-height: 1.5em; color: var(--rg-mut); }

/* -------------------------------- the NDA ---------------------------- */
.rg_nda{
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    padding: 14px 0; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line);
}
.rg_nda input{ position: absolute; opacity: 0; width: 0; height: 0; }
.rg_nda_track{
    flex: 0 0 auto; position: relative; width: 34px; height: 20px; margin-top: 1px;
    border-radius: 999px; background: var(--rg-none); transition: background 140ms ease;
}
.rg_nda_dot{
    position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 140ms ease;
}
.rg_nda input:checked + .rg_nda_track{ background: var(--primary-color); }
.rg_nda input:checked + .rg_nda_track .rg_nda_dot{ transform: translateX(14px); }
.rg_nda input:focus-visible + .rg_nda_track{ outline: 2px solid var(--text-color); outline-offset: 2px; }
.rg_nda_txt strong{ display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3em; color: var(--text-color); }
.dark .rg_nda_txt strong{ color: var(--off-white); }
.rg_nda_txt em{ display: block; padding-top: 3px; font-style: normal; font-size: 11.5px; line-height: 1.45em; color: var(--rg-mut); }

.rg_do{ display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 10px; padding-top: 16px; }

/* ============================ the read view =========================== */
.rg_list{ padding: 16px 26px 4px; display: flex; flex-direction: column; gap: 10px; }
.rg_row{
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 13px 18px; border: 1px solid var(--rg-line); border-radius: 11px;
}
.rg_dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--rg-none); }
.rg_row.is_available .rg_dot{ background: var(--rg-ok); }
.rg_row.is_taken     .rg_dot{ background: var(--rg-taken); }
.rg_row.is_kept      .rg_dot{ background: var(--rg-kept); }
.rg_row_txt strong{ display: block; font-size: 14.5px; font-weight: 800; }
.rg_row_txt em{ display: block; padding-top: 2px; font-style: normal; font-size: 12.5px; color: var(--rg-mut); }

.rg_pill{
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rg-line);
    font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--rg-mut);
}
.rg_row.is_available .rg_pill{ background: var(--rg-ok); border-color: var(--rg-ok); color: var(--text-color); }
.rg_row.is_taken     .rg_pill{ background: var(--rg-taken); border-color: var(--rg-taken); color: var(--rg-card); }

.rg_foot{
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    margin: 16px 26px 22px; padding-top: 18px; border-top: 1px solid var(--rg-line);
}
.rg_foot_note{ flex: 1 1 300px; padding: 0; font-size: 13px; line-height: 1.5em; color: var(--rg-mut); }

.rg_blank{ padding: 34px 26px; text-align: center; }
.rg_blank p{ padding: 0 0 14px; font-size: 14px; color: var(--rg-mut); }

/* ================= the editor inside the project sheet ================
   Same markup, a narrower box. The panel used to be the width of the page
   and carried its own card: a border, a radius, a white ground and 26px of
   padding down each side. Inside the sheet it is one section of a form
   that already provides all four, so it gives them up -- and the two-column
   grid folds, because the query that folds it reads the window and the
   window is not what got narrower.
   ===================================================================== */
.rg_in_sheet{ border: 0; border-radius: 0; background: transparent; overflow: visible; }
.rg_in_sheet .rg_grid{ grid-template-columns: 1fr; gap: 0; }
.rg_in_sheet .rg_main{ padding: 0; }
.rg_in_sheet .rg_rail{
    margin-top: 20px; padding: 18px 18px 20px;
    border-left: 0; border-top: 1px solid var(--rg-line); border-radius: 12px;
}
.rg_in_sheet .rg_group:first-child{ padding-top: 4px; }

/* the rail's three cards read as a row when there is width for one */
@media(min-width: 900px){
    .rg_in_sheet .rg_rail{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
    .rg_in_sheet .rg_rail_label{ grid-column: 1 / -1; padding-bottom: 0; }
    .rg_in_sheet .rg_warn,
    .rg_in_sheet .rg_nda{ grid-column: 1 / -1; }
}

/* ==================== the cell in the facts strip ===================== */
#project_page .fact_rights{ position: relative; }
#project_page .fact_rights.is_open{ background: var(--light-grey2, #f0f0f0); }
.dark #project_page .fact_rights.is_open{ background: rgba(255,255,255,0.06); }
/* the label and its controls share a row and wrap to a second one in a cell
   this narrow, which is where the chevron ends up: under the label, on the
   right, against the value it opens */
#project_page .fact_rights .fact_label{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 2px 10px;
}
#project_page .fact_rights .fact_acts{
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
}

#project_page .fact_hit{ display: block; text-decoration: none; color: inherit; }
#project_page .fact_hit .fact_value{ display: block; padding: 0; font-size: 16px; line-height: 1.25em; }
#project_page .fact_sub{ display: block; padding-top: 3px; font-size: 12px; line-height: 1.35em; opacity: 0.6; }

/* ---- Modifier ---- */
/* .dark a is (0,1,1) and beats a bare class, so the accent is declared at
   that weight too or the word comes out grey in dark mode */
#project_page .fact_edit,
.dark #project_page .fact_edit{
    font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
    text-decoration: none; white-space: nowrap; line-height: 1em;
}

/* --primary-color is #cae76f: a background colour. As ink on a white card
   it is barely there. #5c7a1e is the darker green the rest of //venture
   already uses for a link in light mode -- "Modifier les faits", the team
   roles, the About links -- so this one matches them rather than inventing
   a second green. Dark mode keeps the lime, which is the legible one
   against #151515. */
#project_page .fact_edit{ color: #5c7a1e; }
.dark #project_page .fact_edit{ color: var(--primary-color); }

#project_page .fact_edit:hover{ text-decoration: underline; }

/* ---- the chevron ---- */
#project_page .fact_chev,
.dark #project_page .fact_chev{
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 999px;
    border: 1px solid var(--light-grey, #d8d8d8);
    background: transparent; color: var(--text-color); text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.dark #project_page .fact_chev{ border-color: rgba(255,255,255,0.28); color: var(--off-white); }

#project_page .fact_chev .material-symbols-outlined{ font-size: 18px; line-height: 1; }

/* filled, the lime is a background and --text-color is its ink, so hover
   reads in both themes; the ring on its own follows the same rule as
   "Modifier" -- dark green on white, lime on black */
#project_page .fact_chev:hover,
.dark #project_page .fact_chev:hover{ background: var(--primary-color); color: var(--text-color); border-color: var(--primary-color); }

/* open is the same control turned over, so the cell never needs a second
   word to say what pressing it again would do */
#project_page .fact_rights.is_open .fact_chev{ transform: rotate(180deg); }

/* the cell is a button in everything but name -- say so on hover */
#project_page .fact_rights{ cursor: pointer; }
#project_page .fact_rights:hover .fact_chev{ border-color: #5c7a1e; }
.dark #project_page .fact_rights:hover .fact_chev{ border-color: var(--primary-color); }

/* -------------------------------- narrow ----------------------------- */
@media(max-width: 1100px){
    .rg_grid{ grid-template-columns: 1fr; }
    .rg_rail{ border-left: 0; border-top: 1px solid var(--rg-line); }
}
@media(max-width: 760px){
    .rights_panel{ padding: 0 16px 4px; }
    .rg_line{ grid-template-columns: 1fr; }
    .rg_pills{ width: 100%; justify-content: space-between; }
    .rg_head{ padding: 18px 20px 16px; }
    .rg .rg_close{ position: static; margin-top: 12px; }
    .rg_main{ padding: 4px 20px 20px; }
    .rg_list{ padding: 14px 18px 4px; }
    .rg_foot{ margin: 14px 18px 18px; }
}

/* "Rights open" at the head of the Investors tab (single-project-investors*.php), read and edit */
.inv_rights { margin-bottom: 20px; }
.inv_rights .rg_view { margin: 0; border: 0; box-shadow: none; }
.inv_rights_t { margin: 0 0 4px; font-size: 22px; }
.inv_rights_d { margin: 0 0 16px; font-size: 14px; color: #4a4a46; max-width: 60ch; }