/* Shared writing/reading geometry, based on the selected Telegraph reference. */
:root { --col: 690px; --gutter: 20px; --bg-color: #fff; }
.editor-container,.article-container { max-width:730px; padding:42px max(20px,env(safe-area-inset-right)) 80px max(20px,env(safe-area-inset-left)); animation:none; transform:none; transition:opacity .15s; }
.editor-row { margin-bottom:8px; }
.editor-row.content-row { margin-top:20px; }
.editor-input-wrapper { min-width:0; }
.editor-label { font-size:13px; padding-top:7px; margin-right:18px; color:var(--text-placeholder); }
.title-input,.article-title { display:block; font-size:32px; font-weight:700; line-height:34px; letter-spacing:0; overflow-wrap:anywhere; }
.title-input { resize:none; overflow:hidden; min-height:34px; height:34px; border-radius:0; }
.article-title { margin-bottom:10px; }
.author-line { display:flex; align-items:center; gap:8px; }
.author-input { font-size:15px; line-height:20px; padding:0; min-width:0; letter-spacing:0; }
.author-input.has-author-link { text-decoration:underline; text-underline-offset:3px; }
.author-link-popup { position:fixed; z-index:1000; max-width:calc(100vw - 16px); padding:4px; border-radius:6px; background:#292927; color:#fff; box-shadow:0 3px 12px #0002; font:14px/20px var(--font-ui); }
.author-link-popup[hidden],.author-link-popup [hidden] { display:none!important; }
.author-link-action { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:4px; background:transparent; color:#fff; cursor:pointer; }
.author-link-action:hover { background:#ffffff20; }
.author-link-form { display:flex; align-items:center; flex-wrap:wrap; width:320px; max-width:calc(100vw - 24px); }
.author-link-form input { flex:1; min-width:0; width:180px; padding:8px; border:0; outline:0; background:transparent; color:#fff; font:14px/20px var(--font-ui); }
.author-link-form input::placeholder { color:#c7c7c7; }
.author-link-form button { flex:none; padding:8px; border:0; background:transparent; color:#fff; cursor:pointer; font:14px/20px var(--font-ui); }
.author-link-form button:focus-visible { outline:1px solid #fff; }
.author-link-error { display:block; width:100%; padding:0 8px; color:#ffbbb3; font-size:12px; }
.author-link-error:empty { display:none; }
.content-editable,.article-content { font-size:18px; line-height:1.58; letter-spacing:0; }
.content-editable { min-height:320px; }
.content-editable p,.article-content p { margin:0 0 12px; line-height:1.58; }
.content-editable :is(h1,h2,h3,h4,h5,h6),.article-content :is(h1,h2,h3,h4,h5,h6) { margin:24px 0 12px; line-height:1.2; letter-spacing:0; }
.content-editable h1,.article-content h1 { font-size:28px; }
.content-editable h2,.article-content h2 { font-size:25px; }
.content-editable h3,.article-content h3 { font-size:23px; }
.content-editable h4,.article-content h4 { font-size:21px; }
.content-editable h5,.article-content h5 { font-size:19px; }
.content-editable h6,.article-content h6 { font-size:18px; }
.content-editable :is(ul,ol,blockquote),.article-content :is(ul,ol,blockquote) { margin-top:12px; margin-bottom:12px; }
.content-editable li,.article-content li { line-height:1.58; margin-bottom:4px; }
.content-editable li p,.article-content li p { margin-bottom:4px; }
.article-header { margin-bottom:24px; }
.article-meta { font-size:15px; line-height:20px; flex-wrap:wrap; letter-spacing:0; }
.article-meta a { color:inherit; text-decoration:none; border-bottom:1px solid var(--card-border); }
.media-card { margin-top:20px; margin-bottom:20px; }
.embed-card[data-embed-provider="youtube"] { width:100%; min-height:200px; }
.image-caption { font-size:14px; line-height:1.45; }
.header { top:46px; right:max(20px,calc(50% - 345px - 122px)); display:flex; flex-direction:column; align-items:flex-end; gap:8px; transition:none; }
.action-btn { font-size:14px; line-height:20px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; padding:7px 20px; min-height:38px; border-width:1.5px; border-radius:999px; }
.action-btn:focus-visible { border-radius:999px; }
.text-button { font:14px/20px var(--font-ui); color:var(--text-secondary); border:0; background:transparent; cursor:pointer; padding:4px 0; text-decoration:none; }
.v17-insert { border-radius:20px; padding:3px; gap:1px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.v17-insert-btn { border-radius:50%; width:30px; height:30px; flex-basis:30px; }
.modal { background:rgba(0,0,0,.22); backdrop-filter:blur(3px); padding:20px; }
.modal-content { width:420px; max-width:100%; padding:24px; border-radius:12px; border:1px solid var(--card-border); box-shadow:0 12px 48px rgba(0,0,0,.14); }
.modal-title { font-size:21px; line-height:1.3; margin-bottom:20px; }
.modal-input { font-size:15px; padding:10px 12px; border-radius:6px; margin-bottom:12px; }
.modal-hint { font-size:13px; line-height:1.5; margin:0 0 16px; }
.modal-buttons { gap:10px; }
.modal-btn { font-size:14px; border-radius:18px; padding:8px 18px; }
.upload-choice { width:100%; border:1px dashed var(--card-border); border-radius:8px; padding:17px 12px; background:transparent; color:var(--text-primary); font:15px var(--font-ui); cursor:pointer; }
.upload-choice:hover { background:var(--card-surface-hover); }
.media-divider { display:flex; align-items:center; gap:10px; color:var(--text-placeholder); font:12px var(--font-ui); margin:18px 0; }
.media-divider::before,.media-divider::after { content:''; flex:1; height:1px; background:var(--card-border); }
.media-type { width:100%; margin-bottom:10px; border:0; background:var(--card-bg); color:var(--text-secondary); font:14px var(--font-ui); padding:6px 0; }
.inline-error { font:13px/1.5 var(--font-ui); color:#c24135; margin:0 0 12px; }
.inline-error:empty { display:none; }
.account-dialog { width:540px; max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; }
.dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.icon-close { flex:none; border:0; background:transparent; color:var(--text-secondary); width:32px; height:32px; border-radius:50%; cursor:pointer; font:26px/1 var(--font-ui); }
.account-intro { font:14px/1.6 var(--font-ui); color:var(--text-secondary); margin-bottom:20px; }
.account-field { display:block; font:13px/1.5 var(--font-ui); color:var(--text-secondary); margin-bottom:8px; }
.account-field input { display:block; width:100%; margin:5px 0 0; }
.account-form { margin-bottom:20px; }
.account-form .modal-btn { margin-top:8px; }
.account-login { padding-top:18px; border-top:1px solid var(--card-border); }
.account-profile { font:14px/1.6 var(--font-ui); }
.account-profile summary { cursor:pointer; margin-bottom:12px; }
.account-tools { display:flex; flex-wrap:wrap; gap:16px; margin:16px 0; }
.account-notice { padding:12px; background:var(--code-inline-bg); border-radius:8px; margin-bottom:18px; font:13px/1.6 var(--font-ui); }
.account-notice .modal-input { width:100%; margin-top:8px; }
.recovery-key { width:100%; resize:none; padding:8px; margin-top:8px; border:1px solid var(--card-border); border-radius:4px; background:var(--card-bg); color:var(--text-primary); font:12px/1.5 var(--font-mono); overflow-wrap:anywhere; }
.account-list-title { font:600 15px/1.5 var(--font-ui); margin:20px 0 4px; }
.account-page { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 12px; padding:14px 0; border-bottom:1px solid var(--card-border); }
.account-page-title { grid-column:1/-1; font:600 16px/1.4 var(--font-ui); color:var(--text-primary); text-decoration:none; overflow-wrap:anywhere; }
.page-views { font:13px/1.5 var(--font-ui); color:var(--text-secondary); }
.stats-panel { grid-column:1/-1; padding-top:12px; font:13px/1.6 var(--font-ui); color:var(--text-secondary); }
.views-chart { height:72px; display:flex; align-items:flex-end; gap:3px; border-bottom:1px solid var(--card-border); margin:8px 0; }
.view-bar { flex:1; background:var(--text-secondary); opacity:.7; min-width:2px; }
.stats-details summary { cursor:pointer; }
.stats-details table { width:100%; font-size:12px; border-collapse:collapse; }
.stats-details td { padding:3px 0; border-bottom:1px solid var(--card-border); }
button:focus-visible,select:focus-visible { outline:2px solid var(--text-secondary); outline-offset:3px; }
@media(max-width:960px) {
    .header { top:7px; right:max(20px,env(safe-area-inset-right)); padding:0; }
    #publishBtn,#editModeBtn { display:none!important; }
    .mobile-publish-btn:not(.hidden),.mobile-edit-btn:not(.hidden) { display:block!important; margin-top:24px; }
}
@media(max-width:768px) {
    .editor-container,.article-container { padding-top:42px; max-width:730px; }
    .editor-row { margin-bottom:8px; }
    .title-input,.article-title { font-size:32px; line-height:34px; }
    .article-title { margin-bottom:10px; }
    .content-editable,.article-content { font-size:18px; line-height:1.58; }
    .content-editable { min-height:260px; }
    .author-input { font-size:15px; }
    .v17-insert-btn { width:44px; height:44px; flex-basis:44px; }
    .author-link-action { width:44px; height:44px; }
    .action-btn { min-height:44px; padding:10px 22px; }
    .author-link-form button { min-height:44px; }
    .modal { padding:16px; }
    .modal-content { padding:20px; }
    .account-dialog { max-height:calc(100dvh - 32px); }
    .modal-btn { min-height:42px; }
}
@media(prefers-color-scheme:dark) { :root { --bg-color:#16181a; } .inline-error { color:#fca5a5; } }
@media(prefers-reduced-motion:reduce) { .editor-container,.article-container { transition:none; } .action-btn:not(:disabled):is(:hover,:active) { transform:none; } }

:root[data-theme="light"] { color-scheme:light; --bg-color:#fff;
--text-primary: #1a1a1a;
--text-secondary: #666666;
--text-placeholder: #8a8a8a;
--border-color: #000000;
--link-color: #2481cc;
--link-hover: #1a6aa8;
--card-border: #e5e5e5;
--card-hover-shadow: rgba(0, 0, 0, 0.08);
--card-bg: #ffffff;
--progress-bg: #f0f0f0;
--progress-fill: #333333;
--skeleton-base: #f0f0f0;
--skeleton-shine: #fafafa;
--code-inline-bg: #f2f2f2;
--code-block-bg: #f6f6f6;
--quote-border: #e0e0e0;
--card-surface: #ffffff;
--card-surface-2: #f8f8f8;
--card-surface-hover: #f5f5f5;
--card-surface-hover-2: #e8e8e8;
--accent-bg: #333333;
--accent-bg-2: #1a1a1a;
--on-accent: #ffffff;
--selection-bg: rgba(36, 129, 204, 0.22);
--state-success-bg: #f0fdf4;
--state-error-bg: #fef2f2; }
:root[data-theme="dark"] { color-scheme:dark; --bg-color: #16181a;
--text-primary: #e8e6e3;
--text-secondary: #9aa0a6;
--text-placeholder: #6f7276;
--border-color: #e8e6e3;
--link-color: #6fb3f0;
--link-hover: #9acbf5;
--card-border: #2c3034;
--card-hover-shadow: rgba(0, 0, 0, 0.5);
--card-bg: #1f2225;
--progress-bg: #2c3034;
--progress-fill: #e8e6e3;
--skeleton-base: #24282c;
--skeleton-shine: #2c3034;
--code-inline-bg: #24282c;
--code-block-bg: #1f2225;
--quote-border: #3a3f44;
--card-surface: #1f2225;
--card-surface-2: #1a1d20;
--card-surface-hover: #262a2e;
--card-surface-hover-2: #202326;
--accent-bg: #e8e6e3;
--accent-bg-2: #cfcdc9;
--on-accent: #16181a;
--selection-bg: rgba(111, 179, 240, 0.3);
--state-success-bg: #16281d;
--state-error-bg: #2a1618; }
:root[data-theme="dark"] .inline-error {color:#fca5a5;}