/* Grammar lessons (A1–B1): one long paper sheet built for reading.
   Comfortable measure and leading, quiet structure, decoration only around the lesson. Tokens come from base.css. */
.a1-article{
  --a1-paper:var(--ba-paper);--a1-tint:var(--ba-paper-2);--a1-line:var(--ba-line);--a1-accent:var(--ba-accent);--a1-muted:var(--ba-muted);
  max-width:860px;margin:0 auto;padding:clamp(24px,5vw,72px) clamp(20px,5vw,72px) clamp(32px,5vw,64px);
  background:var(--ba-paper);color:var(--ba-ink);border-radius:var(--ba-radius);
  font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.7
}
.a1-article p,.a1-article li{max-width:68ch}
.a1-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 28px;color:var(--ba-muted);font-size:var(--ba-small)}
.a1-breadcrumb button{min-height:44px;border:0;background:none;color:var(--ba-ink);padding:0;cursor:pointer;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Header */
#page-grammar .a1-article-header h2{font-size:clamp(2.125rem,1.4rem + 3vw,3.5rem);line-height:1.08;margin:0 0 20px;overflow-wrap:anywhere}
.a1-article-header .a1-lead{font-size:var(--ba-lead);line-height:1.55;color:var(--ba-ink);margin:0}

/* Contents */
.a1-contents{display:grid;gap:4px;margin:36px 0 52px;padding:22px 26px;background:var(--ba-paper-2);border:0;border-radius:var(--ba-radius-small);font-size:var(--ba-body)}
.a1-contents strong{font-family:var(--ba-serif);font-size:var(--ba-lead);margin-bottom:6px}
.a1-article a{color:var(--ba-ink);text-decoration-thickness:1px;text-underline-offset:4px}
.a1-contents a{display:block;padding:6px 0;text-decoration:none}
.a1-contents a:hover{text-decoration:underline}

/* Sections: separated by space, not by lines */
.a1-section{margin:0 0 clamp(40px,6vw,64px);padding:0;border:0;scroll-margin-top:110px}
#page-grammar .a1-article h3{font-family:var(--ba-serif);font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);font-weight:600;line-height:1.25;letter-spacing:-.012em;margin:0 0 18px;color:var(--ba-ink)}
.a1-section p{margin:0 0 18px;line-height:1.75}

/* Tables: real lines, own horizontal scroll on small screens */
.a1-table-wrap{overflow-x:auto;margin:24px 0;border:2px solid var(--ba-line);border-radius:var(--ba-radius-small);max-width:100%;background:var(--ba-paper)}
.a1-table-wrap table{border-collapse:collapse;width:100%;min-width:420px;font-size:var(--ba-body);background:var(--ba-paper)}
.a1-table-wrap :is(th,td){padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ba-line)}
.a1-table-wrap tr:last-child :is(th,td){border-bottom:0}
.a1-table-wrap thead{background:var(--ba-paper-2)}
.a1-table-wrap thead th{font-weight:600}
.a1-table-wrap tbody th{font-weight:500}
.a1-table-wrap [lang=de]{font-weight:600}

/* Example sentences: German first, translation below */
.a1-examples{display:grid;gap:10px;margin:22px 0}
.a1-example{padding:16px 20px;background:var(--ba-paper-2);border:0;border-left:5px solid var(--ba-accent);border-radius:0 var(--ba-radius-small) var(--ba-radius-small) 0}
#page-grammar .a1-example p{margin:0;font-size:var(--ba-body);line-height:1.6;color:var(--ba-ink)}
#page-grammar .a1-example p[lang=de]{font-family:var(--ba-serif);font-weight:600;font-size:var(--ba-lead);margin-bottom:4px}
.a1-example small{display:block;margin-top:8px;line-height:1.6;font-size:var(--ba-small);color:var(--ba-ink)}

/* Diagrams */
.a1-figure{margin:28px 0;padding:22px;background:var(--ba-paper-2);border:0;border-radius:var(--ba-radius-small)}
.lesson-diagram-tiles{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.lesson-diagram-tiles>div{flex:1;min-width:140px;display:flex;flex-direction:column;gap:8px;padding:16px 14px;background:var(--ba-paper);border:0;border-radius:var(--ba-radius-small)}
.lesson-diagram-tiles strong{font-family:var(--ba-serif);color:var(--ba-ink);font-size:var(--ba-lead);overflow-wrap:anywhere}
.lesson-diagram-tiles span{font-size:var(--ba-small);line-height:1.55;color:var(--ba-ink)}
.a1-figure figcaption{margin-top:14px;font-size:var(--ba-small);line-height:1.6;color:var(--ba-ink)}
.a1-figure svg{display:block;width:100%;fill:none;stroke:var(--ba-accent);stroke-width:3}
.a1-figure svg text{fill:var(--ba-ink);stroke:none;font-size:15px;text-anchor:middle;font-family:var(--ba-sans)}
.a1-figure.clock{text-align:center}.a1-figure.clock svg{max-width:240px;margin:auto}.a1-figure.clock svg text{font-size:20px}.a1-figure.clock p{margin:12px 0 0}

/* Summary and self-check on the green field */
.a1-summary{padding:clamp(22px,4vw,36px);background:var(--ba-field);color:var(--ba-field-ink);border:0;border-radius:var(--ba-radius-small)}
#page-grammar .a1-summary h3,.a1-summary :is(p,li,summary){color:var(--ba-field-ink)}
.a1-summary ul{margin:0 0 22px;padding-left:22px}.a1-summary li{margin:8px 0;line-height:1.65}
.a1-summary .a1-check{border-top:4px dotted color-mix(in srgb,var(--ba-field-ink) 35%,transparent)}

/* FAQ */
.a1-article details{padding:0;border:0;border-top:4px dotted var(--ba-paper-2)}
.a1-article details:last-of-type{border-bottom:4px dotted var(--ba-paper-2)}
.a1-article summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-weight:600;cursor:pointer;line-height:1.5;list-style:none}
.a1-article summary::-webkit-details-marker{display:none}
.a1-article summary::after{content:"+";flex:none;font-size:24px;line-height:1;font-weight:400}
.a1-article details[open]>summary::after{content:"−"}
.a1-article details p{margin:0 0 18px}
.a1-summary details{border-bottom:0!important}

/* Practice: the one decorated card, outside the reading flow */
.a1-practice{--a1-pad:clamp(20px,4vw,36px);margin:clamp(40px,6vw,64px) 0;padding:0 var(--a1-pad) 24px;border:0;border-radius:var(--ba-radius-small);background:var(--ba-paper-2);overflow:hidden}
.a1-practice::before{content:"";display:block;height:16px;margin:0 calc(-1 * var(--a1-pad)) 24px;background:repeating-linear-gradient(90deg,var(--ba-accent) 0 20px,transparent 20px 40px)}
#page-grammar .a1-practice h3{margin-top:0}
.a1-practice .btn{text-decoration:none;white-space:normal;text-align:left}
.a1-practice-status:empty{display:none}

/* Related topics */
.a1-related{display:grid;gap:0}
.a1-related a{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:12px 0;border:0;border-bottom:4px dotted var(--ba-paper-2);border-radius:0;background:none;font-family:var(--ba-serif);font-weight:600;font-size:var(--ba-lead);text-decoration:none}
.a1-related a:hover{text-decoration:underline}

/* Author */
.a1-author{display:flex;gap:22px;align-items:flex-start;margin:0 0 32px;padding:24px;background:var(--ba-paper-2);border:0;border-radius:var(--ba-radius-small)}
.a1-author img{width:84px;height:84px;object-fit:cover;object-position:center 30%;border-radius:var(--ba-radius-small);flex-shrink:0}
.a1-author p{font-size:var(--ba-body);color:var(--ba-ink);margin:0 0 10px}
#page-grammar .a1-author h3{margin:0 0 2px;font-size:var(--ba-lead)}
.a1-author-role{font-size:var(--ba-small)!important;color:var(--ba-muted)!important;margin:0 0 10px!important}
.a1-author a{font-weight:600}
.a1-reading{font-size:var(--ba-small);color:var(--ba-ink);margin:24px 0}

/* Comments */
.a1-comment-list{margin:20px 0}
.a1-comment-list>p{font-size:var(--ba-body);color:var(--ba-ink)}
.a1-comment{padding:18px 0;border-top:4px dotted var(--ba-paper-2)}
.a1-comment header{display:flex;gap:16px;flex-wrap:wrap}
.a1-comment time{font-size:var(--ba-small);color:var(--ba-muted)}
.a1-comment p{white-space:pre-wrap;overflow-wrap:anywhere}
.a1-comment-reply{margin:16px 0 0 16px;padding:14px 16px;background:var(--ba-paper-2);border-radius:var(--ba-radius-small)}
.a1-comment-form{position:relative;padding:clamp(20px,4vw,32px);background:var(--ba-paper-2);border:0;border-radius:var(--ba-radius-small)}
.a1-comment-form label{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;font-size:var(--ba-small);font-weight:600}
.a1-comment-form input:not([type=checkbox]),.a1-comment-form textarea{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-weight:400;box-sizing:border-box}
.a1-comment-form textarea{resize:vertical;min-height:140px}
.a1-comment-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.a1-comment-form .a1-consent{display:flex;flex-direction:row;align-items:flex-start;gap:12px;font-size:var(--ba-small);font-weight:400;line-height:1.6;cursor:pointer}
.a1-consent input{margin-top:3px;accent-color:var(--ba-accent);width:22px;height:22px;flex-shrink:0}
.a1-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.a1-comment-status{font-size:var(--ba-small);margin:16px 0 0!important;min-height:24px}
.a1-comment-status.error{color:var(--ba-wrong)}.a1-comment-status.success{color:var(--ba-right)}
.a1-comment-status.error::before{content:"! ";font-weight:700}.a1-comment-status.success::before{content:"✓ ";font-weight:700}
.a1-article button:disabled{opacity:.6;cursor:wait}
.a1-article>.btn[data-a1-back]{margin-top:8px}

@media(max-width:700px){
  .a1-article{border-radius:var(--ba-radius-small)}
  .a1-contents{padding:18px 20px;margin-bottom:40px}
  .a1-figure{padding:16px}
  .a1-figure.space{overflow-x:auto}.a1-figure.space svg{min-width:490px}
  .lesson-diagram-tiles>div{min-width:110px}
  .a1-example{padding:14px 16px}
  .a1-comment-fields{grid-template-columns:1fr;gap:0}
  .a1-author{flex-direction:column;gap:14px}
  .a1-author img{width:64px;height:64px}
}
/* "Alıştırmaya dön" when the lesson was opened from an exercise (js/grammar.js) */
.grammar-return{margin:-12px 0 28px}
.a1-article .grammar-return-link{text-decoration:none;white-space:normal;text-align:left}
.a1-practice .grammar-return-link{margin:0 10px 10px 0}