/* Eagle: Marshal's tokens, header, drawer and form styles (styles.css), plus what an owner page needs */
.eagle header { grid-template-columns:auto 1fr auto; background-color:#24323d; background-image:radial-gradient(ellipse 60% 120% at 100% 0%, #34495a 0%, transparent 60%); } /* slate, not Marshal's forest: the two tools read apart at a glance */
.eagle .none { color:var(--mute); font-family:var(--display); font-style:italic; }
.eagle .err { color:var(--red); } .eagle .err:empty { display:none; }
.eagle .btn { padding:10px 18px; border-radius:999px; border:none; background:var(--forest); color:var(--cream2); font:700 .9rem var(--ui); cursor:pointer; transition:transform .25s var(--spring); }
.eagle .btn:hover { transform:translateY(-1px); } .eagle .btn:disabled { opacity:.5; cursor:wait; }
.eagle a.nlink, .eagle a.ext { color:var(--forest); font-weight:600; font-size:.85rem; text-decoration:none; border-bottom:1.5px solid var(--sage2); }
.eagle .pill { font-size:.8rem; padding:5px 12px; border-radius:999px; border:1.5px solid var(--line); font-weight:500; background:#fff; }
.eagle .pill.hq { background:var(--forest); color:var(--cream); border-color:var(--forest); }
.eagle .pend { color:var(--sage); font-weight:600; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- owner list ---------- */
table.owners { width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.owners th { text-align:left; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-weight:600; padding:14px 18px; border-bottom:1.5px solid var(--line); }
.owners td { padding:14px 18px; border-bottom:1px solid var(--line); font-size:.95rem; }
.owners tbody tr { cursor:pointer; transition:background .2s; } .owners tbody tr:hover, .owners tbody tr:focus { background:var(--cream); outline:none; }
.owners tbody tr:last-child td { border-bottom:none; }
.owners b { font-family:var(--display); font-weight:400; font-size:1.15rem; }
.owners td.never { color:var(--red); font-weight:600; }

/* ---------- owner page ---------- */
.ohead { display:flex; flex-wrap:wrap; align-items:center; gap:18px; } .ohead .back { margin:0; }
.ltabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ltabs a { padding:8px 14px; border-radius:12px; background:#fff; border:1.5px solid var(--line); color:var(--forest); font-weight:600; font-size:.9rem; cursor:pointer; box-shadow:var(--shadow); transition:all .2s; }
.ltabs a small { color:var(--mute); font-weight:500; margin-left:4px; } .ltabs a:hover { border-color:var(--sage2); }
.ltabs a.on { background:var(--forest); border-color:var(--forest); color:var(--cream2); } .ltabs a.on small { color:var(--sage2); }
.ltabs a:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.cols { display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:start; } .cols > section { min-width:0; } /* a long row inside must not widen the page */
@media (max-width:900px) { .cols { grid-template-columns:1fr; } .owners:not(.usage) :is(th, td):nth-child(n+3):not(:last-child) { display:none; } table.usage { display:block; overflow-x:auto; } } /* Eagle Eye keeps every column and scrolls inside its box */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.eagle select { font:inherit; font-size:.88rem; padding:8px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.eagle select:focus { outline:none; border-color:var(--forest); }
.eagle h3.sec .btn.new { margin-left:auto; align-self:center; padding:8px 16px; font-size:.85rem; } /* each list's create button: right of its heading */

.log { background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px; cursor:pointer; transition:border-color .2s; }
.log:hover, .log.open { border-color:var(--sage2); } .log:focus { outline:2px solid var(--forest); outline-offset:2px; }
.ehead { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; }
.ehead time { font-size:.8rem; color:var(--mute); font-weight:600; min-width:52px; }
.ehead .type { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--sage); }
.ehead b { font-weight:600; }
.lmeta { margin-top:4px; font-size:.82rem; color:var(--mute); }
.lnotes { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); cursor:auto; }
.lnotes p { margin:0 0 8px; line-height:1.55; white-space:pre-wrap; }

.todo { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.todo input { margin-top:3px; width:18px; height:18px; accent-color:var(--forest); flex:none; cursor:pointer; }
.todo .tick { flex:none; padding:10px; margin:-10px; cursor:pointer; } /* the label around the box: 44px to tap on a touch screen */
.todo small { color:var(--mute); font-size:.8rem; }
.todo.late small { color:var(--red); font-weight:600; }
.todo.d > div > div:first-child { color:var(--mute); text-decoration:line-through; text-decoration-color:var(--lockline); }
details.done summary { cursor:pointer; margin-top:16px; font-size:.85rem; color:var(--mute); font-weight:600; }

.ann { color:var(--mute); margin:-6px 0 16px; }
.lcards { display:grid; gap:16px; } /* one location at a time, the full width */
.lcard { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 36px; align-items:start; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow); }
.lcard h4 { margin:0 0 10px; font-family:var(--display); font-weight:400; font-size:1.35rem; }
.lcard .pills { display:flex; flex-wrap:wrap; gap:6px; }
.lcard dl { display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:4px 18px; margin:14px 0 0; }
.lcard dt { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:600; } .lcard dd { margin:2px 0 0; font-size:.9rem; }
.lcard h5 { margin:16px 0 6px; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-weight:600; }
.obar { height:8px; background:var(--lock); border-radius:4px; overflow:hidden; margin-bottom:6px; }
.obar i { display:block; height:100%; background:linear-gradient(90deg, var(--sage) 0%, var(--sage2) 100%); }

/* ---------- log form (drawer) ---------- */
.drawer .nform .two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.drawer .nform textarea { display:block; width:100%; margin-top:6px; font:1rem/1.5 var(--ui); padding:11px 12px; border:1.5px solid var(--line); border-radius:12px; background:var(--cream); color:var(--ink); resize:vertical; text-transform:none; letter-spacing:0; }
.drawer .nform textarea:focus { outline:none; border-color:var(--forest); }
.boxes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.box input { position:absolute; opacity:0; width:1px; height:1px; }
.box span { display:inline-block; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line); font-size:.85rem; cursor:pointer; transition:all .2s; }
.box input:checked + span { background:var(--forest); border-color:var(--forest); color:var(--cream); }
.box input:focus-visible + span { outline:2px solid var(--forest); outline-offset:2px; }
.drawer .nform label.box { display:inline; margin:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:inherit; color:var(--ink); }
.ehead b::after { content:"›"; margin-left:10px; color:var(--sage); display:inline-block; transition:transform .25s var(--ease); } .log.open .ehead b::after { transform:rotate(90deg); }
.search[hidden] + .who { margin-left:auto; } /* no search box (an owner, Eagle Eye): the email still sits right */
/* the Eagle Eye tab (#eagle-eye): who uses Marshal */
.usage tbody tr { cursor:default; } .usage tbody tr:hover { background:none; }
.usage td:nth-child(n+4), .usage th:nth-child(n+4) { text-align:right; }
.usage th button { background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; white-space:nowrap; } .usage th button:hover { color:var(--ink); } .usage th button:focus-visible { outline:2px solid var(--forest); outline-offset:3px; }
.usage th i { font-style:normal; font-size:.6rem; margin-left:5px; }
.usage td small { display:block; color:var(--mute); font-size:.8rem; }
.usage b { font-family:var(--ui); font-weight:600; font-size:.95rem; }
.use { display:flex; flex-direction:column; padding:4px 0; } .use span { font-size:.88rem; font-weight:600; overflow-wrap:anywhere; }
.use small { color:var(--mute); font-size:.8rem; } .use small.never { color:var(--red); font-weight:600; }
.recent { list-style:none; margin:0; padding:0; }
.recent li { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); } .recent li:last-child { border-bottom:none; }
.recent time { flex:none; min-width:48px; font-size:.8rem; font-weight:600; color:var(--mute); padding-top:2px; }
.recent b { display:block; font-weight:600; font-size:.9rem; } .recent small { color:var(--mute); font-size:.8rem; overflow-wrap:anywhere; }
.lcard > div > h5:first-child { margin-top:6px; } /* the right column starts level with the location name */
/* phones: Marshal's app bar and tab bar (styles.css). Eagle's header has an empty middle cell */
@media (max-width:600px), (max-height:500px) and (pointer:coarse) {
  .eagle header { grid-template-columns:minmax(0, 1fr) auto; } .eagle header > div:empty { display:none; }
  /* owners: each row a card, names over the group, last contact on the right */
  table.owners:not(.usage), .owners:not(.usage) tbody { display:block; }
  .owners:not(.usage) thead { display:none; }
  .owners:not(.usage) tbody tr { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; padding:14px 16px; border-bottom:1px solid var(--line); }
  .owners:not(.usage) td { display:none; padding:0; border:0; }
  .owners:not(.usage) td:first-child { display:block; } .owners:not(.usage) td:nth-child(2) { display:block; grid-row:2; font-size:.85rem; color:var(--mute); }
  .owners:not(.usage) td:last-child { display:block; grid-column:2; grid-row:1 / span 2; align-self:center; font-size:.85rem; }
  /* an owner's page: the filters in one sideways row; Log conversation floats above the tab bar, the action after a call */
  .filters { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 14px; padding:0 16px; scrollbar-width:none; } .filters select { flex:none; }
  .eagle h3.sec .btn.new[data-logform] { position:fixed; z-index:4; right:max(16px, env(safe-area-inset-right)); bottom:calc(env(safe-area-inset-bottom) + 76px); padding:14px 20px; font-size:.95rem; box-shadow:0 12px 30px -8px rgba(20,43,37,.55); }
  .eagle .btn { min-height:40px; }
  .box span { padding:10px 14px; }
  .eagle a.nlink, .eagle a.ext { display:inline-block; padding:10px 0; }
  .ltabs a { padding:12px 14px; }
}
/* touch screens: 16px fields so iOS does not zoom in, selects and checkboxes as big as a thumb */
@media (pointer:coarse) { .eagle select { font-size:16px; -webkit-appearance:none; appearance:none; min-height:44px; padding-right:34px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231D3C34' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center / 12px; } .todo input { width:24px; height:24px; margin-top:0; } }

/* Hank's questions (hank.js): one row per question, the answer under it */
.hankq { background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:8px; }
.hankq summary { cursor:pointer; display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:baseline; }
.hankq summary small, .hankq summary span { color:var(--mute); font-size:.85rem; }
.hankq p { margin:10px 0 0 84px; white-space:pre-wrap; }
@media (max-width:600px) { .hankq summary { grid-template-columns:1fr; gap:2px; } .hankq p { margin-left:0; } }