/* K7AQ Callsign Tools — classic query-tools look (in the AE7Q tradition) */
:root {
  --navy: #000080;
  --blue: #0000ff;
  --link: #0000cc;
  --red: #ff0000;
  --maroon: #800000;
  --head: #66cc99;     /* table header rows */
  --help: #ccff99;     /* navigation / notes boxes */
  --lookup: #ccffcc;   /* callsign lookup box */
  --panel: #ffff99;    /* query forms panel */
  --title: #ccffff;    /* status table title */
  --green: #99ff66;
  --bluec: #99ccff;
  --yellow: #ffff66;
  --pink: #ff99cc;
  --gray: #cccccc;
  --silver: #c0c0c0;
  --button: #e0e0e0;   /* light gray push buttons */
  --serif: "Times New Roman", Times, serif;
  --sans: Tahoma, Verdana, "Segoe UI", sans-serif;
  --mono: "Courier New", Courier, monospace;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 8px; background: #fff; color: #000; font: 16px/1.25 var(--serif); }
a { color: var(--link); }
a:visited { color: #551a8b; }
a:hover { color: var(--red); }
h1, h2, h3, h4, h5 { font-family: var(--sans); font-style: italic; font-weight: 700; }
p { margin: .5em 0; }
code, kbd, .mono { font-family: var(--mono); }
.muted, .faint { color: #555; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.num { text-align: right; }
.hidden { display: none !important; }

/* ───────── header ───────── */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; }
.navbox { justify-self: start; border-collapse: collapse; background: var(--help); font-size: 12px; }
.navbox th { background: var(--head); padding: 2px 6px; font: bold 12px var(--serif); text-align: center; }
.navbox td { padding: 1px 6px; white-space: nowrap; }
.navbox a { color: var(--navy); font-weight: 700; }
.navbox .ltr { font: italic 700 18px/1 var(--sans); color: var(--red); text-decoration: none; margin-right: 1px; }
.navbox .small { font-size: 10px; font-weight: 700; color: var(--navy); }
.navbox .sub { padding-left: 6px; }

.wordmark { display: block; align-self: center; text-decoration: none; white-space: nowrap; text-align: center; }
.wordmark b { font: italic 700 64px/1 var(--sans); color: var(--red); letter-spacing: 2px; }
.wordmark span { font: italic 700 27px var(--sans); color: var(--navy); margin-left: 10px; }
.sidebox { justify-self: end; background: var(--lookup); padding: 6px 10px; font: 700 12px var(--sans); color: var(--navy); text-align: center; min-width: 170px; }
.sidebox form { display: flex; gap: 4px; justify-content: center; margin: 4px 0; }
.sidebox input[type=search] { width: 110px; }
.sidebox .row { margin-top: 3px; }
.sidebox .row a { color: var(--navy); }
.sidebox .val { color: var(--blue); }
.sidebox .ext { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; font-size: 11px; margin: 4px 0; }
.sidebox .ext a { color: var(--navy); background: #fff; border: 1px solid var(--navy); padding: 1px 4px; text-decoration: none; }
.sidebox .powered { font: 10px var(--sans); color: #333; margin-top: 6px; font-weight: 400; }

h3.pagetitle { text-align: center; color: var(--blue); font-size: 18.7px; margin: 18px 0; }
.tribute { text-align: center; color: var(--maroon); font: italic 700 15px/1.3 var(--sans); margin: 10px 4px; }

/* ───────── page caption + key band (classic "Retrieving … for" header) ───────── */
.wrap { margin: 0; }
.page-head { margin: 18px 0 14px; text-align: center; }
.eyebrow, .caption { font: italic 700 20px/1.3 var(--sans); color: var(--navy); margin: 10px 0 14px; text-transform: none; letter-spacing: 0; }
.page-head h1 { margin: 0; font: 400 16px var(--sans); }
.keyband { display: block; background: var(--gray); padding: 1px 0; text-align: center; font: italic 700 17px var(--mono); color: var(--blue); }
.keyband.s-green { background: var(--green) !important; } .keyband.s-yellow { background: var(--yellow) !important; }
.keyband.s-red { background: var(--pink) !important; } .keyband.s-blue { background: var(--bluec) !important; }
.keyband, .keyband.s-green, .keyband.s-yellow, .keyband.s-red, .keyband.s-blue, .keyband.s-gray { color: var(--blue); }
.page-head .sub { font-size: 13px; color: #333; max-width: 900px; margin: 10px auto 0; }
.head-controls { display: flex; justify-content: center; margin-top: 10px; }
.head-controls:empty { display: none; }

hr.rule, .section-head { border: 0; }
hr.rule { height: 8px; background: var(--blue); margin: 26px 0; }
.section { margin-top: 26px; }
.section-head { display: block; text-align: center; margin: 0 0 12px; padding-top: 26px; border-top: 8px solid var(--blue); }
.section-head h2 { font-size: 20px; color: var(--navy); margin: 0 0 8px; }
.section-head p { font-size: 13px; color: #333; margin: 4px 0; }
.section-head .legend { justify-content: center; }

/* layout helpers */
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.grid > *, .split > * { min-width: 0; }
.stack > * + * { margin-top: 18px; }
@media (max-width: 900px) {
  .cols-2, .cols-3, .split { grid-template-columns: minmax(0, 1fr); }
  .masthead { grid-template-columns: 1fr; justify-items: center; }
  .navbox, .sidebox { justify-self: center; }
}

/* panels are invisible wrappers; tables carry the structure */
.card { background: none; border: 0; }
.card-pad { padding: 0; }
.card-head { background: var(--head); border: 1px solid var(--navy); border-bottom: 0; padding: 4px 8px; text-align: center; font-size: 12px; display: flex; gap: 8px 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.card-head h2, .card-head h3 { font: 700 13px var(--serif); font-style: normal; margin: 0; color: #000; }
.card-foot { font-size: 12px; padding: 4px 2px; color: #333; }

/* ───────── controls ───────── */
input[type=text], input[type=search], input[type=number] { font: 13px var(--mono); padding: 2px 4px; border: 1px solid #767676; background: #fff; }
select { font: 13px Arial, sans-serif; }
.btn, button.btn, input[type=submit] {
  display: inline-block; font: 700 12.8px var(--sans); color: #000; background: var(--button); border: 4px outset var(--button);
  padding: 1px 8px; cursor: pointer; text-decoration: none; white-space: nowrap; border-radius: 0;
}
.btn:hover, .btn:visited { color: #000; }
.btn:active { border-style: inset; }
.btn.secondary { background: #f0f0f0; border-color: var(--button); }
.btn.small { font-size: 11.5px; padding: 0 6px; }
.form-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
label.check { font-size: 14px; }
.seg { display: inline-flex; gap: 10px; font-size: 14px; }
.seg input { display: inline; }
.chips { display: flex; gap: 6px 10px; flex-wrap: wrap; justify-content: center; }
.toc, .pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.toc a { font: 700 12.8px var(--sans); color: #000; background: var(--button); border: 4px outset var(--button); padding: 1px 8px; text-decoration: none; }

/* ───────── data tables ───────── */
.table-wrap { overflow-x: auto; }
.card > .table-wrap, .table-wrap { margin: 0 auto; }
table.t { border-collapse: collapse; border: 1px solid var(--navy); font: 12px/1.25 var(--serif); margin: 0 auto; background: #fff; }
.t th, .t td { border: 1px solid var(--navy); padding: 4px; vertical-align: middle; }
.t thead th { background: var(--head); font-weight: 700; text-align: center; }
.t thead th a { color: var(--link); }
.t tbody th { background: var(--head); font-weight: 700; }
.t tfoot th, .t tfoot td { background: #fff; font-weight: 700; }
.t tfoot th { background: var(--head); }
.t .num { text-align: right; }
.t tr.preuls td { background: var(--silver); }
.t td.ditto { position: relative; color: transparent; }
.t td.ditto a, .t td.ditto strong, .t td.ditto span { color: transparent; text-decoration: none; }
.t td.ditto::after { content: "\""; position: absolute; inset: 0; display: grid; place-items: center; color: #000; }
.t.compact th, .t.compact td { padding: 3px 4px; }
.kv { border-collapse: collapse; border: 1px solid var(--navy); font-size: 12px; background: #fff; }
.kv th { background: var(--head); text-align: left; padding: 3px 6px; border: 1px solid var(--navy); white-space: nowrap; }
.kv td { padding: 3px 6px; border: 1px solid var(--navy); }
.kv th.derived { font-style: italic; }
.kv td.changed { font-style: italic; }

/* availability / status colors (exact classic palette) */
.s-green { background: var(--green) !important; }
.s-blue { background: var(--bluec) !important; }
.s-yellow { background: var(--yellow) !important; }
.s-red { background: var(--pink) !important; }
.s-gray { background: var(--gray) !important; }
.pill { display: inline-block; font: 700 12px var(--sans); padding: 2px 8px; border: 1px solid var(--navy); background: #fff; }
.legend { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; justify-content: center; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--navy); vertical-align: -2px; margin-right: 4px; }

/* callsigns */
a.call, .call { font-family: var(--mono); font-size: 1.05em; white-space: nowrap; }
a.call.vanity, .call.vanity { font-weight: 700; }
a.call.requested { font-style: italic; }

/* message table (status / restriction lines) */
.msgs { display: table; border-collapse: collapse; border: 1px solid var(--navy); margin: 14px auto; font-size: 15px; }
.msg { display: table-row; }
.msg > span { display: table-cell; padding: 3px 6px; text-align: center; border-bottom: 1px solid var(--navy); }
.msg.s-green, .msg.s-blue, .msg.s-yellow, .msg.s-red { background: none !important; }
.msg.s-green > span { background: var(--green); } .msg.s-blue > span { background: var(--bluec); }
.msg.s-yellow > span { background: var(--yellow); } .msg.s-red > span { background: var(--pink); }
.msg kbd { color: var(--blue); font-weight: 700; }

/* help boxes */
.helpboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; margin: 14px 4px; }
@media (max-width: 900px) { .helpboxes { grid-template-columns: 1fr; gap: 12px; } }
.helpbox { background: var(--help); }
.helpbox h6 { margin: 0; font: 700 16px var(--serif); font-style: normal; text-align: center; padding: 2px; border-bottom: 2px solid #fff; }
.helpbox ul { margin: 0; padding: 8px 12px 10px 40px; font-size: 15px; }
.help { background: var(--help); font-size: 13px; padding: 6px 10px; margin: 10px auto; max-width: 980px; }
.notice { text-align: center; margin: 10px auto; font-size: 15px; }
.empty { text-align: center; padding: 6px; }
.card.empty, .empty { font: italic 700 15px var(--sans); color: purple; }
.prose { max-width: 960px; margin: 0 auto; font-size: 16px; line-height: 1.35; }
.prose h2 { color: var(--navy); text-align: center; font-size: 20px; margin: 28px 0 10px; padding-top: 22px; border-top: 8px solid var(--blue); }
.prose h3 { color: var(--navy); font-size: 17px; }
.prose table { margin: 8px 0; }
.vc-list { display: flex; flex-wrap: wrap; gap: 2px 8px; max-width: 330px; }
.vc { font: italic 13px var(--mono); }
.vc.s-green { font-weight: 700; font-style: normal; padding: 0 2px; }
.bar-mini, .bar { display: flex; height: 8px; border: 1px solid var(--navy); min-width: 60px; background: #fff; }
.bar-mini span, .bar span { display: block; height: 100%; }
.bar-mini .g { background: var(--green); } .bar-mini .b { background: var(--bluec); } .bar-mini .y { background: var(--yellow); } .bar-mini .r { background: var(--pink); }
#map { height: 520px; border: 1px solid var(--navy); }

/* home page */
.dbstatus { margin: 0 auto 26px; }
.dbstatus caption, .dbstatus .ttl { background: var(--title); font-size: 12px; font-weight: 700; padding: 4px; border: 1px solid var(--navy); border-bottom: 0; }
.dbstatus .ttl em { color: var(--red); font: italic 700 15px var(--sans); }
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .home-cols { grid-template-columns: minmax(0, 1fr); } }
.home-left { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.home-left .btnrow { display: flex; gap: 20px; padding-left: 36px; }
.home-left .t { margin: 0; }
.regbtn { display: inline-block; width: 30px; text-align: center; padding: 0 2px; font-size: 11px; }
.qpanel { background: var(--panel); border: 1px solid var(--navy); margin-bottom: 14px; }
.qpanel h4 { margin: 0; text-align: center; font: 700 16px var(--serif); font-style: normal; padding: 6px; border-bottom: 2px solid #fff; }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; padding: 8px; border-bottom: 2px solid #fff; font-size: 15px; }
.qrow:last-child { border-bottom: 0; }
.qrow .ctl { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.qrow input[type=text] { width: 120px; }
.qrow .opts { grid-column: 1 / 2; font-size: 15px; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.dbnote { font-size: 12px; text-align: center; max-width: 440px; }

/* calendar */
.cal { border-collapse: collapse; width: 100%; table-layout: fixed; border: 1px solid var(--navy); font-size: 12px; }
.cal th { background: var(--head); border: 1px solid var(--navy); padding: 4px; }
.cal td { border: 1px solid var(--navy); vertical-align: top; height: 92px; padding: 3px 4px; background: #ccff99; }
.cal td.weekend { background: #ffcccc; }
.cal td.holiday { background: #ffff99; }
.cal td.out { background: var(--silver); }
.cal .dnum { float: right; font: 700 20px var(--sans); color: #000; }
.cal td.today .dnum { color: var(--blue); }
.cal .line { display: block; clear: right; }
.cal .hol { font-style: italic; }
.pend { font-size: 12px; }

/* footer */
.foot { margin-top: 30px; text-align: center; font-size: 13px; }
.foot .tribute-foot { color: var(--maroon); font: italic 700 14px/1.35 var(--sans); max-width: 1000px; margin: 0 auto 10px; }
.foot .fine { font-size: 12px; color: #000; }
.page-head h1.keyband { font: italic 700 17px/1.3 var(--mono); color: var(--blue); margin: 0; }
.t td.ditto::after { color: #000 !important; font-weight: 400; }
/* panel title bars hug their tables, like a title row */
.card { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.card > .table-wrap > .t, .card > .kv { margin: 0; }
.split > .card, .split > .stack > .card { margin-left: 0; }
table.t.dbstatus { margin: 0 auto 26px; }
/* availability lists: 1x2 and 2x1 tables side by side, as on the original */
.avail-cols { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 48px; }
.avail-cols > .table-wrap { margin: 0; }
.avail-cols .t { margin: 0; }
/* footer tribute: one line on desktop, wraps on narrow screens */
.foot .tribute-foot { max-width: none; font-size: 12.5px; }
@media (min-width: 1200px) { .foot .tribute-foot { white-space: nowrap; } }