/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body.app-wide main {
  max-width: none !important;
  padding: 0 !important;
}

/* The house left-hand rail (see the left-vertical-menu skill). The rail carries
   a ground of its own so the active band - parchment, which is the page's own
   colour - is actually visible on it. A see-through rail on a parchment page
   renders no band at all however right the CSS looks. */
.rail-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 4rem);
}

.rail {
  padding: 1.375rem 0;
  border-right: 1px solid #e5dfd3;
  background: #ffffff;
}

.rail-heading {
  margin: 0 1.25rem 0.75rem;
  color: #6d665d;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.75rem;
}

.rail-item {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.rail-item:not(.bg-parchment):hover {
  background: #faf7f0;
  color: #1f4d3a;
}

/* The pages of the section you are in, indented under its entry. */
.rail-sub {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0.125rem 0 0.5rem 0.75rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--color-hairline);
}

.rail-subheading {
  margin: 0.75rem 0.75rem 0.25rem;
  color: var(--color-mid);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rail-sub > .rail-subheading:first-child {
  margin-top: 0.25rem;
}

.rail-subitem {
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  /* A saved postage's name is the seller's, up to 60 characters with no
     spaces if they like, and it must not push past the rail's edge. */
  overflow-wrap: anywhere;
}

.rail-foot {
  margin: 1.25rem 0.75rem 0;
  padding-top: 1rem;
  border-top: 1px solid #e5dfd3;
}

.rail-body {
  min-width: 0;
  padding: 1.5rem 2rem 3rem;
}

/* Editing on the left, what it produces on the right, and the result stays in
   view while the form scrolls. */
.editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.rail-preview {
  position: sticky;
  top: 1.5rem;
}

.rail-preview-frame {
  display: block;
  width: 100%;
  height: 30rem;
  border: 0;
  /* A preview, not a second browser. Clicking into it navigated it away from
     the shopfront with no way back, so the way in is the Open link. */
  pointer-events: none;
}

@media (max-width: 1100px) {
  .editor-split {
    grid-template-columns: 1fr;
  }

  .rail-preview {
    position: static;
  }
}

/* A vertical rail on a phone is a list you scroll past to reach the thing you
   came for, so it runs along the top instead. 767px, the same edge as the gem
   editor's phone bar and the bottom nav (md), so one navigation shows at a
   time. */
@media (max-width: 767px) {
  .rail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .rail {
    padding: 0.75rem 0;
    border-right: 0;
    border-bottom: 1px solid #e5dfd3;
    /* Without this the horizontal rail does not scroll, it WIDENS THE PAGE. A
       grid item defaults to min-width:auto, so .rail takes its min-content
       from its nowrap items and the overflow-x on .rail-nav never gets a
       smaller box to scroll inside. Billing's four labels measure about 544px,
       so every phone narrower than that scrolled the whole document sideways
       with the panel clipped. Measured and fixed at review, 2026-08-25.
       If you are checking this: 600px passes either way, because 600 > 544.
       Test at 390, or read the document's scrollWidth. */
    min-width: 0;
  }

  /* One row of chips: the section's own pages join the row after it, with
     their group headings dropped. The vertical padding is room for the focus
     outline, which overflow-x would otherwise clip. */
  .rail-nav {
    position: relative;
    flex-direction: row;
    gap: 0.125rem;
    padding: 4px 0.75rem;
    overflow-x: auto;
  }

  .rail-sub {
    display: contents;
  }

  /* A hairline between the section and its pages, which sit in the same row. */
  .rail-sub::before {
    content: "";
    flex: none;
    align-self: stretch;
    width: 1px;
    margin: 0.375rem 0.25rem;
    background: var(--color-hairline);
  }

  /* In a row, the section's band and its page's band read as two pages, so
     the section keeps an outline and only the page you are on is filled. */
  .rail-item[aria-current="true"] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--color-hairline);
  }

  .rail-subheading {
    display: none;
  }

  .rail-item {
    width: auto;
    white-space: nowrap;
  }

  .rail-foot {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  /* The gem editor's phone bar already carries its View links and Save. */
  body:has(.gem-editor-mobile-actions) .rail-foot {
    display: none;
  }

  .rail-body {
    padding: 1.25rem 1.25rem 2.5rem;
  }
}

.admin-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem;
}

.admin-user-grid-single {
  grid-template-columns: 1fr;
}

.admin-users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.admin-user-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-user-search input[type="text"] {
  width: min(24rem, 100%);
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: #fff;
  color: #2b2620;
  font-size: 0.875rem;
}

.admin-user-search input[type="submit"] {
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: 0.75rem;
  background: #1f4d3a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-user-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: #fff;
}

.admin-gem-domain,
.admin-gem-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-user-application {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: #f6f1e7;
  border: 1px solid #e5dfd3;
}

.admin-user-application-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #2b2620;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.admin-user-card-gems {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 1rem;
}

.admin-gem-row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #e5dfd3;
}

.admin-gem-title {
  color: #2b2620;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.admin-gem-title:hover {
  color: #b08943;
}

.gem-editor-mobile-actions {
  display: none;
}

/* A colour input fills whatever box it is given, so sizing IS the fix here
   (board #246). The inner padding a browser puts around the swatch has to go
   too, or a 2.75rem well shows a 1.5rem colour in a white surround. */
.colour-well {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: none;
  cursor: pointer;
}

.colour-well::-webkit-color-swatch-wrapper {
  padding: 0;
}

.colour-well::-webkit-color-swatch,
.colour-well::-moz-color-swatch {
  border: none;
  border-radius: 0.625rem;
}

/* The desktop half of "Save should float" (board #241). The phone already had
   a fixed bar; on desktop the only Save sat at the foot of the rail, off
   screen for the whole of a long section. */
.gem-editor-save-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  border-top: 1px solid #e5dfd3;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1rem;
}

.gem-editor-save-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

/* The bar is fixed, so the last field of a section would otherwise sit under
   it and be unreachable. */
.gem-editor-content {
  padding-bottom: 6rem;
}

/* The rail's last items too: the gem editor's rail is long, and the bar
   covers the bottom of it the same way. Not on a phone, where the bar is
   hidden and the rail is a single row. */
@media (min-width: 768px) {
  body:has(.gem-editor-save-bar) .rail {
    padding-bottom: 6rem;
  }
}

.choice-rule-row {
  display: grid;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.875rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: #faf8f3;
}

.choice-rule-clause {
  display: grid;
  align-items: center;
  gap: 0.5rem;
}

.choice-rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.choice-rule-number {
  margin: 0;
  color: #2b2620;
  font-size: 0.8125rem;
  font-weight: 700;
}

.choice-rule-if {
  grid-template-columns: auto minmax(10rem, 0.85fr) auto minmax(10rem, 1fr);
}

.choice-rule-then {
  grid-template-columns: auto minmax(9rem, 0.45fr) minmax(0, 1fr);
}

.choice-rule-target {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.choice-rule-clause select {
  min-width: 0;
  background: #fff;
}

.choice-rule-word {
  color: #746f66;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.choice-rule-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #e5dfd3;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.choice-rule-remove:hover {
  background: #fdf0eb;
  border-color: #c9633d;
}

.choice-rule-preview,
.choice-rule-message {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .admin-user-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-search {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-user-search input[type="text"] {
    width: 100%;
  }

  .admin-gem-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .gem-editor-content {
    padding-bottom: 9.5rem;
  }

  .choice-rule-row {
    gap: 0.625rem;
    padding: 0.75rem;
  }

  .choice-rule-if {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .choice-rule-then {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .choice-rule-target {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .gem-editor-save-bar {
    display: none;
  }

  .gem-editor-mobile-actions {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    border-top: 1px solid #e5dfd3;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.75rem;
    backdrop-filter: blur(12px);
  }

  .gem-editor-mobile-actions-inner {
    max-width: 42rem;
    margin: 0 auto;
  }

  .gem-editor-mobile-action-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
}