/* volunteer.html styling. RTL, dark, matches sector-mapper.html tokens. */
:root{
  --obsidian:#0A0A0A; --surface:#141414; --surface-2:#1C1C1C;
  --line:#2C2C2C; --ink:#EAE7E1; --ink-dim:#918C84;
  --amber:#FFC940; --amber-dim:#7A5F1C;
  --p0:#E5484D; --p1:#FF8A3D; --p2:#5EC8E5; --p3:#8A8681;
  --danger:#E5484D; --ok:#4ADE80; --warn:#FF8A3D;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;
  font-family:'Heebo','Alef',system-ui,sans-serif;
  font-size:15px; background:var(--obsidian); color:var(--ink);
  -webkit-font-smoothing:antialiased}

#app{display:flex;flex-direction:column;height:100%}

.safety-banner{
  background:#3A0A0A; color:#FFB4B7; padding:10px 14px;
  border-bottom:2px solid var(--danger); font-size:13.5px; line-height:1.4;
  display:flex; justify-content:space-between; gap:10px;
}
.safety-banner b{color:#FFDCDE}
.volunteer-name-wrap{display:flex; align-items:center; gap:4px; white-space:nowrap}
.volunteer-name{color:var(--ink-dim);font-size:12.5px}
.edit-name-btn{
  background:none; border:none; color:var(--ink-dim); cursor:pointer;
  font-size:13px; padding:4px 6px; min-width:28px; min-height:28px;
  border-radius:3px;
}
.edit-name-btn:hover{background:rgba(255,255,255,0.05); color:var(--ink)}

/* Name modal — non-blocking overlay opened on first visit and via pencil */
.name-modal[hidden]{display:none}
.name-modal{
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.name-modal-box{
  background:var(--surface); padding:24px; border-radius:8px;
  border:1px solid var(--line); width:100%; max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.name-modal-title{
  font-size:18px; font-weight:700; margin-bottom:16px; color:var(--ink);
}
#name-input{
  width:100%; padding:12px; font-size:16px;
  background:var(--obsidian); border:1px solid var(--line);
  border-radius:4px; color:var(--ink); margin-bottom:16px;
  font-family:inherit;
}
#name-input:focus{outline:none; border-color:var(--amber-dim)}
.name-modal-actions{display:flex; gap:8px}
.name-modal-actions button{
  flex:1; min-height:44px; padding:10px; border-radius:4px;
  font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer;
}
.name-modal .btn-primary{background:var(--amber); border:none; color:#0A0A0A}
.name-modal .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}

/* §5.2: home marker — amber ⌂ glyph, above all sectors */
.home-marker{background:transparent; border:none}
.home-icon{
  width:32px; height:32px;
  background:var(--amber); color:#0A0A0A;
  border-radius:50%; border:3px solid #0A0A0A;
  font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
}

/* §3.8: separator between "within reach" and "beyond reach" groups.
   Fixed real estate — no border-radius, no padding shift. textContent
   updates every second in place; height must not change. */
.group-separator{
  background:var(--surface);
  color:var(--ink-dim);
  font-size:12.5px;
  padding:12px 14px;
  text-align:center;
  border-block:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.05em;
}

.disconnect-banner{
  background:var(--danger); color:#fff; padding:8px 14px;
  font-weight:700; font-size:13.5px; text-align:center; display:none;
}
body.stale .disconnect-banner{display:block}

#map{flex:0 0 45%; background:#111; z-index:1}

.fab-row{
  padding:8px 12px; background:var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fab{
  width:100%; min-height:44px; background:var(--amber); border:none;
  color:#0A0A0A; font-weight:700; padding:10px 12px; border-radius:4px;
  font-family:inherit; font-size:15px; cursor:pointer;
}
.fab:disabled{opacity:0.4; cursor:not-allowed}

#list-scroll{flex:1; overflow-y:auto; background:var(--surface)}
.my-anchor{
  position:sticky; top:0; z-index:5;
  background:var(--surface-2); border-bottom:2px solid var(--amber);
  padding:12px 14px;
}
.my-anchor.warn{background:#3A2A0A; border-bottom-color:var(--warn); animation:pulse 2s infinite}
.my-anchor.frozen{opacity:0.5}
.my-anchor[hidden]{display:none}
@keyframes pulse{0%,100%{background:#3A2A0A}50%{background:#4A3510}}
.my-anchor .row1{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.my-anchor .countdown{font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--amber)}
.my-anchor .actions{display:flex; gap:6px; flex-wrap:wrap}
.my-anchor button{
  min-height:44px; padding:8px 12px; border-radius:4px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:14px; cursor:pointer;
}
.my-anchor button.primary{background:var(--ok); border-color:var(--ok); color:#0A0A0A; font-weight:700; flex:1}
.my-anchor button.danger{background:transparent; color:var(--ink-dim)}

.anchor-nav{display:flex; gap:8px; margin:8px 0; justify-content:flex-start}
.anchor-nav a{
  padding:8px 16px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:4px; text-decoration:none;
  font-size:14px; font-weight:700; min-height:36px;
}
.focusable{cursor:pointer; text-decoration:underline dotted var(--ink-dim); text-underline-offset:3px}
.sector-card.flash{ animation: card-flash 2s ease-out }
@keyframes card-flash {
  0%   { background: rgba(255, 201, 64, 0.35); }
  100% { background: transparent; }
}

.sector-card{
  border-bottom:1px solid var(--line); padding:11px 14px;
  display:flex; align-items:flex-start; gap:10px;
}
.sector-card .tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
  padding:3px 7px; border-radius:2px; color:#0A0A0A; flex-shrink:0; margin-top:2px;
}
.sector-card.p0 .tag{background:var(--p0); color:#fff}
.sector-card.p1 .tag{background:var(--p1)}
.sector-card.p2 .tag{background:var(--p2)}
.sector-card.p3 .tag{background:var(--p3)}
.sector-card .body{flex:1; min-width:0}
.sector-card .name{font-weight:700; font-size:14px}
.sector-card .meta{color:var(--ink-dim); font-size:12px; margin-top:2px}
.dist{font-size:11.5px; line-height:1.4; margin-top:2px}
.dist-you{color:var(--ink); font-weight:600}
.dist-home{color:var(--ink-dim); font-size:11px}
.sector-card .nav-links{margin-top:6px; display:flex; gap:6px}
.sector-card .nav-links a{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-decoration:none;
  color:var(--amber); border:1px solid var(--amber-dim); border-radius:2px; padding:3px 8px;
}
.sector-card .act{
  min-height:44px; padding:8px 12px; border:none; border-radius:4px;
  background:var(--amber); color:#0A0A0A; font-weight:700; cursor:pointer;
  font-family:inherit; font-size:13.5px;
}
body.stale .act{pointer-events:none; opacity:0.4}

/* Four card states MUST be distinguishable at a glance in a dimmed 2AM
   phone screen. Not just opacity — each needs its own visual signature:
     free          — default (amber "אני לוקח" button, colored priority tag)
     taken-other   — cyan side-band + faded background, no button
     swept         — green side-band, checkmark meta, no button
     stale         — dashed cyan side-band + "?" badge, still takeable
*/
.sector-card{position:relative}   /* enables ::before side-band */

.sector-card.taken-other{
  background:var(--surface-2);
  opacity:0.85;
}
.sector-card.taken-other::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:4px; background:var(--p2);   /* cyan — "someone else has it" */
}
.sector-card.taken-other .act{display:none}
.sector-card.taken-other .meta{color:var(--p2)}

.sector-card.swept{
  background:var(--surface-2);
  opacity:0.7;
}
.sector-card.swept::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:4px; background:var(--ok);   /* green — done */
}
.sector-card.swept .act{display:none}

.sector-card.stale{
  /* Distinct from swept: same-ish green swept but with a "?" badge and
     dashed border to signal "was swept, but too long ago to trust." */
  background:var(--surface-2);
  opacity:0.85;
}
.sector-card.stale::before{
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:4px; background:transparent;
  border-inline-start:4px dashed var(--warn);   /* dashed warn — unverified */
}
.sector-card.stale .name::after{
  content:' ?'; color:var(--warn); font-weight:700;
  background:var(--surface); padding:0 6px; border-radius:8px;
  margin-inline-start:6px; font-size:12px; vertical-align:middle;
}
/* stale is still takeable — button stays visible */

.empty{
  padding:24px 14px; text-align:center; color:var(--ink-dim);
  font-size:13px; line-height:1.5;
}

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--surface-2); color:var(--ink); padding:12px 20px;
  border:1px solid var(--line); border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.6);
  font-size:14px; z-index:100; max-width:90%;
}
.toast.ok{border-color:var(--ok)}
.toast.warn{border-color:var(--warn)}
.toast.error{border-color:var(--danger)}

/* SIGHTING panel */
.sighting-panel{
  position:fixed; inset:0; background:var(--obsidian); z-index:50;
  display:none; flex-direction:column;
}
.sighting-panel.open{display:flex}
.sighting-panel .hdr{
  padding:12px 14px; display:flex; justify-content:space-between; align-items:center;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.sighting-panel .hdr h2{margin:0; font-size:16px}
.sighting-panel .close{
  background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer;
  min-width:44px; min-height:44px;
}
#sighting-map{flex:0 0 55%; background:#111; position:relative}
/* Sighting uses a draggable marker + click-to-move (no fixed reticle).
   The reticle pattern was removed after phone testing showed users
   preferred a familiar pin they could tap to reposition. */
.sighting-body{flex:1; overflow-y:auto; padding:12px 14px}
.sighting-body .grp{margin-bottom:14px}
.sighting-body .lbl{
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:0.15em; color:var(--ink-dim); margin-bottom:6px; text-transform:uppercase;
}
.chip-row{display:flex; gap:6px}
.chip{
  flex:1; min-height:44px; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); border-radius:4px; padding:10px; cursor:pointer;
  font-family:inherit; font-size:14px;
}
.chip.on{background:var(--amber); color:#0A0A0A; font-weight:700; border-color:var(--amber)}
.dir-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; max-width:200px}
.dir-cell{
  min-height:44px; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); border-radius:4px; cursor:pointer; font-size:20px;
}
.dir-cell.on{background:var(--amber); color:#0A0A0A; border-color:var(--amber)}
.dir-north-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-dim);
  margin-bottom:4px; text-align:center; max-width:200px;
}
.sighting-body textarea{
  width:100%; background:var(--surface); border:1px solid var(--line);
  color:var(--ink); padding:10px; border-radius:4px; font-size:16px;
  font-family:inherit; resize:vertical; min-height:60px;
}
.sighting-actions{
  padding:12px 14px; display:flex; gap:8px; border-top:1px solid var(--line);
  background:var(--surface);
}
.sighting-actions button{
  flex:1; min-height:44px; border-radius:4px; font-family:inherit;
  font-size:15px; font-weight:700; cursor:pointer; border:none;
}
.btn-send{background:var(--amber); color:#0A0A0A}
.btn-send:disabled{opacity:0.4; cursor:not-allowed}
.btn-cancel{background:transparent; color:var(--ink-dim); border:1px solid var(--line)}
.inline-banner{
  padding:8px 14px; background:#3A2A0A; color:var(--warn); font-size:13px;
  border-bottom:1px solid var(--warn); display:none; text-align:center;
}
.sighting-panel.stale-inside .inline-banner{display:block}

.fatal{
  padding:40px 20px; text-align:center; font-size:18px; line-height:1.5; color:var(--danger);
}