:root { --ink: #1c2430; --muted: #667; --accent: #ffd24a; --bar-on: #4b5563; --bar-off: #d1d5db;
  --heart-nudge: 2px; color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
 font-family: system-ui, -apple-system, sans-serif; color: var(--ink); }
a, button, select, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Full-page background photo. Falls back to the gradient if the file is missing. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
background: url("halifax.jpg") center / cover no-repeat,
        linear-gradient(#2b3a52, #0f1722); }

/* Header */
header { position: relative; background: var(--ink);
   padding: .9rem max(1.25rem, env(safe-area-inset-right)) .9rem max(1.25rem, env(safe-area-inset-left));
   display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.brand { color: #fff; text-decoration: none; font-weight: 800;
   font-size: clamp(1.05rem, 3.5vw, 1.4rem); }

/* Three-bar menu button */
.menu-btn { background: none; border: 0; padding: .7rem; cursor: pointer;
      display: flex; flex-direction: column; gap: 5px; }
.menu-btn span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 2px; }

/* Menu dropdown panel */
.site-menu { position: absolute; top: 100%; left: 1rem; z-index: 10; min-width: 200px;
       background: #fff; border-radius: 0 0 12px 12px; padding: .4rem 0;
       box-shadow: 0 8px 20px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.site-menu[hidden] { display: none; }
.site-menu a, .site-menu .signout { padding: .8rem 1.25rem; color: var(--ink); text-decoration: none;
font: inherit; font-weight: 600; text-align: left; background: none;
border: 0; width: 100%; cursor: pointer; display: block; }
.site-menu form { margin: 0; }
.menu-sep { height: 1px; background: #e5e7eb; margin: .3rem 0; }

/* Bar feed selection dropdown */
#cam-picker { appearance: none; -webkit-appearance: none; cursor: pointer;
min-width: 220px; max-width: 52%; padding: .75rem 3rem .75rem 1rem;
font-size: 1.05rem; font-weight: 600; color: var(--ink);
border: 0; border-radius: 10px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c2430' stroke-width='2'/%3E%3C/svg%3E")
no-repeat right 1.1rem center; }

/* Content card over the photo */
main { width: min(960px, calc(100% - 2rem)); margin: 1.5rem auto; flex: 1;
 padding: 1.5rem; background: rgba(255,255,255,.93); border-radius: 14px; }
.badge { display: inline-block; background: var(--accent); color: #402; font-weight: 700;
   font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; }

.frame { aspect-ratio: 16 / 9; background: #dfe3e8; display: grid; place-items: center;
   border-radius: 8px; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.offline img { display: none; }
.frame.offline::after { content: "Camera offline"; color: var(--muted); }
.meta { color: var(--muted); }

/* Busy meter (neutral gray: filled bars = level) */
.meter { display: inline-flex; align-items: center; gap: .6rem; margin: .25rem 0 1rem; }
.bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.bars i { display: block; width: 8px; background: var(--bar-off); border-radius: 2px; }
.bars i:nth-child(1) { height: 9px; }
.bars i:nth-child(2) { height: 15px; }
.bars i:nth-child(3) { height: 22px; }
.lvl-1 .bars i:nth-child(-n+1),
.lvl-2 .bars i:nth-child(-n+2),
.lvl-3 .bars i:nth-child(-n+3) { background: var(--bar-on); }
.meter .label { font-weight: 700; }
.lvl-0 .label { color: var(--muted); font-weight: 600; }

/* Head count: icon with a number */
.people { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.people .head { fill: currentColor; flex: none; }
.people .num { min-width: 2.2rem; text-align: center; padding: .15rem .6rem;
         background: #e5e7eb; border-radius: 999px; }

/* Busy meter on the left, head count on the right (above the photo) */
.statusrow { display: flex; justify-content: space-between; align-items: center;
       gap: 1rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.statusrow .meter { margin: 0; }
.statuscount { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.statusrow.nofeed { opacity: .55; }

/* Bar name with the heart beside it (same spot for every bar) */
.titlerow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.titlerow h1 { margin: 0; line-height: 1.15; }

/* Hearts */
.heart { fill: none; stroke: #9ca3af; stroke-width: 2; stroke-linejoin: round;
   flex: none; display: block; width: 18px; height: 18px; }
.like { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .35rem .8rem; text-decoration: none;
  border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #4b5563;
  font: inherit; font-weight: 700; font-size: .9rem; line-height: 1; cursor: pointer;
  transition: transform .1s, border-color .15s; }
.like .num { display: block; line-height: 1; }
.like:active { transform: scale(.94); }
.like:disabled { opacity: .6; cursor: default; }
.like.on { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.like.on .heart { fill: #e11d48; stroke: #e11d48; }

.likes { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700;
   font-size: .9rem; color: #6b7280; line-height: 1; }
.likes .heart { width: 16px; height: 16px; }
.likes .num { line-height: 1; }
.likes.mine { color: #be123c; }
.likes.mine .heart { fill: #e11d48; stroke: #e11d48; }

/* Bar cards: name, hearts, head count, busy meter. Every bar uses the same card. */
h2 { margin-top: 2rem; }
.feeds { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.feed { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .75rem;
  min-height: 4.4rem; padding: .9rem 1rem; background: #fff; border: 1px solid #dfe3e8;
  border-radius: 12px; text-decoration: none; color: inherit; font-weight: 600; }
.feed.has-likes { grid-template-columns: 1fr auto auto auto; gap: .9rem; }
.feed[hidden] { display: none; }
.feed:active { border-color: var(--ink); }
.feed .feed-name { text-align: left; min-width: 0; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.feed .status { display: contents; }
.feed .meter { margin: 0; justify-self: end; }
/* Nudge the heart and its count down so they line up with the text beside them. */
.feed .likes { position: relative; top: var(--heart-nudge); }
.nofeed-label { grid-column: span 2; justify-self: end; white-space: nowrap;
          color: var(--muted); font-weight: 600; }

.seemore { margin: 1rem 0 0; font-weight: 700; }
.seemore a { color: var(--ink); }

/* All-bars page: search and filters */
.searchbar { display: flex; gap: .6rem; margin: 1rem 0 .75rem; max-width: 520px; }
.searchbar input { flex: 1; min-width: 0; padding: .7rem .8rem; font-size: 1rem;
             border: 1px solid #c7ccd4; border-radius: 8px; background: #fff; color: var(--ink); }
.filters { margin: .25rem 0 1rem; }
.filters summary { display: inline-block; cursor: pointer; font-weight: 700; padding: .5rem .9rem;
             border: 1px solid #c7ccd4; border-radius: 8px; background: #fff; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters-body { margin-top: .6rem; padding: .9rem 1rem; background: #fff;
          border: 1px solid #dfe3e8; border-radius: 10px; }

/* A bar's own page when it has no feed */
.frame.nofeed-frame { background: #e5e7eb; min-height: 300px; }
.nofeed-inner { width: 100%; text-align: center; padding: 1.5rem; max-width: 420px; color: #4b5563; }
.nofeed-inner h2 { margin: .5rem 0 .25rem; color: var(--ink); }
.nofeed-inner p { margin: .5rem 0; }
.camoff { fill: none; stroke: #9ca3af; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.request { display: grid; gap: .5rem; justify-items: center; margin-top: 1rem; }
.reqbtn { display: inline-block; padding: .7rem 1.1rem; border-radius: 10px; border: 0;
    background: var(--ink); color: #fff; text-decoration: none;
    font: inherit; font-weight: 700; cursor: pointer; }
.reqbtn.on { background: #4b5563; }
.reqbtn:disabled { opacity: .6; cursor: default; }
.reqnum { font-size: .9rem; color: #6b7280; }

/* Messages */
.flash { padding: .75rem 1rem; border-radius: 10px; margin: 0 0 1rem; font-weight: 600; }
.flash.ok { background: #e7f5ec; color: #1d5a35; }
.flash.error { background: #fdecec; color: #8a2020; }

/* Forms (sign in, sign up, account, suggest, host, inquiries) */
.form { max-width: 520px; display: grid; gap: 1rem; margin: 1rem 0; }
.form label { display: grid; gap: .35rem; font-weight: 600; }
.form label[hidden] { display: none; }
.form input:not([type="checkbox"]), .form select, .form textarea {
padding: .7rem .8rem; font-size: 1rem; font-family: inherit; border: 1px solid #c7ccd4;
border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.form textarea { min-height: 9rem; resize: vertical; line-height: 1.4; }
.counter { justify-self: end; font-weight: 500; font-size: .85rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.checks { display: grid; gap: .6rem; }
.form .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.form .check input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.hint { color: var(--muted); font-size: .9rem; margin: 0; }
.btn { padding: .8rem 1.2rem; font-size: 1rem; font-weight: 700; color: #fff; background: var(--ink);
 border: 0; border-radius: 10px; cursor: pointer; justify-self: start; }
.btn.secondary { background: #4b5563; }
.btn.danger { background: #a12626; }

/* Link-style buttons (thank-you pages) */
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.btn-link { display: inline-block; padding: .8rem 1.4rem; border-radius: 10px; font-weight: 700;
      text-decoration: none; background: var(--ink); color: #fff; }
.btn-link.secondary { background: #e5e7eb; color: var(--ink); }

/* Footer bar */
footer { background: var(--ink); color: #cbd2dc; text-align: center;
   padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; }
footer a { color: #fff; text-decoration: none; font-weight: 600; }
footer p { margin: .6rem 0 0; font-size: .85rem; }

/* Hover effects only on devices with a mouse (on a phone they would stick after a tap) */
@media (hover: hover) {
.site-menu a:hover, .site-menu .signout:hover { background: #eef1f5; }
.like:hover { border-color: #e11d48; }
.like:hover .heart { stroke: #e11d48; }
.feed:hover { border-color: var(--ink); }
.reqbtn:hover, .btn:hover { opacity: .9; }
footer a:hover { text-decoration: underline; }
}

/* Bigger tap targets on touch screens */
@media (pointer: coarse) {
.like { min-height: 2.5rem; padding: .45rem .95rem; }
.reqbtn, .btn { min-height: 2.75rem; }
.filters summary { padding: .65rem 1rem; }
}

/* Phones */
@media (max-width: 640px) {
header { flex-wrap: wrap; row-gap: .6rem; }
#cam-picker { order: 3; flex: 1 1 100%; width: 100%; max-width: none; min-width: 0;
          text-overflow: ellipsis; }
.site-menu { left: 0; right: 0; border-radius: 0 0 12px 12px; }
.site-menu a, .site-menu .signout { padding: 1rem 1.25rem; font-size: 1.05rem; }

main { width: calc(100% - 1rem); margin: .75rem auto; padding: 1rem; border-radius: 12px; }
h1 { font-size: 1.6rem; }
h2 { margin-top: 1.5rem; }
.titlerow { gap: .5rem; }

/* One column that can never grow wider than the screen */
.feeds { grid-template-columns: minmax(0, 1fr); gap: .6rem; }

/* Each card becomes one flexible row: the name shrinks (with "...") to make room,
and the heart, head count, busy bars and "No feed yet" keep their size. */
.feed, .feed.has-likes { display: flex; align-items: center; gap: .55rem;
                     min-width: 0; max-width: 100%; padding: .8rem .9rem; min-height: 4rem; }
.feed .feed-name { flex: 1 1 0; min-width: 0; }
.feed .likes, .feed .meter { flex: none; }
.feed .status { display: flex; align-items: center; gap: .55rem; flex: none; min-width: 0; }
.feed .meter .label { display: none; }
.feed .people .num { min-width: 1.8rem; padding: .1rem .5rem; }
.nofeed-label { grid-column: auto; flex: none; font-size: .85rem; }

.row2 { grid-template-columns: 1fr; }
.form { max-width: none; }
.form .btn { width: 100%; justify-self: stretch; }
.searchbar { max-width: none; }
.frame.nofeed-frame { min-height: 240px; }
footer nav { gap: 1rem 1.25rem; }
.legal table { display: block; overflow-x: auto; }
}
/* Phone fix: the gray "No feed yet" box on a bar's own page */
@media (max-width: 640px) {
  .frame.nofeed-frame { aspect-ratio: auto; width: 100%; min-height: 0; padding: 1.5rem 1rem; }
  .nofeed-inner { padding: 0; max-width: 100%; }
}