/* ==========================================================================
   cropcut.css — every screen in conversion/templates/rice_yield/: the yield
   calculator and its report form (calculator.html), the staff report directory
   (report_list.html), the analytics dashboard (dashboard.html), the single
   report sheet (report_detail.html) and the filed-successfully panel
   (success.html).

   One stylesheet for the five because they are one tool. Between them they
   carried four inline <style> blocks — 72 lines, 55, 70 and a fistful of
   `style=` attributes — four copies of the same `.card-custom`, three different
   greens for the same brand, and `font-weight: 600` in all four.

   The screen it replaces carried its own ~72-line <style> block in the template
   head, which is where every problem in this file's list came from:

     * two hard-coded brand colours, `#198754` on the primary button and
       `#1e73be` on the secondary, neither of them the site's. The palette is
       chosen in the admin (main.models.ColorPreset writes it into an inline
       <style> on accounts/base.html) and both of those buttons ignored it;
     * `font-family: 'Montserrat'` and `'Open Sans'` restated as bare quoted
       names with no fallbacks, so a Bengali place name in a select fell to the
       browser default rather than to Noto Sans Bengali;
     * `font-weight: 600` on `.yield-card span` — a weight this site does not
       load. Only Montserrat/Open Sans 400, 700 and 800 are fetched, so 600 was
       synthesised or silently rounded, page by page and browser by browser;
     * `z-index: 1050` on a hand-rolled modal, which is Bootstrap's own modal
       layer — a real Bootstrap modal opening behind it would have tied.

   Same contract as youtube.css beside it, which is shorturl.css's and
   simplenote.css's:

     * every selector is prefixed .cc-scope, matching the wrapper <div> the
       template opens with. accounts/base.html renders {% block extra_css %}
       BEFORE the theme, MDB, the Bootstrap 4.3.1 CDN build and custom.css, so
       this file can only ever win on specificity, never on order;
     * no :root block — ColorPreset injects the palette after every stylesheet,
       and a :root here would override the admin's chosen colours;
     * --color-primary and its siblings are never redeclared: defining one in
       terms of itself is a var() cycle that blanks it for the whole subtree.
       They are read inline with a literal fallback instead;
     * only 400, 700 and 800 appear below;
     * layout is CSS grid, never Bootstrap's row/col. Two Bootstrap majors are
       live in this shell — MDB5 3.3.0 and the 4.3.1 CDN build loading after
       it — so `g-*` gutters are cancelled by 4.3.1's own `.row`.

   Tokens are youtube.css's verbatim. A visitor crossing from the media tools to
   the crop-cut calculator is inside one account dashboard and should not cross a
   seam.
   ========================================================================== */
.cc-scope {
  --cc-surface: #ffffff;
  --cc-surface-muted: #fbfbfc;
  --cc-surface-sunken: #f4f5f8;
  --cc-border: #eceef4;
  --cc-border-strong: #e4e6ee;

  --cc-text: var(--color-default, #2f313a);
  --cc-text-soft: #6c707a;
  --cc-text-muted: #9097a1;

  --cc-brand: var(--color-primary, #c33332);
  --cc-brand-hover: var(--color-primary-hover, #a82b2a);
  --cc-brand-bg: var(--color-primary-light, #fbf2f2);
  --cc-good: #1e8e3e;
  --cc-good-bg: #eaf5ee;
  --cc-good-border: #bfe0c9;
  --cc-warn: #9a6a00;
  --cc-warn-bg: #fdf6e6;
  --cc-warn-border: #ecd9a6;
  --cc-danger: #c33332;
  --cc-danger-bg: #fdf1f1;
  --cc-danger-border: #f0cccc;

  --cc-font-display: "Montserrat", "Noto Sans Bengali", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cc-font-body: "Open Sans", "Noto Sans Bengali", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cc-radius-sm: 4px;
  --cc-radius-md: 5px;

  padding: 4px 0 32px;
  font-family: var(--cc-font-body);
  color: var(--cc-text);
}

/* mdb.min.css uppercases and drop-shadows every .btn on the page and Bootstrap
   4.3.1, loading after it, resets neither. These screens use .cc-btn rather than
   .btn for that reason; the reset stays as insurance for anything the shell
   renders inside the wrapper. */
.cc-scope .btn {
  text-transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Page head. 21px Montserrat in the body ink — .yt-title's metric, which is
   .dash-head__name's on the account dashboard.

   Everything here is a <p> or an <h1> that restates its own colour with
   !important: cs-foodbakery-plugin.css declares font, letter-spacing,
   text-transform and colour on h1-h6 with !important, and accounts/base.html
   then writes `.main-section p { ... color: #515151 !important }` into an inline
   <style> AFTER extra_css. Specificity carries the rest — `.cc-scope .cc-lede`
   is 0,2,0 against that rule's 0,1,1.
   -------------------------------------------------------------------------- */
.cc-scope .cc-head {
  margin-bottom: 18px;
}

.cc-scope .cc-eyebrow {
  margin: 0 0 5px;
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cc-text-muted) !important;
}

.cc-scope .cc-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cc-text) !important;
}

.cc-scope .cc-title i { font-size: 20px; color: var(--cc-brand); }

/* The cap here was 68ch — the reading measure that suits a lede inside a card,
   where the paragraph is one column of a page. In a page head it is wrong: the
   row is the full content width (.dashboard-fluid is width:100%, so col-lg-9 is
   around 1000px on a 1440px screen), and 68ch of 13px Open Sans is about 490px.
   All three ledes in this file sit in a .cc-head — calculator.html:83,
   dashboard.html:52 and report_list.html:58 — so all three stacked three lines
   deep in a strip no wider than the <h1> above them, with the rest of the row
   left empty. They run the width of the row now.

   128ch is a stop, not a measure: it binds on nothing narrower than a very wide
   monitor, where an uncapped line would otherwise reach 300 characters. The same
   correction is in fbms.css (.fb-head .fb-lede) and voicetyping.css (.vt-lede).

   The two narrower caps further down this file are deliberate and stay: .cc-sheet
   is a document at 860px and .cc-done__text is a centred paragraph in a 560px
   card, both of which are measures rather than page-head rows. */
.cc-scope .cc-lede {
  max-width: 128ch;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--cc-text-soft) !important;
}

/* --------------------------------------------------------------------------
   Cards. The old screen had no card at all: the three inputs, the results and
   the map sat directly on the dashboard background separated by <hr>s and inline
   margins.
   -------------------------------------------------------------------------- */
.cc-scope .cc-card {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
  overflow: hidden;
}

.cc-scope .cc-card + .cc-card { margin-top: 16px; }

.cc-scope .cc-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cc-border);
  background: var(--cc-surface-muted);
}

.cc-scope .cc-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--cc-text) !important;
}

.cc-scope .cc-card__title i { font-size: 14px; color: var(--cc-brand); }
.cc-scope .cc-card__body { padding: 16px; }

.cc-scope .cc-card__note {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cc-text-soft) !important;
}

/* The step disc — 22px in the brand, so the numbers read as order and not as
   decoration. .yt-step's block. */
.cc-scope .cc-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--cc-brand);
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.cc-scope .cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--cc-border-strong);
  border-radius: 999px;
  background: var(--cc-surface);
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  color: var(--cc-text-soft);
}

.cc-scope .cc-chip i { font-size: 11px; }

/* --------------------------------------------------------------------------
   Buttons. 34px tall, 12px Montserrat 700, no uppercase and no shadow — the
   .yt-btn / .su-btn metrics. What they replace: `.btn-theme-primary` at
   `#198754` and `.btn-theme-secondary` at `#1e73be`, two colours from no
   palette this site has, both with `padding: 10px 24px; border-radius: 6px`.
   -------------------------------------------------------------------------- */
.cc-scope .cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--cc-brand);
  border-radius: var(--cc-radius-md);
  background: var(--cc-brand);
  font-family: var(--cc-font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.cc-scope .cc-btn:hover,
.cc-scope .cc-btn:focus {
  background: var(--cc-brand-hover);
  border-color: var(--cc-brand-hover);
  color: #ffffff;
  text-decoration: none;
}

.cc-scope .cc-btn i { font-size: 13px; }

.cc-scope .cc-btn.is-ghost {
  background: var(--cc-surface);
  border-color: var(--cc-border-strong);
  color: var(--cc-text-soft);
}

.cc-scope .cc-btn.is-ghost:hover,
.cc-scope .cc-btn.is-ghost:focus {
  background: var(--cc-surface-sunken);
  border-color: var(--cc-text-muted);
  color: var(--cc-text);
}

.cc-scope .cc-btn.is-lg { height: 40px; padding: 0 20px; font-size: 13px; }

/* The two seconds after a copy succeeds. The label swaps to "Copied" in the
   script, so the colour is confirming what the words already say rather than
   carrying the message alone. */
.cc-scope .cc-btn.is-done {
  border-color: var(--cc-good-border);
  background: var(--cc-good-bg);
  color: var(--cc-good);
}

.cc-scope .cc-btn[disabled],
.cc-scope .cc-btn.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* `display: inline-flex` above beats the browser's `[hidden] { display: none }`,
   so `button.hidden = true` would otherwise do nothing. */
.cc-scope .cc-btn[hidden] { display: none; }

.cc-scope .cc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cc-scope .cc-actions__note {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cc-text-soft) !important;
}

/* --------------------------------------------------------------------------
   Fields. 38px controls, 12px Montserrat labels, 13px body text inside — the
   .yt-label / .yt-input metrics. The old screen's `.theme-form-group label` was
   `font-weight: 600` on a 600 the site does not load, and its inputs carried no
   class at all, so their height, border and focus ring were whatever the theme's
   bare `input` rule said.

   `.cc-grid` is the two- and three-across field layout. It is grid and not
   Bootstrap's row/col because the shell has two Bootstrap majors live and the
   later one cancels the earlier one's gutters.
   -------------------------------------------------------------------------- */
.cc-scope .cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.cc-scope .cc-grid.is-two {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cc-scope .cc-field { min-width: 0; }

/* One field standing on its own rather than in a grid row. */
.cc-scope .cc-field.is-spaced { margin-top: 14px; }

/* The typed answer for a place level with no rows behind it. Sits under its
   select — see the note in §3 of cropcut.js — and is revealed by the script,
   never by the markup. */
.cc-scope .cc-fallback { margin-top: 7px; }

.cc-scope .cc-label {
  display: block;
  margin: 0 0 5px;
  font-family: var(--cc-font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: var(--cc-text);
}

.cc-scope .cc-label .cc-req { color: var(--cc-danger); }

.cc-scope .cc-input,
.cc-scope .cc-select {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
  font-family: var(--cc-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--cc-text);
}

/* A <select> ignores `height` in some engines unless the box model is stated,
   and Bootstrap 4.3.1's `.custom-select` background-image is not inherited
   here — so the arrow is drawn explicitly rather than left to the UA. */
.cc-scope .cc-select {
  box-sizing: border-box;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236c707a' d='M8 11.3 3.4 6.7l1-1L8 9.3l3.6-3.6 1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px 13px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cc-scope .cc-input::placeholder { color: var(--cc-text-muted); }

.cc-scope .cc-input:focus,
.cc-scope .cc-select:focus {
  outline: none;
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-bg);
}

.cc-scope .cc-select[disabled] {
  background-color: var(--cc-surface-sunken);
  color: var(--cc-text-muted);
  cursor: not-allowed;
}

.cc-scope textarea.cc-input {
  height: auto;
  min-height: 76px;
  padding: 9px 11px;
  resize: vertical;
}

.cc-scope .cc-help {
  display: block;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cc-text-soft) !important;
}

/* The file input. `type="file"` cannot be given a height, so it is styled as a
   dashed drop panel instead of pretending to be a 38px control. */
.cc-scope .cc-file {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 1px dashed var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-muted);
  font-family: var(--cc-font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--cc-text-soft);
}

.cc-scope .cc-file:focus {
  outline: none;
  border-color: var(--cc-brand);
  border-style: solid;
}

/* --------------------------------------------------------------------------
   The answer. Five numbers, and the two that matter — milled rice per hectare
   and per bigha — get the filled card.

   `.yield-card.hero` used to be a `linear-gradient(135deg, #198754, #20c997)`,
   two colours from no palette here, with white text on top. The fill is the
   brand now, so it follows whatever ColorPreset is set to.
   -------------------------------------------------------------------------- */
.cc-scope .cc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}

.cc-scope .cc-result {
  padding: 13px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-muted);
}

.cc-scope .cc-result__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cc-text-muted) !important;
}

.cc-scope .cc-result__value {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  color: var(--cc-text) !important;
}

.cc-scope .cc-result__unit {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-result.is-hero {
  border-color: var(--cc-brand);
  background: var(--cc-brand);
}

.cc-scope .cc-result.is-hero .cc-result__label,
.cc-scope .cc-result.is-hero .cc-result__value,
.cc-scope .cc-result.is-hero .cc-result__unit {
  color: #ffffff !important;
}

.cc-scope .cc-result.is-hero .cc-result__label { opacity: 0.85; }
.cc-scope .cc-result.is-hero .cc-result__unit { opacity: 0.9; }

/* The empty state. The old screen simply rendered nothing between the form and
   the map before a calculation, so the page looked broken on first visit. */
.cc-scope .cc-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-muted);
  font-size: 12px;
  line-height: 18px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-empty i { font-size: 16px; color: var(--cc-text-muted); flex: none; }

/* --------------------------------------------------------------------------
   Alerts and the polite announcer.
   -------------------------------------------------------------------------- */
.cc-scope .cc-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--cc-danger-border);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-danger-bg);
  font-size: 12px;
  line-height: 19px;
  color: var(--cc-danger) !important;
}

.cc-scope .cc-alert i { flex: none; font-size: 14px; line-height: 19px; }
.cc-scope .cc-alert p { margin: 0; color: inherit !important; }

.cc-scope .cc-alert.is-warn {
  border-color: var(--cc-warn-border);
  background: var(--cc-warn-bg);
  color: var(--cc-warn) !important;
}

.cc-scope .cc-alert.is-good {
  border-color: var(--cc-good-border);
  background: var(--cc-good-bg);
  color: var(--cc-good) !important;
}

/* Off-screen but not `display: none`, which screen readers skip. .yt-live's
   block. */
.cc-scope .cc-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Where the sample was taken. The coordinates come from
   navigator.geolocation, which only answers over HTTPS and only after the
   person allows it — so all three of "not asked yet", "refused" and "answered"
   are states this panel has to be able to show. The old screen had one <span>
   that said "Fetching location..." for ever if the answer never came.

   The map itself is an iframe on maps.google.com with the field's coordinates
   in the query string, which is how it arrived and how it stays; the frame is
   only revealed once there are coordinates to show, so a visitor who never
   presses the location button never makes that request.
   -------------------------------------------------------------------------- */
.cc-scope .cc-coords {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-muted);
  font-size: 12px;
  line-height: 18px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-coords i { font-size: 14px; color: var(--cc-brand); flex: none; }

.cc-scope .cc-coords code {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--cc-surface-sunken);
  font-family: var(--cc-font-mono);
  font-size: 11px;
  color: var(--cc-text);
}

.cc-scope .cc-coords .cc-btn { margin-left: auto; }

.cc-scope .cc-map {
  position: relative;
  margin-top: 12px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-sunken);
  overflow: hidden;
}

.cc-scope .cc-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

/* --------------------------------------------------------------------------
   The report form. Not an overlay: it is a card in the page that cropcut.js
   collapses on boot and the button below the results expands — the same choice
   youtube.html's step 2 is written down for. What it replaces was a hand-rolled
   `.theme-custom-modal` at `z-index: 1050` (Bootstrap's own modal layer, so a
   real dialog opening at the same time would have tied) opened by an
   `onclick="openReportModal()"` and closed by a `window.onclick` that read
   `event.target`. With JavaScript off there was no way to reach the form at all.
   -------------------------------------------------------------------------- */
.cc-scope .cc-report[hidden] { display: none; }

.cc-scope .cc-fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.cc-scope .cc-fieldset:last-of-type { margin-bottom: 0; }

.cc-scope .cc-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0 0 11px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--cc-border);
  font-family: var(--cc-font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-scope .cc-legend i { font-size: 13px; color: var(--cc-brand); }

/* --------------------------------------------------------------------------
   Narrow screens. The field grids already reflow on their own
   (`auto-fit`/`minmax`), so this only has to deal with the head, the coordinate
   row and the map height.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .cc-scope { padding-bottom: 24px; }
  .cc-scope .cc-title { font-size: 18px; line-height: 25px; }
  .cc-scope .cc-card__body { padding: 13px; }
  .cc-scope .cc-result__value { font-size: 19px; line-height: 25px; }
  .cc-scope .cc-coords .cc-btn { margin-left: 0; width: 100%; }
  .cc-scope .cc-map iframe { height: 210px; }
  .cc-scope .cc-actions .cc-btn { width: 100%; }
}
/* ==========================================================================
   THE STAFF DIRECTORY — report_list.html

   Replacing a 54-line inline <style> that set `body { background: #f8f9fa }`
   from inside a dashboard page (the shell owns the body), painted table headers
   `#1b5e20` on `#f1f8f3` — a green from no palette this site has — and put
   `font-weight: 600` on three of its five rules.
   ========================================================================== */

/* The filter bar. A form, not a `.row g-2`: two Bootstrap majors are live in
   this shell and the later one cancels the earlier one's gutters, so the fields
   sat flush against each other. `is-grow` is the search box, which should take
   whatever is left after the two selects and the buttons. */
.cc-scope .cc-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-muted);
}

.cc-scope .cc-toolbar__group { flex: 0 1 176px; min-width: 0; }
.cc-scope .cc-toolbar__group.is-grow { flex: 1 1 240px; }

.cc-scope .cc-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* The tally and the two export links, between the filter bar and the table. */
.cc-scope .cc-tally {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
}

.cc-scope .cc-tally__count {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-tally__count strong { color: var(--cc-text); font-weight: 800; }
.cc-scope .cc-tally__actions { display: flex; gap: 8px; margin-left: auto; }
/* --------------------------------------------------------------------------
   The table. `.cc-table__scroll` is the horizontal scroller, and it is a
   separate element from the table so the card's border-radius clips it: a
   `overflow: auto` on the card itself would have cut the focus ring off every
   control inside it.
   -------------------------------------------------------------------------- */
.cc-scope .cc-table__scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cc-scope .cc-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 19px;
  color: var(--cc-text);
}

.cc-scope .cc-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cc-border-strong);
  background: var(--cc-surface-muted);
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--cc-text-muted) !important;
}

.cc-scope .cc-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cc-border);
  vertical-align: middle;
}

.cc-scope .cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-scope .cc-table tbody tr:hover { background: var(--cc-surface-muted); }

.cc-scope .cc-table .is-mid { text-align: center; }
.cc-scope .cc-table .is-end { text-align: right; }
.cc-scope .cc-table .is-tight { white-space: nowrap; }
/* The report id. Monospace and not truncated: the directory used
   `|truncatechars:10` on a 17-character id, so `MW-20260905143012` was shown as
   `MW-2026...` — an id nobody could read off the screen and type into a search
   box, which is the one thing an id is for. */
.cc-scope .cc-id {
  font-family: var(--cc-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-text);
  text-decoration: none;
  white-space: nowrap;
}

.cc-scope .cc-id:hover { color: var(--cc-brand); text-decoration: underline; }

/* A name with its phone number under it. */
.cc-scope .cc-who { min-width: 0; }

.cc-scope .cc-who__name {
  display: block;
  font-family: var(--cc-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
  color: var(--cc-text);
}

.cc-scope .cc-who__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-who__meta i { font-size: 11px; color: var(--cc-text-muted); }

/* The season pill. `.cc-chip` has `margin-left: auto` for the card head, which
   would push this to the far side of its cell. */
.cc-scope .cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--cc-border-strong);
  border-radius: 999px;
  background: var(--cc-surface-muted);
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
  color: var(--cc-text-soft);
}
/* A figure in a cell: tabular so the decimal points line up down the column. */
.cc-scope .cc-figure {
  font-family: var(--cc-font-display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cc-text);
}

.cc-scope .cc-figure small {
  display: block;
  font-family: var(--cc-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 15px;
  color: var(--cc-text-muted);
}

/* Row actions. 30px squares, icon only, with the label carried by the title and
   an aria-label rather than by width. `.cc-icon.is-danger` is delete, which is a
   real submit button inside its own form — see the note on `.cc-inline`. */
.cc-scope .cc-rowactions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cc-scope .cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  color: var(--cc-text-soft);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.cc-scope .cc-icon:hover,
.cc-scope .cc-icon:focus {
  background: var(--cc-surface-sunken);
  border-color: var(--cc-text-muted);
  color: var(--cc-text);
  text-decoration: none;
}
.cc-scope .cc-icon.is-danger:hover,
.cc-scope .cc-icon.is-danger:focus {
  border-color: var(--cc-danger-border);
  background: var(--cc-danger-bg);
  color: var(--cc-danger);
}

/* Deleting is a POST now, so the button sits in a one-field form. Without this
   the form is a block element and the button drops onto its own line. */
.cc-scope .cc-inline { display: inline; margin: 0; }

/* The empty state, inside a cell that spans the table. */
.cc-scope .cc-blank {
  padding: 34px 16px !important;
  text-align: center;
}

.cc-scope .cc-blank i {
  display: block;
  margin: 0 auto 8px;
  font-size: 26px;
  color: var(--cc-text-muted);
}

.cc-scope .cc-blank p {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-blank .cc-btn { margin-top: 13px; }

/* --------------------------------------------------------------------------
   The pager. Prev / page N of M / Next, and it keeps the filters: the screen it
   replaces wrote `?page=2&search=&district=&season=` unconditionally, so paging
   past a filtered result cleared the filter and the row you were looking for was
   on neither page.
   -------------------------------------------------------------------------- */
.cc-scope .cc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cc-scope .cc-pager__state {
  font-family: var(--cc-font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--cc-text-soft) !important;
}
/* ==========================================================================
   THE ANALYTICS DASHBOARD — dashboard.html

   Replacing a 70-line inline <style>, a Chart.js tag from jsDelivr and a 99-line
   inline <script>. Two of those three were a defect and not a preference: the
   script built its data arrays by interpolating stored season text straight into
   JavaScript literals — `"{{ s.season }}",` — and `season` arrives from a public
   form, so a value holding a quote closed the string and everything after it ran.
   The bars are drawn by the browser from <meter> attributes now, which is also
   why this page no longer needs a CDN to show anything at all.
   ========================================================================== */
.cc-scope .cc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.cc-scope .cc-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
}

/* One tinted disc, not four gradients in four colours from no palette. */
.cc-scope .cc-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--cc-brand-bg);
  font-size: 17px;
  color: var(--cc-brand);
}

.cc-scope .cc-stat__body { min-width: 0; }

.cc-scope .cc-stat__label {
  margin: 0 0 2px;
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cc-text-muted) !important;
}
.cc-scope .cc-stat__value {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 27px;
  font-variant-numeric: tabular-nums;
  color: var(--cc-text) !important;
}

.cc-scope .cc-stat__value small {
  font-size: 12px;
  font-weight: 700;
  color: var(--cc-text-soft);
}

/* Two cards side by side on a wide screen, stacked below 900px. Grid rather
   than col-lg-7/col-lg-5 for the gutter reason in §Fields. */
.cc-scope .cc-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.cc-scope .cc-columns .cc-card + .cc-card { margin-top: 0; }

/* The bar. A <meter>, drawn by the browser from min/max/value attributes, so
   there is no inline style, no custom property and no script — the same choice
   fbms's fiscal-year report is written down for. Chrome and Safari need the
   native appearance cleared and paint through ::-webkit-meter-bar; Firefox uses
   the element's own background as the track and ::-moz-meter-bar as the fill. A
   browser that honours neither still draws its native bar. */
.cc-scope .cc-meter {
  display: block;
  width: 100%;
  height: 7px;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--cc-surface-sunken);
}

.cc-scope .cc-meter::-webkit-meter-bar {
  border: 0;
  border-radius: 999px;
  background: var(--cc-surface-sunken);
}
/* All three value pseudo-elements: no optimum band is declared, because a
   season holding more of the reports is not "better", it is only bigger, and
   the count beside it says so in figures. */
.cc-scope .cc-meter::-webkit-meter-optimum-value,
.cc-scope .cc-meter::-webkit-meter-suboptimum-value,
.cc-scope .cc-meter::-webkit-meter-even-less-good-value {
  border-radius: 999px;
  background: var(--cc-brand);
}

.cc-scope .cc-meter::-moz-meter-bar {
  border-radius: 999px;
  background: var(--cc-brand);
}

/* The yield bar reads against the best average in the table, not against the
   report count, so it is tinted differently — two bars in one colour on one row
   would read as one measurement drawn twice. */
.cc-scope .cc-meter.is-yield::-webkit-meter-optimum-value,
.cc-scope .cc-meter.is-yield::-webkit-meter-suboptimum-value,
.cc-scope .cc-meter.is-yield::-webkit-meter-even-less-good-value {
  background: var(--cc-good);
}

.cc-scope .cc-meter.is-yield::-moz-meter-bar { background: var(--cc-good); }

.cc-scope .cc-table .is-meter { width: 118px; }

/* The recent-reports list on the dashboard: a link, a place, a figure. */
.cc-scope .cc-feed { margin: 0; padding: 0; list-style: none; }

.cc-scope .cc-feed li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cc-border);
}

.cc-scope .cc-feed li:last-child { padding-bottom: 0; border-bottom: 0; }
.cc-scope .cc-feed li:first-child { padding-top: 0; }
.cc-scope .cc-feed__body { min-width: 0; flex: 1 1 auto; }

.cc-scope .cc-feed__place {
  display: block;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cc-text-soft) !important;
}

/* The figure closing a feed row. `.cc-table .is-end` cannot reach here — this
   list is not a table — so the alignment that lines the numbers up down the
   column is declared for the list itself. */
.cc-scope .cc-feed .cc-figure { flex: 0 0 auto; text-align: right; }

/* And the empty state fills its row instead of sitting in it as a narrow flex
   item, with its centred text centred inside nothing. */
.cc-scope .cc-feed .cc-blank { flex: 1 1 auto; }

/* ==========================================================================
   THE SINGLE REPORT — report_detail.html

   The one screen in this app that stays public, because the QR code printed on
   every PDF already issued points at it and a farmer holding that paper has no
   account. So it is written as a document rather than as an admin screen: a
   letterhead, the facts in labelled pairs, the full place chain, the photo and
   the coordinates, and nothing that only makes sense to staff.

   Replacing a 69-line inline <style> with two gradient KPI cards
   (`#43a047 → #2e7d32`, `#00897b → #00695c`), `.info-value { font-weight: 500 }`
   — a weight this site does not load — and a `.container.max-w-4xl`, a Tailwind
   class name on a site with no Tailwind, so the sheet was never actually
   narrowed.
   ========================================================================== */

/* This screen alone hangs off accounts/base.html rather than the dashboard
   shell — an anonymous phone that scanned a QR code has no dashboard — and that
   shell drops {% block content %} straight under the navbar with no container of
   its own, so the page gutter has to come from here. Same arrangement, and the
   same reason, as .fb-scope-public on the card-verification page. */
.cc-scope.is-public { padding: 30px 16px 56px; }

.cc-scope .cc-sheet {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
  overflow: hidden;
}

.cc-scope .cc-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-bottom: 2px solid var(--cc-brand);
  background: var(--cc-surface-muted);
}

.cc-scope .cc-sheet__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--cc-radius-sm);
  background: var(--cc-brand);
  font-size: 19px;
  color: #ffffff;
}

.cc-scope .cc-sheet__titles { min-width: 0; flex: 1 1 220px; }

.cc-scope .cc-sheet__title {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 23px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cc-text) !important;
}
.cc-scope .cc-sheet__sub {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--cc-text-soft) !important;
}

.cc-scope .cc-sheet__id {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface);
  font-family: var(--cc-font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: var(--cc-text);
}

.cc-scope .cc-sheet__body { padding: 18px; }

.cc-scope .cc-sheet__section + .cc-sheet__section { margin-top: 20px; }

.cc-scope .cc-sheet__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--cc-border);
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cc-text-muted) !important;
}

.cc-scope .cc-sheet__label i { font-size: 12px; color: var(--cc-brand); }

/* Labelled facts. Two across on a wide screen, one on a phone, and the label
   above the value rather than beside it — a Bengali place name in a 90px label
   column wrapped to four lines. */
.cc-scope .cc-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px 16px;
}

.cc-scope .cc-pair { min-width: 0; }
.cc-scope .cc-pair__label {
  margin: 0 0 3px;
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cc-text-muted) !important;
}

.cc-scope .cc-pair__value {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  word-break: break-word;
  color: var(--cc-text) !important;
}

.cc-scope .cc-pair__value a { color: var(--cc-brand); }

/* The place chain, deepest last. The screen it replaces printed four levels in
   two cells — "Division → District" and "Upazila → Union" — and never printed
   the block at all, which is the level an officer actually works in and the one
   migration 0002 added a column for. Region is here too; division is not, because
   it is derived from the region rather than chosen. */
.cc-scope .cc-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-scope .cc-chain li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 19px;
  color: var(--cc-text);
}

.cc-scope .cc-chain li + li::before {
  content: "\203a";
  font-size: 14px;
  color: var(--cc-text-muted);
}

.cc-scope .cc-chain li:last-child { font-weight: 700; }
/* The coordinate row is `.cc-coords` from the calculator, reused. Two buttons
   sit in it here — copy and open — and two `margin-left: auto` siblings would
   split the free space between them, so they are grouped. */
.cc-scope .cc-coords__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cc-scope .cc-coords__actions .cc-btn { margin-left: 0; }

/* The field photo. `max-height` and not a fixed box: the file is resized to
   800 px on its longest edge before it is saved, so its aspect ratio is whatever
   the phone was held at. */
.cc-scope .cc-photo {
  margin: 0;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-sunken);
  overflow: hidden;
}

.cc-scope .cc-photo img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.cc-scope .cc-photo figcaption {
  padding: 8px 12px;
  border-top: 1px solid var(--cc-border);
  background: var(--cc-surface-muted);
  font-size: 12px;
  line-height: 17px;
  color: var(--cc-text-soft) !important;
}

/* The working: the sample readings the yield came from, printed so a reader with
   a calculator can reproduce it. A definition list, because that is what it is. */
.cc-scope .cc-working {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface-muted);
}
.cc-scope .cc-working div { min-width: 0; }

.cc-scope .cc-working dt {
  margin: 0 0 2px;
  font-family: var(--cc-font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-scope .cc-working dd {
  margin: 0;
  font-family: var(--cc-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--cc-text);
}

.cc-scope .cc-working dd small {
  font-family: var(--cc-font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--cc-text-soft);
}

/* The action bar under the sheet. */
.cc-scope .cc-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--cc-border);
  background: var(--cc-surface-muted);
}

/* --------------------------------------------------------------------------
   Printing the sheet. Honest about its limits: this stylesheet can only reach
   inside `.cc-scope`, so the shell's header, sidebar and footer still print —
   the official document is the PDF, and the button beside this one downloads it.
   What these rules do is stop the sheet wasting ink on a tinted letterhead and
   drop the controls, which are the two things that made a printed page unusable.
   -------------------------------------------------------------------------- */
@media print {
  .cc-scope.is-public { padding: 0; }
  .cc-scope .cc-noprint { display: none !important; }
  .cc-scope .cc-sheet { max-width: none; border-color: #999999; }
  .cc-scope .cc-sheet__head,
  .cc-scope .cc-working,
  .cc-scope .cc-coords { background: transparent !important; }
  .cc-scope .cc-photo img { max-height: 260px; }
}
/* ==========================================================================
   FILED SUCCESSFULLY — success.html

   Replacing a card built out of `shadow-lg rounded-lg` and six `style=`
   attributes in `#059669` — a seventh green — plus SweetAlert2 from jsDelivr for
   a popup carrying a message the page never printed anywhere else, so a machine
   with no internet showed the officer nothing at all: `accounts/base.html` does
   not render flash messages, unlike the dashboard shell. They are `.cc-alert`
   rows in the panel now, which need no CDN and stay on the screen.

   Also gone: a script that manufactured an <a> and clicked it to start a
   download nobody had asked for, and `report.pdf_file.url` read unconditionally,
   so when the document failed to build the button pointed at the empty string —
   a link back to the same page.
   ========================================================================== */
.cc-scope .cc-done {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 24px;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-surface);
  text-align: center;
}

.cc-scope .cc-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cc-good-bg);
  font-size: 26px;
  color: var(--cc-good);
}

.cc-scope .cc-done__title {
  margin: 0 0 7px;
  font-family: var(--cc-font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cc-text) !important;
}

.cc-scope .cc-done__text {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 13px;
  line-height: 20px;
  color: var(--cc-text-soft) !important;
}
.cc-scope .cc-done__id {
  display: inline-block;
  margin: 13px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-sm);
  background: var(--cc-surface-muted);
  font-family: var(--cc-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--cc-text);
}

/* The flash messages `export_pdf` set on its way here. Left-aligned inside a
   centred panel, because a sentence explaining that the document failed to build
   is a sentence and not a caption; the last one drops its own bottom margin so
   the figures beneath keep the panel's spacing. */
.cc-scope .cc-done__messages { margin-top: 18px; text-align: left; }
.cc-scope .cc-done__messages .cc-alert:last-child { margin-bottom: 0; }

.cc-scope .cc-done__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cc-border);
}

/* The three figures repeated on the success panel, so the officer can check the
   yield against the paper without opening the PDF. */
.cc-scope .cc-done .cc-working { margin-top: 18px; text-align: left; }

/* ==========================================================================
   Narrow screens, for the four screens above. A second media query rather than
   more rules inside the calculator's: they are separate screens, and a reader
   looking for what the directory does on a phone should not have to read past
   the map's height to find it.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* A QR scan lands on the report sheet, so a phone is the ordinary case here
     rather than the narrow one. */
  .cc-scope.is-public { padding: 18px 12px 40px; }

  .cc-scope .cc-toolbar { padding: 12px; }
  .cc-scope .cc-toolbar__group,
  .cc-scope .cc-toolbar__group.is-grow { flex: 1 1 100%; }
  .cc-scope .cc-toolbar__actions { width: 100%; margin-left: 0; }
  .cc-scope .cc-toolbar__actions .cc-btn { flex: 1 1 auto; }

  .cc-scope .cc-tally__actions { width: 100%; margin-left: 0; }
  .cc-scope .cc-tally__actions .cc-btn { flex: 1 1 auto; }

  .cc-scope .cc-sheet__body { padding: 14px; }
  .cc-scope .cc-sheet__id { margin-left: 0; }
  .cc-scope .cc-sheet__foot { padding: 12px 14px; }
  .cc-scope .cc-sheet__foot .cc-btn { flex: 1 1 auto; }

  .cc-scope .cc-done { padding: 22px 16px; }
  .cc-scope .cc-done__actions .cc-btn { flex: 1 1 auto; }
  .cc-scope .cc-coords__actions { width: 100%; margin-left: 0; }
  .cc-scope .cc-coords__actions .cc-btn { flex: 1 1 auto; }
}