/* Nico guide only. Creation, priority, consent and authentication dialogs keep their own layouts. */
body #field-guide[open] {
  display:flex;
  flex-direction:column;
  width:min(480px,calc(100% - 24px));
  height:min(620px,calc(var(--field-viewport-height,100dvh) - 24px));
  max-height:calc(var(--field-viewport-height,100dvh) - 16px);
  padding:0;
  overflow:hidden;
  border:1px solid var(--line,#A7AFB9);
  border-radius:16px;
  background:var(--surface,#fff);
  color:var(--ink,#111);
}
#field-guide .guide-header { flex:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,40%); column-gap:8px; padding:12px 16px 10px; border-bottom:1px solid var(--line,#A7AFB9); }
#field-guide .guide-identity { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; column-gap:8px; min-width:0; }
#field-guide .guide-identity > div { display:contents; }
#field-guide .guide-identity strong { font-size:18px; line-height:1.2; }
#field-guide .guide-identity p { grid-column:1/-1; margin:2px 0 0; font-size:14px; line-height:1.3; overflow-wrap:break-word; }
#field-guide .guide-nico { width:36px; height:36px; flex:none; }
#field-guide #guide-skip { align-self:start; min-width:0; min-height:44px; padding:6px 8px; font-size:14px; background:none; border:0; color:var(--ink,#111); text-align:right; white-space:nowrap; }
#field-guide .guide-progress { margin:10px 0 4px; grid-column:1/-1; font-size:14px; line-height:1.2; }
#field-guide .guide-progress-track { grid-column:1/-1; height:3px; background:var(--line,#A7AFB9); border-radius:2px; overflow:hidden; }
#field-guide .guide-progress-track i { display:block; height:100%; background:var(--red,#C41E3A); }
#field-guide .guide-body { flex:1; min-height:0; padding:18px 16px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scroll-padding-block:12px; }
#field-guide #guide-title { margin:0 0 14px; font-size:24px; line-height:1.2; overflow-wrap:anywhere; }
#field-guide .guide-explanation { margin:0 0 16px; font-size:16px; line-height:1.5; }
#field-guide .guide-preview { padding:0; margin:0 0 16px; border-radius:0; background:none; font-size:14px; line-height:1.45; }
#field-guide .guide-preview strong { font-weight:600; }
#field-guide .guide-body details { border-top:1px solid var(--line,#A7AFB9); padding:4px 0 0; }
#field-guide .guide-body summary { min-height:44px; padding:10px 0; box-sizing:border-box; font-weight:600; line-height:1.4; cursor:pointer; }
#field-guide .guide-screen { padding:0; margin:12px 0; background:none; border:0; border-radius:0; }
#field-guide .guide-screen h3 { margin:12px 0; font-size:18px; }
#field-guide .guide-screen > p:first-child { margin:0; font-size:14px; }
#field-guide .guide-screen .guide-actions { margin-top:12px; }
#field-guide .guide-screen textarea { min-height:88px; }
#field-guide .guide-footer { flex:none; margin:0; padding:12px 16px; border-top:1px solid var(--line,#A7AFB9); background:var(--surface,#fff); display:flex; flex-wrap:wrap; align-items:stretch; gap:8px 12px; }
#field-guide .guide-footer button { min-height:48px; min-width:min-content; padding:10px 16px; white-space:normal; }
#field-guide #guide-back { flex:0 1 auto; border:0; background:none; color:var(--ink,#111); }
#field-guide :is(#guide-next,#guide-replay) { flex:1; background:var(--red,#C41E3A); border-color:var(--red,#C41E3A); color:#fff; }
#field-guide :is(#guide-next,#guide-back,#guide-skip) { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
#field-guide #guide-save-status:empty { display:none; }
#field-guide #guide-save-status:not(:empty) { margin:0 0 16px; padding:12px; border:2px solid var(--red,#C41E3A); border-radius:8px; color:var(--ink,#111); line-height:1.5; }
#field-guide :is(button,summary,textarea):focus-visible { outline:3px solid var(--red,#C41E3A); outline-offset:2px; }
@media(max-height:480px) {
  #field-guide .guide-header { padding-block:8px; }
  #field-guide .guide-progress { margin-top:4px; }
  #field-guide .guide-body { padding-block:12px; }
  #field-guide .guide-footer { padding-block:8px; }
}