/* packages/brand/brand.css */
/* Modest Tools brand layer on top of mdst-ui. Page layout and site chrome only;
   component styles live next to each component. */

:root {
  color-scheme: light dark;
  --mt-width: 64rem;
}

/* mdst-ui has no dark theme yet, so the tokens are overridden here. */
@media (prefers-color-scheme: dark) {
  :root {
    --mdst-color-fg: #f2f2f2;
    --mdst-color-bg: #121212;
    --mdst-color-border: #f2f2f2;
    --mdst-color-muted: #a3a3a3;
    --mdst-color-subtle: #262626;
    --mdst-color-surface: #1c1c1c;
    --mdst-color-focus: #ffffff;
    --mdst-color-error: #f87171;
    --mdst-color-success: #4ade80;
  }
}

[hidden] {
  display: none !important;
}

body.mdst-ui {
  margin: 0;
  background: var(--mdst-color-bg);
  color: var(--mdst-color-fg);
  font-family: var(--mdst-font-text);
  line-height: var(--mdst-line-height);
  -webkit-text-size-adjust: 100%;
}

.site-header,
.site-footer,
main {
  box-sizing: border-box;
  max-width: var(--mt-width);
  margin-inline: auto;
  padding-inline: var(--mdst-space-md);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mdst-space-md);
  padding-block: var(--mdst-space-md);
  border-bottom: var(--mdst-border-width) solid var(--mdst-color-border);

  & .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--mdst-space-sm);
    font-weight: 700;
    color: inherit;
    text-decoration: none;
  }

  & nav {
    display: flex;
    gap: var(--mdst-space-md);
    align-items: center;
    font-size: var(--mdst-text-sm);
  }

  & .icon-link {
    display: inline-flex;
    color: inherit;

    &:hover,
    &:focus-visible {
      color: var(--mdst-color-muted);
    }
  }
}

main {
  padding-block: var(--mdst-space-xl);
}

.site-footer {
  padding-block: var(--mdst-space-xl) var(--mdst-space-lg);
  border-top: var(--mdst-border-width) solid var(--mdst-color-border);
  font-size: var(--mdst-text-sm);
  color: var(--mdst-color-muted);

  & a {
    color: inherit;
  }

  & .footer-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--mdst-space-lg);
    margin-bottom: var(--mdst-space-xl);

    & h2 {
      margin: 0 0 var(--mdst-space-sm);
      font-size: var(--mdst-text-sm);
      font-weight: 600;

      & a {
        color: var(--mdst-color-fg);
        text-decoration: none;
      }
    }

    & ul {
      display: grid;
      gap: var(--mdst-space-xs);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & ul a {
      text-decoration: none;

      &:hover,
      &:focus-visible {
        color: var(--mdst-color-fg);
        text-decoration: underline;
      }
    }
  }

  & .legal {
    margin: 0 0 var(--mdst-space-xs);

    & .link {
      all: unset;
      color: inherit;
      text-decoration: underline;
      cursor: pointer;

      &:focus-visible {
        outline: 2px solid var(--mdst-color-focus);
        outline-offset: 2px;
      }
    }
    font-size: var(--mdst-text-xs);
    text-align: center;
  }
}

.intro {
  max-width: 42rem;

  & h1 {
    margin-block: 0 var(--mdst-space-sm);
  }

  & p {
    margin-block: 0 var(--mdst-space-sm);
  }

  & .note {
    font-size: var(--mdst-text-sm);
    color: var(--mdst-color-muted);
  }
}

mt-search {
  display: block;
  margin-block: var(--mdst-space-lg);

  & input {
    width: 100%;
    box-sizing: border-box;
  }
}

.category {
  margin-block: var(--mdst-space-xl);

  & > header {
    display: flex;
    align-items: baseline;
    gap: var(--mdst-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--mdst-space-md);

    & h2 {
      margin: 0;
    }

    & p {
      margin: 0;
      color: var(--mdst-color-muted);
    }

    & a {
      margin-left: auto;
      font-size: var(--mdst-text-sm);
    }
  }
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--mdst-space-md);
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    position: relative;
  }
}

.tool-card {
  display: grid;
  gap: var(--mdst-space-xs);
  height: 100%;
  box-sizing: border-box;
  padding: var(--mdst-space-md);
  border: var(--mdst-border-width) solid var(--mdst-color-border);
  color: inherit;
  text-decoration: none;

  & strong {
    padding-right: 1.75rem;
    font-size: var(--mdst-text-base);
  }

  & span {
    font-size: var(--mdst-text-sm);
    color: var(--mdst-color-muted);
  }

  &:is(a):hover,
  &:is(a):focus-visible {
    background: var(--mdst-color-subtle);
  }

  &[aria-disabled='true'] {
    border-style: dashed;
    border-color: var(--mdst-color-muted);
    opacity: 0.5;
    cursor: default;
  }

  & .badge {
    justify-self: start;
    font-size: var(--mdst-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

.content {
  max-width: 42rem;
  margin-top: var(--mdst-space-xl);

  & h2 {
    margin-block: var(--mdst-space-xl) var(--mdst-space-sm);
  }

  & h2:first-child {
    margin-top: 0;
  }

  & ol {
    margin-block: 0;
  }

  & details {
    margin-block: var(--mdst-space-sm);
  }

  & .note {
    margin-top: var(--mdst-space-xl);
    font-size: var(--mdst-text-sm);
    color: var(--mdst-color-muted);
  }
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdst-space-sm);
  margin: 0 0 var(--mdst-space-md);
  padding: 0;
  list-style: none;
  font-size: var(--mdst-text-sm);
  color: var(--mdst-color-muted);

  & li + li::before {
    content: '/';
    margin-right: var(--mdst-space-sm);
  }

  & a {
    color: inherit;
  }
}

/* packages/shell/components/consent.css */
mt-consent {
  position: fixed;
  right: var(--mdst-space-md);
  bottom: var(--mdst-space-md);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdst-space-sm) var(--mdst-space-md);
  align-items: center;
  max-width: 28rem;
  padding: var(--mdst-space-sm) var(--mdst-space-md);
  border: var(--mdst-border-width) solid var(--mdst-color-border);
  background: var(--mdst-color-bg);
  font-size: var(--mdst-text-xs);

  & p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: var(--mdst-text-xs);
    line-height: 1.4;
  }

  & a {
    color: inherit;
  }

  & div {
    display: flex;
    gap: var(--mdst-space-xs);
  }

  @media (max-width: 30rem) {
    left: var(--mdst-space-md);
  }
}

/* packages/shell/components/dropzone.css */
mt-dropzone {
  display: grid;
  gap: var(--mdst-space-sm);
  justify-items: center;
  padding: var(--mdst-space-xl) var(--mdst-space-md);
  border: var(--mdst-border-width) dashed var(--mdst-color-border);
  text-align: center;

  &[data-over] {
    background: var(--mdst-color-subtle);
  }

  & p {
    margin: 0;
    color: var(--mdst-color-muted);
  }

  & input[type='file'] {
    max-width: 100%;
  }
}

/* packages/shell/components/field.css */
mt-field {
  display: block;
  min-width: 10rem;

  & > label {
    display: grid;
    gap: var(--mdst-space-xs);
  }

  & .label {
    font-size: var(--mdst-text-sm);
    font-weight: 600;
  }

  & .hint {
    font-size: var(--mdst-text-xs);
    color: var(--mdst-color-muted);
  }
}

/* packages/shell/components/file-list.css */
mt-file-list {
  display: grid;
  gap: var(--mdst-space-sm);

  &:empty {
    display: none;
  }

  & .heading {
    margin: var(--mdst-space-sm) 0 0;
    font-size: var(--mdst-text-sm);
    font-weight: 600;

    &:first-child {
      margin-top: 0;
    }
  }

  & .item {
    display: flex;
    gap: var(--mdst-space-md);
    align-items: center;
    padding: var(--mdst-space-sm);
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);

    & > div {
      display: grid;
      flex: 1;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    & span {
      font-size: var(--mdst-text-sm);
      color: var(--mdst-color-muted);
    }

    & img {
      width: 3.5rem;
      height: 3.5rem;
      object-fit: contain;
      background: var(--mdst-color-subtle);
    }

    &[data-kind='error'] {
      color: var(--mdst-color-error);
    }
  }
}

/* packages/shell/components/file-picker.css */
mt-file-picker {
  display: grid;
  gap: var(--mdst-space-sm);

  & mt-dropzone[data-compact] {
    padding-block: var(--mdst-space-md);
  }

  & .files {
    display: grid;
    gap: var(--mdst-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;

    &:empty {
      display: none;
    }
  }

  & li {
    display: flex;
    gap: var(--mdst-space-sm);
    align-items: center;
    padding: var(--mdst-space-xs) var(--mdst-space-xs) var(--mdst-space-xs) var(--mdst-space-sm);
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);
    font-size: var(--mdst-text-sm);

    & img {
      width: 2rem;
      height: 2rem;
      object-fit: cover;
      background: var(--mdst-color-subtle);
    }

    & .name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    & .size {
      color: var(--mdst-color-muted);
      font-variant-numeric: tabular-nums;
    }

    & button {
      min-width: 2rem;
      padding-inline: var(--mdst-space-sm);
      font-size: var(--mdst-text-lg);
      line-height: 1;
    }
  }
}

/* packages/shell/components/panel.css */
mt-panel {
  display: grid;
  gap: var(--mdst-space-md);
  padding: var(--mdst-space-md);
  border: var(--mdst-border-width) solid var(--mdst-color-border);

  & > h2 {
    margin: 0;
    font-size: var(--mdst-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mdst-color-muted);
  }

  & textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
  }

  & .mono {
    font-family: var(--mdst-font-mono);
    font-size: var(--mdst-text-sm);
  }

  /* A lone Copy button gets a border, so it reads as a button. */
  & .row > mt-copy:only-child button {
    border-color: var(--mdst-color-border);
  }

  & .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mdst-space-md);
    align-items: end;
  }

  & .checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--mdst-space-sm);
  }

  & .check {
    display: flex;
    gap: var(--mdst-space-sm);
    align-items: center;
  }
}

/* packages/shell/components/pin.css */
mt-pin {
  position: absolute;
  top: var(--mdst-space-xs);
  right: var(--mdst-space-xs);

  & button {
    all: unset;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--mdst-color-muted);
    cursor: pointer;

    /* Override modest-ui's filled button hover, which would hide the icon. */
    &:hover,
    &:active,
    &:focus-visible {
      background: none;
      border-color: transparent;
    }

    &:hover {
      color: var(--mdst-color-fg);
    }

    &:focus-visible {
      outline: 2px solid var(--mdst-color-focus);
      outline-offset: -2px;
    }

    &[aria-pressed='true'] {
      color: var(--mdst-color-fg);

      & .head {
        fill: currentColor;
      }
    }
  }
}

/* packages/shell/components/pinned.css */
mt-pinned {
  display: block;
  margin-block: var(--mdst-space-lg);

  &:empty {
    display: none;
  }

  & h2 {
    margin: 0 0 var(--mdst-space-sm);
    font-size: var(--mdst-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mdst-color-muted);
  }

  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mdst-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: var(--mdst-border-width) solid var(--mdst-color-border);
  }

  & a {
    padding: var(--mdst-space-xs) 0 var(--mdst-space-xs) var(--mdst-space-sm);
    font-size: var(--mdst-text-sm);
    font-weight: 600;
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  & button {
    all: unset;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    cursor: pointer;

    & .head {
      fill: currentColor;
    }

    /* Override modest-ui's filled button hover, which would hide the icon. */
    &:hover,
    &:active,
    &:focus-visible {
      background: none;
      border-color: transparent;
      color: inherit;
    }

    &:hover {
      color: var(--mdst-color-muted);
    }

    &:focus-visible {
      outline: 2px solid var(--mdst-color-focus);
      outline-offset: -2px;
    }
  }
}

/* packages/shell/components/stats.css */
mt-stats {
  display: block;
  overflow-x: auto;

  & table {
    width: 100%;
    border-collapse: collapse;
  }

  & th,
  & td {
    padding: var(--mdst-space-xs) var(--mdst-space-sm);
    border-bottom: var(--mdst-border-width) solid var(--mdst-color-subtle);
    text-align: left;
  }

  & tbody th {
    font-weight: 400;
    color: var(--mdst-color-muted);
  }

  & td {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  & tr[data-flagged] td {
    color: var(--mdst-color-error);
    font-weight: 600;
  }
}

/* packages/shell/components/status.css */
mt-status {
  display: block;
  font-size: var(--mdst-text-sm);
  color: var(--mdst-color-muted);

  &:empty {
    display: none;
  }

  &[data-kind='error'] {
    color: var(--mdst-color-error);
  }

  &[data-kind='success'] {
    color: var(--mdst-color-success);
  }
}

/* packages/shell/components/tool.css */
mt-tool {
  display: grid;
  gap: var(--mdst-space-md);
  margin-block: var(--mdst-space-lg);
}

/* tools/contrast-checker/ui.css */
mt-tool[slug='contrast-checker'] {
  & .colour {
    display: flex;
    gap: var(--mdst-space-xs);
    align-items: center;

    & input:not([type='color']) {
      width: 9rem;
    }
  }

  & .preview {
    padding: var(--mdst-space-lg);
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);

    & p {
      margin: 0;
      color: inherit;
    }

    & .large {
      margin-bottom: var(--mdst-space-sm);
      font-size: 1.5rem;
    }
  }

  & .ratio {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  & .suggestions {
    display: grid;
    gap: var(--mdst-space-sm);

    & .row {
      align-items: center;
    }
  }

  & .swatch {
    width: 1.5rem;
    height: 1.5rem;
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);
  }
}

/* tools/favicon-generator/ui.css */
mt-tool[slug='favicon-generator'] {
  & .favicon-previews {
    display: flex;
    gap: var(--mdst-space-md);
    align-items: end;
    flex-wrap: wrap;

    &:empty {
      display: none;
    }

    & img {
      border: var(--mdst-border-width) solid var(--mdst-color-subtle);
      background: repeating-conic-gradient(var(--mdst-color-subtle) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
    }
  }
}

/* tools/gradient-generator/ui.css */
mt-tool[slug='gradient-generator'] {
  & .stops {
    display: grid;
    gap: var(--mdst-space-sm);
  }

  & .stop {
    display: flex;
    gap: var(--mdst-space-sm);
    align-items: center;

    & input[type='range'] {
      flex: 1;
    }
  }

  & .gradient-preview {
    aspect-ratio: 16 / 7;
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);
  }
}

/* tools/hours-calculator/ui.css */
mt-tool[slug='hours-calculator'] {
  & .shifts {
    display: grid;
    gap: var(--mdst-space-sm);
  }

  & .shift {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mdst-space-sm) var(--mdst-space-md);
    align-items: end;

    & mt-field {
      min-width: 7rem;
    }

    & .total {
      min-width: 6rem;
      padding-bottom: var(--mdst-space-sm);
      font-variant-numeric: tabular-nums;

      &[data-kind='error'] {
        color: var(--mdst-color-error);
        font-size: var(--mdst-text-sm);
      }
    }
  }
}

/* tools/password-checker/ui.css */
mt-tool[slug='password-checker'] {
  & input[type='password'],
  & input[type='text'] {
    min-width: 18rem;
  }

  & .strength {
    width: 100%;
    height: 0.5rem;
  }

  & .summary {
    margin: 0;
    font-weight: 600;
  }

  & .feedback {
    margin: 0;
    padding-left: var(--mdst-space-lg);

    &:empty {
      display: none;
    }
  }
}

/* tools/regex-tester/ui.css */
mt-tool[slug='regex-tester'] {
  & .grow {
    flex: 1;
  }

  & .flags {
    width: 6rem;
  }

  & .highlight {
    min-height: 3rem;
    padding: var(--mdst-space-sm);
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);
    font-size: var(--mdst-text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    & mark {
      background: color-mix(in srgb, var(--mdst-color-warning) 45%, transparent);
      color: inherit;
    }
  }
}

/* tools/schema-generator/ui.css */
mt-tool[slug='schema-generator'] {
  & .schema-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--mdst-space-md);

    & mt-field:has(textarea) {
      grid-column: 1 / -1;
    }

    & input,
    & select {
      width: 100%;
      box-sizing: border-box;
    }
  }
}

/* tools/social-image-maker/ui.css */
mt-tool[slug='social-image-maker'] {
  & .images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--mdst-space-md);

    & mt-dropzone {
      padding-block: var(--mdst-space-md);
    }
  }

  & .preview-frame {
    background: repeating-conic-gradient(var(--mdst-color-subtle) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);
    text-align: center;
  }

  & .preview {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    margin-inline: auto;
  }
}

/* tools/text-diff/ui.css */
mt-tool[slug='text-diff'] {
  & .sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--mdst-space-md);
  }

  & .diff {
    padding: var(--mdst-space-sm);
    border: var(--mdst-border-width) solid var(--mdst-color-subtle);
    font-size: var(--mdst-text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    &:empty {
      display: none;
    }

    & ins {
      background: color-mix(in srgb, var(--mdst-color-success) 25%, transparent);
      text-decoration: none;
    }

    & del {
      background: color-mix(in srgb, var(--mdst-color-error) 25%, transparent);
      text-decoration: line-through;
    }

    &[data-mode='lines'] {
      & ins,
      & del,
      & span {
        display: block;
      }

      & ins::before {
        content: '+ ';
      }

      & del::before {
        content: '− ';
      }
    }
  }
}

/* tools/time-zone-converter/ui.css */
mt-tool[slug='time-zone-converter'] {
  & .zones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mdst-space-xs);

    & .mdst-tag {
      display: inline-flex;
      gap: var(--mdst-space-xs);
      align-items: center;
    }

    & button {
      padding: 0 var(--mdst-space-xs);
      min-height: 0;
      line-height: 1;
    }
  }
}