/* littoral.css — defaults for Littoral pages and tools. */
:root {
  --lt-fg: #1d2330; --lt-bg: #ffffff; --lt-muted: #586071;
  --lt-accent: #0e7490; --lt-border: #d6dbe3; --lt-panel: #f4f6f9;
  --lt-error: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lt-fg: #e6e9ef; --lt-bg: #14171d; --lt-muted: #9aa3b2;
    --lt-accent: #38bdf8; --lt-border: #333a46; --lt-panel: #1d222b;
    --lt-error: #f97066;
  }
}
body { font-family: system-ui, sans-serif; color: var(--lt-fg); background: var(--lt-bg);
       margin: 0 auto; padding: 1rem 1rem 4rem; max-width: 60rem; line-height: 1.45;
       overflow-wrap: break-word; }
/* Nothing wider than a phone's screen: wide tables and code scroll in place. */
img, video, input, select, textarea { max-width: 100%; }
pre { overflow-x: auto; }
a { color: var(--lt-accent); }
input, select, textarea, button { font: inherit; }
label { margin-right: 1em; }
.lt-table { border-collapse: collapse; margin: .5rem 0; display: block; max-width: 100%; overflow-x: auto; }
.lt-table th, .lt-table td { border-bottom: 1px solid var(--lt-border); padding: .3rem .6rem;
                             text-align: left; vertical-align: top; }
.lt-buttons { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.lt-dialog { padding: 1rem; border: 1px solid var(--lt-border); border-radius: 6px;
             background: var(--lt-panel); margin: .5rem 0; }
.lt-message { font-weight: 600; }
.lt-validation-error, .lt-error { color: var(--lt-error); font-weight: 600; }
.lt-toolbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem;
              padding: .4rem 1rem; font-size: .85rem; background: var(--lt-panel);
              border-top: 1px solid var(--lt-border); }
.lt-toolbar-time { margin-left: auto; color: var(--lt-muted); }
.lt-halo { border: 1px dashed var(--lt-accent); margin: .3rem 0; }
.lt-halo-bar { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .75rem; padding: .1rem .4rem;
               background: var(--lt-panel); border-bottom: 1px dashed var(--lt-accent); }
.lt-halo-class { font-weight: 600; }
.lt-halo-body { padding: .3rem; }
.lt-source { white-space: pre-wrap; font-size: .8rem; overflow-x: auto; }
.lt-batch { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; align-items: baseline; }
.lt-batch .lt-disabled { color: var(--lt-muted); }
.lt-report th a { text-decoration: none; }
.lt-report td.number, .lt-report th.number { text-align: right; font-variant-numeric: tabular-nums; }
.lt-code { margin: .3rem 0; }
.lt-code-title { font-size: .8rem; margin-bottom: .2rem; }
.lt-profile { margin: 1rem 0 3rem; font-size: .85rem; }
.lt-profile td.number { text-align: right; font-variant-numeric: tabular-nums; }
.lt-editor .lt-field { margin: .6rem 0; }
.lt-editor label { display: block; font-weight: 600; margin-bottom: .15rem; }
.lt-editor input[type=text], .lt-editor input[type=email], .lt-editor input[type=password],
.lt-editor textarea { width: min(100%, 28rem); }
.lt-required { color: var(--lt-error); }
.lt-field-invalid input, .lt-field-invalid textarea, .lt-field-invalid select { outline: 1px solid var(--lt-error); }
.lt-help { font-size: .8rem; color: var(--lt-muted); }
.lt-viewer th { width: 10rem; }
.lt-tabs { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; padding: 0; margin: 0;
           border-bottom: 1px solid var(--lt-border); }
.lt-tabs li a, .lt-tabs li span { display: block; padding: .35rem .8rem; text-decoration: none;
                                  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.lt-tabs li.lt-active span { border-color: var(--lt-border); background: var(--lt-bg); margin-bottom: -1px;
                             font-weight: 600; }
.lt-tab-body { padding: .8rem 0; }
.lt-navigation { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 40rem) { .lt-navigation { grid-template-columns: minmax(0, 1fr); } }
.lt-menu { list-style: none; padding: 0; margin: 0; }
.lt-menu li a, .lt-menu li span { display: block; padding: .3rem .6rem; text-decoration: none; border-radius: 4px; }
.lt-menu li.lt-active span { background: var(--lt-panel); font-weight: 600; }
.lt-tree { list-style: none; padding-left: 1.1rem; margin: .1rem 0; }
.lt-tree-toggle, .lt-tree-leaf { display: inline-block; width: 1rem; text-decoration: none; color: var(--lt-muted); }
.lt-tree a.lt-selected { font-weight: 600; text-decoration: none; }
.lt-autocomplete { position: relative; display: inline-block; }
.lt-suggestions { position: absolute; z-index: 10; left: 0; right: 0; list-style: none; margin: .1rem 0;
                  padding: .2rem 0; background: var(--lt-bg); border: 1px solid var(--lt-border); border-radius: 4px; }
.lt-suggestion { display: block; width: 100%; text-align: left; border: none; background: none;
                 padding: .25rem .6rem; cursor: pointer; color: inherit; }
.lt-suggestion:hover, .lt-suggestion:focus { background: var(--lt-panel); }
.lt-sortable { padding-left: 1.6rem; }
.lt-sortable li { display: flex; gap: .5rem; align-items: center; padding: .3rem .4rem; margin: .2rem 0;
                  border: 1px solid var(--lt-border); border-radius: 4px; background: var(--lt-bg); cursor: grab; }
.lt-sortable li.lt-dragging { opacity: .5; }
.lt-handle { color: var(--lt-muted); }
.lt-sortable-item { flex: 1; }
.lt-sortable-buttons a { text-decoration: none; padding: 0 .2rem; }
.lt-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 2px; }
.lt-behind-modal { filter: blur(1px); opacity: .5; }
dialog.lt-modal { position: fixed; top: 12vh; margin: 0 auto; max-width: min(36rem, calc(100vw - 2rem));
                  max-height: 76vh; overflow: auto; border: 1px solid var(--lt-border); border-radius: 8px;
                  padding: 1.2rem 1.4rem; background: var(--lt-bg); color: var(--lt-fg);
                  box-shadow: 0 10px 40px rgba(0,0,0,.25); z-index: 100; }
.lt-modal-close { position: absolute; top: .4rem; right: .7rem; font-size: 1.4rem; text-decoration: none; }
.lt-toasts { position: fixed; right: 1rem; bottom: 3rem; display: flex; flex-direction: column; gap: .5rem;
             z-index: 200; max-width: min(24rem, calc(100vw - 2rem)); }
.lt-toast { padding: .6rem .9rem; border-radius: 6px; background: var(--lt-panel); color: var(--lt-fg);
            border-left: 4px solid var(--lt-accent); box-shadow: 0 4px 16px rgba(0,0,0,.15);
            transition: opacity .5s; }
.lt-toast-success { border-left-color: #2e7d32; }
.lt-toast-error { border-left-color: var(--lt-error); }
.lt-toast-leaving { opacity: 0; }

/* Language chooser */
.lt-languages ul { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin: 0; }

/* Background jobs */
.lt-job-track { height: 1rem; max-width: 30rem; border: 1px solid var(--lt-border); border-radius: 999px; overflow: hidden; }
.lt-job-fill { height: 100%; background: var(--lt-accent); transition: width .15s; }
.lt-job-failed .lt-job-fill { background: var(--lt-error); }
.lt-job-status { margin: .4rem 0; }

/* Stored files */
.lt-thumbnail img { max-width: 240px; max-height: 240px; border-radius: 6px; border: 1px solid var(--lt-border); }
.lt-file-current { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .4rem; }