/* Visual Note renderer and editor styles. */
@import url('./blocks.generated.css');
@import url('./themes/doodle/style.css');

.dipinio-note-host {
  width: min(100%, 950px);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.note-edit-canvas {
  width: min(100%, 950px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.note-page-meta { margin: 0 0 10px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: 1px; }
.note-edit-canvas .edit-note-meta { margin-bottom: 14px; }
.note-edit-canvas > .detail-tags,.note-edit-canvas > .editable-note-tags { margin-top: 24px; }

.note-version-history { display: grid; gap: 10px; margin: 24px 0; padding: 16px; background: rgba(243,239,229,.62); border: 1px solid var(--line); border-radius: 14px 9px 16px 10px; }
.version-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.version-history-head h2 { margin: 0; font: 900 20px/1.2 "IRANYekanWeb",system-ui,sans-serif; }
.version-history-head span { color: var(--muted); font: 600 9px var(--mono); }
.note-version-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px 7px 12px 8px; cursor: pointer; text-align: left; transition: background .15s ease,border-color .15s ease,transform .15s ease; }
.note-version-row:hover { border-color: #76519d; transform: translateY(-1px); }
.note-version-row.active { background: #f1eafa; border-color: #9f82bd; }
.note-version-row > span { display: grid; gap: 3px; min-width: 0; }
.note-version-row > span:last-child { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.note-version-row b { font-size: 11px; }
.note-version-row small { color: var(--muted); font: 500 9px var(--mono); }
@media(max-width:520px){.note-version-row{align-items:flex-start;flex-direction:column}.note-version-row>span:last-child{width:100%}}
.dn-page [contenteditable="true"]:focus { outline: 2px dashed rgba(32,48,47,.45); outline-offset: 3px; }
.dn-generation-meta { direction: ltr; unicode-bidi: isolate; }
.dn-block { text-align: start; }
.dn-block[dir="rtl"] .dn-box-label,.dn-block[dir="rtl"] .dn-quiz-label,.dn-block[dir="rtl"] .dn-true-false-label { left: auto; right: 16px; }
.dn-block[dir="rtl"] .dn-bullets li,.dn-block[dir="rtl"] .dn-box-bullets li { padding-left: 0; padding-right: 26px; }
.dn-block[dir="rtl"] .dn-bullets li::before,.dn-block[dir="rtl"] .dn-box-bullets li::before { left: auto; right: 4px; }
.dn-block[dir="rtl"] .dn-list-arrow li::before { content: '←'; }
.dn-block[dir="rtl"] .dn-quiz-options { padding-left: 0; padding-right: 30px; }
.dn-block .dn-table th,.dn-block .dn-table td { text-align: start; }
.dn-block[dir="rtl"] .dn-sticky { border-left-width: 0; border-right-width: 6px; border-right-style: solid; padding-left: 18px; padding-right: 20px; }
.dn-block[dir="rtl"] .dn-sticky .dn-pin { right: auto; left: 12px; }
.note-edit-canvas > #note-title,.note-edit-canvas > #note-body { display: none; }

/* Dipinio-style note editing workspace and property inspector. */
.note-editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 950px) minmax(310px, 350px);
  align-items: start;
  gap: 18px;
  width: min(calc(100vw - 48px), 1320px);
  margin: 32px 50%;
  transform: translateX(-50%);
}
.note-editor-preview { min-width: 0; }
.note-editor-preview .dn-page { max-width: none; padding: 45px clamp(20px,4vw,54px) 56px; }
.note-property-sidebar {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 9px;
  max-height: calc(100vh - 112px);
  padding: 14px;
  overflow-y: auto;
  color: var(--ink);
  background: rgba(243,239,229,.95);
  border: 1px solid var(--line);
  border-radius: 13px 9px 15px 10px;
  box-shadow: 4px 5px 0 rgba(32,48,47,.08);
  font-family: "IRANYekanWeb",system-ui, sans-serif;
}
#note-property-inspector { display: grid; gap: 9px; }
.property-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; min-height: 34px; padding: 7px 12px; color: #2469a9; background: var(--blue-soft); border: 1px solid var(--line); border-radius: 10px 7px 11px 8px; box-shadow: 2px 2px 0 rgba(32,48,47,.06); font: 700 11px/1.5 var(--sans); letter-spacing: .2px; }
.property-breadcrumb button { min-width: 0; max-width: 100%; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 3px; cursor: pointer; font: inherit; text-decoration: underline; text-align: start; overflow-wrap: anywhere; }
.property-breadcrumb button:hover { color: var(--ink); }
.property-breadcrumb button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.property-breadcrumb > span { color: var(--muted); font-size: 14px; }
.property-breadcrumb b { min-width: 0; color: var(--muted); font: inherit; overflow-wrap: anywhere; }
.property-heading { display: flex; align-items: center; min-height: 26px; padding-bottom: 6px; border-bottom: 1px solid #d8d1c4; }
.property-heading h2,.section-property-list h3 { margin: 0; font: 800 16px/1.2 "IRANYekanWeb",system-ui,sans-serif; letter-spacing: 0; }
.property-field { display: grid; gap: 6px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .4px; }
.property-field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.property-field input,.property-field select,.property-field textarea,.property-item-control,.block-add-row select { width: 100%; min-width: 0; padding: 11px 12px; color: var(--ink); background: #fff; border: 1px solid #c8c5ba; border-radius: 8px 6px 9px 7px; font: 600 13px/1.5 var(--sans); letter-spacing: 0; }
.property-field input:focus,.property-field select:focus,.property-field textarea:focus,.property-item-control:focus,.block-add-row select:focus { outline: 2px solid rgba(72,149,239,.28); outline-offset: 1px; border-color: var(--blue); }
.property-field textarea,textarea.property-item-control { min-height: 84px; resize: vertical; }
.property-group,.property-collection { display: grid; gap: 10px; padding: 10px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.property-group > header,.property-collection > header,.section-property-list > header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.property-group > header,.property-collection > header { min-width: 0; padding: 8px 10px; color: var(--ink); background: var(--blue-soft); border: 1px solid var(--line); border-radius: 8px 6px 9px 7px; }
.property-group > header b,.property-collection > header b { min-width: 0; font: 800 13px/1.4 var(--sans); overflow-wrap: anywhere; }
.property-disclosure { display: block; padding: 8px; background: rgba(255,255,255,.52); border: 1px solid #d9d2c4; border-radius: 9px; }
.property-disclosure > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; }
.property-disclosure > summary::-webkit-details-marker { display: none; }
.property-disclosure > summary::before { content: '›'; color: #76519d; font-size: 15px; font-weight: 900; transition: transform .14s ease; }
.property-disclosure[open] > summary::before { transform: rotate(90deg); }
.property-disclosure > summary b { margin-right: auto; font-size: 10px; }
.readonly-badge { color: #7a8582; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.property-group-body { display: grid; gap: 7px; padding-top: 8px; }
.page-tags-setting { padding-top: 9px; }
.page-tags-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.page-tag-badge,.page-tag-add { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 4px 8px 4px 12px; color: #5d4279; background: var(--lilac); border: 1px solid #ded1eb; border-radius: 99px; font: 800 12px/1.4 var(--sans); }
.page-tag-badge > span { min-width: 0; overflow-wrap: anywhere; }
.page-tag-badge button,.page-tag-add button { display: grid; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; place-items: center; color: inherit; background: transparent; border: 0; border-radius: 50%; font: 700 18px/1 var(--sans); cursor: pointer; }
.page-tag-badge button:hover,.page-tag-add button:hover { background: rgba(32,48,47,.08); }
.page-tag-badge button:focus-visible,.page-tag-add button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.page-tag-add { justify-content: center; min-width: 64px; padding: 4px 8px; color: #315f59; background: var(--mint); border-color: #aacdbd; }
.page-tag-add input { width: 100px; min-width: 0; padding: 2px 4px; color: var(--ink); background: transparent; border: 0; border-radius: 4px; font: 600 12px/1.4 var(--sans); }
.page-tag-add input[hidden] { display: none; }
.page-tag-add:has(button:disabled) { opacity: .45; }
.page-tag-add button:disabled { cursor: not-allowed; }
.property-readonly { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px 6px 9px 7px; }
.property-readonly span { flex: 0 0 auto; font: 500 10px var(--mono); letter-spacing: .4px; }
.property-readonly b { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font: 800 13px/1.5 var(--sans); text-align: right; }
.section-property-list { display: grid; gap: 7px; margin-top: 2px; padding: 8px; background: rgba(255,255,255,.52); border: 1px solid #d9d2c4; border-radius: 9px; }
.property-block-list,.property-section-list,.property-items { display: grid; gap: 5px; }
.section-property-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; }
.section-property-row > button:first-child { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 1px 6px; min-width: 0; padding: 6px; text-align: left; background: #fff; border: 1px solid #d5cec1; border-radius: 7px; cursor: grab; }
.section-property-row > button:first-child:active { cursor: grabbing; }
.editor-sort-ghost { opacity: .35; }
.editor-sort-chosen > button:first-child { border-color: #76519d; box-shadow: 2px 2px 0 rgba(118,81,157,.18); }
.section-property-row > button:first-child > span { grid-row: 1/3; align-self: center; color: #79569e; font-size: 9px; font-weight: 900; }
.section-property-row b,.section-property-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-property-row b { font-size: 10px; }
.section-property-row small { color: #7a8582; font-size: 8px; }
.property-remove { display: grid; width: 20px; height: 20px; padding: 0; place-items: center; color: #98535a; background: #fff4f3; border: 1px solid #edcfcc; border-radius: 5px; cursor: pointer; font: 800 12px/1 "IRANYekanWeb",system-ui,sans-serif; }
.property-item { display: grid; gap: 6px; padding: 6px 0; border-bottom: 1px dashed #d8d1c4; }
.property-item:last-child { border-bottom: 0; }
.property-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #79827f; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.property-item-head button { padding: 4px 6px; color: #98535a; background: transparent; border: 0; cursor: pointer; font: 800 8px/1 "IRANYekanWeb",system-ui,sans-serif; }
.property-add-button { padding: 10px 15px; color: var(--ink); background: var(--blue-soft); border: 1.5px solid var(--ink); border-radius: 8px 6px 9px 7px; box-shadow: 2px 3px 0 rgba(32,48,47,.12); cursor: pointer; font: 800 12px/1.5 var(--sans); }
.property-add-button:hover { background: var(--surface); }
.property-add-button:active { transform: translate(1px,1px); box-shadow: 1px 2px 0 rgba(32,48,47,.12); }
.property-add-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.property-add-button:disabled { opacity: .45; cursor: not-allowed; transform: none; background: var(--blue-soft); }
.section-property-list > header button,.block-add-row button { padding: 6px 8px; color: #fff; background: #315f59; border: 1px solid #254b46; border-radius: 6px; cursor: pointer; font: 800 8px/1 "IRANYekanWeb",system-ui,sans-serif; }
.block-add-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; padding-top: 3px; }
.property-danger { justify-self: start; padding: 6px 8px; color: #923f48; background: #fff2f1; border: 1px solid #e4c4c1; border-radius: 6px; cursor: pointer; font: 800 8px/1 "IRANYekanWeb",system-ui,sans-serif; }
.note-property-sidebar > footer { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.note-property-sidebar > footer span { color: var(--muted); font-size: 9px; }
.note-property-sidebar > footer .primary { width: 100%; }
.presentation-edit-block { position: relative; margin: 3px 0; border-radius: 10px; cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .14s ease; }
.presentation-edit-block:hover { outline-color: rgba(111,74,160,.45); }
.presentation-edit-block.selected { outline-color: rgba(111,74,160,.8); }
.presentation-edit-section { border-radius: 7px; cursor: pointer; outline: 2px solid transparent; outline-offset: 4px; }
.presentation-edit-section:hover { outline-color: rgba(49,95,89,.45); }
.presentation-edit-section.selected { outline-color: rgba(49,95,89,.8); }

@media (max-width: 950px) {
  .note-editor-workspace { grid-template-columns: 1fr; width: min(calc(100vw - 32px),950px); }
  .note-property-sidebar { position: static; grid-row: 1; max-height: none; }
}

.note-editor-save-buttons{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:8px}.note-editor-save-buttons>button{min-width:0;width:100%;padding:11px 8px;font:800 13px var(--sans);border:2px solid var(--ink);border-radius:8px 6px 9px 7px;cursor:pointer}#note-cancel{background:var(--surface);color:var(--ink)}.note-editor-save-buttons>button:disabled{opacity:.45;cursor:not-allowed}

/* Recall masking leaves original glyph metrics, spaces and line breaks in flow. */
.note-recall-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 16px;font-family:var(--sans,system-ui)}
.note-recall-controls button{padding:7px 11px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface);font:700 12px var(--sans,system-ui);cursor:pointer}
.note-recall-controls [aria-pressed="true"]{color:var(--surface);background:var(--ink);border-color:var(--ink)}
.note-recall-controls small{color:var(--muted);font-size:11px}
.note-recall-controls button:disabled{opacity:.45;cursor:not-allowed}
.note-version-controls{display:flex;gap:6px;overflow-x:auto;padding:3px 3px 6px;margin:0 0 8px;font-family:var(--sans,system-ui)}
.note-version-controls button{flex:0 0 auto;min-width:28px;height:28px;padding:0 5px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font:800 10px var(--sans,system-ui);box-shadow:1px 2px 0 rgba(32,48,47,.06);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.note-version-controls button:hover{background:var(--blue-soft,#e5f1ff);border-color:#729cc1;color:#2469a9}
.note-version-controls button.active{background:var(--blue-soft,#e5f1ff);color:#2469a9;border-color:#729cc1;box-shadow:1px 2px 0 rgba(32,48,47,.08)}
.note-version-controls button:focus-visible{outline:2px solid #76519d;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.note-version-controls button{transition:none}}
.note-version-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding-right:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px 7px 12px 8px;box-shadow:1px 2px 0 rgba(32,48,47,.06);transition:background .15s ease,border-color .15s ease}
.note-version-entry:has(.note-version-row.active){background:#f1eafa;border-color:#9f82bd}
.note-version-entry:has(.note-version-row:hover){border-color:#76519d}
.note-version-entry .note-version-row{min-width:0;border:0;border-radius:10px 0 0 8px;background:transparent;transform:none}
.note-version-entry .note-version-row:focus-visible{outline:2px solid #76519d;outline-offset:-3px}
.note-version-sharing{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:8px;width:158px;min-height:44px;padding:6px 0 6px 12px;border-left:1px solid var(--line);font:800 10px var(--sans,system-ui);color:var(--muted);cursor:pointer}
.note-version-sharing input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note-version-switch{position:relative;display:block;width:42px;height:24px;border:0;border-radius:14px;background:#eee9df;box-shadow:inset 0 1px 2px rgba(32,48,47,.08);transition:background .15s ease}
.note-version-switch::before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;background:var(--surface);box-shadow:1px 1px 0 rgba(32,48,47,.16);transition:transform .15s ease}
.note-version-sharing input:checked~.note-version-switch{background:var(--blue-soft,#e5f1ff)}
.note-version-sharing input:checked~.note-version-switch::before{transform:translateX(18px);background:#2469a9;border-color:#2469a9}
.note-version-sharing input:checked~.note-version-share-label{color:#2469a9}
.note-version-sharing input:focus-visible~.note-version-switch{outline:2px solid #76519d;outline-offset:3px}
.note-version-sharing:has(input:disabled){opacity:.5;cursor:not-allowed}
.note-version-sharing .version-sharing-error{grid-column:1/-1;font-weight:500;overflow-wrap:anywhere}
.version-sharing-error:empty{display:none}
@media(max-width:520px){.note-version-entry{gap:4px;padding-right:10px}.note-version-sharing{width:130px;padding-left:8px;gap:6px}.note-version-entry .note-version-row{padding:10px}}
@media(prefers-reduced-motion:reduce){.note-version-switch,.note-version-switch::before{transition:none}}
.version-sharing-help{font:400 12px var(--sans,system-ui);color:var(--muted);margin-bottom:14px}
.version-sharing-error{color:#b42318}
@media print{.note-version-controls{display:none!important}}
.note-recall-item{cursor:pointer;border-radius:2px}
.note-recall-item:focus-visible{outline:2px dashed var(--note-recall-ink);outline-offset:3px}
.note-recall-item.is-hidden .note-recall-word{color:transparent;text-shadow:none;background-image:repeating-linear-gradient(to right,var(--note-recall-ink) 0 5px,transparent 5px 8px);background-position:left bottom;background-size:100% 1.5px;background-repeat:no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone;user-select:none}
.note-recall-answer-hidden .dn-quiz-options li.correct{background:transparent;font-weight:inherit}
.note-recall-answer-hidden .dn-true-false-options span.correct{background:transparent;border-color:rgba(0,0,0,.15)}

.note-recall-item.is-hidden .note-recall-glyphs{visibility:hidden}

/* Fullscreen displays the note and its two reading controls, without app chrome. */
body.note-fullscreen-open{overflow:hidden}
.note-reading-view.note-fullscreen{position:fixed;inset:0;z-index:10000;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 clamp(12px,3vw,36px) 28px;overflow:auto;overscroll-behavior:contain;background:var(--note-page-bg,#fffef7);color:var(--note-text-color,#333)}
.note-reading-view:fullscreen{max-width:none}
.note-fullscreen>.note-recall-controls{position:sticky;top:0;z-index:2;justify-content:flex-start;max-width:var(--note-reading-width,950px);margin:0 auto;padding:10px 0;background:var(--note-page-bg,#fffef7)}
.note-fullscreen>.note-recall-controls small{display:none}
.note-fullscreen>.note-version-controls{max-width:var(--note-reading-width,950px);margin:0 auto 8px;box-sizing:border-box}
.note-fullscreen #note-rendered-content{max-width:var(--note-reading-width,950px);margin:0 auto}
.note-fullscreen .dn-generation-meta{display:none}

.note-print-document { display: none; }
@media print {
  @page { margin: 15mm; }
  body.note-printing { min-width: 0; margin: 0; background: #fff; overflow: visible; }
  body.note-printing > :not(.note-print-document) { display: none !important; }
  body.note-printing > .note-print-document { display: block !important; color: #333; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .note-print-document .dn-page.dn-theme-doodle { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: #fff; box-shadow: none; }
  .note-print-document .dn-content { position: static; }
  .note-print-document .dn-title { color: #333; background: none; -webkit-text-fill-color: #333; break-after: avoid; }
  .note-print-document .dn-title-bar { break-after: avoid; }
  .note-print-document .dn-generation-meta,.note-print-document .dn-divider { display: none; }
  .note-print-document .dn-section { break-inside: avoid; page-break-inside: avoid; }
  .note-print-document .dn-section-hdr { margin-top: 18px; break-after: avoid; page-break-after: avoid; }
  .note-print-document .dn-block { break-inside: avoid; page-break-inside: avoid; }
  .note-print-document .dn-block:has(.dn-table) { break-inside: auto; page-break-inside: auto; }
  .note-print-document .note-table-scroll { overflow: visible; }
  .note-print-document .dn-table { overflow: visible; }
  .note-print-document .dn-table thead { display: table-header-group; }
  .note-print-document .dn-table tr { break-inside: avoid; page-break-inside: avoid; }
  .note-print-document p,.note-print-document li { orphans: 3; widows: 3; }
  .note-print-document .dn-footer { break-inside: avoid; }
  /* Preserve each item's recall state; borders print even with backgrounds off. */
  .note-print-document .note-recall-item.is-hidden .note-recall-word { background: none; border-bottom: 1.5px dashed var(--note-text-color,#333); }
}

.note-version-controls button.author-version{background:#dcecff;color:#19598e;border-color:#6999c3}
.note-version-controls button.user-version{background:#ede2fa;color:#67418b;border-color:#a082bf}
.note-version-controls button.author-version.unpurchased{background:transparent;color:#19598e;border:2px dashed #6999c3;box-shadow:none}
.note-version-controls button.active{outline:2px solid currentColor;outline-offset:2px}
.note-version-controls button:focus-visible{outline:3px solid #b85a27;outline-offset:3px}