/* ════════════════════════════════════════════════════════════════════════
   study-page-tables.css: a table on a Space page (study-page-tables.js), and
   the options button on the edge of a cell. The same rules draw a table in
   Version history's preview, which sits in the same .sp-editor shell.
   Tokens come from /css/shared/khio-ui.css, so dark mode needs nothing here.
   ════════════════════════════════════════════════════════════════════════ */

/* The grid: hairlines between cells, rounded outside, the header row tinted.
   Columns share the width evenly, so they hold still while a cell is typed in.
   study-pages.css gives every block of the page the same margin; a table
   keeps a little more air under it. */
#view-deeptutor .sp-editor .ql-editor > table { width: 100%; margin: .4em 0 1.1em !important; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15.5px; line-height: 1.5; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) table :is(td, th) { height: calc(1.5em + 18px); padding: 8px 12px; border: 0; border-right: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); vertical-align: top; text-align: left; overflow-wrap: break-word; hyphens: auto; outline: 0; cursor: text; transition: box-shadow .12s ease, background .12s ease; }
#view-deeptutor .sp-editor .ql-editor table tr > :first-child { border-left: 1px solid var(--k-line); }
#view-deeptutor .sp-editor .ql-editor table > :first-child > tr:first-child > * { border-top: 1px solid var(--k-line); }
#view-deeptutor .sp-editor .ql-editor table > :first-child > tr:first-child > :first-child { border-top-left-radius: 12px; }
#view-deeptutor .sp-editor .ql-editor table > :first-child > tr:first-child > :last-child { border-top-right-radius: 12px; }
#view-deeptutor .sp-editor .ql-editor table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: 12px; }
#view-deeptutor .sp-editor .ql-editor table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: 12px; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) table th { background: var(--k-hover); color: var(--k-ink); font-weight: 600; }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) table :is(td, th):focus { box-shadow: inset 0 0 0 2px var(--k-blue); background: color-mix(in srgb, var(--k-blue) 5%, transparent); }
#view-deeptutor .sp-editor :is(.ql-editor, .sp-pm) table code { font-size: .86em; }

/* The options button: a small chip centred on the cell's right edge, clear of
   the words on either side of it (cells keep 12px of padding). */
#spLayer .sp-tb-handle { position: fixed; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid var(--k-line); border-radius: 7px; background: var(--k-surface); color: var(--k-ink-2); box-shadow: 0 2px 8px rgba(17, 17, 20, .1); cursor: pointer; animation: k-rise .16s var(--k-ease) both; transition: color .12s ease, border-color .12s ease; }
#spLayer .sp-tb-handle:hover { color: var(--k-ink); border-color: color-mix(in srgb, var(--k-ink) 22%, transparent); }
#spLayer .sp-tb-handle:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }
#spLayer .sp-tb-handle svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
    #spLayer .sp-tb-handle { animation: none; }
}