/* site.css — shared styles: colour tokens (the greys and the four status pairs too), layout, the skip link, top bar and chips, the
   company menu, cards, tables, the one form-field rule, status tags (.tag and its status modifiers), notices, report filters, summary
   tiles, the busy state of htmx requests, the network alert, the trial bar, the module card, the code-request decide form, the Davis
   Tube panel and the hole view's figures (drill viewer and logger). Page styles live in wwwroot/css/<page>.css, linked from each
   page's Head section, and use these tokens. Loaded by Pages/Shared/_Layout.cshtml. */

:root {
    --bg: #f6f8fc;
    --card: #ffffff;
    --border: rgba(12, 24, 44, .16);
    --text: rgba(12, 24, 44, .92);
    --muted: rgba(12, 24, 44, .66);
    --accent: #176b5b;
    --warn-bg: #fdb022;
    --warn-text: #3d1d00;
    --error: #b42318;
    --text-inverse: #fff;
    /* the greys of the legacy palette, light to dark */
    --grey-25: #fcfcfd;
    --grey-50: #f9fafb;
    --grey-100: #f2f4f7;
    --grey-200: #eaecf0;
    --grey-300: #d0d5dd;
    --grey-500: #667085;
    --grey-600: #475467;
    --grey-700: #344054;
    --grey-900: #101828;
    /* the status pairs of .tag, a tint and its text (bad's text is --error); --warn-bg and --warn-text are the strip's stronger pair */
    --status-ok-bg: #d1fadf;
    --status-ok-text: #05603a;
    --status-warn-bg: #fef0c7;
    --status-warn-text: #93370d;
    --status-bad-bg: #fee4e2;
    --status-info-bg: #d1e9ff;
    --status-info-text: #175cd3;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
/* a readable line for prose; tables and button rows keep the full width */
main p:not(.actions) { max-width: 80ch; }
.skip-link { position: absolute; top: -48px; left: 16px; z-index: 40; padding: 8px 12px; border-radius: 8px; background: var(--card); }
.skip-link:focus { top: 8px; }
h1 { margin: 0 0 6px; font-size: 1.6rem; }
.muted { color: var(--muted); }
.error { color: var(--error); }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px;
          background: linear-gradient(180deg, #f9fbff, #eef3f9); border-bottom: 1px solid var(--border); }
.topbar-links, .topbar-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar-tools { margin-left: auto; }
.topbar form { margin: 0; }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
        background: var(--card); color: var(--text); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; gap: 6px; }
.chip[aria-current="page"] { background: rgba(12, 24, 44, .10); }
.chip.other { background: var(--status-warn-bg); border-color: var(--warn-bg); color: var(--status-warn-text); }
/* the timer pill in the top bar (RSC-212): a running, stale or paused timer's chip, and the menu's note line */
.timer, .timer-state { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.chip.running { background: var(--status-ok-bg); color: var(--status-ok-text); border-color: #a6f4c5; }
.chip.stale { background: var(--status-warn-bg); color: var(--status-warn-text); border-color: #fedf89; }
.chip.paused { background: #eef4ff; color: #3538cd; border-color: #c7d7fe; }
.timer-log { white-space: pre-wrap; }
.timer-note { display: flex; gap: 6px; padding: 6px; }
.timer-note input { flex: 1; min-width: 0; }

.strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 5px 12px;
         background: var(--warn-bg); color: var(--warn-text); font-size: .85rem; font-weight: 700; }
.strip form { margin: 0; }
.strip button { border: 1px solid var(--status-warn-text); background: transparent; color: var(--warn-text); border-radius: 999px;
                padding: 1px 10px; font-weight: 800; }

.cs { position: relative; }
.cs summary { list-style: none; cursor: pointer; }
.cs summary::-webkit-details-marker { display: none; }
.cs-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: min(330px, calc(100vw - 32px));
           background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); padding: 8px; }
.cs-menu form { margin: 0; }
.cs-item { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px; font-size: .88rem; }
.cs-item:hover:not(:disabled) { background: var(--grey-100); }
.cs-item:disabled { background: #e8f3ef; font-weight: 800; cursor: default; color: inherit; }
.cs-item small { display: block; color: var(--muted); font-weight: 400; }
a.cs-item { color: inherit; text-decoration: none; }
.cs-note { font-size: .78rem; color: var(--muted); padding: 6px 8px; }

.label { font-size: 1rem; margin: 18px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { display: flex; justify-content: space-between; padding: 16px; border-radius: 18px; border: 1px solid var(--border);
        background: var(--card); color: var(--text); font-weight: 800; text-decoration: none; }

/* every form field's border, 3:1 or more on white and on --bg (RSC-327 D). :where() keeps it weaker than a page rule, which adds what
   differs: padding, width, a 6px radius, a state's border. */
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=range], [type=submit], [type=button], [type=reset], [type=image]),
       select, textarea) { border: 1px solid var(--grey-500); border-radius: 8px; }
input[type=search] { padding: 9px 11px; font: inherit; }
.primary { background: var(--accent); color: var(--text-inverse); border: 1px solid var(--accent); border-radius: 9px; padding: 10px 15px;
           font-weight: 800; }

.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 16px 0 12px; }
.toolbar input[type=search] { flex: 1; min-width: 220px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--grey-200); }
th { font-size: .8rem; color: var(--muted); }
tr.inactive td { color: var(--muted); }

.chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.chip[aria-current="true"] .muted { color: rgba(255, 255, 255, .8); }
.tag {
    display: inline-block; border-radius: 999px; padding: 1px 8px; margin-right: 4px; font-size: .75rem; font-weight: 800;
    white-space: nowrap; background: var(--grey-100); color: var(--grey-700);
}
.tag.ok { background: var(--status-ok-bg); color: var(--status-ok-text); }
.tag.warn { background: var(--status-warn-bg); color: var(--status-warn-text); }
.tag.bad { background: var(--status-bad-bg); color: var(--error); }
.tag.info { background: var(--status-info-bg); color: var(--status-info-text); }
.tag.muted { color: var(--muted); }

.filters label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.filters select, .filters input[type=text], .filters input[type=date] { padding: 9px 11px; font: inherit; }
.filters button { border: 1px solid var(--border); background: var(--card); border-radius: 9px; padding: 9px 15px; font-weight: 700; }
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 14px 0 12px; }
.summary b { display: block; font-size: 1.4rem; }
.summary .button { margin-left: auto; }
.button {
    padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--card); color: var(--text);
    font-weight: 700; text-decoration: none;
}
.button.accent { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.button.danger { color: var(--error); border-color: #f4b8b2; }
button.small { padding: 2px 8px; border: 1px solid var(--border); background: var(--card); border-radius: 8px; font-size: .8rem; }
.warn { color: var(--status-warn-text); }
.bad { color: var(--error); }
/* relative: a visually hidden span in a cell is absolute, and without it the span sticks out past the wrap (RSC-327) */
.table-wrap { position: relative; overflow-x: auto; margin-bottom: 12px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.warn-row td { background: #fffaeb; }
tr.bad-row td { background: #fef3f2; }

.setnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.setnav-title { margin-right: 4px; font-size: .72rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
                   clip-path: inset(50%); white-space: nowrap; border: 0; }
.notice { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid #abefc6; background: #ecfdf3; color: var(--status-ok-text); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.panel h2 { margin: 0 0 8px; font-size: 1.1rem; }
.panel h3 { margin: 14px 0 6px; font-size: .95rem; }

.locked { color: var(--muted); filter: grayscale(1); }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; margin-bottom: 16px; }
.page-head p { margin: 0; }
.toolbar select { padding: 9px 11px; font: inherit; background: var(--card); }

.leaflet-container { font-family: inherit; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
/* a request in flight: the buttons of the form that sent it, or the button itself (RSC-327 C3) */
.htmx-request button, button.htmx-request { cursor: wait; opacity: .6; }
/* the network alert of islands.js: it draws nothing while it is empty */
.net-alert { position: fixed; left: 50%; bottom: 16px; z-index: 30; max-width: calc(100vw - 32px); margin: 0; transform: translateX(-50%); }
.net-alert:not(:empty) { padding: 10px 14px; border: 1px solid var(--error); border-radius: 10px; background: var(--card); color: var(--error);
                         font-weight: 700; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); }
.chart { width: 100%; height: auto; max-height: 300px; display: block; margin: 6px 0; }

.trial-bar { padding: 6px 16px; text-align: center; background: #ecfdf3; border-bottom: 1px solid #abefc6; color: #067647; font-size: .9rem; }
.trial-bar a { margin-left: 6px; color: var(--accent); font-weight: 800; }

.module-preview { max-width: 640px; margin: 24px auto; padding: 24px 26px; background: var(--card); border: 1px solid var(--border);
                  border-radius: 18px; }
.module-preview h1 { margin-bottom: 8px; }
.module-pitch { margin: 0 0 12px; font-size: 1rem; }
.module-points { margin: 4px 0 16px; padding-left: 20px; color: var(--grey-700); font-size: .93rem; }
.module-points li { margin: 5px 0; }
.module-trial { background: #fffaeb; border: 1px solid #fedf89; color: var(--status-warn-text); border-radius: 10px; padding: 9px 12px; }
.module-preview .error { margin: 12px 0; }
.module-start { margin-top: 14px; }
.module-start .muted { font-size: .85rem; margin: 8px 0 0; }

/* The decide form of a code request (RSC-189): "Add to list", and "Decline…" with its reason. The lookup editor's review panel and
   /code-requests both use it. */
.decide { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.decide details { flex-basis: 100%; }
.decide summary { cursor: pointer; }
.decide label { display: flex; gap: 6px; align-items: center; margin: 6px 0; }

/* The map labels of rsmap.js, on the AOI list and the AOI detail. */
.rs-map-label { background: none; border: 0; font: 800 12px Consolas, monospace; color: #e0f2fe; white-space: nowrap;
                text-shadow: 0 0 3px #0c4a6e, 0 0 3px #0c4a6e, 0 0 3px #0c4a6e; transform: translate(-50%, -50%); pointer-events: none; }
.rs-map-label.aoi { color: #fef3c7; text-shadow: 0 0 3px #78350f, 0 0 3px #78350f, 0 0 3px #78350f; font-size: 13px; }
.rs-map-label.tenement { color: #fee2e2; text-shadow: 0 0 3px #7f1d1d, 0 0 3px #7f1d1d, 0 0 3px #7f1d1d; font-size: 11px; }

/* The Davis Tube panel: the hole editor's tab and the drill viewer's Davis tab. */
.dtv { border: 1px solid #e4e7ec; border-radius: 12px; padding: 12px 14px; background: var(--card); color: var(--grey-900); }
.dtv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dtv-head h2 { margin: 0; font-size: 1.05rem; font-weight: 900; }
.dtv-hint { color: var(--grey-500); font-size: .82rem; }
.dtv-controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .84rem; color: var(--grey-700); margin-bottom: 10px; }
.dtv-controls select, .dtv-controls input { padding: 3px 6px; font-size: .84rem; }
.dtv-controls input { width: 64px; }
.dtv-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 10px; }
.dtv-card { border: 1px solid var(--grey-200); border-radius: 10px; padding: 8px 10px; background: var(--grey-25); }
.dtv-card.hi { background: #f3faf8; border-color: #b7e3d7; }
.dtv-card .t { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--grey-500); margin-bottom: 4px; }
.dtv-card .k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
.dtv-card .k div { font-size: .76rem; color: var(--grey-500); }
.dtv-card .k b { display: block; font-size: 1.02rem; color: var(--grey-900); }
.dtv-int { margin: 0 0 10px; padding: 0; list-style: none; font-size: .86rem; }
.dtv-int li { padding: 4px 0; border-bottom: 1px dashed var(--grey-200); }
.dtv-int li b { color: var(--accent); }
.dtv-wrap { overflow: auto; border: 1px solid #e4e7ec; border-radius: 10px; max-height: 50vh; }
.dtv-table { border-collapse: collapse; font-size: .82rem; min-width: 100%; }
.dtv-table th { position: sticky; top: 0; background: #f8f9fb; color: var(--grey-600); text-align: left; padding: 7px 8px; font-size: .7rem;
                border-bottom: 1px solid #e4e7ec; white-space: nowrap; }
.dtv-table td { padding: 5px 8px; border-bottom: 1px solid #edf0f3; white-space: nowrap; color: var(--grey-700); }
.dtv-table tr.hi td { background: #f3faf8; }
.dtv details summary { cursor: pointer; font-weight: 800; font-size: .84rem; color: var(--accent); margin: 8px 0 6px; }
.dtv-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--grey-600); margin: 6px 0; }
.dtv-key .k-head { color: #98a2b3; }
.dtv-key .k-mass { color: #2e6fd8; }
.dtv-key .k-conc { color: #176b5b; }
.dtv-key .k-silica { color: #d4652b; }
.dtv-key .k-alumina { color: #9b59b6; }
.dtv-key .k-above { color: #7fc8b5; }
.dtv-plots { margin: 6px 0 12px; }
.dtv-chart { display: block; width: 100%; max-width: 680px; height: auto; }

/* the hole view (drill viewer RSC-210, drill logger RSC-218): hole-view.js draws these classes on both pages */
.hole-view-title {
    margin: 0 0 4px 2px;
    font-family: Consolas, monospace;
    font-weight: 900;
    font-size: 0.9rem;
}

.dv-view .hole-view-svg,
.lh-figure .hole-view-svg {
    display: block;
    max-width: 100%;
    height: auto;
    background: #fbfcfd;
    border: 1px solid #eef0f3;
    border-radius: 8px;
}

.hole-view-hint,
.hole-view-note {
    margin: 4px 2px;
    font-size: 0.76rem;
    color: var(--grey-500);
}

.hole-view-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin: 6px 0;
    font-size: 0.76rem;
}

.hole-view-legend label {
    display: flex;
    gap: 4px;
    align-items: center;
    cursor: pointer;
}

.hole-view-swatch {
    width: 10px;
    height: 10px;
}

.hole-view-tools {
    display: flex;
    gap: 6px;
    margin: 0 0 6px;
}

.hole-view-btn {
    padding: 2px 9px;
    border: 1px solid var(--grey-300);
    border-radius: 7px;
    background: var(--card);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--grey-700);
    cursor: pointer;
}

/* the drill viewer and the field logger draw these buttons, so their touch size is here (RSC-327 B1) */
@media (pointer: coarse) {
    .hole-view-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

.hole-view-3d {
    position: relative;
    width: 100%;
    max-width: 720px;
    height: 480px;
}

.hole-view-tip {
    position: absolute;
    z-index: 5;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--grey-900);
    color: var(--text-inverse);
    font: 600 12px system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
}