/* Look comes from @hotosm/ui + WebAwesome; palette matches Drone-TM. */

:root {
  /* Drone-TM palette */
  --oam-red: #d73f3f;
  --oam-redlight: #ffeded;
  --oam-orange: #faa71e;
  --oam-bluedark: #2c3038;
  --oam-bluegrey: #68707f;
  --oam-greylight: #e1e0e0;
  --oam-grey-50: #fafafa;
  --oam-grey-100: #f5f5f5;
  --oam-grey-300: #d7d7d7;
  --oam-grey-500: #989898;
  --oam-grey-800: #484848;
  --oam-grey-900: #212121;

  /* Stays one device pixel at any text size. */
  --oam-border-hairline: 1px;

  --oam-radius-card: 0.75rem;
  --oam-radius-control: 0.5rem;
  --oam-radius-inline: 0.25rem;

  --oam-shadow-light: 0 0.125rem 1.25rem 0.25rem rgba(0, 0, 0, 0.12);

  /* Type scale is the shared HOT one, so this page sizes text like every other
     HOTOSM tool. Roles match Field-TM's app.css: x-large for a page title,
     large for a section title, small/x-small for secondary and fine print. */
  --oam-text-title: var(--hot-font-size-x-large); /* 1.5rem */
  --oam-text-subtitle: var(--hot-font-size-large); /* 1.25rem */
  --oam-text-body: var(--hot-font-size-medium); /* 1rem */
  --oam-text-small: var(--hot-font-size-small); /* 0.875rem */
  --oam-text-x-small: var(--hot-font-size-x-small); /* 0.75rem */

  /* Brand red into WebAwesome so hotosm-ui buttons/tags match Drone-TM. */
  --wa-color-brand-fill-loud: var(--oam-red);
  --wa-color-brand-border-loud: #ed5c5e;
  --wa-color-brand-on-loud: #ffffff;
}

html,
body {
  color: var(--oam-bluedark);
  background: var(--oam-grey-50);
  margin: 0;
  /* iOS inflates text in landscape; the viewport meta tag alone won't stop it. */
  -webkit-text-size-adjust: 100%;
}

/* Login / account button sizing (mirrors Drone-TM). */
hotosm-auth {
  --font-family: var(--hot-font-sans);
  --login-btn-text-size: var(--hot-font-size-x-small);
}

/* Locale switcher (English only for now). */
.oam-locale-menu {
  display: flex;
  flex-direction: column;
  min-width: 8rem;
}

.oam-locale-option {
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--oam-grey-800);
}

.oam-locale-option:hover {
  background: var(--oam-grey-100);
}

.oam-locale-option--active {
  font-weight: var(--hot-font-weight-bold);
  color: var(--oam-red);
}

/* Page content */
.oam-main {
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.oam-card {
  background: #ffffff;
  border: var(--oam-border-hairline) solid var(--oam-greylight);
  border-radius: var(--oam-radius-card);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--oam-shadow-light);
}

.oam-card h1,
.oam-card h2 {
  margin-top: 0;
  color: var(--oam-bluedark);
  font-weight: var(--hot-font-weight-bold);
  letter-spacing: -0.01em;
}

/* WA's native typography sizes a page h1 at 3rem, far too loud here. `>` keeps
   this off `.oam-form__heading`, the h2 that labels a step. */
.oam-card > h1 {
  font-size: var(--oam-text-title);
}

.oam-card > h2 {
  font-size: var(--oam-text-subtitle);
}

/* No max-width: a cap narrower than the card strands the fields inside it. */
.oam-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.oam-form input[type="file"] {
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--oam-text-small);
  color: var(--oam-bluegrey);
  border: var(--oam-border-hairline) dashed var(--oam-greylight);
  border-radius: var(--oam-radius-control);
  padding: 0.75rem;
  background: var(--oam-grey-50);
}

/* Source chooser: upload a file, or import from a link. */
.oam-source {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Undo the UA `min-content`, which lets a long child push past the form. */
  min-inline-size: 0;
}

/* The form reads as two steps; a legend and an h2 have to be made to match. */
.oam-form__heading,
.oam-source legend {
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: var(--oam-text-body);
  font-weight: var(--hot-font-weight-bold);
  color: var(--oam-bluedark);
}

.oam-form__heading {
  padding-top: 1.25rem;
  border-top: var(--oam-border-hairline) solid var(--oam-greylight);
}

/* width, not align-self: a fieldset's anonymous content box is sized to fit. */
.oam-source__option {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem;
  border: var(--oam-border-hairline) solid var(--oam-greylight);
  border-radius: var(--oam-radius-control);
  background: #ffffff;
  cursor: pointer;
}

.oam-source__option:hover {
  border-color: var(--oam-grey-300);
  background: var(--oam-grey-50);
}

/* :has, so the whole card reads as selected, not just the radio. */
.oam-source__option:has(input:checked) {
  border-color: var(--oam-red);
  background: var(--oam-redlight);
}

.oam-source__option input {
  margin: 0.2rem 0 0;
  flex: none;
  accent-color: var(--oam-red);
}

.oam-source__option strong {
  display: block;
  font-size: var(--oam-text-body);
  font-weight: var(--hot-font-weight-semibold);
}

.oam-source__option small {
  display: block;
  font-size: var(--oam-text-x-small);
  color: var(--oam-bluegrey);
}

/* Scoped: an author `display` beats the UA `[hidden]` rule at any specificity. */
.oam-source__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.oam-source__note {
  margin: 0;
  font-size: var(--oam-text-x-small);
  color: var(--oam-bluegrey);
}

.oam-source__help {
  font-size: var(--oam-text-x-small);
  line-height: 1.5;
  color: var(--oam-grey-800);
}

.oam-source__help h4 {
  margin: 1rem 0 0.25rem;
  font-size: var(--oam-text-small);
  color: var(--oam-bluedark);
}

.oam-source__help p {
  margin: 0;
}

.oam-source__help code {
  /* Long URLs in a narrow column; breaking beats overflowing. */
  overflow-wrap: anywhere;
  font-size: var(--oam-text-x-small);
  padding: 0.05rem 0.25rem;
  border-radius: var(--oam-radius-inline);
  background: var(--oam-grey-100);
}

/* Same as the source panels: this one is toggled with `hidden` too. */
.oam-progress {
  margin-top: 1rem;
}

.oam-progress:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.oam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--oam-text-small);
  /* Fixed, else the column with the longest filename starves the rest. */
  table-layout: fixed;
}

/* Shares of the card width, set on the colgroup. */
.oam-col--title {
  width: 22%;
}

.oam-col--file {
  width: 24%;
}

.oam-col--status {
  width: 17%;
}

.oam-col--message {
  width: 22%;
}

.oam-col--started {
  width: 15%;
}

.oam-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--oam-bluegrey);
  font-weight: var(--hot-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--oam-text-x-small);
  border-bottom: 0.125rem solid var(--oam-greylight);
}

.oam-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: var(--oam-border-hairline) solid var(--oam-grey-100);
  overflow-wrap: break-word;
}

/* A filename is one unbroken token; `anywhere` stops it setting the min width. */
.oam-table td[data-label="File"] {
  overflow-wrap: anywhere;
}

.oam-table tbody tr:hover {
  background: var(--oam-grey-50);
}

.oam-profile {
  display: grid;
  grid-template-columns: minmax(0, 8.75rem) minmax(0, 1fr);
  gap: 0.6rem 1rem;
}

.oam-profile dt {
  font-weight: var(--hot-font-weight-semibold);
  color: var(--oam-bluegrey);
}

.oam-profile dd {
  margin: 0;
  color: var(--oam-bluedark);
  /* The identity claim is an unbroken UUID. */
  overflow-wrap: anywhere;
}

.oam-muted {
  color: var(--oam-bluegrey);
}

/* Phones. */
@media (max-width: 40rem) {
  .oam-main {
    padding: 1rem 0.75rem 2rem;
    gap: 1rem;
  }

  .oam-card {
    padding: 1.25rem 1rem;
  }

  /* Five columns will not fit, so each row becomes a `data-label` card. */
  .oam-table thead {
    display: none;
  }

  .oam-table,
  .oam-table tbody,
  .oam-table tr,
  .oam-table td {
    display: block;
    width: 100%;
  }

  .oam-table tr {
    box-sizing: border-box;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: var(--oam-border-hairline) solid var(--oam-greylight);
    border-radius: var(--oam-radius-control);
  }

  .oam-table tr:last-child {
    margin-bottom: 0;
  }

  .oam-table td {
    display: grid;
    grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: none;
  }

  /* Auto placement would drop element children into the next row's label column. */
  .oam-table td > * {
    grid-column: 2;
  }

  .oam-table td > p {
    margin: 0.25rem 0 0;
  }

  /* A grid item fills its column, turning a tag into a full-width bar. */
  .oam-table td > wa-tag {
    justify-self: start;
  }

  .oam-table td::before {
    content: attr(data-label);
    color: var(--oam-bluegrey);
    font-weight: var(--hot-font-weight-semibold);
    font-size: var(--oam-text-x-small);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .oam-profile {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }

  .oam-profile dd:not(:last-child) {
    margin-bottom: 0.75rem;
  }
}