/* ---------------------------------------------------------------------------
   Public agreement viewer - /Public/Agreements

   Self-contained: the view is Layout = null and loads no theme, so everything
   this page needs is here. Kept deliberately plain - it is a legal document
   reader handed to customers, and the body it renders is staff-authored HTML
   from CKEditor, so the rules under .ag-body have to be forgiving of whatever
   markup and inline styles that editor produced.
--------------------------------------------------------------------------- */

:root {
    --ag-bg: #f4f6f8;
    --ag-surface: #ffffff;
    --ag-ink: #1f2933;
    --ag-ink-soft: #52606d;
    --ag-muted: #68737d;          /* legibility floor on --ag-surface */
    --ag-line: #dfe3e8;
    --ag-line-soft: #eceff2;
    --ag-brand: #0b6bcb;
    --ag-brand-dark: #08529c;
    --ag-brand-wash: #eaf2fc;
    --ag-focus: #0b6bcb;
    --ag-radius: 6px;
    --ag-sidebar-w: 300px;
    --ag-topbar-h: 56px;
    --ag-serif: Georgia, "Times New Roman", Times, serif;
    --ag-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* THE READING FACE. There is no standard typeface for legal documents - contracts
       are set in Times New Roman because it was the Word default, not because anyone
       chose it. The deciding factor here was numerals: Georgia uses OLD-STYLE figures,
       so in a document carrying 92 clause numbers the "1.1" of every clause is drawn
       at varying heights with descenders, which is exactly the wrong behaviour for
       the one element a reader scans for. The system sans has lining figures, holds up
       better at 16px on a screen, and is what modern legal pages use.

       Switch this one line back to var(--ag-serif) to return to the book look; the
       lining-figure rule below then does the same job less well. Whatever this becomes,
       the CRM editor's preview must match it - see .lgl-preview. */
    --ag-body-font: var(--ag-sans);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--ag-bg);
    color: var(--ag-ink);
    font-family: var(--ag-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ag-brand); }

:focus-visible {
    outline: 2px solid var(--ag-focus);
    outline-offset: 2px;
}

.ag-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ag-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--ag-surface);
    border: 1px solid var(--ag-brand);
    border-radius: 0 0 var(--ag-radius) 0;
    text-decoration: none;
}

.ag-skip:focus { left: 0; }

/* --- Topbar -------------------------------------------------------------- */

.ag-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: var(--ag-topbar-h);
    background: var(--ag-surface);
    border-bottom: 1px solid var(--ag-line);
}

.ag-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    padding: 0 20px;
}

.ag-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Height-constrained with width:auto so the intrinsic width/height attributes on the
   tag still reserve the right box and the topbar does not jump as the image lands. */
.ag-brand-logo {
    height: 24px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}

.ag-brand-divider {
    width: 1px;
    height: 20px;
    background: var(--ag-line);
    flex: 0 0 auto;
}

.ag-brand-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ag-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;     /* the controls keep their size; the brand gives way first */
}

.ag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--ag-ink-soft);
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    cursor: pointer;
    white-space: nowrap;
}

.ag-btn:hover {
    border-color: var(--ag-brand);
    color: var(--ag-brand-dark);
}

.ag-btn[hidden] { display: none; }

.ag-btn-glyph { font-size: 13px; line-height: 1; }

.ag-btn-menu { display: none; }

/* --- Shell --------------------------------------------------------------- */

.ag-shell {
    display: flex;
    align-items: flex-start;
    padding-top: var(--ag-topbar-h);
    min-height: 100%;
}

.ag-scrim {
    display: none;
    position: fixed;
    inset: var(--ag-topbar-h) 0 0 0;
    background: rgba(31, 41, 51, 0.4);
    z-index: 19;
}

/* --- Sidebar ------------------------------------------------------------- */

.ag-sidebar {
    position: fixed;
    top: var(--ag-topbar-h);
    bottom: 0;
    left: 0;
    width: var(--ag-sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--ag-surface);
    border-right: 1px solid var(--ag-line);
    z-index: 20;
}

.ag-search {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ag-line-soft);
}

.ag-search-input {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--ag-ink);
    background: var(--ag-bg);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

.ag-search-input::placeholder { color: var(--ag-muted); }

.ag-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0 24px;
}

.ag-nav-loading,
.ag-nav-empty {
    margin: 16px;
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-group { margin: 4px 0 14px; }

.ag-group-head {
    padding: 8px 16px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ag-muted);
}

.ag-group-blurb {
    padding: 0 16px 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ag-muted);
}

.ag-item {
    display: block;
    padding: 8px 16px 8px 24px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ag-ink-soft);
    text-decoration: none;
    border-left: 3px solid transparent;
    word-break: break-word;
    transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.ag-item:hover {
    background: var(--ag-line-soft);
    color: var(--ag-ink);
}

.ag-item.is-current {
    background: var(--ag-brand-wash);
    border-left-color: var(--ag-brand);
    color: var(--ag-brand-dark);
    font-weight: 600;
}

.ag-group-empty {
    padding: 4px 16px 8px 24px;
    font-size: 12px;
    font-style: italic;
    color: var(--ag-muted);
}

/* --- Main ---------------------------------------------------------------- */

.ag-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-left: var(--ag-sidebar-w);
    padding: 32px 40px 96px;
}

.ag-doc {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 820px;
    padding: 48px 56px 64px;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: 10px;
    /* A single soft shadow lifts the page off the ground without becoming a card
       with a drop-shadow look. */
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.04), 0 8px 24px rgba(31, 41, 51, 0.05);
}

.ag-doc:focus { outline: none; }

.ag-placeholder,
.ag-message {
    margin: 0;
    color: var(--ag-muted);
}

.ag-message-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--ag-ink);
}

/* --- document header ----------------------------------------------------- */

.ag-doc-head {
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ag-line-soft);
}

.ag-doc-kind {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ag-brand);
}

/* The one place the serif is kept: a display title over sans body text is a settled
   pairing and gives the page the weight a legal document should carry. Lining figures
   because Georgia would otherwise set a version number in old-style digits. */
.ag-doc-title {
    margin: 0 0 16px;
    font-family: var(--ag-serif);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ag-ink);
    font-variant-numeric: lining-nums;
}

.ag-doc-meta {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ag-muted);
}

.ag-doc-fact { white-space: nowrap; }

.ag-doc-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font: inherit;
    font-size: 12.5px;
    color: var(--ag-ink-soft);
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.ag-doc-copy:hover {
    color: var(--ag-brand-dark);
    border-color: var(--ag-brand);
    background: var(--ag-brand-wash);
}

/* Revealed only when both clipboard routes have failed - see selectPermalink. */
.ag-permalink-row {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ag-muted);
    word-break: break-all;
}

.ag-permalink-row[hidden] { display: none; }

.ag-permalink-label { font-weight: 600; }

/* --- The agreement body -------------------------------------------------- */

.ag-body {
    /* ~70 characters at this size. Long legal paragraphs are the hardest thing to keep
       your place in, and measure does more for that than anything else on this page. */
    max-width: 70ch;
    font-family: var(--ag-body-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ag-ink);
    /* Belt and braces: if this ever goes back to a serif with old-style figures, the
       clause numbers still line up rather than bouncing. */
    font-variant-numeric: lining-nums tabular-nums;
}

/* A numbered clause hangs its number in the gutter - see hangClauseNumbers, which
   sets the width per paragraph because "1.1 " and "10.11.2 " are not the same size.
   Tabular figures matter here: they make every gutter the same width. */
.ag-body p.ag-clause {
    font-variant-numeric: lining-nums tabular-nums;
}

.ag-body h1, .ag-body h2, .ag-body h3, .ag-body h4, .ag-body h5, .ag-body h6 {
    position: relative;
    font-family: var(--ag-sans);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ag-ink);
    /* Clears the fixed topbar when a clause link jumps here. */
    scroll-margin-top: calc(var(--ag-topbar-h) + 20px);
}

/* Generous space ABOVE a heading and tight space below it, so a clause reads as one
   block rather than as a line floating between two equal gaps. */
.ag-body h1 { font-size: 25px; margin: 44px 0 14px; }
.ag-body h2 { font-size: 20px; margin: 40px 0 12px; }
.ag-body h3 { font-size: 17px; margin: 30px 0 10px; }
.ag-body h4, .ag-body h5, .ag-body h6 { font-size: 15.5px; margin: 24px 0 8px; }

/* A hairline under the top-level clause headings gives a long agreement a spine. */
.ag-body h1,
.ag-body h2 {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ag-line-soft);
}

.ag-body > :first-child { margin-top: 0; }

/* A paragraph that opens with a bold lead-in and is acting as a section heading -
   see findHeadingNodes in agreements.js. It stays a paragraph and keeps its look;
   all it gains is somewhere to hang the anchor and a scroll offset that clears the
   fixed topbar. */
.ag-body p.ag-pseudo-h {
    position: relative;
    scroll-margin-top: calc(var(--ag-topbar-h) + 16px);
}

.ag-body p { margin: 0 0 18px; }
.ag-body ul, .ag-body ol { margin: 0 0 18px; padding-left: 28px; }
.ag-body li { margin-bottom: 8px; }
.ag-body li:last-child { margin-bottom: 0; }
.ag-body li::marker { color: var(--ag-muted); }

.ag-body a { color: var(--ag-brand); word-break: break-word; }

.ag-body img {
    max-width: 100%;
    height: auto;
}

.ag-body table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-family: var(--ag-sans);
    font-size: 14px;
}

.ag-body th, .ag-body td {
    padding: 8px 10px;
    border: 1px solid var(--ag-line);
    text-align: left;
    vertical-align: top;
}

.ag-body th { background: var(--ag-line-soft); }

/* CKEditor bodies routinely contain a wide table or a fixed-width block. Let it
   scroll inside its own box rather than pushing the page sideways. */
.ag-table-scroll {
    overflow-x: auto;
    margin: 0 0 20px;
}

.ag-table-scroll > table { margin-bottom: 0; }

.ag-body pre {
    padding: 12px 14px;
    overflow-x: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    background: var(--ag-bg);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

/* A body with no markup at all - see agreementContent.Prepare. */
.ag-plain { white-space: pre-wrap; }

/* --- markdown constructs the old rich text never produced ---------------- */

.ag-body blockquote {
    margin: 0 0 20px;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--ag-line);
    color: var(--ag-ink-soft);
}

.ag-body blockquote > :last-child { margin-bottom: 0; }

.ag-body hr {
    height: 0;
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--ag-line);
}

.ag-body code {
    padding: 2px 5px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.88em;
    background: var(--ag-line-soft);
    border-radius: 3px;
}

.ag-body pre > code {
    padding: 0;
    background: none;
    border-radius: 0;
}

/* Markdown nests lists by indentation, so an agreement written as 1. / a. / i.
   arrives several levels deep. Give each level its own marker so the structure
   survives - a clause numbered "1." inside a clause numbered "1." is unreadable. */
.ag-body ol { list-style: decimal; }
.ag-body ol ol { list-style: lower-alpha; }
.ag-body ol ol ol { list-style: lower-roman; }
.ag-body ul { list-style: disc; }
.ag-body ul ul { list-style: circle; }
.ag-body ul ul ul { list-style: square; }

.ag-body li > ul,
.ag-body li > ol { margin: 6px 0 0; }

.ag-body li > p { margin-bottom: 8px; }

.ag-body em { font-style: italic; }
.ag-body strong { font-weight: 700; }

/* --- Heading anchors ----------------------------------------------------- */

.ag-anchor {
    position: absolute;
    left: -22px;
    top: 0;
    width: 22px;
    font-family: var(--ag-sans);
    font-size: 14px;
    line-height: inherit;
    color: var(--ag-muted);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.ag-body h1:hover .ag-anchor,
.ag-body h2:hover .ag-anchor,
.ag-body h3:hover .ag-anchor,
.ag-body h4:hover .ag-anchor,
.ag-body p.ag-pseudo-h:hover .ag-anchor,
.ag-anchor:focus {
    opacity: 1;
}

@keyframes ag-flash {
    from { background: #fff3cd; }
    to   { background: transparent; }
}

.ag-target { animation: ag-flash 1.6s ease-out 1; }

/* --- On this page -------------------------------------------------------- */

.ag-toc {
    position: sticky;
    top: calc(var(--ag-topbar-h) + 32px);
    flex: 0 0 220px;
    width: 220px;
    max-height: calc(100vh - var(--ag-topbar-h) - 64px);
    overflow-y: auto;
    font-size: 13px;
}

.ag-toc[hidden] { display: none; }

.ag-toc-head {
    margin: 0 0 8px;
    padding-left: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ag-muted);
}

.ag-toc-link {
    display: block;
    padding: 4px 0 4px 12px;
    color: var(--ag-ink-soft);
    text-decoration: none;
    border-left: 2px solid var(--ag-line);
    line-height: 1.4;
}

.ag-toc-link:hover { color: var(--ag-brand-dark); }

.ag-toc-link.is-current {
    color: var(--ag-brand-dark);
    border-left-color: var(--ag-brand);
    font-weight: 600;
}

.ag-toc-link.lvl-3 { padding-left: 24px; }
.ag-toc-link.lvl-4 { padding-left: 36px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
    .ag-toc { display: none; }
    .ag-main { padding-right: 32px; }
}

@media (max-width: 900px) {
    .ag-btn-menu { display: inline-flex; }

    .ag-sidebar {
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        box-shadow: 0 0 24px rgba(31, 41, 51, 0.18);
        width: 86%;
        max-width: var(--ag-sidebar-w);
    }

    body.ag-nav-open .ag-sidebar { transform: translateX(0); }
    body.ag-nav-open .ag-scrim { display: block; }

    .ag-main {
        margin-left: 0;
        padding: 20px 16px 64px;
    }

    .ag-doc { padding: 28px 22px 40px; }
    .ag-doc-title { font-size: 24px; }
    .ag-brand-title { display: none; }
    .ag-anchor { display: none; }
}

/* Below this the bar cannot hold everything. The LOGO stays - this is a public
   legal document and it should say who it is from at any width - so the control
   that goes is Print, which is the least likely thing anyone does on a phone and
   is still in the browser's own menu. That leaves logo + Copy link + Agreements,
   which fits 375px with room to spare. The wordmark alone carries the branding,
   so the divider and the section title go with it. */
@media (max-width: 640px) {
    .ag-brand-divider,
    .ag-brand-title { display: none; }

    #ag-print { display: none !important; }

    .ag-topbar-inner { padding: 0 12px; }
    .ag-brand-logo { height: 21px; }
    .ag-btn { padding: 7px 10px; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
    .ag-sidebar,
    .ag-toc,
    .ag-scrim,
    .ag-skip,
    .ag-anchor,
    .ag-doc-copy,
    .ag-permalink-row { display: none !important; }

    body { background: #ffffff; }

    /* The topbar stays, unpinned, so a printed agreement carries the Kuusoft mark at
       the top of page one - a legal document handed over on paper should say who it
       is from without depending on the browser's header. */
    .ag-topbar {
        position: static;
        height: auto;
        margin-bottom: 20px;
        border-bottom: 1px solid #cccccc;
    }

    .ag-topbar-actions { display: none !important; }
    .ag-topbar-inner { padding: 0 0 12px; }
    .ag-brand-logo { height: 26px; }
    .ag-brand-title { display: inline; }

    .ag-shell { display: block; padding-top: 0; }

    .ag-main {
        display: block;
        margin: 0;
        padding: 0;
    }

    .ag-doc {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ag-body { max-width: none; }

    .ag-body { font-size: 11pt; line-height: 1.5; }

    .ag-body h1, .ag-body h2, .ag-body h3, .ag-body h4 {
        page-break-after: avoid;
    }

    .ag-body table, .ag-body img, .ag-body pre { page-break-inside: avoid; }
}