/* partypic — mobile-first styles */

:root {
  --bg: #faf6f0;
  --card: #ffffff;
  --ink: #35302a;
  --muted: #8b8177;
  --line: #e8ddd0;
  --accent: #b06a72;       /* dusty rose */
  --accent-dark: #96545c;
  --gold: #b08d57;
  --fav: #ff8189;          /* a set favorite, on the tile and in the lightbox */
  --danger: #a13333;
  --focus: #1a73e8;      /* keyboard cursor — blue reads as "marked" */
}

* { box-sizing: border-box; }

/* The plain link colour comes first, because everything more specific below
   (.site-header a, .menu-items a, the lightbox bar) overrides it. */
a { color: var(--accent-dark); }

body { font-family: system-ui, sans-serif; margin: 0 auto; max-width: 64rem; padding: 0 1rem 2rem;
       background: var(--bg); color: var(--ink); }
body.wide { max-width: none; } /* the gallery gets the whole screen */
/* On a phone the width belongs to the photos, not to the margin. */
@media (max-width: 30rem) {
  body { padding-left: .3rem; padding-right: .3rem; }
}

/* site header */
.site-header { text-align: center; padding: 1.1rem 0 .9rem; margin-bottom: 1rem;
               border-bottom: 1px solid var(--line); }
.site-header a { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; letter-spacing: .06em;
                 color: var(--ink); text-decoration: none; }
.site-header .orn { color: var(--accent); font-size: 1.1rem; margin: 0 .45rem; }

h1 { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400;
     letter-spacing: .03em; }

/* forms & controls */
form p { display: flex; flex-direction: column; gap: .3rem; }
label { color: var(--muted); font-size: .9rem; }
input, select { font-size: 1rem; padding: .55rem .7rem; border: 1px solid var(--line);
                border-radius: .55rem; background: var(--card); color: var(--ink); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent);
                                                                  outline-offset: 1px; }
button { font-size: 1rem; padding: .55rem 1.1rem; cursor: pointer; border-radius: 2rem;
         border: 1px solid var(--line); background: var(--card); color: var(--ink); }
form button[type="submit"] { background: var(--accent); border-color: var(--accent); color: #fff; }
form button[type="submit"]:hover { background: var(--accent-dark); }
.linklike, form .linklike, form button.linklike { background: none; border: none; padding: 0;
                                                 color: var(--accent-dark); text-decoration: underline;
                                                 font-size: 1rem; border-radius: 0; }
.danger, form button.danger { color: var(--danger); }
.errorlist { color: var(--danger); padding-left: 1rem; }

/* cards (auth + upload pages) */
.card { background: var(--card); border: 1px solid var(--line); border-radius: .8rem;
        padding: 1.2rem; max-width: 24rem; margin: 1.5rem auto; box-shadow: 0 2px 10px rgba(80,60,40,.06); }
.card h1 { margin-top: 0; }
.hint { color: var(--muted); font-size: .9rem; }
.card-wide { max-width: 100%; }

/* help page: prose in a card, using the body's normal width (see card-wide) */
.prose h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 400;
            letter-spacing: .03em; margin: 1.5rem 0 .4rem; }
.prose ul { padding-left: 1.15rem; margin: .4rem 0; }
.prose li { margin-bottom: .4rem; }
.help-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* messages */
.messages { list-style: none; padding: 0; margin: 1rem 0; }
.messages li { padding: .6rem .9rem; border-radius: .55rem; margin-bottom: .5rem;
               background: var(--card); border: 1px solid var(--line);
               border-left: 4px solid var(--gold); }

/* nav & toolbar */
nav { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.inline { display: inline; }
/* nowrap is deliberate: the toolbar has to stay a single line on a phone,
   which is why its controls are glyphs rather than words */
.toolbar { display: flex; gap: .3rem; align-items: center; flex-wrap: nowrap;
           position: sticky; top: .5rem; z-index: 5;
           background: var(--card); border: 1px solid var(--line); border-radius: .8rem;
           padding: .4rem .45rem; box-shadow: 0 2px 10px rgba(80,60,40,.08); }
.toolbar select { padding: .35rem .5rem; max-width: 9rem; }
.toolbar-empty { justify-content: flex-end; } /* only the ☰ menu is left */
.toolbar .favglyph { color: var(--fav); font-size: 1.25rem; line-height: 1; } /* matches the tile heart */
/* the bare glyphs need the extra size to read */
#select-all, #toggle-order { font-size: 1.35rem; line-height: 1; }
.iconbtn svg { width: 1.15rem; height: 1.15rem; display: block; }
#selected-count { color: var(--muted); font-size: .9rem; margin-left: auto; }

.badge { background: #f3ead9; color: var(--gold); border: 1px solid var(--line);
         border-radius: .4rem; padding: 0 .4rem; font-size: .8rem; }

/* icon buttons */
.iconbtn { font-size: 1.05rem; padding: .35rem .65rem; border: 1px solid var(--line);
           border-radius: .5rem; background: var(--card); color: var(--ink);
           text-decoration: none; cursor: pointer; line-height: 1.2; }
/* One box for every control in the toolbar: the glyphs differ in size, the
   buttons must not. A fixed height beats line-height juggling. */
.toolbar .iconbtn { display: flex; align-items: center; justify-content: center;
                    height: 2.1rem; padding: 0 .45rem; }
.help-actions .iconbtn { padding: .55rem 1.1rem; } /* a page button, not a bar glyph */
.iconbtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
/* a toggle button that is on stays visibly pressed */
.iconbtn[aria-pressed="true"] { background: var(--bg); border-color: var(--fav); box-shadow: inset 0 1px 3px rgba(80,60,40,.18); }
.menu.disabled .iconbtn { opacity: .4; cursor: default; }

/* dropdown menus (details/summary) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:not(.iconbtn) { font-size: 1.2rem; padding: .3rem .6rem; border-radius: .5rem; }
.menu[open] > summary { background: var(--line); } /* open state is visible for both variants */
.menu-items { position: absolute; left: 0; top: calc(100% + .35rem); min-width: 13rem;
              background: var(--card); border: 1px solid var(--line); border-radius: .6rem;
              box-shadow: 0 6px 18px rgba(80,60,40,.18); padding: .35rem; z-index: 20;
              display: flex; flex-direction: column; gap: .1rem; }
.menu-right .menu-items { left: auto; right: 0; }
.menu-items a, .menu-items button { text-align: left; background: none; border: none;
                                    padding: .55rem .7rem; border-radius: .45rem;
                                    color: var(--ink); text-decoration: none; font-size: 1rem;
                                    width: 100%; }
.menu-items label { display: flex; gap: .5rem; align-items: center; cursor: pointer;
                    padding: .55rem .7rem; border-radius: .45rem; white-space: nowrap; }
.menu-items a:hover, .menu-items button:hover, .menu-items label:hover { background: var(--bg); }
.menu-items form { display: contents; }
/* menu entries stay plain even when they are submit buttons */
.menu-items button[type="submit"] { background: none; border: none; color: var(--ink); border-radius: .45rem; }
.menu-items button[type="submit"]:hover { background: var(--bg); }
.menu-items button[type="submit"].danger { color: var(--danger); }
.menu-version { padding: .4rem .7rem .1rem; color: var(--muted); font-size: .75rem;
                border-top: 1px solid var(--line); margin-top: .2rem; }

/* photo grid */
/* Tile width lives in --tile-min so the density toggle overrides one value. */
.grid { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .55rem;
        --tile-min: 120px;
        grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); }
.grid.dense { --tile-min: 78px; gap: .3rem; }
/* A wide screen should show bigger photos, not more of the same small ones. */
@media (min-width: 48rem) {
  .grid { --tile-min: 220px; gap: 1.1rem; }
  .grid.dense { --tile-min: 110px; gap: .5rem; }
}
@media (min-width: 90rem) {
  .grid { --tile-min: 300px; gap: 1.5rem; }
  .grid.dense { --tile-min: 140px; gap: .6rem; }
}
/* day heading: spans the whole row, so the grid keeps its own columns */
.daysep { grid-column: 1 / -1; font-family: Georgia, "Times New Roman", serif; color: var(--muted);
          font-size: .95rem; padding: .5rem 0 .1rem; border-bottom: 1px solid var(--line); }
.daysep:first-child { padding-top: 0; }
.tile { position: relative; aspect-ratio: 1; background: #efe8de; border-radius: .55rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(80,60,40,.12);
        transition: transform .12s ease, box-shadow .12s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(80,60,40,.18); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.tile .placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; gap: .3rem;
                     align-items: center; justify-content: center; color: var(--muted);
                     font-size: .75rem; padding: .3rem; text-align: center; word-break: break-all; }
/* The only hint that a video tile is playable, since there is no frame to show. */
.tile .placeholder .play { font-size: 1.6rem; line-height: 1; color: var(--accent); }
.tile input[type="checkbox"] { position: absolute; top: .3rem; left: .3rem; width: 1.2rem; height: 1.2rem;
                               margin: 0; accent-color: var(--accent); }
/* a fingertip needs a bigger target than a mouse pointer */
@media (pointer: coarse) {
  .tile input[type="checkbox"] { width: 1.7rem; height: 1.7rem; }
  /* On a dense phone grid the tile is 78 px, and the full-size box would
     cover a third of the photo. Smaller, but still the only way to select
     a tile — tapping the image opens the lightbox — so not tiny. */
  .grid.dense .tile input[type="checkbox"] { width: 1.3rem; height: 1.3rem; }
}
.tile.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.tile.focused { outline: 3px solid var(--focus); outline-offset: 1px; }
.tile .who { position: absolute; bottom: 0; left: 0; right: 0;
             background: linear-gradient(transparent, rgba(30,20,15,.75));
             color: #fff; font-size: .7rem; padding: .6rem 2.2rem .15rem .35rem; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.tile .fav { position: absolute; bottom: .05rem; right: .15rem; background: none; border: none;
             color: #fff; font-size: 1.25rem; padding: .1rem .2rem; text-shadow: 0 0 3px #000;
             border-radius: 0; }
.tile .fav.mine, #lightbox-fav.mine { color: var(--fav); }
.tile .fav .favn { font-size: .95rem; } /* the count keeps its old size */
.tile .badge-new { position: absolute; top: .3rem; right: .3rem; background: var(--accent);
                   color: #fff; border-radius: .4rem; padding: 0 .35rem; font-size: .7rem; }

/* upload progress list */
#upload-list { list-style: none; padding: 0; }
#upload-list li { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .55rem;
                  margin-bottom: .4rem; background: var(--card); font-size: .9rem; }

/* help dialog */
#help-dialog { border: 1px solid var(--line); border-radius: .8rem; padding: 1.2rem 1.4rem;
               max-width: 26rem; background: var(--card); color: var(--ink);
               box-shadow: 0 10px 30px rgba(80,60,40,.25); }
#help-dialog::backdrop { background: rgba(30,20,15,.45); }
#help-dialog h2 { margin-top: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
#help-dialog h3 { font-size: 1rem; margin-bottom: .4rem; }
.keys { list-style: none; padding: 0; margin: 0 0 1rem; }
.keys li { padding: .2rem 0; font-size: .92rem; }
kbd { background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px;
      border-radius: .3rem; padding: .05rem .4rem; font-size: .85em; font-family: inherit; }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: #16110e; display: flex;
            flex-direction: column; z-index: 10; }
.lightbox[hidden] { display: none; }
.lightbox img { flex: 1; min-height: 0; object-fit: contain; width: 100%; }
.lightbox video { flex: 1; min-height: 0; width: 100%; background: #000; }
/* The failure panel replaces the player, so it takes the same room. The
   [hidden] rule has to be spelled out: an author display beats the ua one. */
.lightbox .videoerror { flex: 1; min-height: 0; display: flex; flex-direction: column;
                        gap: .9rem; align-items: center; justify-content: center;
                        color: #e9e2da; padding: 1.5rem; text-align: center; }
.lightbox .videoerror[hidden] { display: none; }
.lightbox .videoerror a { color: #f0b9be; }
.lightbox .bar { display: flex; gap: 1.1rem; align-items: center; padding: .55rem 1rem;
                 color: #e9e2da; font-size: .9rem; flex-wrap: wrap; }
.lightbox .bar a, .lightbox .bar button { color: #f0b9be; }
/* The selection box: bigger than the text around it, because a ☐/☑ at label
   size is hard to tell apart at arm's length, and white when set so "marked"
   reads at a glance against the muted pink of the other controls. */
#lightbox-select { font-size: 1.25rem; line-height: 1; text-decoration: none; }
.lightbox .bar #lightbox-select.marked { color: #fff; }
/* The tap target is a tall column along each side of the photo — forgiving
   on a phone and with a mouse alike. Only the pill inside it is painted, and
   60% of the height keeps the column clear of the close button and the bar. */
.lightbox .nav { position: absolute; top: 50%; transform: translateY(-50%);
                 height: 60%; width: clamp(4rem, 20vw, 8rem); display: flex; align-items: center;
                 background: none; border: none; color: #fff; padding: 0 .5rem; }
.lightbox .nav > span { background: rgba(0,0,0,.45); border-radius: .45rem;
                        font-size: 1.6rem; line-height: 1; padding: .5rem .85rem; }
.lightbox .nav.prev { left: 0; justify-content: flex-start; }
.lightbox .nav.next { right: 0; justify-content: flex-end; }
/* While a video plays the columns pull back to the middle third: at 60% they
   reach down over both ends of the player's control strip, and a tap meant
   for the scrubber would step to the next photo instead. */
.lightbox.video .nav { height: 34%; }
.lightbox .close { position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.45);
                   color: #fff; border: none; font-size: 1.4rem; padding: .3rem .7rem; border-radius: .45rem; }
/* Landscape on a phone is a viewing posture: the photo takes the whole screen
   and the bar steps aside, rotating back brings it and its controls straight
   back. The height matters, not the orientation alone — a desktop window is
   landscape too, and a tablet has room for both. Close and the two tap
   columns are absolute, so they survive and the overlay stays escapable. */
@media (orientation: landscape) and (max-height: 30rem) {
  .lightbox .bar { display: none; }
}