.start-page {
  width: 100%;
  max-width: calc(100% - 2em);
}

.start-page-header {
  position: fixed;

  display: flex;
  justify-content: right;
  align-items: center;
  background: var(--bg-color);
  box-shadow: none;
  box-sizing: border-box;
  padding: 0 1em 1em;

  svg {
    display: block;
    height: 1.25em;
    margin: 0;
  }

  h1 {
    margin: 0;
    color: var(--fg-color);
    font-size: 1.25rem;
  }
}

.start-page-actions {
  display: flex;
  gap: 0.5em;
}

.button-link {
  background: var(--bg-color);
  fill: var(--mid-color);
  color: var(--mid-color);
  text-decoration: none;
  font-size: 0.875em;
  height: auto;
  transition: none;

  svg {
    fill: var(--mid-color);
  }

  &:hover {
    color: var(--fg-color);
    box-shadow: none;
    svg {
      fill: var(--fg-color);
    }
  }
}

.start-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2em 0 3.5em;

  section > h2 {
    margin: 0 1rem 0.5em;
    font-size: 1em;
    font-weight: bold;
    color: var(--fg-color);
    border-bottom: 0.125rem solid var(--highlight-color);
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 0em;
    margin: 0;
    padding: 0;
    list-style: none;

    &.drop-zone-active {
      background-color: var(--bg-highlight-color);
      border: 0.125rem dashed var(--highlight-color);
      border-radius: 0.5em;
      padding: 0.5em;
      margin: 0.25em 0;
      transition: all 0.2s ease;
    }
  }

  li a {
    font-size: 1.125em;
    color: var(--fg-color);
    display: block;
    padding: 0.25rem 1rem;
    border-radius: 1rem;

    &:hover {
      text-decoration: none;
      background-color: var(--bg-highlight-color);
    }
  }

  /* Responsive - Tablets */
  @media screen and (min-width: 45em) {
    &[data-columns="2"] {
      grid-template-columns: repeat(2, 1fr);
    }

    &[data-columns="3"] {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Responsive - Desktop */
  @media screen and (min-width: 60em) {
    &[data-columns="2"] {
      grid-template-columns: repeat(2, 1fr);
    }

    &[data-columns="3"] {
      grid-template-columns: repeat(3, 1fr);
    }

    &[data-columns="4"] {
      grid-template-columns: repeat(4, 1fr);
    }

    &[data-columns="5"] {
      grid-template-columns: repeat(5, 1fr);
    }

    &[data-columns="6"] {
      grid-template-columns: repeat(6, 1fr);
    }
  }
}

.start-page-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  h3 {
    font-size: 0.75em;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
  }

  &.drop-zone-active {
    background-color: var(--bg-highlight-color);
    border: 0.125rem dashed var(--highlight-color);
    border-radius: 0.5em;

    h3 {
      color: var(--highlight-color);
      font-weight: bold;
    }
  }
}

.command-bar {
  position: relative;
  margin-bottom: 2em;

  input {
    width: 100%;
    padding: 0.75em 1em;
    border: 0.125rem solid var(--border-color);
    border-radius: 0.5em;
    font-size: 1.125em;
    background: var(--bg-color);
    color: var(--fg-color);
    box-sizing: border-box;
    transition: none;

    &:focus {
      outline: none;
      border-color: var(--highlight-color);
      box-shadow: 0 0 0 0.125em rgba(var(--highlight-color), 0.2);
    }
  }
}

.command-bar-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-color);
  border: 0.125rem solid var(--border-color);
  border-radius: 0.5em;
  margin-top: 0.25em;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.command-bar-suggestion {
  padding: 0.75em 1em;
  cursor: pointer;
  border-bottom: 0.125rem solid var(--border-color);

  &:last-child {
    border-bottom: none;
  }

  &:hover,
  &.selected {
    background: var(--bg-highlight-color);
  }
}

.suggestion-title {
  font-weight: 600;
  color: var(--fg-color);
}

.suggestion-url {
  font-size: 0.875em;
  color: var(--mid-color);
}

.command-bar-section-header {
  padding: 0.5em 1em;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mid-color);
  background: var(--bg-highlight-color);
  border-bottom: 0.125rem solid var(--border-color);
}

.command-bar-searching,
.command-bar-notice {
  padding: 0.75em 1em;
  color: var(--mid-color);
  font-style: italic;
}

.start-page-empty {
  margin: 0;
  padding: 3em 1em;
  text-align: center;
  color: var(--mid-color);
}

.group-header {
  display: flex;
  align-items: center;
  margin: 0 0.5em 0.25em;
  border-bottom: 0.125rem solid var(--highlight-color);
  gap: var(--control-gap);
  min-height: var(--control-size);
}

.group-name {
  flex: 1;
  font-weight: 600;
  overflow-wrap: break-word;
}

.start-page-group {
  transition: opacity 0.2s ease, transform 0.2s ease;

  &.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
  }
}

.start-page-item {
  transition: opacity 0.2s ease, transform 0.2s ease;

  &.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
  }

  &.editable {
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    transition: 0.2s ease-out all;
  }
}

/* The drop zone for a group's tiles. An empty group has nothing in here, and a
   zero-height target cannot be dragged into — the placeholder text used to hold
   it open by accident, so the floor has to be deliberate. */
.group-items {
  min-height: var(--control-size);
}

.item-row {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  padding: 0.25em 0.5em;
  min-height: var(--control-size);
}

.item-title {
  flex: 1;
  overflow-wrap: break-word;
}

/* One size for every control in the editor: handles, icon buttons, inputs and
   submits alike. Anything that lands in a row with the others measures
   --control-size and nothing else. */
.drag-handle,
.item-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  height: var(--control-size);
  border-radius: var(--control-radius);
  border: none;
  cursor: pointer;
  padding: 0;

  svg {
    display: block;
    /* The icons are full-bleed in their viewBox, so the inset has to come from
       here or the glyph runs edge to edge. */
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--border-color);
    margin: 0;
  }

  &:hover svg {
    fill: var(--fg-color);
    fill-opacity: 0.5;
  }
}

.drag-handle {
  cursor: grab;
  user-select: none;

  &:active {
    cursor: grabbing;
  }
}

.item-actions button {
  background: var(--bg-color);
  color: var(--fg-color);
  font-size: 1rem;
}

.item-actions {
  display: flex;
  gap: var(--control-gap);

  .remove-button:hover svg {
    fill: var(--danger-color);
  }
}

/* --- inline add / edit forms ---
   The trigger and the form it guards are both in the DOM; inline_form_controller
   swaps which one is hidden. */

.inline-form-slot {
  margin: 0.25em 0.5em 0;
}

.add-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 0.375em;
  width: 100%;
  height: var(--control-size);
  padding: 0 0.5em;
  font: inherit;
  font-size: 0.875em;
  color: var(--mid-color);
  background: transparent;
  border: 0.0625rem dashed var(--border-color);
  border-radius: var(--control-radius);
  cursor: pointer;
  transition: 0.2s ease-out all;

  svg {
    display: block;
    width: 1rem;
    height: 1rem;
    /* The icons are solid chips with the glyph knocked out, so this has to
       match the resting weight of the row's other buttons or the plus reads
       as the heaviest thing in the column. */
    fill: var(--border-color);
    margin: 0;
  }

  &:hover {
    color: var(--fg-color);
    border-color: var(--highlight-color);
    border-style: solid;

    svg {
      fill: var(--highlight-color);
    }
  }
}

.inline-form {
  padding: 0.5em;
  background: var(--bg-highlight-color);
  border-radius: var(--control-radius);
}

.inline-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
  max-width: none;
}

.inline-form-actions {
  display: flex;
  gap: var(--control-gap);
}

/* These beat forms.css's input[type=text] (0,1,1) on specificity rather than on
   load order — the class-only .group-name-field this replaces lost that fight
   and its padding never applied. */
.start-page-grid input.control,
.start-page-grid button.control {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-size);
  margin: 0;
  padding: 0 0.5em;
  font: inherit;
  font-size: 0.875em;
  border-radius: var(--control-radius);
}

.start-page-grid input[type="text"].control,
.start-page-grid input[type="url"].control {
  color: var(--fg-color);
  background: var(--bg-color);
  border: 0.0625rem solid var(--border-color);
  outline: medium solid var(--bg-color);
  transition: 0.3s ease outline;

  &:focus {
    border-color: var(--highlight-color);
    outline: medium solid var(--highlight-color);
  }
}

.start-page-grid input[type="submit"].control {
  flex: 1;
  font-weight: bold;
  color: var(--button-fg-color);
  background: var(--highlight-color);
  border: none;
  cursor: pointer;
}

.start-page-grid button.control.secondary {
  flex: 1;
  color: var(--fg-color);
  background: var(--bg-color);
  border: 0.0625rem solid var(--border-color);
  cursor: pointer;

  &:hover {
    background: var(--bg-highlight-color);
  }
}

.form-errors {
  margin: 0 0 0.25em;
  padding-left: 1.25em;
  color: var(--danger-color);
  font-size: 0.75em;
}

.potential-drop-target {
  background-color: oklch(from var(--highlight-color) l c h / 0.1);
  border: 0.125rem solid oklch(from var(--highlight-color) l c h / 0.3);
  border-radius: 0.5em;
  transition: all 0.2s ease;

  ul {
    padding: 0.5em;
    margin: 0.25em 0;
  }

  .start-page-column {
    background-color: oklch(from var(--highlight-color) l c h / 0.05);
  }
}

.hidden {
  display: none !important;
}

/* Shown when the connected app's token has been rejected — federated search is off
   until someone reconnects. */
.search-disconnected {
  max-width: 40em;
  margin: 0 auto 1em;
  padding: 0.75em 1em;
  border: 0.0625rem solid var(--danger-color);
  border-radius: 0.5em;
  color: var(--danger-color);
  font-size: 0.875em;
  text-align: center;

  code {
    font-family: ui-monospace;
    overflow-wrap: anywhere;
  }
}