:root {
  --bg: #12140f; --panel: #1a1d17; --line: #2c3126;
  --ink: #e8e6df; --dim: #9aa08e; --faint: #6b7160;
  --accent: #a8c256;
  --red: #d9694a; --amber: #d9a441; --cyan: #6fa8a0;
  --radius: 10px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f3ee; --panel: #fff; --line: #ddded4;
    --ink: #23261d; --dim: #5d6353; --faint: #838a76;
    --accent: #5f7a1f;
    --red: #b4462a; --amber: #9a6f0c; --cyan: #2f6b62;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
header {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.brand { color: var(--accent); font-weight: 700; letter-spacing: .02em; text-decoration: none; }
main { max-width: 46rem; margin: 0 auto; padding: 1.1rem 1.1rem 4rem; }
h1 { font-size: 1.5rem; margin: .4rem 0 .2rem; }
h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em;
     color: var(--dim); margin: 2rem 0 .7rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 0; }
.submeta, .buildstatus { color: var(--dim); margin: .2rem 0; font-size: .92rem; }
.buildstatus { color: var(--faint); font-style: italic; }
.empty { color: var(--dim); }

.riglist { list-style: none; padding: 0; }
.rig-name { font-weight: 600; }
.rig-meta, .rig-odo { color: var(--dim); font-size: .88rem; }

.logbox {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1rem; margin: 1.2rem 0;
}
.logbox summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.logbox form { display: grid; gap: .8rem; margin-top: 1rem; }
label { display: grid; gap: .3rem; font-size: .86rem; color: var(--dim); }
input[type=text], input[type=number], input:not([type]) {
  font: inherit; padding: .55rem .65rem; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
fieldset { border: 1px solid var(--line); border-radius: 7px; padding: .6rem .7rem; }
legend { font-size: .8rem; color: var(--dim); padding: 0 .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-block; padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: .85rem; color: var(--dim);
  cursor: pointer; user-select: none;
}
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--bg); }
button {
  font: inherit; font-weight: 600; padding: .6rem 1rem; border: 0;
  border-radius: 7px; background: var(--accent); color: var(--bg); cursor: pointer;
}

.bucket {
  border-left: 3px solid var(--line); padding-left: .9rem;
  margin: 1.6rem 0 .7rem;
}
.bucket > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: .5rem; padding: .25rem 0;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--dim); font-weight: 600;
}
.bucket > summary::-webkit-details-marker { display: none; }
.bucket > summary::after {
  content: "\25be"; margin-left: auto; font-size: .9rem; color: var(--faint);
  transition: transform .15s ease;
}
.bucket:not([open]) > summary::after { transform: rotate(-90deg); }
.bucket > summary:hover { color: var(--ink); }
.bucket[open] > summary { margin-bottom: .7rem; }
.bucket-count {
  font-size: .72rem; letter-spacing: .04em; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
}
.bucket.warning { border-color: var(--red); }
.bucket.warning > summary { color: var(--red); }
.bucket.overdue { border-color: var(--red); }
.bucket.due { border-color: var(--amber); }
.bucket.soon, .bucket.event { border-color: var(--cyan); }

.logactions { display: flex; align-items: center; gap: .8rem; }
.logactions button[disabled] { opacity: .5; cursor: default; }
.htmx-indicator { opacity: 0; color: var(--dim); font-size: .85rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.finding {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem;
}
.finding .row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .15rem .45rem; border-radius: 4px; border: 1px solid var(--line);
  color: var(--dim); flex-shrink: 0;
}
.tag.warning { border-color: var(--red); color: var(--red); }
.where { color: var(--dim); font-size: .85rem; margin: .15rem 0 .4rem; }
.detail { margin: .2rem 0; }
.note, .spec, .flag, .escalated {
  font-size: .87rem; margin: .35rem 0; color: var(--dim);
}
.escalated { color: var(--amber); }
.flag { color: var(--faint); font-style: italic; }
.spec { font-family: ui-monospace, monospace; font-size: .82rem; }
.prov { font-size: .76rem; color: var(--faint); margin: .6rem 0 0; }
.tier {
  display: inline-block; width: 1.1rem; height: 1.1rem; line-height: 1.1rem;
  text-align: center; border-radius: 3px; font-weight: 700;
  background: var(--line); color: var(--ink); margin-right: .2rem;
}
.tier-A { background: var(--accent); color: var(--bg); }
.tier-U { background: var(--cyan); color: var(--bg); }
.doneform { margin-top: .7rem; }
.doneform button { background: transparent; color: var(--dim); border: 1px solid var(--line); font-weight: 500; padding: .4rem .8rem; font-size: .85rem; }
.doneform button:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------ trail log */

.navlink { margin-left: auto; color: var(--dim); text-decoration: none; font-size: .9rem; }
.navlink:hover { color: var(--accent); }

.tallies { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 30rem) { .tallies { grid-template-columns: 1fr; } }
.tally { list-style: none; padding: 0; margin: 0; }
.tally li {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.tally .n { color: var(--faint); font-variant-numeric: tabular-nums; }

.timeline { list-style: none; padding: 0 0 0 1.1rem; margin: 0; border-left: 2px solid var(--line); }
.trailday {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .8rem;
}
.trailday::before {
  content: ""; position: absolute; left: -1.55rem; top: 1.1rem;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--line); border: 2px solid var(--bg);
}
.trailday.has-open::before { background: var(--amber); }
.trailday .when {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .8rem; color: var(--faint);
}
.trailday .ago { font-variant-numeric: tabular-nums; }
.trailday h3 { margin: .15rem 0 0; }

.gnarl { display: flex; gap: .18rem; margin: .45rem 0; }
.gnarl i { flex: 1; height: .3rem; border-radius: 2px; background: var(--line); }
.gnarl i.on { background: var(--amber); }

.chips.static { margin-top: .5rem; }
.chips.static span {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); font-size: .78rem; color: var(--dim);
}

.triggered { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.triggered h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); margin: 0 0 .4rem; font-weight: 600;
}
.trigrow { margin: .25rem 0; font-size: .88rem; display: flex; align-items: baseline; gap: .5rem; }
.trigrow .dim { color: var(--faint); }

/* ------------------------------------------------------------ rig editor */

.editform { display: grid; gap: .7rem; margin-top: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; }
.editform.inline { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.editform select, .editform input[type=date] {
  font: inherit; padding: .55rem .65rem; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%;
}
.editform button { align-self: end; }

/* --------------------------------------------------------- rig photography */

.hero { margin: 0 0 1rem; position: relative; border-radius: var(--radius);
        overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.hero img { display: block; width: 100%; height: auto; max-height: 24rem; object-fit: cover; }
.hero figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem .9rem .7rem;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.45) 55%, transparent);
  color: #fff;
}
.hero figcaption h1 { margin: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.hero figcaption .submeta { color: rgba(255,255,255,.88); margin: .1rem 0 0; }
.noshot { font-size: .85rem; margin: .3rem 0 0; }
.noshot a { color: var(--accent); text-decoration: none; }
.noshot a:hover { text-decoration: underline; }

.rigcard { display: grid; gap: .15rem; padding: 1rem; margin-bottom: .6rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit; }
.rigcard.shot { padding: 0; overflow: hidden; }
.rigcard.shot img { display: block; width: 100%; height: 10rem; object-fit: cover; }
.rigcard-text { display: grid; gap: .15rem; }
.rigcard.shot .rigcard-text { padding: .8rem 1rem 1rem; }
.editform input[type=file] { font: inherit; color: var(--dim); }

.strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; margin: .6rem 0; }
.strip img { display: block; height: 5.5rem; width: auto; border-radius: 7px;
             border: 1px solid var(--line); }
.strip a { flex-shrink: 0; }
.shotcell { margin: 0; display: grid; gap: .3rem; justify-items: center; flex-shrink: 0; }
button.small { font-size: .72rem; padding: .25rem .5rem; background: transparent;
               color: var(--dim); border: 1px solid var(--line); font-weight: 500; }
button.small:hover { color: var(--red); border-color: var(--red); }
.daynote { margin: .5rem 0; font-size: .93rem; white-space: pre-wrap; }
.addshots { margin-top: .7rem; }
.addshots summary { cursor: pointer; font-size: .78rem; color: var(--accent); }
.addshots form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.addshots input[type=file] { font: inherit; font-size: .82rem; color: var(--dim); }
.removeshots { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
textarea { font: inherit; padding: .55rem .65rem; border-radius: 7px;
           border: 1px solid var(--line); background: var(--bg); color: var(--ink);
           width: 100%; resize: vertical; }
.disclaimer { max-width: 46rem; margin: 3rem auto 2rem; padding: 0 1.1rem;
  color: var(--faint); font-size: .8rem; line-height: 1.5; border-top: 1px solid var(--line);
  padding-top: 1rem; }
.sharing { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.sharing .state { font-size: .76rem; color: var(--dim); }
.sharing .state.on { color: var(--accent); font-weight: 600; }
.explorelink { margin-left: .9rem; }
.shared { font-size: .82rem; color: var(--dim); margin: .4rem 0 0; }
.shared a { color: var(--accent); }

/* ---------------------------------------------------------------- accounts */

.authbox { max-width: 26rem; margin: 0 auto; }
.authbox.wide { max-width: 42rem; }
.authbox h2 { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.autherror { color: var(--amber); border-left: 2px solid var(--amber); padding-left: .6rem; }
.authnotice { color: var(--cyan); border-left: 2px solid var(--cyan); padding-left: .6rem; }
.authalt { color: var(--faint); text-align: center; margin: .8rem 0 .4rem; }
.authfoot { margin-top: 1.4rem; font-size: .9rem; }
.faintnote { color: var(--faint); font-size: .82rem; }
.passkeybtn { width: 100%; }
.codelist { list-style: none; padding: 0; columns: 2; }
.codelist code { font-size: 1.05rem; letter-spacing: .04em; }
.credlist { list-style: none; padding: 0; }
.credlist li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.credlist .doneform.inline { display: inline; margin-left: .5rem; }
.invitelink { word-break: break-all; }
.checkline { display: flex; gap: .5rem; align-items: center; }
.navform { display: inline; }
.linkish { background: none; border: 0; color: var(--dim); cursor: pointer;
           font: inherit; padding: 0 .4rem; }
.linkish:hover { color: var(--ink); }
.qr { display: block; margin: 1rem auto; background: #fff; padding: .5rem; }
.recoveryfold { margin: 1rem 0; color: var(--dim); }

/* ------------------------------------------------------------- rig editing */

.addrig { margin-left: auto; }
.dangerzone summary { color: var(--amber); }
.dangerzone .editform { border-left: 2px solid var(--amber); padding-left: .8rem; }
.editform .row { display: flex; gap: .8rem; flex-wrap: wrap; }
.editform .row label { flex: 1 1 8rem; }