/*
FONT
*/

/* @import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,400;100,600&family=Noto+Emoji&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100,600;1,100,600&family=Noto+Emoji&display=swap");

html {
  font-family: "Archivo", sans-serif;
}

/*
FLAVOR
*/

:root {
  /* font-size: 14px; */
  --bg: #139;
  /* --bga: #000a; */
  --c1: #fff;
  /* --outline-bg: solid 1px var(--bg); */
  --outline-c1: solid 1px var(--c1);
}

/* checkbox */

input.toggly {
  /* --toggly-height: 1em; */
  /* border-radius: 0; */
  /* outline: var(--outline-c1); */
  /* background: transparent; */
}
input.toggly::before {
  /* border-radius: 0; */
}
input:checked.toggly {
  /* background: #5a8; */
}
input:checked.toggly::before {
  /* outline-color: #5a8; */
}

/*
STYLE
*/

header,
section,
footer {
  margin: 1em;
}

/* a */

a {
  color: var(--c1);
  text-decoration: underline;
}
a:hover {
  background-color: var(--c1);
  color: var(--bg);
}
table {
  border-collapse: 0;
}

/* header */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
}
header > #logo {
  aspect-ratio: 546/565;
  width: 18svw;
  max-width: 20svh;
  background: url("./p/20260216_cns_logo.svg") center/100% no-repeat;
}
header > h1 {
  flex-grow: 1;
}

/* section & children */

section#main {
  display: flex;
  gap: 0.6em;
}
section#main.verty {
  /* will be added by js */
  flex-direction: column;
}
section#main > * {
  outline: var(--outline-c1);
}
section#main > article#DOC {
  flex-grow: 1;
}

/* nav */

nav#shelf {
  padding: 0.4em;
}
.pulldown {
  margin: 0.2em 0;
  padding: 0.2em;
  outline: var(--outline-c1);
}
.pulldown > label > input {
  appearance: none;
  display: none;
}
.pulldown > label > h4 {
  user-select: none;
  cursor: pointer;
}
.pulldown > label > h4::before {
  vertical-align: 0.3em;
  padding-inline: 0.2em 0.5em;
  font-size: 0.5em;
  content: "╋";
}
.pulldown:has(input:checked) > label > h4::before {
  content: "━";
}
.pulldown > ul {
  /* pulldown */
  visibility: collapse;
  height: 0;
  margin-block: 0;
  transition:
    height 0.3s,
    margin-block 0.3s;
  /* fashion */
  scrollbar-gutter: stable;
  overflow-y: auto;
  padding-right: 0.2em;
}
.pulldown:has(input:checked) > ul {
  /* pulldown */
  visibility: visible;
  height: 5em;
  margin-block: 0.2em;
}

/* docarea */

article#DOC {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60svh;
}

/* footer */

footer {
  text-align: center;
}