/*------------------------------------------------------------*/
/* Style format                                               */
/*
.class {
    Properties are listed alphabetically.
    Nested rules follow the properties, also alphabetically.
}

Rules are grouped under alphabetical letter headers, and are
alphabetical within each group.
No hardcoded colors — always use a var(--Name) from :root.
*/

/*
Naming Convention:
- PluginName_Page(optional)_Name_functionName              — JS functions (cnci_book_reader_open)
- #pluginName-Page(optional)_Name-element-id               — element IDs (cnci-book-reader-iframe-id)
- .pluginName-Page(optional)_Name-element-cs               — CSS classes (cnci-book-reader-title-cs)
- data-Name-Page(optional)_Attribute                       — data attributes on HTML elements (data-group)
*/

/*------------------------------------------------------------*/
/* Variables                                                  */
/*------------------------------------------------------------*/
:root {
    --BtnPrimary:   #e02020;
    --BtnRename:    #2684e2;
    --BtnSecondary: #185FA5;
    --Disabled:     #b8b9b9;
    --Error:        #e02020;
    --EventContent: #b8b9b9;
    --EventHover:   #c2d9f0;
    --EventNormal:  #ffffff;
    --EventSection: #e02020;
    --Form:         #e6e6e6;
    --Glow:         #2684e2;
    --Highlight:    #ef9f27;
    --Hover:        #042c53;
    --Main:         #185FA5;
    --Overlay:      rgba(0,0,0,0.5);
    --OverlayLight: rgba(255,255,255,0.15);
    --RowEven:      #d4d5d5;
    --RowHover:     #c2d9f0;
    --RowOdd:       #e6e6e6;
    --Section:      #b8b9b9;
    --SetupHeader:  #042c53;
    --Shadow:       rgba(0,0,0,0.5);
    --SnackBar:     #000000;
    --SubSection:   #c8c8c8;
    --subheader:    #436175;
    --Success:      #185FA5;
    --TableHeader:  #185FA5;
    --TableNormal:  #e6e6e6;
    --Text:         #ffffff;
    --TextDark:     #000000;
    --TextMuted:    #666666;
    --Viewer:       #525659;
    --TextArea:     #ffffff;
}

/*------------------------------------------------------------*/
/* Base — Elements                                          */
/*------------------------------------------------------------*/
.button:disabled,
.cnci-book-btn-func-cs:disabled,
.cnci-book-input-cs:disabled,
.cnci-book-json-textarea-cs:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/*------------------------------------------------------------*/
/* A                                                          */
/*------------------------------------------------------------*/
.cnci-book-access-label-cs {
    font-size: small;
    opacity: 0.8;
}
.cnci-book-assigned-cs {
    color: var(--Success);
}
.cnci-book-access-check-cs{
    height: 20px;
    width: 20px;
}

/*------------------------------------------------------------*/
/* B                                                          */
/*------------------------------------------------------------*/
/* The 180px is what centres the reader title between this and the page count,
   so it stays — but as a fixed basis the flex algorithm may not shave. */
.cnci-book-back-btn-cs {
    text-align: left;
    color: var(--Text);
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
    width: 180px;
    &:hover {
    color: var(--Highlight);
    font-weight: 700;
    text-shadow: var(--Shadow);
    }
    /* The touch half of "for touch device". This anchor is the only way off the
       reader page and it is a bare line of inline text — 19px tall, under even
       the 24px WCAG floor and well under the 44px Apple asks for. An
       inline-flex box gives it a 44px target without moving the text.

       Gated on pointer: coarse rather than on width, for the same reason the
       navigation menu was: a 13" laptop and an iPad Air are the same number of
       pixels wide and want opposite answers. A mouse keeps the compact bar; a
       finger gets the taller one. */
    @media (pointer: coarse) {
        align-items: center;
        display: inline-flex;
        min-height: 44px;
    }
    @media (max-width: 560px) {
        flex: 1 1 auto;
        width: auto;
    }
}
/* The controls beside a bar heading keep their natural size, so the heading is
   the only thing in the bar that gives way. align-items and the gap are what
   stop the status span and the Sync button from touching each other once the
   heading stops claiming the whole width. */
.cnci-book-btn-ctrlplane-cs{
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    width: auto;
}
.cnci-book-btn-delete-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}
.cnci-book-btn-edit-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}
.cnci-book-btn-func-cs {
    background: var(--TableHeader);
    border: none;
    border-radius: 4px;
    border-width: 0px;
    color: var(--Text);
    cursor: pointer;
    padding: 6px 12px;
    width: 150px;
    &:hover {
        color: var(--Highlight);
        font-weight: 500;
    }
}

/*------------------------------------------------------------*/
/* C                                                          */
/*------------------------------------------------------------*/
/* The reference book cards were removed — reference books are rows now, see
   the .cnci-book-ref-* block under R. */
.cnci-book-category-btn-edit-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
    }
}
.cnci-book-category-cs {
    background-color: var(--Form);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 30px;
}
.cnci-book-category-main-div-cs {
    margin-bottom: 5px;
    overflow-x: auto;
    width: 100%;
}
.cnci-book-category-title-cs {
    background-color: var(--TableHeader);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: var(--Text);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 5px;
}
.cnci-book-code-cs {
    font-size: small;
}
.cnci-book-col-flex-cs {
    min-width: 200px;
    text-align: left;
    width: 100%;
}
.cnci-book-col-large-cs {
    min-width: 200px;
    text-align: left;
    width: 400px;
}
.cnci-book-col-medium-cs {
    min-width: 200px;
    text-align: left;
    width: 300px;
}
.cnci-book-col-mini-cs {
    width: 75px;
}
.cnci-book-col-small-cs {
    min-width: 100px;
    text-align: left;
    width: 120px;
}
.cnci-book-coming-soon-cs {
    color: var(--TextMuted);
    padding: 40px;
    text-align: center;
    & h2 {
        color: var(--TextDark);
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0 0 8px;
    }
    & p {
        font-size: 1rem;
        margin: 0;
    }
}
.cnci-book-coming-soon-icon-cs {
    font-size: 3rem;
    margin-bottom: 10px;
}
.cnci-book-config-section-cs,
.cnci-book-setup-section-cs {
    border: 1px solid var(--Form);
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}
.cnci-book-config-section-body-cs,
.cnci-book-setup-section-body-cs {
    background-color: var(--Form);
    padding: 15px;
    padding-left: 2px;
    padding-right: 2px;
}
.cnci-book-configuration-wrapper-cs,
.cnci-book-setup-wrapper-cs {
    padding: 10px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* D                                                          */
/*------------------------------------------------------------*/
.cnci-book-denied-cs {
    background-color: var(--Form);
    border-left: 5px solid var(--Error);
    border-radius: 5px;
    margin: 20px auto;
    max-width: 500px;
    padding: 20px;
}

.cnci-book-denied-text-cs {
    color: var(--TextDark);
    font-size: large;
    margin: 0;
}

.cnci-book-drive-actions-cs {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/*------------------------------------------------------------*/
/* F                                                          */
/*------------------------------------------------------------*/
.cnci-book-filter-list-cs {
    border: 1px solid var(--SubSection);
    border-radius: 4px;
    border-width: 0px;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px;
    & label {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: 8px;
        padding: 5px;
    }
}
.cnci-book-folder-row-cs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    & input[type="text"] {
        border: 1px solid var(--SubSection);
        border-radius: 4px;
        box-sizing: border-box;
        flex: 1;
        font-family: inherit;
        font-size: 0.9rem;
        min-width: 200px;
        padding: 0.55rem 0.75rem;
        transition: border-color 0.15s;
        /* The anti-zoom floor. This row's own 0.9rem outranks the floor on
           .cnci-book-input-cs below, so the floor is repeated at the winner. */
        @media (max-width: 560px) {
            font-size: 16px;
        }
    }
    & input[type="text"]:focus {
        border: 1px solid var(--Disabled);
        outline: none;
    }
}
.cnci-book-form-row-cs {
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

/*------------------------------------------------------------*/
/* H                                                          */
/*------------------------------------------------------------*/
/* display was flex, and that is why "Book Section" broke across two lines
   inside a bar declared 40px tall: text inside a flex container is an anonymous
   flex item, so text-overflow has nothing to act on and an ellipsis was
   impossible. Every one of the eight elements carrying this class holds a
   single run of text and nothing else, so the flex was never doing any work —
   align-items and justify-content went with it because a block box ignores
   both. The full heading is on each element's title attribute for a hover.

   width: 100% is also gone. The h4 modal headings are the only ones that
   needed it and they are block-level now, which fills the line by itself; the
   h3 bar headings sat next to the Sync control asking for the whole bar, so
   the control had to take its space back by squeezing them. The width they get
   inside a bar is set below, under T. */
.cnci-book-header-cs {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: block;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Pre-existing duplicate — this second block has always been here and only
   sets a colour. Left as found; the layout properties are in the block above. */
.cnci-book-header-cs {
    color: var(--Text);
}
.cnci-book-hidden-cs {
    display: none;
}
.cnci-book-horizontalrule-cs {
    box-sizing: 2px;
    height: 2px;
    margin-bottom: 1px;
    margin-top: 1px;
}
.cnci-book-hr-cs {
    border: none;
    border-top: 1px solid var(--Form);
    margin: 0;
}

/*------------------------------------------------------------*/
/* I                                                          */
/*------------------------------------------------------------*/
.cnci-book-input-cs {
    border: 1px solid var(--SubSection);
    border-radius: 4px;
    flex: 1;
    height: 30px;
    padding: 6px 10px;
    /* 16px is the size below which iPhone Safari zooms the page into a tapped
       input. The fixed 30px height goes with it here — 16px text plus this
       padding needs 31 — so the box grows to its content on phones only. */
    @media (max-width: 560px) {
        font-size: 16px;
        height: auto;
    }
}

/*------------------------------------------------------------*/
/* J                                                          */
/*------------------------------------------------------------*/
.cnci-book-json-textarea-cs {
    background: var(--TextArea);
    border: 1px solid var(--SubSection);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--TextDark);
    font-family: monospace;
    font-size: small;
    line-height: 1.5;
    padding: 8px;
    resize: vertical;
    transition: border-color 0.15s;
    width: 100%;
    &:focus {
        background: var(--Text);
        border-color: var(--Main);
        outline: none;
    }
    /* The anti-zoom floor — see .cnci-book-input-cs. */
    @media (max-width: 560px) {
        font-size: 16px;
    }
}

/*------------------------------------------------------------*/
/* L                                                          */
/*------------------------------------------------------------*/
.cnci-book-label-cs {
    color: var(--TextMuted);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.cnci-book-label-hint-cs {
    color: var(--TextMuted);
    display: block;
    font-size: small;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 3px;
    text-transform: none;
}

/*------------------------------------------------------------*/
/* M                                                          */
/*------------------------------------------------------------*/
.cnci-book-modal-body-cs {
    background-color: var(--Form);
    max-height: 400px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.cnci-book-modal-btn-save-cs {
    background: var(--TableHeader);
    border: none;
    border-radius: 4px;
    border-width: 0px;
    color: var(--Text);
    cursor: pointer;
    padding: 8px 20px;
}
.cnci-book-modal-close-cs {
    background-color: transparent;
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    font-weight: 500;
    height: 30px;
    width: 30px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        margin-bottom: 2px;
    }
}
.cnci-book-modal-content-cs {
    background-color: var(--Form);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;
    width: 450px;
}
.cnci-book-modal-footer-cs {
    padding: 10px 15px;
    text-align: right;
}
.cnci-book-modal-header-cs {
    align-items: center;
    background: var(--TableHeader);
    border-radius: 8px 8px 0 0;
    color: var(--Text);
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    & h4 {
        color: inherit;
        margin: 0;
    }
}
.cnci-book-modal-header-danger-cs {
    background: var(--Error);
}
.cnci-book-modal-label-cs {
    display: block;
    font-size: small;
    font-weight: 600;
    margin-top: 10px;
}
.cnci-book-modal-wrapper-cs {
    align-items: center;
    background-color: var(--Overlay);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 450px;
    width: 100%;
    z-index: 9999;
}
.cnci-book-modal-wrapper-cs.cnci-book-modal-show-cs {
    display: flex;
}

/*------------------------------------------------------------*/
/* N                                                          */
/*------------------------------------------------------------*/
.cnci-book-notassigned-cs {
    color: var(--Error);
}

/*------------------------------------------------------------*/
/* R                                                          */
/*------------------------------------------------------------*/
.cnci-book-reader-header-cs {
    align-items: center;
    background: var(--TableHeader);
    border-radius: 5px;
    color: var(--Text);
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    padding: 10px 15px;
    /* Wrapping is enabled only here. Above 560 all three parts must stay on one
       line, and a header that may wrap is exactly how the first draft went
       wrong on the iPad — the title claimed a row to itself and made the bar
       taller than it was before the fix. */
    @media (max-width: 560px) {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 8px 12px;
    }
}
.cnci-book-reader-iframe-cs {
    border: none;
    height: 85vh;
    width: 100%;
}
.cnci-book-reader-loading-cs {
    font-size: 1.2rem;
    padding: 40px;
    text-align: center;
}
.cnci-book-reader-pageinfo-cs{
    text-align: right;
    color: var(--Text);
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
    width: 180px;
    @media (max-width: 560px) {
        flex: 1 1 auto;
        width: auto;
    }
}
/* The title was flex: 1, which sets its basis to zero and looks like it should
   shrink, but min-width: auto still floored it at its longest word — so instead
   of shrinking it wrapped, eight lines deep, and pushed the bar down over
   everything else. Releasing that floor and clamping to two lines bounds the
   bar at every width. Two lines rather than one because a book title is the
   only thing on this page identifying what is open; the whole title is on the
   element's title attribute for a hover.

   flex: 1 1 0 and not 1 1 auto. The first draft used auto and the simulation
   caught it: an auto basis asks for the title's max-content width, roughly
   700px, which on a wrapping header is enough to push the title onto a line of
   its own and make the iPad Air bar TALLER than it was before the fix. A zero
   basis is what the original flex: 1 meant, and the only thing wrong with the
   original was the min-width floor underneath it. */
.cnci-book-reader-title-cs {
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    flex: 1 1 0;
    font-weight: 800;
    line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    width: auto;
    /* On a phone 180 + 180 leaves the title about 20px, so the three parts stop
       sharing a line. The title takes the top row on its own, still clamped,
       and the two controls split the row beneath it. */
    @media (max-width: 560px) {
        flex: 1 1 100%;
        order: -1;
    }
}
.cnci-book-reader-wrapper-cs {
    padding: 10px;
    width: 100%;
}
/*----------------------------------------*/
/* Reference — filter bar + book rows      */
/*----------------------------------------*/
.cnci-book-ref-body-cs {
    background: var(--Text);
    border: 1px solid var(--Form);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height: 350px;
    overflow-y: auto;
    scrollbar-color: var(--Disabled) var(--Form);
    scrollbar-width: thin;
}
.cnci-book-ref-count-cs {
    color: var(--Text);
    font-size: small;
    opacity: 0.8;
    white-space: nowrap;
}
.cnci-book-ref-empty-cs {
    background: var(--Text);
    box-sizing: border-box;
    border: 1px solid var(--Form);
    border-radius: 5px;
    color: var(--TextMuted);
    font-size: small;
    font-style: italic;
    padding: 14px 12px;
}
.cnci-book-ref-filter-bar-cs {
    align-items: center;
    box-sizing: border-box;
    background: var(--Form);
    border-radius: 5px;
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px;
}
.cnci-book-ref-filter-count-cs {
    color: var(--TextMuted);
    flex: 0 0 auto;
    font-size: x-small;
    padding-right: 4px;
    white-space: nowrap;
}
.cnci-book-ref-filter-input-cs {
    background: var(--Text);
    box-sizing: border-box;
    border: 1px solid var(--SubSection);
    border-radius: 4px;
    color: var(--TextDark);
    flex: 1 1 auto;
    font-size: small;
    height: 34px;
    min-width: 0;
    padding: 0 12px;
    &::placeholder {
        color: var(--Disabled);
    }
    /* The anti-zoom floor — see .cnci-book-input-cs. 34px already holds it. */
    @media (max-width: 560px) {
        font-size: 16px;
    }
}
.cnci-book-ref-progress-cs {
    border-right: 1px solid var(--Form);
    box-sizing: border-box;
    color: var(--TextMuted);
    flex: 0 0 110px;
    font-size: x-small;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}
.cnci-book-ref-row-cs {
    align-items: center;
    background: var(--Text);
    border-bottom: 1px solid var(--Form);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: 36px;
    transition: background 0.12s;
    user-select: none;
    &:hover {
        background: var(--RowHover);
    }
    &:last-child {
        border-bottom: none;
    }
}
/* Filtering hides rows with a class instead of removing them, so :last-child
   above can end up pointing at a hidden row; the script marks the last VISIBLE
   row with -ref-last- instead. Both of these are (0,2,0) selectors so neither
   can lose a specificity tie with the base rule. */
.cnci-book-ref-row-cs.cnci-book-hidden-cs {
    display: none;
}
.cnci-book-ref-row-cs.cnci-book-ref-last-cs {
    border-bottom: none;
}
.cnci-book-ref-title-cs {
    box-sizing: border-box;
    color: var(--TextDark);
    flex: 1 1 auto;
    font-size: small;
    font-weight: 600;
    /* min-width:0 is load-bearing. A flex item defaults to min-width:auto and
       refuses to shrink below its own content, so without this a long book
       title widens the whole row instead of ellipsing, and the section grows a
       sideways scrollbar. */
    min-width: 0;
    overflow: hidden;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cnci-book-reference-wrapper-cs {
    padding: 10px;
    width: 100%;
}
.cnci-book-row-cs {
    height: 30px;
}

.cnci-book-modal-checkbox-cs {
    height: 20px;
    margin: 2px;
    width: 20px;
}

.cnci-book-row-cs td input {
    height: 30px;
    width: 80px !important;
}

.cnci-book-row-cs td input[type="checkbox"] {
    height: 20px;
    width: 20px;
}

.cnci-book-row-cs tr input[type="checkbox"] {
    height: 30px;
    width: 80px !important;
}

.cnci-book-row-dragging-cs {
    opacity: 0.4;
}

.cnci-book-row-dragover-cs {
    border-top: 2px solid var(--TableHeader);
}

/*------------------------------------------------------------*/
/* S                                                          */
/*------------------------------------------------------------*/
/* Centred rather than pinned to the bottom edge, so a message lands where the
   eye already is instead of in the corner people learn to ignore.
   width: max-content is load-bearing. A fixed box pinned at left: 50% with no
   width of its own is only offered the half of the viewport to its right, so on
   a phone the message folds into a narrow column. This lets it size to its text,
   and max-width then holds it inside the screen. */
#cnci-book-snackbar-id {
    display: none;
    left: 50%;
    max-width: 90vw;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    z-index: 99999;
}
#cnci-book-snackbar-id.cnci-book-snackbar-show-cs {
    display: block;
}
.cnci-book-save-msg-cs {
    align-content: center;
    color: var(--Highlight);
    font-size: small;
    height: 30px;
    width: 100px;
}
.cnci-book-setup-body-cs {
    padding: 10px;
    padding-right: 0px;
    padding-left: 0px;
}
.cnci-book-setup-card-cs {
    border: 1px solid var(--Form);
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}
/* The caret is what tells the reader the bar opens rather than just labels the
   section. It sits on the h3 and not on the header because the header is a
   flex row with the section controls at the far end — a ::before there would
   become a flex item of its own and be pushed away from the words it belongs
   to. (The h3 also carries justify-content: flex-start below. That dates from
   when .cnci-book-header-cs was a flex container; it is a block now, so the
   declaration no longer does anything — left in place rather than quietly
   removed, since it is harmless either way.) */
.cnci-book-setup-header-cs {
    align-items: center;
    background: var(--TableHeader);
    color: var(--Text);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    /* The section rows carry the same shape as the bar above them: a name that
       must give way, an access list that may, and a button that must not. */
    & .cnci-book-access-label-cs {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    & .cnci-book-btn-edit-cs {
        flex: 0 0 auto;
    }
    & h3 {
        color: inherit;
        flex: 1;
        justify-content: flex-start;
        margin: 0;
        /* 15px, matching Planner and Worship. It was 0.9em, and .cnci-book-header-cs
           never sets a font-size, so this h3 falls back to the UA's 1.17em
           (18.72px) and the caret came out 16.848px. No breakpoint: this header
           keeps its type at every width. */
        &::before {
            content: "\25B8";
            display: inline-block;
            font-size: 15px;
            margin-right: 8px;
            transition: transform 0.15s ease;
        }
    }
    &.cnci-book-open-cs h3::before {
        transform: rotate(90deg);
    }
    @media (max-width: 560px) {
        /* A long access list must not be able to crowd out the name of the
           section it belongs to.

           25%, not the 35% of the first draft. The h3 carries flex: 1, which
           means basis 0 — it only ever gets the space nothing else claimed. At
           35% the label took 118px of a 336px row and left the name 118px, and
           a bold 18.7px h3 renders "Systematic Theology and Church History" as
           "Syste…" in that. The access list is being truncated either way and a
           truncated access list says nothing; the name is what identifies the
           row, so the name wins the argument. Both carry their full text on a
           title attribute regardless. */
        & .cnci-book-access-label-cs {
            max-width: 25%;
        }
    }
}
/* The shadow is not decoration. Every message now floats in the middle of the
   page instead of hugging the bottom edge, so without it a pale message can sit
   on top of a pale table and read as part of the page. */
.cnci-book-snackbar-cs {
    background: var(--SnackBar);
    border-radius: 5px;
    box-shadow: 0 6px 24px var(--Shadow);
    color: var(--Text);
    font-size: small;
    font-weight: normal;
    margin: 0;
    padding: 10px 20px;
}
/* An error is the one message the user must not walk past, so it stops looking
   like a status line and starts looking like a stop sign: red, bigger type, and
   a warning mark beside it. Position is no longer part of this — every message
   is centred now, so only the appearance still changes. */
.cnci-book-snackbar-error-cs .cnci-book-snackbar-cs {
    align-items: center;
    background: var(--Error);
    column-gap: 10px;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 24px;
}
.cnci-book-snackbar-error-cs .cnci-book-snackbar-icon-cs {
    display: inline;
}
/* Hidden by default and revealed by the rule above, so the mark is carried by
   CSS alone. The script then has one class to set and no second element to
   remember to show and hide in step with it. */
.cnci-book-snackbar-icon-cs {
    display: none;
    font-size: 1.4rem;
    line-height: 1;
}

/*------------------------------------------------------------*/
/* T                                                          */
/*------------------------------------------------------------*/
.cnci-book-table-cs {
    background-color: var(--Section);
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    width: 100%;
    & tbody tr {
        border-bottom: 1px solid var(--Form);
        transition: background 0.1s;
    }
    & tbody tr:hover {
        background: var(--Form);
    }
    & tbody tr:last-child {
        border-bottom: none;
    }
    & td {
        border-bottom: 1px solid var(--Form);
        color: var(--TextDark);
        font-size: 1rem;
        padding: 8px 10px;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
    }
    & th {
        border-bottom: 1px solid var(--Form);
        color: var(--TextMuted);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        padding: 8px 10px;
        text-align: left;
        white-space: nowrap;
    }
    & thead tr {
        background: var(--Section);
        border-bottom: 2px solid var(--Form);
    }
    & thead tr th {
        color: #000000;
        font-size: large;
    }
}
.cnci-book-table-footer-cs {
    background-color: var(--TableNormal);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 10px;
    width: 100%;
}
.cnci-book-table-header-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    /* The heading takes what is left after the controls, and min-width: 0 is
       what lets it go below its own longest word — without it the heading
       refuses to shrink and pushes the controls out of the bar instead. */
    & > .cnci-book-header-cs {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
    @media (max-width: 560px) {
        /* The status span holds nothing until a sync runs but reserves 100px
           the whole time — a tenth of the bar on a phone, taken from the only
           element that had to shrink. It can size to its own text instead. */
        & .cnci-book-save-msg-cs {
            width: auto;
        }
        & .cnci-book-btn-func-cs {
            padding: 6px 8px;
            white-space: nowrap;
            width: auto;
        }
    }
}
.cnci-book-tbody-cs {
    background-color: var(--TableNormal);
    & tr:nth-child(even) td {
        background-color: var(--RowEven);
    }
    & tr:nth-child(odd) td {
        background-color: var(--RowOdd);
    }
    & tr:hover td {
        background-color: var(--RowHover);
    }
}

/*------------------------------------------------------------*/
/* Media                                                      */
/*------------------------------------------------------------*/
/* The old override here shrank .cnci-book-card-cs on phones. Cards are gone
   and rows are already full-width and fluid, so there is nothing to override. */