/* The dialog template, one set of classes for every confirm on the web (issue
   #1033): the leave dialog (#exit-confirm in world/index.html), the delete
   dialog (<account-delete-modal>), the settings questions (<settings-panel>)
   and the first-meeting panel's answer row (<first-meeting-panel>).

   The surface rule Chanwoo approved on 2026-10-20 ("ok do this"): every
   dialog the panels' width (12 px in from the shell's sides, never wider than
   the phone), a dark title bar with the title centred, the body 12 px in, and
   two equal buttons, the way back at the left and the action at the right.
   The row is #1044's: side by side, half each; a label may take a second line
   between its words, and when it would need a third, or a word would not fit
   in its half, the two stand one under the other, the whole width each.

   Markup:
     <div class="paper-dialog" role="dialog" aria-modal="true" aria-labelledby="x-title" hidden>
       <div class="paper-dialog__scrim" data-action="cancel"></div>
       <div class="paper-dialog__panel">
         <div class="paper-dialog__title" id="x-title">TITLE?</div>
         <div class="paper-dialog__body"><p class="paper-dialog__text">Words.</p></div>   (optional)
         <div class="paper-dialog__actions">
           <button class="paper-dialog__button paper-dialog__button--back">BACK</button>
           <button class="paper-dialog__button paper-dialog__button--go">GO</button>   (--danger: it cannot be undone)

   The page links this file before world/style.css, which keeps only
   #exit-confirm's own place and scrim. A component with a shadow root adopts
   it through paper-dialog.js (one stylesheet, parsed once). The phone's
   PaperDialog (mobile/src/components/PaperDialog.tsx) draws the same; this
   file is snapshotted into mobile/src/pixel/generated/webStyles.txt, so a
   change here shows there as drift. */

.paper-dialog {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paper-dialog[hidden] { display: none; }
.paper-dialog__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--modal-scrim);
}
.paper-dialog__panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(min(100%, var(--phone-w, 430px)) - 24px);
  display: flex;
  flex-direction: column;
  background: var(--loka-cream);
  border: 3px solid var(--loka-rule-dark);
  box-shadow: 4px 4px 0 var(--loka-rule-dark);
}
.paper-dialog__title {
  box-sizing: border-box;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--loka-rule-dark);
  color: var(--loka-cream);
  font-family: var(--loka-font-pixel);
  font-size: var(--loka-text-pixel-lg);
  letter-spacing: var(--loka-track-pixel-lg);
  line-height: 18px;
  text-transform: uppercase;
}
.paper-dialog__body {
  padding: 12px;
  border-bottom: 1px solid var(--loka-rule-dark);
}
/* [UI-PRIN-25] the dialog's question is the app telling you: the serif, never a coding face (#1102) */
.paper-dialog__text {
  margin: 0;
  font-family: var(--loka-font-serif);
  font-style: italic;
  font-size: var(--loka-text-sm);
  line-height: 1.4;
  color: var(--loka-ink);
}
/* [ONBOARD-115] amended 2026-10-26 (issue #1432, Chanwoo's look B): a dialog may carry one picture in its body,
   at the top, with its words beside it and a dashed rule under the row (the level offer's new road). The picture is
   round, 68px, a scene's picture cropped to its middle, a dark edge and a gold ring. The phone's DialogLead
   (mobile/src/components/PaperDialog.tsx) draws the same. */
.paper-dialog__lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--loka-shadow);
}
.paper-dialog__picture {
  flex: none;
  box-sizing: border-box;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid var(--loka-rule-dark);
  box-shadow: 0 0 0 2px var(--loka-gold);
  background-color: var(--loka-rule-dark);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 62%;
}
.paper-dialog__lead-words {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* the level code: small pixel type, terracotta text on cream ([UI-PRIN-45]) */
.paper-dialog__lead-kicker {
  font-family: var(--loka-font-pixel);
  font-size: var(--loka-text-pixel-sm);
  letter-spacing: 0.08em;
  line-height: 12px;
  color: var(--loka-terracotta-text);
}
/* the name: the serif in italic, the size the Today page's road name has */
.paper-dialog__lead-name {
  font-family: var(--loka-font-serif);
  font-style: italic;
  font-size: var(--loka-text-lg);
  line-height: 25px;
  color: var(--loka-ink);
}
.paper-dialog__lead-note {
  font-family: var(--loka-font-mono);
  font-size: var(--loka-text-xs);
  line-height: 15px;
  color: var(--loka-ink-soft);
}
.paper-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}
.paper-dialog__button {
  flex: 1 0 calc(50% - 4px);
  min-width: min-content;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 2px solid var(--loka-rule-dark);
  box-shadow: 3px 3px 0 var(--loka-shadow-hard);
  font-family: var(--loka-font-pixel);
  font-size: var(--loka-text-pixel-md);
  letter-spacing: 0.08em;
  line-height: 16px;
  text-transform: uppercase;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  cursor: pointer;
  touch-action: manipulation;
}
.paper-dialog__button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.paper-dialog__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 3px 3px 0 var(--loka-shadow-hard);
}
.paper-dialog__button--back {
  background: var(--loka-cream);
  color: var(--loka-ink);
}
.paper-dialog__button--go {
  background: var(--loka-terracotta);
  color: var(--loka-ink);   /* #957: ink on terracotta (5.1:1); cream was 2.8:1 */
}
.paper-dialog__button--danger {
  background: var(--loka-ember);
  color: var(--loka-cream);
}
/* A label would need a third line in its half, or a word would not fit in it:
   the two stand one under the other, the whole width each, in the same order.
   paper-dialog.js measures the row and sets the class (the phone's PaperRow
   decides the same from its fitsSideBySide). */
.paper-dialog__actions--stacked .paper-dialog__button {
  flex-basis: 100%;
}
html[lang="ko"] .paper-dialog__title,
html[lang="ko"] .paper-dialog__button {
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: 0;
  font-size: 13px;
}
html[lang="zh"] .paper-dialog__title,
html[lang="zh"] .paper-dialog__button {
  font-family: 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  letter-spacing: 0;
  font-size: 13px;
}
:host-context(html[lang="ko"]) .paper-dialog__title,
:host-context(html[lang="ko"]) .paper-dialog__button {
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: 0;
  font-size: 13px;
}
:host-context(html[lang="zh"]) .paper-dialog__title,
:host-context(html[lang="zh"]) .paper-dialog__button {
  font-family: 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  letter-spacing: 0;
  font-size: 13px;
}
/* The serif has no Hangul or Han: a Korean or Chinese question takes its own face, upright, rather
   than a fallback with a slant faked onto it (as style.css does for the hint bubbles; #1102). */
html[lang="ko"] .paper-dialog__text,
:host-context(html[lang="ko"]) .paper-dialog__text { font-family: 'Noto Sans KR', sans-serif; font-style: normal; }
html[lang="zh"] .paper-dialog__text,
:host-context(html[lang="zh"]) .paper-dialog__text { font-family: 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif; font-style: normal; }