body {
    font-family: system-ui, -apple-system, sans-serif;
/*    max-width: 1100px;*/
    margin: 2rem auto;
    padding: 0 1rem;
    color: #222;
    background: #fafafa;
}

h1 { margin-bottom: 0.25rem; }

nav {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #444;
}

nav a {
    margin-right: 1.5rem;
    text-decoration: none;
    font-weight: 600;
    color: #333;
}

nav a.active { color: #a33; }

textarea {
    width: 100%;
    height: 300px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    box-sizing: border-box;
    padding: 0.5rem;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1rem;
    background: #fff;
}

th, td {
    border: 1px solid #ccc;
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.9rem;
}

th {
    background: #333;
    color: #fff;
    position: sticky;
    top: 0;
}

tr:nth-child(even) { background: #f2f2f2; }

.summary {
    background: #eef6ee;
    border: 1px solid #9c9;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.warnings {
    background: #fff3e0;
    border: 1px solid #e0a030;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.totals {
    font-weight: 600;
    margin-top: 0.5rem;
}

button {
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    cursor: pointer;
}

/* v0.15.1 - small inline "Show/Hide" button next to password fields, not
   a full-size submit-style button like the rest of the page's buttons. */
.toggle-visibility {
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    margin-left: 0.3rem;
    vertical-align: middle;
}

th a {
    color: #fff;
    text-decoration: none;
}

th a:hover {
    text-decoration: underline;
}

.pagination {
    text-align: center;
    margin: 1.5rem 0;
}

.pagination a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.pagination .disabled {
    color: #bbb;
    font-weight: 600;
}

[data-inline-edit] {
    cursor: pointer;
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
}

[data-inline-edit="text"]:hover {
    background: #f0f0f0;
}

.inline-edit-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 0.1rem 0.2rem;
}

@keyframes inline-edit-flash-ok {
    from { background: #c8f0c8; }
    to   { background: transparent; }
}

@keyframes inline-edit-flash-err {
    from { background: #f0c8c8; }
    to   { background: transparent; }
}

.inline-edit-ok  { animation: inline-edit-flash-ok 1s ease-out; }
.inline-edit-err { animation: inline-edit-flash-err 1.5s ease-out; }

/* Copy-paste box (adventure.php forum-post text): styled so the markdown
   never actually renders - it's plain text in a readonly textarea - and
   copying it is a single click. */
.copy-block {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 1rem 0;
    overflow: hidden;
}

.copy-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #333;
    color: #fff;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.copy-block-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    background: #555;
    color: #fff;
    border: 1px solid #777;
    border-radius: 3px;
}

.copy-block-btn:hover  { background: #666; }
.copy-block-btn.copied { background: #2a7d2a; border-color: #2a7d2a; }

.copy-block-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    resize: vertical;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: #fcfcf5;
}

.copy-block-textarea:focus { outline: 2px solid #9c9; outline-offset: -2px; }

/* Adventure names in list/table context (sessions, gm_sessions, character,
   event, purchases) - per FarmerDad, these should never wrap, and should
   truncate with an ellipsis (full text in the title="" tooltip) rather
   than stretching the row. Deliberately NOT used on adventures.php's own
   list, where the title is the point of that row. */
.truncate-cell {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* Purchases list: character group header rows (purchases.php) */
tr.group-header td {
    background: #eef1e8;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-top: 2px solid #ccc;
}

/* Active-session flag (sessions.php, gm_sessions.php, characters.php) -
   per FarmerDad, an in-progress session (or a character currently tied up
   in one) gets its whole row tinted so it stands out in the list.
   Deliberately higher specificity than the plain `tr:nth-child(even)`
   zebra-stripe rule above (same specificity as a bare `tr.row-active`
   would have, which made this lose the tie on even-numbered rows in
   practice - confirmed bug, v0.9.12) by qualifying with table/tbody. */
table tbody tr.row-active {
    background: #fff3cd;
}
table tbody tr.row-active:hover {
    background: #ffe9a8;
}

/* Inactive Event flag (events.php, v0.13.0) - dims the row rather than
   hiding it, since an inactive Event still shows/is editable there; it's
   only excluded from "pick one" dropdowns elsewhere. Opposite sense from
   .row-active above (that one highlights; this one recedes), so it's a
   separate class rather than reusing .row-active inverted. */
.row-inactive {
    opacity: 0.55;
}
.row-inactive:hover {
    opacity: 0.8;
}

/* Add/Edit Character form (characters.php, v0.10.0): "Current data" vs
   "Character sheet data" are visibly separate blocks rather than one long
   flat form, per FarmerDad. */
.edit-section {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.25rem 1rem 0.5rem;
    margin-bottom: 1rem;
}

.edit-section h3 {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Stale Character Sheet Data warning (v0.10.2) - small inline suffix
   wherever a character is linked (lists, session rows, etc.) */
.stale-badge {
    cursor: help;
    color: #b8860b;
}

/* Character detail page (character.php, v0.10.2): the session list on the
   right, everything else on the left, per FarmerDad. flex-wrap lets it
   stack on a narrow/mobile viewport instead of squeezing both columns. */
.character-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.character-col-left {
    flex: 1 1 420px;
    min-width: 340px;
    max-width: 510px;
}

.character-col-right {
    flex: 2 1 480px;
    min-width: 340px;
}

/* The session table has ~19 columns and will rarely fit its half of the
   page - scrolls horizontally within its own column instead of blowing out
   the layout. */
.table-scroll {
    overflow-x: auto;
}

/* Introduction Block + Creation Block side by side (v0.10.2, per
   FarmerDad: "put all three of them on the same line in a row" - now two,
   after the third box was folded into the second). */
.copy-block-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.copy-block-row .copy-block {
    flex: 1 1 50%;
    min-width: 0;
    margin: 1rem 0;
}