/* Thara brand portal: page chrome on the Thara system tokens. */
:root { --p-max: 1180px; --p-side: 248px; --p-gutter: 24px; --p-rule: #E4E4E4; --p-panel: var(--surface-grey); }
[data-theme="night"] { --p-rule: #1B4653; }
* { box-sizing: border-box; }
html { background: var(--surface); }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html[data-lang="ar"] body { font-family: var(--font-arabic); font-size: 17px; line-height: 1.7; }
x-import { display: contents; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; color: var(--ink-deep); letter-spacing: -0.009em; }
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3, html[data-lang="ar"] h4 { font-family: var(--font-arabic); letter-spacing: 0; }
h1 { font-size: 48px; line-height: 1.04; }
h2 { font-size: 30px; line-height: 1.12; }
h3 { font-size: 21px; line-height: 1.2; }
html[data-lang="ar"] h1 { line-height: 1.3; } html[data-lang="ar"] h2, html[data-lang="ar"] h3 { line-height: 1.4; }
p { margin: 0; }
.t-ar { display: none; }
html[data-lang="ar"] .t-ar { display: revert; }
html[data-lang="ar"] .t-en { display: none; }
.skip { position: absolute; top: 12px; inset-inline-start: 12px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); background: var(--ink-deep); color: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { width: auto; height: auto; clip-path: none; }
:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 3px; }

/* labels and small type */
.label { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-warm); }
html[data-lang="ar"] .label { font-family: var(--font-arabic); font-size: 14px; letter-spacing: 0; text-transform: none; }
[data-theme="night"] .label { color: var(--ink-warm); }
.muted { color: var(--ink-warm); }
.small { font-size: 14px; }
.lead { font-family: var(--font-display); font-weight: 300; font-size: 21px; line-height: 1.4; letter-spacing: 0.01em; max-width: 46em; }
html[data-lang="ar"] .lead { font-family: var(--font-arabic); font-weight: 400; font-size: 22px; line-height: 1.6; }
.tc { color: var(--ink-warm); }

/* top bar */
.top { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--p-gutter); border-bottom: 1px solid var(--p-rule); position: sticky; top: 0; background: var(--surface); z-index: 20; }
.top-brand { display: inline-flex; }
.top-tools { display: flex; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--radius-button); overflow: hidden; }
.seg button { font: inherit; font-family: var(--font-text); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.seg button[lang="ar"], html[data-lang="ar"] .seg button { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* shell */
.shell { display: grid; grid-template-columns: var(--p-side) minmax(0, 1fr); min-height: calc(100vh - 64px); }
.side { border-inline-end: 1px solid var(--p-rule); padding: 0 0 32px; position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px); overflow: auto; display: flex; flex-direction: column; }
.side-strata { height: 14px; flex: none; }
.side-links { display: flex; flex-direction: column; padding: 20px 0; }
.side-links a { display: block; padding: 10px var(--p-gutter); text-decoration: none; font-family: var(--font-display); font-size: 17px; color: var(--ink); border-inline-start: 3px solid transparent; }
html[data-lang="ar"] .side-links a { font-family: var(--font-arabic); font-size: 18px; }
.side-links a[aria-current="page"] { border-inline-start-color: var(--ink-deep); color: var(--ink-deep); background: var(--p-panel); }
.side-links a:hover { background: var(--p-panel); }
.side-version { margin-top: auto; padding: 16px var(--p-gutter) 0; font-size: 12px; color: var(--ink-warm); }
.main { padding: 48px var(--p-gutter) 80px; max-width: calc(var(--p-max) + 2 * var(--p-gutter)); width: 100%; }

/* page blocks */
.hero { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; border-bottom: 1px solid var(--p-rule); margin-bottom: 48px; }
.section { padding: 40px 0; border-top: 1px solid var(--p-rule); display: flex; flex-direction: column; gap: 22px; }
.section:first-of-type { border-top: 0; padding-top: 0; }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 46em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--p-panel); border-radius: 10px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.card.pad-0 { padding: 0; overflow: hidden; }
.card-link { text-decoration: none; }
.card-link:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rule-list li { padding: 14px 0; border-top: 1px solid var(--p-rule); display: grid; grid-template-columns: 180px 1fr; gap: 20px; }
.rule-list li:last-child { border-bottom: 1px solid var(--p-rule); }
.rule-list b { font-weight: 400; font-family: var(--font-display); font-size: 17px; color: var(--ink-deep); }
html[data-lang="ar"] .rule-list b { font-family: var(--font-arabic); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.fig { display: flex; flex-direction: column; gap: 10px; }
.fig .cap { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-warm); font-family: var(--font-text); }
html[data-lang="ar"] .fig .cap { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 14px; }
.frame { box-shadow: 0 0 0 1px var(--p-rule); border-radius: 2px; overflow: hidden; }
.night-panel { background: var(--night); border-radius: 10px; padding: 28px; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.chip { display: flex; flex-direction: column; gap: 8px; }
.chip-sw { height: 72px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.chip b { font-weight: 400; font-family: var(--font-display); font-size: 15px; color: var(--ink-deep); }
.chip code { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-warm); }
.chip p { font-size: 13px; color: var(--ink); }
.strata-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.strata-col { display: flex; flex-direction: column; gap: 10px; }
.strata-col .sw { height: 220px; border-radius: 6px; overflow: hidden; }
.spec-group { display: flex; flex-direction: column; gap: 0; }
.spec { display: grid; grid-template-columns: 230px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--p-rule); align-items: center; }
.spec-meta { display: flex; flex-direction: column; gap: 4px; }
.spec-meta b { font-weight: 400; font-family: var(--font-text); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-deep); }
.spec-meta span { font-size: 12px; color: var(--ink-warm); }
.spec-sample { overflow: hidden; white-space: nowrap; color: var(--ink-deep); }
.spec-sample > * { margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.th-btn { font-size: 13px; }
html[data-lang="ar"] .th-btn { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 15px; }
.th-btn-filled { color: var(--email-ink); }
[data-theme="night"] .th-btn-outline { color: var(--ink); border-color: var(--ink); }
[data-theme="night"] .th-btn-filled { color: #001D25; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: start; padding: 12px 12px 12px 0; border-top: 1px solid var(--p-rule); vertical-align: top; }
.tbl th { font-family: var(--font-text); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-warm); }
html[data-lang="ar"] .tbl th { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 14px; }
.tbl tr:last-child td { border-bottom: 1px solid var(--p-rule); }
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dl-item { background: var(--p-panel); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.dl-item .pv { height: 90px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface); }
.dl-item .pv.dark { background: #003644; }
.dl-item b { font-weight: 400; font-family: var(--font-display); font-size: 15px; color: var(--ink-deep); }
.dl-item .links { display: flex; gap: 14px; font-size: 13px; }
.kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kit-grid img { display: block; width: 100%; height: auto; }
.scale-controls { display: flex; flex-wrap: wrap; gap: 20px; }
.scale-controls .seg { align-self: flex-start; }
.scale-wrap .th-scale { padding: 0; }
.note { background: var(--p-panel); border-radius: 10px; padding: 18px 22px; display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; }
.note.dark { background: #003644; color: #FFFFFF; }
.note.dark .label { color: #DAD5C4; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-text); color: var(--ink-warm); }
html[data-lang="ar"] .status { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 14px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--star-green); }

/* photography */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.photo-card { display: flex; flex-direction: column; gap: 8px; }
.photo-img { aspect-ratio: 4 / 3; border-radius: var(--radius-photo); overflow: hidden; background: var(--p-panel); }
.photo-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-cap { font-family: var(--font-display); font-size: 17px; color: var(--ink-deep); }
html[data-lang="ar"] .photo-cap { font-family: var(--font-arabic); }
.photo-card .links { display: flex; gap: 14px; font-size: 13px; }
.status.lic-pending::before { background: #A0B0B1; }
.status.lic-reference::before { background: #C17952; }
.empty { grid-column: 1 / -1; background: var(--p-panel); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 10px; max-width: 46em; }
.field input[type="file"] { min-height: 0; padding: 6px 0; border: 0; font-size: 13px; }

/* imagery page */
.prompt-out { background: var(--p-panel); border-radius: 10px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.prompt-text { margin: 0; font-family: var(--font-text); font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; color: var(--ink); }
.plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* make page */
.make { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.make-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-warm); }
html[data-lang="ar"] .field label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; font-size: 14px; }
.field input, .field textarea, .field select { font: inherit; font-size: 15px; padding: 9px 10px; border: 1px solid var(--ink); border-radius: var(--radius-button); background: var(--surface); color: var(--ink); width: 100%; min-height: 44px; }
.field textarea { min-height: 76px; resize: vertical; }
.field input[dir="rtl"], .field textarea[dir="rtl"] { font-family: var(--font-arabic); }
.make-preview { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.make-stage { background: var(--p-panel); border-radius: 10px; padding: 24px; display: flex; justify-content: center; align-items: flex-start; min-height: 320px; overflow: auto; }
.make-stage > x-import, .make-stage > div { max-width: 100%; }
.make-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.make-export { position: fixed; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.make-msg { font-size: 13px; color: var(--ink-warm); }

/* footer */
.foot { border-top: 1px solid var(--p-rule); padding: 28px var(--p-gutter) 40px; }
.foot-in { display: flex; flex-direction: column; gap: 12px; max-width: var(--p-max); font-size: 13px; color: var(--ink-warm); }
.foot-meta { font-size: 12px; }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--p-rule); padding: 0; }
  .side-links { flex-direction: row; overflow-x: auto; padding: 8px 12px; gap: 4px; }
  .side-links a { white-space: nowrap; padding: 10px 12px; border-inline-start: 0; border-bottom: 2px solid transparent; font-size: 15px; }
  .side-links a[aria-current="page"] { background: transparent; border-bottom-color: var(--ink-deep); }
  .side-version { display: none; }
  .main { padding: 28px 16px 60px; }
  h1 { font-size: 36px; } h2 { font-size: 26px; }
  .grid-2, .grid-3, .grid-4, .pair, .kit-grid { grid-template-columns: 1fr; }
  .strata-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .make { grid-template-columns: 1fr; }
  .make-preview { position: static; }
  .rule-list li, .note, .spec { grid-template-columns: 1fr; gap: 8px; }
  .top { padding: 0 16px; }
  .seg button { padding: 0 10px; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top { height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .top-tools { gap: 6px; }
  .seg button { min-height: 32px; font-size: 11px; }
}

/* The next-entity row shows only the name box for the chosen language. */
.scale-wrap[data-scale-lang="en"] #th-next-ar, .scale-wrap[data-scale-lang="ar"] #th-next-en { display: none; }

.make-note { margin-top: 18px; max-width: 46em; }