/*--- Pico.css カスタマイズ ---*/
:root {
  --pico-font-size:14px;
  --pico-font-family-sans-serif:"Segoe UI","system-ui","Yu Gothic UI","Meiryo UI"; /*"local Noto Sans JP",sans-serif,*/
  --pico-font-family-monospace:var(--pico-font-family-sans-serif);

  --pico-form-element-spacing-horizontal:0.5rem;
  --pico-form-element-spacing-vertical:0.5rem;

  text-autospace:normal;
  text-box:trim-both cap alphabetic;

  font-weight:400;
  letter-spacing:0.02em;

  user-select:none;
}
@font-face {
  font-family:"local Noto Sans JP";
  src:local("Noto Sans JP");
}

article > header {
  font-weight:bolder;
}

/*--- カスタマイズ ---*/
.pointer {
  cursor:default;
  text-decoration:none;
}
.pointer:hover {
  cursor:pointer;
  text-decoration:underline;
}

.success { color:limegreen; }
.success::before {
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="limegreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>');
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
}

.error { color:orangered; }
.error::before {
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="orangered" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>');
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
}

.info { color:dodgerblue; }
.info::before {
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="dodgerblue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
}

.warning { color:orange; }
.warning::before {
  content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="orange" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>');
  display:inline-block;
  vertical-align:middle;
  margin-right:4px;
}

.icon-text {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:3px;
}

.align-right  { text-align:right; }
.align-center { text-align:center; }
.align-left   { text-align:left; }

.valign-top {
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-end;
}
.valign-center {
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
}
.valign-bottom {
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-start;
}

.padding-1 { padding:0.5rem; }
.padding-2 { padding:1.0rem; }
.padding-3 { padding:1.5rem; }
.padding-4 { padding:2.0rem; }

.padding-v-1 { padding-top:0.5rem; padding-bottom:0.5rem; }
.padding-v-2 { padding-top:1.0rem; padding-bottom:1.0rem; }
.padding-v-3 { padding-top:1.5rem; padding-bottom:1.5rem; }
.padding-v-4 { padding-top:2.0rem; padding-bottom:2.0rem; }

.padding-h-1 { padding-left:0.5rem; padding-right:0.5rem; }
.padding-h-2 { padding-left:1.0rem; padding-right:1.0rem; }
.padding-h-3 { padding-left:1.5rem; padding-right:1.5rem; }
.padding-h-4 { padding-left:2.0rem; padding-right:2.0rem; }

.margin-1 { margin:0.5rem; }
.margin-2 { margin:1.0rem; }
.margin-3 { margin:1.5rem; }
.margin-4 { margin:2.0rem; }

.margin-v-0 { margin-top:0rem;   margin-bottom:0rem; }
.margin-v-1 { margin-top:0.5rem; margin-bottom:0.5rem; }
.margin-v-2 { margin-top:1.0rem; margin-bottom:1.0rem; }
.margin-v-3 { margin-top:1.5rem; margin-bottom:1.5rem; }
.margin-v-4 { margin-top:2.0rem; margin-bottom:2.0rem; }

.margin-h-0 { margin-left:0rem;   margin-right:0rem; }
.margin-h-1 { margin-left:0.5rem; margin-right:0.5rem; }
.margin-h-2 { margin-left:1.0rem; margin-right:1.0rem; }
.margin-h-3 { margin-left:1.5rem; margin-right:1.5rem; }
.margin-h-4 { margin-left:2.0rem; margin-right:2.0rem; }

.font-bold      { font-weight:bolder; }
.font-small     { font-size:small; }
.font-large     { font-size:large; }
.font-primary   { color:var(--pico-primary-background);   }
.font-secondary { color:var(--pico-secondary-background); }
.font-contrast  { color:var(--pico-contrast-background);  }
.font-muted     { color:var(--pico-muted-color);          }

.hidden { display:none; }

/*--- ダイアログ ---*/
.dialog-width {
  width:100%;
  max-width:1024px;
}

.toolbar {
  border: solid thin var(--pico-muted-border-color);
  border-radius: 8px;
}
.toolbar > ul > li {
  padding:7px;
  padding-left:14px;
  padding-right:14px;
}

.button-group {
  display:flex;
  gap:7px;
  justify-content:flex-end;
}
.button-group > button {
  margin:0px;
}

/*--- 標準レイアウト（simple） ---*/
.simple {
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100vh;

  padding-left:0px;
  padding-right:0px;
}


main {
  overflow-x:hidden;
  overflow-y:auto;
  min-height:0;

  display:grid;
  gap:0rem;
  grid-template-columns:0% 1fr 0%;
}
main.menu {
  gap:0.5rem;
  grid-template-columns:20% 1fr  0%;
}
main.prop {
  gap:0.5rem;
  grid-template-columns: 0% 1fr 30%;
}
main.menu.prop {
  gap:0.5rem;
  grid-template-columns:20% 1fr 30%;
}
main      aside.menu { visibility:hidden;  }
main.menu aside.menu { visibility:visible; }
main      aside.prop { visibility:hidden;  }
main.prop aside.prop { visibility:visible; }

.menu nav details ul {
  margin-left:0.25rem;
  border-left:var(--pico-border-width) solid var(--pico-muted-border-color);
}

footer {
  position:sticky;
  bottom:0;
}

nav > ul > li {
  display:flex;
  align-items:center;
}

.label {
  display:grid;
}
.label > span {
  white-space:nowrap;
  overflow-x:hidden;
  text-overflow:ellipsis;
}

fieldset {
  border:solid 1px var(--pico-muted-border-color);
  border-radius:var(--pico-border-radius);
  padding:7px;
  padding-top:4px;
  padding-bottom:3px;
}

/*--- テーブル ---*/
table {
  font-size:100%;
}
thead, tbody, tr {
  display:table;
  width:100%;
  table-layout:fixed;
}
tbody {
  display:block;
  overflow-y:auto;
  max-height:360px;
}
.rows-5  { max-height:180px; }
.rows-10 { max-height:360px; }
.rows-15 { max-height:540px; }
.rows-20 { max-height:720px; }
th, td {
  white-space:nowrap;
  overflow-x:hidden;
  text-overflow:ellipsis;
}

/*--- タブ ---*/
.tab input[type="radio"] {
  display:none;
}

.tab label {
  padding:4px var(--pico-spacing);
  background:none;
  text-align:center;
  color:var(--pico-secondary);
  white-space:nowrap;
  overflow:hidden;
}
.tab.horizontal input[type="radio"]:checked + label {
  border-bottom:solid 1px var(--pico-primary-background);
  font-weight:bolder;
  color:var(--pico-primary-background);
}
.tab.horizontal input[type="radio"] + label {
  border-bottom:solid 1px var(--pico-muted-border-color);
}
.tab.vertical input[type="radio"]:checked + label {
  border-right:solid 1px var(--pico-primary-background);
  font-weight:bolder;
  color:var(--pico-primary-background);
}
.tab.vertical input[type="radio"] + label {
  border-right:solid 1px var(--pico-muted-border-color);
}

/* 横並び */
.tab.horizontal {
  display:flex;
  flex-direction:row;
  align-items:center;
  overflow-x:hidden;
  white-space:nowrap;
}

.tab.horizontal label {
  display:inline-block;
  margin-right:4px;
}

/* 縦並び */
.tab.vertical {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  width:100%;
}
.tab.vertical label {
  display:block;
  width:8rem;
  text-align:left;
}

.tab-vertical-grid {
  grid-template-columns:8rem 1fr;
}

/* タブページ */
.tabpage {
  display:none;
  padding:4px 4px;
}
.tabpage.checked {
  display: block;
}
/*--*/