/* Q-Cop PWA — styling. 18 September 2026.
 *
 * Designed for a phone held in one hand, often at night, often in a car, often
 * by someone who is being spoken to at the same time. That is the whole brief:
 *   - dark, because the alternative is a white screen in a dark car at 3am
 *   - large tap targets, because the other hand is busy
 *   - no animation that delays anything
 *   - text that can be read at arm's length without zooming
 *
 * Nothing in here is Queensland-specific. Colours and type only.
 */

:root {
  --bg:      #000000;   /* matches the logo's field exactly */
  --card:    #15171c;
  --card2:   #1c1f26;
  --line:    #2b313b;
  --text:    #f3f5f8;
  --dim:     #98a2b3;
  --accent:  #5aa9ff;   /* links and the source button */
  --warn:    #ffcc66;
  --radius:  14px;
  --pad:     16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;          /* 17px is the iOS body size; smaller invites zoom */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* Safe areas: the app runs full screen once installed, so the notch and the
 * home indicator are ours to avoid. */
body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--accent); text-decoration: none; }
a:active { opacity: .6; }

/* ---------------------------------------------------------------- header -- */

header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 10px var(--pad);
  display: flex; align-items: center; gap: 12px;
  min-height: 54px;
}
header .back {
  font-size: 26px; line-height: 1; color: var(--text);
  padding: 4px 10px 8px 0; margin: -4px 0 -8px 0;   /* big tap area, no shift */
  cursor: pointer; user-select: none;
}
header h1 {
  font-size: 18px; font-weight: 600; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header .wordmark {
  font-size: 20px; font-weight: 800; letter-spacing: .04em;
}

/* ------------------------------------------------------------------ main -- */

main { padding: var(--pad); padding-bottom: 60px; max-width: 760px; margin: 0 auto; }

/* Home ---------------------------------------------------------------- */

.hero { text-align: center; padding: 26px 0 20px; }
.hero img { width: 172px; max-width: 60%; display: block; margin: 0 auto; }

.tiles { display: grid; gap: 12px; }
.tile {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px var(--pad);
  font-size: 18px; font-weight: 600;
  cursor: pointer;
}
.tile:active { background: var(--card2); }
.tile .count { font-size: 14px; font-weight: 400; color: var(--dim); }

/* Search -------------------------------------------------------------- */

.searchwrap { position: relative; margin-bottom: 14px; }
input.search {
  width: 100%; padding: 14px 40px 14px 14px;
  font-size: 17px;                 /* 16px+ stops iOS zooming on focus */
  color: var(--text); background: var(--card2);
  border: 1px solid var(--line); border-radius: var(--radius);
  outline: none;
}
input.search:focus { border-color: var(--accent); }
.clearx {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--dim); font-size: 20px; padding: 8px 10px; cursor: pointer;
}

/* Lists --------------------------------------------------------------- */

.meta { color: var(--dim); font-size: 14px; margin: 0 2px 10px; }

.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px var(--pad);
  cursor: pointer;
}
.row:active { background: var(--card2); }
.row .t { font-weight: 600; }
.row .c { color: var(--dim); font-size: 14px; margin-top: 2px; }

.more {
  margin-top: 12px; text-align: center; color: var(--accent);
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.empty { color: var(--dim); text-align: center; padding: 40px 10px; }

/* Record -------------------------------------------------------------- */

.rec h2 { font-size: 22px; margin: 4px 0 2px; line-height: 1.25; }
.rec .cite { color: var(--dim); margin-bottom: 16px; }

.sec {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
}
.sec > .h {
  padding: 13px var(--pad);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none;
}
.sec > .h .chev { transition: transform .12s; font-size: 12px; }
.sec.closed > .h .chev { transform: rotate(-90deg); }
.sec > .b { padding: 0 var(--pad) 14px; }
.sec.closed > .b { display: none; }

/* The body text of a section. Source material, so it must not be restyled
 * into something it is not — no drop caps, no clever typography. */
.sec .b p  { margin: 0 0 10px; }
.sec .b ul,
.sec .b ol { margin: 0 0 10px; padding-left: 22px; }
.sec .b li { margin-bottom: 6px; }
.sec .b strong { color: #ffffff; }
.sec .b .cont { display: block; padding-left: 18px; color: var(--text); }

/* The source button. Every record has one, and the disclaimer tells officers
 * to use it, so it is a button and not a footnote. */
.srcbtn {
  display: block; text-align: center;
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--radius); padding: 14px; margin: 14px 0 6px;
  font-weight: 600;
}
.linkbtn {
  display: block; text-align: center;
  border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 13px; margin: 8px 0;
}

/* ---------------------------------------------------------------- footer -- */

footer {
  border-top: 1px solid var(--line);
  margin-top: 30px; padding: 16px var(--pad) 30px;
  color: var(--dim); font-size: 11.5px; line-height: 1.55;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
footer p { margin: 0 0 8px; }
footer a { color: var(--dim); text-decoration: underline; }
footer .disc { color: var(--warn); font-size: 12.5px; margin-bottom: 12px; }

/* --------------------------------------------------------- offline state -- */

/* An officer needs to know whether this thing will work when the signal dies.
 * The bar says so in plain words and does not go away until it is ready. */
#offline {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--card2); border-top: 1px solid var(--line);
  padding: 9px var(--pad);
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--dim); text-align: center;
}
#offline.ready { color: #7ddc9a; }
#offline.hidden { display: none; }

.hidden { display: none !important; }