/* ============================================================================
   Drafting Stack — application styles
   ----------------------------------------------------------------------------
   Single stylesheet for the task pane. Consolidated from, and replacing:
     - the 9 inline <style> blocks in Views/Home/Authenticated.cshtml
     - the 8 inline style="…" attributes in the two Home views
     - the two stylesheets that templateInsert.js and firmProfile.js used to
       inject into <head> at runtime (injectStylesOnce)
     - the 5 static element.style.cssText strings in the linter modules
       (3 identical chip strings, 2 identical button strings)

   Rules are copied VERBATIM. Colours (#DC143C) and 9–11px type are preserved
   exactly as they were — this was a structural extraction, not a restyle.
   Re-tokenising to Fluent 2 and fixing contrast/type size is a separate,
   deliberate piece of work (see FOLLOW-UPS.md).
   ============================================================================ */

/* ---------- shared primitives ---------- */

* {
    box-sizing: border-box;
}

.body {
    font-family: Candara;
    font-size: 11px;
    background-color: #fcffff;
}

.is-hidden {
    display: none;
}

/* Replaces style="display:none" on #waitContainer (Index.cshtml). */
.ds-hidden {
    display: none;
}

/* ---------- logos (were inline style attributes) ---------- */

/* Index.cshtml welcome logo — was style="width:200px;height:100px;" */
.ds-logo-welcome {
    width: 200px;
    height: 100px;
}

/* Authenticated.cshtml pane logo — was style="width:180px;height:100px;" */
.ds-logo-pane {
    width: 180px;
    height: 100px;
}

/* ---------- search ---------- */

.searchbox {
    background-color: white;
    color: black;
    box-shadow: 0 2px 3px #D3D3D3;
    float: left;
    border: #D3D3D3;
    outline: #D3D3D3;
    cursor: pointer;
    padding: 5px 2px;
    font-size: 11px;
    border-radius: 12px;
}

.placeholder {
    background-color: white;
    color: black;
    float: left;
    border: #F5F5F5;
    outline: none;
    cursor: pointer;
    padding: 12px 11px;
    font-size: 11px;
    border-radius: 12px;
}

/* ---------- tabs ---------- */

.tablink {
    background-color: white;
    color: black;
    border: white;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 5px 5px;
    font-size: 11px;
    text-align: left;
    border-radius: 10px;
    width: 33.33%;
}

.tablink:hover {
    background-color: none;
    border: #F5F5F5;
    box-shadow: 0 4px 9px #D3D3D3;
    font-size: 11px;
    font-weight: bold;
}

.tabcontent {
    color: black;
    display: none;
    padding: 5px 5px;
    height: 100%;
}

#Templates {
    background-color: white;
}

#Clauses {
    background-color: white;
}

#Styles {
    background-color: white;
}

/* ---------- cards / grid ---------- */

.row {
    margin: 0 -5px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    width: 100%;
    margin-bottom: 20px;
}

.card {
    padding: 5px;
    text-align: justify;
    background-color: none;
    border: white;
    font-size: 9px;
}

/* ---------- accordions ----------
   .accordion1  = top-level catalogue group (Letters & Memos, Estates, …)
   .accordion   = leaf template/clause button
   .accordionS  = Styles-tab tool button
   .panel       = the collapsible region following an accordion button
*/

.accordion1 {
    width: 100%;
    background-color: white;
    color: black;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 10px;
    border: white;
    border-radius: 12px;
    transition: 0.4s;
    text-align: left;
}

.accordion {
    width: 180%;
    background-color: white;
    color: black;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 10px;
    border: white;
    border-radius: 12px;
    transition: 0.4s;
    text-align: left;
}

.accordionS {
    width: 100%;
    background-color: white;
    color: black;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 10px;
    border: #D3D3D3;
    border-radius: 12px;
    transition: 0.4s;
    text-align: left;
}

.active,
.accordion1:hover,
.accordion:hover,
.accordionS:hover {
    border-bottom: #DC143C solid;
    box-shadow: #D3D3D3;
    background-color: none;
    border-width: thin;
    font-weight: bold;
}

/* A catalogue entry whose backing file is not installed: rendered but inert, so
   the user sees the template exists while it cannot be inserted yet. */
.accordion.is-missing {
    color: #999;
    font-style: italic;
    cursor: not-allowed;
    opacity: 0.6;
}
.accordion.is-missing:hover {
    border-bottom: none;
    font-weight: normal;
}

/* The Styles tab declared overflow:auto and the other two overflow:hidden for the
   same .panel selector; the last declaration in source order won, so auto is the
   effective value. Preserved as-is. */
.panel {
    padding: 0 10px;
    display: none;
    background-color: white;
    overflow: auto;
}

/* ---------- results regions (were style="font-size:10px;color:#000;") ---------- */

.ds-results {
    font-size: 10px;
    color: #000;
}

/* Catalogue containers — were style="margin-top:30px" */
.ds-container-offset {
    margin-top: 30px;
}

/* ---------- contract review (3rd-party paper) results ---------- */
#ds-contract-results { font-size: 11px; line-height: 1.4; }
.ds-cr-empty, .ds-cr-muted { color: #666; font-style: italic; }
.ds-cr-head { margin-bottom: 4px; }
.ds-cr-summary {
    font-weight: bold;
    margin: 4px 0 8px;
    padding: 4px 6px;
    background: #f3f3f3;
    border-radius: 4px;
}
.ds-cr-section {
    font-weight: bold;
    margin: 10px 0 4px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 2px;
}
.ds-cr-risk {
    margin: 4px 0;
    padding: 5px 7px;
    border-left: 4px solid #ccc;
    border-radius: 3px;
    background: #fafafa;
}
.ds-cr-high   { border-left-color: #c0392b; background: #fdecea; }
.ds-cr-medium { border-left-color: #e67e22; background: #fef5ec; }
.ds-cr-low    { border-left-color: #b7950b; background: #fcf8e3; }
.ds-cr-sev {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 8px;
    color: #fff;
    margin-right: 4px;
    vertical-align: middle;
}
.ds-cr-high   .ds-cr-sev { background: #c0392b; }
.ds-cr-medium .ds-cr-sev { background: #e67e22; }
.ds-cr-low    .ds-cr-sev { background: #b7950b; }
.ds-cr-detail { color: #444; margin-top: 2px; }
.ds-cr-excerpt {
    color: #333;
    background: #f6f6f6;
    border-left: 2px solid #bbb;
    margin-top: 4px;
    padding: 3px 6px;
    font-style: italic;
}
.ds-cr-basis { margin-top: 4px; }
.ds-cr-basis summary { cursor: pointer; color: #0067b8; font-size: 10px; }
.ds-cr-basis ul { margin: 3px 0 0 14px; padding: 0; }
.ds-cr-basis li { color: #555; font-size: 10px; margin: 1px 0; }
.ds-cr-ok { color: #2e7d32; margin: 4px 0; }
.ds-cr-checklist { list-style: none; margin: 2px 0; padding-left: 0; }
.ds-cr-checklist li { margin: 2px 0; }
.ds-cr-mark { display: inline-block; width: 14px; font-weight: bold; }
.ds-cr-have .ds-cr-mark { color: #2e7d32; }
.ds-cr-miss .ds-cr-mark { color: #e67e22; }
.ds-cr-miss-core .ds-cr-mark { color: #c0392b; }
.ds-cr-miss-core { font-weight: bold; }
.ds-cr-imp { color: #888; font-weight: normal; font-size: 10px; }
.ds-cr-foot { color: #777; font-size: 10px; margin-top: 8px; font-style: italic; }

/* ---------- clause playbook chooser modal ---------- */
#ds-pb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.ds-pb-card {
    background: #fff;
    color: #000;
    border-radius: 8px;
    padding: 14px;
    width: 92%;
    max-width: 460px;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.ds-pb-title { font-weight: bold; font-size: 13px; margin-bottom: 6px; }
.ds-pb-approval {
    font-size: 11px;
    background: #fdecea;
    border-left: 4px solid #c0392b;
    padding: 5px 7px;
    border-radius: 3px;
    margin-bottom: 6px;
}
.ds-pb-imp { color: #888; font-weight: normal; }
.ds-pb-notes { font-size: 11px; color: #333; margin-bottom: 8px; }
.ds-pb-tier {
    border: 1px solid #e0e0e0;
    border-left-width: 4px;
    border-radius: 4px;
    padding: 7px;
    margin: 6px 0;
}
.ds-pb-ideal { border-left-color: #2e7d32; background: #f1f8f1; }
.ds-pb-acceptable { border-left-color: #e67e22; background: #fef5ec; }
.ds-pb-walkaway { border-left-color: #c0392b; background: #fdecea; }
.ds-pb-tier-head { margin-bottom: 3px; }
.ds-pb-tier-label { font-weight: bold; font-size: 11px; }
.ds-pb-tier-hint { color: #777; font-size: 10px; }
.ds-pb-tier-text { font-size: 11px; color: #222; white-space: pre-wrap; }
.ds-pb-insert { margin-top: 6px; cursor: pointer; }
.ds-pb-actions { text-align: right; margin-top: 8px; }

/* ---------- chips + buttons rendered by the linter modules ----------
   Were 5 duplicated element.style.cssText strings in definedTerms.js,
   crossRefs.js, numberWords.js (chip) and crossRefs.js, lint.js (button). */

.ds-chip {
    margin: 2px;
    padding: 2px 6px;
    border: 1px solid #D3D3D3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 10px;
}

.ds-btn {
    margin: 2px;
    padding: 3px 8px;
    border: 1px solid #DC143C;
    border-radius: 8px;
    background: #fff;
    color: #DC143C;
    cursor: pointer;
    font-size: 10px;
}

/* Status line inside the lint / cross-reference results. */
.ds-status {
    margin: 4px 0;
}

/* Grouping wrapper + label used by the chip lists. */
.ds-group {
    margin-top: 6px;
}

.ds-group-label {
    font-weight: bold;
}

.ds-tools {
    margin-top: 8px;
}

/* ---------- back-to-top ---------- */

#myBtn {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 25px;
    z-index: 99;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #DC143C;
    cursor: pointer;
    padding: 2px;
    border-radius: 30px;
}

/* Kept verbatim, including the display:none — it is inert, because scrollFunction()
   always sets an inline display on #myBtn and inline styles win over this rule. */
#myBtn:hover {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 25px;
    z-index: 99;
    font-size: 26px;
    border: none;
    outline: none;
    background-color: transparent;
    box-shadow: #DC143C;
    color: #DC143C;
    cursor: pointer;
    padding: 2px;
    border-radius: 30px;
}

#myBtnR {
    font-size: 12px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #DC143C;
}

#myBtnR:hover {
    font-size: 12px;
    border: none;
    outline: none;
    background-color: transparent;
    box-shadow: #DC143C;
    color: #DC143C;
    cursor: pointer;
    padding: 2px;
}

/* ---------- footer ---------- */

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    color: white;
    font-size: 9px;
    background-color: black;
}

/* ============================================================================
   Template preview modal — was injected by templateInsert.js injectStylesOnce()
   ============================================================================ */

#ds-preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.ds-preview-card {
    background: #fff;
    width: 92%;
    max-width: 520px;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    padding: 10px;
    font-size: 11px;
}

.ds-preview-title {
    font-weight: bold;
    margin-bottom: 6px;
    color: #000;
}

.ds-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 220px;
    border: 1px solid #D3D3D3;
    border-radius: 6px;
    background: #fff;
}

.ds-preview-controls {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #000;
}

.ds-preview-controls label {
    cursor: pointer;
}

.ds-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ds-preview-actions button {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #DC143C;
    background: #fff;
    color: #DC143C;
    cursor: pointer;
}

.ds-preview-actions button.ds-primary {
    background: #DC143C;
    color: #fff;
}

/* ============================================================================
   Firm setup modal — was injected by firmProfile.js injectStylesOnce()
   ============================================================================ */

#ds-firm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1001;
    align-items: center;
    justify-content: center;
}

.ds-firm-card {
    background: #fff;
    width: 92%;
    max-width: 520px;
    max-height: 92%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    padding: 14px;
    font-size: 11px;
    color: #000;
}

.ds-firm-title {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 8px;
    color: #000;
}

.ds-firm-sub {
    color: #555;
    margin-bottom: 10px;
}

.ds-firm-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.ds-firm-field label {
    font-weight: bold;
    margin-bottom: 3px;
}

.ds-firm-field input,
.ds-firm-field textarea,
.ds-firm-field select {
    border: 1px solid #D3D3D3;
    border-radius: 6px;
    padding: 5px;
    font-size: 11px;
    font-family: inherit;
}

.ds-firm-field textarea {
    min-height: 48px;
    resize: vertical;
}

/* Practice-type (edition) selector in the setup wizard. */
.ds-firm-edition .ds-edition-opts {
    display: flex;
    gap: 8px;
}

.ds-edition-opt {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border: 1px solid #D3D3D3;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-weight: normal;
}

.ds-edition-opt input {
    margin-top: 2px;
}

.ds-edition-opt small {
    color: #666;
    font-size: 10px;
}

.ds-edition-opt:hover {
    border-color: #0078d4;
}

.ds-firm-row {
    display: flex;
    gap: 8px;
}

.ds-firm-row .ds-firm-field {
    flex: 1;
}

.ds-firm-logo-prev {
    max-width: 140px;
    max-height: 70px;
    margin-top: 5px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: none;
}

.ds-firm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.ds-firm-actions button {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #DC143C;
    background: #fff;
    color: #DC143C;
    cursor: pointer;
}

.ds-firm-actions button.ds-primary {
    background: #DC143C;
    color: #fff;
}

/* ============================================================================
   Messages (notify.js)
   ----------------------------------------------------------------------------
   Replaces ~10 silent console.log-only failures and 3 blocking alert() calls.
   Every message pairs an icon with text, so state is never signalled by colour
   alone. Colours here are chosen to clear WCAG AA against their backgrounds.
   ============================================================================ */

#ds-toast-host {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100; /* above both modals (1000 / 1001) */
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 92%;
    max-width: 440px;
    pointer-events: none; /* don't block clicks on the pane behind */
}

#ds-toast-host .ds-msg {
    pointer-events: auto; /* ...but the toast itself stays clickable */
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.ds-msg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.ds-msg__icon {
    flex: 0 0 auto;
    font-weight: bold;
}

.ds-msg__text {
    flex: 1 1 auto;
}

.ds-msg__close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

/* 7.5:1 on the tint — comfortably AA */
.ds-msg--error {
    background: #FDE7E9;
    border-color: #B00020;
    color: #6E0014;
}

.ds-msg--success {
    background: #DFF6DD;
    border-color: #0B6A0B;
    color: #054B05;
}

.ds-msg--info {
    background: #EFF6FC;
    border-color: #0F548C;
    color: #0B3B63;
}

/* ============================================================================
   Copy protection
   ----------------------------------------------------------------------------
   Applied to the clause library and the template preview only — the content
   that is actually the product's IP. Deliberately NOT applied to results
   regions, error messages, or form inputs, which users need to be able to
   select, copy and type into.

   This is a deterrent, not a security control: it stops casual selection,
   right-click-copy and drag-out, but not DevTools or reading the network
   response. See FOLLOW-UPS.md — real protection has to be server-side.
   ============================================================================ */

.ds-protected,
.ds-protected * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Inputs stay usable even inside a protected subtree. */
.ds-protected input,
.ds-protected textarea,
.ds-protected select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}