/* The layout of the screens that were added after style.css was fixed (alignment menu, image export, reagent links, 3D structure and conformers).
   They are classes of their own because the published page does not allow style attributes in the markup (style-src 'self', docs/chemliora-export-plan.md). */

/* the alignment of the selected structures (edit menu) */
.align-caption { font-size: 0.75rem; opacity: 0.7; padding: 2px 12px 0; }
.align-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 4px; }

/* the button of the stereo labels in the viewport buttons */
.stereo-toggle-button { font-size: 0.66rem; font-weight: 700; letter-spacing: -0.02em; }

/* the reagent search links of the name and basic information window */
.reagent-section { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.35)); }
.reagent-title { margin: 0 0 6px; font-size: 0.95rem; }
.reagent-cas-row { gap: 8px; flex-wrap: wrap; }
.reagent-cas-input { width: 9.5em; }
.reagent-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr)); gap: 8px; margin-top: 10px; }

/* the settings of the image export */
.image-export-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.image-export-radios { display: flex; gap: 16px; flex-wrap: wrap; }
.image-export-margin { width: 6em; }
.image-export-footer { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.feature-note-gap { margin-top: 12px; }

/* the validity marks (docs/chemliora-validity-plan.md): red rings on the atoms and on the rings that need a look; a solid line is an error, a dashed one is something to check */
.layout-validity-toggle[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.validity-badge { display: inline-block; min-width: 1.35em; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.7rem; line-height: 1.5; text-align: center; }
.validity-badge[hidden] { display: none; }
.validity-badge.validity-ok { background: #15803d; }
.validity-mark { fill: none; stroke: #dc2626; stroke-width: 2.2; pointer-events: stroke; }
.validity-mark.validity-check { stroke-dasharray: 4 3; }
.validity-mark.validity-ring { stroke-width: 7; stroke-opacity: 0.45; stroke-linejoin: round; }
:root[data-theme="dark"] .validity-mark { stroke: #f87171; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .validity-mark { stroke: #f87171; }
}

/* the search of the functions (docs/chemliora-command-search-plan.md) */
.command-palette-overlay { align-items: flex-start; padding-top: min(12vh, 90px); }
.command-palette-container { width: min(640px, 94vw); max-width: none; padding: 14px 16px 12px; }
.command-palette-input { box-sizing: border-box; width: 100%; padding: 10px 12px; font: inherit; font-size: 1rem; border: 1px solid var(--border-color, rgba(128, 128, 128, 0.45)); border-radius: 8px; background: transparent; color: inherit; }
.command-palette-input:focus { outline: 2px solid var(--color-accent, #4f46e5); outline-offset: 1px; }
.command-palette-count { margin: 6px 2px 4px; font-size: 0.78rem; opacity: 0.75; }
.command-palette-list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 420px); overflow-y: auto; border: 1px solid var(--border-color, rgba(128, 128, 128, 0.35)); border-radius: 8px; }
.command-palette-list:empty { display: none; }
.command-palette-option { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.22)); }
.command-palette-option:last-child { border-bottom: 0; }
.command-palette-option[aria-selected="true"] { background: rgba(79, 70, 229, 0.16); }
.command-palette-option[aria-disabled="true"] { opacity: 0.5; }
.command-palette-option .command-name { font-weight: 600; overflow-wrap: anywhere; }
.command-palette-option .command-shortcut { margin-left: 0.6em; font-size: 0.72rem; font-weight: 400; opacity: 0.7; }
.command-palette-option .command-where { font-size: 0.75rem; opacity: 0.7; text-align: right; white-space: nowrap; align-self: center; }
.command-palette-option .command-description { grid-column: 1 / -1; font-size: 0.78rem; opacity: 0.75; }
.command-palette-help { margin: 8px 2px 0; font-size: 0.75rem; opacity: 0.7; }
@media (max-width: 520px) { .command-palette-option .command-where { white-space: normal; } }

/* the menu groups (docs/chemliora-menu-plan.md) */
#structure-menu .action-menu-panel { max-height: calc(100vh - 90px); overflow-y: auto; }
/* the items are set closer together, so that the longer menu fits on one screen */
#structure-menu .menu-group .btn { padding-top: 6px; padding-bottom: 6px; }
.menu-group { display: grid; gap: 2px; }
.menu-group + .menu-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.3)); }
.menu-group-title { display: flex; align-items: center; gap: 6px; padding: 2px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; opacity: 0.72; }
.menu-group-count { min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: rgba(128, 128, 128, 0.22); text-align: center; font-weight: 700; }

/* the mass, isotope pattern and adduct window (docs/chemliora-mass-isotope-plan.md) */
.mass-isotope-container { width: min(980px, 96vw); max-width: none; max-height: 94vh; overflow-y: auto; }
.mass-isotope-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 10px; }
.mass-isotope-summary div { display: flex; gap: 8px; align-items: baseline; }
.mass-isotope-summary dt { font-size: 0.78rem; opacity: 0.7; }
.mass-isotope-summary dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mass-isotope-notes { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid #d97706; background: rgba(217, 119, 6, 0.1); font-size: 0.85rem; }
.mass-isotope-notes[hidden], #mass-isotope-body[hidden], #mass-isotope-cut[hidden] { display: none; }
.mass-isotope-section { margin-top: 14px; flex: none; }
#mass-isotope-body { flex: none; }
.mass-isotope-section h3 { margin: 0 0 6px; font-size: 0.95rem; }
.mass-isotope-section .mass-isotope-table { min-width: 0; width: 100%; }
.mass-isotope-table td, .mass-isotope-table th { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.mass-isotope-number { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .mass-isotope-section .mass-isotope-table { font-size: 0.78rem; } .mass-isotope-table td, .mass-isotope-table th { padding-left: 5px; padding-right: 5px; } }
.mass-isotope-section .ir-table-wrap { flex: none; height: auto; min-height: 0; max-height: 300px; overflow: auto; }.mass-isotope-section .ir-chart-wrap { position: static; box-shadow: none; }
.mass-isotope-table tr.mass-isotope-selected td { background: rgba(79, 70, 229, 0.16); color: inherit; }
.mass-isotope-ion { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; padding: 2px 4px; cursor: pointer; text-decoration: underline dotted; }
.mass-isotope-ion[aria-pressed="true"] { color: var(--color-accent); text-decoration: none; }
.mass-isotope-ppm { width: 5.5em; }
.mass-isotope-window-line { margin: 6px 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.mass-isotope-chart { display: block; width: 100%; height: auto; }
.mass-isotope-plot { fill: rgba(127, 127, 127, 0.06); stroke: rgba(128, 128, 128, 0.4); }
.mass-isotope-grid { stroke: rgba(128, 128, 128, 0.22); stroke-width: 1; }
.mass-isotope-tick { stroke: rgba(128, 128, 128, 0.7); stroke-width: 1; }
.mass-isotope-axis { fill: currentColor; font-size: 11px; opacity: 0.75; }
.mass-isotope-peak { stroke: #2f4aa0; stroke-width: 2.4; stroke-linecap: round; }
.mass-isotope-label { fill: currentColor; font-size: 10px; opacity: 0.85; }
:root[data-theme="dark"] .mass-isotope-peak { stroke: #93a8f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mass-isotope-peak { stroke: #93a8f0; } }
#mass-isotope-modal [hidden] { display: none !important; }

/* the stereo helpers: the section of the atom properties (docs/chemliora-stereo-assist-plan.md) */
.stereo-assist-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(128, 128, 128, 0.35); }
.stereo-assist-section[hidden] { display: none; }
.stereo-assist-caption { font-size: 0.85rem; margin-bottom: 6px; }
.stereo-assist-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.stereo-assist-buttons .btn { padding: 4px 10px; font-size: 0.8rem; }

/* the window of the validity issues and their fixes (docs/chemliora-validity-fixes-plan.md) */
.layout-validity-details { border-color: #dc2626; color: #b91c1c; }
.layout-validity-details[hidden] { display: none; }
.validity-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.validity-popover { position: absolute; z-index: 9; top: 68px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); max-height: 60%; overflow-y: auto; padding: 10px 12px; border: 1px solid rgba(220, 38, 38, 0.45); border-radius: 12px; background: var(--bg-panel, #fff); color: var(--text-primary, #1e1e2e); box-shadow: 0 10px 28px rgba(30, 30, 46, 0.22); }
.validity-popover[hidden] { display: none; }
.validity-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.validity-popover-close { border: 0; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 6px; }
.validity-popover-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.validity-popover-item { padding: 8px 0 0; border-top: 1px solid rgba(128, 128, 128, 0.3); }
.validity-popover-item:first-child { border-top: 0; padding-top: 0; }
.validity-popover-message { margin: 0 0 6px; font-size: 0.85rem; line-height: 1.5; }
.validity-popover-kind { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.7rem; }
.validity-popover-kind.validity-popover-check { background: transparent; color: #b91c1c; border: 1px dashed #dc2626; }
.validity-popover-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.validity-popover-actions button { font-size: 0.8rem; padding: 4px 10px; border: 1px solid rgba(128, 128, 128, 0.5); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.validity-popover-actions button.validity-fix { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.validity-popover-none { margin: 0; font-size: 0.8rem; opacity: 0.75; }
:root[data-theme="dark"] .validity-popover-kind.validity-popover-check { color: #fca5a5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .validity-popover-kind.validity-popover-check { color: #fca5a5; } }

/* how a bond is drawn, the circle of an aromatic ring, the dotted and dashed contacts (docs/chemliora-bond-styles-plan.md; here and not in style.css, whose version the site tests fix) */
.bond-line.bond-bold { stroke-width: calc(var(--drawing-bond-width) * 2.6); }
.bond-line.bond-dashed { stroke-dasharray: 6 4; stroke-linecap: butt; }
.aromatic-circle { fill: none; stroke: var(--drawing-bond-color); stroke-width: var(--drawing-double-width); pointer-events: none; }
.bond-wedge-hollow { fill: none; stroke: var(--drawing-bond-color); stroke-width: var(--drawing-double-width); stroke-linejoin: round; }
.reaction-arrow-line.reaction-link-dotted { stroke-dasharray: 0.1 5.4; stroke-width: 2.8; }
.reaction-arrow-line.reaction-link-dashed { stroke-dasharray: 7 5; stroke-linecap: butt; }

/* the 3D structure and conformers window */
.m3d-container { width: min(1000px, 96vw); max-width: none; max-height: 94vh; overflow-y: auto; }
.m3d-body { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.m3d-view-column { flex: 1 1 380px; min-width: 0; }
.m3d-side-column { flex: 1 1 260px; min-width: 0; }
.m3d-canvas {
  display: block; width: 100%; height: min(56vh, 440px); min-height: 260px; border: 1px solid rgba(128, 128, 128, 0.4); border-radius: 10px;
  touch-action: none; cursor: grab; background: rgba(127, 127, 127, 0.07);
}
.m3d-canvas:active { cursor: grabbing; }
.m3d-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.m3d-measure { margin: 10px 0 4px; min-height: 1.4em; }
.m3d-status { margin: 0 0 6px; }
.m3d-warning { margin: 0 0 8px; color: #b45309; }
.m3d-count-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.m3d-list { padding: 0; margin: 10px 0; max-height: 190px; overflow: auto; }
.m3d-options { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.m3d-save { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
/* a button with the hidden attribute stays hidden although .btn sets its display */
#molecule-3d-modal [hidden], #image-export-modal [hidden] { display: none !important; }
:root[data-theme="dark"] .m3d-warning { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m3d-warning { color: #fbbf24; } }

/* Keep all compact drawing actions reachable after the validity toggle was added. */
@media (max-width: 700px) {
  .layout-controls.layout-controls { gap: 4px; padding: 6px; }
  .layout-controls .layout-control-primary { font-size: 0; width: 36px; min-width: 36px; height: 40px; padding: 0; justify-content: center; }
  .layout-controls .layout-control-primary .ui-icon { margin-right: 0; }
  .layout-controls #btn-toggle-validity { font-size: 12px; padding: 6px; min-width: 0; }
  .layout-controls .mobile-layout-toggle { font-size: 12px; padding: 6px; }
  .layout-controls .layout-history { flex-shrink: 0; gap: 4px; padding-left: 0; }
}

/* When fixes are available, keep their button and Undo/Redo reachable on phones. */
@media (max-width: 700px) {
  .layout-controls:has(#btn-validity-details:not([hidden])) #btn-toggle-validity { font-size: 0; width: 36px; min-width: 36px; padding: 0; }
  .layout-controls:has(#btn-validity-details:not([hidden])) .validity-badge { margin-left: 0; }
  .layout-controls #btn-validity-details { font-size: 12px; padding: 6px; }
}
/* The structure with the chosen band's atoms highlighted sits next to the IR spectrum (the window covers the canvas); both stay in view (docs/chemliora-structure-preview-plan.md).
   The dark theme inverts the body of the window (filter in theme.css), so the light box and the print colours of the picture are drawn dark like the spectrum. */
.ir-modal-body > .ir-chart-row { position: sticky; top: 0; z-index: 4; display: flex; gap: 10px; align-items: stretch; flex: 0 0 auto; min-width: 0; box-shadow: 0 6px 8px -6px rgba(29, 45, 70, .28); }
.ir-chart-row > .ir-chart-wrap { flex: 1 1 auto; width: auto; min-width: 0; }
.structure-preview { box-sizing: border-box; flex: 0 0 220px; width: 220px; margin: 0; display: flex; flex-direction: column; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; overflow: hidden; }
.structure-preview figcaption { padding: 4px 8px; font-size: .78rem; color: #4b5a6a; background: #f4f6f8; border-bottom: 1px solid #dfe3e8; }
.structure-preview-box { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
.structure-preview-svg { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; }
.structure-preview-empty { font-size: .8rem; color: #6a7686; text-align: center; }
@media (max-width: 700px) { .ir-modal-body > .ir-chart-row { flex-direction: column; } .structure-preview { flex: 0 0 100px; width: auto; height: 100px; } }
@media (max-height: 560px) { .ir-modal-body > .ir-chart-row { position: static; box-shadow: none; } }