/* 豆D: nine-slice pixel corners and a warm, moulded brick rim. */
.panel, .tool-dialog, .home-intake, .final-invitation {
  border: 8px solid transparent;
  border-image: url("../images/brick-frame.svg") 16 stretch;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: none;
  filter: drop-shadow(0 5px 0 #d9b58e);
}
.panel__head, .tool-dialog-head {
  background: #fffaf1;
  border-bottom: 2px solid #f1dfc8;
}
.panel__head { margin-bottom: 12px; }
.panel-studs i {
  width: 14px;
  height: 14px;
  border: 2px solid #e5bd93;
  border-radius: 4px;
  background: #f5d6b1;
  box-shadow: inset 0 2px 0 #fff5e6, 0 2px 0 #d7ae85;
}
.brand-block { border-radius: 4px; border: 2px solid #cf602b; }
.brand-name { letter-spacing: 1px; }
.brand-name > span { letter-spacing: 2.2px; }
.brand-logo { display: block; width: 108px; height: 74px; object-fit: cover; object-position: center; }
.home-start { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.start-button { min-width: 240px; justify-content: space-between; padding: 17px 24px; box-shadow: 0 4px 0 #c45626; }
.start-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #c45626; }
.start-description { font-size: 11px; color: #9b8d82; }
.input-source-heading { font-size: 11px; color: #9e7857; margin: 0 0 10px; }
.input-sources { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.input-source { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #e9d8c4; border-radius: 4px; padding: 11px 9px 10px; background: #fffcf7; color: #9b7e65; text-align: left; transition: background .18s, border-color .18s, transform .18s; }
.input-source svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; margin-bottom: 8px; }
.input-source strong { font-size: 11px; font-weight: 600; color: #745238; }
.input-source small { font-size: 9px; margin-top: 4px; color: #ab927b; }
.input-source:hover { background: #fff3e3; border-color: #e1b38c; transform: translateY(-1px); }
.input-source[aria-pressed="true"] { background: #fff0da; border-color: #df9e67; color: #ce743b; box-shadow: inset 0 -3px #efc99e; }
.source-flow { margin: 12px 0; color: #ac815f; font-size: 10px; }
.source-flow span { color: #d6b392; margin: 0 8px; }
.source-format-hint { color: #ad9680; font-size: 9px; margin: 10px 0 17px; line-height: 1.8; }
.source-service-note { background: #fff1dd; border-left: 2px solid #e5b17c; padding: 9px 10px; color: #ad794c; font-size: 10px; line-height: 1.8; margin: 10px 0; }
.upload-notice[data-error="true"] { color: #ab4c2a; }
.studio-page #submit-btn:disabled { cursor: not-allowed; }
.home-intake {
  padding: 15px;
  max-width: 420px;
  background-color: #fffaf1;
}
.home-intake.is-over { background-color: #fff0dc; }
.home-intake .upload-formats { margin-top: 12px; }
.hero-copy { padding-top: 30px; padding-bottom: 36px; }
.studio-page .panel { min-height: 0; }
.stage { border: 2px solid #ecd6bb; border-radius: 5px; }
.tool-dialog { max-width: calc(100vw - 24px); }

/* Keep all workbench destinations available on narrow screens. */
@media (max-width: 700px) {
  .site-header { height: auto; min-height: 74px; flex-wrap: wrap; padding-top: 12px; gap: 0 15px; }
  .site-account { margin-left: auto; }
  .site-nav { display: flex; order: 3; width: 100%; justify-content: space-between; height: 45px; gap: 12px; margin-top: 8px; }
  .site-nav a { font-size: 11px; }
  .brand-logo { width: 86px; height: 58px; }
}

/* One clear file receipt, shared by the landing page and the workbench. */
.file-selection {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
}
.upload-selected.file-selection {
  padding: 14px 12px;
  margin: 0 0 14px;
  border: 2px solid #dfb58b;
  border-radius: 4px;
  background: #fff1da;
  box-shadow: 0 3px 0 #ead1af;
}
.file-kind-tile, .upload-selected.file-selection > .file-kind-tile {
  flex: 0 0 47px;
  width: 47px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid #d19b6d;
  border-radius: 3px;
  background: #f8d3a3;
  box-shadow: inset 0 3px 0 #ffeacf, 3px 3px 0 #e6bc8e;
  font: 600 11px var(--font-display);
  color: #99592f;
  overflow: visible;
}
.file-selection img {
  flex: 0 0 51px;
  width: 51px;
  height: 54px;
  border: 2px solid #dbb88e;
  border-radius: 3px;
  object-fit: cover;
}
.file-selection-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}
.file-ready-label { color: #877142; font-size: 10px; font-weight: 600; }
.file-selection-copy strong {
  font-size: 15px;
  font-weight: 700;
  color: #704421;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.file-selection-copy small { color: #a07853; font-size: 10px; }
.file-change-hint { color: #b37847; font-size: 9px; margin-top: 3px; }
.upload-selected.file-selection > button {
  flex: 0 0 26px;
  align-self: flex-start;
  border: 1px solid #e4c3a0;
  border-radius: 3px;
  background: #fffaf2;
  color: #b28661;
}
.drop.has-file > .drop__icon,
.drop.has-file > .drop__title,
.drop.has-file > .drop__hint,
.drop.has-file > .drop__file { display: none; }
.drop.has-file {
  align-items: stretch;
  padding: 15px 11px;
  min-height: 133px;
  background: #fff0d8;
  border: 3px solid #dfb084;
  border-radius: 4px;
  box-shadow: inset 0 3px 0 #fffaf0, 0 3px 0 #ead2b3;
}
.studio-file-selection { gap: 11px; }
.studio-file-selection .file-selection-copy strong { font-size: 14px; }
.file-clear-button {
  border: 0;
  border-bottom: 1px dashed #d4b28e;
  background: none;
  color: #a07d5c;
  padding: 0 0 2px;
  margin: 11px 0 0;
  font-size: 10px;
}

/* Keep naming and both export formats together under the book. */
.guide-dialog-foot { gap: 9px; padding: 12px 18px 14px; }
.guide-footer-top, .guide-export-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.guide-footer-top > a { font-size: 10px; color: #a77245; }
.guide-filename-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #98714e;
  min-width: 0;
}
.guide-filename-label input {
  width: 100%;
  min-width: 0;
  flex: 1;
  padding: 9px 11px;
  border: 2px solid #e5c9a7;
  border-radius: 4px;
  background: #fffefa;
  color: #69462c;
  font-size: 12px;
}
.guide-downloads { flex-shrink: 0; }
.guide-downloads a[aria-disabled="true"] { opacity: .5; cursor: progress; box-shadow: none; }
#guide-filename-hint.is-error { color: #b6532b; }
.guide-downloads .button { min-width: 116px; border-radius: 5px; }
.guide-dialog-foot > small { font-size: 9px; color: #ac9178; }
.guide-paper-area > img { height: calc(89dvh - 305px); }

@media (max-width: 1100px) {
  .panel, .tool-dialog { border-width: 7px; }
  .guide-export-row { gap: 12px; }
  .guide-filename-label { gap: 8px; }
}
@media (max-width: 700px) {
  .home-intake { padding: 11px; border-width: 7px; }
  .panel, .tool-dialog, .final-invitation { border-width: 6px; }
  .tool-dialog { max-width: calc(100vw - 12px); border-radius: 0; }
  .guide-dialog-foot { padding: 10px; }
  .guide-footer-top { flex-wrap: wrap; gap: 8px; }
  .guide-footer-top > a { margin-left: auto; }
  .guide-export-row { align-items: stretch; flex-direction: column; gap: 9px; }
  .guide-filename-label { font-size: 10px; }
  .guide-filename-label input { font-size: 11px; padding: 7px; }
  .guide-downloads { width: 100%; }
  .guide-downloads .button { flex: 1; }
  .guide-paper-area > img { height: calc(95dvh - 390px); min-height: 120px; }
  .file-selection-copy strong { font-size: 13px; }
}