/* Help (dj_new ctrl/help/): standalone page and F1 modal.
   Also copies of the site elements shown in the text (table buttons, menu items, match card),
   because the page under the modal does not always load main_table.css / scores.css.
   After editing bump the version in help_page.html and _modal_body.html (help.css?v=N). */

/* ===== Quick color restyle: help ===== */
.help-content {
    --help-text-color:   #212529;
    --help-h1-color:     #2c3e50;
    --help-h2-color:     #2980b9;
    --help-line-color:   #3498db;
    --help-panel-bg:     var(--clay-light-hex);   /* standalone page background */
    --help-toc-bg:       var(--steel-light-hex);
    --help-toc-link:     #2c3e50;
    --help-toc-hover:    var(--steel-hex);
    --help-note-bg:      rgba(255, 255, 255, 0.45);
    --help-note-border:  var(--steel-hex);
}
/* ===================================== */

.help-content {
    position: relative;               /* anchors are measured from here (modal scrolling) */
    color: var(--help-text-color);
    line-height: 1.6;
    font-family: Arial, sans-serif;
}

/* Standalone page: light panel on the clay background */
.help-page {
    background-color: var(--help-panel-bg);
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 1rem auto;
    max-width: 1320px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .45);
}
html:has(.help-page) {
    scroll-padding-top: calc(var(--navbar-height, 56px) + 16px);
    scroll-behavior: smooth;
}

.help-content h2 {
    color: var(--help-h2-color);
    font-size: 1.5rem;
    margin-top: 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--help-line-color);
}
.help-content .section:first-child h2 { margin-top: 0; border-top: 0; }
.help-content h3 {
    color: var(--help-h2-color);
    font-size: 1.15rem;
    margin-top: 1rem;
    padding-top: 0.25rem;
}
.help-content h4 {
    color: var(--help-h2-color);
    font-size: 1rem;
    margin-top: 0.75rem;
}
.help-content .section { margin-bottom: 1.5rem; }

/* ----- Table of contents ----- */
.help-toc {
    background-color: var(--help-toc-bg);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}
.help-toc h4 { margin: 0.5rem 0 0.25rem; }
.help-toc ul { list-style: none; padding: 0; margin: 0; }
.help-toc li { margin-top: 2px; }
.help-toc .li-sub { margin-left: 1.1rem; font-size: 0.9em; }
.help-toc a { color: var(--help-toc-link); font-weight: bold; text-decoration: none; }
.help-toc .li-sub a { font-weight: normal; }
.help-toc a:hover { color: var(--help-toc-hover); text-decoration: underline; }

/* Desktop: TOC column stays in view while the text scrolls */
.help-toc-sticky {
    position: sticky;
    top: 0;                                        /* modal: top of the modal body */
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
}
.help-page .help-toc-sticky {
    top: calc(var(--navbar-height, 56px) + 16px);  /* page: below the fixed navbar */
    max-height: calc(100vh - var(--navbar-height, 56px) - 32px);
}

/* Phones / tablets: TOC folded above the text */
.help-toc-fold {
    background-color: var(--help-toc-bg);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.help-toc-fold > summary {
    padding: 0.4rem 1rem;
    font-weight: bold;
    color: var(--help-toc-link);
    cursor: pointer;
}
.help-toc-fold .help-toc { padding-top: 0; }

/* ----- Back to top ----- */
.help-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
}
.modal .help-top-btn { right: 40px; bottom: 80px; z-index: 1051; }
.help-top-btn .btn { border-radius: 50px; padding: 8px 14px; }

/* ----- Notes ----- */
.help-content .help-note {
    background: var(--help-note-bg);
    border-left: 4px solid var(--help-note-border);
    border-radius: 0.25rem;
    padding: 0.35rem 0.75rem;
    margin: 0.5rem 0;
}
.help-content .help-note.warn { border-left-color: var(--clay-hex); }
.help-content dl.help-fields { margin: 0.25rem 0 0.5rem; }
.help-content dl.help-fields dt { float: left; clear: left; margin-right: 0.4rem; }
.help-content dl.help-fields dd { margin: 0 0 0.15rem; }

/* ===== Site elements shown in the text: look only, not clickable ===== */
.help-content .help-btn {
    pointer-events: none;
    vertical-align: baseline;
    box-shadow: none;   /* on the pages these buttons are inside frames: no base.css shadow */
}
.help-content .btn.help-btn { padding: 0.1rem 0.45rem; font-size: 0.85rem; }

/* Menu item: as in the navbar / drop-down menu */
.help-content .help-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.5rem;
    border-radius: 0.35rem;
    background-color: var(--steel-hex);
    color: var(--clay-light-hex);
    white-space: nowrap;
    font-size: 0.95em;
}
.help-content .help-nav .dice-icon { width: 1.1rem; height: 1.1rem; margin: 0; }
.help-content .help-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border-radius: 0.35rem;
    background-color: var(--steel-hex);
    color: var(--clay-light-hex);
    font-size: 1.1em;
}

/* Frame title: as .frame-header on the pages */
.help-content .help-frame {
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--marron-hex);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.95em;
}

/* Table cell buttons / links: copy of .main-table .tbl-btn, .tbl-btn-sm, .tbl-link */
.help-content .tbl-btn {
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
    padding: 0.1rem 0.45rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    color: var(--steel-hex);
    background-color: var(--clay-light-hex);
    border: 1px solid var(--steel-hex);
    pointer-events: none;
}
.help-content .tbl-btn-sm { padding: 2px 4px; font-size: 0.75rem; line-height: 1.5; }
.help-content .tbl-link { color: var(--steel-hex); text-decoration: underline; }

/* Player page header buttons: copy of .btn-player */
.help-content .help-btn-player {
    display: inline-block;
    padding: 0 5px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #c19464;
    background-color: #f0d7be;
    color: #1a1a1a;
    white-space: nowrap;
}

/* Form field caption */
.help-content .help-field {
    display: inline-block;
    padding: 0 0.4rem;
    border-radius: 0.35rem;
    border: 1px solid var(--steel-hex);
    background-color: var(--steel-light-hex);
    color: #000;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Match card of a draw: copy of the score pages card (scores.css) */
.help-content .help-match {
    display: inline-block;
    min-width: 13rem;
    background-color: #fff;
    color: #212529;
    border: 1px solid var(--steel-hex);
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.8rem;
    vertical-align: middle;
}
.help-content .help-match .line { display: flex; min-height: 1.6rem; }
.help-content .help-match .line + .line { border-top: 1px solid var(--steel-hex); }
.help-content .help-match .line.won { color: #000; font-weight: 700; }
.help-content .help-match .line.bye .name { color: #999; font-style: italic; }
.help-content .help-match .src,
.help-content .help-match .games {
    flex: 0 0 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clay-light-hex);
}
.help-content .help-match .src { border-right: 1px solid var(--steel-hex); font-weight: 400; }
.help-content .help-match .games { border-left: 1px solid var(--steel-hex); font-weight: 600; }
.help-content .help-match .name { flex: 1 1 auto; padding: 0.15rem 0.4rem; align-self: center; }

/* Small cross table sample (score cells) */
.help-content .help-cell {
    display: inline-block;
    min-width: 2.6rem;
    padding: 0 0.3rem;
    text-align: center;
    border: 1px solid var(--steel-hex);
    background-color: #fff;
    font-size: 0.85em;
}
.help-content .help-cell.mirror { background-color: #e9ecef; color: #777; }
.help-content .help-cell.self { background-color: #212529; }
.help-content .help-cell.none { color: #999; }

@media (max-width: 991.98px) {
    .help-page { padding: 0.75rem; margin: 0.5rem; }
    .help-content h2 { font-size: 1.3rem; }
    .modal .help-top-btn { right: 20px; bottom: 70px; }
}