/* The preview's editing tools and sign-in page. Colors match the mockup's styles.css. */
body:has(.kfp-bar) { padding-bottom: 6.5rem; }

.kfp-editable { outline: 1px dashed transparent; outline-offset: 4px; border-radius: 2px; transition: outline-color 0.15s; }
.kfp-editable:hover { outline-color: #8aacff; cursor: text; }
.kfp-editable:focus { outline: 2px solid #003db1; background: rgba(238, 242, 250, 0.6); }
.band .kfp-editable:focus { background: transparent; outline-color: #fff; }

.kfp-photo { position: relative; display: block; }
.kfp-photo-button { position: absolute; top: 0.75rem; right: 0.75rem; font: 600 0.9rem/1 "Source Serif 4", Georgia, serif; background: #fff; color: #003db1; border: 1px solid #003db1; border-radius: 3px; padding: 0.5rem 0.75rem; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 39, 71, 0.2); }
.kfp-photo-button:hover { background: #eef2fa; }

/* Comments on sections */
.kfp-section { position: relative; }
.band.kfp-section .wrap { padding-top: 3.75rem; }
.kfp-comment-btn { position: absolute; top: 0.75rem; right: max(16px, 1.5rem); z-index: 30; font: 600 0.85rem/1 "Source Serif 4", Georgia, serif; background: #fff; color: #003db1; border: 1px solid #8aacff; border-radius: 3px; padding: 0.45rem 0.7rem; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 39, 71, 0.15); }
.kfp-comment-btn:hover, .kfp-comment-btn[aria-expanded="true"] { background: #eef2fa; }
.kfp-comment-btn.kfp-has-comments { background: #003db1; color: #fff; border-color: #003db1; }
.band .kfp-comment-btn.kfp-has-comments { background: #0f2747; border-color: #fff; }
.kfp-comment-panel { position: absolute; top: 3.1rem; right: max(16px, 1.5rem); z-index: 40; width: min(24rem, calc(100% - 32px)); background: #fff; color: #1b2230; border-radius: 6px; padding: 1rem; display: grid; gap: 0.6rem; box-shadow: 0 12px 34px rgba(15, 39, 71, 0.3); text-align: left; font: 400 0.95rem/1.45 "Source Serif 4", Georgia, serif; }
.kfp-comment-panel[hidden] { display: none; }
.kfp-comment-panel .kfp-comment-title { font-weight: 600; color: #0f2747; }
.kfp-comment-panel .kfp-comment-help, .kfp-comment-panel .kfp-comment-meta, .kfp-comment-panel .kfp-comment-msg { font-size: 0.85rem; color: #5a6475; }
.kfp-comment-msg:empty { display: none; }
.kfp-comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-height: 14rem; overflow-y: auto; }
.kfp-comment-list:empty { display: none; }
.kfp-comment-list li { background: #eef2fa; border-radius: 4px; padding: 0.55rem 0.7rem; }
.kfp-comment-panel .kfp-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; color: #1b2230; }
.kfp-comment-panel textarea { width: 100%; font: inherit; color: #1b2230; background: #fff; border: 1px solid #c9d4e6; border-radius: 3px; padding: 0.5rem 0.6rem; resize: vertical; }
.kfp-comment-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kfp-comment-panel button { font: 600 0.85rem/1.2 "Source Serif 4", Georgia, serif; border-radius: 3px; padding: 0.45rem 0.7rem; cursor: pointer; border: 1px solid #c9d4e6; background: #fff; color: #003db1; }
.kfp-comment-panel .kfp-save { background: #003db1; color: #fff; border-color: #003db1; }
.kfp-comment-panel .kfp-comment-delete { padding: 0.1rem 0.4rem; font-size: 0.8rem; }
.kfp-menu-link { display: block; padding: 0.55rem 0.95rem; border: 1px solid #c9d4e6; border-radius: 3px; color: #003db1; font-weight: 600; text-decoration: none; }

/* Comments list page */
.kfp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.kfp-list-item { border: 1px solid #c9d4e6; border-radius: 4px; padding: 0.9rem 1rem; display: grid; gap: 0.35rem; }
.kfp-list-item.is-done { opacity: 0.6; }
.kfp-list-where { font-weight: 600; }
.kfp-list-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.kfp-list-meta { font-size: 0.85rem; color: #5a6475; }
.kfp-list-item form { margin: 0; justify-self: start; }
.kfp-list-item button { font: 600 0.85rem/1.2 "Source Serif 4", Georgia, serif; border-radius: 3px; padding: 0.4rem 0.7rem; cursor: pointer; border: 1px solid #c9d4e6; background: #fff; color: #003db1; }
.kfp-tag { font-size: 0.75rem; background: #dde7ff; color: #002e86; border-radius: 3px; padding: 0.1rem 0.4rem; margin-left: 0.4rem; }

.kfp-hidden-note { background: #dde7ff; color: #002e86; text-align: center; padding: 0.6rem 1rem; font-size: 0.95rem; }
.nav small { color: #5a6475; font-size: 0.8em; }

.kfp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #0f2747; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.85rem max(16px, env(safe-area-inset-right, 0px)) calc(0.85rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font: 400 0.95rem/1.45 "Source Serif 4", Georgia, serif; box-shadow: 0 -6px 20px rgba(15, 39, 71, 0.25); }
.kfp-bar-text { max-width: 40rem; }
.kfp-status { display: block; color: #c9d4e6; min-height: 1.4em; }
.kfp-status.kfp-ok { color: #9fe0b5; }
.kfp-status.kfp-error { color: #ffb4a8; }
.kfp-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kfp-bar button, .kfp-bar summary, .kfp-bar .kfp-save, .kfp-bar button:disabled { opacity: 0.45; cursor: default; }
.kfp-more { position: relative; }
.kfp-more summary { list-style: none; }
.kfp-more summary::-webkit-details-marker { display: none; }
.kfp-menu { position: absolute; right: 0; bottom: calc(100% + 0.5rem); background: #fff; color: #1b2230; border-radius: 4px; padding: 0.9rem; min-width: 15rem; display: grid; gap: 0.5rem; box-shadow: 0 10px 30px rgba(15, 39, 71, 0.3); }
.kfp-menu form { margin: 0; display: block; }
.kfp-menu button { width: 100%; color: #003db1 !important; border-color: #c9d4e6 !important; text-align: left; }
.kfp-who { font-size: 0.85rem; color: #5a6475; overflow-wrap: anywhere; }


/* Sign-in page */
.kfp-login-page { background: #eef2fa; min-height: 100vh; display: grid; place-items: center; padding: 2rem 16px; }
.kfp-login { background: #fff; border-radius: 6px; padding: 2rem; width: min(28rem, 100%); display: grid; gap: 1rem; box-shadow: 0 10px 30px rgba(15, 39, 71, 0.12); }
.kfp-login img { width: 100%; max-width: 20rem; height: auto; }
.kfp-login h1 { font-size: 1.7rem; }
.kfp-login form { display: grid; gap: 1rem; }
.kfp-error { background: #fdeceb; color: #a3271c; border-radius: 3px; padding: 0.7rem 0.9rem; font-size: 0.95rem; }

@media (max-width: 640px) {
  body:has(.kfp-bar) { padding-bottom: 10rem; }
  .kfp-bar-text strong + * { display: block; }
}