/* ============================================================
   Fluffy Cloud Shifts — black canvas, one red accent (house palette),
   but calm typography: sentence case, a readable sans, mono only for
   times and numbers. Deviates from the marketing site's all-caps
   display styling, which fights a dense scheduling tool.
   ============================================================ */
:root {
  --bg: #060607;
  --card: #101012;
  --card2: #17171a;
  --line: #26262b;
  --line2: #1b1b1f;
  --text: #f3f3f5;
  --muted: #9494a0;
  --accent: #fe0101;
  --ok: #5ad19b;
  --warn: #e3c169;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 12px;
}
* { box-sizing: border-box; }
/* Nothing may scroll the whole page sideways. A child wider than the screen
   (a crowded calendar, a wide table) scrolls inside its OWN box, never the page.
   clip (not hidden) so it adds no scroll container and leaves sticky headers and
   vertical scrolling untouched. This is the backstop for phones, iOS included. */
html { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh;
       font-family: var(--sans); font-size: 15px; line-height: 1.6; letter-spacing: -.005em;
       -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 20px 100px; }
time, .mono, .meta, .calhour { font-variant-numeric: tabular-nums; }

/* wordmark: the one place the display face earns its keep */
h1.logo { font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
          font-size: clamp(27px, 4vw, 38px); line-height: 1.05; margin: 0; }
h1.logo .cloud { display: none; }
.brandstrip { font-size: 12px; color: var(--muted); margin-top: 5px; letter-spacing: .01em; }
.brandline { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 2vw, 22px);
             margin-top: 10px; color: var(--text); letter-spacing: -.01em; }
.brandline em { font-style: normal; color: var(--accent); }
.brandwhisper { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
                color: var(--muted); margin-top: 7px; opacity: .8; }
.daysec h2 { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.01em;
             margin: 28px 0 10px; color: var(--text); }

header.app { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
             padding: 12px 0 16px; flex-wrap: wrap; }
.sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
.pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px;
        border: 1px solid var(--line); color: var(--muted); }

/* nav */
/* One line, always. Wide enough to fit on a laptop; on a phone it becomes a
   swipeable strip rather than wrapping into three rows of stubs. */
.tabs { display: flex; gap: 15px; margin: 4px 0 22px; flex-wrap: nowrap; overflow-x: auto;
        overflow-y: hidden; border-bottom: 1px solid var(--line2); scrollbar-width: none;
        -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent;
               padding: 9px 0; cursor: pointer; font-family: var(--sans); font-size: 13.5px;
               white-space: nowrap; flex: 0 0 auto; letter-spacing: -.01em; }
@media (max-width: 1180px) { .tabs { gap: 13px; font-size: 13px; } }
/* on narrow screens the strip scrolls, so hint at it with a soft edge */
.tabwrap { position: relative; }
.tabwrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 3px; width: 34px;
                  pointer-events: none; background: linear-gradient(90deg, rgba(6,6,7,0), var(--bg)); }
@media (min-width: 1101px) { .tabwrap::after { display: none; } }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--text); }
/* the camp guide is an external link, styled to sit in the tab strip like a tab */
.tabs a.guidelink { background: none; color: var(--muted); text-decoration: none; border: none;
                    border-bottom: 2px solid transparent; padding: 9px 0; cursor: pointer;
                    font-family: var(--sans); font-size: 13.5px; white-space: nowrap; flex: 0 0 auto;
                    letter-spacing: -.01em; }
.tabs a.guidelink:hover { color: var(--text); }

/* Admin's second row. The sections are the primary bar and keep their weight;
   the sub-row is quieter and pill-shaped so the two levels never read as one
   long strip of equal choices. */
.tabs.has-sub { margin-bottom: 0; }
.subtabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 20px; }
.subtabs button { background: var(--card2); color: var(--muted); border: 1px solid var(--line2);
                  border-radius: 999px; padding: 5px 13px; cursor: pointer;
                  font-family: var(--sans); font-size: 12.5px; white-space: nowrap;
                  letter-spacing: -.01em; }
.subtabs button:hover { color: var(--text); border-color: #55555e; }
.subtabs button.active { background: var(--accent); border-color: var(--accent); color: #0b0b0d; font-weight: 600; }
@media (max-width: 700px) { .subtabs { gap: 6px; } .subtabs button { padding: 5px 11px; font-size: 12px; } }


/* surfaces */
.card { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r);
        padding: 18px 20px; margin-bottom: 14px; }
#myStrip { padding: 13px 18px; }
.shift { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 17px;
         border: 1px solid var(--line2); border-radius: var(--r); margin-bottom: 8px; background: var(--card); flex-wrap: wrap; }
.shift:hover { border-color: var(--line); }
.shift .rolechip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; }
.shift .meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.shift .names { color: var(--muted); font-size: 13px; margin-top: 6px; }
.shift .names b { color: var(--text); font-weight: 500; }
.shift > div > div > b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.spots { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
         white-space: nowrap; color: var(--muted); }
.spots.open { color: var(--text); }
.spots.full { color: var(--muted); opacity: .8; }

/* buttons */
.btn { background: #fff; color: #000; border: none; border-radius: 999px; padding: 11px 20px;
       cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; }
.btn:hover { background: #e6e6e8; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: #d90101; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: #55555e; }
.btn.danger { background: transparent; color: var(--accent); border: 1px solid rgba(254,1,1,.45); }
.btn.small { padding: 7px 14px; font-size: 13px; }
.btn:disabled { opacity: .35; cursor: default; }

input, select, textarea { background: #0a0a0c; color: var(--text); border: 1px solid var(--line);
                          border-radius: 9px; padding: 11px 13px; font-size: 14.5px; width: 100%;
                          font-family: var(--sans); }
input:focus, select:focus { outline: none; border-color: #55555e; }
/* Mobile Safari auto-zooms the page whenever a focused field is under 16px and
   never zooms back out. On a phone (coarse pointer) push every field to 16px so
   the desk crew stops fighting a zoomed viewport on every check-in. And grow the
   small buttons to a 44px tap target: the highest-frequency touch surfaces (the
   captain watch, the check-in desk, the Today tick buttons) are all .btn.small,
   and dusty gloved thumbs miss a 29px button. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .btn.small, .btn.ghost.small { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}
/* the admin section row clips its last button on a narrow phone; the Lead brief
   link there just duplicates the one in the header, so drop it under 480px. */
@media (max-width: 480px) { .leadbrief-tab { display: none; } }
label { font-size: 13px; color: var(--muted); display: block; margin: 13px 0 5px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 1; min-width: 140px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 10px 8px;
     border-bottom: 1px solid var(--line); font-size: 13px; }
td { padding: 12px 8px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.bar { height: 6px; border-radius: 999px; background: #1e1e22; overflow: hidden; min-width: 80px; }
.bar > i { display: block; height: 100%; background: var(--text); border-radius: 999px; transition: width .3s; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 17px; }
.kpi .v { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.kpi .l { color: var(--muted); font-size: 13px; margin-top: 6px; }

.toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px); opacity: 0; transition: all .3s;
         background: #fff; color: #000; padding: 13px 22px; border-radius: 999px; z-index: 99;
         max-width: 90vw; font-size: 14px; font-weight: 500; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--accent); color: #fff; }

.tag { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
       color: var(--muted); white-space: nowrap; }
.tag.ok { color: var(--ok); border-color: rgba(90,209,155,.4); }
.tag.warn { color: var(--warn); border-color: rgba(227,193,105,.4); }
.tag.bad { color: var(--accent); border-color: rgba(254,1,1,.45); }
.muted { color: var(--muted); }
.center { text-align: center; }
.login, .gate { max-width: 500px; margin: 6vh auto; }
.hero { position: relative; border-radius: var(--r) var(--r) 0 0; overflow: hidden; line-height: 0; }
.hero img { width: 100%; height: 260px; object-fit: cover; object-position: 50% 42%;
            filter: saturate(1.02) contrast(1.03); }
.hero::after { content: ""; position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(6,6,7,0) 0%, rgba(6,6,7,.06) 55%, rgba(6,6,7,.55) 88%, var(--card) 100%); }
.hero-copy { line-height: 1.5; margin: 0 0 20px; }
.hero-copy .brandstrip { margin: 0 0 5px; color: #cfcfd6; }
.hero-copy h1.logo { font-size: clamp(28px, 5vw, 40px); }
.hero-copy .brandline { margin-top: 6px; font-size: 17px; }
.fair { font-size: 14px; color: var(--muted); line-height: 1.7; }
.fair b { color: var(--text); font-weight: 500; }
a { color: var(--text); text-decoration: underline; text-decoration-color: #444; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
summary { cursor: pointer; font-size: 14.5px; font-weight: 500; }
.check { display: flex; gap: 11px; align-items: flex-start; margin-top: 15px; font-size: 14px; color: var(--muted); line-height: 1.65; }
.check input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: #fe0101; }
.radios { display: flex; gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.radios label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--text);
                border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.radios input { width: auto; }

/* toolbar */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toolbar > .grow { flex: 1; min-width: 150px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chips button { background: transparent; color: var(--muted); border: 1px solid var(--line);
                border-radius: 999px; padding: 7px 15px; cursor: pointer; font-family: var(--sans); font-size: 13.5px; }
.chips button:hover { color: var(--text); }
.chips button.on { background: var(--text); color: #000; border-color: var(--text); }
.viewtoggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.viewtoggle button { background: none; color: var(--muted); border: none; padding: 8px 16px; font-size: 13.5px;
                     cursor: pointer; font-family: var(--sans); }
.viewtoggle button.on { background: var(--text); color: #000; }

/* progress strip */

.strip { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; }
.strip-lab { font-size: 13px; color: var(--muted); }
.strip-num { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.strip-num span { font-size: 15px; color: var(--muted); }
.strip-bar { flex: 1; min-width: 110px; max-width: 260px; }
.mychips { display: flex; gap: 7px; flex-wrap: wrap; flex-basis: 100%; }
.mychip { background: #0a0a0c; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer;
          font-family: var(--sans); font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.mychip:hover { border-color: #55555e; }
.mychip.wait { border-style: dashed; color: var(--muted); }
.mychip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mychip span { color: var(--muted); }
.stripwarn { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line2); font-size: 13.5px; color: var(--accent); }

/* calendar */
.calwrap { border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); overflow: hidden; }
.calgrid { display: grid; position: relative; }
.calhead { z-index: 3; background: var(--card2); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line2);
           padding: 10px 2px; text-align: center; font-size: 11px; color: var(--muted); overflow: hidden; }
.calhead b { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--text);
             letter-spacing: -.01em; margin-bottom: 1px; }
.calad { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line); padding: 5px; background: #0c0c0e; min-height: 34px; }
.calad.gut { border-right-color: var(--line2); }
.adchip { background: #191920; border-left: 3px solid; border-radius: 6px; padding: 4px 6px; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
          font-weight: 600; margin-bottom: 4px; cursor: pointer; }
.adchip:hover { background: #232330; }
.calgutter { z-index: 2; background: var(--card); border-right: 1px solid var(--line2); }
.calhour { font-size: 10px; color: var(--muted); padding-right: 6px; text-align: right; position: relative; top: -6px; }
.calday { position: relative; border-right: 1px solid var(--line2); }
.calline { position: absolute; left: 0; right: 0; border-top: 1px solid #131316; pointer-events: none; }
.calline.major { border-top-color: #1e1e23; }
.calev { position: absolute; border-radius: 7px; padding: 4px 6px; font-size: 11.5px; overflow: hidden;
         cursor: pointer; border-left: 3px solid; line-height: 1.35; color: var(--text); background: #191920; }
.calev b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.calev:hover { background: #232330; }
/* your own shifts should be findable at a glance in a full week */
.calev.mine { box-shadow: inset 0 0 0 2px var(--ok), 0 0 14px rgba(90,209,155,.28);
              background: linear-gradient(180deg, rgba(90,209,155,.20), rgba(90,209,155,.09));
              border-left-width: 5px !important; z-index: 3; }
.calev.mine b { color: #fff; }
.calev.mine:hover { background: linear-gradient(180deg, rgba(90,209,155,.30), rgba(90,209,155,.15)); }
.calev.mine .cnt { color: #bfe9d4; }
.calev.minewait { box-shadow: inset 0 0 0 2px var(--warn);
                  background: linear-gradient(180deg, rgba(227,193,105,.16), rgba(227,193,105,.07));
                  border-left-width: 5px !important; z-index: 2; }
.calev.minewait .cnt { color: #e7d6a4; }
.calev.full { opacity: .4; }
.calev.dim { opacity: .18; }
.calev.locked { opacity: .35; }
.calev .cnt { color: var(--muted); font-size: 11.5px; }
.calev.tight { padding: 4px 5px; }
.calev.tight b { font-size: 11px; }
.shift.dim { opacity: .2; }
.shift.locked { opacity: .4; }
.shift.locked .btn { pointer-events: none; opacity: .4; }

.modalbg { position: fixed; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(3px);
           display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modalbg .card { max-width: 480px; width: 100%; margin: 0; max-height: 86vh; overflow: auto; border-color: var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.daypick { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }
.daypick button { flex: none; background: var(--card); color: var(--muted); border: 1px solid var(--line2);
                  border-radius: 10px; padding: 9px 14px; cursor: pointer; font-family: var(--sans);
                  font-size: 12px; text-align: center; line-height: 1.5; }
.daypick button b { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; color: var(--text); }
.daypick button i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.daypick button.on { border-color: var(--text); background: var(--text); color: #000; }
.daypick button.on b, .daypick button.on i { color: #000; }

#tip { position: fixed; z-index: 90; max-width: 340px; background: #fff; color: #17171a; padding: 14px 16px;
       border-radius: 10px; font-size: 13.5px; line-height: 1.55; pointer-events: none; display: none;
       box-shadow: 0 12px 40px rgba(0,0,0,.7); }
#tip h4 { font-size: 16px; font-weight: 600; margin: 0 0 3px; }
#tip .t-meta { color: #666; font-size: 12.5px; margin-bottom: 8px; }
#tip .t-lock { color: #c0140f; margin-top: 8px; font-weight: 600; }

/* ---------- pirate flourishes ---------- */
.jolly { color: var(--accent); }
#jollyflag { position: fixed; top: 14px; right: 16px; font-size: 30px; z-index: 95; pointer-events: none;
             animation: flap 2.4s ease-in-out infinite; text-shadow: 0 0 18px rgba(254,1,1,.5); }
@keyframes flap { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-4px); } }
body.pirate { background:
  radial-gradient(1200px 500px at 50% -10%, rgba(254,1,1,.07), transparent 70%), var(--bg); }
body.pirate h1.logo::after { content: " \2620"; color: var(--accent); font-size: .7em; vertical-align: super; }
body.pirate .tabs button.active { border-bottom-color: var(--accent); }
.tba { font-family: var(--display); font-weight: 500; font-size: 54px; letter-spacing: .04em;
       color: #2e2e36; line-height: 1; }
body.pirate .tba { color: #3a1a1a; }

.streets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.streets span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: 12px; color: var(--muted); }
.streets i { display: block; font-style: normal; color: var(--text); font-weight: 500; font-size: 13px; }
.camplist { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 22px; max-height: 420px; overflow: auto; }
.camplist li { font-size: 13px; color: var(--muted); padding: 3px 0; break-inside: avoid; }
@media (max-width: 760px) { .camplist { columns: 1; } }

.lockwrap { position: relative; width: 300px; max-width: 100%; border-radius: 18px; overflow: hidden;
            border: 1px solid var(--line); line-height: 0; box-shadow: 0 14px 50px rgba(0,0,0,.6); }
.lockwrap img, .lockwrap canvas { width: 100%; height: auto; display: block; }


.camprow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line2);
           border-radius: 10px; margin-bottom: 7px; text-decoration: none; color: var(--text); background: var(--card); }
.camprow:hover { border-color: var(--line); background: #16161a; }
.camprow.ours { border-color: rgba(254,1,1,.5); background: rgba(254,1,1,.06); }
.camprank { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 20px; flex: none; text-align: right; }
.campname { font-weight: 500; font-size: 14.5px; }
.camphome { color: var(--muted); font-size: 13px; flex: 1; }
@media (max-width: 620px) { .camphome { display: none; } }

/* ---------- pirate branding ---------- */
h1.logo { display: flex; align-items: center; gap: 12px; }
h1.logo img.skull { height: 1.5em; width: auto; flex: none;
                    filter: drop-shadow(0 0 16px rgba(254,1,1,.30)); }
.rope { height: 7px; margin: 4px 0 10px; border-radius: 99px; opacity: .5;
        background: repeating-linear-gradient(115deg,
          #4a3b2a 0 5px, #6b5539 5px 10px, #382c1f 10px 15px); }
body.pirate .rope { opacity: .95; }
.brandstrip .jolly { color: var(--accent); }
.tabs button.active { border-bottom-color: var(--accent); }
.card > b:first-child, .fair > b:first-child { letter-spacing: -.005em; }
/* a flag on the wind, always there, quietly */
#cornerflag { position: fixed; right: 16px; bottom: 14px; width: 34px; height: auto; opacity: .10;
              z-index: 1; pointer-events: none; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
body.pirate #cornerflag { opacity: .5; width: 52px;
                          filter: drop-shadow(0 0 14px rgba(254,1,1,.5)); }
#jollyflag { display: none; }
.hero-copy h1.logo img.skull { height: .8em; }
.tba { letter-spacing: .06em; }

/* big flag on the sign-in hero */
.hero img.heroflag { position: absolute; right: 20px; top: 18px; width: 108px; height: auto; z-index: 2;
            filter: drop-shadow(0 6px 20px rgba(0,0,0,.7)); animation: sway 6s ease-in-out infinite; }
@media (max-width: 520px) { .hero img.heroflag { width: 78px; } }

/* ranks */
.rankbadge { display: inline-block; border: 1px solid rgba(254,1,1,.45); color: var(--accent);
             border-radius: 999px; padding: 3px 11px; font-size: 12px; white-space: nowrap; }
.rankbadge.sm { font-size: 11px; padding: 2px 9px; }

#tip .t-duty { color: #8a6a2f; font-size: 12px; margin: 0 0 4px; }
#tip .t-menu { margin-top: 8px; padding-top: 7px; border-top: 1px solid #e2ded4; }
#tip .t-menu b { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
                 color: #8a6a2f; margin-bottom: 4px; }
#tip .t-menu > div { margin-bottom: 3px; }
#tip .t-menu i { font-style: normal; color: #1f7a4d; }
#tip .t-menu span { display: block; color: #777; font-size: 12px; }

/* kraken */
#kraken { position: fixed; inset: 0; z-index: 93; pointer-events: none; display: flex;
          align-items: center; justify-content: center; }
#kraken span { font-size: 22vw; opacity: 0; animation: krak 4.2s ease-in-out forwards;
               filter: drop-shadow(0 0 40px rgba(254,1,1,.5)); }
@keyframes krak {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  18% { opacity: .92; transform: scale(1.05) rotate(6deg); }
  70% { opacity: .85; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1.6) rotate(12deg); }
}
.wink { animation: wink 1.4s ease-in-out; }
@keyframes wink { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-14deg) scale(1.18); }
                  55% { transform: rotate(10deg) scale(.94); } }

#burnCount { border-color: rgba(254,1,1,.4); color: #cfa9a9; }
#burnCount b { color: var(--accent); font-weight: 600; }

/* ============================================================
   The articles, the manifest, the wanted list, the weather,
   and the one moment worth celebrating.
   ============================================================ */

/* --- signing the articles --- */
.artshead { display: flex; align-items: center; gap: 16px; }
.artmark { width: 62px; height: auto; flex: none; filter: drop-shadow(0 0 18px rgba(254,1,1,.3)); }
.artshead h1.logo { font-size: clamp(24px, 4vw, 31px); }
ol.articles { margin: 20px 0 4px; padding-left: 22px; color: var(--muted); font-size: 14px; line-height: 1.65; }
ol.articles li { margin-bottom: 11px; padding-left: 4px; }
ol.articles li::marker { color: var(--accent); font-family: var(--mono); font-size: 12px; }
ol.articles b { color: var(--text); font-weight: 600; }
ol.articles .artrow { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 400; }
ol.articles .artrow input { width: auto; flex: none; margin: 4px 0 0; accent-color: var(--accent); }
.stepbadge { display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: 3px 11px; margin-bottom: 8px; }
.fielderr { outline: 2px solid #e5484d !important; outline-offset: 2px; border-radius: 6px; }
select.phonecc { width: 100%; }
input.signline { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 25px; padding: 12px 15px;
                 letter-spacing: .01em; background: #0b0b0d; border-bottom: 2px solid var(--accent);
                 border-radius: 9px 9px 0 0; }
input.signline::placeholder { font-family: var(--sans); font-size: 14px; letter-spacing: 0; }
.sigfoot { color: var(--muted); font-size: 12px; margin: 9px 0 18px; line-height: 1.6; }
.sigfoot b { color: var(--text); font-weight: 500; }

/* --- Me Hearties: the crew manifest --- */
.crewkpis { margin: 14px 0 12px; }
.crewrow { display: flex; align-items: center; gap: 14px; padding: 13px 17px; background: var(--card);
           border: 1px solid var(--line2); border-radius: var(--r); margin-bottom: 7px; }
.crewrow:hover { border-color: var(--line); }
.crewrow.you { border-color: rgba(254,1,1,.4); }
.crewrow .place { font-family: var(--display); font-size: 18px; width: 26px; flex: none; text-align: center;
                  color: #4a4a52; }
.crewrow .place.p1, .crewrow .place.p2, .crewrow .place.p3 { color: var(--accent); }
.crewname { flex: 1; min-width: 130px; }
.crewname b { font-weight: 600; letter-spacing: -.01em; }
.crewmeta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.crewbar { flex: 1.2; min-width: 90px; }
.crewnum { text-align: right; min-width: 108px; }
.crewnum b { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -.01em; }
.crewnum span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
@media (max-width: 560px) {
  .crewrow { flex-wrap: wrap; gap: 9px; }
  .crewbar { order: 3; flex-basis: 100%; }
  .crewnum { min-width: 0; }
}

/* --- the wanted list --- */
.poster { position: relative; border: 2px solid rgba(254,1,1,.5); border-radius: var(--r); padding: 20px 22px 22px;
          margin-bottom: 14px; text-align: center; overflow: hidden;
          background: radial-gradient(120% 130% at 50% 0%, #1b1416 0%, var(--card) 68%); }
.posterhead { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
              font-size: clamp(30px, 7vw, 46px); line-height: 1; color: var(--accent); }
.postermark { width: 66px; height: auto; margin: 12px 0 8px; opacity: .92; }
.postername { font-family: var(--display); font-weight: 500; font-size: 24px; letter-spacing: -.01em; }
.posterbody { color: var(--muted); font-size: 13.5px; margin: 8px auto 0; max-width: 430px; line-height: 1.65; }

/* --- weather from the deck --- */
.weather { display: flex; align-items: center; gap: 14px; }
.weather .wicon { font-size: 24px; line-height: 1; flex: none; }
.weather.warn { border-color: rgba(227,193,105,.45); }
.weather.bad { border-color: rgba(254,1,1,.5); }
.weather.ok { border-color: rgba(90,209,155,.35); }

/* --- the departure ritual --- */
#ritual { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
          background: rgba(4,4,5,.86); backdrop-filter: blur(6px); padding: 22px;
          animation: ritualin .5s ease both; }
#ritual.fade { animation: ritualout .9s ease both; }
@keyframes ritualin { from { opacity: 0; } to { opacity: 1; } }
@keyframes ritualout { to { opacity: 0; } }
.ritualbox { background: var(--card); border: 1px solid rgba(254,1,1,.4); border-radius: var(--r);
             padding: 34px 30px; max-width: 430px; text-align: center; }
.ritualbox img { width: 108px; height: auto; animation: sway 4s ease-in-out infinite;
                 filter: drop-shadow(0 0 26px rgba(254,1,1,.45)); }
.ritualbox h2 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -.01em;
                margin: 16px 0 10px; }
.ritualbox p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }
.ritualbox .btn { margin-top: 8px; }

/* --- The Wake --- */
.wakecard { display: flex; flex-direction: column; align-items: center; gap: 16px;
            padding: 18px; background: transparent; border: none; }
.wakebar { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 720px; flex-wrap: wrap; }
.wakescore { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
             color: var(--muted); display: flex; align-items: baseline; gap: 9px; }
.wakescore b { font-family: var(--display); font-weight: 500; font-size: 30px; color: var(--text);
               letter-spacing: -.02em; }
.wakebar .btn { margin-left: auto; }
#wakeCanvas { width: 100%; max-width: 720px; height: auto; aspect-ratio: 1; border: none;
              border-radius: var(--r); touch-action: none; background: #08080a; display: block; }
.wakepad { display: none; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.wakepad div { display: flex; gap: 12px; }
.wakepad button { width: 100px; height: 82px; border-radius: 14px; border: 1px solid var(--line);
                  background: var(--card2); color: var(--text); font-size: 26px; cursor: pointer;
                  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wakepad button:active { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(.96); }
@media (max-width: 900px) { .wakepad { display: flex; } }
@media (max-width: 380px) { .wakepad button { width: 78px; height: 68px; font-size: 22px; } }
#wakeBoard td, #wakeBoard th { padding: 10px 8px; }
.wkrank { font-family: var(--display); font-size: 18px; color: #4a4a52; text-align: center; }
.wkrank.top { color: var(--accent); }
.wkbest { font-family: var(--display); font-size: 19px; color: var(--text); }
tr.youscore td { background: rgba(254,1,1,.06); }

/* --- the galley --- */
.galleyday.today { border-color: rgba(90,209,155,.4); }
.galleyhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.galleyhead b { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.sittings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .sittings { grid-template-columns: 1fr; } }
.sitting { background: var(--card2); border: 1px solid var(--line2); border-radius: 10px; padding: 14px 16px; }
.sittinghead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
               padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line2); }
.sittinghead b { font-size: 14.5px; font-weight: 600; }
.sittinghead .mono { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.dish { padding: 7px 0; }
.dish + .dish { border-top: 1px solid var(--line2); }

/* --- the chart on the articles page --- */
.chartcard { padding: 0; overflow: hidden; background: #0d0d0f; }
svg.chart { width: 100%; height: auto; display: block; }
.tag.campsite { color: #7f7f8c; border-color: var(--line2); font-size: 11px; }
@media (max-width: 620px) { .tag.campsite { display: none; } }

/* --- skewers, sharing, the log --- */
.skewered { border-color: rgba(227,193,105,.45); }
.skewhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.skewhead .btn { margin-left: auto; }
.skewrow { font-size: 14px; padding: 6px 0; border-top: 1px solid var(--line2); }
.skewrow .muted { font-size: 12.5px; margin-left: 6px; }
.crewacts { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; min-width: 210px; }
.crewacts .btn.on { border-color: rgba(90,209,155,.5); color: var(--ok); }
@media (max-width: 700px) { .crewacts { min-width: 0; flex-basis: 100%; justify-content: flex-start; } }

.logbar { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.filepick { cursor: pointer; display: inline-block; }
.logpost { padding: 16px 18px; }
.loghead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.loghead b { font-weight: 600; letter-spacing: -.01em; }
.loghead .muted { font-size: 12.5px; }
.loghead .btn { margin-left: auto; }
.logbody { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }
/* Photos are shown whole, never cropped. `contain` inside a bounded box means a
   tall portrait shot is scaled down rather than sliced, and a panorama doesn't
   run off the card. Tap to open full size. */
.logmedia { margin-top: 11px; display: grid; gap: 8px; }
.logmedia.multi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.logmedia img, .logmedia video { width: 100%; border-radius: 10px; display: block;
                                 background: #0a0a0c; object-fit: contain; }
.logmedia img { max-height: 460px; height: auto; cursor: zoom-in; }
.logmedia video { max-height: 460px; height: auto; }
.logmedia.multi img, .logmedia.multi video { height: 210px; }
@media (max-width: 560px) {
  .logmedia img, .logmedia video { max-height: 340px; }
  .logmedia.multi img, .logmedia.multi video { height: 160px; }
}

/* full-size viewer */
#lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center;
            justify-content: center; background: rgba(4,4,5,.94); padding: 24px;
            animation: lbin .18s ease both; }
@keyframes lbin { from { opacity: 0 } to { opacity: 1 } }
#lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto;
                object-fit: contain; border-radius: 8px; display: block; }
#lightbox .lbclose { position: absolute; top: 14px; right: 18px; background: none; border: none;
                     color: var(--muted); font-size: 34px; line-height: 1; cursor: pointer; }
#lightbox .lbclose:hover { color: var(--text); }
#lightbox .lbnav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.55);
                   border: 1px solid var(--line); color: var(--text); width: 46px; height: 60px;
                   border-radius: 10px; font-size: 22px; cursor: pointer; }
#lightbox .lbprev { left: 14px } #lightbox .lbnext { right: 14px }
#lightbox .lbcount { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
                     font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .08em; }
textarea { min-height: 70px; resize: vertical; font-family: var(--sans); }

/* --- the shanty --- */
.soulpill { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
            background: transparent; font-family: var(--sans); font-size: 12px; line-height: 1.4; }
.soulpill:hover { color: var(--text); border-color: #55555e; }
.soulpill.playing { color: var(--text); border-color: rgba(254,1,1,.5); }
.soulpill .eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.soulpill.playing .eq { display: inline-flex; }
.soulpill .eq i { width: 2px; background: var(--accent); border-radius: 1px; height: 4px;
                  animation: bob .9s ease-in-out infinite; }
.soulpill .eq i:nth-child(2) { animation-delay: .18s; }
.soulpill .eq i:nth-child(3) { animation-delay: .36s; }
@keyframes bob { 0%, 100% { height: 3px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .soulpill .eq i { animation: none; height: 8px; } }

/* --- now playing --- */
.nowcard { display: grid; grid-template-columns: 64px 1fr; gap: 12px 14px; align-items: center; }
.nowcard img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.nowcard iframe { grid-column: 1 / -1; }
.nowfoot { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.nowmeta b { font-weight: 600; letter-spacing: -.01em; }
.helm { border-color: rgba(254,1,1,.4); }
.spotrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line2); }
.spotrow img, .spotrow .noart { width: 42px; height: 42px; border-radius: 6px; flex: none;
                                object-fit: cover; background: var(--card2); display: block; }
.spotrow > div { flex: 1; min-width: 0; }
.spotrow b { font-weight: 600; }
.spotrow .muted { font-size: 12.5px; }
.spotrow .btn { flex: none; }

/* --- Doubloons juice --- */
#wakeCanvas { transition: box-shadow .2s; }
#wakeCanvas.faster { box-shadow: 0 0 0 2px rgba(254,1,1,.55); }
.wakescore b.bump { animation: bump .42s cubic-bezier(.2,1.6,.4,1); display: inline-block; }
@keyframes bump { 0% { transform: scale(1); color: var(--text); }
                  40% { transform: scale(1.4); color: var(--accent); }
                  100% { transform: scale(1); color: var(--text); } }
#wkMute.on { color: var(--text); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .wakescore b.bump { animation: none; } }

/* --- a hearty's card --- */
.heartylink { cursor: pointer; text-decoration: underline; text-decoration-color: #3a3a42;
              text-underline-offset: 3px; }
.heartylink:hover { text-decoration-color: var(--accent); }
.heartymodal { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center;
               justify-content: center; background: rgba(4,4,5,.8); backdrop-filter: blur(5px); padding: 20px; }
.heartybox { position: relative; background: var(--card); border: 1px solid rgba(254,1,1,.35);
             border-radius: var(--r); padding: 26px 26px 24px; max-width: 380px; width: 100%; text-align: center; }
.heartyx { position: absolute; right: 12px; top: 8px; background: none; border: none; color: var(--muted);
           font-size: 26px; line-height: 1; cursor: pointer; }
.heartyx:hover { color: var(--text); }
.heartymark { width: 66px; height: auto; filter: drop-shadow(0 0 18px rgba(254,1,1,.3)); }
.heartybox h2 { font-family: var(--display); font-weight: 500; font-size: 25px; letter-spacing: -.01em;
                margin: 10px 0 4px; }
.heartyrank { color: var(--muted); font-size: 13px; }
.heartystats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.heartystats div { background: var(--card2); border: 1px solid var(--line2); border-radius: 9px; padding: 11px 5px; }
.heartystats b { display: block; font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.heartystats span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.heartyacts { display: flex; gap: 8px; margin-top: 18px; }
.heartyacts .btn { flex: 1; }
.heartyacts .btn.on { border-color: rgba(90,209,155,.5); color: var(--ok); }
.editmark { font-size: 11.5px; font-style: italic; }
.logedit textarea { margin-top: 4px; }
.logedit .logbar { margin-top: 8px; }

/* --- captain requests (admin) --- */
.reqcard { border-color: rgba(254,1,1,.42); }
.tablewrap, #tab-people .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#tab-people table { min-width: 560px; }
.reqrow { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
          padding: 13px 0; border-top: 1px solid var(--line2); }
.reqrow:first-of-type { border-top: none; }
.reqacts { display: flex; gap: 8px; margin-left: auto; }
.tag.warn { color: var(--warn); border-color: rgba(227,193,105,.4); }

/* the manifest nag: present until they've filed, then gone. Loud enough to
   notice above the tabs, quiet enough not to look like an error. */
.card.nag { border-color: rgba(227,193,105,.42); background: linear-gradient(180deg, rgba(227,193,105,.07), var(--card));
            margin: 14px 0 0; }
.card.nag b { color: var(--warn); }
#manifestCard .rope { opacity: .55; }
.mfhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chase { max-height: 420px; overflow: auto; }
.chase .shift { padding: 9px 14px; }

/* Calendar blocks were #191920 on a #060607 page: technically visible, actually
   not. Lifted, with a real edge, and the note printed inside when a block is
   tall enough to hold it (a five-hour anchor party is 150px of dead space). */
.calev { background: #23232e; border: 1px solid #34343f; border-left-width: 3px; }
.calev:hover { background: #2d2d3a; border-color: #45454f; }
.calev b { color: #f7f7fa; }
.calev .cnt { color: #a8a8b4; }
.calev .calnote { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4;
                  color: #b9b9c6; white-space: normal; }
.calev.mine, .calev.minewait { border-color: transparent; }
.adchip { background: #23232e; border: 1px solid #34343f; }

/* phone: the shift tooltip becomes a bottom sheet instead of hanging off-screen */
@media (max-width: 700px) {
  #tip { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important;
         max-width: none !important; width: auto !important; max-height: 55vh; overflow-y: auto; }
  /* the camp guide doc renders at 70% so its desktop-sized type fits a phone */
  #guideWrap { height: 76vh; overflow: hidden; border-radius: 10px; }
  #guideFrame { width: 143% !important; height: 109vh !important; transform: scale(0.7); transform-origin: 0 0; }
}

/* the embedded flag game: the parent page must not claim drags as scrolling */
#gameFrame { touch-action: none; }

/* ============================================================
   Phone polish (2026-08-20). The header was eating a third of the
   screen before any content; on a small screen it collapses to a
   tight two-line masthead and the brand flourish stands down.
   ============================================================ */
@media (max-width: 700px) {
  .wrap { padding: 12px 13px 90px; }
  header.app { padding: 4px 0 8px; gap: 8px; }
  h1.logo { font-size: 23px; }
  h1.logo img.skull { height: 1.25em; }
  h1.logo .brandstrip { display: none !important; }   /* the wordmark says it */
  .sub { font-size: 11.5px; margin-top: 2px; }
  #burnCount, header.app .pill, header.app .btn { font-size: 11.5px; padding: 4px 10px; }
  header.app .btn.small, #signOut { padding: 5px 12px; font-size: 12px; }
  .rope { height: 5px; margin: 2px 0 6px; }
  .tabs { margin: 2px 0 14px; }
  .card { padding: 14px 15px; margin-bottom: 10px; }
  .shift { padding: 12px 13px; }
  .daysec h2 { font-size: 18px; margin: 20px 0 8px; }
  .kpi { padding: 13px; }
  .kpi .v { font-size: 27px; }
}
/* the save confirmation sits under the button instead of wrapping mid-line */
#mfSaved { display: inline-block; }
@media (max-width: 700px) { #mfSaved { display: block; margin: 8px 0 0 !important; } }

/* 086: unpaid campers see the board, but it is plainly out of reach */
/* Unpaid campers still get to LOOK. pointer-events:none used to kill the
   tooltips, the day swipe and the shift sheet along with the booking, which
   made the board useless rather than read-only. The Book buttons are disabled
   individually instead, and the database refuses the booking regardless (086). */
.dueslock { opacity: .62; filter: grayscale(.9); }
.dueslock .btn:disabled { opacity: 1; filter: none; }

/* Households at a glance (admin check-in desk) */
.hhgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hhtile { position: relative; border: 1px solid var(--line); border-left-width: 4px;
          border-radius: 9px; padding: 9px 11px; background: var(--card2); cursor: default; }
.hhtile:hover, .hhtile:focus-within { border-color: #55555e; }
.hhpop { display: none; position: absolute; z-index: 40; left: 0; top: calc(100% + 6px);
         min-width: 230px; max-width: 300px; background: var(--card); border: 1px solid var(--line);
         border-radius: 10px; padding: 11px 13px; box-shadow: 0 12px 34px rgba(0,0,0,.65);
         font-size: 13px; line-height: 1.5; }
.hhtile:hover .hhpop, .hhtile:focus-within .hhpop { display: block; }
/* a phone has no hover, so the panel opens on tap instead */
@media (hover: none) {
  .hhtile:hover .hhpop { display: none; }
  .hhtile.open .hhpop { display: block; position: static; box-shadow: none; margin-top: 8px;
                        max-width: none; min-width: 0; }
}

/* Sortable roster headings (admin People). The arrow is a hint, not decoration:
   with a Household column you always want to know which way the list is stacked. */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--fg); }
th.sortable::after { content: "\2195"; opacity: .28; margin-left: 5px; font-size: .85em; }
th.sortable.sorted::after { opacity: 1; }
th.sortable.sorted[data-dir="up"]::after { content: "\2191"; }
th.sortable.sorted[data-dir="down"]::after { content: "\2193"; }
tr.grouphead td { background: var(--card2); border-top: 2px solid var(--line);
                  padding-top: 10px; padding-bottom: 10px; font-size: .9rem; }

/* A night shift crosses midnight, so it draws twice: the tail of one day and
   the head of the next. Without saying so it reads as two overlapping shifts,
   which is exactly how Jorge read it. */
.calev .cnt.spill { display: block; opacity: .72; font-style: italic; }

/* ---- the camp guide, in the page ----
   It used to be a Google Doc in an iframe: white, tiny, and unreadable on a
   phone. Set in the camp's own type at a size a person can actually read at
   arm's length in daylight. */
.guide { font-size: 14.5px; line-height: 1.62; }
.guide h3 { font-family: var(--display); font-size: 17px; letter-spacing: .01em;
            margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.guide h3:first-of-type { margin-top: 6px; }
.guide h4 { font-size: 14px; margin: 18px 0 6px; color: var(--text); }
.guide p { margin: 0 0 10px; }
.guide ul, .guide ol { margin: 0 0 12px; padding-left: 20px; }
.guide li { margin-bottom: 6px; }
.guide .gintro { font-size: 15.5px; }
.guide .gwarn { border-left: 3px solid var(--warn); padding: 9px 12px; background: var(--card2);
                border-radius: 0 8px 8px 0; margin-bottom: 12px; }
.guide .gnote { color: var(--ok); font-size: 13px; margin: -2px 0 8px; }
.gtablewrap { overflow-x: auto; margin-bottom: 12px; }
.guide .gtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.guide .gtable th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px;
                    text-transform: uppercase; letter-spacing: .06em; padding: 6px 10px 6px 0;
                    border-bottom: 1px solid var(--line2); white-space: nowrap; }
.guide .gtable td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide .gflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
                margin-bottom: 14px; }
.guide .gflow > div { border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; }
.guide .gflow ol { margin: 8px 0 0; }
.guide .groles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
                 margin: 10px 0 14px; }
.guide .groles > div { border: 1px solid var(--line2); border-left: 3px solid var(--accent);
                       border-radius: 0 9px 9px 0; padding: 10px 12px; }
.guide .groles span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.gsource { color: var(--muted); font-size: 12.5px; margin-top: 22px; padding-top: 12px;
           border-top: 1px solid var(--line2); }
@media (max-width: 700px) { .guide { font-size: 14px; } .guide h3 { font-size: 16px; } }

/* A picked shift is chosen but NOT booked. It has to look different from both
   "yours" (green, already booked) and "available", or the difference between
   picking and committing disappears — which is the whole point of it. */
.shift.ispicked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.btn.picked { background: var(--accent); border-color: var(--accent); color: #0b0b0d; font-weight: 600; }
.calev.ispicked { outline: 2px dashed var(--accent); outline-offset: -2px; }
@supports not (background: color-mix(in srgb, red 9%, blue)) {
  .shift.ispicked { background: var(--card2); }
}

/* ---- The camp map (Maps -> Our camp) -----------------------------------
   Traced from Jorge's Rhino plan. Plot colour is a LEAD-ONLY reading of who
   has paid; a camper sees only taken / not matched, because household money
   is not theirs to see. Everything scales from the viewBox, so one set of
   rules covers 1280 and 430. */
.campsvg { width: 100%; height: auto; display: block; background: #0c0c0f; border-radius: 8px; }
.campsvg text { font-family: Inter, system-ui, sans-serif; }
.cm-s    { font-size: 9px;  fill: #8d8d99; }
.cm-dim  { font-size: 10px; fill: #7a7a86; letter-spacing: .04em; }
.cm-st   { font-size: 11px; fill: #9a9aa6; letter-spacing: .06em; }
.cm-zone { font-size: 12px; fill: #dcdce4; }
.cm-tr   { fill: #23232c; stroke: #55555f; }
.cm-sparepod { fill: #16161d; stroke: #33333c; }

.cm-plot rect { stroke-width: 1.2; transition: filter .12s; }
.cm-plot text { font-size: 9.5px; fill: #d2d2dc; pointer-events: none; }
.cm-plot text.cm-tiny { font-size: 8px; fill: #b6b6c2; }
.cm-plot { cursor: pointer; outline: none; }
.cm-plot:hover rect, .cm-plot:focus rect { filter: brightness(1.5); }
.cm-plot:focus rect { stroke: #fff; }

.cm-none   rect { fill: #17171e; stroke: #3a3a44; }
.cm-known  rect { fill: #1d2a33; stroke: #4b7690; }
.cm-paid   rect { fill: #16301f; stroke: #4faf6a; }
.cm-part   rect { fill: #35300f; stroke: #c9a83a; }
.cm-unpaid rect { fill: #331519; stroke: #b5474f; }
.cm-empty  rect { fill: #1a1a22; stroke: #4a4a56; stroke-dasharray: 3 3; }
.cm-mine   rect { stroke: var(--accent); stroke-width: 2.4; }

.cm-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 2px 2px;
          color: var(--muted); font-size: 12.5px; }
.cm-key span { display: inline-flex; align-items: center; gap: 6px; }
.cm-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block;
         border: 1px solid #3a3a44; background: #17171e; }
.cm-sw.cm-known  { background: #1d2a33; border-color: #4b7690; }
.cm-sw.cm-paid   { background: #16301f; border-color: #4faf6a; }
.cm-sw.cm-part   { background: #35300f; border-color: #c9a83a; }
.cm-sw.cm-unpaid { background: #331519; border-color: #b5474f; }
.cm-sw.cm-empty  { background: #1a1a22; border-color: #4a4a56; border-style: dashed; }
.cm-sw.cm-mine   { background: #17171e; border-color: var(--accent); border-width: 2px; }

/* The move-household picker sits in a table cell beside two buttons, so it has
   to be button-sized rather than full-width like every other select. */
select.small { padding: 6px 10px; font-size: 13px; width: auto; }

/* ---- Admin shift calendar (Shifts -> The board -> Calendar) -------------
   A read-only week grid: days as columns, a playa-time scale down the side,
   each shift a block coloured by its role. Purpose-built, so it does not drag
   in the camper booking sheet. */
.calwrap { overflow-x: auto; }
/* min-width is set inline per view now (drawCalendar): 0 for a single day so it
   fits a phone, a per-column floor for the multi-day week so it scrolls readably.
   A blanket 640 here used to force the single-day view wider than a phone. */
.calgrid { display: grid; gap: 0; position: relative; }
.calcorner, .calhead { border-bottom: 1px solid var(--line); }
.calhead { padding: 8px 6px; font-size: 12.5px; font-weight: 600; text-align: center;
           color: var(--text); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.calgutter { position: relative; border-right: 1px solid var(--line); }
.calhr { position: absolute; right: 5px; transform: translateY(-6px); font-size: 10.5px;
         color: var(--muted); font-variant-numeric: tabular-nums; }
.calday { position: relative; border-right: 1px solid var(--line2, var(--line));
          background-image: repeating-linear-gradient(var(--line2, #ececf0) 0 1px, transparent 1px 46px); }
.calblk { position: absolute; overflow: hidden; border-radius: 5px; padding: 3px 6px;
          display: flex; flex-direction: column; gap: 1px; cursor: pointer; text-align: left;
          color: var(--text); font: inherit; }
.calblk b { font-size: 11.5px; line-height: 1.15; }
.calblk span { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.calblk:hover { filter: brightness(1.08); }
.calblk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calcnt { align-self: flex-start; margin-top: 1px; padding: 0 5px; border-radius: 999px;
          font-weight: 600; }
.calcnt.ok  { background: color-mix(in srgb, var(--ok, #4c9a6a) 22%, transparent); color: var(--ok, #4c9a6a); }
.calcnt.warn{ background: color-mix(in srgb, var(--warn, #b8860b) 22%, transparent); color: var(--warn, #b8860b); }
.calcnt.bad { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.card.flash { animation: cardflash 1.6s ease-out; }
@keyframes cardflash { 0%,20% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: none; } }

/* "Save for later" (144): the star toggle on a shift, tinted when saved */
.savebtn.saved { color: var(--accent); border-color: var(--accent); }

/* D'Jungle campers paid no deposit: hide deposit copy for them (146) */
body.fc-nodeposit .js-deposit { display: none !important; }