.principal-panel{
    container:editor / inline-size;
    margin:1.5rem 0;
    padding:clamp(1rem, 2.5vw, 1.75rem);
    min-width:0;
    border:1px solid #dbe3ed;
    border-radius:.9rem;
    background:#fff;
}
.principal-panel summary{
    min-height:2.75rem;
    padding-block:.5rem;
    font-weight:650;
    line-height:1.6;
    cursor:pointer;
    overflow-wrap:anywhere;
}
.principal-panel[open] > summary{ margin-bottom:1.25rem; }
.principal-panel details{ min-width:0; margin-block:1.25rem; }
.principal-panel details[open] > summary{ margin-bottom:1.25rem; }
.principal-panel summary:focus-visible{ outline:2px solid var(--theme-primary); outline-offset:.25rem; border-radius:.25rem; }
.principal-panel label{ display:block; margin:0 0 .6rem; line-height:1.5; }
.principal-panel label:has(input:is([type="checkbox"], [type="radio"])){
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    margin-block:.75rem;
    padding-block:.35rem;
}
.principal-panel input:is([type="checkbox"], [type="radio"]){ flex:none; width:1.1rem; height:1.1rem; margin-top:.2rem; accent-color:var(--theme-primary); }
.principal-fields{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25rem 1.5rem;
    margin-block:1.25rem;
}
.principal-fields > *{ min-width:0; }
.principal-fields > button{ align-self:end; }
.principal-panel :is(input.form-control, select.form-select, textarea.form-control) + label{ margin-top:1.25rem; }
.principal-entry{
    container:editor / inline-size;
    margin:1.25rem 0;
    padding:clamp(1rem, 2vw, 1.5rem);
    min-width:0;
    border:1px solid #e2e8f0;
    border-left:3px solid var(--theme-primary, #4338ca);
    border-radius:.75rem;
    background:#f8fafc;
}
.principal-entry header{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.principal-entry header :is(h4,h5,h6){ margin:0; overflow-wrap:anywhere; }
.principal-panel :is(h4,h5,h6){ margin-top:1.5rem; }
.principal-panel :where(button:not(.btn)){
    min-height:2.75rem;
    padding:.6rem 1rem;
    border:1px solid #cbd5e1;
    border-radius:.7rem;
    background:#fff;
    color:#334155;
    font-weight:600;
    line-height:1.5;
}
.principal-panel :where(button:not(.btn)):hover:not(:disabled){ background:#f1f5f9; border-color:#94a3b8; }
.principal-panel :where(button:not(.btn)):disabled{ opacity:.55; }
.principal-panel > :is(button,.btn), .principal-entry > :is(button,.btn){ margin:.75rem .75rem .25rem 0; }
.principal-panel fieldset{ min-width:0; margin-block:1.5rem; padding:1.25rem; border:1px solid #e2e8f0; border-radius:.75rem; }
.principal-panel legend{ float:none; width:auto; max-width:100%; margin-bottom:.75rem; padding-inline:.35rem; font-size:1rem; font-weight:650; overflow-wrap:anywhere; }
.principal-panel :is(p,.help){ margin-block:1rem; line-height:1.65; }
.principal-panel .help{ color:#526079; }
.quote-toolbar, .quote-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1rem;
    margin-block:1.25rem;
}
.quote-toolbar > *, .quote-actions > *{ min-width:0; max-width:100%; }
.quote-toolbar > .form-control{ flex:1 1 16rem; }
.quote-toolbar > .form-select{ flex:1 1 12rem; }
.quote-toolbar :is(button,.btn), .quote-actions :is(button,.btn){ margin:0; }
@container editor (max-width: 44rem){ .principal-fields{ grid-template-columns:1fr; } }
@media (max-width: 900px){ .principal-fields{ grid-template-columns:1fr; } }
@media (max-width: 480px){
    .principal-panel{ padding:1rem; margin-block:1.25rem; }
    .principal-entry{ padding:.9rem; }
    .principal-panel fieldset{ padding:.85rem; }
    .quote-actions{ align-items:stretch; }
    .quote-actions > :is(button,.btn){ flex:1 1 12rem; }
}