/* AL-HARAMEEN — tools.css
   Shared by the new tool pages (setup studio, clock doctor, exact time, mosque board,
   qibla & sun). Builds on the tokens of main.css; every page that loads this file also
   loads main.css first. Each tool keeps its own look in its own stylesheet. */

/* ---------- city chooser (hrm-citypick.js) ---------- */
.hcp { position: relative; }
.hcp-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.hcp-input {
  flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px;
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
.hcp-input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(15, 122, 68, .15); }
.hcp-geo {
  font: inherit; font-size: 14px; font-weight: 700; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); color: var(--green-700); white-space: nowrap;
}
.hcp-geo:hover { border-color: var(--green-600); }
.hcp-list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; max-height: 330px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.hcp-list:empty { display: none; }
.hcp-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px;
  width: 100%; text-align: start; font: inherit; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer; color: var(--ink);
}
.hcp-item:last-child { border-bottom: 0; }
.hcp-item:hover, .hcp-item:focus { background: var(--green-100); outline: none; }
.hcp-city { font-weight: 700; }
.hcp-country { grid-row: 2; font-size: 13px; color: var(--ink-soft); }
.hcp-code { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--green-700); unicode-bidi: isolate; }
.hcp-msg { font-size: 13px; color: var(--ink-faint); min-height: 1.4em; margin-top: 6px; }

/* ---------- common tool layout ---------- */
.tool-wrap { padding-top: 34px; padding-bottom: 60px; }
.tool-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px; margin-top: 20px;
}
.tool-card h2 { font-size: clamp(19px, 2.4vw, 24px); color: var(--green-900); margin-bottom: 8px; }
.tool-dark {
  background: radial-gradient(120% 140% at 85% -10%, #1C3B2A 0%, var(--panel) 55%, #08140E 100%);
  color: var(--panel-ink); border-color: var(--panel-line);
}
.tool-dark h2 { color: #fff; }
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tool-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-pill {
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.tool-pill[aria-pressed="true"], .tool-pill.on { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.tool-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.tool-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.tool-note { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.tool-dark .tool-note { color: var(--panel-soft); }
.tool-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tool-tabs button {
  font: inherit; font-weight: 700; padding: 10px 14px; border: 0; background: none; cursor: pointer; color: var(--ink-soft);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tool-tabs button[aria-selected="true"] { color: var(--green-700); border-bottom-color: var(--gold-500); }

/* links between the tools (bottom of every tool page) */
.tool-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 26px; }
.tool-links a {
  display: block; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
}
.tool-links a:hover { border-color: var(--green-600); }
.tool-links b { display: block; color: var(--green-800, var(--green-900)); font-family: var(--font-head); }
.tool-links span { font-size: 13px; color: var(--ink-soft); }

@media (max-width: 560px) {
  .tool-card { padding: 16px; }
  .hcp-geo { flex: 1 1 100%; }
}
@media print {
  .site-header, .site-footer, .proof-strip, .hcp, .tool-links, .no-print, #assistantBtn, .as-fab { display: none !important; }
  body { background: #fff; }
  .tool-card { box-shadow: none; border-color: #bbb; }
}