/* GanjaFoto v3. All module rules stay below .photo-app.
   Visual language follows gw.css: Verdana 9pt, #003300 on light greens,
   #d0eed0 header strips, #e0ffe0/#d0f5d0 alternating rows, mainbutton
   gradients, #990000 accents for the current location. */

.photo-app {
    --photo-page: #f5fff5;
    --photo-green: #003300;
    --photo-link: #004400;
    --photo-hover: #009900;
    --photo-red: #990000;
    --photo-green-bg: #d0eed0;
    --photo-green-green: #d0f5d0;
    --photo-green-light: #e0ffe0;
    --photo-hover-bg: #c4f8c4;
    --photo-muted: #669966;
    --photo-control-border: #7d727d;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    color: #003300;
    color: var(--photo-green);
    background: #f5fff5;
    background: var(--photo-page);
    font: 9pt/1.35 Verdana, Geneva, "Arial Cyr", Arial, Helvetica, sans-serif;
}

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

.photo-app [hidden] {
    display: none !important;
}

.photo-app img {
    max-width: 100%;
}

/* gw.css declares "form { display: inline }" for the whole game; inline
   forms paint background and padding in fragments. Inside the module every
   form is a normal block (grid forms override this with their own display). */
.photo-app form {
    display: block;
}

.photo-app a {
    color: #004400;
    color: var(--photo-link);
    text-decoration-skip-ink: none;
    text-underline-offset: 1px;
}

.photo-app a:hover {
    color: #009900;
    color: var(--photo-hover);
}

.photo-app button,
.photo-app input,
.photo-app select,
.photo-app textarea {
    color: #003300;
    color: var(--photo-green);
    font: 9pt Verdana, Geneva, "Arial Cyr", Arial, Helvetica, sans-serif;
}

.photo-app button:focus-visible,
.photo-app input:focus-visible,
.photo-app select:focus-visible,
.photo-app textarea:focus-visible,
.photo-app a:focus-visible,
.photo-app [tabindex]:focus-visible {
    outline: 2px solid #006600;
    outline-offset: 1px;
}

.photo-app .photo-shell {
    width: calc(100% - 18px);
    max-width: 1180px;
    min-width: 0;
    margin: 6px auto 28px;
    padding: 0;
}

.photo-app .photo-visually-hidden,
.photo-app .photo-file-input--hidden,
.photo-app .photo-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.photo-app .photo-aux {
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
    font-weight: normal;
}

/* Gallery header: the title links home, two compact buttons on the right;
   the active button keeps the classic mark - #d0eed0, bold red text. */
.photo-app .photo-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 3px 8px;
    min-width: 0;
    min-height: 31px;
    margin: 2px 0 0;
    padding: 2px 0;
}

.photo-app .photo-nav__title {
    min-width: 0;
    color: #004400;
    color: var(--photo-link);
    font-size: 11pt;
    font-weight: bold;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.photo-app .photo-nav__title:hover {
    color: #009900;
    color: var(--photo-hover);
    text-decoration: underline;
}

.photo-app .photo-nav__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
}

.photo-app .photo-nav__button {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 3px 11px;
    background: #e0ffe0;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.photo-app .photo-nav__button--upload {
    background: #edffed;
}

.photo-app .photo-nav__button:hover {
    background: #c4f8c4;
    background: var(--photo-hover-bg);
    text-decoration: underline;
}

.photo-app .photo-nav__button--active,
.photo-app .photo-nav__button--active:hover {
    color: #990000;
    color: var(--photo-red);
    background: #d0eed0;
    background: var(--photo-green-bg);
    text-decoration: none;
    cursor: default;
}

.photo-app .photo-nav__button--active::before {
    margin-right: 4px;
    content: "\00BB";
}

.photo-app .photo-section {
    min-width: 0;
    margin-top: 4px;
}

.photo-app .photo-stack {
    min-width: 0;
}

.photo-app .photo-stack > * + * {
    margin-top: 1px;
}

.photo-app .photo-section-head {
    display: flex;
    min-width: 0;
    min-height: 25px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 7px;
}

.photo-app .photo-section-head--spaced {
    margin-top: 3px;
}

.photo-app .photo-section-head h1,
.photo-app .photo-section-head h2,
.photo-app .photo-section-head strong {
    min-width: 0;
    margin: 0;
    font-size: 9pt;
    line-height: inherit;
    overflow-wrap: anywhere;
}

/* Buttons follow gw.css .mainbutton / a.greenbutton_nh exactly. */
.photo-app .photo-button {
    display: inline-flex;
    min-width: 0;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    border: 1px solid #7d727d;
    border: 1px solid var(--photo-control-border);
    border-radius: 0;
    color: #003300;
    background: #dceddc;
    background: linear-gradient(#dceddc, #bad4ba);
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 #dcffc4;
    white-space: nowrap;
    cursor: pointer;
}

.photo-app .photo-button:hover {
    color: #003300;
    background: #dceddc;
    background: linear-gradient(#dceddc, #f0fff0);
}

.photo-app .photo-button:active {
    position: relative;
    top: 1px;
    background: #bad4ba;
    background: linear-gradient(#bad4ba, #dceddc);
}

.photo-app .photo-button--primary,
.photo-app .photo-button--primary:hover,
.photo-app .photo-button--primary:active {
    border-color: #2f7a2f;
    color: #ffffff;
    background: #378b37;
    text-shadow: none;
}

.photo-app .photo-button--primary:hover {
    background: #00aa00;
}

.photo-app .photo-button--small {
    min-height: 21px;
    padding: 1px 8px;
    font-size: 8pt;
}

.photo-app .photo-button:disabled,
.photo-app .photo-delete-link:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.photo-app .photo-button:disabled:active {
    top: 0;
}

/* Form controls follow gw.css input/select gradients. */
.photo-app .photo-field-control,
.photo-app .photo-select,
.photo-app .photo-upload-caption {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
    padding: 2px 4px;
    border: 1px solid #7d727d;
    border: 1px solid var(--photo-control-border);
    border-radius: 0;
    background: #ffffff;
    background: linear-gradient(#ffffff, #f0fff0);
    box-shadow: inset 0 1px 0 #ffffff;
}

.photo-app .photo-select {
    background: #ffffff;
    background: linear-gradient(#ffffff, #d6e8d6);
}

.photo-app .photo-form-label,
.photo-app .photo-search-box > label,
.photo-app .photo-search-box label {
    display: block;
    margin-bottom: 3px;
    color: #336633;
    font-size: 8pt;
    font-weight: bold;
}

.photo-app .photo-notice {
    display: block;
    min-width: 0;
    margin-bottom: 4px;
    padding: 5px 7px;
    color: #6d3d16;
    background: #fff1d5;
    font-size: 8pt;
}

.photo-app .photo-notice--error {
    color: #990000;
    background: #eed0d0;
}

.photo-app .photo-notice--success {
    color: #006600;
    background: #d8f0d8;
}

/* Floating success toast: centered above the page, fades out by photo.js. */
.photo-app .photo-toast {
    position: fixed;
    z-index: 10040;
    top: 92px;
    left: 50%;
    min-width: 220px;
    max-width: 90%;
    margin: 0;
    padding: 11px 20px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .12), 0 5px 10px rgba(0, 0, 0, .24);
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity .7s ease;
}

.photo-app .photo-toast--hide {
    opacity: 0;
    pointer-events: none;
}

.photo-app .photo-alert {
    min-width: 0;
    margin: 3px 0;
    padding: 5px 7px;
    background: #fff1d5;
    font-size: 8pt;
}

.photo-app .photo-alert--error {
    color: #990000;
    background: #eed0d0;
}

.photo-app .photo-empty {
    min-width: 0;
    padding: 22px 10px;
    color: #669966;
    color: var(--photo-muted);
    text-align: center;
}

.photo-app .photo-rules {
    min-width: 0;
    padding: 9px 12px;
}

.photo-app .photo-rules p {
    max-width: 760px;
    margin: 0 0 9px;
}

/* Gallery */
.photo-app .photo-gallery-layout {
    display: grid;
    grid-template-columns: 226px minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
    margin-top: 3px;
}

.photo-app .photo-sidebar,
.photo-app .photo-gallery-main {
    min-width: 0;
}

.photo-app .photo-sidebar > * + * {
    margin-top: 3px;
}

.photo-app .photo-search-aux {
    margin-top: 6px;
    font-size: 8pt;
}

.photo-app .photo-category-list {
    padding: 0;
    margin: 1px 0 0;
    list-style: none;
}

.photo-app .photo-category-list li:nth-child(odd) {
    background: #e0ffe0;
}

.photo-app .photo-category-list li:nth-child(even) {
    background: #d0f5d0;
}

.photo-app .photo-category-list a {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 3px 8px;
    min-width: 0;
    min-height: 25px;
    align-items: center;
    padding: 3px 5px;
    text-decoration: none;
}

.photo-app .photo-category-list a:hover {
    background: #c4f8c4;
    background: var(--photo-hover-bg);
    text-decoration: underline;
}

.photo-app .photo-category-list__mark,
.photo-app .photo-category-list__count {
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
}

.photo-app .photo-category-list__count {
    white-space: nowrap;
}

/* Game PDA mode: single column regardless of the window width. */
.photo-app .photo-gallery-layout--pda {
    display: block;
}

.photo-app .photo-gallery-layout--pda .photo-sidebar {
    display: block;
    margin-bottom: 3px;
}

.photo-app .photo-search-box {
    min-width: 0;
    padding: 7px;
}

.photo-app .photo-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px;
    min-width: 0;
}

.photo-app .photo-intro-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 7px;
}

.photo-app .photo-intro-row strong,
.photo-app .photo-intro-row .photo-aux {
    display: block;
}

.photo-app .photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    min-width: 0;
    margin-top: 3px;
}

.photo-app .photo-card {
    min-width: 0;
    margin: 0;
    overflow: hidden;
}

.photo-app .photo-card:nth-child(odd) {
    background: #e0ffe0;
}

.photo-app .photo-card:nth-child(even) {
    background: #d0f5d0;
}

.photo-app .photo-card__image {
    position: relative;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 75%;
    background: #c2d6c2;
}

.photo-app .photo-card__image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 150ms ease;
}

.photo-app .photo-card:hover .photo-card__image img {
    filter: brightness(1.05);
}

.photo-app .photo-card__caption {
    min-width: 0;
    min-height: 44px;
    padding: 4px 5px;
}

.photo-app .photo-card__title {
    display: block;
    overflow: hidden;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-app .photo-card__meta {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 4px;
    margin-top: 2px;
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
}

.photo-app .photo-card__meta a,
.photo-app .photo-card__meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-app .photo-more-row {
    min-width: 0;
    margin-top: 3px;
    padding: 5px;
    text-align: center;
}

/* Albums */
.photo-app .photo-album-list {
    display: grid;
    gap: 1px;
    min-width: 0;
    margin-top: 3px;
    background: #f5fff5;
    background: var(--photo-page);
}

.photo-app .photo-album-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    min-height: 56px;
    padding: 5px 7px;
}

.photo-app .photo-album-row__main {
    min-width: 0;
}

.photo-app .photo-album-row__title,
.photo-app .photo-album-row__owner {
    display: block;
    overflow-wrap: anywhere;
}

.photo-app .photo-album-row__title {
    font-weight: bold;
}

.photo-app .photo-album-row__owner,
.photo-app .photo-album-row__meta {
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
}

.photo-app .photo-album-row__owner {
    display: inline-block;
    margin-top: 1px;
}

.photo-app .photo-album-row__meta {
    margin-top: 2px;
}

/* Fresh previews fill the free width of the row; anything that does not fit
   on the single visible line wraps out of the clipped box. */
.photo-app .photo-album-row__latest {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 2px;
    min-width: 0;
    max-height: 33px;
    overflow: hidden;
}

.photo-app .photo-album-row__thumb {
    display: block;
    width: 44px;
    height: 33px;
    overflow: hidden;
    background: #b7d5b7;
}

.photo-app .photo-album-row__thumb:hover img {
    filter: brightness(1.06);
}

.photo-app .photo-album-row__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-app .photo-forum-pager {
    min-width: 0;
    margin: 3px auto 0;
    overflow-x: auto;
    text-align: center;
}

.photo-app .photo-forum-pager > table {
    margin-right: auto;
    margin-left: auto;
}

.photo-app .photo-forum-pager a.clr,
.photo-app .photo-forum-pager a.clr:visited {
    color: #004400;
    font-family: Verdana, Geneva, "Arial Cyr", Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.photo-app .photo-forum-pager a.redlightfont,
.photo-app .photo-forum-pager a.redlightfont:visited {
    color: #aa0000;
    text-decoration: none;
}

.photo-app .photo-breadcrumbs {
    min-width: 0;
    padding: 5px 7px;
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
    overflow-wrap: anywhere;
}

.photo-app .photo-album-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    margin-top: 1px;
    padding: 7px;
}

.photo-app .photo-album-hero h1 {
    margin: 0;
    font-size: 9pt;
    overflow-wrap: anywhere;
}

.photo-app .photo-album-hero .photo-aux {
    margin-top: 3px;
}

.photo-app .photo-album-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
    margin-top: 3px;
}

.photo-app .photo-album-tiles::after {
    flex: 999 1 220px;
    height: 0;
    content: "";
}

.photo-app .photo-album-tile {
    position: relative;
    display: block;
    flex: 1 1 150px;
    flex-basis: calc(var(--photo-ratio, 1.33) * 118px);
    height: 132px;
    overflow: hidden;
    background: #c2d6c2;
}

.photo-app .photo-album-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 150ms ease;
}

.photo-app .photo-album-tile:hover img {
    filter: brightness(1.06);
}

.photo-app .photo-album-tile::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 24px;
    background: linear-gradient(transparent, rgba(0, 51, 0, .5));
    content: "";
    opacity: 0;
    transition: opacity 150ms ease;
}

.photo-app .photo-album-tile:hover::after {
    opacity: 1;
}

/* Upload */
.photo-app .photo-upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 246px;
    gap: 3px;
    align-items: start;
    min-width: 0;
}

.photo-app .photo-uploader,
.photo-app .photo-upload-queue {
    min-width: 0;
}

.photo-app .photo-upload-settings {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto;
    gap: 5px;
    align-items: end;
    min-width: 0;
    padding: 7px;
}

.photo-app .photo-upload-settings label {
    min-width: 0;
}

/* The select and the "create album" button are forced to the exact same
   box: fixed equal height and no vertical margins (gw.css gives every
   select a global 1px margin), so their bottoms cannot drift apart. */
.photo-app .photo-upload-settings .photo-select,
.photo-app .photo-upload-settings .photo-button {
    height: 28px;
    min-height: 28px;
    margin: 0;
}

.photo-app .photo-dropzone {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 108px;
    margin-top: 3px;
    padding: 8px;
    outline: 1px dashed #66bb66;
    outline-offset: -7px;
}

.photo-app .photo-dropzone--active {
    background: #d0f5d0;
    outline: 1px dashed #339933;
}

.photo-app .photo-dropzone__desktop-action {
    margin-right: 8px;
}

.photo-app .photo-dropzone__icon {
    position: relative;
    width: 44px;
    height: 34px;
    margin: 0 auto;
    box-shadow: inset 0 0 0 2px #669966, inset 0 0 0 5px #e9f6e9;
}

.photo-app .photo-dropzone__icon::before {
    position: absolute;
    top: -7px;
    left: 9px;
    width: 17px;
    height: 7px;
    background: #669966;
    content: "";
}

.photo-app .photo-dropzone__icon::after {
    position: absolute;
    top: 9px;
    left: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #669966;
    box-shadow: 0 0 0 3px #e9f6e9;
    content: "";
}

.photo-app .photo-dropzone__desktop strong,
.photo-app .photo-dropzone__desktop span {
    display: block;
}

.photo-app .photo-dropzone__desktop span {
    margin-top: 3px;
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
}

.photo-app .photo-dropzone__mobile {
    display: none;
}

/* The queue toolbar appears only when the queue holds at least one file
   (photo.js toggles photo-uploader--has-items). */
.photo-app .photo-upload-toolbar {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 8px;
    align-items: center;
    min-width: 0;
    margin-top: 3px;
    padding: 5px 7px;
}

.photo-app .photo-uploader--has-items .photo-upload-toolbar {
    display: grid;
}

.photo-app .photo-upload-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-end;
}

.photo-app .photo-upload-summary {
    min-width: 0;
    min-height: 16px;
}

.photo-app .photo-upload-total-progress {
    grid-column: 1 / -1;
    margin-top: 0;
}

.photo-app .photo-progress {
    width: 100%;
    height: 10px;
    margin-top: 4px;
    border: 1px solid #669966;
    background: #f7fff7;
}

.photo-app .photo-progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: #77b55a;
    background: linear-gradient(#77b55a, #72b352);
    transition: width 120ms linear;
}

.photo-app .photo-upload-queue,
.photo-app .photo-upload-list {
    display: grid;
    gap: 1px;
    padding: 0;
    margin: 1px 0 0;
    background: #f5fff5;
    background: var(--photo-page);
    list-style: none;
}

.photo-app .photo-upload-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-width: 0;
    padding: 5px 6px;
}

.photo-app .photo-upload-item:nth-child(odd) {
    background: #e0ffe0;
}

.photo-app .photo-upload-item:nth-child(even) {
    background: #d0f5d0;
}

.photo-app .photo-upload-item--done {
    background: #d8f0d8;
}

.photo-app .photo-upload-item--error {
    background: #eed0d0;
}

.photo-app .photo-upload-item--cancelled {
    opacity: .7;
}

.photo-app .photo-upload-preview {
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: #b7cbb7;
}

.photo-app .photo-upload-preview__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-app .photo-upload-item__content,
.photo-app .photo-upload-item__actions {
    min-width: 0;
}

.photo-app .photo-upload-item__name {
    display: block;
    overflow: hidden;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-app .photo-upload-item__meta,
.photo-app .photo-upload-item__status {
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
}

.photo-app .photo-upload-item__status {
    min-height: 16px;
    margin-top: 3px;
}

.photo-app .photo-upload-item--error .photo-upload-item__status {
    color: #990000;
}

.photo-app .photo-upload-caption {
    margin-top: 4px;
}

/* "Save caption" appears under the caption input while editing. */
.photo-app .photo-caption-save {
    margin-top: 4px;
}

.photo-app .photo-upload-item__actions {
    display: grid;
    gap: 3px;
}

.photo-app .photo-upload-action {
    min-height: 21px;
    padding: 1px 8px;
    font-size: 8pt;
}

.photo-app .photo-button--quiet {
    border-color: transparent;
    background: transparent;
    text-shadow: none;
}

.photo-app .photo-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #9fbd9f;
    border-top-color: #356b35;
    border-radius: 50%;
    animation: photo-spinner-rotate 700ms linear infinite;
}

@keyframes photo-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

.photo-app .photo-upload-fallback {
    display: none;
}

.photo-app .photo-uploader--fallback .photo-upload-fallback {
    display: block;
}

.photo-app .photo-tips {
    padding: 7px 9px 7px 25px;
    margin: 1px 0 0;
}

.photo-app .photo-tips li {
    margin-bottom: 5px;
}

/* Management */
.photo-app .photo-manage-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 3px;
    align-items: start;
    min-width: 0;
}

.photo-app .photo-manage-panel {
    min-width: 0;
    margin: 0;
}

.photo-app .photo-new-album-body {
    min-height: 112px;
    padding: 9px;
}

.photo-app .photo-new-album-body p {
    margin: 0 0 12px;
}

.photo-app .photo-my-albums {
    display: grid;
    gap: 1px;
    min-width: 0;
    background: #f5fff5;
    background: var(--photo-page);
}

.photo-app .photo-my-album,
.photo-app .photo-my-album__summary {
    min-width: 0;
}

.photo-app .photo-my-album__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 50px;
    padding: 6px 8px;
}

.photo-app .photo-my-album__title {
    display: inline-block;
    font-weight: bold;
    overflow-wrap: anywhere;
}

.photo-app .photo-my-album__meta {
    margin-top: 3px;
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
    overflow-wrap: anywhere;
}

.photo-app .photo-gear-button,
.photo-app .photo-sheet-close {
    display: inline-grid;
    width: 27px;
    height: 27px;
    padding: 4px;
    border: 0;
    border-radius: 0;
    place-items: center;
    color: #336633;
    background: rgba(255, 255, 255, .36);
    cursor: pointer;
}

.photo-app .photo-gear-button:hover,
.photo-app .photo-sheet-close:hover {
    color: #003300;
    background: #c4f8c4;
    background: var(--photo-hover-bg);
}

.photo-app .photo-gear-button svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.photo-app .photo-settings-fallback {
    max-width: 620px;
    margin: 0 auto 4px;
}

.photo-app .photo-settings-form {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 10px;
}

/* Confirmation dialog body ("Really delete? Yes/No"). */
.photo-app .photo-confirm-form {
    min-width: 0;
    padding: 13px 11px;
}

.photo-app .photo-confirm-form p {
    margin: 0 0 13px;
    font-weight: bold;
}

.photo-app .photo-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.photo-app .photo-confirm-actions .photo-button {
    min-width: 76px;
}

.photo-app .photo-settings-form label {
    min-width: 0;
}

.photo-app .photo-settings-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.photo-app .photo-delete-fallback,
.photo-app .photo-settings-delete-form {
    padding: 0 10px 10px;
    text-align: left;
}

.photo-app .photo-delete-link,
.photo-app .photo-report-link {
    padding: 0;
    border: 0;
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
}

/* Deletion is an action: red, same size as the checkbox description. */
.photo-app .photo-delete-link {
    color: #990000;
    color: var(--photo-red);
    font-size: 9pt;
}

.photo-app .photo-delete-link:hover {
    color: #cc0000;
}

.photo-app .photo-report-link {
    color: #778877;
    font-size: 8pt;
}

.photo-app .photo-report-link:hover {
    color: #990000;
    color: var(--photo-red);
}

/* The delete link lines up with the label text after the checkbox. */
.photo-app .photo-settings-delete-form .photo-delete-link,
.photo-app .photo-delete-fallback .photo-delete-link {
    margin-top: 5px;
    margin-left: 18px;
}

.photo-app .photo-settings-overlay {
    position: fixed;
    z-index: 10020;
    inset: 0;
    display: grid;
    padding: 18px;
    place-items: center;
    background: rgba(0, 51, 0, .4);
}

.photo-app .photo-settings-sheet {
    width: min(430px, 100%);
    min-width: 0;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .12), 0 5px 10px rgba(0, 0, 0, .24);
}

.photo-app .photo-settings-sheet--wide {
    width: min(580px, 100%);
}

.photo-app .photo-rules-actions {
    justify-content: center;
    margin-top: 12px;
}

.photo-app .photo-settings-sheet__head {
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 5px 3px 9px;
}

.photo-app .photo-sheet-close {
    font-size: 14pt;
    line-height: 1;
}

/* Viewer */
.photo-app .photo-viewer {
    min-width: 0;
    margin-top: 4px;
}

.photo-app .photo-viewer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 4px 7px;
}

.photo-app .photo-viewer__top-title {
    min-width: 0;
    overflow: hidden;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-app .photo-viewer__stage {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 430px;
    max-height: 72vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0f1c0f;
    touch-action: pan-y pinch-zoom;
}

.photo-app .photo-viewer__image {
    display: block;
    max-width: calc(100% - 78px);
    max-height: 70vh;
    object-fit: contain;
}

.photo-app .photo-viewer__count {
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 7px;
    padding: 2px 5px;
    color: #e9f5e9;
    background: rgba(0, 51, 0, .58);
    font-size: 8pt;
}

.photo-app .photo-viewer__arrow {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    display: grid;
    width: 39px;
    place-items: center;
    color: rgba(255, 255, 255, .68);
    background: rgba(0, 51, 0, .18);
    font-size: 30px;
    text-decoration: none;
}

.photo-app .photo-viewer__arrow:hover {
    color: #ffffff;
    background: rgba(0, 51, 0, .45);
}

.photo-app .photo-viewer__arrow--previous {
    left: 0;
}

.photo-app .photo-viewer__arrow--next {
    right: 0;
}

.photo-app .photo-viewer__info {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
    gap: 16px;
    min-width: 0;
    padding: 8px 9px;
}

.photo-app .photo-viewer__info h1 {
    margin: 0;
    font-size: 9pt;
    overflow-wrap: anywhere;
}

.photo-app .photo-viewer__info p {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

.photo-app .photo-owner-tool {
    margin-top: 8px;
    color: #669966;
    color: var(--photo-muted);
    font-size: 8pt;
}

.photo-app .photo-owner-tool > summary {
    display: inline-block;
    color: #336633;
    cursor: pointer;
    text-decoration: underline;
}

.photo-app .photo-owner-tool > summary::-webkit-details-marker {
    display: none;
}

.photo-app .photo-owner-tool[open] > summary {
    color: #003300;
    font-weight: bold;
}

.photo-app .photo-owner-tool--delete > summary {
    color: #778877;
}

.photo-app .photo-owner-form {
    max-width: 560px;
    margin-top: 4px;
    padding: 7px;
    background: rgba(255, 255, 255, .38);
}

.photo-app .photo-owner-caption {
    min-height: 58px;
    resize: vertical;
}

.photo-app .photo-owner-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.photo-app .photo-delete-confirm {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #669966;
    color: var(--photo-muted);
}

.photo-app .photo-delete-confirm input {
    flex: 0 0 auto;
    margin: 1px 0 0;
}

.photo-app .photo-viewer__facts {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 2px 7px;
    margin: 0;
    font-size: 8pt;
}

.photo-app .photo-viewer__facts dt {
    color: #669966;
    color: var(--photo-muted);
}

.photo-app .photo-viewer__facts dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.photo-app .photo-report-form {
    margin-top: 9px;
    text-align: right;
}

.photo-app .photo-filmstrip {
    min-width: 0;
    margin-top: 3px;
    overflow: hidden;
    background: #d0eed0;
    background: var(--photo-green-bg);
}

.photo-app .photo-filmstrip__track {
    display: flex;
    gap: 3px;
    align-items: center;
    min-width: 0;
    padding: 5px 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scrollbar-color: #b3dbb3 #d0eed0;
    scrollbar-width: thin;
}

.photo-app .photo-filmstrip__track::-webkit-scrollbar {
    height: 5px;
}

.photo-app .photo-filmstrip__track::-webkit-scrollbar-track {
    background: #d0eed0;
}

.photo-app .photo-filmstrip__track::-webkit-scrollbar-thumb {
    background: #b3dbb3;
}

.photo-app .photo-filmstrip__spacer {
    flex: 0 0 calc(50% - 45px);
}

.photo-app .photo-filmstrip__item {
    position: relative;
    display: block;
    flex: 0 0 76px;
    height: 54px;
    overflow: hidden;
    opacity: .68;
}

.photo-app .photo-filmstrip__item:hover {
    opacity: .92;
}

.photo-app .photo-filmstrip__item.is-current {
    opacity: 1;
    box-shadow: inset 0 -3px #990000;
}

.photo-app .photo-filmstrip__item.is-current::after {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px #efffef;
    content: "";
    pointer-events: none;
}

.photo-app .photo-filmstrip__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Night mode. The game swaps gw.css for gw-nightgray.css in the PDA
   header when $NIGHT_MODE==1 and page_start.php adds this class by the
   same test. Game panel classes (greenbg etc.) go dark by themselves;
   everything below repaints our own hardcoded colors with the
   gw-nightgray palette: page #151515, text #808080, links #909090,
   panels #1a1a1a-#1e1e1e, inputs #001000/#393939, red #8c5151. */
.photo-app.photo-theme-night {
    --photo-page: #151515;
    --photo-green: #808080;
    --photo-link: #909090;
    --photo-hover: #959595;
    --photo-red: #8c5151;
    --photo-green-bg: #1e1e1e;
    --photo-green-green: #1b1b1b;
    --photo-green-light: #1a1a1a;
    --photo-hover-bg: #1e2f1e;
    --photo-muted: #6f6f6f;
    --photo-control-border: #393939;
    color-scheme: dark;
}

.photo-app.photo-theme-night :focus-visible {
    outline-color: #4a7a4a;
}

.photo-app.photo-theme-night .photo-nav__button {
    background: #2b2b2b;
}

.photo-app.photo-theme-night .photo-nav__button--upload {
    background: #313131;
}

.photo-app.photo-theme-night .photo-nav__button:hover {
    background: #1e2f1e;
}

.photo-app.photo-theme-night .photo-nav__button--active,
.photo-app.photo-theme-night .photo-nav__button--active:hover {
    background: #1e1e1e;
}

.photo-app.photo-theme-night .photo-button {
    color: #aaaaaa;
    background: #2b2b2b;
    text-shadow: none;
}

.photo-app.photo-theme-night .photo-button:hover {
    color: #aaaaaa;
    background: #203020;
}

.photo-app.photo-theme-night .photo-button:active {
    background: #1f1f1f;
}

.photo-app.photo-theme-night .photo-button--primary,
.photo-app.photo-theme-night .photo-button--primary:hover,
.photo-app.photo-theme-night .photo-button--primary:active {
    border-color: #2f5a2f;
    color: #cfe0cf;
    background: #245024;
}

.photo-app.photo-theme-night .photo-button--primary:hover {
    background: #2c612c;
}

.photo-app.photo-theme-night .photo-button--quiet {
    border-color: transparent;
    background: transparent;
}

.photo-app.photo-theme-night .photo-field-control,
.photo-app.photo-theme-night .photo-select,
.photo-app.photo-theme-night .photo-upload-caption {
    color: #909090;
    background: #001000;
    box-shadow: none;
}

.photo-app.photo-theme-night .photo-form-label,
.photo-app.photo-theme-night .photo-search-box > label,
.photo-app.photo-theme-night .photo-search-box label {
    color: #8a8a8a;
}

.photo-app.photo-theme-night .photo-notice,
.photo-app.photo-theme-night .photo-alert {
    color: #b39b66;
    background: #2a2416;
}

.photo-app.photo-theme-night .photo-notice--error,
.photo-app.photo-theme-night .photo-alert--error {
    color: #b07474;
    background: #2a1a1a;
}

.photo-app.photo-theme-night .photo-notice--success {
    color: #7aa87a;
    background: #1a241a;
}

.photo-app.photo-theme-night .photo-category-list li:nth-child(odd) {
    background: #1a1a1a;
}

.photo-app.photo-theme-night .photo-category-list li:nth-child(even) {
    background: #1b1b1b;
}

.photo-app.photo-theme-night .photo-card:nth-child(odd) {
    background: #1a1a1a;
}

.photo-app.photo-theme-night .photo-card:nth-child(even) {
    background: #1b1b1b;
}

.photo-app.photo-theme-night .photo-card__image,
.photo-app.photo-theme-night .photo-album-tile,
.photo-app.photo-theme-night .photo-album-row__thumb,
.photo-app.photo-theme-night .photo-upload-preview {
    background: #262626;
}

.photo-app.photo-theme-night .photo-album-tile::after {
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}

.photo-app.photo-theme-night .photo-forum-pager a.clr,
.photo-app.photo-theme-night .photo-forum-pager a.clr:visited {
    color: #909090;
}

.photo-app.photo-theme-night .photo-forum-pager a.redlightfont,
.photo-app.photo-theme-night .photo-forum-pager a.redlightfont:visited {
    color: #8c5151;
}

.photo-app.photo-theme-night .photo-dropzone {
    outline-color: #4a4a4a;
}

.photo-app.photo-theme-night .photo-dropzone--active {
    background: #203020;
    outline-color: #6a8a6a;
}

.photo-app.photo-theme-night .photo-dropzone__icon {
    box-shadow: inset 0 0 0 2px #666666, inset 0 0 0 5px #1f1f1f;
}

.photo-app.photo-theme-night .photo-dropzone__icon::before,
.photo-app.photo-theme-night .photo-dropzone__icon::after {
    background: #666666;
}

.photo-app.photo-theme-night .photo-dropzone__icon::after {
    box-shadow: 0 0 0 3px #1f1f1f;
}

.photo-app.photo-theme-night .photo-progress {
    border-color: #393939;
    background: #1a1a1a;
}

.photo-app.photo-theme-night .photo-progress__bar {
    background: #245024;
}

.photo-app.photo-theme-night .photo-upload-item:nth-child(odd) {
    background: #1a1a1a;
}

.photo-app.photo-theme-night .photo-upload-item:nth-child(even) {
    background: #1b1b1b;
}

.photo-app.photo-theme-night .photo-upload-item--done {
    background: #1a241a;
}

.photo-app.photo-theme-night .photo-upload-item--error {
    background: #2a1a1a;
}

.photo-app.photo-theme-night .photo-upload-item--error .photo-upload-item__status {
    color: #b07474;
}

.photo-app.photo-theme-night .photo-spinner {
    border-color: #3a3a3a;
    border-top-color: #8a8a8a;
}

.photo-app.photo-theme-night .photo-gear-button,
.photo-app.photo-theme-night .photo-sheet-close {
    color: #909090;
    background: rgba(255, 255, 255, .05);
}

.photo-app.photo-theme-night .photo-gear-button:hover,
.photo-app.photo-theme-night .photo-sheet-close:hover {
    color: #aaaaaa;
}

.photo-app.photo-theme-night .photo-delete-link:hover {
    color: #a66a6a;
}

.photo-app.photo-theme-night .photo-report-link {
    color: #6f6f6f;
}

.photo-app.photo-theme-night .photo-settings-overlay {
    background: rgba(0, 0, 0, .8);
}

.photo-app.photo-theme-night .photo-viewer__stage {
    background: #0d0d0d;
}

.photo-app.photo-theme-night .photo-viewer__count {
    color: #b0b0b0;
    background: rgba(0, 0, 0, .7);
}

.photo-app.photo-theme-night .photo-viewer__arrow {
    color: rgba(255, 255, 255, .55);
    background: rgba(0, 0, 0, .3);
}

.photo-app.photo-theme-night .photo-viewer__arrow:hover {
    color: #d0d0d0;
    background: rgba(0, 0, 0, .6);
}

.photo-app.photo-theme-night .photo-owner-tool > summary {
    color: #909090;
}

.photo-app.photo-theme-night .photo-owner-tool[open] > summary {
    color: #a8a8a8;
}

.photo-app.photo-theme-night .photo-owner-tool--delete > summary {
    color: #6f6f6f;
}

.photo-app.photo-theme-night .photo-owner-form {
    background: rgba(255, 255, 255, .05);
}

.photo-app.photo-theme-night .photo-filmstrip__track {
    scrollbar-color: #404040 #202020;
}

.photo-app.photo-theme-night .photo-filmstrip__track::-webkit-scrollbar-track {
    background: #202020;
}

.photo-app.photo-theme-night .photo-filmstrip__track::-webkit-scrollbar-thumb {
    background: #404040;
}

.photo-app.photo-theme-night .photo-filmstrip__item.is-current {
    box-shadow: inset 0 -3px #8c5151;
}

.photo-app.photo-theme-night .photo-filmstrip__item.is-current::after {
    box-shadow: inset 0 0 0 2px #3a3a3a;
}

.photo-app.photo-theme-contrast {
    --photo-green: #001900;
    --photo-link: #002f00;
    --photo-hover: #006b00;
    --photo-muted: #304830;
}

@media (max-width: 900px) {
    .photo-app .photo-gallery-layout {
        display: block;
    }

    /* Search drops below the categories: single sidebar column. */
    .photo-app .photo-sidebar {
        display: block;
        margin-bottom: 3px;
    }

    .photo-app .photo-category-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .photo-app .photo-upload-layout {
        grid-template-columns: minmax(0, 1fr) 210px;
    }
}

@media (max-width: 650px) {
    .photo-app .photo-shell {
        width: 100%;
        margin-top: 2px;
    }

    .photo-app .photo-nav {
        padding-right: 4px;
        padding-left: 4px;
    }

    .photo-app .photo-nav__button,
    .photo-app .photo-button {
        min-height: 32px;
    }

    .photo-app .photo-category-list {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-category-list a {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 30px;
    }

    .photo-app .photo-category-list__mark {
        display: none;
    }

    .photo-app .photo-search-row,
    .photo-app .photo-upload-settings {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-upload-settings .photo-select,
    .photo-app .photo-upload-settings .photo-button {
        height: 32px;
        min-height: 32px;
    }

    .photo-app .photo-intro-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .photo-app .photo-intro-row .photo-aux {
        display: none;
    }

    .photo-app .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
    }

    .photo-app .photo-album-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 5px;
    }

    .photo-app .photo-album-row__latest {
        max-height: 26px;
        justify-content: flex-start;
    }

    .photo-app .photo-album-row__thumb {
        width: 34px;
        height: 26px;
    }

    .photo-app .photo-album-hero {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-album-hero .photo-button {
        width: 100%;
    }

    .photo-app .photo-album-tiles {
        gap: 2px;
    }

    .photo-app .photo-album-tile {
        flex-basis: calc(var(--photo-ratio, 1.33) * 104px);
        height: 104px;
    }

    .photo-app .photo-album-tiles::after {
        flex-basis: 150px;
    }

    .photo-app .photo-upload-layout {
        display: block;
    }

    .photo-app .photo-upload-tips {
        margin-top: 3px;
    }

    .photo-app .photo-dropzone {
        display: block;
        min-height: 0;
        padding: 10px;
        outline: 0;
    }

    .photo-app .photo-dropzone__icon,
    .photo-app .photo-dropzone__desktop,
    .photo-app .photo-dropzone__desktop-action {
        display: none;
    }

    .photo-app .photo-dropzone__mobile {
        display: block;
    }

    .photo-app .photo-dropzone__mobile .photo-button {
        width: 100%;
        min-height: 39px;
    }

    .photo-app .photo-upload-toolbar {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-upload-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .photo-app .photo-upload-total-progress {
        grid-column: auto;
    }

    .photo-app .photo-upload-item {
        grid-template-columns: 56px minmax(0, 1fr) auto;
    }

    .photo-app .photo-upload-item__actions {
        grid-column: 3;
        grid-row: 1;
    }

    .photo-app .photo-manage-grid {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-new-album-body {
        min-height: 0;
    }

    .photo-app .photo-settings-overlay {
        padding: 0;
        place-items: end center;
    }

    .photo-app .photo-settings-sheet {
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .photo-app .photo-viewer__top {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .photo-app .photo-viewer__top .photo-aux {
        display: none;
    }

    .photo-app .photo-viewer__stage {
        min-height: 220px;
        max-height: 58vh;
    }

    .photo-app .photo-viewer__image {
        max-width: calc(100% - 54px);
        max-height: 55vh;
    }

    .photo-app .photo-viewer__arrow {
        width: 29px;
        font-size: 22px;
    }

    .photo-app .photo-viewer__info {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-viewer__facts {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .photo-app .photo-report-form {
        text-align: left;
    }

    .photo-app .photo-filmstrip__item {
        flex-basis: 64px;
        height: 45px;
    }

    .photo-app .photo-filmstrip__spacer {
        flex-basis: calc(50% - 39px);
    }
}

@media (max-width: 420px) {
    .photo-app .photo-card__meta span:last-child {
        display: none;
    }

    .photo-app .photo-intro-row {
        grid-template-columns: 1fr;
    }

    .photo-app .photo-intro-row .photo-button {
        width: 100%;
    }

    .photo-app .photo-album-row__latest {
        display: none;
    }

    .photo-app .photo-my-album__meta {
        font-size: 7pt;
    }
}

@media (pointer: coarse) {
    .photo-app .photo-dropzone {
        display: block;
        min-height: 0;
        padding: 10px;
        outline: 0;
    }

    .photo-app .photo-dropzone__icon,
    .photo-app .photo-dropzone__desktop,
    .photo-app .photo-dropzone__desktop-action {
        display: none;
    }

    .photo-app .photo-dropzone__mobile {
        display: block;
    }

    .photo-app .photo-dropzone__mobile .photo-button {
        width: 100%;
        min-height: 39px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-app *,
    .photo-app *::before,
    .photo-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .photo-app .photo-nav,
    .photo-app .photo-uploader,
    .photo-app .photo-report-form,
    .photo-app .photo-settings-overlay,
    .photo-app .photo-gear-button,
    .photo-app .photo-button {
        display: none !important;
    }
}