:root {
  --color-bg: #999999;
  --color-card: #ffffff;
  --color-text-strong: #333333;
  --color-text: #666666;
  --color-primary: #2b44d3;
  --color-primary-strong: #0017c1;
  --color-link-bg: rgba(255, 255, 255, 0.5);
  --color-link-border: #4c93ff;
  --color-link-text: #215bc8;
  --color-success-bg: #d1e4db;
  --color-divider: #b2b2b2;
  --color-pop-bg: #f4f6ff;
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-link: 0 0 4px 0 rgba(255, 255, 255, 0.85);
  --font-sans: 'SF Pro Text', 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP',
    system-ui, sans-serif;
  --font-display: 'Montserrat', 'SF Pro Display', 'Noto Sans JP', sans-serif;
  font-family: var(--font-sans);
  color: var(--color-text-strong);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
  background: #ffffff;
}

body {
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}
.editor-page {
  min-height: 100vh;
  background: #f3f4f8;
  display: flex;
  flex-direction: column;
  color: #1f2937;
  font-family: var(--font-sans);
}

.editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.editor-topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.editor-topbar nav {
  display: flex;
  gap: 12px;
}

.editor-topbar nav a {
  color: var(--color-primary-strong);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
}

.editor-topbar nav a.active {
  background: rgba(43, 68, 211, 0.1);
}

.editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-button {
  appearance: none;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #1f2937;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.editor-button:hover {
  background: #f9fafb;
}

.editor-button.primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.editor-button.primary:hover {
  background: #1f3ec2;
  border-color: #1f3ec2;
}

.editor-button.ghost {
  border-color: transparent;
  color: var(--color-primary-strong);
}

.editor-button.ghost:hover {
  background: rgba(43, 68, 211, 0.08);
}

.editor-save-indicator {
  font-size: 12px;
  color: #6b7280;
  margin-right: 4px;
}

.editor-save-indicator.dirty {
  color: #b45309;
}

.editor-save-indicator.saved {
  color: #047857;
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  padding: 24px;
  flex: 1;
  align-items: start;
}

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

.editor-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.editor-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.editor-section h2 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.editor-section .editor-section-help {
  margin: 0 0 16px 0;
  font-size: 12px;
  color: #6b7280;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.editor-grid.cols-1 {
  grid-template-columns: 1fr;
}

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

.editor-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editor-field.full {
  grid-column: 1 / -1;
}

.editor-field label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.editor-field input,
.editor-field textarea,
.editor-field select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.editor-field input:focus,
.editor-field textarea:focus,
.editor-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 68, 211, 0.18);
}

.editor-field textarea {
  min-height: 64px;
  resize: vertical;
}

.editor-list-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f9fafb;
}

.editor-list-item header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.editor-list-item .editor-grid {
  grid-template-columns: repeat(2, 1fr);
}

.editor-list-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.editor-list-empty {
  font-size: 12px;
  color: #6b7280;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.editor-add-button {
  align-self: flex-start;
  appearance: none;
  border: 1px dashed #9ca3af;
  background: transparent;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.editor-add-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.editor-preview {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-preview h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.editor-preview-frame {
  border-radius: 16px;
  background: #999999;
  padding: 12px;
  display: flex;
  justify-content: center;
  overflow: auto;
}

.editor-preview-frame .permit-screen {
  min-height: 0;
  padding: 0;
  background: transparent;
}
  overflow: auto;
}
.permit-screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
}

.permit-fit {
  /* Container is always 327px wide; we scale it visually with a transform
     computed in JS so the entire card (typography, spacing, layout) scales
     proportionally to fit the viewport. */
  width: 327px;
  flex-shrink: 0;
  transform-origin: top center;
  margin: 0 auto;
}

.permit-dialog {
  width: 327px;
  background: #ffffff;
  border-radius: 12px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  /* No gap between header and body — the header's bottom radius should
     overlap the top of the body for the Figma look. */
  gap: 0;
  padding: 0 16px 16px;
  position: relative;
}

/* ---------- Header ---------- */

.permit-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* No horizontal padding here — the header extends to the dialog's left
     and right edges so the decorative corner bars can sit flush against
     the dialog boundary (matching Figma). The inner strip handles its
     own horizontal padding for the brand text. */
  padding: 0 0 16px;
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
  /* Figma shows the whole header as a white-to-blue vertical gradient.
     Use a CSS linear-gradient directly so the stop colors are explicit
     (top near-white → bottom medium blue) and don't depend on the SVG
     asset's transparent stops. */
  background: linear-gradient(180deg, #ffffff 0%, #d6e2ff 40%, #a8c5f5 100%);
  /* The bottom radius of the header matches the dialog's top corner
     curve so the blue panel sits flush against the white dialog edge. */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: visible;
  z-index: 1;
}

.permit-header::before {
  /* The Figma "Rectangle 12918" SVG asset is left over from a previous
     gloss effect and is no longer needed; the CSS gradient on the
     element itself provides the correct white-to-blue transition. */
  content: none;
}

.permit-header-strip {
  position: relative;
  width: 100%;
  height: 45px;
  /* The strip itself is no longer a colored band — the parent .permit-header
     already paints the blue background. We only need this element to host
     the brand text. The decorative corner bars (.permit-header-bar) are
     absolutely positioned on .permit-header itself so they can stretch
     to the dialog's left/right edges. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  overflow: visible;
}

.permit-header-bar {
  position: absolute;
  top: 0;
  width: 94px;
  height: 7px;
  pointer-events: none;
}

.permit-header-bar--left { left: 0; }
.permit-header-bar--right { right: 0; }

.permit-header-subtract {
  position: absolute;
  left: 50%;
  top: 0;
  width: 215px;
  height: 45px;
  transform: translateX(-50%);
  pointer-events: none;
}

.permit-badge {
  position: absolute;
  right: 10px;
  /* The badge sits below the brand strip in Figma, not overlapping the
     JESTA text. Positioned roughly 1/4 of its current top above where
     it was so it moves up closer to the strip. */
  top: 37px;
  width: 48px;
  height: 54px;
  pointer-events: none;
  z-index: 3;
}

.permit-brand {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.permit-inspection-mark {
  margin: 0;
  font-family: 'Noto Sans JP', var(--font-sans);
  font-weight: 900;
  color: #1e3a8a;
  font-size: 12px;
}

.permit-verification {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  /* The URL capsule's text is aligned with the body card's content text
     (the inspector label / field labels), not the body card's outer
     edge. The body has 16px internal padding, so the URL capsule is
     inset 16px from the dialog's inner edge to match. */
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  height: 24px;
  padding: 0 12px;
  border-radius: 16px;
  background: var(--color-link-bg);
  /* Three-color gradient border: blue on the left, deep navy in the
     middle, white on the right (matches the Figma reference). */
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: var(--shadow-link);
}

.permit-verification::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #4c93ff 0%, #1e3a8a 50%, #ffffff 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.permit-verification-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.permit-verification-link {
  color: var(--color-link-text);
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Body ---------- */

.permit-body {
  position: relative;
  border-radius: 16px;
  background-color: #f4f6ff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
  padding: 16px;
  /* In Figma the body sits slightly higher than the header so its top
     edge covers the bottom corners of the header. This forms the soft
     "body on top of header" stacking visible in the reference. The body
     itself spans the full inner width of the dialog. */
  margin-top: -6px;
  z-index: 2;
}

.permit-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 0;
}

.permit-body-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.permit-inspector-label {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-strong);
  text-align: center;
  white-space: nowrap;
}

.permit-microprint {
  position: relative;
  z-index: 0;
  margin: 0;
  width: 100%;
  font-family: 'Montserrat', 'SF Pro Text', system-ui, sans-serif;
  font-size: 1px;
  line-height: 1;
  letter-spacing: -0.05px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  max-height: 1px;
  text-align: left;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

/* Debug: pass ?debug=1 in the URL to make the microprint legible. */
.permit-microprint[data-debug='true'] {
  font-size: 10px;
  max-height: none;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  padding: 4px 0;
  color: rgba(43, 68, 211, 0.7);
  border-top: 1px dashed rgba(43, 68, 211, 0.4);
  border-bottom: 1px dashed rgba(43, 68, 211, 0.4);
}

.permit-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-strong);
  letter-spacing: 0.05em;
}

.permit-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.permit-current-time {
  width: 100%;
  background: var(--color-success-bg);
  color: var(--color-text-strong);
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
}

.permit-portrait {
  margin: 0;
  width: 100%;
  aspect-ratio: 327 / 235;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8ff 100%);
}

.permit-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.permit-fields {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.permit-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.permit-field-label,
.permit-field-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.permit-field-label {
  align-items: flex-start;
  text-align: left;
}

.permit-field-value {
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  flex-shrink: 1;
}

.permit-field-label dt {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-strong);
  font-weight: 400;
  white-space: nowrap;
}

.permit-field-sub {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
  font-weight: 400;
  white-space: nowrap;
}

.permit-field-value-text {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-strong);
  white-space: nowrap;
}

.permit-field-value-text--regular {
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.permit-field-caption {
  font-size: 12px;
  color: var(--color-text);
  white-space: nowrap;
}

.permit-airport {
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-divider);
  padding: 2px 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-strong);
}


.permit-notes {
  width: 100%;
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.permit-notes p {
  margin: 0;
}

/* ---------- Watermarks ---------- */

.permit-watermark {
  position: absolute;
  display: block;
  width: 756px;
  text-align: center;
  color: rgba(0, 0, 0, 0.1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Footer actions ---------- */

.permit-download {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-primary-strong);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  min-width: 72px;
  padding: 7px 8px;
  border-radius: 4px;
  align-self: center;
}

.permit-download-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  text-decoration: none;
}

.permit-footer {
  display: flex;
  width: 100%;
}

.permit-close {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-primary-strong);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 12px 16px;
  border-radius: 8px;
  min-height: 48px;
}