/* Grouper: one small stylesheet, ocean-ish, no framework. */
:root {
  --ink: #123;
  --sea: #0b7285;
  --sel: #12b886;
  --warn: #e8590c;
  --line: #d5dde2;
  --line2: #9cb3bf;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  font: 16px/1.45 system-ui, sans-serif;
}
header {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .6rem 1rem; border-bottom: 2px solid var(--sea);
}
header .brand {
  font-weight: 800; font-size: 1.3rem; color: var(--sea);
  text-decoration: none;
}
.minifish { display: inline-flex; align-self: center; }
/* Oversized on purpose: negative margins keep the header short while
   the fish overhangs the bottom border. */
.minifish img {
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  border: 2px solid var(--sea); object-fit: cover;
  margin: -.4rem 0 -1.4rem; position: relative;
  box-shadow: 0 1px 4px rgb(11 114 133 / 25%);
}

header nav { flex: 1; text-align: right; }
header nav a { margin-left: .8rem; color: var(--sea); }
header nav details.menu { display: inline-block; margin-left: .8rem; }
.inlineform { display: inline; margin: 0 .3rem; }
.btnrow { margin: .3rem 0; }
main { max-width: 60rem; margin: 1rem auto 4rem; padding: 0 1rem; }

/* header menus: native details/summary, no JS; a shared name
   attribute keeps at most one open (SPEC 23) */
details.menu { position: relative; }
/* summaries read as controls: chip border plus a dropdown caret */
details.menu > summary {
  list-style: none; cursor: pointer; color: var(--sea);
  user-select: none; display: inline-block;
  border: 1px solid var(--line2); border-radius: .4rem;
  padding: .15rem .6rem; background: #fff;
}
details.menu > summary::after { content: " ▾"; font-size: .8em; }
details.menu > summary:hover { border-color: var(--sea);
  background: #eef7f9; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary { background: #e7f5ff;
  border-color: var(--sea); }
details.menu .popover {
  position: absolute; top: calc(100% + .5rem); z-index: 20;
  min-width: 15rem; padding: .7rem .9rem; text-align: left;
  background: #fff; border: 1px solid var(--line2);
  border-radius: .5rem; box-shadow: 0 2px 10px rgb(11 114 133 / 18%);
}
details.menu.left .popover { left: 0; }
details.menu.right .popover { right: 0; }
details.menu .popover ul { list-style: none; margin: 0; padding: 0; }
details.menu .popover li a { display: block; padding: .15rem 0; }
details.menu .popover a.current { font-weight: 700; }
details.menu .popover hr {
  border: 0; border-top: 1px solid var(--line); margin: .5rem 0;
}
details.menu .popover p { margin: .3rem 0; }
h1 .muted, h2 .muted, h3 .muted { font-size: .7em; }
.muted { color: #667; }
.fine { color: #667; font-size: .85rem; }

.hero { text-align: center; }
.hero h1 { font-size: 3rem; margin: .4rem 0 0; color: var(--sea); }
.blurb { max-width: 34rem; margin: 1.2rem auto .4rem; text-align: center; }
.tagline { font-style: italic; font-size: 1.2rem; margin-top: 0; }
.fishbox { position: relative; display: inline-block; margin-top: 1rem; }
.fishbox img {
  width: 240px; border-radius: 50%;
  border: 4px solid var(--sea);
}
.bubble {
  position: absolute; top: -1.4rem; right: -6rem;
  background: #fff; border: 2px solid var(--ink);
  border-radius: 1rem; padding: .3rem .8rem; font-weight: 600;
}
.bubble::after {
  content: ""; position: absolute; left: 8%; bottom: -12px;
  border: 6px solid transparent; border-top-color: var(--ink);
}
.codeform input { padding: .5rem; font-size: 1rem; width: 16rem; }
.resume { display: flex; gap: .8rem; justify-content: center;
  flex-wrap: wrap; margin: 1rem 0; }
a.btnlink {
  display: inline-block; background: var(--sea); color: #fff;
  padding: .55rem 1rem; border-radius: .4rem;
  text-decoration: none; font-size: 1.05rem;
}
.walks {
  display: grid; gap: 0 2rem; max-width: 46rem; margin: 2rem auto;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.walks ol { padding-left: 1.2rem; }

/* console: download links riding a heading, and the capped log pane */
.hlinks { font-size: .8rem; font-weight: 400; margin-left: .4rem; }

details.section > summary { list-style: none; cursor: pointer; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary h2 { display: inline-block; }
details.section > summary::before {
  content: "▷"; color: #667; margin-right: .5rem;
}
details.section[open] > summary::before { content: "▽"; }
.logpane {
  max-height: 22rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: .4rem;
}
.logpane table.list { width: 100%; }
.card .members { margin: .2rem 0; font-size: .9rem; }
.toolline { margin: 1rem 0; }

button {
  background: var(--sea); color: #fff; border: 0;
  padding: .45rem .9rem; border-radius: .4rem; cursor: pointer;
  font-size: .95rem;
}
button:disabled { opacity: .4; cursor: default; }
button.big { font-size: 1.1rem; padding: .7rem 1.3rem; }
button.danger { background: var(--warn); }
button.linkish {
  background: none; color: var(--sea); padding: 0;
  text-decoration: underline;
}
input, select {
  padding: .35rem; border: 1px solid var(--line);
  border-radius: .3rem; font-size: .95rem;
}
form.stack { display: grid; gap: .6rem; max-width: 26rem; }
form.stack label { display: grid; gap: .15rem; }
form.inline { display: inline-flex; gap: .5rem; align-items: center;
  margin: .2rem .4rem .2rem 0; flex-wrap: wrap; }

.banner {
  padding: .6rem .9rem; border-radius: .4rem; margin: .8rem 0;
  background: #e7f5ff; border: 1px solid #a5d8ff;
}
.banner.ok { background: #e6fcf5; border-color: #96f2d7; }
.banner.warn { background: #fff4e6; border-color: #ffd8a8; }

.cards { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
/* console group tiles: wide enough that the action buttons stay on
   one line */
.cards.wide {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.card ul.members {
  margin: .2rem 0; padding-left: 1.1rem; font-size: .9rem;
}
.card {
  border: 1px solid var(--line); border-radius: .5rem;
  padding: .6rem .9rem;
}
.card.needs { border-color: var(--warn); }
/* hub fit coloring: green = the group's whole meeting window lies
   inside the viewer's painted availability (SPEC section 7) */
.card.fits { border-color: var(--sel); background: #e6fcf5; }
.card.conflicts { background: #f1f3f5; color: #556; }
.pill {
  background: var(--warn); color: #fff; border-radius: 1rem;
  padding: .05rem .5rem; font-size: .75rem; margin-left: .3rem;
  white-space: nowrap;
}
.pill.ok { background: var(--sel); }
.pill.warn { background: #868e96; }

.statrow { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0; }
/* flex-basis 0 + grow: tiles share the row equally, filling the
   full text width; labels wrap inside as needed */
.stat {
  border: 1px solid var(--line); border-radius: .5rem;
  padding: .4rem .7rem; text-align: center; font-size: .8rem;
  color: #667; flex: 1 1 0;
}
.stat b { display: block; font-size: 1.3rem; color: var(--ink); }
.stat .copy { display: block; margin: .3rem auto 0; }

table.grid { border-collapse: collapse; touch-action: none;
  user-select: none; width: 100%; table-layout: fixed; }
table.grid th {
  font-size: .7rem; font-weight: 500; color: #667;
  padding: 0 .3rem;
}
table.grid thead th { text-align: center; padding-bottom: .2rem; }
/* fixed layout: the corner th sizes the time-label column, the day
   columns split the rest of the page width evenly */
table.grid thead th:first-child { width: 3.6rem; }
table.grid tbody th, table.grid tfoot th:first-child {
  text-align: right; position: relative;
}
/* hour labels straddle the gridline where that hour starts */
table.grid tbody th span, table.grid tfoot th span {
  position: absolute; top: 0; right: .3rem;
  transform: translateY(-50%); white-space: nowrap;
}
table.grid td.cell {
  height: .72rem; border: 1px solid var(--line);
  background: rgb(11 114 133 / calc(var(--h, 0) * 45%));
  cursor: pointer; position: relative;
}
table.grid tr.hr td.cell { border-top: 2px solid var(--line2); }
table.grid tfoot th:last-child { border-top: 2px solid var(--line2); }
table.grid td.cell.sel { background: var(--sel); }
/* one dashed rectangle per open-seat meeting block: every block
   cell carries the sides, open-t/open-b cap the first and last
   slot; interior gridlines stay. Caps are 3px and selector-heavy:
   width beats the neighbor's hour rule in border-collapse conflict
   resolution, specificity beats the tr.hr cascade on the own cell */
table.grid td.cell.open {
  border-left: 2px dashed var(--warn);
  border-right: 2px dashed var(--warn);
}
table.grid tr td.cell.open-t { border-top: 3px dashed var(--warn); }
table.grid tr td.cell.open-b {
  border-bottom: 3px dashed var(--warn);
}
/* block-head group label; pointer-events off so painting sweeps
   straight through it */
table.grid td.cell .glabel {
  position: absolute; top: 1px; left: 50%;
  transform: translateX(-50%);
  font-size: .55rem; line-height: 1; white-space: nowrap;
  color: var(--warn); pointer-events: none; z-index: 2;
}
table.grid td.cell:focus { outline: 2px solid var(--ink); }

table.list { border-collapse: collapse; font-size: .85rem; }
table.list th, table.list td {
  border: 1px solid var(--line); padding: .2rem .5rem;
  text-align: left;
}

details.mail { border: 1px solid var(--line); border-radius: .4rem;
  padding: .4rem .7rem; margin: .4rem 0; }
.mailbody { border-top: 1px dashed var(--line); margin-top: .4rem;
  padding-top: .4rem; }

.danger-zone { border: 2px dashed var(--warn); border-radius: .5rem;
  padding: .6rem .9rem; display: grid; gap: .5rem; }
.dangerhead { color: var(--warn); }

.help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 50%; flex: none;
  background: var(--sea); color: #fff; font-size: .7rem;
  font-weight: 700; cursor: help;
}
button.mini { padding: 0 .45rem; font-size: .8rem; line-height: 1.3; }

/* settings rows: label text left, control, help circle at far right */
form.stack label.row {
  display: flex; align-items: center; gap: .5rem;
}
.row input, .row select { margin-left: auto; width: 11rem; }
.row .help { margin-left: 0; }

/* slide switches for true/false settings; submit on change */
.switchrow {
  display: flex; align-items: center; gap: .6rem;
  margin: .35rem 0; max-width: 26rem;
}
.switchrow .help { margin-left: auto; }
.switch {
  position: relative; display: inline-block; flex: none;
  width: 2.6rem; height: 1.4rem;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #b6c2cb; border-radius: 1.4rem; transition: .15s;
}
.slider::before {
  content: ""; position: absolute; height: 1.05rem; width: 1.05rem;
  left: .18rem; top: .18rem; background: #fff; border-radius: 50%;
  transition: .15s;
}
.switch input:checked + .slider { background: var(--sel); }
.switch input:checked + .slider::before {
  transform: translateX(1.2rem);
}
.switch input:focus-visible + .slider {
  outline: 2px solid var(--ink);
}