.presentation-file-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
}

.presentation-file-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    min-width: 0;
}

.presentation-file-card h2,
.presentation-file-card h4 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.35;
}

.presentation-file-card > .button-primary { margin-top: auto; }

.presentation-file-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.presentation-file-icon:hover { background: #edf6fc; border-color: #8cb6cf; }
.presentation-breadcrumb { margin-bottom: 1.5rem; }
.presentation-breadcrumb a { text-underline-offset: .2em; }

.presentation-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.presentation-detail-header > img { flex: 0 0 80px; }
.presentation-detail-header h1 { margin: .3rem 0 .65rem; font-size: clamp(1.65rem, 4vw, 2.6rem); overflow-wrap: anywhere; }
.presentation-file-meta { color: var(--muted); overflow-wrap: anywhere; }

.presentation-download-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
    padding: 1rem;
    background: #eef5f6;
    border: 1px solid var(--line);
    border-radius: 5px;
}

.presentation-download-bar .button-primary { overflow-wrap: anywhere; }
.presentation-slides > p { margin-bottom: 1.25rem; }
.presentation-slide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.presentation-slide-card { min-width: 0; }

.paint-thumbnail {
    display: block;
    padding: 3px;
    color: #18202a;
    text-decoration: none;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fafafa #666 #666 #fafafa;
    box-shadow: 2px 3px 0 #182d3d21;
}

.paint-thumbnail:hover { color: #18202a; box-shadow: 0 0 0 2px #1e609d; }
.paint-thumbnail-title,
.paint-titlebar { display: flex; align-items: center; gap: .5rem; color: #fff; background: linear-gradient(90deg, #123c81, #367ab2); }
.paint-thumbnail-title { padding: .35rem .4rem; font-size: .8rem; font-weight: 700; }
.paint-thumbnail-title > span:last-child { margin-left: auto; }
.paint-thumbnail-canvas { display: block; margin: 5px 0; padding: 5px; background: #808080; border: 1px inset #ddd; }
.paint-thumbnail-canvas img { width: 100%; height: auto; background: #fff; }
.presentation-slide-transcript { margin-top: .6rem; font-size: .85rem; }
.presentation-slide-transcript summary { cursor: pointer; padding: .4rem 0; color: var(--brand-dark); }
.presentation-slide-transcript p { white-space: pre-line; margin-top: .5rem; padding: .75rem; border: 1px solid var(--line); max-height: 22rem; overflow: auto; }

.paint-viewer-open { overflow: hidden; }
.paint-dialog {
    width: min(1240px, calc(100vw - 1rem));
    max-width: none;
    max-height: calc(100dvh - 1rem);
    padding: 3px;
    color: #171c25;
    background: #c0c0c0;
    border: 3px solid;
    border-color: #fafafa #555 #555 #fafafa;
    box-shadow: 0 25px 90px #0008;
    overflow: auto;
}

.paint-dialog[open] { display: flex; flex-direction: column; }
.paint-dialog::backdrop { background: #06141dc9; }
.paint-titlebar { flex: 0 0 auto; padding: .25rem .35rem; }
.paint-titlebar h2 { margin: 0; color: inherit; font-size: 1rem; line-height: 1.25; }
.paint-close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: #111;
    background: #d4d0c8;
    border: 2px outset #eee;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.paint-close:hover { color: #fff; background: #a52b25; }
.paint-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; padding: .4rem; border-bottom: 1px solid #888; }
.paint-navigation { display: flex; gap: .4rem; }
.paint-toolbar button { min-height: 44px; padding: .4rem .65rem; border: 2px outset #eee; color: #18202a; background: #e9e7e2; cursor: pointer; font-size: .9rem; }
.paint-toolbar button:active { border-style: inset; }
.paint-toolbar button:disabled { cursor: default; opacity: .5; }
.paint-toolbar button[aria-pressed="true"] { border-style: inset; background: #fff; }
.paint-workspace { position: relative; flex: 1 1 auto; min-height: 100px; max-height: 70dvh; overflow: auto; padding: 12px; background: #808080; border: 2px inset #eee; }
.paint-sheet { position: relative; width: min(100%, calc(60dvh * var(--paint-ratio, 1.777778))); margin-inline: auto; box-shadow: 2px 2px 0 #555; }
.paint-slide-image { display: block; width: 100%; height: auto; }
.paint-workspace.is-original .paint-sheet { width: var(--paint-natural-width, 1600px); max-width: none; margin: 0; }
.paint-statusbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .3rem .5rem; font-size: .8rem; }
.paint-load-error { padding: .65rem; color: #7c1010; background: #fff1ed; }
.paint-dialog [hidden] { display: none; }

.high-contrast .paint-thumbnail,
.high-contrast .paint-dialog,
.high-contrast .paint-toolbar button,
.high-contrast .paint-close,
.high-contrast .presentation-download-bar { color: #fff; background: #000; border-color: #fff; }
.high-contrast .presentation-file-meta,
.high-contrast .presentation-slide-transcript summary { color: #fff; }

@media (max-width: 600px) {
    .presentation-slide-grid { grid-template-columns: minmax(0, 1fr); }
    .presentation-detail-header { align-items: flex-start; }
    .presentation-detail-header > img { width: 52px; height: 52px; flex-basis: 52px; }
    .paint-titlebar h2 { font-size: .9rem; }
    .paint-workspace { padding: 5px; }
    .paint-toolbar { gap: .5rem; }
    .paint-toolbar button { font-size: .8rem; }
    .paint-navigation button { padding-inline: .45rem; }
    .paint-dialog { max-height: calc(100dvh - .5rem); }
}